/* -- RESET & TOKENS -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:         #0d0f12;
  --surface:    #13161b;
  --surface-2:  #181c22;
  --border:     #242830;
  --text:       #d4d8e0;
  --muted:      #5a6072;
  --faint:      #2e3340;
  --amber:      #f59e0b;
  --amber-dim:  #78450a;
  --red:        #ef4444;
  --red-dim:    #5c1a1a;
  --green:      #22c55e;
  --green-dim:  #0f3d1f;
  --blue:       #38bdf8;
  --blue-dim:   #0c3450;
  --radius:     6px;
  --font-body:  'Inter', system-ui, sans-serif;
  --font-mono:  'Geist Mono', monospace;
  --trans:      180ms cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{
  --bg:#f4f5f7;--surface:#ffffff;--surface-2:#f0f2f5;--border:#dde1e8;
  --text:#1a1d24;--muted:#6b7280;--faint:#e5e7eb;
  --amber:#d97706;--amber-dim:#fef3c7;--red:#dc2626;--red-dim:#fee2e2;
  --green:#16a34a;--green-dim:#dcfce7;--blue:#0369a1;--blue-dim:#e0f2fe;
}
html,body{height:100%;overflow:hidden}
body.login-page-body{overflow:auto!important;height:auto!important;min-height:100dvh!important;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));box-sizing:border-box}
body{font-family:var(--font-body);font-size:14px;color:var(--text);background:var(--bg);line-height:1.5}
button{cursor:pointer;font:inherit;color:inherit}
input,select{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;outline:none}
input:focus,select:focus{border-color:var(--amber)}
table{width:100%;border-collapse:collapse}
a{color:var(--blue);text-decoration:none}

/* -- LAYOUT ---------------------------------------------------------------- */
.shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr;height:100dvh}
.sidebar{grid-row:1/-1;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.topbar{grid-column:2;background:var(--surface);border-bottom:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:0 16px 0 12px;padding-top:max(0px, env(safe-area-inset-top));padding-left:max(12px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));position:sticky;top:0;z-index:10;min-width:0}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.btn.btn-nav-menu{display:none;flex-shrink:0;touch-action:manipulation}
.main{grid-column:2;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px;padding-bottom:max(20px, env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px;min-width:0;scrollbar-gutter:stable}

/* -- SIDEBAR --------------------------------------------------------------- */
.logo{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.logo svg{flex-shrink:0}
.logo-text{font-size:13px;font-weight:600;line-height:1.3;color:var(--text)}
.logo-text span{display:block;font-size:11px;font-weight:400;color:var(--muted)}
nav{padding:8px}
.nav-section{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--muted);padding:10px 8px 4px;text-transform:uppercase}
.nav-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);color:var(--muted);font-size:13px;font-weight:500;transition:background var(--trans),color var(--trans);cursor:pointer;border:none;background:none;width:100%;text-align:left}
.nav-link:hover{background:var(--faint);color:var(--text)}
.nav-link.active{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.nav-link svg{width:16px;height:16px;flex-shrink:0}
.nav-badge{font-size:11px;font-weight:600;background:var(--faint);color:var(--muted);padding:1px 6px;border-radius:99px;margin-left:4px;min-width:1.2em;text-align:center;line-height:1.3}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.sidebar-user-name{font-size:12px;color:var(--text);font-weight:500}
.sidebar-user-role{font-size:11px;color:var(--muted);margin-left:6px}
.sidebar-user-title{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.3}
.sidebar-db-date{color:var(--faint)}
.sidebar-signout{color:var(--muted);font-size:12px;margin-top:8px;display:inline-block}
.sidebar-credit{font-size:11px;color:var(--faint);margin-top:10px;line-height:1.4}

/* -- TOPBAR ---------------------------------------------------------------- */
.page-title{font-size:15px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;align-items:center;flex-wrap:nowrap;justify-content:flex-end;gap:10px;flex-shrink:0}
.btn-nav-menu .icon-close{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;line-height:1;border:1px solid var(--amber);background:var(--amber);color:#000;transition:background var(--trans),border-color var(--trans);white-space:nowrap}
.btn:hover{background:#fbbf24;border-color:#fbbf24}
.btn-primary,.btn-add-action,.btn-danger{background:var(--amber);border-color:var(--amber);color:#000}
.btn-primary:hover,.btn-add-action:hover,.btn-danger:hover{background:#fbbf24;border-color:#fbbf24}
.btn-sm{min-height:34px;padding:0 10px;font-size:11px}
.btn-icon-solo{padding:0;min-width:34px;width:34px;justify-content:center}
.btn-bin-icon{width:14px;height:14px;flex-shrink:0;display:block}
.btn-edit-icon{width:14px;height:14px;flex-shrink:0;display:block}

/* -- KPI CARDS ------------------------------------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kpi-label{font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi-value{font-family:var(--font-mono);font-size:26px;font-weight:500;line-height:1;color:var(--text)}
.kpi-value.critical{color:var(--red)}
.kpi-value.warn{color:var(--amber)}
.kpi-value.good{color:var(--green)}
.kpi-sub{font-size:11px;color:var(--muted)}

/* -- PANELS ---------------------------------------------------------------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}

/* Selector / filter rows stay visible while scrolling .main (wrapper avoids .panel overflow breaking sticky) */
.controls-sticky{position:sticky;top:0;z-index:20;padding-bottom:4px;background:var(--bg)}
.controls-sticky .panel{margin-bottom:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.panel-title{font-size:13px;font-weight:600;color:var(--text)}
.panel-body{padding:16px}
.panel-scroll{overflow-x:auto}

/* -- TABLES ---------------------------------------------------------------- */
th{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--surface);z-index:1}
td{padding:8px 12px;border-bottom:1px solid var(--faint);font-size:13px;vertical-align:middle;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tr:hover td{background:color-mix(in srgb,var(--amber) 4%,transparent)}
tr.row-highlight td{background:color-mix(in srgb,var(--amber) 16%,transparent);box-shadow:inset 3px 0 0 var(--amber)}
tr.row-highlight:hover td{background:color-mix(in srgb,var(--amber) 22%,transparent)}

/* -- STATUS BADGES --------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:.01em}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-critical{background:#3f0808;color:#fca5a5;border:1px solid #7f1d1d}.badge-critical::before{background:#fca5a5}
.badge-warn{background:#3d2000;color:#fde68a;border:1px solid #78350f}.badge-warn::before{background:#fde68a}
.badge-ok{background:#052e12;color:#86efac;border:1px solid #14532d}.badge-ok::before{background:#86efac}
.badge-unknown{background:var(--faint);color:var(--muted);border:1px solid var(--border)}.badge-unknown::before{background:var(--muted)}

/* -- CHART CONTAINER ------------------------------------------------------- */
.chart-wrap{position:relative;height:260px;min-height:200px}

/* -- DASHBOARD LAYOUT ------------------------------------------------------ */
.dash-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}

/* -- MOBILE NAV (backdrop + drawer) ----------------------------------------- */
.nav-backdrop{display:none}

/* -- SOURCE BREAKDOWN BARS ------------------------------------------------- */
.source-bar-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--faint)}
.source-bar-row:last-child{border-bottom:none}
.source-name{width:100px;font-size:12px;font-weight:500;flex-shrink:0;color:var(--text)}
.source-bar-track{flex:1;height:8px;border-radius:4px;background:var(--faint);overflow:hidden;display:flex}
.source-bar-seg{height:100%;transition:width .5s ease}
.source-counts{font-size:12px;color:var(--muted);font-family:var(--font-mono);flex-shrink:0;width:140px}

/* -- MODAL ----------------------------------------------------------------- */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;align-items:center;justify-content:center}
.modal-backdrop.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:24px;width:480px;max-width:95vw;max-height:90vh;overflow-y:auto;position:relative}
.modal-title{font-size:15px;font-weight:600;margin-bottom:16px}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.modal-close:hover{background:var(--faint);color:var(--text);border-color:var(--muted)}
.modal-hint{font-size:12px;color:var(--muted);margin:-8px 0 14px;line-height:1.45}
.modal-err{font-size:13px;color:var(--red);margin:0 0 12px}
.modal-err[hidden]{display:none!important}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.form-row.full{grid-template-columns:1fr}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:3px}
.form-field{display:flex;flex-direction:column}
input,select{width:100%}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal-actions-tight{margin-top:0}
.login-modal{width:min(360px, 100%)!important;margin:0!important;box-sizing:border-box}
.login-page-body .btn,.login-page-body input{min-height:44px;touch-action:manipulation}
.login-error{font-size:13px;color:var(--red,#ef4444);margin:0 0 12px}
.login-label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.login-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px}
.login-input-username{margin-bottom:12px}
.login-input-password{margin-bottom:16px}
.text-muted-13{font-size:13px;color:var(--muted);margin:0 0 12px}
.text-muted-13-spaced{font-size:13px;color:var(--muted);margin:0 0 16px}
.text-muted-12,.text-muted-inline{font-size:12px;color:var(--muted)}
.text-muted-12-no-margin{font-size:12px;color:var(--muted);margin:0}
.text-muted-11{font-size:11px;color:var(--muted)}
.text-muted-12-hint{font-size:12px;color:var(--muted);margin:-8px 0 12px}
.vh-list{margin:10px 0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.vh-list li{font-size:12px;line-height:1.4;color:var(--text)}
.inline-check-muted{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;max-width:780px}
.form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:720px}
.form-grid-users{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 100px auto;gap:10px;align-items:end;max-width:1100px}
.panel-body-grid-5{display:grid;grid-template-columns:1fr 1fr auto auto auto;gap:12px;align-items:end}
.panel-body-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:end}
.label-muted{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.panel-head-wrap{gap:12px;flex-wrap:wrap}
.ml-auto{margin-left:auto}
.target-note{font-size:12px;color:var(--muted);margin-bottom:14px}
.copy-muted-tight{font-size:13px;color:var(--muted);padding:16px;margin:0}
.copy-muted-footnote{font-size:12px;color:var(--muted);margin:0;line-height:1.45}
.u-hidden{display:none}
.u-cursor-pointer{cursor:pointer}
.u-mt-4{margin-top:4px}
.u-stack-16-mt-4{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.u-scroll-y-320{max-height:320px;overflow-y:auto}
.u-maxh-320{max-height:320px}
.u-maxh-360{max-height:360px}
.u-maxh-360-mb-16{max-height:360px;margin-bottom:16px}
.u-items-end{align-items:end}
.u-gap-10{gap:10px}
.u-minw-180{min-width:180px}
.u-minw-220{min-width:220px}
.u-mt-10{margin-top:10px}
.u-text-muted{color:var(--muted)}
.u-text-14-600{font-weight:600;font-size:14px}
.u-w-88{width:88px}
.u-audit-body{max-height:220px;overflow:auto;font-size:12px}
.u-text-muted-0{color:var(--muted);margin:0}
.u-mt-16-10{margin:16px 0 10px}
.u-msg-error{color:var(--red,#ef4444);font-size:13px;margin:10px 0 0;display:none}
.u-msg-success{color:var(--green,#22c55e);font-size:13px;margin:8px 0 0;display:none}
.u-mt-12{margin-top:12px}
.u-p-0{padding:0}
.u-mt-14{margin-top:14px}
.u-mt-16{margin-top:16px}
.u-actions-wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:720px}
.u-input-login-link{flex:1;min-width:200px;padding:8px 10px;font-size:12px}
.u-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.u-actions-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.u-w-full{width:100%}
.u-w-130{width:130px}
.u-w-150{width:150px}
.u-w-160{width:160px}
.u-target-panel{background:color-mix(in srgb,var(--amber) 6%,var(--surface))}
.u-target-body{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.target-pkg-label{font-size:13px;font-weight:600;color:var(--amber)}
.u-target-values{display:flex;gap:16px}
.u-chart-300{position:relative;height:300px}
.u-modal-w-560{width:560px}
.u-modal-w-540{width:540px}
.u-modal-w-480{width:480px}
.u-modal-w-440{width:440px}
.u-modal-w-380{width:380px}
.u-col-full{grid-column:1/-1}
.metric-unit{font-weight:400;color:var(--muted)}
.bulk-row-changed{background:color-mix(in srgb,var(--amber) 10%,transparent)}
.bulk-row-result{font-size:11px;font-weight:600}
.bulk-row-result-ok{color:var(--green,#22c55e)}
.bulk-row-result-warn{color:var(--amber)}
.bulk-row-result-err{color:var(--red,#ef4444)}

/* -- FILTER BAR ------------------------------------------------------------ */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-bar input,.filter-bar select{width:auto;min-width:140px}

/* -- TABS ------------------------------------------------------------------ */
.tab-strip{display:flex;gap:2px;padding:4px;background:var(--faint);border-radius:var(--radius);width:fit-content}
.tab{padding:5px 14px;border-radius:4px;font-size:13px;font-weight:500;border:none;background:none;color:var(--muted);cursor:pointer;transition:background var(--trans),color var(--trans)}
.tab.active{background:var(--surface);color:var(--amber);box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* -- COMPATIBILITY: auto package list -------------------------------------- */
.cmp-packages-body{padding-top:4px}
.cmp-compat-block{margin-bottom:14px}
.cmp-compat-block:last-child{margin-bottom:0}
.cmp-compat-block-muted{opacity:.92}
.cmp-compat-heading{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.cmp-compat-count{font-weight:500;color:var(--muted)}
.cmp-compat-empty{font-size:12px;color:var(--muted);display:block;padding:6px 0}
.cmp-pkg-grid{display:flex;flex-wrap:wrap;gap:8px}
.cmp-pkg-card{flex:1 1 220px;min-width:200px;max-width:320px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:8px 10px}
.cmp-pkg-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.cmp-pkg-ref{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text)}
.cmp-pkg-agg{font-size:11px;color:var(--muted);line-height:1.35;margin-bottom:4px;word-break:break-word}
.cmp-pkg-meta{font-size:11px;color:var(--muted);line-height:1.3}

/* -- AGGREGATE TABLE ACTIONS ---------------------------------------------- */
.agg-actions{white-space:nowrap}
.agg-actions-row{display:inline-flex;align-items:center;gap:6px}

/* -- ANALYSIS WARNINGS ----------------------------------------------------- */
#an-warnings-panel .panel-head{padding:8px 14px;min-height:0}
#an-warnings-panel .panel-body{padding:8px 14px}
#an-warnings-panel .panel-title{font-size:12px}
#an-warnings-panel #an-warning-summary{font-size:11px}
#an-warnings-panel .warn-panel-empty{margin:0;padding:8px 2px;font-size:12px;color:var(--muted);line-height:1.35;text-align:left}

.warn-list{display:flex;flex-direction:column;gap:4px}
.warn-item{display:flex;align-items:flex-start;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.warn-dot{width:6px;height:6px;border-radius:50%;margin-top:4px;flex-shrink:0}
.warn-dot.critical{background:#f87171}
.warn-dot.warn{background:#fbbf24}
.warn-dot.ok{background:#34d399}
.warn-text{font-size:12px;color:var(--text);line-height:1.35}
.warn-meta{font-size:11px;color:var(--muted);line-height:1.3;margin-top:1px}

/* -- EMPTY STATE ----------------------------------------------------------- */
.empty{text-align:center;padding:40px;color:var(--muted);font-size:13px}
.empty svg{margin:0 auto 12px;opacity:.3}

/* -- SOURCING CONTROLS ---------------------------------------------------- */
.sourcing-controls-grid{display:flex;flex-direction:column;gap:6px}
.sourcing-controls-row{display:grid;grid-template-columns:1fr minmax(200px,1fr);gap:12px;align-items:end}
.sourcing-controls-grid .src-filter-inline{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;padding:2px 0 0}
.sourcing-controls-grid .src-filter-inline label.src-match-label{display:inline-flex;align-items:center;gap:0;margin:0;padding:0;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap}
.sourcing-controls-grid .src-filter-inline .src-match-text{margin:0;padding:0 0 0 6px;line-height:1.2}
.sourcing-controls-grid .src-filter-inline input[type=checkbox]{margin:0;padding:0;flex-shrink:0;cursor:pointer;accent-color:var(--amber)}
.sourcing-controls-grid .src-filter-inline #src-grading-note{font-size:11px;color:var(--amber);line-height:1.35;margin-left:4px}
.sourcing-controls-grid .src-filter-inline #src-grading-note[hidden]{display:none!important}

/* -- RESPONSIVE ------------------------------------------------------------ */
@media(max-width:1366px),(max-height:800px){
  body{font-size:13px}
  .shell{grid-template-columns:208px 1fr}
  .topbar{
    min-height:48px;
    padding:0 14px 0 10px;
    gap:10px;
  }
  .main{
    padding:16px 18px;
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    gap:16px;
  }
  .btn{
    min-height:30px;
    padding:0 10px;
    font-size:11px;
  }
  .btn-sm{min-height:30px;padding:0 9px}
  .btn-icon-solo{min-width:30px;width:30px}
  input,select{padding:5px 9px}
  .panel-head{padding:10px 14px}
  .panel-body{padding:12px 14px}
  .panel-title{font-size:12px}
  .kpi-grid{gap:10px}
  .kpi{padding:12px 14px}
  .kpi-label{font-size:10px}
  .kpi-value{font-size:22px}
  .kpi-sub{font-size:10px}
  th{font-size:10px;padding:7px 10px}
  td{font-size:12px;padding:7px 10px}
  .badge{font-size:11px;padding:2px 9px}
  .tab{font-size:12px;padding:5px 12px}
  .form-grid-2,.form-grid-3,.form-grid-4{gap:10px}
  .panel-body-grid-5,.panel-body-grid-3{gap:10px}
  .u-actions-wrap,.u-head-actions,.u-actions-row{gap:8px}
  .chart-wrap{height:240px;min-height:180px}
  .u-chart-300{height:270px}
}

@media(max-width:900px){
  .shell{grid-template-columns:200px 1fr}
}

@media(max-width:960px){
  html,body{overflow:hidden;height:100%;height:100dvh}
  .shell{
    display:flex;
    flex-direction:column;
    height:100dvh;
    height:-webkit-fill-available;
    min-height:100dvh;
  }
  .sidebar{
    order:3;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(300px, 90vw);
    max-width:100%;
    z-index:200;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translate3d(-100%,0,0);
    transition:transform var(--trans);
    border-right:1px solid var(--border);
    border-bottom:none;
    box-shadow:12px 0 40px rgba(0,0,0,.35);
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    padding-top:max(0px, env(safe-area-inset-top));
    pointer-events:none;
  }
  body.mobile-nav-open .sidebar{
    transform:translate3d(0,0,0);
    pointer-events:auto;
  }
  body.mobile-nav-open .main{
    overflow:hidden;
  }
  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--trans),visibility var(--trans);
    -webkit-tap-highlight-color:transparent;
  }
  body.mobile-nav-open .nav-backdrop{
    z-index:140;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  body.mobile-nav-open #btn-mobile-nav .icon-menu{display:none}
  body.mobile-nav-open #btn-mobile-nav .icon-close{display:block!important}
  .btn.btn-nav-menu{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:150;
  }
  .topbar{
    order:1;
    flex:0 0 auto;
    grid-column:1;
    width:100%;
    gap:8px;
    position:relative;
    z-index:25;
  }
  .main{
    order:2;
    flex:1;
    min-height:0;
    grid-column:1;
    width:100%;
    padding:12px 14px;
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
  }
  nav{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:8px;
    flex:1;
  }
  .nav-section{display:block;padding:10px 8px 4px}
  .nav-link{
    padding:10px 12px;
    min-height:44px;
    border-radius:8px;
  }
  .logo{
    flex-shrink:0;
    padding:14px 16px;
  }
  .sidebar-footer{
    flex-shrink:0;
  }
  .topbar-right{
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
    max-width:100%;
  }
  .topbar-right .btn{
    padding:0 10px;
    min-height:36px;
    touch-action:manipulation;
  }
  .topbar-right .btn-primary{
    flex:0 1 auto;
  }
  .page-title{
    white-space:normal;
    line-height:1.25;
    font-size:14px;
    -webkit-line-clamp:2;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px 14px}
  .kpi-value{font-size:22px}
  .dash-two-col{grid-template-columns:1fr;gap:14px}
  .chart-wrap{height:220px}
  .panel-head{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .panel-body{padding:12px 14px}
  .filter-bar{gap:8px}
  .filter-bar input,.filter-bar select{
    flex:1 1 100%;
    min-width:0;
    width:100%;
  }
  .filter-bar .btn{width:100%;justify-content:center}
  .tab-strip{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .tab{flex:0 0 auto;padding:8px 14px;min-height:40px}
  .modal{
    width:100%;
    max-width:calc(100vw - 24px);
    margin:12px;
    max-height:min(90dvh, calc(100% - 24px));
    padding:18px 16px;
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }
  .modal-backdrop.open{padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}
  .form-row{grid-template-columns:1fr}
  .source-bar-row{flex-wrap:wrap;gap:8px}
  .source-name{width:100%;flex:1 1 100%}
  .source-counts{width:auto;text-align:left}
  .cmp-pkg-card{min-width:0;max-width:none;flex:1 1 100%}
  .sourcing-controls-row{grid-template-columns:1fr}
}

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

/* -- ROLES (guest = read-only UI) ----------------------------------------- */
body.role-guest [data-require-edit]{display:none!important}
body:not(.role-admin) [data-require-admin]{display:none!important}