/* ============================================================================
   QUARCOM | ذكاء المشتريات — app.css
   مأخوذ من الـ prototype (V00.05) زي ما هو. الإضافات في آخر الملف تحت "PHASE 1".
============================================================================ */

/* خط Cairo محلي (بدل Google Fonts) · رخصة OFL في vendor/fonts/OFL-Cairo.txt */
@font-face{
  font-family:'Cairo';
  src:url('../vendor/fonts/Cairo-Variable.woff') format('woff');
  font-weight:200 1000; font-style:normal; font-display:swap;
}

/* ============================= BRAND TOKENS | QUARCOM =============================
   Navy #2A4063 and bronze #998C73 are taken from the QUARCOM Engineering logo.
   Components use these tokens only, never literal colours.
==================================================================================== */
:root{
  color-scheme: light;
  --page:#EEF2F6; --surface:#FFFFFF; --surface-2:#F5F8FB; --surface-3:#EAF0F6;
  --border:#D9E2EC; --border-strong:#C2D0E0;
  --ink-1:#132238; --ink-2:#4C5D75; --ink-3:#7A8AA1;
  --brand:#2A4063; --brand-deep:#1A2739; --brand-wash:#E7EAF0;
  --accent:#726956; --accent-fill:#998C73; --accent-wash:#F1ECE3;
  --on-brand:#FFFFFF; --logo-plate:#FFFFFF;
  --side-bg:#1A2739; --side-bg-2:#2A4063; --side-ink:#EEF2F8; --side-mut:#A9B5C6; --side-line:rgba(255,255,255,.12); --side-hover:rgba(255,255,255,.07); --side-active:rgba(255,255,255,.14);
  --good:#0E8A0E; --good-wash:#E3F6E1;
  --warning:#A86E00; --warning-fill:#FAB219; --warning-wash:#FFF2D6;
  --serious:#c65a34; --serious-fill:#ec835a; --serious-wash:#FCE6DC;
  --critical:#C73434; --critical-wash:#FBE1E1;
  --grid:#E3E9F1; --scrim:rgba(9,16,26,.55);
  --cat-1:#2E75B6; --cat-2:#ED7D31; --cat-3:#0E9594; --cat-4:#C9962C; --cat-5:#7030A0; --cat-6:#548235;
  --shadow:0 1px 2px rgba(19,34,56,.05), 0 10px 28px -14px rgba(19,34,56,.18);
  --font-body:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#0A121D; --surface:#101C2C; --surface-2:#14243A; --surface-3:#182B44;
    --border:#243A54; --border-strong:#2E4864;
    --ink-1:#F2F7FC; --ink-2:#B4C4D9; --ink-3:#8296AE;
    --brand:#AEB6C3; --brand-deep:#EAF0F8; --brand-wash:#1B2636;
    --accent:#C9BCA6; --accent-fill:#C9BCA6; --accent-wash:#241F17;
    --on-brand:#0A121D; --logo-plate:#FFFFFF;
    --side-bg:#070D16; --side-bg-2:#101C2C; --side-ink:#EAF0F8; --side-mut:#8EA0B8;
    --good:#2FC22F; --good-wash:#0F2414;
    --warning:#FAB219; --warning-fill:#FAB219; --warning-wash:#2A2110;
    --serious:#EC835A; --serious-fill:#EC835A; --serious-wash:#2A1B14;
    --critical:#E66767; --critical-wash:#2C1414;
    --grid:#1C2C42; --scrim:rgba(0,0,0,.6);
    --cat-1:#4A8FCB; --cat-2:#C86A2E; --cat-3:#2FA89F; --cat-4:#B87D22; --cat-5:#8C63BD; --cat-6:#6BA151;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0A121D; --surface:#101C2C; --surface-2:#14243A; --surface-3:#182B44;
  --border:#243A54; --border-strong:#2E4864;
  --ink-1:#F2F7FC; --ink-2:#B4C4D9; --ink-3:#8296AE;
  --brand:#AEB6C3; --brand-deep:#EAF0F8; --brand-wash:#1B2636;
  --accent:#C9BCA6; --accent-fill:#C9BCA6; --accent-wash:#241F17;
  --on-brand:#0A121D; --logo-plate:#FFFFFF;
  --side-bg:#070D16; --side-bg-2:#101C2C; --side-ink:#EAF0F8; --side-mut:#8EA0B8;
  --good:#2FC22F; --good-wash:#0F2414;
  --warning:#FAB219; --warning-fill:#FAB219; --warning-wash:#2A2110;
  --serious:#EC835A; --serious-fill:#EC835A; --serious-wash:#2A1B14;
  --critical:#E66767; --critical-wash:#2C1414;
  --grid:#1C2C42; --scrim:rgba(0,0,0,.6);
  --cat-1:#4A8FCB; --cat-2:#C86A2E; --cat-3:#2FA89F; --cat-4:#B87D22; --cat-5:#8C63BD; --cat-6:#6BA151;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{direction:rtl;}
body{background:var(--page); color:var(--ink-1); font-family:var(--font-body); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;}
::selection{background:var(--brand); color:var(--on-brand);}
h1,h2,h3,h4{font-family:var(--font-body); margin:0; text-wrap:balance;}
a{color:inherit;}
button,input,select,textarea{font-family:var(--font-body);}
:focus-visible{outline:2px solid var(--accent-fill); outline-offset:2px;}
::-webkit-scrollbar{height:10px;width:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important;}}

.en{direction:ltr; unicode-bidi:isolate;}
.sub-en{font-size:.82em; color:var(--ink-3); font-weight:400; direction:ltr; unicode-bidi:isolate;}
.bi{display:flex; flex-direction:column; gap:0;}
.bi .pri{font-weight:600;}
.bi .sec{font-size:.84em; color:var(--ink-3); font-weight:400;}
.mono,.cell-id{font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate;}
.tabular{font-variant-numeric:tabular-nums;}

