/* ================================================
   evntix Dashboard CSS
   Mirrors evnto design system exactly.
   Font: Inter | Same CSS variables as evnto
================================================ */

/* ── 1. CSS VARIABLES (identical to evnto) ── */
:root {
    --bg:           #f7f4ed;
    --panel:        #ffffff;
    --panel-2:      #f0ede6;
    --border:       #ded6c8;
    --text:         #1c1b18;
    --text-muted:   #6b6257;
    --primary:      #6c4df6;
    --secondary:    #19c3b3;
    --accent:       #ff5c7a;
    --success:      #2fbf71;
    --warning:      #f4a62a;
    --danger:       #ef476f;
    --info:         #3aaed8;
    --panel-hover:  #f9f6ef;
    --input-bg:     #ffffff;
    --card-shadow:  0 2px 10px rgba(20,16,10,0.06);
    --shadow-hover: 0 14px 28px rgba(108,77,246,0.12);
    --badge-success-bg:   #e8f7ef; --badge-success-text: #1f6b43;
    --badge-warning-bg:   #fff3dd; --badge-warning-text: #7a4e12;
    --badge-danger-bg:    #ffe3ea; --badge-danger-text:  #7a2a3b;
    --badge-info-bg:      #e8f4ff; --badge-info-text:    #2b5d7a;
    --modal-overlay: rgba(20,16,12,0.55);
    --scrollbar-thumb: #d4cbb8;
    --text-sm:      12px;
    --text-base:    14px;
    --text-input:   16px;
    --text-section: 18px;
    --text-page:    20px;
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;
    --t: 0.2s ease;
}

[data-theme="dark"] {
    --bg: #0f1117; --panel: #1a1d26; --panel-2: #21252f; --border: #2e3340;
    --text: #f4f4f6; --text-muted: #a0a4bc;
    --primary: #8b6fff;
    --panel-hover: #272b38; --input-bg: #21252f;
    --card-shadow: 0 2px 10px rgba(0,0,0,0.4);
    --badge-success-bg: #0d2e1f; --badge-success-text: #4ddb8f;
    --badge-warning-bg: #2e1f06; --badge-warning-text: #f7c46b;
    --badge-danger-bg:  #2e0d1a; --badge-danger-text:  #f28fab;
    --badge-info-bg:    #0a1e30; --badge-info-text:    #6bcff0;
    --scrollbar-thumb: #363b4a;
}

/* ── 2. RESET & BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
    font-family:'DM Sans',sans-serif;
    color:var(--text);
    font-size:var(--text-base);
    min-height:100vh;
    overflow:hidden;
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
button { cursor:pointer; }
input,select,textarea { font-size:var(--text-base); }
input[type="date"] { max-width:100%; box-sizing:border-box; min-width:0; }
.hidden { display:none !important; }
.muted  { color:var(--text-muted); font-size:var(--text-sm); line-height:1.4; margin-top:4px; }

/* ── 3. LAYOUT — matches evnto .app ── */
.app {
    display:flex;
    flex-direction:row;
    height:100dvh;
    overflow:hidden;
}

.content-wrap {
    display:flex;
    flex-direction:column;
    flex:1;
    overflow:hidden;
    background:var(--panel);
}

/* ── 4. TOPBAR — matches evnto exactly ── */
.topbar {
    height:60px;
    background:var(--panel);
    display:flex;
    align-items:center;
    padding:0 16px;
    gap:8px;
    flex-shrink:0;
    position:relative;
    z-index:100;
}

.menu-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    border-radius:8px;
    cursor:pointer;
    background:var(--panel-2);
    border:none;
    color:var(--text-muted);
    font-size:16px;
    transition:var(--t);
}
.menu-btn:hover { background:var(--panel-hover); color:var(--text); }

.topbar-mobile-logo {
    display:none;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:var(--text);
    flex-shrink:0;
    margin-right:12px;
}
.topbar-mobile-logo .logo-icon {
    width:30px; height:30px;
    background:var(--primary);
    color:#fff;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.topbar .right {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
}

.notification-icon {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    border-radius:8px;
    cursor:pointer;
    background:var(--panel-2);
    border:none;
    color:var(--text-muted);
    font-size:16px;
    transition:var(--t);
}
.notification-icon:hover { background:var(--panel-hover); color:var(--text); }

