/* هوية المنظومة نفسها — أسماء المتغيرات وقيمها كما في بقية الأنظمة */
:root{
  --bg:#f4efe6; --bg-soft:#efe7d6;
  --surface:rgba(255,255,255,.76); --surface-strong:#fffdf7; --card:rgba(255,255,255,.9);
  --border:rgba(91,74,49,.14); --border-strong:rgba(15,118,110,.18);
  --accent:#0f766e; --accent-strong:#115e59; --accent2:#c58b39;
  --accent-soft:rgba(15,118,110,.10);
  --green:#1d7f52; --red:#c24132; --orange:#c47b2d; --blue:#245c84; --purple:#7c5b86;
  --text:#1e293b; --muted:#64748b;
  --radius:22px; --shadow:0 20px 55px rgba(27,39,51,.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'IBM Plex Sans Arabic',sans-serif;color:var(--text);font-size:15px;line-height:1.65;
  background:
    radial-gradient(circle at 10% 15%, rgba(15,118,110,.11), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(197,139,57,.17), transparent 20%),
    linear-gradient(180deg,#f8f4eb 0%,#f4efe6 55%,#eee5d6 100%);
}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.2;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:48px 48px}
a{color:inherit;text-decoration:none}
.layout{display:flex;min-height:100vh;position:relative;z-index:1}
nav#sidebar{width:276px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:20px 14px;background:rgba(255,251,243,.86);backdrop-filter:blur(22px);
  border-left:1px solid var(--border);box-shadow:-12px 0 42px rgba(27,39,51,.06)}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.06rem;padding:6px 10px 18px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
  color:var(--muted);font-weight:600;font-size:.9rem;margin-bottom:4px;
  border:1px solid transparent;transition:.16s ease}
.nav-item:hover{background:rgba(255,255,255,.6);color:var(--text);transform:translateX(-2px)}
.nav-item.active{background:linear-gradient(145deg,rgba(15,118,110,.14),rgba(197,139,57,.10));
  color:var(--accent-strong);border-color:rgba(15,118,110,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.nav-item i{width:20px;text-align:center}
.nav-badge{margin-right:auto;background:var(--red);color:#fff;border-radius:999px;
  padding:1px 8px;font-size:.72rem;font-weight:700}
.nav-sec{display:flex;align-items:center;gap:8px;margin:16px 4px 7px;font-size:.7rem;
  font-weight:700;color:var(--muted);letter-spacing:.02em}
.nav-sec::after{content:'';flex:1;height:1px;background:var(--border)}
.nav-item.sub{font-size:.85rem;padding:9px 13px}
main{flex:1;padding:24px 30px;max-width:100%;overflow-x:hidden;min-width:0}
.topbar{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;
  padding:14px 20px;border-radius:var(--radius);background:rgba(248,244,235,.72);
  backdrop-filter:blur(20px);border:1px solid rgba(91,74,49,.08);
  position:relative;z-index:600}
.topbar h1{margin:0;font-size:1.3rem;font-weight:700}
.spacer{margin-right:auto}
.user-chip{display:flex;align-items:center;gap:9px;background:var(--surface-strong);
  border:1px solid var(--border);border-radius:999px;padding:6px 15px;font-size:.83rem;font-weight:600}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden;backdrop-filter:blur(10px)}
.card-head{display:flex;align-items:center;gap:11px;padding:16px 22px;
  border-bottom:1px solid var(--border);font-weight:700}
.card-body{padding:18px 22px}
/* الطيّ: البطاقة الطويلة تُغلق فيبقى عنوانها دليلاً على مكانها */
.card-head[data-fold="1"]{cursor:pointer}
.card.folded > *:not(.card-head){display:none}
.card.folded > .card-head{border-bottom:0}
.fold-caret{display:inline-grid;place-items:center;width:24px;height:24px;flex-shrink:0;
  border:1px solid var(--border);border-radius:8px;background:var(--surface-strong);
  color:var(--muted);font-size:.62rem;cursor:pointer;transition:transform .16s ease,.16s}
.fold-caret:hover{border-color:var(--accent);color:var(--accent)}
.card.folded .fold-caret,details.card:not([open]) .fold-caret{transform:rotate(-90deg)}
.card-head .fold-hint{font-size:.68rem;color:var(--muted);font-weight:600}
@media(max-width:640px){.card-head .fold-hint{display:none}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);backdrop-filter:blur(10px);
  /* بطاقة الرقم من عائلة الجدول: الرقم فوق عنوانه تماماً، بنفس قاعدة
     ‎th/td‎. تركُها على الحافة يجعل صفَّ البطاقات يبدو مائلاً بلا سبب. */
  text-align:center}
