/* ============================================================================
   Convexa design system — ONE stylesheet for the whole app.
   Minimal, airy, professional SaaS. Light default + slate dark. One restrained
   accent. Flat surfaces, generous whitespace, dense-but-calm data tables.
   Replaces: premium-dark-styles, modern-styles, production-styles,
   sidebar-styles, compact-status-bar, mobile-responsive, and all per-page <style>.
   ============================================================================ */
:root{
  --bg:#fbfbfc; --panel:#ffffff; --muted:#f5f6f8; --line:#ececf0; --line-2:#e0e1e6;
  --ink:#1a1d24; --ink-2:#71757f; --faint:#a4a8b2;
  --accent:#4f46e5; --accent-2:#4338ca; --accent-soft:#f0f0fb;
  --ok:#15925f; --warn:#b7791f; --bad:#c4362f; --info:#2472bd;
  --r:8px; --r-sm:6px; --shadow:none;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1216; --panel:#161a20; --muted:#1a1e25; --line:#242932; --line-2:#2e343f;
  --ink:#e8eaef; --ink-2:#969ba6; --faint:#666c78; --accent:#8b93f8; --accent-2:#a5abf9; --accent-soft:#1c1f2b;
}}
:root[data-theme="dark"]{--bg:#0f1216;--panel:#161a20;--muted:#1a1e25;--line:#242932;--line-2:#2e343f;--ink:#e8eaef;--ink-2:#969ba6;--faint:#666c78;--accent:#8b93f8;--accent-2:#a5abf9;--accent-soft:#1c1f2b;}
:root[data-theme="light"]{--bg:#fbfbfc;--panel:#ffffff;--muted:#f5f6f8;--line:#ececf0;--line-2:#e0e1e6;--ink:#1a1d24;--ink-2:#71757f;--faint:#a4a8b2;--accent:#4f46e5;--accent-2:#4338ca;--accent-soft:#f0f0fb;}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
::selection{background:var(--accent-soft)}

/* ---- app shell: sidebar + main ---- */
.cx-app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.cx-side{background:var(--panel);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:1px;position:sticky;top:0;height:100vh;overflow-y:auto}
.cx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;font-weight:600;font-size:15px}
.cx-brand .cx-logo{width:24px;height:24px;border-radius:6px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700}
.cx-navsec{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:14px 10px 5px;font-weight:600}
.cx-nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;font-size:13px;cursor:pointer;transition:background .12s,color .12s}
.cx-nav .bi{font-size:15px;opacity:.9;width:16px;text-align:center}
.cx-nav:hover{background:var(--muted);color:var(--ink)}
.cx-nav.active{background:var(--accent-soft);color:var(--accent)}
.cx-main{padding:28px 32px;min-width:0;max-width:1500px}

/* ---- page header ---- */
.cx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.cx-head h1{font-size:20px}
.cx-head .cx-sub{color:var(--ink-2);font-size:13px;margin-top:3px}
.cx-actions{display:flex;gap:8px;flex-shrink:0}

/* ---- buttons ---- */
.cx-btn{border:1px solid var(--line-2);background:var(--panel);color:var(--ink);padding:8px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit;transition:background .12s,border-color .12s}
.cx-btn:hover{background:var(--muted)}
.cx-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cx-btn.primary:hover{background:var(--accent-2)}
.cx-btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,var(--line-2))}
.cx-btn.danger:hover{background:color-mix(in srgb,var(--bad) 8%,transparent)}
.cx-btn.sm{padding:5px 10px;font-size:12px}
.cx-btn.icon{padding:7px;width:34px;justify-content:center}

/* ---- KPI stat row ---- */
.cx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.cx-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.cx-kpi .l{color:var(--ink-2);font-size:12.5px;font-weight:500}
.cx-kpi .v{font-size:26px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1}
.cx-kpi .d{font-size:12px;margin-top:5px;color:var(--ink-2)}
.cx-kpi .d.up{color:var(--ok)} .cx-kpi .d.down{color:var(--bad)}

/* ---- panels/cards ---- */
.cx-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px}
.cx-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.cx-panel-head h2{font-size:14.5px}
.cx-panel-head .cx-sub{font-size:12.5px;color:var(--ink-2);margin:0}
.cx-panel-body{padding:18px}
.cx-grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.cx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ---- tables ---- */
.cx-table-wrap{overflow-x:auto}
table.cx-table{width:100%;border-collapse:collapse;font-size:13px}
.cx-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--muted)}
.cx-table tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.cx-table tbody tr:last-child td{border-bottom:none}
.cx-table tbody tr:hover{background:var(--muted)}
.cx-table .num{font-family:var(--mono);font-size:12.5px}
.cx-table .tnum{font-variant-numeric:tabular-nums;text-align:right}

/* ---- badges (dot + label) ---- */
.cx-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:20px;background:var(--muted);color:var(--ink-2);white-space:nowrap}
.cx-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.cx-badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 11%,transparent)}
.cx-badge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 11%,transparent)}
.cx-badge.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 11%,transparent)}
.cx-badge.info{color:var(--info);background:color-mix(in srgb,var(--info) 11%,transparent)}

/* ---- mini health bar ---- */
.cx-bar{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden;vertical-align:middle;margin-right:8px}
.cx-bar>span{display:block;height:100%}

/* ---- forms ---- */
.cx-input,.cx-select{background:var(--panel);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 11px;font-size:13px;font-family:inherit;width:100%}
.cx-input:focus,.cx-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cx-label{font-size:12px;color:var(--ink-2);font-weight:500;display:block;margin-bottom:6px}
.cx-field{margin-bottom:16px}

/* ---- segmented control ---- */
.cx-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.cx-seg span{padding:5px 11px;font-size:12px;color:var(--ink-2);cursor:pointer}
.cx-seg span.on{background:var(--accent);color:#fff}

/* ---- callout / info ---- */
.cx-note{background:var(--muted);border:1px solid var(--line);border-radius:var(--r);padding:12px 15px;font-size:13px;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start;margin-bottom:20px}

/* ---- modal ---- */
.cx-modal-overlay{position:fixed;inset:0;background:rgba(16,20,26,.5);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.cx-modal-overlay.open{display:flex}
.cx-modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);width:100%;max-width:520px;max-height:85vh;overflow:auto}
.cx-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.cx-modal-head h3{font-size:15px}
.cx-modal-body{padding:18px}

/* ---- toast ---- */
.cx-toast{position:fixed;top:20px;right:20px;z-index:2000;background:var(--panel);border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:12px 16px;font-size:13px;color:var(--ink);max-width:340px}
.cx-toast.ok{border-left-color:var(--ok)} .cx-toast.bad{border-left-color:var(--bad)}

/* ---- sub-tabs (group related pages under one section) ---- */
.cx-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-4px 0 22px}
.cx-tabs a{padding:9px 15px;font-size:13px;font-weight:500;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.cx-tabs a:hover{color:var(--ink)}
.cx-tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- charts ---- */
.cx-chart{width:100%;height:220px;position:relative}

/* ---- utility ---- */
.cx-muted{color:var(--ink-2)} .cx-faint{color:var(--faint)}
.cx-mono{font-family:var(--mono)}
.cx-row{display:flex;align-items:center;gap:10px}
.cx-spacer{flex:1}

@media(max-width:840px){
  .cx-app{grid-template-columns:1fr}
  .cx-side{position:fixed;left:-100%;z-index:500;transition:left .2s;width:216px}
  .cx-side.open{left:0}
  .cx-main{padding:20px 16px}
  .cx-grid-2,.cx-grid-3{grid-template-columns:1fr}
}