/* ==========================================================================
   GENINA Command — نظام التصميم لواجهات القيادة والتحليلات (معاينة 2: غرفة القيادة الرئيسية)
   مستوحى من نمط Executive Command Center: كحلي عميق، بطاقات زجاجية، إضاءة هادئة، أرقام كبيرة، مخططات متدرجة.
   محصور داخل .cc فقط — لا يغيّر أي شاشة أخرى. الخط Tajawal والاتجاه RTL من النظام.
   ألوان التمييز من الهويتين: لاڤندر (توتي/ذهبي) وريتش (برتقالي/أزرق). الوضعان: داكن (الأساس) وفاتح.
   ========================================================================== */
.cc{
  --cc-bg:#F2F4FA; --cc-bg-2:#E7EBF5;
  --cc-card:rgba(255,255,255,.9); --cc-card-2:#FFFFFF; --cc-border:rgba(15,28,64,.10); --cc-border-2:rgba(15,28,64,.18);
  --cc-ink:#0A1530; --cc-ink-2:#26324F; --cc-muted:#4F5B78; --cc-grid:rgba(15,28,64,.08);
  --cc-glow-1:rgba(163,41,74,.10); --cc-glow-2:rgba(43,92,230,.10); --cc-spot:rgba(109,93,246,.08);
  --cc-lav:#A3294A; --cc-lav-2:#D4577A; --cc-gold:#A87A1F;
  --cc-reach:#E24A10; --cc-reach-2:#2B5CE6;
  --cc-c1:#6D5DF6; --cc-c2:#0F9E8E; --cc-c3:#2F6FE0; --cc-c4:#C98208; --cc-c5:#D9468F;
  --cc-ok:#12865A; --cc-warn:#A86A0A; --cc-bad:#C8304B; --cc-info:#2A5FD0;
  --cc-ok-s:rgba(18,134,90,.12); --cc-warn-s:rgba(168,106,10,.13); --cc-bad-s:rgba(200,48,75,.11); --cc-info-s:rgba(42,95,208,.10);
  --cc-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 20px 44px -28px rgba(11,22,48,.38);
  --cc-r:20px; --cc-gap:18px;
  color:var(--cc-ink); position:relative; isolation:isolate;
  margin:calc(var(--s4) * -1); padding:26px 26px 48px; min-height:calc(100vh - var(--top-h));
  background:
    radial-gradient(55% 38% at 100% 0%, var(--cc-glow-1), transparent 70%),
    radial-gradient(50% 42% at 0% 100%, var(--cc-glow-2), transparent 70%),
    linear-gradient(180deg, var(--cc-bg), var(--cc-bg-2));
  font-size:15px;
}
[data-theme="dark"] .cc{
  --cc-bg:#060A18; --cc-bg-2:#0A1026;
  --cc-card:rgba(16,23,48,.74); --cc-card-2:#121B38; --cc-border:rgba(160,175,240,.13); --cc-border-2:rgba(160,175,240,.26);
  --cc-ink:#F1F4FF; --cc-ink-2:#D3DAF0; --cc-muted:#A6B1D2; --cc-grid:rgba(160,175,240,.10);
  --cc-glow-1:rgba(212,87,122,.17); --cc-glow-2:rgba(91,140,255,.15); --cc-spot:rgba(139,124,255,.14);
  --cc-lav:#F390AC; --cc-lav-2:#FFB7CA; --cc-gold:#E9C677;
  --cc-reach:#FF8150; --cc-reach-2:#7AA3FF;
  --cc-c1:#9586FF; --cc-c2:#34DCC6; --cc-c3:#6FB0FF; --cc-c4:#FFC845; --cc-c5:#F57EBD;
  --cc-ok:#55E4A4; --cc-warn:#F7CB5E; --cc-bad:#FF7489; --cc-info:#8DB1FF;
  --cc-ok-s:rgba(85,228,164,.13); --cc-warn-s:rgba(247,203,94,.13); --cc-bad-s:rgba(255,116,137,.14); --cc-info-s:rgba(141,177,255,.13);
  --cc-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 26px 54px -30px rgba(0,0,0,.85);
}
.cc *{box-sizing:border-box}
.cc a{color:inherit}
.cc .num{font-variant-numeric:tabular-nums}