/* ============================= SHELL: RIGHT SIDEBAR + TOP BAR ============================= */
.app{min-height:100vh;}
.side{
  position:fixed; inset-block:0; inset-inline-start:0; width:250px; z-index:50;
  background:linear-gradient(170deg,var(--side-bg),var(--side-bg-2)); color:var(--side-ink);
  display:flex; flex-direction:column; gap:14px; padding:16px 12px; overflow-y:auto;
}
.side-brand{display:grid; gap:8px; padding:0 4px 12px; border-bottom:1px solid var(--side-line);}
.logo-plate{background:var(--logo-plate); border-radius:10px; padding:8px 12px; display:flex; align-items:center; justify-content:center;}
.logo-plate img{height:34px; width:auto; display:block;}
.side-brand .mod{font-weight:700; font-size:15px; line-height:1.35;}
.side-brand .mod .sub-en{display:block; color:var(--side-mut);}
.snav{display:grid; gap:2px;}
.sn{
  appearance:none; background:none; border:0; color:var(--side-mut); cursor:pointer; text-align:start; width:100%;
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; font-size:14px; font-weight:600;
}
.sn .ic{width:18px; height:18px; flex:none; opacity:.85;}
.sn .lbl{display:flex; flex-direction:column; line-height:1.3; flex:1;}
.sn .lbl .sub-en{color:var(--side-mut); font-size:10.5px; font-weight:500; align-self:flex-end;}
.sn:hover{background:var(--side-hover); color:var(--side-ink);}
.sn.active{background:var(--side-active); color:var(--side-ink); box-shadow:inset -3px 0 0 var(--accent-fill);}
.sn.ref{margin-top:6px; border-top:1px solid var(--side-line); border-radius:0 0 10px 10px; padding-top:12px;}
.side-foot{margin-top:auto; font-size:11.5px; color:var(--side-mut); border-top:1px solid var(--side-line); padding-top:10px; display:grid; gap:4px;}
.side-foot .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--warning-fill); margin-inline-end:6px;}
.side-foot.live .dot{background:var(--good);}

.main{margin-inline-start:250px; min-width:0; display:flex; flex-direction:column; min-height:100vh;}
.topbar{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border);}
.topbar-inner{max-width:1360px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.tb-title{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.tb-title .t1{font-weight:800; font-size:16px; color:var(--brand-deep);}
.tb-title .t2{font-size:11.5px; color:var(--ink-3);}
.ver-chip{font-family:var(--font-mono); font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:100px; background:var(--accent-wash); color:var(--accent); border:1px solid var(--border); direction:ltr;}
.sample-badge{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.6px; padding:2px 8px; border-radius:6px; background:var(--warning-wash); color:var(--warning); border:1px dashed var(--warning-fill); direction:ltr;}
.sample-badge[hidden]{display:none;}
.tb-actions{display:flex; align-items:center; gap:8px; margin-inline-start:auto; flex-wrap:wrap;}
.search-box{display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:0 10px; height:34px; min-width:200px;}
.search-box input{border:none; background:transparent; outline:none; color:var(--ink-1); font-size:12.5px; width:100%;}
.search-box svg{flex-shrink:0; opacity:.55;}
.role-sel{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3);}
.role-sel select{height:34px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-1); border-radius:8px; padding:0 8px; font-size:12.5px; font-weight:600;}
.role-sel .sim{font-size:10px; padding:1px 6px; border-radius:5px; background:var(--surface-3); color:var(--ink-3);}
.icon-btn{width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.icon-btn:hover{background:var(--surface-3); color:var(--ink-1);}
.tb-btn{height:34px; display:inline-flex; align-items:center; gap:6px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-1); padding:0 12px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;}
.tb-btn:hover{background:var(--surface-3);}
.tb-btn.bug{background:var(--critical-wash); color:var(--critical); border-color:transparent;}
.menu-wrap{position:relative;}
.menu{position:absolute; inset-inline-end:0; top:calc(100% + 6px); min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:6px; display:none; z-index:60;}
.menu.open{display:grid; gap:2px;}
.menu button{appearance:none; border:0; background:none; text-align:start; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--ink-1); font-size:13px; font-weight:600; display:flex; flex-direction:column;}
.menu button .sub-en{font-size:10.5px;}
.menu button:hover:not(:disabled){background:var(--surface-2);}
.menu button:disabled{opacity:.45; cursor:not-allowed;}
.menu .note{font-size:11px; color:var(--ink-3); padding:4px 10px 6px;}

.sync-strip{background:var(--accent-wash); border-bottom:1px solid var(--border); color:var(--accent);}
.sync-strip.live{background:var(--good-wash); color:var(--good);}
.sync-strip-inner{max-width:1360px; margin:0 auto; padding:5px 24px; display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; flex-wrap:wrap;}
.sync-strip-inner .sub-en{font-weight:400;}

main{flex:1; max-width:1360px; margin:0 auto; padding:24px 24px 60px; width:100%;}
.view{display:none;}
.view.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.section-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:30px 0 14px; flex-wrap:wrap;}
.section-head:first-child{margin-top:0;}
.section-head h2{font-size:19px; font-weight:800;}
.section-head h2 .sub-en{font-size:12px; margin-inline-start:6px;}
.section-head .hint{color:var(--ink-3); font-size:12px;}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

@media (max-width:900px){
  .side{position:static; width:100%; flex-direction:column; gap:8px; padding:10px 12px;}
  .side-brand{grid-template-columns:auto 1fr; align-items:center; padding-bottom:8px;}
  .logo-plate img{height:26px;}
  .snav{display:flex; overflow-x:auto; gap:4px; scrollbar-width:none;}
  .snav::-webkit-scrollbar{display:none;}
  .sn{flex:none; width:auto; padding:6px 10px;}
  .sn .lbl .sub-en{display:none;}
  .sn.ref{margin-top:0; border-top:0; padding-top:6px; border-radius:10px;}
  .sn.active{box-shadow:inset 0 -3px 0 var(--accent-fill);}
  .side-foot{display:none;}
  .main{margin-inline-start:0;}
  .topbar{position:static;}
  .topbar-inner,.sync-strip-inner{padding-inline:16px;}
  main{padding:18px 16px 50px;}
  .search-box{min-width:0; flex:1 1 160px;}
  .tb-actions{margin-inline-start:0; width:100%;}
}

/* ============================= BUTTONS ============================= */
.btn-primary{display:inline-flex; align-items:center; gap:6px; background:var(--brand); color:var(--on-brand); border:none; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;}
.btn-primary:hover:not(:disabled){filter:brightness(1.1);}
.btn-primary:disabled,.btn-small:disabled,.btn-ghost:disabled{opacity:.45; cursor:not-allowed;}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--ink-2); border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer;}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);}
.btn-small{background:var(--surface-3); color:var(--brand); border:1px solid var(--border); border-radius:7px; padding:4px 10px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;}
.btn-small:hover:not(:disabled){border-color:var(--border-strong);}

/* ============================= MODAL ============================= */
.modal-overlay{position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; padding:22px 24px 24px;}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:12px;}
.modal-head h3{font-size:17px; font-weight:800;}
.modal-head .sub-en{display:block; margin-top:2px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.form-field{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-2); font-weight:600;}
.form-field.full{grid-column:1/-1;}
.form-field .req{color:var(--critical);}
.form-field input,.form-field select,.form-field textarea{border:1px solid var(--border); background:var(--surface-2); color:var(--ink-1); border-radius:7px; padding:8px 10px; font-size:13px; outline:none; width:100%;}
.form-field textarea{min-height:76px; resize:vertical;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--brand);}
.modal-actions{grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; margin-top:8px; flex-wrap:wrap;}
.modal-note{grid-column:1/-1; font-size:12px; color:var(--ink-3); background:var(--surface-2); border:1px dashed var(--border); border-radius:8px; padding:8px 10px;}
.modal-error{grid-column:1/-1; font-size:12.5px; font-weight:600; color:var(--critical); background:var(--critical-wash); border-radius:8px; padding:8px 10px;}
.copy-box{grid-column:1/-1; width:100%; min-height:150px; font-family:var(--font-mono); font-size:12px; direction:ltr; text-align:left; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-1); border-radius:8px; padding:10px;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}

