/* ============================================================
   FerozOS design system — extracted verbatim from
   ferozos-console-v2.html (institutional colors & components).
   Additions for Phase 1 app appended below the base block.
   ============================================================ */
:root {
  --navy:#2E3A8C;--navy-dark:#1e2760;--navy-light:#3d4fa3;
  --orange:#E76F51;--orange-light:#f08060;
  --green:#2F5D50;--green-light:#3a7263;
  --bg:#F0F2F7;--surface:#FFFFFF;--surface-2:#F7F8FA;
  --border:#E2E5EF;
  --text-primary:#111827;--text-secondary:#6B7280;--text-muted:#9CA3AF;
  --success:#2F855A;--warning:#D69E2E;--error:#C53030;
  --sidebar-w:220px;--header-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text-primary);font-size:14px;display:flex;height:100vh;overflow:hidden;}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:var(--navy-dark);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.sidebar-logo{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.sidebar-logo img{width:34px;height:34px;object-fit:contain;}
.sidebar-logo .brand{font-size:18px;font-weight:600;color:#fff;letter-spacing:-.3px;}
.sidebar-logo .brand span{color:var(--orange);}
.sidebar-logo .subtitle{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;font-family:'DM Mono',monospace;}
.nav-section{padding:16px 10px 4px;}
.nav-label{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.25);padding:0 8px;margin-bottom:6px;font-family:'DM Mono',monospace;}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.55);font-size:13.5px;font-weight:400;transition:all .15s;margin-bottom:1px;position:relative;text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);}
.nav-item.active{background:rgba(231,111,81,.18);color:#fff;font-weight:500;}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--orange);border-radius:0 3px 3px 0;}
.nav-item svg{width:15px;height:15px;flex-shrink:0;}
.nav-badge{margin-left:auto;background:var(--orange);color:white;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;font-family:'DM Mono',monospace;}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:16px;flex-shrink:0;}
.topbar-title{font-size:15px;font-weight:600;color:var(--text-primary);flex:1;}
.topbar-actions{display:flex;gap:10px;align-items:center;}
.avatar{width:32px;height:32px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:600;}
.content{flex:1;overflow-y:auto;padding:28px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:500;cursor:pointer;border:none;transition:all .15s;font-family:'DM Sans',sans-serif;text-decoration:none;}
.btn svg{width:14px;height:14px;}
.btn-primary{background:var(--navy);color:white;}
.btn-primary:hover{background:var(--navy-light);}
.btn-accent{background:var(--orange);color:white;}
.btn-accent:hover{background:var(--orange-light);}
.btn-secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--surface-2);}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.btn-danger{background:var(--error);color:white;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* CARDS */
.card{background:var(--surface);border-radius:14px;padding:22px 24px;border:1px solid var(--border);margin-bottom:20px;}
.card-title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:500;font-family:'DM Mono',monospace;}
.badge-live{background:#dcfce7;color:#16a34a;}
.badge-pending{background:#fef9c3;color:#a16207;}
.badge-approved{background:#dbeafe;color:#1d4ed8;}
.badge-flagged{background:#fee2e2;color:#b91c1c;}
.badge-archived{background:#f3f4f6;color:#6b7280;}
.badge-red{background:#fee2e2;color:#b91c1c;}
.badge-green{background:#dcfce7;color:#16a34a;}
.badge-yellow{background:#fef9c3;color:#a16207;}
.badge-atom{background:#ede9fe;color:#5b21b6;}
.badge-bundle{background:#e0f2fe;color:#0369a1;}
.badge-navy{background:#e0e7ff;color:var(--navy);}
.badge-purchased{background:#dcfce7;color:#166534;}
.badge-on_demand{background:#fff7ed;color:#c05621;}
.badge-consignment{background:#f3e8ff;color:#7e22ce;}

/* FORMS */
.form-section-title{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);font-family:'DM Mono',monospace;}
.form-row{display:flex;gap:16px;margin-bottom:14px;}
.form-group{flex:1;display:flex;flex-direction:column;gap:5px;}
label{font-size:12.5px;font-weight:500;color:var(--text-secondary);}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-family:'DM Sans',sans-serif;color:var(--text-primary);background:var(--surface);outline:none;transition:border-color .15s;}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,58,140,.08);}
textarea{resize:vertical;min-height:80px;}
input[type=checkbox]{width:auto;}
.toggle-group{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px;}
.toggle-opt{flex:1;padding:7px 12px;border-radius:7px;text-align:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);transition:all .15s;}
.toggle-opt.active{background:var(--surface);color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.08);}

/* TABLES */
.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--surface-2);border-bottom:1px solid var(--border);}
th{padding:10px 16px;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);text-align:left;font-family:'DM Mono',monospace;white-space:nowrap;}
td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--border);color:var(--text-primary);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface-2);}
.td-mono{font-family:'DM Mono',monospace;font-size:12px;color:var(--text-secondary);}

/* STAT CARDS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;}
.stat-label{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);font-family:'DM Mono',monospace;margin-bottom:8px;}
.stat-value{font-size:28px;font-weight:600;color:var(--text-primary);line-height:1;}
.stat-sub{font-size:12px;color:var(--text-muted);margin-top:5px;}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:16px;padding:28px;width:480px;max-width:95vw;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15);}
.modal-lg{width:640px;}
.modal-title{font-size:16px;font-weight:600;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;}
.modal-close{cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1;background:none;border:none;padding:2px;}

/* EMPTY */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);}
.empty-state svg{width:40px;height:40px;margin:0 auto 14px;opacity:.3;display:block;}

