/* ============================================================
   BANDWIDTH TIFFIN — Admin Portal CSS
   Theme: Identical to Homepage (Outfit, #080c0d, #e63946)
   Version: 1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

:root {
    --bg:           #080c0d;
    --bg-card:      #0f1315;
    --bg-card2:     #141a1d;
    --bg-card3:     #1a2124;
    --border:       rgba(255,255,255,0.07);
    --border-hover: rgba(230,57,70,0.35);
    --border-active:rgba(230,57,70,0.6);
    --text:         #f0f4f5;
    --text-muted:   #8a9ba3;
    --text-dim:     #5a6e77;
    --accent:       #e63946;
    --accent-red:   #e63946;
    --accent-light: #ff6b74;
    --accent-dark:  #b52a35;
    --gold:         #f4a261;
    --radius:       14px;
    --radius-lg:    20px;
    --radius-pill:  50px;
    --shadow:       0 4px 24px rgba(0,0,0,0.5);
    --shadow-accent:0 8px 32px rgba(230,57,70,0.2);
    --trans:        0.25s ease;
    /* Status */
    --green:        #32CD32;
    --green-bg:     rgba(50,205,50,0.1);
    --yellow:       #FFBF00;
    --yellow-bg:    rgba(255,191,0,0.1);
    --red-s:        #FF6961;
    --red-bg:       rgba(255,105,97,0.1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family:'Outfit',sans-serif;
    background:var(--bg); color:var(--text);
    line-height:1.6; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    background-image:
        radial-gradient(ellipse 800px 400px at 20% 10%, rgba(230,57,70,0.03), transparent),
        radial-gradient(ellipse 600px 300px at 80% 90%, rgba(244,162,97,0.02), transparent);
}
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; font-family:'Outfit',sans-serif; }
input,select,textarea { font-family:'Outfit',sans-serif; }
h1,h2,h3,h4,h5 { font-family:'Outfit',sans-serif; font-weight:700; line-height:1.2; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bg-card3); border-radius:4px; }

/* ─── Utility ─────────────────────────────────────── */
.hidden { display:none !important; }
.flex { display:flex; }
.flex-1 { flex:1; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }

/* ─── Admin Shell ─────────────────────────────────── */
.admin-shell,
.admin-dashboard-page {
    display:flex; min-height:100vh;
}
/* Dashboard visibility — controlled by .active class */
.admin-dashboard-page    { display:none; }
.admin-dashboard-page.active { display:flex; }

/* ─── Admin Sidebar ───────────────────────────────── */
.admin-sidebar {
    width:250px; flex-shrink:0;
    background:linear-gradient(180deg, var(--bg-card) 0%, #0a0f11 100%);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    padding:28px 16px;
    position:sticky; top:0; height:100vh;
    overflow-y:auto;
}
.admin-brand {
    display:flex; align-items:center; gap:12px;
    margin-bottom:8px; padding:0 6px;
}
.brand-logo {
    width:40px; height:40px; border-radius:10px;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:1.1rem;
    box-shadow:var(--shadow-accent); flex-shrink:0;
}
.brand-text { line-height:1.2; }
.brand-text strong { font-size:0.95rem; font-weight:900; display:block; }
.brand-text span { font-size:0.7rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.8px; }

.admin-role-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(230,57,70,0.1); border:1px solid rgba(230,57,70,0.25);
    color:var(--accent); padding:4px 10px; border-radius:var(--radius-pill);
    font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px;
    margin:16px 6px 24px; width:fit-content;
}

.admin-nav { display:flex; flex-direction:column; gap:3px; flex:1; }
.admin-nav-item {
    display:flex; align-items:center; gap:11px;
    padding:11px 14px; border-radius:12px; border:none;
    background:transparent; color:var(--text-muted);
    font-size:0.87rem; font-weight:500; cursor:pointer;
    transition:all 0.2s ease; text-align:left; width:100%;
    position:relative;
}
.admin-nav-item i { font-size:15px; width:18px; text-align:center; flex-shrink:0; transition:color 0.2s; }
.admin-nav-item:hover:not(.active) { background:var(--bg-card2); color:var(--text); }
.admin-nav-item:hover:not(.active) i { color:var(--accent-light); }
.admin-nav-item.active {
    background:linear-gradient(135deg, rgba(230,57,70,0.12), rgba(230,57,70,0.06));
    color:var(--accent);
    border-left:3px solid var(--accent); padding-left:11px;
    box-shadow:inset 0 0 20px rgba(230,57,70,0.04);
}
.admin-nav-item .nav-count {
    margin-left:auto; background:var(--accent); color:#fff;
    font-size:0.66rem; font-weight:700; border-radius:20px; padding:2px 7px;
}

.admin-nav-divider { height:1px; background:var(--border); margin:10px 0; }

.sidebar-user {
    padding:14px; border-radius:12px;
    border:1px solid var(--border); background:var(--bg-card2);
    display:flex; align-items:center; gap:11px;
    margin-top:auto;
}
.sidebar-user-av {
    width:36px; height:36px; border-radius:50%;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:0.95rem; flex-shrink:0;
}
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-info strong { font-size:0.82rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-info span { font-size:0.7rem; color:var(--text-muted); }
.sidebar-logout-btn {
    width:28px; height:28px; border-radius:8px; border:1px solid var(--border);
    background:transparent; color:var(--text-muted); display:flex;
    align-items:center; justify-content:center; cursor:pointer; transition:var(--trans); flex-shrink:0;
}
.sidebar-logout-btn:hover { color:var(--red-s); border-color:rgba(255,105,97,0.3); }

/* ─── Admin Main ──────────────────────────────────── */
.admin-main {
    flex:1; display:flex; flex-direction:column;
    min-height:100vh; overflow:hidden;
}

/* ─── Top Bar ─────────────────────────────────────── */
.admin-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; border-bottom:1px solid var(--border);
    background:rgba(15,19,21,0.85);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    position:sticky; top:0; z-index:50;
}
.topbar-left h1 { font-size:1.35rem; font-weight:800; margin-bottom:2px; }
.topbar-left p  { font-size:0.8rem; color:var(--text-muted); }
.topbar-title { font-size:1.1rem; font-weight:700; letter-spacing:-0.01em; }
.topbar-right { display:flex; align-items:center; gap:12px; }

