/* المسار: assets/components.css
   ══════════════════════════════════════════════════════════════
   مكوّنات الطبقة المشتركة الجديدة (shell.js و core.js).
   الرموز والألوان وكل المكوّنات القائمة في assets/theme.css — يُحمَّل بعده.
   مأخوذة من components.css في النظام الأصلي ومكتوبة برموز برنولي.
   ══════════════════════════════════════════════════════════════ */

/* ══ تحميل الصفحة: المحتوى مخفي حتى ينجح الحارس ══
   guard في core.js يضيف body.page-ready. قبل ذلك يظهر هيكل وهمي مكان المحتوى،
   فلا يرى من لا صلاحية له أي بيانات ولو لحظة. */
body:not(.page-ready) .main > .ct,
body:not(.page-ready) .fab{display:none!important}
body:not(.page-ready) .guard-hide{visibility:hidden}
body.page-ready .boot-sk{display:none}
.boot-sk{flex:1;padding:var(--sp-4);width:100%;max-width:1600px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.bsk-head{display:flex;flex-direction:column;gap:var(--sp-2)}
.bsk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.bsk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3)}
.bsk-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.bsk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2)}
@media(max-width:767px){
  .boot-sk{padding:var(--sp-3)}
  .bsk-stats{grid-template-columns:1fr 1fr}
  .bsk-2{grid-template-columns:1fr}
}

/* ══ الإخفاء حسب الصلاحية (applyRole في shell.js) ══
   data-del: زر حذف · data-money: عنصر مالي · data-edit: زر إضافة أو تعديل */
html.no-delete [data-del]{display:none!important}
html.no-money  [data-money]{display:none!important}
html.no-edit   [data-edit]{display:none!important}
html.no-medical [data-med]{display:none!important}

/* ══ نوافذ النظام (choiceDialog / confirm2) فوق أي نافذة أخرى ══ */
.app-dialog{z-index:calc(var(--z-modal) + 50)}

/* ══ نافذة الاختصارات ══ */
.sc-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.sc-row{display:flex;align-items:center;gap:var(--sp-3)}
.sc-key{flex-shrink:0;min-width:64px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:var(--fs-xs);font-weight:800;
        background:var(--surface-2);border:1px solid var(--border-2);border-bottom-width:2px;border-radius:var(--radius-sm);padding:3px var(--sp-2);color:var(--ink)}
.sc-lbl{font-size:var(--fs-sm);color:var(--ink2)}
.sc-note{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--ink3)}

