.textarea-sm { min-height: 80px; }

/* Settings form styling (admin) */
.settings-form { max-width: 720px; }
.settings-form .form-group { margin-bottom: 14px; }
.settings-form label { display:block; margin-bottom:6px; font-weight:600; color:#1f2937; }
.settings-form input[type="text"], .settings-form input[type="number"], .settings-form textarea, .settings-form select {
    width:100%; padding:10px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; color:#111827;
}
.settings-form .btn { padding:10px 14px; border-radius:8px; }
.settings-status { font-size:13px; color:#6b7280; }

/* Shared UI button styles for the entire site */
:root{ --btn-bg: #667eea; --btn-bg-2: #4f5fd6; --btn-hover:#5568d3; --btn-active:#445a9f; --btn-radius:8px; --btn-color: #fff; }
button, .btn, a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--btn-color);
    background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-2));
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
    box-shadow: 0 6px 18px rgba(79,95,214,0.08);
}

button.secondary, .btn-secondary, a.button.secondary {
    background: #f3f4f6;
    color: #111827;
    box-shadow: none;
    font-weight: 600;
}

button.ghost, .btn-ghost, a.button.ghost {
    background: transparent;
    color: var(--btn-bg);
    border: 1px solid rgba(102,126,234,0.12);
    box-shadow: none;
}

button:hover, .btn:hover, a.button:hover { transform: translateY(-2px); }
button:active, .btn:active, a.button:active { transform: translateY(0); }
button:disabled, .btn[disabled], a.button.disabled { opacity: .6; cursor: not-allowed; transform:none; }

/* Small sizes */
button.sm, .btn-sm { padding:6px 10px; font-size:13px; border-radius:6px; }
/* Icon only */
button.icon, .btn-icon { padding:8px; width:36px; height:36px; }

/* Utility for link-like buttons */
a.button { display:inline-flex; }

/* Card / container style for admin panels */
.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 8px 28px rgba(17,24,39,0.06);
    margin-bottom: 18px;
    border: 1px solid rgba(15,23,42,0.03);
}

.card .card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.badge {
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:12px;
}
.badge.info { background:#e6f0ff; color:#1e3a8a; }
.badge.warn { background:#fff7ed; color:#92400e; }
.badge.success { background:#ecfdf5; color:#065f46; }

/* Skeleton placeholder */
.skeleton { background: linear-gradient(90deg,#f3f4f6 0%, #eceff3 50%, #f3f4f6 100%); background-size:200% 100%; animation: shimmer 1.2s linear infinite; border-radius:8px; }
@keyframes shimmer { from { background-position:200% 0 } to { background-position:-200% 0 } }
.skeleton-row { height:16px; margin-bottom:10px; }

/* Table improvements */
table { width:100%; border-collapse:collapse; }
table thead th { text-align:left; padding:10px 8px; color:#ffffff; background-color:#1f2937; font-weight:700; border-bottom:1px solid rgba(15,23,42,0.06); }
table tbody td { padding:12px 8px; border-bottom:1px solid rgba(15,23,42,0.03); vertical-align:middle; }

.modal-card { border-radius:10px; padding:20px; box-shadow:0 14px 40px rgba(2,6,23,0.12); }

.muted { color:#6b7280; font-size:13px; }

/* Utility helpers */
.toolbar { display:flex; gap:8px; margin-bottom:20px; align-items:center; }
.inline-form { display:inline-block; margin-left:8px; }
.mt-20 { margin-top:20px; }
.ml-8 { margin-left:8px; }
.thumb { height:50px; width:auto; border-radius:6px; }

.search-row { display:flex; gap:10px; width:100%; }

.empty-state { text-align: center; padding: 20px; color: #6b7280; }
.form-textarea { width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; min-height:100px; resize:vertical; }

/* Small spacing utilities */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.ml-8 { margin-left: 8px; }

.hidden { display: none !important; }
.w-100 { width: 100% !important; }
.textarea-sm { min-height: 80px; }

/* width utilities for skeleton placeholders */
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }

/* Modal overlay & card centering */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display:flex; align-items:center; justify-content:center; }
.modal-card { background: #fff; border-radius:10px; padding:20px; box-shadow:0 14px 40px rgba(2,6,23,0.12); min-width:420px; max-width:90%; }