.topbar-btn {
    display:flex; align-items:center; gap:7px;
    padding:9px 16px; border-radius:var(--radius); border:1px solid var(--border);
    background:var(--bg-card2); color:var(--text-muted);
    font-size:0.82rem; font-weight:600; cursor:pointer; transition:var(--trans);
}
.topbar-btn:hover { color:var(--text); border-color:var(--border-hover); }
.topbar-btn i { font-size:14px; }
.topbar-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.topbar-btn.primary:hover { background:var(--accent-light); border-color:var(--accent-light); }

.topbar-badge {
    width:8px; height:8px; border-radius:50%;
    background:var(--accent); display:inline-block; flex-shrink:0;
}

/* ─── Admin Content ───────────────────────────────── */
.admin-content {
    flex:1; padding:32px;
    overflow-y:auto;
}

/* Admin Tabs */
.admin-tab { display:none; animation:fadeSlide 0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
.admin-tab.active { display:block; }
@keyframes fadeSlide {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ─── Cards ───────────────────────────────────────── */
.card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    transition:border-color var(--trans);
}
.card:hover { border-color:var(--border-hover); }
.card-p { padding:24px; }
.card-p-sm { padding:18px; }

/* ─── Section Header ──────────────────────────────── */
.sec-hd {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px;
}
.sec-hd h2 { font-size:1.05rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.sec-hd h2 i { color:var(--accent); font-size:16px; }
.sec-hd-right { display:flex; align-items:center; gap:8px; }

/* ─── KPI Grid ────────────────────────────────────── */
.kpi-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:18px; margin-bottom:28px;
}
.kpi-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px; transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    position:relative; overflow:hidden;
}
.kpi-card:hover { border-color:var(--border-hover); transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(230,57,70,0.1); }
.kpi-card::before {
    content:''; position:absolute;
    top:-40px; right:-40px;
    width:140px; height:140px; border-radius:50%;
    background:radial-gradient(circle, rgba(230,57,70,0.07), transparent 70%);
    pointer-events:none; transition:opacity 0.3s;
}
.kpi-card:hover::before { opacity:1.5; }
.kpi-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.kpi-icon {
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.kpi-icon.red    { background:rgba(230,57,70,0.1); color:var(--accent); }
.kpi-icon.green  { background:var(--green-bg); color:var(--green); }
.kpi-icon.blue   { background:rgba(59,130,246,0.1); color:#60a5fa; }
.kpi-icon.orange { background:rgba(244,162,97,0.1); color:var(--gold); }
.kpi-icon.purple { background:rgba(167,139,250,0.1); color:#a78bfa; }

.kpi-trend {
    display:flex; align-items:center; gap:4px;
    font-size:0.72rem; font-weight:700; padding:3px 9px;
    border-radius:var(--radius-pill);
}
.kpi-trend.up   { background:var(--green-bg); color:var(--green); }
.kpi-trend.down { background:var(--red-bg); color:var(--red-s); }
.kpi-trend.flat { background:var(--bg-card2); color:var(--text-muted); }

.kpi-value { font-size:1.85rem; font-weight:900; line-height:1; margin-bottom:5px; letter-spacing:-0.02em; }
.kpi-label { font-size:0.78rem; color:var(--text-muted); font-weight:500; letter-spacing:0.02em; }

/* ─── Chart Wrappers ──────────────────────────────── */
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:28px; }
.chart-wrap { padding:24px; }
.chart-canvas-wrap { position:relative; height:240px; margin-top:16px; }

/* ─── Tables ──────────────────────────────────────── */
.admin-table-wrap { overflow-x:auto; }
.admin-table {
    width:100%; border-collapse:separate; border-spacing:0;
    font-size:0.85rem;
}
.admin-table thead tr {
    background:var(--bg-card2);
}
.admin-table th {
    padding:12px 16px; text-align:left;
    color:var(--text-muted); font-size:0.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.8px;
    border-bottom:1px solid var(--border);
}
.admin-table th:first-child { border-radius:10px 0 0 0; }
.admin-table th:last-child  { border-radius:0 10px 0 0; }
.admin-table td {
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}
.admin-table tbody tr { transition:all 0.2s ease; }
.admin-table tbody tr:hover td { background:rgba(230,57,70,0.02); }
.admin-table tbody tr:hover { box-shadow:inset 3px 0 0 var(--accent); }
.admin-table tbody tr:last-child td { border-bottom:none; }

/* ─── Search & Filter Bar ─────────────────────────── */
.filter-bar {
    display:flex; gap:12px; margin-bottom:20px;
    flex-wrap:wrap; align-items:center;
}
.search-box {
    display:flex; align-items:center; gap:9px;
    background:var(--bg-card2); border:1px solid var(--border);
    border-radius:var(--radius); padding:10px 16px;
    flex:1; min-width:200px; transition:all 0.25s ease;
}
.search-box:focus-within { border-color:var(--border-hover); box-shadow:0 0 0 3px rgba(230,57,70,0.08); }
.search-box i { color:var(--text-dim); font-size:14px; flex-shrink:0; }
.search-box input {
    background:transparent; border:none; outline:none;
    color:var(--text); font-size:0.87rem; width:100%;
}
.search-box input::placeholder { color:var(--text-dim); }

.filter-select {
    background:var(--bg-card2); border:1px solid var(--border);
    border-radius:var(--radius); padding:10px 14px;
    color:var(--text-muted); font-size:0.85rem; cursor:pointer;
    transition:var(--trans); outline:none; appearance:none;
    padding-right:32px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a9ba3' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
}
.filter-select:focus { border-color:var(--border-hover); }

/* ─── Buttons ─────────────────────────────────────── */
.btn-primary {
    display:inline-flex; align-items:center; gap:7px;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color:#fff;
    border:none; border-radius:var(--radius);
    padding:10px 20px; font-weight:700; font-size:0.88rem;
    cursor:pointer; transition:all 0.25s ease;
    box-shadow:0 2px 12px rgba(230,57,70,0.15);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(230,57,70,0.3); filter:brightness(1.08); }
.btn-primary:active { transform:translateY(0); box-shadow:0 2px 8px rgba(230,57,70,0.2); }
.btn-primary:disabled { opacity:0.45; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }

.btn-ghost {
    display:inline-flex; align-items:center; gap:7px;
    background:transparent; color:var(--text-muted);
    border:1px solid var(--border); border-radius:var(--radius);
    padding:10px 20px; font-weight:600; font-size:0.88rem;
    cursor:pointer; transition:var(--trans);
}
.btn-ghost:hover { color:var(--text); border-color:var(--border-hover); background:var(--bg-card2); }

.btn-sm {
    padding:7px 14px; font-size:0.78rem; border-radius:8px; min-height:0;
}
.btn-icon-sm {
    width:32px; height:32px; border-radius:8px;
    border:1px solid var(--border); background:transparent;
    color:var(--text-muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:var(--trans); font-size:13px;
}
.btn-icon-sm:hover { color:var(--text); border-color:var(--border-hover); background:var(--bg-card2); }
.btn-icon-sm.danger:hover { color:var(--red-s); border-color:rgba(255,105,97,0.3); }

/* ─── Status Badges ───────────────────────────────── */
.badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.7rem; font-weight:700; padding:3px 10px;
    border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:0.5px;
}
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge.active   { color:var(--green);  background:var(--green-bg); }
.badge.pending  { color:var(--yellow); background:var(--yellow-bg); }
.badge.paused   { color:#60a5fa; background:rgba(59,130,246,0.1); }
.badge.missed   { color:var(--red-s);  background:var(--red-bg); }
.badge.premium  { color:var(--gold);   background:rgba(244,162,97,0.1); }
.badge.basic    { color:var(--text-muted); background:var(--bg-card2); }
.badge.delivered{ color:var(--green);  background:var(--green-bg); }
.badge.no-badge::before { display:none; }

/* ─── Avatar Initials ─────────────────────────────── */
.av {
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; font-weight:800; flex-shrink:0; color:#fff;
}
.av-sm  { width:32px; height:32px; font-size:0.82rem; }
.av-md  { width:40px; height:40px; font-size:0.95rem; }
.av-lg  { width:52px; height:52px; font-size:1.1rem; }
.av-red    { background:var(--accent); }
.av-blue   { background:#3b82f6; }
.av-green  { background:#22c55e; }
.av-purple { background:#8b5cf6; }
.av-gold   { background:#f4a261; }
.av-teal   { background:#14b8a6; }

/* ─── Input Group ─────────────────────────────────── */
.inp-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.inp-group label { font-size:0.74rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.8px; }
.inp-wrap {
    position:relative;
    background:var(--bg-card2); border:1px solid var(--border);
    border-radius:var(--radius); transition:border-color var(--trans);
}
.inp-wrap:focus-within { border-color:var(--border-hover); }
.inp-wrap input, .inp-wrap select, .inp-wrap textarea {
    width:100%; padding:11px 14px;
    background:transparent; border:none; outline:none;
    color:var(--text); font-size:0.88rem;
}
.inp-wrap select { appearance:none; cursor:pointer; }
.inp-wrap select option { background:var(--bg-card2); }
.inp-wrap textarea { resize:vertical; min-height:80px; }
.inp-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:14px; pointer-events:none; }

/* ─── Order Delivery Cards ────────────────────────── */
.order-grid { display:flex; flex-direction:column; gap:10px; }
.order-row {
    display:flex; align-items:center; gap:16px;
    padding:16px 18px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); transition:var(--trans);
}
.order-row:hover { border-color:var(--border-hover); }
.order-row.delivered { border-color:rgba(50,205,50,0.2); background:rgba(50,205,50,0.03); }
.order-row.missed    { border-color:rgba(255,105,97,0.2); background:rgba(255,105,97,0.03); }
.order-num { font-weight:800; font-size:0.78rem; color:var(--text-dim); min-width:28px; }
.order-info { flex:1; min-width:0; }
.order-info h4 { font-size:0.9rem; font-weight:700; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-info p  { font-size:0.78rem; color:var(--text-muted); }
.order-meal { font-size:0.8rem; color:var(--text-muted); min-width:160px; padding:0 12px; border-left:1px solid var(--border); border-right:1px solid var(--border); }
.order-status-toggle {
    display:flex; gap:6px;
}
.toggle-pill {
    padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--border);
    background:transparent; color:var(--text-muted);
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
    cursor:pointer; transition:var(--trans); font-family:'Outfit',sans-serif;
}
.toggle-pill:hover { border-color:var(--border-hover); color:var(--text); }
.toggle-pill.active-delivered { background:var(--green-bg); border-color:rgba(50,205,50,0.3); color:var(--green); }
.toggle-pill.active-missed    { background:var(--red-bg); border-color:rgba(255,105,97,0.3); color:var(--red-s); }
.toggle-pill.active-pending   { background:var(--yellow-bg); border-color:rgba(255,191,0,0.3); color:var(--yellow); }

/* ─── Menu Management ─────────────────────────────── */
.menu-mgmt-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.menu-check-list { display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; }
.menu-check-item {
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:10px;
    border:1px solid var(--border); background:var(--bg-card2);
    cursor:pointer; transition:var(--trans);
}
.menu-check-item:hover { border-color:var(--border-hover); }
.menu-check-item.enabled { border-color:rgba(50,205,50,0.3); background:var(--green-bg); }
.menu-check-item.enabled .check-icon { color:var(--green); }
.check-icon { font-size:16px; color:var(--text-dim); transition:color var(--trans); width:18px; text-align:center; }
.menu-check-item span { font-size:0.88rem; font-weight:500; flex:1; }
.menu-check-item .check-cat { font-size:0.7rem; color:var(--text-dim); background:var(--bg-card); padding:2px 8px; border-radius:var(--radius-pill); }

/* Weekly schedule grid */
.week-schedule { overflow-x:auto; }
.week-grid {
    display:grid; grid-template-columns:120px repeat(7,1fr);
    gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
    min-width:700px;
}
.week-grid-header {
    background:var(--bg-card2); padding:12px 10px;
    font-size:0.72rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.8px; text-align:center;
    border-bottom:1px solid var(--border);
}
.week-grid-header:first-child { text-align:left; padding-left:14px; }
.week-grid-cell {
    padding:9px 10px; border-bottom:1px solid var(--border);
    font-size:0.8rem; display:flex; align-items:center; justify-content:center;
}
.week-grid-cell:nth-child(8n+1) {
    justify-content:flex-start; padding-left:14px; color:var(--text-muted);
    font-weight:600; background:var(--bg-card2); font-size:0.78rem;
}
.week-toggle {
    width:22px; height:22px; border-radius:6px; border:1px solid var(--border);
    background:transparent; cursor:pointer; transition:var(--trans);
    display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent;
}
.week-toggle.on { background:rgba(50,205,50,0.15); border-color:rgba(50,205,50,0.35); color:var(--green); }
.week-toggle:hover { border-color:var(--border-hover); }

/* ─── Analytics ───────────────────────────────────── */
.analytics-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:24px; }
.mini-stat {
    padding:18px; border-radius:var(--radius);
    background:var(--bg-card); border:1px solid var(--border);
    display:flex; align-items:center; gap:14px;
}
.mini-stat-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.mini-stat-val  { font-size:1.4rem; font-weight:900; line-height:1; margin-bottom:3px; }
.mini-stat-label{ font-size:0.75rem; color:var(--text-muted); }

.recent-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.activity-list { display:flex; flex-direction:column; gap:0; }
.activity-item {
    display:flex; align-items:flex-start; gap:12px;
    padding:13px 0; border-bottom:1px solid var(--border);
}
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.activity-info h4 { font-size:0.85rem; margin-bottom:2px; }
.activity-info p  { font-size:0.75rem; color:var(--text-muted); }
.activity-time   { font-size:0.72rem; color:var(--text-dim); margin-left:auto; white-space:nowrap; }

/* ─── Modal / Overlay ─────────────────────────────── */
.overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    z-index:1000; padding:20px; animation:fadeIn 0.22s ease;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal-card {
    width:100%; max-width:520px; padding:32px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); max-height:90vh; overflow-y:auto;
    animation:popIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
    box-shadow:0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
@keyframes popIn { from{opacity:0;transform:scale(0.92) translateY(14px);} to{opacity:1;transform:scale(1) translateY(0);} }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-header h3 { font-size:1.15rem; font-weight:700; }
.modal-close { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--trans); font-size:14px; }
.modal-close:hover { color:var(--red-s); border-color:rgba(255,105,97,0.3); }
.modal-footer { display:flex; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }

/* ─── Sidebar Backdrop (mobile) ──────────────────── */
.sidebar-backdrop {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.6); z-index:199;
}
.sidebar-backdrop.visible { display:block; }

/* ─── Sidebar Header & Logo ───────────────────────── */
.sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px; padding:0 4px;
}
.sidebar-logo { display:flex; align-items:center; gap:10px; }
.logo-icon-sm {
    width:34px; height:34px; border-radius:9px;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:0.95rem; flex-shrink:0;
    box-shadow:var(--shadow-accent);
}
.sidebar-logo-text { line-height:1.2; }
.sb-brand { font-size:0.92rem; font-weight:800; color:var(--text); display:block; }
.sb-sub   { font-size:0.66rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.8px; display:block; }

/* ─── Nav Section Label ───────────────────────────── */
.nav-section-label {
    font-size:0.66rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1px; color:var(--text-dim); padding:4px 13px 2px;
    display:block;
}

/* ─── Neumorphic Card ─────────────────────────────── */
.neumorphic-card {
    background:var(--bg-card2); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px 24px;
}

/* ─── Admin Overlay (modals) ──────────────────────── */
.admin-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    align-items:center; justify-content:center;
    z-index:2000; padding:20px;
    animation:fadeIn 0.22s ease;
}
.admin-overlay.open { display:flex; }

/* ─── Login Page ──────────────────────────────────── */
.admin-login-page {
    min-height:100vh; display:none; align-items:center; justify-content:center;
    background:var(--bg); position:relative; overflow:hidden;
}
.admin-login-page.active { display:flex; }
.login-orb {
    position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0;
}
.orb-1 { width:400px; height:400px; background:radial-gradient(circle,rgba(230,57,70,0.1),transparent 70%); top:-100px; left:-100px; }
.orb-2 { width:300px; height:300px; background:radial-gradient(circle,rgba(244,162,97,0.06),transparent 70%); bottom:-80px; right:-60px; }

.login-card {
    position:relative; z-index:1;
    width:100%; max-width:420px; margin:24px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:48px 40px;
    box-shadow:0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
/* Login card inner elements */
.login-logo {
    display:flex; align-items:center; gap:14px; margin-bottom:32px;
}
.logo-icon {
    width:44px; height:44px; border-radius:12px;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; flex-shrink:0;
    box-shadow:var(--shadow-accent);
}
.logo-brand { font-size:1.05rem; font-weight:800; color:var(--text); display:block; }
.logo-sub   { font-size:0.7rem; color:var(--accent); font-weight:600;
              text-transform:uppercase; letter-spacing:0.8px; display:block; }
.login-footer-note {
    margin-top:20px; font-size:0.78rem; color:var(--text-dim);
    display:flex; align-items:center; gap:6px; text-align:center; justify-content:center;
}
/* Orb variations */
.login-orb--1 { width:360px; height:360px; background:radial-gradient(circle,rgba(230,57,70,0.12),transparent 70%); top:-120px; left:-100px; }
.login-orb--2 { width:280px; height:280px; background:radial-gradient(circle,rgba(244,162,97,0.07),transparent 70%); bottom:-80px; right:-60px; }
.login-orb--3 { width:200px; height:200px; background:radial-gradient(circle,rgba(46,194,126,0.05),transparent 70%); top:40%; left:60%; }

/* ─── Google Sign-In button ─────────────────────── */
.login-divider {
    display:flex; align-items:center; gap:12px;
    margin:20px 0; color:var(--text-dim); font-size:0.8rem;
}
.login-divider::before,
.login-divider::after {
    content:''; flex:1; height:1px; background:var(--border);
}
.btn-google {
    width:100%; display:flex; align-items:center; justify-content:center;
    gap:10px; padding:11px 20px; border-radius:var(--radius);
    background:#fff; color:#333; font-size:0.92rem; font-weight:600;
    border:1px solid #dadce0; cursor:pointer; transition:box-shadow 0.2s, background 0.2s;
    font-family:inherit;
}
.btn-google:hover  { background:#f8f8f8; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.btn-google:active { background:#f0f0f0; }
.btn-google:disabled { opacity:0.6; cursor:not-allowed; }
.google-icon { width:18px; height:18px; flex-shrink:0; }

/* ─── Admin Login Form Inputs (match customer dashboard style) ── */
.login-card .field-group { margin-bottom:18px; }
.login-card .field-label {
    display:block; font-size:0.78rem; font-weight:600;
    color:var(--text-muted); text-transform:uppercase;
    letter-spacing:0.6px; margin-bottom:6px;
}
.login-card .input-wrap {
    display:flex; align-items:center; gap:10px;
    background:var(--bg-card2); border:1px solid var(--border);
    border-radius:var(--radius); padding:0 14px;
    transition:border-color 0.2s, box-shadow 0.2s;
}
.login-card .input-wrap:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(230,57,70,0.12);
}
.login-card .input-icon { color:var(--text-dim); font-size:0.9rem; flex-shrink:0; }
.login-card .field-input {
    flex:1; background:transparent; border:none; outline:none;
    padding:12px 0; font-size:0.92rem; color:var(--text);
    font-family:inherit;
}
.login-card .field-input::placeholder { color:var(--text-dim); }
.login-card .eye-toggle {
    background:none; border:none; color:var(--text-dim);
    cursor:pointer; padding:4px; font-size:0.9rem;
}
.login-card .eye-toggle:hover { color:var(--text); }
.btn-block {
    width:100%; display:flex; align-items:center; justify-content:center;
    gap:8px; padding:13px 20px; font-size:0.95rem;
}

/* Active category sub-option highlight in action panel */
.plan-sub-option.current-category {
    background: rgba(46,194,126,0.1);
    border: 1px solid rgba(46,194,126,0.35) !important;
}
.plan-sub-option.current-category h4::after {
    content: ' ✓ Active';
    font-size: 0.7rem;
    color: #2ec27e;
    font-weight: 600;
    margin-left: 6px;
}

.login-brand { display:flex; align-items:center; gap:14px; margin-bottom:36px; }
.login-brand .brand-text strong { font-size:1.1rem; }
.login-subtitle { font-size:0.88rem; color:var(--text-muted); margin-bottom:24px; }
.login-title { font-size:1.65rem; font-weight:900; margin-bottom:12px; letter-spacing:-0.02em; }
.login-title span { color:var(--accent); }

/* ─── Toast ───────────────────────────────────────── */
.admin-toast {
    position:fixed; top:22px; left:50%;
    transform:translateX(-50%) translateY(-120px);
    padding:11px 22px; border-radius:var(--radius-pill);
    display:flex; align-items:center; gap:9px;
    z-index:9999; transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    font-weight:600; font-size:0.85rem; pointer-events:none;
    white-space:nowrap; max-width:calc(100vw - 40px);
}
.admin-toast.show { transform:translateX(-50%) translateY(0); }
.admin-toast.success { background:var(--green-bg); border:1px solid rgba(50,205,50,0.25); color:var(--green); }
.admin-toast.error   { background:var(--red-bg); border:1px solid rgba(255,105,97,0.25); color:var(--red-s); }
.admin-toast.info    { background:var(--bg-card2); border:1px solid var(--border); color:var(--text); }

/* ─── Spinner ─────────────────────────────────────── */
.spinner { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,0.2); border-top-color:#fff; border-radius:50%; animation:spin 0.75s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ─── Mobile Hamburger (admin) ────────────────────── */
.admin-hamburger { display:none; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width:1280px) {
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .chart-grid { grid-template-columns:1fr; }
    .analytics-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:1100px) {
    .menu-mgmt-grid { grid-template-columns:1fr; }
    .recent-grid    { grid-template-columns:1fr; }
}
@media (max-width:900px) {
    .analytics-row { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .admin-sidebar {
        display:none; position:fixed; left:0; top:0; bottom:0; z-index:200;
        box-shadow:10px 0 30px rgba(0,0,0,0.6);
    }
    .admin-sidebar.open { display:flex; }
    .admin-hamburger {
        display:flex; align-items:center; justify-content:center;
        width:36px; height:36px; border-radius:8px;
        border:1px solid var(--border); background:var(--bg-card2);
        color:var(--text); cursor:pointer; font-size:16px;
    }
    .admin-content { padding:18px; }
    .admin-topbar  { padding:14px 18px; }
    .kpi-grid      { grid-template-columns:1fr 1fr; gap:12px; }
    .filter-bar    { gap:8px; }
    .filter-select { display:none; }
    .order-meal    { display:none; }
}
@media (max-width:480px) {
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .admin-content { padding:12px; }
    .modal-card { padding:22px 18px; margin:12px; }
    .charts-row { grid-template-columns:1fr; }
    .stage-btn { font-size:0.65rem; padding:6px 4px; }
    .admin-toast { max-width:calc(100vw - 20px); }
}

/* ─────────────────────────────────────────────
   TAB SECTION HEADER
───────────────────────────────────────────── */
.tab-section-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
    margin-bottom: 1.5rem;
}
.tab-title   { font-size:1.3rem; font-weight:800; color:var(--text); margin:0; letter-spacing:-0.01em; }
.tab-subtitle{ font-size:.85rem; color:var(--text-muted); margin:.3rem 0 0; }

/* ─────────────────────────────────────────────
   CHARTS ROW
───────────────────────────────────────────── */
.charts-row {
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:1.25rem;
    margin-bottom:1.25rem;
}
.chart-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.5rem;
    transition:border-color 0.25s, box-shadow 0.25s;
}
.chart-card:hover { border-color:rgba(255,255,255,0.1); box-shadow:0 4px 20px rgba(0,0,0,0.25); }
.chart-card-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:1.25rem; flex-wrap:wrap; gap:8px;
}
.chart-title   { font-size:1rem; font-weight:700; color:var(--text); margin:0; }
.chart-subtitle{ font-size:.8rem; color:var(--text-muted); margin:.15rem 0 0; }
.chart-badge {
    background:rgba(230,57,70,.12); color:var(--accent);
    border:1px solid rgba(230,57,70,.25);
    border-radius:20px; padding:3px 12px; font-size:.75rem; font-weight:600;
    white-space:nowrap;
}
.chart-canvas-wrap           { position:relative; height:220px; }
.chart-canvas-wrap--donut    { height:240px; }
@media (max-width:1100px) {
    .charts-row { grid-template-columns:1fr; }
    .chart-canvas-wrap--donut { height:280px; }
}