.topbar-user-wrap { position:relative; }
.topbar-user {
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 8px;
    border-radius:8px;
    cursor:pointer;
    transition:background 0.15s;
    background:var(--panel-2);
    flex-shrink:0;
}
.topbar-user:hover { background:var(--panel-hover); }
.topbar-av {
    width:30px; height:30px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:600;
    flex-shrink:0;
}
.topbar-av-name { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; }
.topbar-av-chev { font-size:11px; color:var(--text-muted); }
.topbar-divider { width:1px; height:24px; background:var(--border); margin:0 4px; flex-shrink:0; }

/* ── MAIN + CONTENT ── */
.main {
    display:flex;
    flex:1;
    overflow:hidden;
}

.content {
    flex:1;
    overflow-y:auto;
    padding:20px;
    background:var(--bg);
    border-top-left-radius:12px;
}
.content::-webkit-scrollbar       { width:8px; }
.content::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:10px; }

.page-header    { margin-bottom:20px; }
.page-header h1 { font-size:var(--text-page); font-weight:var(--weight-semibold); }
.page-header p  { font-size:var(--text-sm); color:var(--text-muted); margin-top:4px; }
.page-actions   { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* ── 5. SIDEBAR — matches evnto exactly ── */
.sidebar {
    width:240px;
    height:100vh;
    background:var(--panel);
    border-right:none;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow-x:hidden;
    overflow-y:auto;
    transition:width 0.2s ease;
    flex-shrink:0;
}

.sidebar h2 {
    font-size:var(--text-sm);
    color:var(--text-muted);
    margin-bottom:10px;
    letter-spacing:0.08em;
    padding:0 4px;
}

.sidebar-header {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:10px;
}

.sidebar-logo {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:var(--text-base);
    font-weight:var(--weight-medium);
    color:var(--text);
    flex-shrink:0;
    text-decoration:none;
    padding:6px 4px;
}
.sidebar-logo:hover { text-decoration:none; }

.logo-text {
    font-size:20px;
    font-weight:700;
    color:var(--primary);
    white-space:nowrap;
    letter-spacing:-0.03em;
}

.sidebar-link,
.nav-item {
    display:flex;
    align-items:center;
    height:36px;
    min-height:36px;
    max-height:36px;
    padding:0 12px;
    width:100%;
    text-decoration:none;
    color:var(--text);
    border-radius:6px;
    transition:background 0.2s ease, color 0.2s ease;
    box-sizing:border-box;
    font-size:var(--text-base);
    font-weight:var(--weight-medium);
}
.sidebar-link:hover,
.nav-item:hover { background:var(--panel-hover); text-decoration:none; }

.sidebar-link.active,
.nav-item.active {
    background:rgba(108,77,246,0.1);
    color:var(--primary);
}

.sidebar-link .icon,
.nav-item .icon {
    width:26px;
    min-width:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.sidebar-link .label,
.nav-item .label { margin-left:10px; white-space:nowrap; }

.sidebar-link.danger      { color:var(--danger); }
.sidebar-link.danger:hover { background:color-mix(in srgb, var(--danger) 12%, transparent); }

.sidebar-bottom {
    margin-top:auto;
    display:flex;
    justify-content:flex-end;
}

.sidebar-collapse-btn {
    display:flex;
    align-items:center;
    height:36px;
    width:100%;
    padding:0 12px;
    border:none;
    background:var(--panel-2);
    color:var(--text-muted);
    border-radius:8px;
    cursor:pointer;
    transition:background 0.2s ease;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    font-size:var(--text-base);
}
.sidebar-collapse-btn:hover { background:var(--panel-hover); color:var(--text); }
.sidebar-collapse-btn .icon  { width:26px; min-width:26px; display:flex; align-items:center; justify-content:center; }
.sidebar-collapse-btn .label { margin-left:10px; white-space:nowrap; }

.sidebar-overlay { display:none; position:fixed; inset:0; background:var(--modal-overlay); z-index:999; }
.sidebar-overlay.active { display:block; }

/* ── 6. GRID ── */
.grid         { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.col-12 { grid-column:span 12; }
.col-10 { grid-column:span 10; }
.col-8  { grid-column:span 8; }
.col-6  { grid-column:span 6; }
.col-4  { grid-column:span 4; }
.col-3  { grid-column:span 3; }
.col-2  { grid-column:span 2; }
.full-width { grid-column:1/-1; }

/* ── 7. CARDS & PANELS ── */
.panel {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    overflow:hidden;
    margin-bottom:16px;
    box-shadow:var(--card-shadow);
}
.panel-header {
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.panel-title  { font-size:15px; font-weight:var(--weight-semibold); color:var(--text); }
.panel-body   { padding:18px; }

.card {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:16px;
    box-shadow:var(--card-shadow);
    transition:box-shadow var(--t), border-color var(--t);
}
.card:hover { border-color:#c5bdb0; box-shadow:var(--shadow-hover); }

/* KPI cards */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.kpi-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--card-shadow); }
.kpi-label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.kpi-value { font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--text); line-height:1; }
.kpi-sub   { font-size:12px; color:var(--text-muted); margin-top:4px; }
.kpi-card.kpi-primary { background:var(--primary); border-color:var(--primary); }
.kpi-card.kpi-primary .kpi-label { color:rgba(255,255,255,0.75); }
.kpi-card.kpi-primary .kpi-value { color:#fff; }
.kpi-card.kpi-primary .kpi-sub   { color:rgba(255,255,255,0.7); }

/* ── 8. BUTTONS ── */
.btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:var(--r-md);
    font-size:var(--text-base);
    font-weight:var(--weight-semibold);
    border:1.5px solid transparent;
    transition:all var(--t);
    cursor:pointer;
    text-decoration:none;
    white-space:nowrap;
    line-height:1;
}
.btn:hover { text-decoration:none; }
.btn-primary  { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:#5a3de0; border-color:#5a3de0; color:#fff; }
.btn-secondary { background:var(--panel-2); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background:var(--panel-hover); border-color:var(--border); }
.btn-outline  { background:transparent; color:var(--text); border-color:var(--border); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); background:rgba(108,77,246,0.06); }
.btn-danger   { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { background:#d43660; color:#fff; }
.btn-ghost    { background:transparent; border-color:transparent; color:var(--text-muted); }
.btn-ghost:hover { background:var(--panel-2); color:var(--text); }
.btn-full     { width:100%; justify-content:center; }
.btn-sm  { padding:5px 12px; font-size:var(--text-sm); }
.btn-lg  { padding:12px 24px; font-size:15px; }
.btn i   { font-size:12px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ── 9. BADGES ── */
.badge {
    display:inline-flex;
    align-items:center;
    padding:3px 9px;
    border-radius:var(--r-full);
    font-size:11px;
    font-weight:600;
}
.badge-success { background:var(--badge-success-bg); color:var(--badge-success-text); }
.badge-warning { background:var(--badge-warning-bg); color:var(--badge-warning-text); }
.badge-danger  { background:var(--badge-danger-bg);  color:var(--badge-danger-text); }
.badge-info    { background:var(--badge-info-bg);    color:var(--badge-info-text); }
.badge-primary { background:rgba(108,77,246,0.1);   color:var(--primary); }
.badge-muted   { background:var(--panel-2); color:var(--text-muted); border:1px solid var(--border); }

/* ── 10. FORMS ── */
.form-group    { margin-bottom:16px; }
.form-label    { display:block; font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-muted); margin-bottom:5px; }
.form-input,
.form-select,
.form-textarea {
    width:100%;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    font-size:var(--text-base);
    color:var(--text);
    background:var(--input-bg);
    transition:border-color var(--t);
    outline:none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,77,246,0.1); }
.form-textarea  { resize:vertical; min-height:100px; }
.form-hint      { font-size:11px; color:var(--text-muted); margin-top:4px; }
.form-row       { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-3     { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-section   { margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.form-section:last-child { border-bottom:none; margin-bottom:0; }
.form-section-title { font-size:15px; font-weight:var(--weight-semibold); margin-bottom:16px; }
.form-check     { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:var(--text-base); }
.form-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); }

/* ── 11. FLASH / ALERTS ── */
.dash-flash {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 16px;
    border-radius:var(--r-md);
    margin-bottom:20px;
    font-size:var(--text-base);
}
.dash-flash-success { background:var(--badge-success-bg); color:var(--badge-success-text); border:1px solid #b3dfc5; }
.dash-flash-error   { background:var(--badge-danger-bg);  color:var(--badge-danger-text);  border:1px solid #f4b8c5; }
.dash-flash-warning { background:var(--badge-warning-bg); color:var(--badge-warning-text); border:1px solid #f9d8a0; }

/* ── 12. TABLE ── */
.dash-table { width:100%; border-collapse:collapse; }
.dash-table th {
    text-align:left;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text-muted);
    padding:10px 16px;
    border-bottom:1px solid var(--border);
    background:var(--panel-2);
}
.dash-table td {
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    font-size:var(--text-base);
    vertical-align:middle;
}
.dash-table tr:last-child td { border-bottom:none; }
.dash-table tbody tr:hover td { background:var(--panel-hover); }
.dash-table-wrap { overflow-x:auto; }

/* ── 13. TABS ── */
.dash-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:20px; gap:0; overflow-x:auto; }
.dash-tab {
    padding:10px 18px;
    font-size:var(--text-base);
    font-weight:var(--weight-semibold);
    color:var(--text-muted);
    border:none;
    background:none;
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    transition:all var(--t);
    text-decoration:none;
    white-space:nowrap;
}
.dash-tab:hover { color:var(--text); text-decoration:none; }
.dash-tab.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ── 14. PROGRESS ── */
.progress { height:5px; background:var(--panel-2); border-radius:var(--r-full); overflow:hidden; margin-top:6px; }
.progress-bar { height:100%; background:var(--primary); border-radius:var(--r-full); transition:width 0.4s ease; }
.progress-warn    { background:var(--warning); }
.progress-success { background:var(--success); }

/* ── 15. EMPTY STATE ── */
.empty-state { text-align:center; padding:48px 24px; }
.empty-state-icon  { font-size:36px; color:var(--text-muted); margin-bottom:14px; }
.empty-state-title { font-size:16px; font-weight:700; margin-bottom:8px; }
.empty-state-sub   { font-size:var(--text-base); color:var(--text-muted); margin-bottom:20px; line-height:1.6; }

/* ── 16. EVENT CARDS ── */
.event-card {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    overflow:hidden;
    display:flex;
    transition:all var(--t);
    box-shadow:var(--card-shadow);
    margin-bottom:10px;
}
.event-card:hover { border-color:#c5bdb0; box-shadow:var(--shadow-hover); }
.event-card-img { width:100px; flex-shrink:0; background:var(--panel-2); overflow:hidden; }
.event-card-img img { width:100%; height:100%; object-fit:cover; }
.event-card-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; min-height:90px; }
.event-card-body { flex:1; padding:14px 16px; min-width:0; }
.event-card-name { font-size:15px; font-weight:var(--weight-semibold); margin-bottom:6px; }
.event-card-meta { font-size:var(--text-sm); color:var(--text-muted); display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.event-card-meta i { color:var(--primary); margin-right:3px; font-size:11px; }
.event-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
.event-card-right { padding:14px 16px; border-left:1px solid var(--border); display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; min-width:120px; flex-shrink:0; }
.event-card-sold { font-size:22px; font-weight:700; color:var(--text); }
.event-card-sold-label { font-size:11px; color:var(--text-muted); }

/* ── 17. TOASTS ── */
.dash-toast {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 16px;
    border-radius:var(--r-md);
    box-shadow:0 8px 24px rgba(20,16,10,0.12);
    font-size:var(--text-base);
    min-width:260px;
    max-width:360px;
    animation:slideUp 0.25s ease;
    background:var(--panel);
    border:1px solid var(--border);
}
.dash-toast-title { font-weight:700; }
.dash-toast-msg   { font-size:var(--text-sm); margin-top:2px; color:var(--text-muted); }
.dash-toast-success { border-left:3px solid var(--success); }
.dash-toast-error   { border-left:3px solid var(--danger); }
.dash-toast-warning { border-left:3px solid var(--warning); }
.dash-toast-info    { border-left:3px solid var(--primary); }
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── 18. MODALS ── */
.modal-overlay { display:none; position:fixed; inset:0; background:var(--modal-overlay); z-index:2000; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--panel); border-radius:var(--r-xl); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 24px 48px rgba(0,0,0,0.2); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-title  { font-size:16px; font-weight:700; }
.modal-close  { background:none; border:none; font-size:18px; color:var(--text-muted); cursor:pointer; padding:4px; transition:color var(--t); }
.modal-close:hover { color:var(--text); }
.modal-body   { padding:20px; }
.modal-footer { padding:16px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* ── 19. MOBILE BOTTOM NAV — matches evnto bottombar.php ── */
.mobile-nav {
    display:none;
    position:fixed;
    bottom:0; left:0; right:0;
    height:64px;
    background:var(--panel);
    border-top:1px solid var(--border);
    align-items:center;
    justify-content:space-around;
    z-index:3000;
}
.mobile-nav-item {
    flex:1;
    height:100%;
    border:none;
    background:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:var(--text-muted);
    text-decoration:none;
    font-size:11px;
    cursor:pointer;
    transition:color var(--t);
}
.mobile-nav-item i      { font-size:18px; }
.mobile-nav-item.active { color:var(--primary); }
.mobile-nav-item:hover  { color:var(--primary); text-decoration:none; }

/* Mobile account panel — matches evnto */
.mobile-account-panel {
    position:fixed;
    inset:0 0 64px 0;
    background:var(--panel);
    z-index:3500;
    transform:translateX(100%);
    transition:transform 0.25s ease;
    overflow-y:auto;
    padding:20px;
}
.mobile-account-panel.open { transform:translateX(0); }
.mobile-account-header {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    background:var(--panel-2);
    border-radius:12px;
    margin-bottom:15px;
}
.mobile-account-avatar {
    width:48px; height:48px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:18px;
}
.mobile-account-info .name  { font-weight:600; font-size:15px; }
.mobile-account-info .email { font-size:12px; color:var(--text-muted); }
.mobile-card       { background:var(--panel-2); border-radius:12px; padding:10px; margin-bottom:12px; }
.mobile-card-title { font-size:12px; color:var(--text-muted); margin-bottom:8px; padding-left:6px; }
.mobile-action       { display:flex; align-items:center; gap:10px; padding:12px; border-radius:10px; text-decoration:none; color:var(--text); transition:0.15s; }
.mobile-action:hover { background:var(--panel-hover); text-decoration:none; }
.mobile-action.danger { color:var(--danger); }

/* ── 20. RESPONSIVE — matches evnto media queries ── */
@media (max-width:768px) {
    body { overflow:auto; }

    .topbar { display:none; }

    .content {
        padding:16px;
        padding-bottom:80px;
        border-top-left-radius:0;
        margin:0;
    }

    /* Sidebar becomes full-screen overlay from right — matches evnto */
    .sidebar {
        position:fixed;
        top:0; left:0;
        bottom:64px;
        width:100%;
        height:auto;
        border-radius:0;
        z-index:3000;
        transform:translateX(100%);
        transition:transform 0.25s ease;
        overflow-y:auto;
        display:block;
    }
    .sidebar.mobile-open { transform:translateX(0); }
    .sidebar-bottom { display:none !important; }

    .mobile-nav { display:flex; }

    .menu-btn        { display:none; }
    .topbar-av-name  { display:none; }
    .topbar-av-chev  { display:none; }
    .topbar-divider  { display:none; }
    .topbar-mobile-logo { display:flex; }

    .grid { grid-template-columns:1fr; }
    .col-2,.col-3,.col-4,.col-6,.col-8,.col-10,.col-12 { grid-column:auto !important; width:100% !important; }

    .form-row,.form-row-3 { grid-template-columns:1fr; }
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .event-card-right { display:none; }
    .event-card-img { width:80px; }
}

@media (max-width:480px) {
    .kpi-grid { grid-template-columns:1fr; }
}

/* ── UTILITIES ── */
.text-muted   { color:var(--text-muted); }
.text-sm      { font-size:var(--text-sm); }
.text-right   { text-align:right; }
.text-center  { text-align:center; }
.d-flex       { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.mt-8   { margin-top:8px; }
.mt-16  { margin-top:16px; }
.mt-24  { margin-top:24px; }
.mb-16  { margin-bottom:16px; }
.mb-24  { margin-bottom:24px; }