/* BOXES */
.info-box{background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:12px 16px;font-size:13px;color:var(--navy);margin-bottom:20px;}
.warn-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:12px 16px;font-size:13px;color:#92400e;margin-bottom:20px;}

/* LEDGER */
.ledger-in{color:var(--success);font-family:'DM Mono',monospace;font-weight:500;}
.ledger-out{color:var(--error);font-family:'DM Mono',monospace;font-weight:500;}

/* WIZARD */
.wizard-shell{max-width:760px;margin:0 auto;}
.wizard-progress{display:flex;align-items:center;margin-bottom:36px;gap:0;}
.wz-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:1;}
.wz-step:not(:last-child)::after{content:'';position:absolute;top:16px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:var(--border);z-index:0;}
.wz-step.done:not(:last-child)::after{background:var(--navy);}
.wz-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-muted);z-index:1;transition:all .2s;}
.wz-step.active .wz-dot{border-color:var(--navy);background:var(--navy);color:white;}
.wz-step.done .wz-dot{border-color:var(--navy);background:var(--navy);color:white;}
.wz-label{font-size:11px;color:var(--text-muted);font-weight:500;white-space:nowrap;}
.wz-step.active .wz-label{color:var(--navy);font-weight:600;}
.wz-step.done .wz-label{color:var(--text-secondary);}
.wizard-card{background:var(--surface);border-radius:16px;padding:32px;border:1px solid var(--border);margin-bottom:24px;}
.wizard-footer{display:flex;justify-content:space-between;align-items:center;}
.wizard-step-content{display:none;}
.wizard-step-content.active{display:block;}

/* ATOM ROW */
.atom-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-2);border-radius:8px;margin-bottom:8px;border:1px solid var(--border);}
.atom-sku{font-family:'DM Mono',monospace;font-size:12px;color:var(--navy);}

/* CHANNEL ROW */
.channel-row-check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}

/* misc */
.flex{display:flex;}.items-center{align-items:center;}.justify-between{justify-content:space-between;}.justify-end{justify-content:flex-end;}.gap-2{gap:8px;}.gap-3{gap:12px;}.mb-2{margin-bottom:8px;}.mb-4{margin-bottom:16px;}.mb-6{margin-bottom:24px;}.mt-2{margin-top:8px;}.mt-4{margin-top:16px;}.text-muted{color:var(--text-muted);font-size:12px;}.text-secondary{color:var(--text-secondary);}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}.w-full{width:100%;}.nowrap{white-space:nowrap;}.page-head{margin-bottom:24px;}.page-title{font-size:20px;font-weight:600;}.page-sub{color:var(--text-muted);font-size:13px;margin-top:3px;}
::-webkit-scrollbar{width:5px;height:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}

/* ============================================================
   Phase-1 additions (same visual language)
   ============================================================ */