/* ============================= TOAST ============================= */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--brand-deep); color:var(--surface); padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; z-index:10001; opacity:0; pointer-events:none; transition:opacity .2s; max-width:92vw;}
.toast.on{opacity:1;}
.toast.err{background:var(--critical); color:var(--on-brand);}

/* ============================= KPI TILES ============================= */
.kpi-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
@media (max-width:1180px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 14px 12px; position:relative; overflow:hidden; box-shadow:var(--shadow);}
.kpi::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kpi-accent, var(--brand));}
.kpi .label{font-size:12.5px; color:var(--ink-2); font-weight:700; line-height:1.35;}
.kpi .label .sub-en{display:block; font-size:10.5px;}
.kpi .value{font-weight:800; font-size:26px; margin-top:6px; color:var(--kpi-accent, var(--ink-1)); font-variant-numeric:tabular-nums; direction:ltr; text-align:right;}
.kpi .sub{font-size:11.5px; color:var(--ink-3); margin-top:2px;}
.kpi .sub.flag{color:var(--critical); font-weight:700;}

/* ============================= CARDS ============================= */
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:18px;}
.card-title{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap;}
.card-title h3{font-size:15px; font-weight:800;}
.card-title .sub-en{font-size:11px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:920px){.grid-2{grid-template-columns:1fr;}}
.attn-card{border-inline-start:4px solid var(--critical);}
.attn-card.clear{border-inline-start-color:var(--good);}

/* ============================= PILLS ============================= */
.pill{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:100px; font-size:11.5px; font-weight:700; white-space:nowrap; line-height:1.6;}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor; flex-shrink:0;}
.pill.good{background:var(--good-wash); color:var(--good);}
.pill.warning{background:var(--warning-wash); color:var(--warning);}
.pill.serious{background:var(--serious-wash); color:var(--serious);}
.pill.critical{background:var(--critical-wash); color:var(--critical);}
.pill.neutral{background:var(--surface-3); color:var(--ink-2);}
.pill.brand{background:var(--brand-wash); color:var(--brand);}
.pill.accent{background:var(--accent-wash); color:var(--accent);}
.grade{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; font-weight:800; font-size:13px; flex-shrink:0;}
.grade.A{background:var(--good-wash); color:var(--good);}
.grade.B{background:var(--warning-wash); color:var(--warning);}
.grade.C{background:var(--serious-wash); color:var(--serious);}
.stars{display:inline-flex; gap:2px; align-items:center; direction:ltr;}
.stars svg{width:12px;height:12px;}
.stars .filled{color:var(--accent-fill);}
.stars .empty{color:var(--border-strong);}

/* ============================= TABLES ============================= */
.table-wrap{overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; min-width:680px;}
thead th{text-align:start; font-size:12px; color:var(--ink-2); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); position:sticky; top:0; z-index:1; white-space:nowrap;}
thead th .sub-en{font-size:10px; display:block;}
tbody td{padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.clickable{cursor:pointer;}
tbody tr.clickable:hover{background:var(--surface-2);}
tbody tr.flag-critical{box-shadow:inset -3px 0 0 var(--critical);}
td .cell-id{font-size:12px; color:var(--ink-2);}
td.num,th.num{text-align:left; font-variant-numeric:tabular-nums;}
td.num{font-family:var(--font-mono); direction:ltr;}
.table-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.filter-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.chip{border:1px solid var(--border); background:var(--surface); color:var(--ink-2); border-radius:100px; padding:4px 12px; font-size:12.5px; font-weight:600; cursor:pointer;}
.chip:hover{border-color:var(--border-strong);}
.chip.active{background:var(--brand); border-color:var(--brand); color:var(--on-brand);}
.detail-row td{background:var(--surface-2); padding:0;}
.detail-panel{padding:18px 22px; display:none; border-top:1px dashed var(--border);}
.detail-panel.open{display:grid; grid-template-columns:1.1fr 1fr; gap:22px;}
@media (max-width:800px){.detail-panel.open{grid-template-columns:1fr;}}
.detail-block h4{font-size:12.5px; color:var(--ink-2); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px;}
.kv dt{color:var(--ink-3);}
.kv dd{margin:0; font-weight:600;}
.mini-products{display:flex; flex-direction:column; gap:8px;}
.mini-product{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px;}
.mini-product .name{font-size:12.5px; font-weight:600; display:flex; flex-direction:column;}
.mini-product .name .sec{font-size:11px; color:var(--ink-3); font-weight:400;}
.mini-product .price{font-family:var(--font-mono); font-size:12px; color:var(--brand); font-weight:700; white-space:nowrap; direction:ltr;}
.chev{transition:transform .18s; flex-shrink:0; transform:scaleX(-1);}
tr.expanded .chev{transform:rotate(90deg);}

/* ============================= CHARTS ============================= */
.chart-box{position:relative; height:230px;}
.chart-box.tall{height:280px;}
.legend-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:12px; color:var(--ink-2);}
.legend-row .lg-item{display:flex; align-items:center; gap:6px;}
.legend-row .sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.lb-row{display:grid; grid-template-columns:30px 1.6fr 1fr 48px; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--border);}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-family:var(--font-mono); color:var(--ink-3); font-size:12px; direction:ltr;}
.lb-name{font-weight:700; font-size:13px; display:flex; flex-direction:column; min-width:0;}
.lb-name .sec{font-weight:400; color:var(--ink-3); font-size:11px;}
.lb-bar-track{height:7px; border-radius:4px; background:var(--surface-3); overflow:hidden;}
.lb-bar-fill{height:100%; border-radius:4px; background:var(--brand);}
.lb-score{font-family:var(--font-mono); font-weight:700; text-align:left; font-size:12.5px; direction:ltr;}
.alert-item{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border);}
.alert-item:last-child{border-bottom:none;}
.alert-ic{width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.alert-ic.warning{background:var(--warning-wash); color:var(--warning);}
.alert-ic.critical{background:var(--critical-wash); color:var(--critical);}
.alert-body .t{font-size:13px; font-weight:700;}
.alert-body .s{font-size:11.5px; color:var(--ink-3); margin-top:1px;}

/* ============================= PROJECTS ============================= */
.proj-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;}
.proj-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px;}
.proj-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.proj-id{font-family:var(--font-mono); font-size:11px; color:var(--ink-3); direction:ltr; text-align:right;}
.proj-name{font-weight:800; font-size:15.5px; margin-top:2px;}
.proj-name .sec{display:block; font-weight:400; font-size:11.5px; color:var(--ink-3);}
.proj-meta{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-2);}
.proj-meta .row{display:flex; justify-content:space-between; gap:8px;}
.proj-meta .row span:first-child{color:var(--ink-3);}
.progress-track{height:6px; border-radius:4px; background:var(--surface-3); overflow:hidden; margin-top:2px;}
.progress-fill{height:100%; border-radius:4px; background:var(--brand);}
.proj-foot{display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--border);}
.proj-foot .stat{font-size:12px; color:var(--ink-3);}
.proj-foot .stat b{color:var(--ink-1); font-family:var(--font-mono); font-weight:700;}