/* ══ شريط «نسخة أحدث متاحة» (sw-register.js) ══ */
.upd-bar{position:fixed;inset-block-end:calc(var(--sp-4) + var(--safe-bottom));inset-inline-end:var(--sp-4);z-index:var(--z-toast);
  display:flex;align-items:center;gap:var(--sp-3);background:var(--primary);color:#fff;font-weight:800;font-size:var(--fs-sm);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);box-shadow:var(--shadow2)}
.upd-bar button{background:#fff;color:var(--primary-ink);border-radius:var(--radius-sm);padding:4px var(--sp-3);font-weight:900;font-family:inherit;cursor:pointer}
.upd-bar .upd-x{background:transparent;color:#fff;padding:0 var(--sp-1)}
@media(max-width:767px){.upd-bar{inset-block-end:calc(80px + var(--safe-bottom))}}

/* ══ خطأ قاعدة البيانات — مكان القائمة لا قائمة فارغة ══ */
.db-err{margin:var(--sp-3) 0;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger-ink);line-height:1.8}
.db-err .dbe-t{font-weight:900}
.db-err .dbe-m{font-size:var(--fs-sm)}
.db-err code{font-family:'JetBrains Mono',monospace;font-size:var(--fs-xs);background:var(--surface-2);padding:1px 6px;border-radius:var(--radius-xs)}
.db-err .dbe-n{font-size:var(--fs-xs);color:var(--ink2);margin-block:var(--sp-2)}

/* ══ توقيع النظام أسفل الشريط الجانبي ══ */
.sb-signature{text-align:center;font-size:var(--fs-2xs);color:var(--ink3);padding:var(--sp-1) 0 var(--sp-2);letter-spacing:.04em}

/* ── شريط الخطر الطبي (core.riskBarHTML) — تنبيه فقط، القرار للطبيب ── */
.risk-bar{border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.7;border:1px solid var(--border);background:var(--glass)}
.risk-bar.ok{border-color:var(--g);color:var(--g2)}
.risk-bar.unknown{color:var(--ink2);border-style:dashed}
.risk-bar.alert{border-color:var(--re);background:rgba(239,68,68,.08)}
.risk-bar .rk-chips{display:flex;flex-wrap:wrap;gap:6px}
.risk-bar .rk{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:rgba(245,158,11,.15);color:var(--am)}
.risk-bar .rk-d{background:rgba(239,68,68,.15);color:var(--re2)}
.risk-bar .rk-i{background:var(--glass2);color:var(--ink2)}
.risk-bar .rk-rules{margin:8px 0 0;padding-inline-start:18px;color:var(--ink)}
.risk-bar .rk-miss{margin-top:6px;font-size:12px;color:var(--ink3)}
.risk-bar .rk-note{margin-top:6px;font-size:11px;color:var(--ink3)}
.rk-mark{font-size:13px;margin-inline-start:4px;cursor:help}

/* ── العمل دون اتصال (assets/offline.js) ── */
.off-pill{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700;
  background:rgba(245,158,11,.15);color:var(--am);white-space:nowrap;margin-inline-start:6px;vertical-align:middle}
.off-pill.fail{background:rgba(239,68,68,.15);color:var(--re2)}
.net-bar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;
  font-size:13px;line-height:1.6;border-bottom:1px solid var(--border);background:var(--surface);color:var(--ink)}
.net-bar[hidden]{display:none}
.net-bar.off{background:rgba(239,68,68,.12);border-color:var(--re)}
.net-bar.sync{background:rgba(14,165,233,.12)}
.net-bar.fail{background:rgba(239,68,68,.12)}
.net-bar.pend{background:rgba(245,158,11,.12)}
.net-bar .nb-ic{font-size:16px}
.net-bar .nb-txt{flex:1;min-width:200px}
.net-bar .nb-count{margin-inline-start:6px;font-weight:700}
.net-bar .nb-sub{margin-inline-start:6px;color:var(--ink2);font-size:12px}
.net-bar .nb-btn{border:1px solid var(--border);background:var(--glass);color:var(--ink);border-radius:8px;padding:4px 10px;
  font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.net-bar .nb-btn:hover{background:var(--glass2)}
#offBadge{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--glass);color:var(--ink);
  border-radius:99px;padding:3px 9px;font:inherit;font-size:12px;cursor:pointer}
#offBadge[hidden]{display:none}
#offBadge.fail{border-color:var(--re);color:var(--re2)}
#offBadge.off{border-color:var(--am);color:var(--am)}
#offBadge.float{position:fixed;inset-inline-start:14px;bottom:calc(84px + var(--safe-bottom));z-index:var(--z-bottomnav)}
.net-locked{opacity:.45;pointer-events:none}
.net-gate{position:fixed;inset:0;z-index:var(--z-drawer);display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.net-gate .ng-card{max-width:420px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:22px;text-align:center;box-shadow:var(--shadow2)}
.net-gate .ng-ic{font-size:38px}
.net-gate .ng-t{font-size:17px;font-weight:800;margin:6px 0}
.net-gate .ng-s{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.7}
.net-gate .ng-acts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.ob-state{padding:8px 12px;border-radius:10px;font-size:13px;margin-bottom:10px;border:1px solid var(--border)}
.ob-state.off{background:rgba(239,68,68,.1);border-color:var(--re)}
.ob-state.on{background:rgba(34,197,94,.1);border-color:var(--g)}
.ob-sec{font-weight:800;font-size:13.5px;margin:14px 0 6px}
.ob-hint{font-size:12px;color:var(--ink3);margin-bottom:6px}
.ob-empty{font-size:12.5px;color:var(--ink3);padding:6px 0}
.ob-row{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--border);border-radius:10px;
  margin-bottom:6px;background:var(--glass)}
.ob-row.fail{border-color:var(--re)}
.ob-ic{font-size:18px}
.ob-body{flex:1;min-width:0}
.ob-t{font-weight:700;font-size:13px}
.ob-m{font-size:11.5px;color:var(--ink3)}
.ob-err{font-size:12px;color:var(--re2);margin-top:3px}
.ob-acts{display:flex;gap:6px;flex-wrap:wrap}
.ob-snap{font-size:12.5px;color:var(--ink2);line-height:1.8}
.off-n-row{margin-top:4px}
.off-n-note{margin-top:6px;font-size:11.5px;color:var(--ink3)}
@media(max-width:520px){.ob-row{flex-wrap:wrap}.ob-acts{width:100%}}

/* ── اسم العيادة في الشريط الجانبي: الكامل على الحاسوب، والمختصر على الجوال ── */
.sb-name .sb-name-short{display:none}
@media(max-width:767px){
  .sb-name .sb-name-full{display:none}
  .sb-name .sb-name-short{display:inline}
}
.sb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* بلا رموز تعبيرية خارج الشريط الجانبي (تنظيف لغوي): خانة الأيقونة الفارغة لا تأخذ مكاناً،
   وأزرار الشريط العلوي صارت نصّاً قصيراً (المظهر، تحديث، طباعة) */
[class*="-ic"]:empty,.ico:empty,.modal-hd > span:empty{display:none!important}
.tb-btn{width:auto;min-width:36px;padding:0 10px;font-size:12.5px;font-weight:700;white-space:nowrap}

/* ── المواد المستخدمة داخل الجلسة (assets/materials.js) — كل سطر بطاقة، ومساحة لمس 44 بكسل ── */
.mat-sec{margin-top:var(--sp-4);border-top:1px solid var(--border);padding-top:var(--sp-3);min-width:0}
.mat-hd{font-size:var(--fs-md);font-weight:var(--fw-black);color:var(--ink);margin-bottom:var(--sp-2);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.mat-dim{font-size:var(--fs-sm);color:var(--ink3);font-weight:var(--fw-bold)}
.mat-lines{display:flex;flex-direction:column;gap:var(--sp-3)}
.mat-line{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.mat-lbl{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink2);margin-bottom:var(--sp-1)}
.mat-r1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-2);align-items:end}
.mat-r1 .mat-lbl{grid-column:1/-1;margin-bottom:0}
.mat-line .fi,.mat-line .fi-sel{width:100%;min-height:var(--tap);min-width:0}
.mat-del{min-height:var(--tap);min-width:var(--tap);color:var(--danger-ink)}
.mat-r2{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--sp-2) var(--sp-3);align-items:end}
.mat-qbox{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.mat-qbox .fi{flex:1}
.mat-unit{font-weight:var(--fw-black);color:var(--primary-ink);white-space:nowrap;padding:0 var(--sp-1)}
.mat-avail{font-size:var(--fs-sm);color:var(--ink2);line-height:1.8;padding-bottom:var(--sp-2)}
.mat-plan{font-size:var(--fs-sm);color:var(--ink);background:var(--primary-soft);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);line-height:1.9;overflow-wrap:anywhere}
.mat-plan ul{margin:var(--sp-1) 0 0;padding-inline-start:var(--sp-4)}
.mat-split{border:1px solid var(--primary)}
.mat-warn{font-size:var(--fs-sm);color:var(--ink);background:var(--warning-soft);border:1px solid var(--warning);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);line-height:1.8}
.mat-warn.mat-bad{background:var(--danger-soft);border-color:var(--danger)}
.mat-cost{font-size:var(--fs-sm);color:var(--ink2)}
.mat-empty{font-size:var(--fs-sm);color:var(--ink3);padding:var(--sp-2) 0}
.mat-foot{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-top:var(--sp-3)}
.mat-add{min-height:var(--tap)}
.mat-total{flex:1;text-align:end;font-size:var(--fs-base);color:var(--ink)}
.mat-opt-exp{color:var(--danger-ink)}
/* في ملف المريض */
.mat-used{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink2)}
.mat-used-t{font-weight:var(--fw-black);color:var(--ink);margin-bottom:var(--sp-1)}
.mat-used ul{margin:0;padding-inline-start:var(--sp-4);line-height:1.9}
.mat-lot{display:inline-block;margin-inline-start:var(--sp-2);color:var(--ink3)}
.mat-lot-fix{color:var(--warning-ink);font-weight:var(--fw-bold)}
.vp-box{margin-top:var(--sp-2);border:1px solid var(--border-2);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
.vp-row{display:flex;justify-content:space-between;gap:var(--sp-3);padding:3px 0}
.vp-row .num{font-weight:var(--fw-bold)}
.vp-tot{border-top:1px solid var(--border);margin-top:var(--sp-1);padding-top:var(--sp-2);font-weight:var(--fw-black);color:var(--ink)}
.vp-neg{color:var(--danger-ink)}
.vp-note{color:var(--ink3);margin-top:var(--sp-1);line-height:1.7}
.vp-det{margin:var(--sp-1) 0 0;padding-inline-start:var(--sp-4);color:var(--ink2);line-height:1.8}
.tl-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
@media(max-width:767px){
  .mat-r2{grid-template-columns:1fr}
  .mat-avail{padding-bottom:0}
  .mat-foot .mat-add{flex:1}
  .mat-total{flex:1 1 100%;text-align:start}
  .tl-acts .btn{min-height:var(--tap);flex:1}
}

/* ── هيكل تحميل الأرقام (numSkel في core.js): لا قيمة ابتدائية في أي بطاقة ── */
.sk-num{display:inline-block;vertical-align:middle;border-radius:var(--radius-xs);max-width:100%}
.stat-fail{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--warning);background:var(--warning-soft);border-radius:var(--radius-md);font-size:var(--fs-sm);color:var(--ink)}
.stat-fail span{flex:1;min-width:180px}
.stat-fail .btn{min-height:var(--tap)}