/* ===== الرأس والحالة والفلاتر ===== */
.cc-head{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.cc-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.12em;color:var(--cc-muted);margin:0 0 6px}
.cc-title{font-size:clamp(24px,2.8vw,34px);font-weight:800;margin:0;line-height:1.25;letter-spacing:-.01em}
.cc-title span{background:linear-gradient(90deg,var(--cc-lav),var(--cc-c1) 55%,var(--cc-reach-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cc-sub{margin:6px 0 0;color:var(--cc-muted);font-size:15px}
.cc-status{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cc-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--cc-border-2);background:var(--cc-card);font-size:13.5px;font-weight:700;color:var(--cc-ink-2);backdrop-filter:blur(10px)}
.cc-chip.live{color:var(--cc-ok);border-color:color-mix(in srgb,var(--cc-ok) 40%,transparent);background:var(--cc-ok-s)}
.cc-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:cc-pulse 2.4s ease-out infinite}
@keyframes cc-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cc-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 15px;border-radius:11px;border:1px solid var(--cc-border-2);background:var(--cc-card);color:var(--cc-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.cc-btn:hover{border-color:var(--cc-c1);transform:translateY(-1px);box-shadow:0 10px 22px -14px var(--cc-c1)}
.cc-btn.pri{background:linear-gradient(135deg,var(--cc-c1),var(--cc-c3));border-color:transparent;color:#fff}
.cc :focus-visible{outline:2px solid var(--cc-c1);outline-offset:3px;border-radius:8px}
.cc-filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:10px 12px;border:1px solid var(--cc-border);border-radius:16px;background:var(--cc-card);backdrop-filter:blur(14px);margin-bottom:22px;box-shadow:var(--cc-shadow)}
.cc-filters .lbl{font-size:13px;color:var(--cc-muted);font-weight:800}
.cc-fg{display:inline-flex;align-items:center;gap:8px}
.cc-seg{display:inline-flex;padding:3px;gap:3px;border-radius:12px;background:color-mix(in srgb,var(--cc-ink) 6%,transparent);border:1px solid var(--cc-border)}
.cc-seg button{border:0;background:none;color:var(--cc-ink-2);font:inherit;font-size:14px;font-weight:700;padding:6px 13px;border-radius:9px;cursor:pointer;min-height:34px;transition:background .2s,color .2s,box-shadow .2s}
.cc-seg button:hover{color:var(--cc-ink)}
.cc-seg button.on{background:var(--cc-card-2);color:var(--cc-ink);box-shadow:0 6px 16px -10px rgba(0,0,0,.6),0 0 0 1px var(--cc-border-2)}
.cc-seg.sm button{font-size:13px;padding:4px 11px;min-height:30px}

/* ===== الشبكة والبطاقات ===== */
.cc-grid{display:grid;gap:var(--cc-gap);grid-template-columns:repeat(12,minmax(0,1fr))}
.cc-span-3{grid-column:span 3}.cc-span-4{grid-column:span 4}.cc-span-5{grid-column:span 5}.cc-span-6{grid-column:span 6}.cc-span-7{grid-column:span 7}.cc-span-8{grid-column:span 8}.cc-span-12{grid-column:span 12}
@media (max-width:1240px){.cc-span-3{grid-column:span 6}.cc-span-4,.cc-span-5,.cc-span-7,.cc-span-8,.cc-span-6{grid-column:span 12}}
@media (max-width:620px){.cc{padding:16px 12px 36px;margin:calc(var(--s3) * -1);--cc-gap:14px}.cc-span-3{grid-column:span 12}.cc-filters{padding:8px;gap:8px}.cc-seg button{padding:6px 10px}.cc-fg{flex-wrap:wrap}}
.cc-sec{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin:18px 0 -4px;flex-wrap:wrap}
.cc-sec h3{margin:0;font-size:18px;font-weight:800}
.cc-sec-sub{font-size:13.5px;color:var(--cc-muted)}
.cc-sec .bar{width:4px;height:20px;border-radius:4px;align-self:center;background:linear-gradient(180deg,var(--cc-c1),var(--cc-c2))}
.cc-card{position:relative;display:block;border-radius:var(--cc-r);background:var(--cc-card);border:1px solid var(--cc-border);box-shadow:var(--cc-shadow);padding:20px 22px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);text-decoration:none;min-width:0;overflow:hidden;
  animation:cc-in .6s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i,0) * 50ms);transition:border-color .3s,transform .3s,box-shadow .3s}
