/* ════════════════════════════════════════════════════════════════
   هوية منصة ايكومرج — «مركز القيادة» (المالك وافق 2026-10-07)
   المصدر الواحد لكل الصفحات الجديدة: الألوان · Cairo · سلّم المسافات 4/8/12/16/24/32/48
   · الحواف · الظلال · الإطار (قايمة يمين بتتقفل وتتفتح + شريط علوي) · الكروت · الجداول · الشارات.
   مأخوذ بالحرف من docs/design/team-page-options/platform-identity.html — أي تعديل هنا بيوصل لكل الصفحات.
   ستارة القايمة على الموبايل اسمها nav-scrim (مش scrim) عشان ما تتلخبطش مع ستارة درج التفاصيل.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* الهوية */
  --navy:#001684; --navy-700:#000C4F; --navy-600:#00106A; --navy-500:#1B2C9E; --navy-300:#8C94C9; --navy-100:#E3E6F6; --navy-50:#EEF0FA;
  --orange:#FF6D00; --orange-600:#E35F00; --orange-100:#FFE3CC; --orange-50:#FFF2E8; --orange-line:#FFD9BD;
  /* الأرضيات والحدود */
  --bg:#F6F7FB; --card:#FFFFFF; --inset:#F9FAFD; --zebra:#FAFBFE; --head:#F3F5FB;
  --line:#E4E7F0; --line-2:#EEF0F6; --line-3:#D3D8E6;
  /* الحبر */
  --ink:#141836; --ink-2:#454C6A; --muted:#6B7190; --faint:#A3A8BF;
  /* الحالة — منفصلة عن الهوية */
  --good:#1E8A4C; --good-bg:#E8F5EE; --good-line:#C9E7D5;
  --warn:#C88A00; --warn-ink:#8F6200; --warn-bg:#FBF3DF; --warn-line:#F0DFAE;
  --bad:#C43D2F;  --bad-bg:#FCECEA;  --bad-line:#F3CCC7;
  --meta:#1877F2; --meta-bg:#E7F0FE; --tt:#161823; --tt-bg:#ECEDF1;
  /* سلم الخط */
  --fs-display:40px; --fs-kpi:36px; --fs-metric:28px; --fs-h1:26px; --fs-h2:19px; --fs-h3:15.5px;
  --fs-body:14px; --fs-sm:13px; --fs-xs:12px; --fs-micro:11.5px;
  /* سلم المسافات — كله مضاعفات ٨ (و٤ و١٢ للضبط الدقيق بس) */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-48:48px;
  /* الحواف */
  --r-ctl:8px; --r-md:12px; --r-card:14px; --r-band:20px; --r-pill:999px;
  /* الظلال = ارتفاع */
  --sh-1:0 1px 2px rgba(20,24,54,.05);
  --sh-2:0 1px 2px rgba(20,24,54,.06), 0 8px 24px rgba(20,24,54,.08);
  --sh-3:0 12px 32px rgba(0,22,132,.22);
  --ring:0 0 0 3px rgba(255,109,0,.35);
  --nav-w:256px; --top-h:60px;
}
*{box-sizing:border-box}
html{color-scheme:light only; -webkit-text-size-adjust:100%; scroll-padding-top:84px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Cairo","Segoe UI",Tahoma,sans-serif;
  font-size:var(--fs-body); line-height:1.55; overflow-x:hidden}