/* LANG / THEME switch in topbar + login */
.lang-switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.lang-switch a{padding:5px 10px;font-size:12px;font-weight:600;color:var(--text-secondary);text-decoration:none;font-family:'DM Mono',monospace;}
.lang-switch a.active{background:var(--navy);color:#fff;}
.theme-toggle{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:15px;padding:0;}
.theme-toggle:hover{background:var(--border);}

/* FLASH messages */
.flash{border-radius:10px;padding:11px 16px;font-size:13px;margin-bottom:18px;border:1px solid transparent;}
.flash-success{background:#dcfce7;border-color:#bbf7d0;color:#166534;}
.flash-error{background:#fee2e2;border-color:#fecaca;color:#b91c1c;}
.flash-info{background:#eef2ff;border-color:#c7d2fe;color:var(--navy);}

/* LOGIN */
.login-wrap{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy-dark),var(--navy));}
.login-card{background:var(--surface);border-radius:18px;padding:38px 34px;width:380px;max-width:92vw;box-shadow:0 24px 70px rgba(0,0,0,.35);}
.login-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:26px;}
.login-logo img{width:72px;height:72px;object-fit:contain;margin-bottom:12px;}
.login-logo .brand{font-size:24px;font-weight:600;color:var(--text-primary);}
.login-logo .brand span{color:var(--orange);}
.login-logo .subtitle{font-size:10px;color:var(--text-muted);letter-spacing:1.6px;text-transform:uppercase;margin-top:3px;font-family:'DM Mono',monospace;}
.login-lang{display:flex;justify-content:center;margin-top:20px;}

/* TABS */
.tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;width:fit-content;}
.tab{padding:7px 16px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;text-decoration:none;}
.tab.active{background:var(--navy);color:#fff;}

/* CHIPS (elapsed / expiration) */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:600;font-family:'DM Mono',monospace;}
.chip-green{background:#dcfce7;color:#166534;}
.chip-yellow{background:#fef9c3;color:#a16207;}
.chip-red{background:#fee2e2;color:#b91c1c;}
.chip-grey{background:#f3f4f6;color:#6b7280;}

/* tooltip */
.tip{position:relative;border-bottom:1px dotted var(--text-muted);cursor:help;}
.tip .tip-body{visibility:hidden;opacity:0;position:absolute;bottom:135%;left:50%;transform:translateX(-50%);background:var(--navy-dark);color:#fff;padding:8px 11px;border-radius:8px;font-size:11.5px;font-weight:400;width:220px;z-index:50;transition:opacity .15s;line-height:1.5;font-family:'DM Sans',sans-serif;text-transform:none;letter-spacing:normal;}
.tip:hover .tip-body{visibility:visible;opacity:1;}
.loose-grey{color:var(--text-muted);}

/* forecast RED row pin */
tr.row-red td{background:#fef2f2;}
tr.row-red:hover td{background:#fde8e8;}
.section-head{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);font-family:'DM Mono',monospace;margin:24px 0 12px;}

/* permission matrix */
.matrix td,.matrix th{text-align:center;}
.matrix td:first-child,.matrix th:first-child{text-align:left;}
.matrix select{padding:5px 8px;font-size:12px;}
.perm-edit{color:var(--success);font-weight:600;}
.perm-view{color:var(--warning);font-weight:600;}
.perm-hidden{color:var(--text-muted);}

/* photo thumb */
.thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2);}
.thumb-lg{width:160px;height:160px;border-radius:12px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2);}
.thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:10px;font-family:'DM Mono',monospace;text-align:center;}

/* ============================================================
   §6 / Stage 10 — DARK MODE. Variable overrides only; keeps the
   institutional navy / orange / green as accents. No markup changes.
   ============================================================ */
:root[data-theme="dark"]{
  --bg:#0F1420;--surface:#1A2032;--surface-2:#232B41;
  --border:#2E3852;
  --text-primary:#E6E9F2;--text-secondary:#AAB3C8;--text-muted:#71809C;
  /* accents kept; lighten slightly for contrast on dark surfaces */
  --navy:#4657C0;--navy-light:#5567d6;--navy-dark:#141a33;
  --orange:#E76F51;--orange-light:#f08060;
  --green:#3f8f7c;--green-light:#4aa88f;
  --success:#4ade80;--warning:#fbbf24;--error:#f87171;
}
/* readability tweaks that reference dark vars (still CSS-only) */
:root[data-theme="dark"] body{background:var(--bg);color:var(--text-primary);}
:root[data-theme="dark"] tr.row-red td{background:#3a1d22;}
:root[data-theme="dark"] tr.row-red:hover td{background:#47232a;}
/* pastel status badges: darken bg, brighten text so they stay legible on dark surfaces */
:root[data-theme="dark"] .badge-live,:root[data-theme="dark"] .badge-green,:root[data-theme="dark"] .badge-purchased{background:#14351f;color:#5ee08a;}
:root[data-theme="dark"] .badge-pending,:root[data-theme="dark"] .badge-yellow{background:#3a300f;color:#f5cf5a;}
:root[data-theme="dark"] .badge-approved,:root[data-theme="dark"] .badge-navy{background:#1e2a55;color:#93a4ff;}
:root[data-theme="dark"] .badge-flagged,:root[data-theme="dark"] .badge-red{background:#3a1d22;color:#ff8a8a;}
:root[data-theme="dark"] .badge-atom{background:#2a1f4d;color:#c4b5fd;}
:root[data-theme="dark"] .badge-bundle{background:#0c2f45;color:#7dd3fc;}
:root[data-theme="dark"] .badge-on_demand{background:#3a2410;color:#fbbf88;}
:root[data-theme="dark"] .badge-consignment{background:#2f1a45;color:#d8b4fe;}
:root[data-theme="dark"] .badge-archived{background:#262e40;color:#9aa6c0;}
:root[data-theme="dark"] .chip-green{background:#14351f;color:#5ee08a;}
:root[data-theme="dark"] .chip-yellow{background:#3a300f;color:#f5cf5a;}
:root[data-theme="dark"] .chip-red{background:#3a1d22;color:#ff8a8a;}
:root[data-theme="dark"] .chip-grey{background:#262e40;color:#9aa6c0;}
:root[data-theme="dark"] .flash-success{background:#14351f;border-color:#1c5233;color:#7ff0a5;}
:root[data-theme="dark"] .flash-error{background:#3a1d22;border-color:#5a2a33;color:#ff9d9d;}
:root[data-theme="dark"] .flash-info,:root[data-theme="dark"] .info-box{background:#1a2148;border-color:#2a356b;color:#a9b6ff;}
:root[data-theme="dark"] .warn-box{background:#33270f;border-color:#5a4620;color:#f5cf7a;}