/* ============================= RFQ ============================= */
.rfq-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden;}
.rfq-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; background:var(--surface-2); border-bottom:1px solid var(--border); flex-wrap:wrap;}
.rfq-head .id{font-family:var(--font-mono); font-weight:700; font-size:13px; direction:ltr;}
.rfq-head .item{font-size:13px; color:var(--ink-2); margin-top:2px;}
.rfq-offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--border);}
.offer{background:var(--surface); padding:14px 16px; position:relative;}
.offer.won{background:var(--good-wash);}
.offer.excluded{opacity:.7;}
.offer .sup{font-weight:700; font-size:13px; padding-inline-end:22px;}
.offer .price{font-family:var(--font-mono); font-weight:800; font-size:18px; margin-top:6px; direction:ltr; text-align:right;}
.offer .meta{font-size:12px; color:var(--ink-3); margin-top:6px; display:flex; flex-direction:column; gap:2px;}
.offer .badge-row{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap;}
.win-tag{position:absolute; top:10px; inset-inline-end:10px; color:var(--good);}

/* ============================= REFERENCE TAB ============================= */
.ref-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:12px;}
.ref-head h2{font-size:20px; font-weight:800;}
.health{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px;}
@media (max-width:640px){.health{grid-template-columns:repeat(2,1fr);}}
.health .h{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px;}
.health .h b{display:block; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums;}
.health .h span{font-size:12px; color:var(--ink-3);}
.health .h.warn b{color:var(--warning);}
.ref-index{position:sticky; top:0; z-index:5; display:flex; gap:6px; overflow-x:auto; padding:8px 0; background:var(--page); scrollbar-width:thin; margin-bottom:8px;}
.ref-index a{flex:none; text-decoration:none; font-size:12px; font-weight:700; padding:4px 10px; border-radius:100px; background:var(--surface); border:1px solid var(--border); color:var(--ink-2); white-space:nowrap;}
.ref-index a:hover{border-color:var(--brand); color:var(--brand);}
.ref-sec{background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); margin-bottom:14px; scroll-margin-top:60px;}
.ref-sec>summary{list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ref-sec>summary::-webkit-details-marker{display:none;}
.ref-sec>summary .no{font-family:var(--font-mono); font-weight:800; color:var(--accent); direction:ltr;}
.ref-sec>summary h3{font-size:15.5px; font-weight:800;}
.ref-sec>summary .stage{margin-inline-start:auto; font-size:11px; color:var(--ink-3); font-family:var(--font-mono); direction:ltr;}
.ref-body{padding:0 18px 18px; display:grid; gap:12px; font-size:13.5px;}
.ref-body p{margin:0;}
.ref-body ul,.ref-body ol{margin:0; padding-inline-start:20px; display:grid; gap:4px;}
.ref-body table{min-width:560px;}
.ref-body .table-wrap{max-height:none; box-shadow:none;}
.ref-sub{font-size:13.5px; font-weight:800; color:var(--brand-deep); margin-top:4px;}
.rule-tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.rule-tools input{height:32px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-1); border-radius:8px; padding:0 10px; font-size:12.5px; min-width:200px; flex:1;}
.rules{display:grid; gap:10px;}
.rule{border:1px solid var(--border); border-radius:10px; padding:12px 14px; display:grid; gap:6px; background:var(--surface);}
.rule.confirmed{border-color:var(--good); background:var(--good-wash);}
.rule.queued{box-shadow:inset -3px 0 0 var(--accent-fill);}
.rule-top{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.rule-id{font-family:var(--font-mono); font-weight:800; font-size:12.5px; color:var(--brand); direction:ltr;}
.rule-title{font-weight:800;}
.rule .why{font-size:12.5px; color:var(--ink-3);}
.rule .lever{font-size:12px; font-family:var(--font-mono); background:var(--surface-2); border:1px dashed var(--border); border-radius:6px; padding:2px 8px; justify-self:start; direction:ltr; unicode-bidi:plaintext;}
.rule .ex{font-size:12.5px; background:var(--accent-wash); border-radius:6px; padding:4px 8px;}
.rule-acts{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-size:11px; font-weight:800; padding:1px 8px; border-radius:100px;}
.tag.Standard{background:var(--brand-wash); color:var(--brand);}
.tag.Assumption{background:var(--warning-wash); color:var(--warning);}
.tag.Assumption::before{content:"● ";}
.tag.Company{background:var(--good-wash); color:var(--good);}
.tag.Best{background:var(--surface-3); color:var(--ink-2);}
.matrix td,.matrix th{text-align:center;}
.matrix td:first-child,.matrix th:first-child{text-align:start;}
.flow{counter-reset:st; list-style:none; padding:0!important;}
.flow li{counter-increment:st; display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start;}
.flow li::before{content:counter(st); width:24px; height:24px; border-radius:50%; background:var(--brand); color:var(--on-brand); font-size:12px; font-weight:800; display:grid; place-items:center;}
.flow .who{font-size:11.5px; color:var(--accent); font-weight:700;}
.linkish{appearance:none; border:0; background:none; color:var(--brand); text-decoration:underline; cursor:pointer; padding:0; font-size:inherit; font-weight:700;}
.g1 li{display:flex; gap:10px; align-items:flex-start;}
.g1 input{width:18px; height:18px; margin-top:3px; accent-color:var(--good);}
.g1 .auto{font-size:11px; font-weight:800; padding:0 8px; border-radius:100px;}
.g1 .auto.ok{background:var(--good-wash); color:var(--good);}
.g1 .auto.no{background:var(--critical-wash); color:var(--critical);}
.basket-fab{position:fixed; bottom:20px; inset-inline-end:20px; z-index:90; display:none; align-items:center; gap:8px; background:var(--accent-fill); color:var(--on-brand); border:0; border-radius:100px; padding:10px 16px; font-size:13px; font-weight:800; cursor:pointer; box-shadow:var(--shadow);}
.basket-fab.show{display:inline-flex;}
.basket-fab b{background:var(--surface); color:var(--accent); border-radius:100px; padding:0 8px; font-family:var(--font-mono);}
.bitem{border:1px solid var(--border); border-radius:8px; padding:8px 10px; display:grid; gap:2px; font-size:12.5px;}
.bitem .k{font-family:var(--font-mono); font-weight:800; color:var(--brand); direction:ltr; justify-self:start;}

footer{border-top:1px solid var(--border); background:var(--surface); padding:18px 24px; margin-top:30px; text-align:center; color:var(--ink-3); font-size:12px;}
.empty-state{padding:36px 20px; text-align:center; color:var(--ink-3); font-size:13px;}

/* ============================= BUG REPORT (+Bug) =============================
   From Bug_Report_Kit (reference/css/bug-report.css), same layout and behaviour.
   Colours mapped to QUARCOM BRAND TOKENS. Floating button bottom-left.
============================================================================== */
.br-fab{
  position:fixed; left:16px; bottom:62px; z-index:9998;
  background:var(--brand); color:var(--on-brand); border:0; border-radius:999px;
  padding:11px 20px; font-weight:800; font-size:14px; line-height:1; font-family:inherit; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, background .15s;
}
.br-fab:hover{ transform:translateY(-2px); background:var(--brand-deep); }
.br-fab:focus-visible{ outline:3px solid var(--accent-fill); outline-offset:2px; }
.br-fab.busy{ background:var(--brand-deep); cursor:progress; font-size:12.5px; }
@media (max-width: 768px){ .br-fab{ bottom:112px; left:12px; padding:9px 16px; font-size:13px; } }
@media print{ .br-fab{ display:none !important; } }

body.br-lock{ overflow:hidden; }
.br-ovl{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; background:var(--scrim); padding:20px; }
.br-ovl.open{ display:flex; }
.br-dlg{ background:var(--surface); border-radius:18px; width:min(1240px,100%); max-height:calc(100vh - 40px); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); border-top:5px solid var(--accent-fill); }
.br-head{ background:linear-gradient(170deg,var(--side-bg),var(--side-bg-2)); color:var(--side-ink); display:flex; align-items:center; justify-content:space-between; padding:16px 22px; }
.br-head h3{ margin:0; font-size:19px; font-weight:800; }
.br-x{ background:none; border:0; color:var(--side-ink); font-size:30px; line-height:1; cursor:pointer; opacity:.85; }
.br-x:hover{ opacity:1; }
.br-body{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); gap:22px; padding:20px 22px; overflow:auto; }
.br-shot{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.br-tools{ display:flex; gap:8px; flex-wrap:wrap; }
.br-tools button{ border:1px solid var(--border); background:var(--surface); color:var(--brand); border-radius:10px; padding:8px 14px; font-weight:700; font-size:13px; font-family:inherit; cursor:pointer; }
.br-tools button.on{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.br-tools button:hover:not(.on){ background:var(--accent-wash); }
.br-canvas-wrap{ border:1px solid var(--border); border-radius:12px; overflow:auto; max-height:56vh; background:var(--surface-3); }
#brCanvas{ display:block; width:100%; height:auto; cursor:crosshair; touch-action:none; }
.br-noshot{ padding:40px 20px; text-align:center; color:var(--ink-3); font-size:13px; }
.br-shot.off .br-tools, .br-shot.off .br-canvas-wrap{ opacity:.35; pointer-events:none; }
.br-attach{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--brand-deep); font-size:14px; cursor:pointer; }
.br-attach input{ width:18px; height:18px; accent-color:var(--brand); }
.br-hint{ font-size:12px; color:var(--ink-3); }
.br-form{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.br-fld{ display:flex; flex-direction:column; gap:6px; }
.br-fld label{ font-weight:800; font-size:13.5px; color:var(--brand-deep); }
.br-fld label i{ font-style:normal; font-weight:600; color:var(--ink-3); }
.br-fld .req{ color:var(--critical); }
.br-fld input, .br-fld textarea, .br-fld select{ width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:12px; padding:11px 14px; font-weight:500; font-size:14px; font-family:inherit; background:var(--surface-2); color:var(--ink-1); }
.br-fld input[readonly]{ background:var(--surface-3); color:var(--ink-2); }
.br-fld input:focus, .br-fld textarea:focus, .br-fld select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash); background:var(--surface); }
.br-fld textarea{ resize:vertical; min-height:110px; }
.br-auto{ font-size:12px; color:var(--ink-3); }
.br-acts{ display:flex; gap:10px; margin-top:auto; }
/* host button styles the kit relies on (scoped to the dialog only) */
.br-ovl .btn{ border:0; border-radius:12px; padding:12px 22px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.br-ovl .btn.navy{ background:var(--brand); color:var(--on-brand); }
.br-ovl .btn.ghost{ background:transparent; color:var(--ink-2); border:1px solid var(--border); }
.br-ovl .btn.ghost:hover{ background:var(--accent-wash); border-color:var(--accent-fill); }
.br-ovl .btn:disabled{ opacity:.5; cursor:not-allowed; }
@media (max-width: 900px){
  .br-ovl{ padding:0; }
  .br-dlg{ border-radius:0; max-height:100vh; height:100vh; }
  .br-body{ grid-template-columns:1fr; }
  .br-canvas-wrap{ max-height:38vh; }
}


/* ============================================================================
   PHASE 1 — إضافات النسخة الحقيقية
============================================================================ */

/* أيقونة الثيم: قمر في الوضع الفاتح، شمس في الداكن (ملاحظة الـ DevOps review) */
html.is-dark .ic-moon, html:not(.is-dark) .ic-sun{display:none;}

/* قايمة المستخدم في الـ Top bar */
.user-btn{gap:8px; padding:0 10px 0 8px;}
.user-avatar{width:24px; height:24px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none;}
.user-lbl{display:flex; flex-direction:column; line-height:1.15; text-align:start;}
.user-name{font-size:12.5px; font-weight:700; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-role{font-size:10.5px; color:var(--ink-3); font-weight:600;}
.menu-head{display:grid; gap:2px; padding:8px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:4px; font-size:12.5px; color:var(--ink-2);}
.menu-head b{color:var(--ink-1); font-size:13.5px;}
.menu-head .mono{font-size:11.5px; color:var(--ink-3); justify-self:start;}
.menu form{margin:0; display:grid;}
.menu button.danger{color:var(--critical);}
.menu button:hover{background:var(--surface-2);}
@media (max-width:900px){ .user-lbl{display:none;} }

/* شاشة لسه هتتبني في مرحلة جاية */
.phase-card{border:1px dashed var(--border-strong); border-radius:12px; background:var(--surface); padding:28px 24px; display:grid; gap:12px; justify-items:start;}
.phase-card .phase-tag{font-family:var(--font-mono); font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; background:var(--brand-wash); color:var(--brand); direction:ltr;}
.phase-card h3{font-size:16px;}
.phase-card ul{margin:0; padding-inline-start:20px; color:var(--ink-2); font-size:13px; display:grid; gap:4px;}
.phase-card p{margin:0; color:var(--ink-3); font-size:12.5px;}

/* صفحات الدخول وتغيير كلمة السر */
.auth-body{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--page);}
.auth-wrap{width:100%; max-width:480px;}
.auth-card{position:relative; background:var(--surface); border:1px solid var(--border); border-top:5px solid var(--accent-fill); border-radius:16px;
  box-shadow:0 14px 40px rgba(26,39,57,.12), 0 2px 6px rgba(26,39,57,.06); padding:26px 34px 18px; display:grid; gap:12px;}
.auth-env{position:absolute; top:12px; inset-inline-start:14px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px;
  background:var(--warning-wash); color:var(--warning); border:1px dashed var(--warning-fill);}
.auth-brand{display:grid; gap:2px; justify-items:center; text-align:center;}
.auth-logo{background:#fff; border-radius:10px; padding:4px 12px; margin-bottom:4px;}
.auth-logo img{height:42px; display:block;}
.auth-mod{font-weight:800; font-size:21px; color:var(--brand-deep); line-height:1.3;}
.auth-mod-en{font-size:13px; font-weight:600; color:var(--brand);}
.auth-co{font-size:10px; letter-spacing:2.5px; color:var(--accent); margin-top:4px; direction:ltr;}
.auth-hint{font-size:12.5px; color:var(--ink-3); margin-top:4px;}
.auth-hint .en,.auth-field .en,.auth-submit .en{font-family:inherit;}
.auth-form{display:grid; gap:11px;}
.auth-field{display:grid; gap:5px;}
.auth-field > span:first-child{font-size:12px; color:var(--ink-3);}
.auth-field > span:first-child b{font-size:13px; color:var(--brand-deep);}
.auth-field input{width:100%; height:42px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--ink-1);
  padding:0 14px; font-size:14.5px; font-family:inherit; text-align:left; transition:border-color .15s, box-shadow .15s;}
.auth-field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash); background:var(--surface);}
.auth-pass{position:relative; display:block;}
.auth-pass input{padding-right:46px;}
.auth-eye{position:absolute; top:50%; right:7px; transform:translateY(-50%); width:32px; height:32px; border:0; border-radius:7px; background:none;
  color:var(--ink-3); cursor:pointer; display:grid; place-items:center;}