@keyframes cc-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.cc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%)}
/* إضاءة تتبع المؤشر داخل البطاقة */
.cc-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--cc-spot),transparent 60%)}
.cc-card:hover::after{opacity:1}
.cc-card:hover{border-color:var(--cc-border-2)}
a.cc-card{cursor:pointer}
a.cc-card:hover{transform:translateY(-3px);box-shadow:var(--cc-shadow),0 22px 40px -30px var(--cc-c1)}
.cc-card.lav{border-top:2px solid color-mix(in srgb,var(--cc-lav) 75%,transparent)}
.cc-card.reach{border-top:2px solid color-mix(in srgb,var(--cc-reach) 75%,transparent)}
.cc-card-h{display:flex;align-items:center;gap:11px;margin-bottom:14px;min-width:0}
.cc-card-h h4{margin:0;font-size:16px;font-weight:800;color:var(--cc-ink);flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.4}
.cc-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:16px;background:color-mix(in srgb,var(--cc-c1) 15%,transparent);color:var(--cc-c1);border:1px solid color-mix(in srgb,var(--cc-c1) 26%,transparent)}
.cc-card.lav .cc-ic{background:color-mix(in srgb,var(--cc-lav) 15%,transparent);color:var(--cc-lav);border-color:color-mix(in srgb,var(--cc-lav) 28%,transparent)}
.cc-card.reach .cc-ic{background:color-mix(in srgb,var(--cc-reach) 15%,transparent);color:var(--cc-reach);border-color:color-mix(in srgb,var(--cc-reach) 28%,transparent)}
.cc-tag{font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--cc-ink) 8%,transparent);color:var(--cc-ink-2);white-space:nowrap}
.cc-tag.lav{background:color-mix(in srgb,var(--cc-lav) 16%,transparent);color:var(--cc-lav)}
.cc-tag.reach{background:color-mix(in srgb,var(--cc-reach) 16%,transparent);color:var(--cc-reach)}
.cc-big{font-size:clamp(28px,3vw,38px);font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:0;overflow-wrap:anywhere}
.cc-multi{display:flex;flex-direction:column;gap:6px}
.cc-multi .cc-big{font-size:clamp(22px,2.4vw,28px)}
.cc-sub2{font-size:14px;color:var(--cc-muted);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;line-height:1.6}
.cc-delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;padding:3px 9px;border-radius:999px}
.cc-delta.up{color:var(--cc-ok);background:var(--cc-ok-s)}.cc-delta.down{color:var(--cc-bad);background:var(--cc-bad-s)}.cc-delta.flat{color:var(--cc-ink-2);background:color-mix(in srgb,var(--cc-ink) 8%,transparent)}
.cc-per{display:inline-flex;font-size:12.5px;font-weight:800;color:var(--cc-muted);margin:-4px 0 8px;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--cc-ink) 7%,transparent)}
.cc-kpi-row{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.cc-kpi-v{min-width:0}
.cc-spark{flex:0 1 44%;min-width:90px;max-width:170px}
.cc-spark svg{display:block;width:100%;height:46px;overflow:visible}
.cc-cmp{margin-top:12px;padding-top:12px;border-top:1px dashed var(--cc-border-2);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--cc-muted)}
.cc-cmp b{color:var(--cc-ink-2)}
.cc-src{margin-top:14px;font-size:13px;color:var(--cc-muted);display:flex;gap:7px;align-items:baseline;line-height:1.55}
.cc-src::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cc-c2);transform:translateY(-1px)}