.kpi b{display:block;font-size:1.55rem;font-weight:700;line-height:1.3}
.kpi span{color:var(--muted);font-size:.83rem}
table{width:100%;border-collapse:collapse;font-size:.88rem}
/* محاذاة الجداول للمنتصف — **كل** جدول وكل خانة، بلا استثناء.
   قاعدةٌ واحدة لكل الجداول: الاستثناءات تجعل الشاشة تبدو غير مقصودة.
   والأرقام تبقى tabular-nums عبر ‎.num‎ فتتحاذى خاناتها رأسياً رغم التوسيط. */
th{text-align:center;padding:11px 14px;background:rgba(239,231,214,.5);color:var(--muted);
  font-weight:700;font-size:.79rem;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;
  text-align:center}
/* ولا يُستثنى شيء — ولا يُكتب ‎text-align‎ داخل أي خانة في أي قالب. */
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(15,118,110,.05)}
.table-wrap{overflow-x:auto}
.sci{font-style:italic}
.sci-sub{font-style:normal;font-size:.68rem;color:var(--muted);display:block}
.form-control.bad-num{border-color:var(--red);background:rgba(194,65,50,.06)}
.num-hint{font-size:.72rem;color:var(--red);margin-top:4px;display:none}
.num-hint.show{display:block}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-size:.76rem;font-weight:700;line-height:1.3}
.b-green{background:rgba(29,127,82,.12);color:var(--green)}
.b-red{background:rgba(194,65,50,.10);color:var(--red)}
.b-orange{background:rgba(196,123,45,.12);color:var(--orange)}
.b-blue{background:rgba(36,92,132,.12);color:var(--blue)}
.b-gray{background:rgba(100,116,139,.12);color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;
  padding:10px 18px;border-radius:14px;border:1px solid transparent;font-family:inherit;
  font-size:.9rem;font-weight:700;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--accent) 0%,#15847b 50%,var(--accent2) 100%);
  box-shadow:0 14px 28px rgba(15,118,110,.18);
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-sm{min-height:32px;padding:6px 13px;font-size:.8rem;border-radius:11px;box-shadow:none}
.btn-ghost{background:var(--surface-strong);border-color:var(--border);color:var(--text);box-shadow:none}
.btn-green{background:var(--green);box-shadow:0 12px 24px rgba(29,127,82,.18)}
.btn-red{background:var(--red);box-shadow:0 12px 24px rgba(194,65,50,.18)}
.btn-orange{background:var(--orange);box-shadow:0 12px 24px rgba(196,123,45,.18)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-weight:700;font-size:.83rem;margin-bottom:6px}
.form-control{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface-strong);color:var(--text);font-family:inherit;font-size:.88rem}
.form-control:focus{outline:2px solid rgba(15,118,110,.18);border-color:var(--accent)}
/* قائمة اختيار ببحث — نفس نمط الصيانة والموارد البشرية */
.ss{position:relative;width:100%}
.ss > select{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}
.ss-trigger{width:100%;display:flex;align-items:center;gap:10px;text-align:right;cursor:pointer;
  padding:10px 14px;border:1px solid var(--border);border-radius:14px;line-height:1.65;
  background:var(--surface-strong);color:var(--text);font-family:inherit;font-size:.88rem}
.ss-trigger:disabled{opacity:.55;cursor:not-allowed}
.ss.open .ss-trigger,.ss-trigger:focus-visible{outline:2px solid rgba(15,118,110,.18);
  border-color:var(--accent)}
