:root{
    --primary:#1d4ed8;--primary-dark:#1e40af;
    --success:#15803d;--warning:#b45309;--danger:#dc2626;
    --bg:#f8fafc;--surface:#fff;--border:#e2e8f0;
    --text:#0f172a;--text-muted:#64748b;
    --sidebar-w:230px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;min-height:100vh;}

/* ── SIDEBAR ─────────────────────────────────────────── */
#sidebar{
    width:var(--sidebar-w);background:#0f172a;color:#cbd5e1;
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;height:100vh;z-index:200;
    transition:transform .25s ease;
}
#sidebar.hidden{transform:translateX(-100%);}
#sidebar .logo{
    padding:1.1rem 1rem;border-bottom:1px solid #1e293b;
    font-weight:700;font-size:15px;color:#fff;letter-spacing:-.3px;
    display:flex;align-items:center;justify-content:space-between;
}
#sidebar .logo span{color:#60a5fa;}
#sidebar .logo .close-btn{
    display:none;background:none;border:none;color:#94a3b8;
    font-size:20px;cursor:pointer;padding:2px 6px;line-height:1;
}
#sidebar nav{flex:1;padding:.5rem 0;overflow-y:auto;}
#sidebar nav a{
    display:flex;align-items:center;gap:10px;
    padding:.65rem 1rem;color:#94a3b8;text-decoration:none;
    font-size:13px;transition:all .15s;border-left:3px solid transparent;
}
#sidebar nav a:hover{background:#1e293b;color:#e2e8f0;}
#sidebar nav a.active{background:#1e3a5f;color:#60a5fa;border-left-color:#3b82f6;}
#sidebar nav .section-label{
    padding:.875rem 1rem .25rem;font-size:10px;font-weight:600;
    text-transform:uppercase;letter-spacing:1px;color:#475569;
}
#sidebar .sidebar-footer{
    padding:.75rem 1rem;border-top:1px solid #1e293b;
    font-size:11px;color:#475569;line-height:1.6;
}

/* ── OVERLAY (mobile) ───────────────────────────────── */
#overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:150;
}
#overlay.show{display:block;}

/* ── MAIN ───────────────────────────────────────────── */
#main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0;}
#topbar{
    background:var(--surface);border-bottom:1px solid var(--border);
    padding:0 1.25rem;height:54px;
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:100;gap:1rem;
}
#topbar h1{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.menu-btn{
    display:none;background:none;border:none;cursor:pointer;
    padding:6px;color:var(--text);border-radius:6px;
}
.menu-btn svg{width:22px;height:22px;display:block;}
.menu-btn:hover{background:#f1f5f9;}
.content{padding:1.25rem;flex:1;}

/* ── CARDS ──────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.card-header{
    padding:.8rem 1.1rem;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.card-header h2{font-size:13px;font-weight:600;}
.card-body{padding:1.1rem;}

/* ── KPI GRID ───────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:1.25rem;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;}
.kpi .kpi-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:.35rem;}
.kpi .kpi-value{font-size:26px;font-weight:700;line-height:1;}
.kpi .kpi-sub{font-size:11px;color:var(--text-muted);margin-top:.25rem;}
.kpi.blue .kpi-value{color:var(--primary);}
.kpi.green .kpi-value{color:var(--success);}
.kpi.orange .kpi-value{color:var(--warning);}
.kpi.red .kpi-value{color:var(--danger);}

/* ── TABLE ──────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{background:#f8fafc;padding:.55rem .75rem;text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:.55rem .75rem;border-bottom:1px solid #f1f5f9;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#f8fafc;}

/* ── BADGES ─────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:500;}
.badge-blue{background:#dbeafe;color:#1e40af;}
.badge-green{background:#dcfce7;color:#166534;}
.badge-red{background:#fee2e2;color:#991b1b;}
.badge-orange{background:#ffedd5;color:#9a3412;}
.badge-gray{background:#f1f5f9;color:#475569;}

/* ── BUTTONS ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:.45rem .9rem;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all .15s;white-space:nowrap;}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-outline:hover{background:#f8fafc;}
.btn-sm{padding:.3rem .65rem;font-size:12px;}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);}

/* ── FORMS ──────────────────────────────────────────── */
.form-group{margin-bottom:.875rem;}
.form-group label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.4px;}
.form-control{width:100%;padding:.45rem .7rem;border:1px solid var(--border);border-radius:7px;font-size:13px;background:var(--surface);color:var(--text);transition:border-color .15s;}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,78,216,.1);}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.875rem;}
select.form-control{cursor:pointer;}
textarea.form-control{resize:vertical;min-height:80px;}

