/* ── Design tokens ────────────────────────────────────────────────────── */
:root {
    --brand: #0f172a;
    --brand-mid: #1e3a5f;
    --accent: #3b82f6;
    --border: #e2e8f0;
    --bg: #f1f5f9;
    --text: #0f172a;
    --muted: #64748b;
    --r: .75rem;
    --sh: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
    --sh-md: 0 4px 12px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
    --sh-lg: 0 10px 25px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.04);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
    color: var(--text);
    background: var(--bg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.card { border-radius: var(--r); border-color: var(--border); }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.stat-card {
    border: none !important;
    border-radius: var(--r);
    transition: transform .15s, box-shadow .15s;
    box-shadow: var(--sh);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md) !important; }
.stat-value { font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat-label { font-size: .75rem; color: var(--muted); margin-top: .4rem; font-weight: 500; }
.stat-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table thead th {
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
}
.table-hover tbody tr:hover { background-color: rgba(59,130,246,.04); }

/* ── Menu table ───────────────────────────────────────────────────────── */
.menu-table th, .menu-table td { vertical-align: middle; white-space: nowrap; }
.item-passive { background-color: #fffbeb !important; }
.category-divider-row td {
    background: linear-gradient(to right,#f8fafc,#f1f5f9);
    border-top: 2px solid var(--border);
    font-size: .78rem;
}

/* ── Small button ─────────────────────────────────────────────────────── */
.btn-xs { padding:.15rem .4rem; font-size:.75rem; border-radius:.25rem; line-height:1.4; }

/* ── MODAL FIX: form inside modal-dialog-scrollable ──────────────────── */
.modal-dialog-scrollable .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.modal-dialog-scrollable .modal-body { overflow-y: auto !important; }

/* ════════════════════════════════════════════════════════════════════════
   MAIN ADMIN LAYOUT
═══════════════════════════════════════════════════════════════════════ */
.admin-topbar {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
    height: 60px;
    display: flex; align-items: center;
    padding: 0 1.75rem;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 1020;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.admin-topbar-brand {
    color: #fff; font-weight: 700; font-size: 1.05rem;
    text-decoration: none; display: flex; align-items: center; gap: .625rem;
    letter-spacing: -.01em;
}
.admin-topbar-brand .ib {
    width: 32px; height: 32px;
    background: rgba(255,255,255,.15);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   RESTAURANT ADMIN SIDEBAR
═══════════════════════════════════════════════════════════════════════ */
.r-layout { display: flex; min-height: 100vh; }
.r-sidebar {
    width: 240px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--brand) 0%, #162035 100%);
    display: flex; flex-direction: column;
    min-height: 100vh;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
}
.r-sidebar-brand {
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.r-sidebar-brand .av {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.2rem;
    margin-bottom: .75rem; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59,130,246,.4);
}
.r-sidebar-brand .name {
    color: #fff; font-weight: 600; font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: -.01em;
}
.r-sidebar-brand .email {
    color: rgba(255,255,255,.35); font-size: .68rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 2px;
}
.r-sidebar-nav { flex: 1; padding: .75rem 0; }
.r-sidebar-section {
    padding: .6rem 1.25rem .2rem;
    font-size: .63rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.22);
}
.r-sidebar-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.25rem;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    font-size: .84rem; font-weight: 500;
    border-left: 2px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    margin: 1px 0;
}
.r-sidebar-link i { font-size: .95rem; width: 18px; text-align: center; flex-shrink: 0; }
.r-sidebar-link:hover {
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.06);
    border-left-color: rgba(255,255,255,.2);
}
.r-sidebar-link.active {
    color: #fff;
    background: rgba(59,130,246,.18);
    border-left-color: var(--accent);
    font-weight: 600;
}
.r-sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.07); }
.r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.r-content { padding: 1.75rem; flex: 1; }

@media (max-width: 991.98px) {
    .r-sidebar { display: none !important; }
    .r-content { padding: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   PUBLIC MENU
═══════════════════════════════════════════════════════════════════════ */
.hero-section { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); }
.public-menu-image { width: 100%; height: 200px; object-fit: cover; }
.restaurant-logo { width: 72px; height: 72px; object-fit: cover; }
.menu-nav { top: 0; z-index: 1010; }
.social-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff;
    text-decoration: none; font-size: 1.1rem; transition: background .2s;
}
.social-icons a:hover { background: rgba(255,255,255,.3); }
.category-header-img {
    width: 100%; height: 140px;
    background-size: cover; background-position: center;
    border-radius: var(--r); position: relative; overflow: hidden;
}
.category-header-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 100%);
    display: flex; flex-direction: column; justify-content: center;
    padding: 1.25rem 1.5rem;
}

/* ════════════════════════════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════════════════════════ */
.auth-page { background: linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%); }
.empty-state {
    padding: 2.5rem 1rem; border: 2px dashed #cbd5e1;
    border-radius: var(--r); color: #94a3b8; text-align: center; background: #fff;
}
.qr-preview {
    border: 4px solid var(--border); border-radius: var(--r);
    padding: 1rem; display: inline-block; background: #fff;
    box-shadow: var(--sh-lg);
}