.ss-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-value.ph{color:var(--muted)}
.ss-caret{color:var(--muted);font-size:.72rem;transition:transform .16s ease}
.ss.open .ss-caret{transform:rotate(180deg)}
.ss-panel{display:none;position:fixed;z-index:1200;
  background:var(--surface-strong);border:1px solid var(--border-strong);border-radius:16px;
  box-shadow:var(--shadow);padding:10px}
.ss-panel.open{display:block}
.ss-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--text);font-family:inherit;font-size:.85rem;margin-bottom:8px}
.ss-input:focus{outline:2px solid rgba(15,118,110,.18);border-color:var(--accent)}
.ss-options{max-height:246px;overflow:auto;display:grid;gap:3px}
.ss-opt,.ss-none{width:100%;text-align:right;padding:8px 12px;border:0;border-radius:11px;
  background:transparent;color:var(--text);font-family:inherit;font-size:.85rem;line-height:1.5}
.ss-opt{cursor:pointer}
.ss-opt:hover,.ss-opt.active{background:var(--accent-soft);color:var(--accent-strong)}
.ss-opt.on{background:rgba(197,139,57,.14);color:var(--accent2);font-weight:700}
.ss-opt{display:flex;align-items:center;gap:9px}
.ss-tick{width:15px;height:15px;flex-shrink:0;border:1.5px solid var(--border-strong);
  border-radius:5px;display:grid;place-items:center;font-size:.6rem;color:transparent}
.ss-opt.on .ss-tick{background:var(--accent2);border-color:var(--accent2);color:#fff}
.ss-foot{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--border);font-size:.75rem}
.ss-foot button{border:0;background:transparent;color:var(--accent);font-family:inherit;
  font-size:.75rem;font-weight:700;cursor:pointer;padding:2px}
.ss-foot span{color:var(--muted)}
.ss-count{background:var(--accent-soft);color:var(--accent-strong);border-radius:999px;
  padding:1px 8px;font-size:.72rem;font-weight:700;flex-shrink:0}
.ss-opt:disabled{opacity:.45;cursor:not-allowed}
.ss-none{color:var(--muted);text-align:center}
.tbl-find{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:4px 12px;max-width:270px}
.tbl-find i{color:var(--muted);font-size:.76rem}
.tbl-find input{border:0;background:transparent;outline:0;font-family:inherit;font-size:.82rem;
  color:var(--text);width:100%;padding:3px 0}
.tbl-find small{color:var(--muted);font-size:.72rem;white-space:nowrap}
/* قبل أن تُرقّى القوائم: صندوق التعدّد الأصلي طويلٌ يكسر الصفّ لحظةً ثم
   يقفز. فيُحجز له ارتفاع الحقل نفسه ويُخفى — والإخفاء مشروط بوجود JS
   (html.js) حتى لا تختفي الفلاتر أصلاً لو لم يعمل السكربت. */
html.js .filter-bar select[multiple]{height:43px;visibility:hidden}
html.js .filter-bar .ss > select[multiple]{height:1px}
.ss > select{visibility:hidden}
.up{color:var(--green);font-weight:700}
.down{color:var(--red);font-weight:700}
.flat{color:var(--muted)}
.kpi .cmp{display:block;font-size:.74rem;font-weight:700;margin-top:4px}
.kpi .was{display:block;font-size:.7rem;color:var(--muted);line-height:1.5}
.kpi .units{display:block;font-size:.76rem;font-weight:700;color:var(--ink);margin-top:3px;letter-spacing:.2px}
.kpi .units i{font-style:normal;font-weight:500;color:var(--muted)}
.split{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--border)}
.split span{display:block;height:100%}
.split-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:.8rem}
.split-legend i{display:inline-block;width:11px;height:11px;border-radius:4px;
  margin-inline-end:6px}