.auth-eye:hover{color:var(--brand); background:var(--surface-3);}
.auth-submit{justify-content:center; height:44px; font-size:15px; font-weight:800; border-radius:9px; margin-top:4px; width:100%;}
.auth-msg{border-radius:9px; padding:8px 12px; font-size:13px; font-weight:600;}
.auth-msg.err{background:var(--critical-wash); color:var(--critical);}
.auth-msg.info{background:var(--brand-wash); color:var(--brand);}
.auth-note{margin:0; font-size:12px; color:var(--ink-3); text-align:center;}
.auth-alt{display:flex; justify-content:center;}
.auth-alt .linkish{font-size:12.5px; color:var(--ink-3);}
.auth-title{font-size:15px; font-weight:800;}
.auth-foot{text-align:center; font-size:11px; color:var(--ink-3); display:grid; gap:2px; padding-top:10px; border-top:1px solid var(--border);}
.auth-secure{display:inline-flex; gap:6px; align-items:center; justify-content:center; color:var(--good); font-weight:600;}
@media (max-height:780px){ .auth-body{padding:10px 16px;} .auth-co{display:none;} .auth-logo img{height:36px;} .auth-card{gap:10px; padding-top:22px;} .auth-form{gap:9px;} }
@media (max-width:560px){ .auth-card{padding:30px 20px 16px;} .auth-mod{font-size:19px;} }