/* ===== أهم 3 قرارات اليوم ===== */
.cc-top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.cc-top3{grid-template-columns:1fr}}
.cc-dec{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;border-radius:16px;border:1px solid var(--cc-border);text-decoration:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--sev) 14%,var(--cc-card-2)),var(--cc-card-2) 60%);transition:transform .25s,border-color .25s,box-shadow .25s;min-width:0}
.cc-dec:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--sev) 55%,transparent);box-shadow:0 18px 36px -24px var(--sev)}
.cc-dec .rk{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cc-dec .no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;color:var(--sev);border:2px solid color-mix(in srgb,var(--sev) 55%,transparent);background:color-mix(in srgb,var(--sev) 12%,transparent)}
.cc-dec .sv{font-size:12.5px;font-weight:800;color:var(--sev)}
.cc-dec .tx{font-size:16px;font-weight:800;line-height:1.55;color:var(--cc-ink);overflow-wrap:anywhere}
.cc-dec .why{font-size:13px;color:var(--cc-muted);line-height:1.55}
.cc-dec .go{margin-top:auto;font-size:14px;font-weight:800;color:var(--sev)}

/* ===== المؤشرات الصغيرة ===== */
.cc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.cc-stat{display:block;padding:12px 14px;border-radius:14px;border:1px solid var(--cc-border);background:color-mix(in srgb,var(--cc-card-2) 65%,transparent);text-decoration:none;transition:border-color .2s,transform .2s}
a.cc-stat:hover{border-color:var(--cc-border-2);transform:translateY(-2px)}
.cc-stat .v{font-size:24px;font-weight:800;line-height:1.25}
.cc-stat .l{font-size:13.5px;color:var(--cc-muted);font-weight:700;line-height:1.45}
.cc-stat.bad .v{color:var(--cc-bad)}.cc-stat.warn .v{color:var(--cc-warn)}.cc-stat.ok .v{color:var(--cc-ok)}

/* ===== السيولة ===== */
.cc-liq{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:620px){.cc-liq{grid-template-columns:1fr}.cc-liq .cc-ring{max-width:190px;margin:auto}}
.cc-liq-g{display:flex;flex-direction:column;gap:12px}
.cc-liq.stack{grid-template-columns:1fr}
.cc-liq.stack .cc-ring{max-width:180px;margin:0 auto}
.cc-liq.stack .cc-liq-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.cc-liq-h{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:800;color:var(--cc-ink-2);margin-bottom:6px}
.cc-liq-h i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-inline-end:7px}
.cc-acct{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid var(--cc-border);background:color-mix(in srgb,var(--cc-card-2) 55%,transparent);font-size:14.5px}
.cc-acct + .cc-acct{margin-top:6px}
.cc-acct .nm{font-weight:700;min-width:0;overflow-wrap:anywhere}
.cc-acct .nm small{display:block;font-size:12.5px;color:var(--cc-muted);font-weight:600}
.cc-acct b{font-size:15.5px;white-space:nowrap}
.cc-acct.na{border-style:dashed;color:var(--cc-muted)}
.cc-acct.neg b{color:var(--cc-bad)}