.p-ok{background:var(--green)}
.p-loss{background:var(--red)}
.p-short{background:var(--orange)}
.filter-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filter-bar .form-group{margin:0;min-width:150px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.modal-overlay{position:fixed;inset:0;background:rgba(24,33,41,.34);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;z-index:900;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;
  box-shadow:0 28px 64px rgba(27,39,51,.22)}
.modal-title{font-weight:700;font-size:1.06rem;margin-bottom:17px;display:flex;align-items:center;gap:10px}
.hint{font-size:.8rem;color:var(--muted)}
.empty{padding:34px;text-align:center;color:var(--muted)}
.empty i{font-size:1.9rem;display:block;margin-bottom:10px;opacity:.35}
.mono{font-family:'Courier New',monospace;direction:ltr;unicode-bidi:plaintext;text-align:right}
.vkey{font-weight:700;unicode-bidi:plaintext}
/* ناتج الشرح أرقام وعمليات فقط — يُعرض باتجاه لاتيني وإلا انقلب ترتيبه */
.expr-out{direction:ltr;text-align:right;unicode-bidi:isolate;display:block}
/* نظير .expr-out للأثر المكتوب **جملةً عربية فيها أرقام** لا معادلةً لاتينية.
   الفرق ليس تجميلاً: .expr-out يفرض الاتجاه اللاتيني (وهو صحيح لـ«3000 ÷ 4 =
   750»)، ووضعُه على جملة تبدأ برقم يقذف ذلك الرقم إلى آخر السطر — فتُقرأ
   «460 إنتاج × 80٪ … = 348» هكذا: «80 … 348 460». وplaintext يأخذ الاتجاه من
   أول حرف عربي فيبقى كل عدد جزيرةً لاتينية في موضعها. */
.expr-ar{display:block;unicode-bidi:plaintext}
.formula{font-family:'IBM Plex Sans Arabic',monospace;background:rgba(15,118,110,.07);
  border:1px solid var(--border-strong);border-radius:12px;padding:7px 12px;
  font-size:.85rem;font-weight:600;display:inline-block;unicode-bidi:plaintext}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:999;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--text);color:#fffdf7;padding:12px 22px;border-radius:14px;
  font-size:.87rem;font-weight:600;box-shadow:0 16px 34px rgba(27,39,51,.26)}
.toast.success{background:var(--green);color:#fff}
.toast.error{background:var(--red);color:#fff}
.toast.warning{background:var(--orange);color:#fff}
.menu-toggle{display:none;background:none;border:none;font-size:1.3rem;color:var(--text);cursor:pointer}
.apps-menu{position:relative}
.apps-btn{display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--accent) 0%,#15847b 50%,var(--accent2) 100%);
  color:#fff;padding:8px 16px;border-radius:50rem;font-weight:700;font-size:.8rem;cursor:pointer;
  list-style:none;box-shadow:0 12px 24px rgba(15,118,110,.20);white-space:nowrap;user-select:none}
.apps-btn::-webkit-details-marker{display:none}
.apps-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:1000;
  background:var(--surface-strong);border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:0 24px 52px rgba(27,39,51,.18);width:min(340px, calc(100vw - 24px));overflow:hidden}
.apps-head{padding:12px 17px;font-size:.85rem;font-weight:700;border-bottom:1px solid var(--border);
  background:rgba(239,231,214,.55)}
.apps-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.app-card{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:16px;
  border:1px solid var(--border);background:rgba(255,255,255,.6);transition:.18s}
.app-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.app-card.here{border-color:var(--accent)}
.app-card b{font-size:.8rem}
.app-card small{font-size:.68rem;color:var(--muted)}
.app-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:var(--accent-soft)}
.apps-foot{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;
  font-size:.8rem;font-weight:700;border-top:1px solid var(--border);background:rgba(239,231,214,.55)}
.role-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface-strong);
  border:1px solid var(--border);color:var(--text);padding:7px 15px;border-radius:50rem;
  font-weight:700;font-size:.8rem;cursor:pointer;list-style:none;white-space:nowrap;user-select:none}
.role-btn::-webkit-details-marker{display:none}
.role-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;margin-bottom:5px;
  border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.6);
  font-family:inherit;cursor:pointer;transition:.16s;text-align:right}
.role-opt:hover{transform:translateX(-2px);border-color:var(--accent)}
.role-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:.85rem;flex-shrink:0}
@media(max-width:880px){
  nav#sidebar{position:fixed;right:-290px;z-index:800;transition:right .25s;
    box-shadow:-12px 0 42px rgba(27,39,51,.18)}
  nav#sidebar.open{right:0}
  main{padding:16px 14px}
  .menu-toggle{display:block}
  .grid2{grid-template-columns:1fr}
}