/* تبديل المستخدم (بيئة التجربة بس) */

/* ============================================================================
   PHASE 2 — الموردين والمشاريع والإعدادات
============================================================================ */
.chip b{font-family:var(--font-mono); font-weight:700; font-size:11px; opacity:.75; margin-inline-start:2px;}
.toggle{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); font-weight:600; cursor:pointer;}
.toggle input{accent-color:var(--brand); width:15px; height:15px;}
.row-inactive{opacity:.55;}
tr.row-inactive td{background:repeating-linear-gradient(-45deg, transparent 0 8px, var(--surface-2) 8px 16px);}
td .pill{margin-inline-start:4px;}
.doc-flag{display:inline-flex; align-items:center; justify-content:center; margin-inline-start:6px; font-size:12px; font-weight:800;}
.doc-flag.warning{color:var(--warning);}
.doc-flag.critical{color:var(--critical);}
.detail-acts{display:inline-flex; gap:6px;}
.btn-small.danger{color:var(--critical);}
.btn-small.danger:hover:not(:disabled){border-color:var(--critical);}
.btn-primary.danger{background:var(--critical); color:#fff;}
.mat-side{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.muted-line{color:var(--ink-3); font-size:12px;}
.kv dd.pre{white-space:pre-wrap; font-weight:500;}
.kv dd .pill{margin-inline-start:6px;}

.proj-top-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.proj-line{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-3);}
.proj-line .mono{color:var(--ink-1); font-size:11.5px;}
.proj-sub{font-size:11.5px; color:var(--ink-3); margin-top:4px;}
.proj-sub.warning{color:var(--warning); font-weight:700;}
.proj-sub.critical{color:var(--critical); font-weight:700;}
.progress-fill.good{background:var(--good);}
.progress-fill.warning{background:var(--warning-fill);}
.progress-fill.critical{background:var(--critical);}
.proj-foot{gap:8px; flex-wrap:wrap;}

.form-grid.wide{grid-template-columns:1fr 1fr;}
.modal:has(.form-grid.wide){max-width:720px;}
.form-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-weight:600; cursor:pointer;}
.form-check.full{grid-column:1/-1;}
.form-check input{accent-color:var(--brand); width:16px; height:16px;}
.form-field input[readonly]{opacity:.7; cursor:not-allowed;}
.form-field [aria-invalid="true"]{border-color:var(--critical); box-shadow:0 0 0 2px var(--critical-wash);}
.confirm-msg{font-size:13px; color:var(--ink-1); line-height:1.8;}

.subtabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap;}
.subtab{appearance:none; border:0; background:none; padding:10px 14px; font-size:13.5px; font-weight:700; color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:var(--font-body);}
.subtab:hover{color:var(--ink-1);}
.subtab.active{color:var(--brand); border-bottom-color:var(--brand);}
.subtab.soon{cursor:default; opacity:.55;}
.subtab .sub-en{font-size:10.5px;}
.row-acts{white-space:nowrap; text-align:left;}
.row-acts .btn-small + .btn-small{margin-inline-start:4px;}
.sub-line{display:block; font-size:11px; color:var(--ink-3); font-weight:400;}
.temp-pwd{grid-column:1/-1; display:grid; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px;}
.temp-row{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; color:var(--ink-2);}
.temp-row b{font-size:16px; color:var(--ink-1); letter-spacing:.5px; user-select:all;}
.lk-layout{display:grid; grid-template-columns:230px 1fr; gap:16px; align-items:start;}
.lk-groups{display:grid; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px;}
.lk-group{appearance:none; border:0; background:none; display:flex; justify-content:space-between; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; text-align:start; font-family:var(--font-body);}
.lk-group:hover{background:var(--surface-2);}
.lk-group.active{background:var(--brand-wash); color:var(--brand);}
.lk-group .pill{font-size:10px; padding:0 7px;}
@media (max-width:800px){ .lk-layout{grid-template-columns:1fr;} .form-grid.wide{grid-template-columns:1fr;} }

/* قايمة البيانات: معاينة الاستيراد */
.imp-table{grid-column:1/-1; max-height:none;}
.imp-table table{min-width:0;}
.good-t{color:var(--good); font-weight:700;}
.brand-t{color:var(--brand); font-weight:700;}
.crit-t{color:var(--critical); font-weight:700;}
.imp-ok{grid-column:1/-1; background:var(--good-wash); color:var(--good); border-radius:8px; padding:9px 12px; font-size:12.5px; font-weight:700;}
.imp-issues{grid-column:1/-1; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface-2); max-height:260px; overflow:auto;}
.imp-issues-head{display:flex; gap:6px; margin-bottom:8px;}
.imp-issues ul{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:12.5px;}
.imp-issues li{padding-inline-start:10px; border-inline-start:3px solid var(--warning-fill); line-height:1.6;}
.imp-issues li.error{border-inline-start-color:var(--critical);}
.imp-issues li .mono{font-size:11.5px; color:var(--ink-2);}
.imp-issues li .ent{font-size:11px; color:var(--ink-3); margin-inline:4px;}
.rating-cell{display:flex; align-items:center; gap:6px; justify-content:flex-start;}
.eval-summary{display:flex; align-items:baseline; gap:8px; font-size:12.5px; color:var(--ink-3);}
.eval-score{font-family:var(--font-mono); font-size:26px; font-weight:800; color:var(--ink-1); direction:ltr;}
.eval-summary .grade{align-self:center;}

/* ===================== PHASE 3 · RFQ ===================== */
.rfq-head-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.rfq-head-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.rfq-head .item .sub-en{font-size:11px; margin-inline-start:4px;}
.rfq-card.is-cancelled{opacity:.72;}
.offer .sup .sec{display:block; font-size:11px; color:var(--ink-3); font-weight:500; margin-top:2px; direction:ltr; text-align:right;}
.offer .price .cur{font-size:11px; font-weight:600; color:var(--ink-3);}
.offer-note{font-size:11.5px; color:var(--ink-3); margin-top:6px; line-height:1.5;}
.offer-acts{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
.btn-small.award{color:var(--good);}
.btn-small.award:hover:not(:disabled){border-color:var(--good);}
.rfq-foot{padding:10px 18px; font-size:12.5px; border-top:1px solid var(--border); background:var(--surface-2);}
.rfq-foot.good b:first-child{color:var(--good);}
.rfq-foot.muted{color:var(--ink-3);}
.rfq-reason{margin-top:4px; color:var(--ink-2);}
.form-sep{grid-column:1/-1; margin-top:6px; padding-top:10px; border-top:1px solid var(--border); font-weight:700; font-size:13px;}
.form-sep .sub-en{display:block; font-weight:500; font-size:11px; margin-top:2px;}
.award-box{grid-column:1/-1; border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface-2); display:flex; flex-direction:column; gap:6px; font-size:13px;}
.award-row{display:flex; justify-content:space-between; gap:12px;}
.award-row span{color:var(--ink-3);}
.award-warn{color:var(--warning); background:var(--warning-wash); border-radius:8px; padding:8px 10px; margin-top:4px; font-size:12.5px;}
.award-ok{color:var(--good); font-weight:700; margin-top:4px;}
@media (max-width:600px){ .rfq-head-side{align-items:flex-start;} .rfq-head-row{justify-content:flex-start;} }

/* ===================== PHASE 4 · أوامر الشراء والاعتمادات ===================== */
.cell-sub{display:block; font-size:11px; color:var(--ink-3); margin-top:2px; font-weight:500;}
.cell-sub.late{color:var(--critical); font-weight:700;}
.pill-stack{display:flex; gap:4px; flex-wrap:wrap;}
.btn-ghost.danger{color:var(--critical);}
.rfq-po{margin-top:8px;}
.po-detail{grid-column:1/-1; display:flex; flex-direction:column; gap:12px;}
.po-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.po-total{display:flex; flex-direction:column; align-items:flex-end;}
.po-total span{font-size:11.5px; color:var(--ink-3);}
.po-total b{font-size:20px; font-weight:800; direction:ltr;}
.po-sub{font-size:12.5px; color:var(--ink-2); margin-top:4px;}
.award-warn.critical{color:var(--critical); background:var(--critical-wash, var(--warning-wash));}
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; border-inline-start:2px solid var(--border); padding-inline-start:14px;}
.timeline li{position:relative; font-size:12.5px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.timeline li::before{content:""; position:absolute; inset-inline-start:-20px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--brand);}
.timeline li.bad::before{background:var(--critical);}
.tl-note{flex-basis:100%; color:var(--ink-2); font-size:12px;}
.po-calc{grid-column:1/-1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 14px;}
.po-calc > span{color:var(--ink-3); font-size:12.5px;}
.po-calc > b{font-size:18px; font-weight:800; direction:ltr;}
.po-calc > div{flex-basis:100%; display:flex; gap:6px; flex-wrap:wrap;}
.po-calc > div:empty{display:none;}
.appr-card{display:flex; justify-content:space-between; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:14px 18px; margin-bottom:12px; flex-wrap:wrap; border-inline-start:3px solid var(--warning);}
.appr-main{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;}
.appr-item{font-weight:700; font-size:14px;}
.appr-budget{display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--ink-2); margin-top:4px;}
.appr-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.appr-acts{display:flex; gap:6px;}