/* ── ALERTS ─────────────────────────────────────────── */
.alert{padding:.75rem 1rem;border-radius:8px;margin-bottom:.875rem;font-size:13px;}
.alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;}
.alert-danger{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;}
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;}

/* ── PROGRESS BARS ──────────────────────────────────── */
.prov-bar{margin-bottom:.65rem;}
.prov-bar-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:.2rem;}
.prov-bar-track{background:#e2e8f0;border-radius:999px;height:7px;}
.prov-bar-fill{height:7px;border-radius:999px;background:var(--primary);transition:width .5s;}

/* ── UPLOAD ZONE ────────────────────────────────────── */
.upload-zone{border:2px dashed var(--border);border-radius:10px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--primary);background:#eff6ff;}

/* ── GRIDS ──────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.mb-3{margin-bottom:1.25rem;}
.mt-2{margin-top:.875rem;}
.text-muted{color:var(--text-muted);}
.text-sm{font-size:12px;}
.fw-600{font-weight:600;}
.d-flex{display:flex;}
.align-center{align-items:center;}
.gap-2{gap:.5rem;}
.justify-between{justify-content:space-between;}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── PWA install banner ─────────────────────────────── */
#pwa-banner{
    display:none;position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
    background:#0f172a;color:#fff;padding:.75rem 1.25rem;border-radius:12px;
    font-size:13px;z-index:999;display:none;align-items:center;gap:.875rem;
    box-shadow:0 4px 20px rgba(0,0,0,.3);white-space:nowrap;
}
#pwa-banner.show{display:flex;}

/* ════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   ════════════════════════════════════════════════════ */
@media(max-width:768px){
    :root{--sidebar-w:260px;}

    /* Sidebar hidden by default on mobile */
    #sidebar{transform:translateX(-100%);}
    #sidebar.open{transform:translateX(0);}
    #sidebar .logo .close-btn{display:block;}

    /* Main takes full width */
    #main{margin-left:0;}

    /* Show hamburger */
    .menu-btn{display:flex;}

    /* Topbar */
    #topbar{padding:0 .875rem;height:50px;}
    #topbar h1{font-size:14px;}

    /* Content padding */
    .content{padding:.875rem;}

    /* KPIs: 2 columns on mobile */
    .kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
    .kpi{padding:.75rem .875rem;}
    .kpi .kpi-value{font-size:22px;}

    /* Grids: single column */
    .grid-2,.grid-3{grid-template-columns:1fr;}

    /* Filters: stack vertically */
    .filters-form{flex-direction:column!important;}
    .filters-form > div,.filters-form > input,.filters-form > select{width:100%!important;min-width:unset!important;}

    /* Tables: enable horizontal scroll */
    .table-wrap{border-radius:0 0 10px 10px;}
    table{font-size:12px;}
    th,td{padding:.45rem .6rem;}

    /* Cards */
    .card-header{padding:.7rem .875rem;}
    .card-body{padding:.875rem;}

    /* Buttons full-width in some contexts */
    .btn-mobile-full{width:100%;justify-content:center;}

    /* Upload zone */
    .upload-zone{padding:1.5rem 1rem;}

    /* Two-panel layouts become single column */
    [style*="grid-template-columns:1fr 340px"]{
        grid-template-columns:1fr!important;
    }
    [style*="grid-template-columns:1fr 320px"]{
        grid-template-columns:1fr!important;
    }
}

/* ── EXTRA SMALL (≤480px) ───────────────────────────── */
@media(max-width:480px){
    .kpi-grid{grid-template-columns:1fr 1fr;}
    .kpi .kpi-value{font-size:20px;}
    /* Hide less important table columns */
    .hide-xs{display:none!important;}
}