/* ══ خاص بالإنتاج: شريط المسار ══════════════════════════════════════
   المسار خطٌّ لا قائمة: القارئ يسأل «أين وصل الكود؟» فيجب أن تُجيبه الصورة
   قبل النص. والألوان دلالية لا زخرفية — المتأخر أحمر لأنه يحتاج فعلاً. */
.path{display:grid;gap:0;position:relative}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;position:relative}
.step:not(:last-child)::before{content:'';position:absolute;top:46px;bottom:-14px;
  right:21px;width:2px;background:var(--border)}
.step.s-done:not(:last-child)::before{background:var(--green);opacity:.45}
.step-dot{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:.95rem;border:2px solid var(--border);background:var(--surface-strong);
  color:var(--muted);z-index:1}
.s-done .step-dot{background:rgba(29,127,82,.12);border-color:var(--green);color:var(--green)}
.s-due .step-dot{background:rgba(15,118,110,.12);border-color:var(--accent);color:var(--accent)}
.s-late .step-dot{background:rgba(194,65,50,.12);border-color:var(--red);color:var(--red)}
.s-blocked .step-dot,.s-waiting .step-dot{opacity:.6}
.s-skipped .step-dot{opacity:.4;border-style:dashed}
.step-body{min-width:0}
.step-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700;font-size:.95rem}
.step-meta{font-size:.78rem;color:var(--muted);margin-top:3px}
.ev{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:11px 14px;margin-top:9px}
.ev-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.83rem;font-weight:700}
.ev-vals{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.ev-val{background:var(--surface-strong);border:1px solid var(--border);border-radius:10px;
  padding:4px 10px;font-size:.78rem;unicode-bidi:plaintext}
.ev-val b{color:var(--accent-strong)}
.ev-val i{font-style:normal;color:var(--muted);font-size:.72rem}
/* الكمية أبرز من بقية القيم: هي الرقم الذي يدخل إنتاجية الأسبوع */
.ev-val.qty{background:var(--accent-soft);border-color:var(--border-strong)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:.72rem;font-weight:700;background:var(--surface-strong);border:1px solid var(--border)}
.lbl{font-family:'Courier New',monospace;font-weight:700;direction:ltr;unicode-bidi:plaintext;
  background:var(--accent-soft);color:var(--accent-strong);border-radius:8px;padding:2px 9px;
  font-size:.86rem;letter-spacing:.5px;display:inline-block}
.prog{height:6px;border-radius:999px;background:var(--border);overflow:hidden;min-width:80px}
.prog span{display:block;height:100%;background:var(--green)}
.num{font-variant-numeric:tabular-nums;unicode-bidi:plaintext}
.stage-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);
  padding:14px 16px;margin-bottom:12px}
.stage-card.k-harvest{border-color:rgba(29,127,82,.35);background:rgba(29,127,82,.04)}
.stage-card.k-start{border-color:rgba(36,92,132,.30)}
.stage-card.k-close{border-color:rgba(100,116,139,.35)}
.fld{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:7px 11px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface-strong);font-size:.82rem;margin-bottom:6px}

/* ══════════════════════════════════════════════════════════════════════
   شاشتا المُدخِل — الجوال أولاً
   ══════════════════════════════════════════════════════════════════════
   المختص يُدخل بإبهامٍ واحد وهو واقفٌ بين الصالات: أهدافُ اللمس لا تقلّ
   عن 48 بكسلاً، وخانةُ الرقم 17px فما فوق (أقلُّ من 16 تجعل iOS يقرّب
   الصفحة عند اللمس فينزلق كل شيء)، والحفظ في شريطٍ ملتصق بأسفل الشاشة
   لا في آخر صفحةٍ يجب التمرير إليها. */
.act{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:14px 16px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface-strong);margin-bottom:10px}
.act.a-late{border-color:rgba(194,65,50,.45);background:rgba(194,65,50,.05)}
.act.a-due{border-color:rgba(15,118,110,.35)}
.act.a-again{border-color:var(--border);background:var(--surface)}
.act-main{min-width:0}
.act-code{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.act-code .lbl{font-size:1.02rem;padding:3px 11px}
.act-what{font-weight:700;font-size:.92rem;line-height:1.4}
.act-sub{font-size:.78rem;color:var(--muted);margin-top:3px}
.act-btn{min-height:48px;min-width:96px;font-size:.9rem;border-radius:14px}

/* خانة الإدخال السريع */
.qrow{display:grid;grid-template-columns:1fr 132px;gap:12px;align-items:center;
  padding:12px 14px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface-strong);margin-bottom:9px}