.num,.door,td,th,input,.kv,.tv{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
button,input,select,textarea{font-family:inherit; color:inherit}
a{color:var(--navy); text-decoration:none}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}
svg.i{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
svg.i.s{width:16px; height:16px}
.ltr-in{direction:ltr; unicode-bidi:isolate}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ═══ الإطار: قايمة يمين + شريط علوي ═══ */
.app{display:flex; min-height:100vh; align-items:stretch}
.app.collapsed{--nav-w:76px}
.nav{width:var(--nav-w); flex:0 0 var(--nav-w); background:#fff; border-inline-end:1px solid var(--line);
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; z-index:40;
  transition:width .22s ease, flex-basis .22s ease, transform .25s ease}
.nav-head{height:var(--top-h); display:flex; align-items:center; padding:0 var(--sp-16); border-bottom:1px solid var(--line-2); flex:0 0 auto}
.logo{display:flex; align-items:center; gap:10px; min-width:0}
.logo-mark{width:36px; height:36px; border-radius:10px; background:var(--navy); color:#fff; display:grid; place-items:center;
  font-weight:900; font-size:18px; flex:0 0 auto; position:relative}
.logo-mark::after{content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--orange);
  left:-2px; bottom:-2px; border:2px solid #fff}
.logo-txt{font-weight:900; font-size:19px; color:var(--navy); direction:ltr; white-space:nowrap}
.logo-txt i{font-style:normal; color:var(--orange)}
.nav-list{flex:1; overflow:auto; padding:var(--sp-16) var(--sp-12); display:flex; flex-direction:column; gap:2px}
.ng{position:relative}
.ni{display:flex; align-items:center; gap:var(--sp-12); width:100%; min-height:40px; padding:8px 12px; border:0; background:none;
  border-radius:10px; color:var(--ink-2); font-weight:600; font-size:14px; white-space:nowrap; cursor:pointer; text-align:right;
  transition:background .15s, color .15s}
.ni:hover{background:var(--line-2); color:var(--navy)}
.ng.has-active > .ni{color:var(--navy); font-weight:800}
.ng.has-active > .ni svg.i:first-child{color:var(--orange)}
.ni.active{background:var(--orange-50); color:var(--orange-600); font-weight:800}
.ni .chev{margin-inline-start:auto; opacity:.55; transition:transform .2s}
.ng.open > .ni .chev{transform:rotate(180deg)}
.subs{display:none; flex-direction:column; gap:1px; margin:2px 0 var(--sp-8); padding-inline-start:20px; position:relative}
.ng.open > .subs{display:flex}
.subs::before{content:""; position:absolute; right:21px; top:4px; bottom:4px; width:1px; background:var(--line)}
.fly-t{display:none}
.si{display:block; padding:6px 14px; margin-inline-start:10px; border-radius:8px; color:var(--ink-2); font-size:13.5px; font-weight:600;
  white-space:nowrap; position:relative; transition:background .15s, color .15s}
.si:hover{background:var(--line-2); color:var(--navy)}
.si.active{background:var(--orange-50); color:var(--orange-600); font-weight:800}
.si.active::before{content:""; position:absolute; right:-11px; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--orange)}
.nav-foot{border-top:1px solid var(--line-2); padding:var(--sp-12); display:flex; align-items:center; gap:10px; flex:0 0 auto}
.av{width:34px; height:34px; border-radius:50%; background:var(--orange-50); color:var(--orange-600); display:grid; place-items:center;
  font-weight:900; flex:0 0 auto; border:1px solid var(--orange-line)}
.who{min-width:0; line-height:1.3}
.who b{display:block; font-size:13.5px}
.who span{font-size:var(--fs-xs); color:var(--muted)}
/* مقفولة = أيقونات بس، والمجموعة بتطلع جنبها لما تقف عليها */
.app.collapsed .logo-txt,.app.collapsed .nl,.app.collapsed .chev,.app.collapsed .who{display:none}
.app.collapsed .nav-head{justify-content:center; padding:0}
.app.collapsed .nav-foot{justify-content:center}
.app.collapsed .nav-list{overflow:visible}
.app.collapsed .ni{justify-content:center; padding:10px 0}
.app.collapsed .ng.has-active > .ni{background:var(--orange-50); color:var(--orange-600)}
.app.collapsed .ng > .subs{display:none}
.app.collapsed .ng:hover > .subs,.app.collapsed .ng:focus-within > .subs{display:flex; position:absolute; right:100%; top:-6px; width:220px; margin:0;
  padding:var(--sp-8); background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-2); z-index:60}
.app.collapsed .subs::before{display:none}
.app.collapsed .fly-t{display:block; font-size:var(--fs-xs); font-weight:800; color:var(--muted); padding:4px 10px 6px}
.app.collapsed .si{margin-inline-start:0}
.app.collapsed .si.active::before{display:none}
.nav-scrim{display:none}

/* القايمة الجانبية الواحدة — frame.js بيبنيها جوّه <nav class="tabs" data-eco-nav> من تعريف واحد،
   وبنود المالك بتستخبّى لأي حد تاني (الصفحة اللي للمالك بس بتتولد بـdata-role="owner") */
.home{display:flex; align-items:center; min-width:0; text-decoration:none}
.nav .tabs{display:flex; flex-direction:column; gap:2px}
.nav-foot:empty{display:none}
.logout-form{margin:0}
body:not([data-role="owner"]) .nav .owner-only{display:none}

.shell{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:30; height:var(--top-h); background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--sp-12); padding:0 var(--sp-24)}
.icon-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--line-3); background:#fff; display:grid; place-items:center;
  cursor:pointer; color:var(--ink-2); transition:background .15s, border-color .15s, color .15s; flex:0 0 auto}