/* ===== المخططات (SVG) ===== */
.cc-chart{position:relative;width:100%}
.cc-chart svg{display:block;width:100%;height:auto;overflow:visible}
.cc-chart .gl{stroke:var(--cc-grid);stroke-width:1}
.cc-chart .gl.zero{stroke:var(--cc-border-2)}
.cc-chart .ax{fill:var(--cc-muted);font-size:13px;font-family:var(--font);font-weight:600}
.cc-chart .ax.cur{fill:var(--cc-ink);font-weight:800}
.cc-chart .ax.yl{font-size:12px}
.cc-chart .bar{transform-box:fill-box;transform-origin:50% 100%;animation:cc-grow .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms);transition:opacity .2s,filter .2s}
@keyframes cc-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.cc-chart .hit{fill:transparent;cursor:pointer;outline:none}
.cc-chart .hit.on{fill:color-mix(in srgb,var(--cc-c1) 8%,transparent)}
.cc-chart.hov .bar{opacity:.55}
.cc-chart .dot{transition:r .2s}
.cc-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:cc-draw 1.1s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes cc-draw{to{stroke-dashoffset:0}}
.cc-gdraw{animation:cc-gdraw 1.2s cubic-bezier(.3,.7,.2,1) both}
@keyframes cc-gdraw{from{stroke-dashoffset:var(--p)}to{stroke-dashoffset:0}}
.cc-ring .arc{cursor:pointer;transition:stroke-width .2s;outline:none}
.cc-ring .arc:hover,.cc-ring .arc:focus{stroke-width:19}
.ring-c{font-size:16px;font-weight:800;fill:var(--cc-ink);font-family:var(--font)}
.cc-gauge{max-width:180px;margin:auto}
.cc-gauge svg{display:block;width:100%}
.cc-chart-tools{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cc-tots{display:flex;flex-wrap:wrap;gap:8px}
.cc-tot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--cc-border);border-radius:12px;background:color-mix(in srgb,var(--cc-card-2) 60%,transparent);padding:8px 12px;font:inherit;color:var(--cc-ink);cursor:pointer;transition:opacity .2s,border-color .2s;min-width:110px}
.cc-tot:hover{border-color:var(--c)}
.cc-tot .n{font-size:13px;font-weight:700;color:var(--cc-muted);display:flex;align-items:center;gap:6px}
.cc-tot .n i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.cc-tot b{font-size:17px}
.cc-tot[aria-pressed="false"]{opacity:.42}
.cc-tot[aria-pressed="false"] b{text-decoration:line-through}
.cc-tip{position:absolute;left:0;top:0;pointer-events:none;z-index:5;min-width:170px;padding:10px 12px;border-radius:12px;background:var(--cc-card-2);border:1px solid var(--cc-border-2);box-shadow:0 18px 36px -16px rgba(0,0,0,.65);font-size:13.5px;line-height:1.7;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.cc-tip.on{opacity:1;transform:none}
.cc-tip .tt{font-weight:800;margin-bottom:4px;color:var(--cc-ink)}
.cc-tip .tl{display:flex;align-items:center;gap:8px;justify-content:space-between}
.cc-tip .tl i{width:9px;height:9px;border-radius:3px;flex:none}
.cc-tip .tl span{flex:1;color:var(--cc-muted)}
.cc-tip .tg{margin-top:4px;font-size:12px;color:var(--cc-c1);font-weight:700}

/* ===== القوائم ===== */
.cc-items{display:flex;flex-direction:column;gap:9px}
.cc-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;border:1px solid var(--cc-border);background:color-mix(in srgb,var(--cc-card-2) 55%,transparent);text-decoration:none;transition:border-color .2s,transform .2s}
a.cc-item:hover{border-color:var(--cc-border-2);transform:translateX(-3px)}
.cc-item .t{font-size:15px;font-weight:700;min-width:0;overflow-wrap:anywhere;line-height:1.55}
.cc-item .m{font-size:13px;color:var(--cc-muted);line-height:1.55}
.cc-sev{flex:none;width:5px;align-self:stretch;border-radius:6px;background:var(--cc-muted)}
.cc-sev.high{background:var(--cc-bad)}.cc-sev.normal{background:var(--cc-warn)}.cc-sev.info{background:var(--cc-info)}