/* ===================== PHASE 5 · لوحة المتابعة والتقييم والحدود ===================== */
.alert-link{width:100%; background:none; border:0; border-bottom:1px solid var(--border); text-align:start; cursor:pointer; font:inherit; color:inherit;}
.alert-link:last-child{border-bottom:none;}
.alert-link:hover .t{color:var(--brand); text-decoration:underline;}
.chart-box.no-data::after{content:"لسه مفيش بيانات"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:12.5px;}
.lb-row{grid-template-columns:30px 1.6fr 1fr auto;}
.lb-score{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.eval-scores{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.eval-chip{display:inline-flex; gap:6px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:2px 10px; font-size:12px;}
.eval-chip span{color:var(--ink-3);}
.eval-hist{display:flex; flex-direction:column; gap:4px;}
.eval-hist-row{display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; font-size:12px; padding:6px 10px; background:var(--surface); border:1px solid var(--border); border-radius:8px;}
.eval-field{display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:12px; align-items:end; padding-bottom:10px; border-bottom:1px dashed var(--border);}
.eval-field .form-field{margin:0;}
.eval-sug{display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding-bottom:4px;}
@media (max-width:640px){.eval-field{grid-template-columns:1fr;}}
.limits{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; align-items:start;}
.limit-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.limit-card.wide{grid-column:1/-1;}
.limit-card h4{font-size:14px; font-weight:800;}
.limit-card h4 .sub-en{font-size:10.5px; display:block; font-weight:500;}
.limit-field{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px;}
.limit-field > span:first-child{color:var(--ink-2);}
.limit-input{display:inline-flex; align-items:center; gap:6px; flex-shrink:0;}
.limit-input input{width:110px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--ink-1); font-family:var(--font-mono); font-size:13px;}
.limit-input input[type=email]{width:220px;}
.limit-input input[aria-invalid=true]{border-color:var(--critical); box-shadow:0 0 0 2px var(--critical-wash);}
.limit-input em{font-style:normal; font-size:11.5px; color:var(--ink-3); min-width:34px;}
.weights{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px 24px;}
.limits-actions{grid-column:1/-1; display:flex; gap:12px; align-items:center;}
.lb-bar-track,.lb-bar-fill{display:block;}

/* ===================== PHASE 6 · المرجع والطباعة ===================== */
.rule[hidden]{display:none;}
.matrix .sub-en{display:block;}
@media print{
  .side,.topbar,.br-fab,#bugBtn,.ref-index,.ref-head .toolbar,.toast,.main > footer{display:none !important;}
  .main,.content,body{background:#fff !important; color:#000 !important;}
  .ref-sec{break-inside:avoid-page; box-shadow:none; border-color:#ccc;}
  .view:not(.active){display:none !important;}
}

/* ===================== السجلات والبلاغات ===================== */
.audit-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.audit-filters select,.audit-filters input{height:34px; border:1px solid var(--border); background:var(--surface); color:var(--ink-1); border-radius:8px; padding:0 10px; font:inherit; font-size:12.5px;}
.audit-filters label{display:inline-flex; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-3);}
.audit-table td{vertical-align:top;}
.audit-diff{font-size:12px; line-height:1.6; max-width:420px;}
.audit-diff b{color:var(--ink-3); font-weight:600;}
.audit-diff details summary{cursor:pointer; color:var(--brand); font-size:11.5px;}
.audit-more{display:flex; justify-content:center; margin:12px 0;}
.nowrap{white-space:nowrap;}
.sub-count{background:var(--critical); color:#fff; border-radius:100px; padding:0 7px; font-size:11px; margin-inline-start:4px;}
.sub-count:empty{display:none;}
.bug-detail{grid-column:1/-1; display:flex; flex-direction:column; gap:12px;}
.bug-shot{display:block; border:1px solid var(--border); border-radius:10px; overflow:hidden; max-height:420px;}
.bug-shot img{display:block; width:100%; height:auto;}
.bug-tech{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:11.5px; max-height:260px; overflow:auto; white-space:pre-wrap; word-break:break-word; text-align:left;}
.bug-banner{display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--good-wash); color:var(--good); border:1px solid var(--good); border-radius:10px; padding:10px 14px; margin-bottom:12px; font-size:13px;}
tr.bug-mine-resolved td{background:var(--good-wash);}
.good-text{color:var(--good); font-weight:700;}

/* ===================== سجل العمليات وبريد البلاغات (نوافذ قايمة الحساب) ===================== */
.modal.modal:has(.audit-modal){max-width:1180px;}
.modal.modal:has(.mail-modal){max-width:860px;}
.audit-modal,.mail-modal{grid-column:1/-1; display:flex; flex-direction:column; gap:12px;}
.audit-modal .audit-filters{margin:0;}
.audit-modal .audit-filters input[type=search]{flex:1; min-width:220px;}
.log-wrap{max-height:56vh; overflow:auto;}
.log-table thead th{position:sticky; top:0; background:var(--brand); color:var(--on-brand); z-index:1;}
.log-table td{vertical-align:middle;}
.log-text{font-size:12.5px; line-height:1.6;}
.log-type{display:inline-block; font-size:11px; font-weight:800; padding:3px 9px; border-radius:6px; color:#fff; background:var(--ink-3); white-space:nowrap; letter-spacing:.3px;}
.log-type.good{background:var(--good);}
.log-type.critical{background:var(--critical);}
.log-type.warning{background:var(--warning-fill); color:#2b2100;}
.log-type.brand{background:var(--brand);}
.log-type.neutral{background:var(--ink-3);}
.mail-status{position:absolute; inset-inline-end:70px; top:22px;}
.modal:has(.mail-modal){position:relative;}
.mail-sec{font-size:13.5px; font-weight:800; color:var(--brand-deep); padding-bottom:6px; border-bottom:1px solid var(--border); margin-top:4px;}
.mail-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 14px;}
.mail-grid .form-field{margin:0;}
.mail-test{display:flex; gap:10px; flex-wrap:wrap;}
.mail-test input{flex:1; min-width:220px; height:40px; border:1px solid var(--border); border-radius:8px; padding:0 12px; background:var(--surface-2); color:var(--ink-1); font:inherit;}
@media (max-width:760px){ .mail-grid{grid-template-columns:1fr;} .mail-status{position:static;} }
.nav-badge{min-width:20px; height:20px; padding:0 6px; border-radius:100px; background:var(--critical); color:#fff; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-inline-start:auto; box-shadow:0 0 0 2px var(--side, #1f3550); font-family:var(--font-mono);}
.nav-badge[hidden]{display:none;}
.nav-badge.info{background:#5B6B82; color:#EEF2F7;}
tr.bug-unread td{font-weight:700;}
.dot-new{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--critical); margin-inline-end:6px; vertical-align:middle;}
.chip.chip-alert{border-color:var(--critical); color:var(--critical);}
.chip.chip-alert.active{background:var(--critical); color:#fff;}

/* تأكيد كلمة السر للعمليات الحساسة: فوق أي نافذة تانية */
.reauth-ovl{z-index:10003;}
.reauth-ovl .modal{max-width:420px;}
.reauth-input{width:100%; margin:10px 0 4px; padding:10px 12px; border-radius:8px; font-size:15px;}