.icon-btn:hover{background:var(--navy-50); border-color:var(--navy-300); color:var(--navy)}
.crumb{display:flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-sm); color:var(--muted); min-width:0; white-space:nowrap; overflow:hidden}
.crumb a{color:var(--muted); font-weight:600} .crumb a:hover{color:var(--navy)}
.crumb b{color:var(--ink); font-weight:800; overflow:hidden; text-overflow:ellipsis}
.crumb .sep{opacity:.45}
.tb-logo{display:none}
.tb-sp{flex:1}
.content{padding:var(--sp-24); max-width:1480px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-24)}

/* ═══ أزرار ═══ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-8); border-radius:var(--r-ctl); padding:8px 16px; min-height:38px;
  font-size:var(--fs-sm); font-weight:700; cursor:pointer; border:1px solid transparent; line-height:1.4; white-space:nowrap; text-decoration:none;
  transition:background .15s, box-shadow .15s, border-color .15s, color .15s, transform .08s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--orange); color:#fff}
.btn.primary:hover{background:var(--orange-600); box-shadow:0 4px 12px rgba(255,109,0,.28)}
.btn.navy{background:var(--navy); color:#fff}
.btn.navy:hover{background:var(--navy-500); box-shadow:0 4px 12px rgba(0,22,132,.25)}
.btn.secondary{background:#fff; color:var(--navy); border-color:var(--line-3)}
.btn.secondary:hover{background:var(--navy-50); border-color:var(--navy-300)}
.btn.ghost{background:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--line-2); color:var(--navy)}
.btn.sm{padding:5px 12px; min-height:32px; font-size:var(--fs-xs)}
.btn.lg{padding:12px 24px; min-height:48px; font-size:15px}
.btn.block{width:100%}
.btn[disabled]{background:#EDEFF6; color:#9AA0BF; border-color:var(--line); cursor:not-allowed; box-shadow:none; transform:none}

/* ═══ «كل رقم باب» ═══ */
.door{cursor:pointer; border-radius:6px; transition:background .15s, box-shadow .15s}
.door:hover{background:var(--navy-50); box-shadow:0 0 0 4px var(--navy-50)}
.door:focus-visible{box-shadow:0 0 0 4px var(--navy-50), 0 0 0 6px rgba(255,109,0,.45)}
.band .door:hover{background:rgba(255,255,255,.12); box-shadow:0 0 0 5px rgba(255,255,255,.12)}