/* ===== عناصر مشتركة للوحات المعمّمة ===== */
.cc .m{font-size:13.5px;color:var(--cc-muted);line-height:1.6}
.cc .bad{color:var(--cc-bad)}
.cc-tag.bad{background:var(--cc-bad-s);color:var(--cc-bad)}.cc-tag.warn{background:var(--cc-warn-s);color:var(--cc-warn)}.cc-tag.ok{background:var(--cc-ok-s);color:var(--cc-ok)}
.cc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cc-input{height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--cc-border-2);background:var(--cc-card-2);color:var(--cc-ink);font:inherit;font-size:14px;color-scheme:light dark}
.cc-note{grid-column:1/-1;padding:12px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--cc-warn) 40%,transparent);background:var(--cc-warn-s);font-size:14.5px;line-height:1.6}
.cc-decrow{align-items:flex-start}
.cc-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cc-amt{font-size:16px;white-space:nowrap}
@media (max-width:620px){.cc-decrow{flex-wrap:wrap}.cc-acts{width:100%;justify-content:flex-start}}
/* لوحة المراحل (الإنتاج) */
.cc-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.cc-col{scroll-snap-align:start;min-width:0;border-radius:16px;border:1px solid var(--cc-border);background:color-mix(in srgb,var(--cc-ink) 3%,transparent);padding:12px;display:flex;flex-direction:column;gap:10px}
.cc-col h4{margin:0 0 2px;font-size:15px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.cc-task{border-radius:14px;border:1px solid var(--cc-border);background:var(--cc-card-2);padding:12px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s,transform .2s}
.cc-task:hover{border-color:var(--cc-border-2);transform:translateY(-2px)}
.cc-task.late{border-inline-start:4px solid var(--cc-bad)}
.cc-task-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15.5px}
.cc-task-h a{text-decoration:none}
.cc-task-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cc-task-acts .cc-btn{min-height:32px;font-size:13px;padding:0 11px}
.cc-col .cc-empty{min-height:64px;padding:10px}
/* الآيفون: المراحل فوق بعضها حتى تظهر كل الطلبات دون تمرير أفقي */
@media (max-width:620px){.cc-board{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}}
/* الجداول */
.cc-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--cc-border)}
.cc-table{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.cc-table th{text-align:start;font-size:13px;font-weight:800;color:var(--cc-muted);padding:11px 12px;background:color-mix(in srgb,var(--cc-ink) 4%,transparent);border-bottom:1px solid var(--cc-border);white-space:nowrap}
.cc-table td{padding:11px 12px;border-bottom:1px solid var(--cc-border);vertical-align:top}
.cc-table tr:last-child td{border-bottom:0}
.cc-table tbody tr:hover td{background:color-mix(in srgb,var(--cc-c1) 5%,transparent)}
.cc-table a{text-decoration:none}

/* ===== حالات التحميل والفراغ والخطأ ===== */
.cc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px 12px;color:var(--cc-muted);font-size:14.5px;min-height:120px;line-height:1.6}
.cc-empty .e{font-size:24px;opacity:.8}
.cc-skel{border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc-ink) 6%,transparent) 0%,color-mix(in srgb,var(--cc-ink) 13%,transparent) 50%,color-mix(in srgb,var(--cc-ink) 6%,transparent) 100%);background-size:200% 100%;animation:cc-shimmer 1.3s linear infinite}
@keyframes cc-shimmer{to{background-position:-200% 0}}
.cc-error{border:1px solid color-mix(in srgb,var(--cc-bad) 40%,transparent);background:var(--cc-bad-s);color:var(--cc-ink);border-radius:var(--cc-r);padding:22px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:15px}
.cc-hide{display:none!important}
@media (prefers-reduced-motion:reduce){.cc-card,.cc-dot,.cc-skel,.cc-chart .bar,.cc-draw,.cc-gdraw{animation:none!important;stroke-dashoffset:0!important}.cc-card::after{display:none}}