/* ─────────────────────────────────────────────
   ANALYTICS MINI STATS ROW
───────────────────────────────────────────── */
.analytics-mini-row {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-bottom:1.25rem;
}
.mini-stat-card {
    display:flex; align-items:center; gap:.9rem;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.1rem 1.25rem;
    transition:all 0.25s ease;
}
.mini-stat-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.25); }
.mini-stat-card > .fa-solid {
    font-size:1.3rem; color:var(--accent); flex-shrink:0;
}
.mini-stat-body  { display:flex; flex-direction:column; }
.mini-stat-value { font-size:1.25rem; font-weight:800; color:var(--text); }
.mini-stat-label { font-size:.75rem; color:var(--text-muted); margin-top:.1rem; }
@media (max-width:1100px) { .analytics-mini-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px)  { .analytics-mini-row { grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────
   ACTIVITY CARD
───────────────────────────────────────────── */
.activity-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.5rem;
    transition:border-color 0.25s;
}
.activity-card:hover { border-color:rgba(255,255,255,0.1); }
.activity-card-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.1rem;
}
.activity-live {
    display:flex; align-items:center; gap:6px;
    font-size:.75rem; color:#2ec27e; font-weight:600;
}
.activity-live .fa-circle { font-size:8px; animation:pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ─────────────────────────────────────────────
   ORDER SUMMARY TILES
───────────────────────────────────────────── */
.order-summary-tiles {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:1rem; margin-bottom:1.25rem;
}
.order-tile {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.1rem 1.25rem;
    display:flex; flex-direction:column; gap:.2rem;
    transition:all 0.25s ease;
}
.order-tile:hover       { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.order-tile.tile-green  { border-color:rgba(46,194,126,.25); }
.order-tile.tile-gold   { border-color:rgba(244,162,97,.25); }
.order-tile.tile-red    { border-color:rgba(230,57,70,.25); }
.tile-value {
    font-size:1.6rem; font-weight:800; color:var(--text); line-height:1;
}
.tile-label { font-size:.78rem; color:var(--text-muted); }
.tile-green .tile-value { color:#2ec27e; }
.tile-gold  .tile-value { color:var(--gold); }
.tile-red   .tile-value { color:var(--accent); }
@media (max-width:768px) { .order-summary-tiles { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .order-summary-tiles { grid-template-columns:1fr 1fr; } }

/* ─────────────────────────────────────────────
   TABLE EXTRAS — plan badge, area tag
───────────────────────────────────────────── */
.plan-badge {
    display:inline-block; padding:2px 10px; border-radius:20px;
    font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.plan-badge.plan-premium {
    background:rgba(244,162,97,.15); color:var(--gold);
    border:1px solid rgba(244,162,97,.3);
}
.plan-badge.plan-basic {
    background:rgba(138,155,163,.1); color:var(--text-muted);
    border:1px solid var(--border);
}
.area-tag {
    display:inline-block; padding:2px 9px; border-radius:8px;
    font-size:.75rem; background:rgba(255,255,255,.05);
    border:1px solid var(--border); color:var(--text-muted);
}

/* Toggle pill group */
.toggle-pill-group {
    display:flex; gap:4px; flex-wrap:wrap;
}

/* ─────────────────────────────────────────────
   MENU MANAGEMENT — column layout
───────────────────────────────────────────── */
.menu-mgmt-col {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.25rem;
}
.menu-col-header {
    display:flex; align-items:center; gap:.6rem;
    margin-bottom:1rem;
}
.menu-col-header i     { color:var(--accent); font-size:1.1rem; }
.menu-col-header h3    { font-size:1rem; font-weight:700; color:var(--text); margin:0; }
.menu-item-list        { display:flex; flex-direction:column; gap:.5rem; }

/* Weekly section */
.weekly-section {
    margin-top:2rem;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.5rem;
}
.week-grid {
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:.75rem;
}
.week-day-card {
    background:var(--bg-card2); border:1px solid var(--border);
    border-radius:10px; padding:.9rem .75rem;
    display:flex; flex-direction:column; gap:.6rem;
}
.week-day-label {
    font-size:.8rem; font-weight:700; color:var(--accent);
    text-transform:uppercase; letter-spacing:.8px;
}
.week-slot { display:flex; flex-direction:column; gap:.25rem; }
.slot-label {
    font-size:.7rem; color:var(--text-muted); display:flex; align-items:center; gap:4px;
}
.week-input {
    width:100%; padding:5px 8px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:7px; color:var(--text); font-family:var(--font); font-size:.72rem;
    transition:border-color var(--trans);
}
.week-input:focus {
    outline:none; border-color:var(--accent);
}
@media (max-width:1280px) { .week-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px)  { .week-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px)  { .week-grid { grid-template-columns:repeat(2,1fr); } }

/* ─────────────────────────────────────────────
   MODAL EXTRAS — form grid, textarea
───────────────────────────────────────────── */
.form-grid-2 {
    display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
@media (max-width:520px) { .form-grid-2 { grid-template-columns:1fr; } }

.field-select {
    appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238a9ba3' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center;
    background-size:12px;
    padding-right:32px !important;
}
.field-textarea {
    width:100%; resize:vertical;
    padding:.8rem 1rem; border-radius:var(--radius-sm);
    background:var(--bg-input); border:1px solid var(--border);
    color:var(--text); font-family:var(--font); font-size:.9rem; line-height:1.5;
    transition:border-color var(--trans);
}
.field-textarea:focus { outline:none; border-color:var(--accent); }

/* btn-outline */
.btn-outline {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.65rem 1.25rem; border-radius:10px;
    border:1px solid var(--border); background:transparent;
    color:var(--text-muted); font-family:var(--font); font-size:.875rem; font-weight:600;
    cursor:pointer; transition:all var(--trans);
}
.btn-outline:hover {
    border-color:var(--accent); color:var(--text);
}

/* ─────────────────────────────────────────────
   SIDEBAR EXTRAS — close btn, footer
───────────────────────────────────────────── */
.sidebar-close {
    display:none; align-items:center; justify-content:center;
    width:32px; height:32px; border:1px solid var(--border);
    border-radius:8px; background:transparent; color:var(--text-muted);
    cursor:pointer; transition:all var(--trans);
}
.sidebar-close:hover { border-color:var(--accent); color:var(--text); }
@media (max-width:768px) { .sidebar-close { display:flex; } }

.sidebar-footer {
    margin-top:auto; padding:1rem 1.25rem;
    border-top:1px solid var(--border);
    display:flex; align-items:center; gap:.75rem;
}
.sb-user-info {
    display:flex; flex-direction:column;
    overflow:hidden;
}
.sb-user-info > span:first-child {
    font-size:.875rem; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-user-role {
    font-size:.75rem; color:var(--text-muted);
}

/* Topbar mobile menu btn */
.topbar-menu-btn {
    display:none; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:8px;
    border:1px solid var(--border); background:var(--bg-card);
    color:var(--text); cursor:pointer; font-size:15px;
    transition:all var(--trans); flex-shrink:0;
}
.topbar-menu-btn:hover { border-color:var(--accent); }
@media (max-width:768px) { .topbar-menu-btn { display:flex; } }

.topbar-date {
    font-size:.8rem; color:var(--text-muted);
    white-space:nowrap;
}
@media (max-width:600px) { .topbar-date { display:none; } }

/* ─────────────────────────────────────────────
   NAV DANGER VARIANT
───────────────────────────────────────────── */
.admin-nav-item.danger { color:var(--accent); }
.admin-nav-item.danger:hover {
    background:rgba(230,57,70,.12);
    color:var(--accent);
}

/* ─────────────────────────────────────────────
   EMPTY ROW
───────────────────────────────────────────── */
.empty-row {
    text-align:center; color:var(--text-muted);
    padding:2.5rem 1rem; font-size:.9rem;
}


/* ── tbl-btn accent ──────────────────────────────────────── */
.tbl-btn.accent { background:rgba(230,57,70,0.12); color:var(--accent); border-color:rgba(230,57,70,0.25); }
.tbl-btn.accent:hover { background:rgba(230,57,70,0.22); }

/* ── modal-card--xl ──────────────────────────────────────── */
.modal-card--xl { width:min(92vw,860px); max-height:92vh; overflow-y:auto; }

/* ── Customer Account Layout ─────────────────────────────── */
.acc-modal-inner { padding:24px; display:flex; flex-direction:column; gap:20px; }
.acc-header { display:flex; align-items:flex-start; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.av-lg { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; flex-shrink:0; }
.acc-name { font-size:1.25rem; font-weight:700; margin-bottom:6px; }
.acc-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:0.8rem; color:var(--text-muted); }
.acc-meta span { display:flex; align-items:center; gap:5px; }
.acc-section-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.acc-card { background:var(--bg-card2); border:1px solid var(--border); border-radius:14px; padding:16px; }
.acc-card-full { grid-column:1 / -1; }
.acc-card-title { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.acc-card-title i { color:var(--accent); }
.acc-kv { display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.acc-kv:last-child { border-bottom:none; }
.acc-kv span:first-child { color:var(--text-muted); }
.acc-kv-stack { flex-direction:column; align-items:flex-start; gap:4px; }
.acc-addr { font-size:0.78rem; color:var(--text-dim); line-height:1.5; }
.acc-progress-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; margin:6px 0 4px; }
.acc-progress-fill { height:100%; border-radius:999px; transition:width 0.4s; }
.acc-table-wrap { overflow-x:auto; }
.acc-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.acc-table th { text-align:left; padding:8px 12px; color:var(--text-muted); font-weight:600; font-size:0.75rem; text-transform:uppercase; border-bottom:1px solid var(--border); }
.acc-table td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,0.04); }
.acc-table tr:last-child td { border-bottom:none; }
.acc-deliveries { display:flex; flex-direction:column; gap:8px; }
.acc-del-row { display:flex; align-items:center; gap:12px; font-size:0.82rem; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.del-date { width:60px; font-weight:600; color:var(--text-muted); }
.acc-ticket { display:flex; align-items:flex-start; gap:10px; font-size:0.83rem; padding:9px 12px; border-radius:8px; margin-bottom:6px; }
.acc-ticket-ok  { background:rgba(46,194,126,0.08); color:#2ec27e; }
.acc-ticket-open { background:rgba(244,162,97,0.10); color:#f4a261; }
.acc-actions-row { display:flex; flex-wrap:wrap; gap:10px; }
.acc-action-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:8px; font-size:0.82rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--bg-card3); color:var(--text); transition:background 0.2s; }
.acc-action-btn:hover      { background:var(--bg-card2); }
.acc-action-credit         { border-color:rgba(46,194,126,0.3); color:#2ec27e; background:rgba(46,194,126,0.07); }
.acc-action-credit:hover   { background:rgba(46,194,126,0.14); }
.acc-action-status         { border-color:rgba(244,162,97,0.3); color:#f4a261; background:rgba(244,162,97,0.07); }
.acc-action-status:hover   { background:rgba(244,162,97,0.14); }
.acc-action-note           { border-color:rgba(130,180,220,0.3); color:#82b4dc; background:rgba(130,180,220,0.07); }
.acc-action-note:hover     { background:rgba(130,180,220,0.14); }
@media (max-width:600px) { .acc-section-grid { grid-template-columns:1fr; } .acc-header { flex-direction:column; } }

/* ── Action button group inside table cells ─────────────── */
.tbl-action-group { display:flex; align-items:center; gap:6px; }

/* ── modal-card--lg (offline customer form) ──────────────── */
.modal-card--lg { width:min(94vw,680px); max-height:92vh; overflow-y:auto; }

/* ─────────────────────────────────────────────
   PER-CUSTOMER DELIVERY LIST
───────────────────────────────────────────── */
.dlv-card {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:12px; padding:12px 16px; margin-bottom:8px;
    transition:border-color var(--trans);
}
.dlv-card:hover { border-color:var(--border-hover); }
.dlv-info { display:flex; align-items:center; gap:12px; flex:1; min-width:160px; }
.dlv-name { font-size:0.88rem; font-weight:600; color:var(--text); }
.dlv-meta { font-size:0.75rem; color:var(--text-muted); margin-top:2px; }
.dlv-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dlv-meal-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:0.74rem; font-weight:600; padding:3px 10px;
    border-radius:20px; background:rgba(255,255,255,0.06);
    border:1px solid var(--border); color:var(--text-muted);
    white-space:nowrap;
}
.btn-dlv-deliver {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px; font-size:0.8rem; font-weight:600;
    cursor:pointer; transition:all var(--trans);
    background:rgba(46,194,126,0.10); border:1px solid rgba(46,194,126,0.3);
    color:#2ec27e;
}
.btn-dlv-deliver:hover:not(:disabled)   { background:rgba(46,194,126,0.22); }
.btn-dlv-deliver.delivered              { background:rgba(46,194,126,0.20); cursor:default; opacity:0.75; }
.btn-dlv-deliver:disabled               { opacity:0.4; cursor:not-allowed; }
.btn-dlv-miss {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:8px;
    background:rgba(230,57,70,0.08); border:1px solid rgba(230,57,70,0.2);
    color:var(--accent); cursor:pointer; transition:all var(--trans);
    font-size:0.9rem;
}
.btn-dlv-miss:hover:not(:disabled) { background:rgba(230,57,70,0.2); }
.btn-dlv-miss.missed                { background:rgba(230,57,70,0.22); opacity:0.75; cursor:default; }
.btn-dlv-miss:disabled              { opacity:0.35; cursor:not-allowed; }

/* ─────────────────────────────────────────────
   WHATSAPP REMINDER PANEL
───────────────────────────────────────────── */
.reminder-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px; margin-bottom:10px;
    transition:border-color var(--trans);
}
.reminder-card:hover { border-color:var(--border-hover); }
.reminder-meal-row {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:6px 0; border-top:1px solid rgba(255,255,255,0.05);
}
.reminder-meal-row:first-of-type { border-top:none; }
.btn-wa {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 14px; border-radius:8px; font-size:0.8rem; font-weight:600;
    text-decoration:none; transition:all var(--trans); cursor:pointer;
}
.btn-wa-nudge {
    background:rgba(244,162,97,0.12); border:1px solid rgba(244,162,97,0.3);
    color:#f4a261;
}
.btn-wa-nudge:hover  { background:rgba(244,162,97,0.24); }
.btn-wa-confirm {
    background:rgba(37,211,102,0.10); border:1px solid rgba(37,211,102,0.3);
    color:#25d366;
}
.btn-wa-confirm:hover { background:rgba(37,211,102,0.22); }

/* ─────────────────────────────────────────────
   TODAY'S SELECTIONS (Menu tab)
───────────────────────────────────────────── */
.sel-row {
    display:flex; align-items:center; flex-wrap:wrap; gap:12px;
    padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.sel-row:last-child { border-bottom:none; }
.sel-meals { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.sel-meal-col { display:flex; align-items:center; gap:8px; }

/* plan-badge for improved plan */
.plan-badge.plan-improved {
    background:rgba(230,57,70,.12); color:var(--accent);
    border:1px solid rgba(230,57,70,.3);
}

/* ─────────────────────────────────────────────
   KITCHEN STAGE BUTTONS
───────────────────────────────────────────── */
.stage-btn-group {
    display:flex; gap:6px; flex-wrap:wrap;
}
.stage-btn {
    flex:1; min-width:0;
    padding:8px 6px; border-radius:8px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--text-muted); font-size:0.72rem; font-weight:600;
    font-family:inherit; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:4px;
    transition:all 0.2s ease;
}
.stage-btn:hover { border-color:var(--accent); color:var(--text); }
.stage-btn.active {
    background:rgba(230,57,70,0.15); border-color:var(--accent);
    color:#fff; box-shadow:0 0 8px rgba(230,57,70,0.2);
}
.stage-btn i { font-size:0.7rem; }

/* ─────────────────────────────────────────────
   MENU CATEGORY FILTER TABS
───────────────────────────────────────────── */
.menu-cat-tabs {
    display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;
}
.menu-cat-tab {
    padding:6px 14px; border-radius:8px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--text-muted); font-size:0.8rem; font-weight:600;
    font-family:inherit; cursor:pointer;
    transition:all 0.2s ease;
}
.menu-cat-tab:hover { border-color:var(--accent); color:var(--text); }
.menu-cat-tab.active {
    background:rgba(230,57,70,0.12); border-color:var(--accent);
    color:var(--accent);
}