/* ═══ شارات الحالة ═══ */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-micro); font-weight:800; padding:2px 10px; border-radius:var(--r-pill); white-space:nowrap; line-height:1.6}
.pill.good{background:var(--good-bg); color:var(--good)}
.pill.warn{background:var(--warn-bg); color:var(--warn-ink)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.pill.navy{background:var(--navy-50); color:var(--navy)}
.pill.or{background:var(--orange-50); color:var(--orange-600); box-shadow:inset 0 0 0 1px var(--orange-line)}
.pill.neutral{background:var(--line-2); color:var(--ink-2)}
.pill.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.st{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:700; padding:3px 10px; border-radius:var(--r-ctl);
  background:var(--inset); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap}
.st b{color:var(--ink); font-weight:800}
.dl{display:inline-flex; align-items:center; gap:3px; font-size:var(--fs-xs); font-weight:800; padding:1px 8px; border-radius:var(--r-pill); white-space:nowrap}
.dl.up-good,.dl.down-good{background:var(--good-bg); color:var(--good)}
.dl.neutral{background:var(--line-2); color:var(--ink-2)}
.dl.bad{background:var(--bad-bg); color:var(--bad)}
.band .dl.up-good,.band .dl.down-good{background:rgba(88,214,141,.18); color:#7FE6AC}
.band .dl.neutral{background:rgba(255,255,255,.12); color:#DDE1F6}
.band .dl.bad{background:rgba(255,120,100,.2); color:#FFB2A6}
.verdict{display:inline-flex; gap:6px; align-items:center; font-size:var(--fs-xs); font-weight:800; padding:3px 11px; border-radius:var(--r-pill); white-space:nowrap}
.verdict::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.verdict.good{background:var(--good-bg); color:var(--good)} .verdict.warn{background:var(--warn-bg); color:var(--warn-ink)} .verdict.bad{background:var(--bad-bg); color:var(--bad)}
.pl-t{font-size:var(--fs-micro); font-weight:800; padding:2px 9px; border-radius:var(--r-pill); white-space:nowrap}
.pl-t.meta{background:var(--meta-bg); color:var(--meta)} .pl-t.tt{background:var(--tt-bg); color:var(--tt)}
.ok-c{color:var(--good)!important} .wa-c{color:var(--warn-ink)!important} .ba-c{color:var(--bad)!important}
.only-you{display:inline-flex; gap:7px; align-items:center; font-size:var(--fs-xs); font-weight:800; color:var(--orange-600); background:#fff;
  border:1px solid var(--orange-line); border-radius:var(--r-pill); padding:3px 12px; max-width:100%}

/* ═══ شريط القيادة ═══ */
.band{position:relative; overflow:hidden; border-radius:var(--r-band); color:#fff; padding:var(--sp-24) var(--sp-24) var(--sp-16);
  background:
    radial-gradient(700px 260px at 0% 0%, rgba(255,109,0,.20), transparent 62%),
    radial-gradient(520px 260px at 100% 120%, rgba(90,120,255,.22), transparent 60%),
    linear-gradient(135deg, #001A96 0%, var(--navy) 45%, var(--navy-700) 100%);
  box-shadow:var(--sh-3)}
.band::after{content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(to left, var(--orange) 0 140px, rgba(255,255,255,.08) 140px)}
.band-top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-16) var(--sp-24); flex-wrap:wrap}
.team{display:flex; gap:var(--sp-12); align-items:center; min-width:0}
.team-av{width:48px; height:48px; border-radius:14px; background:var(--orange); display:grid; place-items:center; font-weight:900;
  font-size:22px; flex:0 0 auto; box-shadow:0 6px 16px rgba(255,109,0,.35)}
.team-cap{font-size:var(--fs-xs); color:rgba(255,255,255,.62); font-weight:700; line-height:1.3}
.team-name{font-size:var(--fs-h1); font-weight:900; line-height:1.2; letter-spacing:.2px}
.team-name.ltr{direction:ltr; text-align:right}
.band-meta{display:flex; flex-wrap:wrap; gap:4px var(--sp-16); margin-top:var(--sp-8); font-size:var(--fs-xs); color:rgba(255,255,255,.78)}
.band-meta span{display:inline-flex; align-items:center; gap:6px}
.band-meta b{color:#fff; font-weight:700}
.dot-ok{width:7px; height:7px; border-radius:50%; background:#58D68D; box-shadow:0 0 0 3px rgba(88,214,141,.22)}
.period{display:flex; flex-direction:column; gap:var(--sp-8); align-items:flex-end; max-width:100%; position:relative}
.seg{display:flex; flex-wrap:wrap; gap:2px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); padding:3px}
.seg button{border:0; background:transparent; color:rgba(255,255,255,.84); font-size:var(--fs-sm); font-weight:700; padding:6px 14px; border-radius:9px;
  cursor:pointer; display:inline-flex; gap:6px; align-items:center; white-space:nowrap; transition:background .15s, color .15s}
.seg button:hover{background:rgba(255,255,255,.12); color:#fff}
.seg button.on{background:#fff; color:var(--navy); box-shadow:0 2px 6px rgba(0,0,0,.18)}
.seg.light{background:var(--head); border-color:var(--line)}
.seg.light button{color:var(--ink-2)} .seg.light button:hover{background:#fff; color:var(--navy)}
.seg.light button.on{background:#fff; color:var(--navy); box-shadow:var(--sh-1)}
.pnote{font-size:var(--fs-xs); color:rgba(255,255,255,.82); display:flex; align-items:center; gap:7px}
.pnote b{color:#fff}
.pnote::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--orange)}
.pop{display:none; position:absolute; top:44px; left:0; z-index:20; background:#fff; color:var(--ink); border-radius:var(--r-md); padding:var(--sp-12);
  box-shadow:var(--sh-2); border:1px solid var(--line); min-width:300px}
.pop.show{display:block}

.kpis{margin-top:var(--sp-16); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13); border-radius:16px}
.kpi{padding:var(--sp-12) var(--sp-24) var(--sp-16); position:relative; min-width:0}
.kpi + .kpi{border-inline-start:1px solid rgba(255,255,255,.12)}
.kpi .kl{font-size:var(--fs-sm); color:rgba(255,255,255,.74); font-weight:700}
.kpi .kv{font-size:var(--fs-kpi); font-weight:800; line-height:1.15; margin:2px 0 6px; display:inline-block; letter-spacing:-.3px}
.kpi .kv small{font-size:17px; font-weight:700; color:rgba(255,255,255,.75); margin-inline-start:4px}
.kpi .ks{font-size:var(--fs-xs); color:rgba(255,255,255,.68); display:flex; gap:7px; align-items:center; flex-wrap:wrap; min-height:22px}
.kpi .ks b{color:#fff}
.kpi.key::before{content:""; position:absolute; top:-1px; inset-inline:24px; height:3px; border-radius:0 0 3px 3px; background:var(--orange)}
.accs{margin-top:var(--sp-16); padding-top:var(--sp-12); border-top:1px solid rgba(255,255,255,.12); display:flex; gap:var(--sp-12); align-items:center; min-width:0}
.accs-t{flex:0 0 auto; font-size:var(--fs-sm); font-weight:800; display:flex; gap:var(--sp-8); align-items:center; white-space:nowrap}
.accs-t span{color:rgba(255,255,255,.66); font-weight:600}
.acc-scroll{flex:1; min-width:0; display:flex; gap:var(--sp-8); overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(to left, #000 88%, transparent); mask-image:linear-gradient(to left, #000 88%, transparent); padding:2px 0}
.acc-scroll::-webkit-scrollbar{display:none}
.acc-more{flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; display:grid; place-items:center}
.acc-more:hover{background:rgba(255,255,255,.18)}
.acc{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 6px; border-radius:var(--r-pill); background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15); font-size:var(--fs-xs); color:rgba(255,255,255,.85); cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s}
.acc:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3)}
.acc .pl{font-size:11px; font-weight:800; padding:1px 8px; border-radius:var(--r-pill); background:#fff}
.acc .pl.meta{color:var(--meta)} .acc .pl.tt{color:var(--tt)}
.acc .an{font-weight:700; color:#fff; direction:ltr}
.acc .id{direction:ltr; color:rgba(255,255,255,.55); font-size:11px}
.acc .sp{font-weight:800; color:#fff}
.acc .sp em{font-style:normal; font-weight:600; color:rgba(255,255,255,.6); margin-inline-end:4px}
.acc.idle{opacity:.72} .acc.idle .sp{color:#FFD2A6; font-weight:700}
.acc.more{padding:4px 12px; border-style:dashed}

/* ═══ الكروت ورأس القسم ═══ */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-1); min-width:0}
.card.lift{transition:box-shadow .2s, transform .2s}
.card.lift:hover{box-shadow:var(--sh-2); transform:translateY(-1px)}
.card-h{padding:var(--sp-16) var(--sp-24) var(--sp-12); display:flex; align-items:center; gap:var(--sp-12); flex-wrap:wrap; border-bottom:1px solid var(--line-2)}
.card-h h3{margin:0; font-size:var(--fs-h3); font-weight:800}
.card-h .sub{font-size:var(--fs-xs); color:var(--muted); font-weight:600}
.card-h .end{margin-inline-start:auto; display:flex; gap:var(--sp-8); align-items:center; flex-wrap:wrap}
.card-b{padding:var(--sp-16) var(--sp-24) var(--sp-24)}
.nb{width:32px; height:32px; border-radius:10px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:900; font-size:15px; flex:0 0 auto;
  box-shadow:0 2px 6px rgba(0,22,132,.22)}
.nb.or{background:var(--orange); box-shadow:0 2px 6px rgba(255,109,0,.3)}
.hd{display:flex; align-items:center; gap:var(--sp-12); min-width:0}
.hd h2{margin:0; font-size:var(--fs-h2); font-weight:900; line-height:1.3}
.hd .hs{font-size:var(--fs-xs); color:var(--muted); font-weight:600; line-height:1.5}
.sec-head{display:flex; align-items:center; gap:var(--sp-12); flex-wrap:wrap; padding-bottom:var(--sp-12); border-bottom:1px solid var(--line)}
.sec-head .end{margin-inline-start:auto; display:flex; gap:var(--sp-8); align-items:center; flex-wrap:wrap}
.sub-head{display:flex; align-items:baseline; gap:var(--sp-8); flex-wrap:wrap}
.sub-head h3{margin:0; font-size:var(--fs-h3); font-weight:800}
.sub-head span{font-size:var(--fs-xs); color:var(--muted); font-weight:600}

/* ═══ خانات الأرقام ═══ */
.cq{container-type:inline-size; overflow:hidden}
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-2)}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-2)}
.tile{padding:var(--sp-16) var(--sp-24); min-width:0; position:relative; background:#fff; transition:background .15s}
.tile:hover{background:#FCFCFE}
.tile .tl{font-size:var(--fs-sm); color:var(--muted); font-weight:700; display:block; margin-bottom:2px}
.tile .tv{font-size:var(--fs-metric); font-weight:800; line-height:1.2; display:inline-block; color:var(--ink); letter-spacing:-.2px}
.tile .tv small{font-size:15px; font-weight:700; color:var(--muted); margin-inline-start:4px}
.tile .tsub{margin-top:6px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); font-weight:600; min-height:22px}
.tile.key{background:linear-gradient(180deg,var(--orange-50),#fff 70%)}
.tile.key::before{content:""; position:absolute; top:0; inset-inline:24px; height:3px; border-radius:0 0 3px 3px; background:var(--orange)}
.tv.good{color:var(--good)} .tv.bad{color:var(--bad)} .tv.warn{color:var(--warn)}
.grp + .grp{border-top:1px solid var(--line-2)}
.grp-l{font-size:var(--fs-micro); font-weight:800; color:var(--navy); padding:var(--sp-12) var(--sp-24) var(--sp-8); display:flex; align-items:center; gap:var(--sp-8); background:#fff}
.grp-l::after{content:""; flex:1; height:1px; background:var(--line-2)}
.mbar{height:6px; border-radius:6px; background:var(--line-2); overflow:hidden; margin-top:var(--sp-8)}
.mbar i{display:block; height:100%; background:var(--orange); border-radius:6px}
.bar{height:8px; border-radius:8px; background:var(--line-2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:8px; background:var(--navy)}
.bar.or i{background:var(--orange)}
@container (max-width: 640px){
  .grid4,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{padding:var(--sp-12) var(--sp-16)}
  .tile .tv{font-size:26px}
  .grp-l{padding-inline:var(--sp-16)}
}

/* ═══ الحلقة والقايمة ═══ */
.ring{width:88px; height:88px; position:relative; flex:0 0 auto}
.ring svg{width:88px; height:88px; display:block}
.ring .bgc{fill:none; stroke:var(--line-2); stroke-width:9}
.ring .fgc{fill:none; stroke:var(--good); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .6s}
.ring .rc{position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1.15}
.ring .rc b{font-size:20px; font-weight:900}
.ring .rc span{font-size:11px; color:var(--muted); font-weight:700}
.tasks{list-style:none; margin:0; padding:0}
.task{display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--sp-12); padding:var(--sp-16) var(--sp-24)}
.task + .task{border-top:1px solid var(--line-2)}
.tick{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; margin-top:2px}
.tick.todo{border:2px solid var(--orange); background:var(--orange-50)}
.tick.todo::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--orange)}
.tick.done{background:var(--good); color:#fff}
.tick.done svg{width:15px; height:15px; stroke-width:3}
.task-h{display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; margin-bottom:var(--sp-8)}
.task-h h4{margin:0; font-size:15px; font-weight:800}
.task p{margin:0 0 var(--sp-8); font-size:var(--fs-sm); color:var(--ink-2)}
.task.is-done h4{color:var(--ink-2)}
.big2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); margin-bottom:var(--sp-12)}
.bigc{background:var(--inset); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px}
.bigc b{display:inline-block; font-size:30px; font-weight:900; line-height:1.1}
.bigc.bad{background:var(--bad-bg); border-color:var(--bad-line)} .bigc.bad b{color:var(--bad)}
.bigc.warn{background:var(--warn-bg); border-color:var(--warn-line)} .bigc.warn b{color:var(--warn)}
.bigc span{display:block; font-size:var(--fs-xs); font-weight:800; color:var(--ink)}
.bigc em{display:block; font-style:normal; font-size:var(--fs-micro); color:var(--ink-2); margin-top:2px; line-height:1.5}
.big1{display:flex; align-items:baseline; gap:var(--sp-8); margin-bottom:var(--sp-12)}
.big1 b{font-size:30px; font-weight:900; line-height:1.1}
.big1 span{font-size:var(--fs-sm); font-weight:700; color:var(--ink-2)}
.big1.good b{color:var(--good)} .big1.warn b{color:var(--warn)}
.chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:var(--sp-12); font-size:var(--fs-xs); color:var(--muted); font-weight:600}
.acts{display:flex; gap:var(--sp-8); flex-wrap:wrap}
.win{margin:0 var(--sp-16) var(--sp-16); border-radius:var(--r-md); padding:var(--sp-12) var(--sp-16); display:flex; gap:var(--sp-12); align-items:center;
  background:linear-gradient(135deg,#EAF7EF,#F5FBF7); border:1px solid var(--good-line)}
.medal{width:44px; height:44px; border-radius:50%; background:var(--good); color:#fff; display:grid; place-items:center; flex:0 0 auto; box-shadow:0 0 0 5px rgba(30,138,76,.14)}
.medal svg{width:22px; height:22px; stroke-width:2.6}
.win b{display:block; font-size:15px; font-weight:900; color:#13663A}
.win span{font-size:var(--fs-xs); color:#2F6E4B; font-weight:600}

/* ═══ الجداول ═══ */
.tw{overflow:auto; max-width:100%; -webkit-overflow-scrolling:touch}
.tw.tall{max-height:520px}
.tbl{border-collapse:separate; border-spacing:0; width:100%; font-size:var(--fs-body)}
.tbl th{position:sticky; top:0; z-index:2; background:var(--head); font-size:var(--fs-xs); font-weight:800; color:var(--ink-2); text-align:right;
  padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:bottom}
.tbl.wrap-h th{white-space:normal; line-height:1.35}
.tbl td{padding:12px; border-bottom:1px solid var(--line-2); white-space:nowrap; font-weight:600; background:#fff; transition:background .12s}
.tbl tbody tr:nth-child(even) td{background:var(--zebra)}
.tbl tbody tr:hover td{background:var(--navy-50)}
.tbl th:first-child,.tbl td:first-child{padding-inline-start:var(--sp-24)}
.tbl th:last-child,.tbl td:last-child{padding-inline-end:var(--sp-24)}
.tbl .n{text-align:left}
.tbl td .door{padding:1px 4px; margin:0 -4px; font-weight:800; color:var(--ink)}
.tbl tfoot td{position:sticky; bottom:0; z-index:1; background:#EEF1F9; border-top:2px solid var(--line-3); border-bottom:0; font-weight:900; color:var(--navy)}
.tbl tfoot td .door{color:var(--navy); font-weight:900}
.tbl th[data-sort]{cursor:pointer; user-select:none; transition:background .15s, color .15s}
.tbl th[data-sort]:hover{background:var(--navy-50); color:var(--navy)}
.tbl th .ar{display:inline-block; margin-inline-start:4px; color:var(--faint); font-size:10px}
.tbl th.sorted{color:var(--navy)} .tbl th.sorted .ar{color:var(--orange)}
.cell-main{display:flex; align-items:center; gap:10px; font-weight:800}
.cell-main i{width:30px; height:30px; border-radius:8px; background:var(--navy-50); color:var(--navy); display:grid; place-items:center; font-style:normal; font-size:13px; font-weight:900; flex:0 0 auto}
.cell-main small{display:block; font-size:var(--fs-micro); color:var(--muted); font-weight:600}
.fbar{display:flex; gap:var(--sp-8); flex-wrap:wrap; align-items:center; padding:var(--sp-12) var(--sp-24); border-bottom:1px solid var(--line-2)}
.fbar .grow{flex:1 1 200px; min-width:0}
.fchip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--line-3); background:#fff;
  font-size:var(--fs-xs); font-weight:700; color:var(--ink-2); cursor:pointer; transition:background .15s, border-color .15s, color .15s}
.fchip:hover{border-color:var(--navy-300); color:var(--navy)}
.fchip.on{background:var(--navy); border-color:var(--navy); color:#fff}
.fchip b{font-weight:900}
.hint{font-size:var(--fs-xs); color:var(--muted); font-weight:600}

/* ═══ الإدخال ═══ */
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld > span{font-size:var(--fs-xs); font-weight:800; color:var(--ink-2)}
.fld .help{font-size:var(--fs-micro); color:var(--muted); font-weight:600}
.fld .err-t{font-size:var(--fs-micro); color:var(--bad); font-weight:700}
.inp{display:flex; align-items:center; background:#fff; border:1px solid var(--line-3); border-radius:var(--r-ctl); min-height:40px; transition:border-color .15s, box-shadow .15s}
.inp:hover{border-color:var(--navy-300)}
.inp:focus-within{border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,22,132,.12)}
.inp input,.inp select{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:8px 12px; font-size:15px; font-weight:700; color:var(--ink)}
.inp input:focus-visible,.inp select:focus-visible{box-shadow:none}
.inp em{font-style:normal; font-size:var(--fs-xs); font-weight:800; color:var(--muted); padding-inline:10px; border-inline-start:1px solid var(--line-2); align-self:stretch; display:grid; place-items:center; background:var(--inset); border-radius:0 0 0 0}
.inp .lead{padding-inline-start:12px; color:var(--muted); display:grid; place-items:center}
.inp.err{border-color:var(--bad); box-shadow:0 0 0 3px rgba(196,61,47,.1)}
.inp.ro{background:var(--inset)}
input[type=range]{width:100%; accent-color:var(--orange); height:24px; margin:0; cursor:pointer}
.chk{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:700; cursor:pointer}
.chk input{width:18px; height:18px; accent-color:var(--navy)}
.switch{position:relative; width:40px; height:22px; border-radius:22px; background:var(--line-3); border:0; cursor:pointer; transition:background .2s; flex:0 0 auto}
.switch::after{content:""; position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:right .2s}
.switch[aria-checked=true]{background:var(--good)}
.switch[aria-checked=true]::after{right:21px}

/* منتقي الفترة «من ← إلى» */
.drp{display:flex; flex-direction:column; gap:var(--sp-8)}
.drp-row{display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap}
.drp-f{display:flex; flex-direction:column; gap:2px; flex:1 1 120px}
.drp-f span{font-size:var(--fs-micro); font-weight:800; color:var(--muted)}
.drp-f input{border:1px solid var(--line-3); border-radius:var(--r-ctl); padding:7px 10px; font-size:var(--fs-sm); font-weight:700; min-height:38px; background:#fff}
.drp-f input:focus{outline:0; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,22,132,.12)}
.drp-arrow{color:var(--orange); font-weight:900; font-size:18px; padding-top:16px}
.drp-note{font-size:var(--fs-micro); color:var(--ink-2); font-weight:600}
.drp-note b{color:var(--navy)}

/* الحالة الفاضية */
.empty{text-align:center; padding:var(--sp-48) var(--sp-24); display:flex; flex-direction:column; align-items:center; gap:var(--sp-8)}
.empty .ei{width:56px; height:56px; border-radius:50%; background:var(--good-bg); color:var(--good); display:grid; place-items:center; margin-bottom:var(--sp-8)}
.empty .ei svg{width:26px; height:26px; stroke-width:2.4}
.empty b{font-size:var(--fs-h3); font-weight:900}
.empty p{margin:0; font-size:var(--fs-sm); color:var(--muted); max-width:340px}

/* التوست */
.toast{position:fixed; bottom:22px; left:50%; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:12px 16px; border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:100; max-width:calc(100vw - 32px); display:flex; gap:10px; align-items:center}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast b{color:#FFB98A}
.toast .ti{width:24px; height:24px; border-radius:50%; background:var(--orange); display:grid; place-items:center; flex:0 0 auto}

/* العمود الجانبي الثابت */
.two-col{display:grid; grid-template-columns:352px minmax(0,1fr); gap:var(--sp-24); align-items:start}
.col-side{display:flex; flex-direction:column; gap:var(--sp-24); position:sticky; top:var(--side-top,84px)}
.col-main{display:flex; flex-direction:column; gap:var(--sp-32); min-width:0}

/* ═══ المقاسات ═══ */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(3){border-inline-start:0}
  .kpi:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:899px){
  .nav{position:fixed; top:0; bottom:0; right:0; height:100%; width:288px; transform:translateX(105%); box-shadow:-10px 0 40px rgba(0,0,0,.18)}
  .app.collapsed{--nav-w:256px}
  .app.collapsed .logo-txt,.app.collapsed .nl,.app.collapsed .chev,.app.collapsed .who{display:revert}
  .app.collapsed .ni{justify-content:flex-start; padding:8px 12px}
  .app.collapsed .nav-head{justify-content:flex-start; padding:0 var(--sp-16)}
  .app.collapsed .nav-list{overflow:auto}
  .app.collapsed .ng.open > .subs,.app.collapsed .ng:hover > .subs{display:none; position:static; width:auto; box-shadow:none; border:0; padding:0 0 0 0; padding-inline-start:20px; margin:2px 0 8px}
  .app.collapsed .ng.open > .subs{display:flex}
  .app.collapsed .fly-t{display:none}
  .app.drawer-open .nav{transform:none}
  .nav-scrim{display:block; position:fixed; inset:0; background:rgba(10,14,40,.42); opacity:0; pointer-events:none; transition:opacity .2s; z-index:35}
  .app.drawer-open .nav-scrim{opacity:1; pointer-events:auto}
  .tb-logo{display:flex}
  .crumb{display:none}
}
@media (max-width:640px){
  .content{padding:var(--sp-16); gap:var(--sp-16)}
  .topbar{padding:0 var(--sp-16)}
  .band{padding:var(--sp-16); border-radius:16px}
  .team-name{font-size:22px}
  .team-av{width:42px; height:42px; font-size:19px}
  .period{align-items:stretch; width:100%}
  .seg{width:100%}
  .seg button{flex:1 1 auto; justify-content:center; padding:6px 8px}
  .kpi{padding:var(--sp-12) var(--sp-16)}
  .kpi .kv{font-size:28px}
  .kpi .kv small{font-size:14px}
  .kpi.key::before{inset-inline:16px}
  .accs{flex-wrap:wrap}
  .acc-scroll{flex-basis:calc(100% - 44px)}
  .hd h2{font-size:18px}
  .card-h{padding:var(--sp-12) var(--sp-16)}
  .card-b{padding:var(--sp-12) var(--sp-16) var(--sp-16)}
  .task{padding:var(--sp-12) var(--sp-16)}
  .tbl th:first-child,.tbl td:first-child{padding-inline-start:var(--sp-16)}
  .tbl th:last-child,.tbl td:last-child{padding-inline-end:var(--sp-16)}
  .fbar{padding:var(--sp-12) var(--sp-16)}
  .pop{left:auto; right:0; min-width:0; width:100%}
}