.qrow.filled{border-color:var(--green);background:rgba(29,127,82,.05)}
.qrow.q-late{border-color:rgba(194,65,50,.4)}
.qrow-info{min-width:0}
.qrow-last{font-size:.75rem;color:var(--muted);margin-top:3px}
.qnum{width:100%;min-height:52px;padding:10px 14px;border:1.5px solid var(--border-strong);
  border-radius:14px;background:var(--surface);color:var(--text);
  font-family:inherit;font-size:1.15rem;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums}
.qnum:focus{outline:3px solid rgba(15,118,110,.22);border-color:var(--accent)}
.qnum.bad-num{border-color:var(--red);background:rgba(194,65,50,.07)}
.qextra{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:9px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.qextra label{font-size:.76rem;color:var(--muted);display:block;margin-bottom:3px}
.qextra input,.qextra select{width:100%;min-height:44px;padding:8px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  color:var(--text);font-family:inherit;font-size:.92rem}

/* شريط الحفظ الملتصق */
.savebar{position:sticky;bottom:0;z-index:500;margin:16px -4px 0;padding:12px 14px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(251,253,250,.94);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:18px;
  box-shadow:0 -8px 28px rgba(27,39,51,.10)}
.savebar .btn{min-height:50px;flex:1;font-size:.95rem}
.savebar b{font-size:.9rem}

/* شريط اختيار سريع (كائن / مرحلة) */
.picker{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.picker a{flex:none;padding:9px 15px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-strong);font-size:.85rem;font-weight:700;white-space:nowrap}
.picker a.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}

/* رأسٌ مختصر لشاشات الإدخال */
.entry-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.entry-head h2{font-size:1.15rem;font-weight:700;margin:0}
.entry-head .when{font-size:.82rem;color:var(--muted)}

@media(max-width:640px){
  .act{grid-template-columns:1fr;gap:10px}
  .act-btn{width:100%}
  .qrow{grid-template-columns:1fr 118px;gap:10px;padding:11px 12px}
  .savebar{margin-inline:0}
  /* 16px حدٌّ أدنى: ما دونه يُقرّب iOS الصفحةَ عند اللمس */
  input,select,textarea{font-size:16px}
  .qnum{font-size:1.2rem}
}

/* بطاقة «التالي على هذا الكود» — أول ما يُرى، وتنكسر رأسياً على الجوال.
   كانت مبنيّة بـflex أفقي فانضغط نصّها إلى كلمةٍ في كل سطر على 375 بكسل. */
.nextact{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:16px 18px}
.nextact .ic{width:46px;height:46px;border-radius:14px;color:#fff;flex:none;
  display:grid;place-items:center;font-size:1.05rem;background:var(--accent)}
.nextact.late .ic{background:var(--red)}
.nextact .txt{min-width:0}
.nextact .txt small{color:var(--muted);display:block;font-size:.76rem}
.nextact .txt b{font-size:1.05rem;display:block;margin:2px 0 4px}
.nextact .go{min-height:46px;padding:0 20px;border-radius:14px;white-space:nowrap}
@media(max-width:640px){
  .nextact{grid-template-columns:auto 1fr;gap:12px}
  .nextact .go{grid-column:1/-1;width:100%;display:flex;align-items:center;
    justify-content:center;min-height:50px}
  /* بطاقات الأرقام صفّان على الجوال: أربع بطاقات بعرض الشاشة تدفع
     ما يجب فعله تحت أربع شاشات من التمرير. */
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px 14px}
  .kpi b{font-size:1.2rem}
  .kpi span{font-size:.75rem}
}

/* عنصر موقوف: يبقى مقروءاً ولا يُخفى — الإخفاء يجعل الصفوف
   التي تحمل كودَه تبدو بلا مصدر. */
tr.dim{opacity:.5}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}