/* ============================================================
   SIMS Design System — Components (المعتمد)
   File   : wwwroot/css/sims-components.css
   Depends: sims-tokens.css
   الأصناف منقولة من المعاينة المعتمدة كما هي.
   ============================================================ */

/* ---------- البطاقات ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh);position:relative;transition:background var(--dur),box-shadow var(--dur)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.1rem 1.4rem;border-block-end:1px solid var(--line)}
.card-t{margin:0;font-size:var(--fs-lg);font-weight:700;font-family:var(--font-display)}
.card-b{padding:1.4rem}
.card-f{display:flex;gap:.55rem;justify-content:flex-end;padding:.9rem 1.4rem;border-block-start:1px solid var(--line)}

/* بطاقة إحصائية */
.stat{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.3rem;overflow:hidden}
.stat::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:4px;background:linear-gradient(180deg,var(--primary-light),var(--primary-dark))}
.stat .ic{width:3.1rem;height:3.1rem;flex:0 0 auto;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));box-shadow:0 8px 18px rgba(var(--p-rgb),.35)}
.stat .v{font-family:var(--font-display);font-size:1.7rem;font-weight:700;line-height:1.25}
.stat .l{font-size:var(--fs-sm);color:var(--muted);font-weight:300}
.stat .tr{margin-inline-start:auto;font-size:var(--fs-xs);font-weight:500;padding:.18rem .6rem;border-radius:var(--full)}
.tr.up{background:var(--success-s);color:var(--success)}.tr.dn{background:var(--danger-s);color:var(--danger)}

/* ---------- الأزرار ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.4rem;border:1px solid transparent;border-radius:12px;font-family:var(--font-body);font-size:var(--fs-md);font-weight:500;cursor:pointer;transition:all var(--dur);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-p{color:var(--on-primary);background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));box-shadow:var(--sh-btn)}
.btn-p:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-lux{color:#241a02;background:var(--lux-grad);box-shadow:0 10px 24px rgba(212,175,55,.4)}
.btn-lux:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--primary);border-color:rgba(var(--p-rgb),.5)}
.btn-o:hover{background:rgba(var(--p-rgb),.07)}
.btn-g{background:transparent;color:var(--muted)}.btn-g:hover{background:var(--inset);color:var(--fg)}
.btn-d{background:linear-gradient(135deg,#E2455C,#8E1B27);color:#fff;box-shadow:0 8px 20px rgba(176,30,48,.35)}
.btn-suc{background:linear-gradient(135deg,#2FA867,#0E5C33);color:#fff;box-shadow:0 8px 20px rgba(21,122,69,.35)}
.btn-sm{padding:.35rem .85rem;font-size:var(--fs-sm);border-radius:10px}
.btn-lg{padding:.85rem 1.9rem;font-size:1.02rem;border-radius:14px}
.btn-block{display:flex;width:100%}
.btn.load{position:relative;color:transparent!important;pointer-events:none}
.btn.load::after{content:"";position:absolute;inset:0;margin:auto;width:1.05em;height:1.05em;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sims-spin .7s linear infinite}
@keyframes sims-spin{to{transform:rotate(360deg)}}
.iconbtn{width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--muted);cursor:pointer;transition:all var(--dur);box-shadow:var(--sh)}
.iconbtn:hover{color:var(--primary);border-color:var(--line-strong);transform:translateY(-1px)}
.iconbtn svg{width:1.15rem;height:1.15rem}

/* ---------- الشارات وحالات المحرك ---------- */
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .75rem;border-radius:var(--full);font-size:var(--fs-xs);font-weight:500;background:var(--inset);color:var(--muted);white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.badge.no-dot::before{display:none}
.b-pri{background:rgba(var(--p-rgb),.1);color:var(--primary)}
.b-suc{background:var(--success-s);color:var(--success)}
.b-warn{background:var(--warning-s);color:var(--warning)}
.b-dan{background:var(--danger-s);color:var(--danger)}
.b-inf{background:var(--info-s);color:var(--info)}
.badge[data-st="draft"]{background:var(--st-draft-s);color:var(--st-draft)}
.badge[data-st="submitted"]{background:var(--st-sub-s);color:var(--st-sub)}
.badge[data-st="under-inspection"]{background:var(--st-insp-s);color:var(--st-insp)}
.badge[data-st="passed"],.badge[data-st="passed-inspection"]{background:var(--st-pass-s);color:var(--st-pass)}
.badge[data-st="failed"],.badge[data-st="failed-inspection"]{background:var(--st-fail-s);color:var(--st-fail)}
.badge[data-st="awaiting-payment"]{background:var(--st-pay-s);color:var(--st-pay)}
.badge[data-st="paid"]{background:var(--st-paid-s);color:var(--st-paid)}
.badge[data-st="certified"]{background:var(--st-cert-s);color:var(--st-cert);border-color:rgba(212,175,55,.4)}
.badge[data-st="rejected"]{background:var(--st-rej-s);color:var(--st-rej)}
.badge[data-st="needs-re-inspection"]{background:var(--st-re-s);color:var(--st-re)}

/* ---------- التنبيهات و Toast ---------- */
.alert{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1.15rem;border-radius:var(--radius);font-size:var(--fs-sm);border:1px solid;border-inline-start-width:4px;margin-block-end:.8rem;background:var(--card);box-shadow:var(--sh)}
.a-suc{color:var(--success);border-color:var(--success-s);border-inline-start-color:var(--success)}
.a-warn{color:var(--warning);border-color:var(--warning-s);border-inline-start-color:var(--warning)}
.a-dan{color:var(--danger);border-color:var(--danger-s);border-inline-start-color:var(--danger)}
.a-inf{color:var(--info);border-color:var(--info-s);border-inline-start-color:var(--info)}
.alert .tx{color:var(--fg)} .alert b{color:inherit}
.alert .x{margin-inline-start:auto;background:none;border:0;color:var(--faint);cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem}

.toasts{position:fixed;inset-block-end:1.2rem;inset-inline-start:1.2rem;z-index:var(--z-toast);display:flex;flex-direction:column;gap:.55rem;max-width:min(350px,90vw)}
.toast{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;background:var(--elev);border:1px solid var(--line);border-inline-start:4px solid var(--primary);border-radius:var(--radius);box-shadow:var(--sh-lg);font-size:var(--fs-sm);animation:sims-in .28s var(--ease)}
.toast.suc{border-inline-start-color:var(--success)}
.toast.dan{border-inline-start-color:var(--danger)}
.toast.warn{border-inline-start-color:var(--warning)}
@keyframes sims-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1}}

/* ---------- النماذج ---------- */
label.fl{display:block;margin-block-end:.45rem;font-size:var(--fs-sm);font-weight:500}
label.fl .req{color:var(--danger)}
.fi{display:block;width:100%;padding:.68rem 1rem;background:var(--card);color:var(--fg);border:1px solid var(--line-strong);border-radius:12px;font-family:var(--font-body);font-size:.92rem;transition:all var(--dur)}
.fi:hover{border-color:rgba(var(--p-rgb),.45)}
.fi:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--p-rgb),.14)}
.fi:disabled{background:var(--inset);color:var(--muted);cursor:not-allowed}
textarea.fi{min-height:105px;resize:vertical}
select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2393A0B4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 1rem center;padding-inline-start:2.4rem;padding-inline-end:1rem}
[dir="ltr"] select.fi{background-position:right 1rem center}
.fi.bad{border-color:var(--danger)}.fi.bad:focus{box-shadow:0 0 0 4px var(--danger-s)}
.ferr{display:block;margin-block-start:.35rem;font-size:var(--fs-xs);color:var(--danger)}
.fhint{display:block;margin-block-start:.35rem;font-size:var(--fs-xs);color:var(--muted);font-weight:300}
.fg{margin-block-end:1.1rem}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 1.2rem}
.iwrap{position:relative}
.iwrap .fi{padding-inline-end:2.7rem}
.iwrap .iic{position:absolute;inset-inline-end:1rem;top:50%;transform:translateY(-50%);color:var(--faint);display:inline-flex;pointer-events:none}
.iwrap .iact{position:absolute;inset-inline-end:.7rem;top:50%;transform:translateY(-50%);background:none;border:0;padding:.25rem;color:var(--faint);cursor:pointer;display:inline-flex}
.iwrap .iact:hover{color:var(--fg)}

.check{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;font-size:var(--fs-sm)}
.check input{position:absolute;opacity:0}
.check .bx{width:1.2rem;height:1.2rem;flex:0 0 auto;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--card);display:inline-flex;align-items:center;justify-content:center;transition:all var(--dur)}
.check input[type="radio"]+.bx{border-radius:50%}
.check input:checked+.bx{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));border-color:var(--primary)}
.check input:checked+.bx::after{content:"";width:.33rem;height:.6rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.check input[type="radio"]:checked+.bx::after{width:.44rem;height:.44rem;border:0;border-radius:50%;background:#fff;transform:none}
.check input:focus-visible+.bx{box-shadow:0 0 0 3px rgba(var(--p-rgb),.3)}
.switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:var(--fs-sm)}
.switch input{position:absolute;opacity:0}
.switch .tk{width:2.7rem;height:1.45rem;flex:0 0 auto;background:var(--line-strong);border-radius:var(--full);position:relative;transition:background var(--dur)}
.switch .tk::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:1.1rem;height:1.1rem;background:#fff;border-radius:50%;transition:transform var(--dur);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.switch input:checked+.tk{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark))}
.switch input:checked+.tk::after{transform:translateX(-1.22rem)}
[dir="ltr"] .switch input:checked+.tk::after{transform:translateX(1.22rem)}
.switch input:focus-visible+.tk{box-shadow:0 0 0 3px rgba(var(--p-rgb),.3)}

/* ---------- القائمة القابلة للبحث (sims-select.js) ---------- */
.ssel{position:relative}
/* العنصر الأصلي يبقى في الصفحة ليُرسِله النموذج، ومخفيّاً ليظهر البديل الفاخر
   وحده. لا يكفي select.hidden في JS: قاعدة .fi{display:block} في ورقة المؤلّف
   تسبق [hidden] في متصفّح الشبكة، فيظهر الاثنان معاً (قائمتان متكرّرتان). */
.ssel>select{display:none}
.ssel-btn{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;text-align:start;cursor:pointer}
.ssel-btn .ph{color:var(--faint);font-weight:300}
.ssel-btn .chev{flex:0 0 auto;transition:transform var(--dur);color:var(--faint)}
.ssel.open .ssel-btn{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--p-rgb),.14)}
.ssel.open .ssel-btn .chev{transform:rotate(180deg)}
.ssel-panel{position:absolute;inset-inline:0;top:calc(100% + 8px);background:var(--elev);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-lg);z-index:var(--z-dropdown);display:none;overflow:hidden}
.ssel.open .ssel-panel{display:block}
.ssel-search{width:100%;border:0;border-block-end:1px solid var(--line);padding:.7rem 1rem;font-family:var(--font-body);font-size:var(--fs-sm);background:var(--elev);color:var(--fg)}
.ssel-search:focus{outline:none}
.ssel-list{max-height:240px;overflow-y:auto;padding:.35rem}
.ssel-opt{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .8rem;border-radius:9px;font-size:var(--fs-sm);cursor:pointer;transition:background .12s}
.ssel-opt:hover,.ssel-opt.hl{background:rgba(var(--p-rgb),.07)}
.ssel-opt.sel{background:rgba(var(--p-rgb),.12);color:var(--primary);font-weight:500}
.ssel-empty{padding:1rem;text-align:center;color:var(--faint);font-size:var(--fs-sm)}
.ssel.dis .ssel-btn{background:var(--inset);color:var(--muted);cursor:not-allowed;pointer-events:none}
.ssel.load .ssel-btn .chev{animation:sims-spin .8s linear infinite}

/* ---------- الجدول (sims-datatable.js) ---------- */
.dt{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh)}
.dt-top{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;padding:1rem 1.3rem;border-block-end:1px solid var(--line)}
.dt-len{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--muted)}
.dt-len select{padding:.35rem .6rem;border:1px solid var(--line-strong);border-radius:9px;background:var(--card);color:var(--fg);font-family:var(--font-b-lt)}
.dt-search{position:relative}
.dt-search input{padding:.55rem 1rem;padding-inline-start:2.4rem;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--fg);font-family:var(--font-body);font-size:var(--fs-sm);width:250px;max-width:60vw;transition:all var(--dur)}
.dt-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--p-rgb),.14)}
.dt-search svg{position:absolute;inset-inline-start:.85rem;top:50%;transform:translateY(-50%);width:.95rem;height:.95rem;color:var(--faint)}
.dt table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.dt th,.dt td{padding:.8rem 1.15rem;text-align:start;border-block-end:1px solid var(--line);vertical-align:middle}
.dt thead th{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;font-weight:500;font-size:.8rem;letter-spacing:.02em;white-space:nowrap;user-select:none;position:sticky;top:0;z-index:1}
.dt thead th.srt{cursor:pointer;padding-inline-end:1.7rem;position:relative}
.dt thead th.srt::after{content:"⇅";position:absolute;inset-inline-end:.65rem;color:rgba(255,255,255,.55);font-size:.7rem}
.dt thead th.srt.asc::after{content:"↑";color:var(--lux)}
.dt thead th.srt.desc::after{content:"↓";color:var(--lux)}
.dt tbody tr{transition:background .12s}
.dt tbody tr:hover{background:rgba(var(--p-rgb),.05)}
.dt tbody td.num{font-family:var(--font-b-lt)}
.dt-bot{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;padding:.9rem 1.3rem;font-size:var(--fs-xs);color:var(--muted)}
.dt-pages{display:flex;gap:.3rem}
.dt-pg{min-width:2.1rem;height:2.1rem;padding:0 .5rem;border:1px solid var(--line-strong);background:var(--card);color:var(--fg);border-radius:9px;font-family:var(--font-b-lt);font-size:var(--fs-sm);cursor:pointer;transition:all var(--dur)}
.dt-pg:hover{border-color:var(--primary);color:var(--primary)}
.dt-pg.on{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));border-color:transparent;color:var(--on-primary);box-shadow:0 4px 12px rgba(var(--p-rgb),.35)}
.dt-pg:disabled{opacity:.4;cursor:not-allowed}
/* ترقيمٌ من الخادم: نفس مظهر .dt-pg لكن على <a> (الجدول يُرقَّم في القاعدة لا
   في المتصفّح). الوسم رابطٌ لا زرّاً — فيلزمه توسيطٌ صريح، ولا تنطبق :disabled. */
a.dt-pg{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
a.dt-pg.off{opacity:.4;pointer-events:none}
.rowact{display:inline-flex;gap:.25rem}
.rowact .iconbtn{width:1.95rem;height:1.95rem;border:0;box-shadow:none;background:transparent}
.rowact .iconbtn:hover{background:rgba(var(--p-rgb),.09);transform:none}
.rowact .iconbtn svg{width:.95rem;height:.95rem}

/* ---------- التبويبات ---------- */
.tabs{display:flex;gap:.25rem;border-block-end:1px solid var(--line);margin-block-end:1.2rem;overflow-x:auto}
.tab{padding:.65rem 1.15rem;background:none;border:0;border-block-end:2px solid transparent;color:var(--muted);font-family:var(--font-body);font-size:var(--fs-md);font-weight:500;cursor:pointer;white-space:nowrap;transition:color var(--dur);text-decoration:none}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--primary);border-image:linear-gradient(90deg,var(--primary),var(--lux)) 1}
.tpanel{display:none}.tpanel.on{display:block}

/* ---------- مسار الطلب ---------- */
.stepper{display:flex;list-style:none;margin:0 0 1.2rem;padding:0;overflow-x:auto}
.step{flex:1;min-width:108px;position:relative;text-align:center;padding-block-start:2.5rem;font-size:var(--fs-xs);color:var(--muted);font-weight:300}
.step::before{content:attr(data-n);position:absolute;top:0;inset-inline-start:50%;transform:translateX(50%);width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--line-strong);border-radius:50%;font-weight:700;font-family:var(--font-b-lt);z-index:1;transition:all var(--dur)}
[dir="ltr"] .step::before{transform:translateX(-50%)}
.step::after{content:"";position:absolute;top:.9rem;inset-inline-start:-50%;width:100%;height:2px;background:var(--line-strong)}
.step:first-child::after{display:none}
.step.done{color:var(--fg)}
.step.done::before{content:"✓";background:linear-gradient(135deg,#2FA867,#0E5C33);border-color:transparent;color:#fff}
.step.done::after{background:var(--success)}
.step.cur{color:var(--primary);font-weight:500}
.step.cur::before{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));border-color:transparent;color:var(--on-primary);box-shadow:0 0 0 5px rgba(var(--p-rgb),.18),0 6px 14px rgba(var(--p-rgb),.35)}
.step.cur::after{background:var(--success)}
.step.rej::before{content:"✕";background:linear-gradient(135deg,#E2455C,#8E1B27);border-color:transparent;color:#fff}

/* ---------- الحوار ---------- */
.modal-bd{position:fixed;inset:0;background:rgba(5,10,22,.6);backdrop-filter:blur(4px);z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:1rem}
.modal-bd.open{display:flex}
.modal{width:100%;max-width:540px;max-height:88vh;display:flex;flex-direction:column;background:var(--elev);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-lg);animation:sims-in .24s var(--ease);overflow:hidden}
.modal-sm{max-width:400px}.modal-lg{max-width:860px}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.5rem;border-block-end:1px solid var(--line);background:linear-gradient(90deg,rgba(var(--p-rgb),.07),transparent)}
.modal-h h3{margin:0;font-size:var(--fs-lg)}
.modal-b{padding:1.5rem;overflow:auto}
.modal-f{display:flex;justify-content:flex-end;gap:.55rem;padding:1rem 1.5rem;border-block-start:1px solid var(--line)}

/* ---------- الحالة الفارغة / مسار التنقل / الترقيم ---------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:2.8rem 1rem;text-align:center;color:var(--muted)}
.empty .ic{width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--primary);background:rgba(var(--p-rgb),.09);box-shadow:0 0 0 8px rgba(var(--p-rgb),.04)}
.empty .et{font-family:var(--font-display);font-weight:700;color:var(--fg);font-size:1.05rem}

.crumb{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0 0 1.2rem;padding:0;font-size:var(--fs-sm);color:var(--muted)}
.crumb li:not(:last-child)::after{content:"‹";margin-inline-start:.55rem;color:var(--faint)}
[dir="ltr"] .crumb li:not(:last-child)::after{content:"›"}
.crumb li:last-child{color:var(--fg);font-weight:500}

/* ---------- القوائم المنسدلة العامة (ترويسة) ---------- */
.dd{position:relative;display:inline-block}
.ddm{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:190px;background:var(--elev);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-lg);padding:.3rem;display:none;z-index:var(--z-dropdown)}
.dd.open .ddm{display:block}
.ddi{display:flex;align-items:center;gap:.55rem;width:100%;padding:.55rem .85rem;background:none;border:0;border-radius:9px;color:var(--fg);font-family:var(--font-body);font-size:var(--fs-sm);cursor:pointer;text-align:start;transition:background .12s;text-decoration:none}
.ddi:hover{background:var(--inset)}
.ddi.on{background:rgba(var(--p-rgb),.1);color:var(--primary);font-weight:500}
.dd-sep{border:0;border-top:1px solid var(--line);margin:.3rem 0}
.cdot{width:.95rem;height:.95rem;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line-strong)}

/* ---------- مساعدات ---------- */
.page-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-block-end:1.5rem}
.page-h .pt{margin:0;font-size:var(--fs-xl)}
.page-h .ps{color:var(--muted);font-size:var(--fs-sm);font-weight:300;margin:.15rem 0 0}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-block-end:1rem}
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---------- شريط مرشِّحات (قوائم الخادم الطويلة) ----------
   أعمدةٌ صريحة لا auto-fit: مع auto-fit تتفاوت أعداد الأعمدة بعرض الحاوية،
   فتترك ستّة حقولٍ صفّاً من خمسةٍ وحقلاً وحيداً معلّقاً. ثلاثة/اثنان/واحد
   حسب العرض تعطي صفوفاً متساوية دائماً. المحاذاة من الأعلى (start) لا الأسفل:
   حقلٌ تحته تلميح أطولُ من جيرانه، ومحاذاةُ الأسفل كانت ترفع صندوقه فوق سطر
   بقيّة الصناديق. */
.filters{display:grid;gap:.9rem 1.1rem;align-items:start;grid-template-columns:1fr}
@media (min-width:640px){.filters{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.filters{grid-template-columns:repeat(3,1fr)}}
.filters .fg{margin-block-end:0}
.filters-act{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-block-start:1.1rem}
.skeleton{background:linear-gradient(90deg,var(--inset) 25%,var(--line) 50%,var(--inset) 75%);background-size:200% 100%;animation:sims-skel 1.4s ease infinite;border-radius:10px;color:transparent}
@keyframes sims-skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- أيقونة الوضع (مشتركة: اللوحة وصفحة الدخول) ---------- */
[data-mode-icon] .i-sun{display:none}
[data-mode-icon="dark"] .i-sun{display:inline-flex}
[data-mode-icon="dark"] .i-moon{display:none}

/* ---------- مركز سير العمل: المعالج والمعاينة ---------- */
.stack{display:flex;flex-direction:column;gap:.7rem;margin-block:.8rem}
.wiz-row{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .8rem}
.wiz-row .fi{margin:0}
.wiz-num{width:1.7rem;height:1.7rem;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line-strong);border-radius:50%;font-size:var(--fs-xs);font-weight:700;font-family:var(--font-b-lt);color:var(--muted)}
.wiz-step{grid-template-columns:1fr auto auto auto}
.doc-row{display:flex;align-items:center;gap:.7rem;background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .9rem}
.flow-preview{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.flow-node{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;background:var(--card);border:2px solid var(--line);border-radius:var(--full);font-size:var(--fs-sm);font-weight:500}
.flow-node.start{border-color:var(--lux)}
.flow-node.final{border-color:var(--success)}
.flow-arrow{display:inline-flex;flex-direction:column;align-items:center;color:var(--muted);font-size:var(--fs-xs);min-width:3.2rem}
.flow-arrow b{font-weight:600;color:var(--primary)}
.flow-arrow.auto b{color:var(--lux)}

/* ---------- مركز سير العمل: القائمة ---------- */
.wf-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-block-end:1rem}
.wf-card{max-width:1080px;margin-block-start:1rem}
.wf-card-h{display:flex;align-items:center;gap:.5rem}
.wf-key{font-size:.7rem;color:var(--faint)}
.wf-retag{color:var(--lux);font-size:.7rem;margin-inline-start:.3rem}
.btn-xs{padding:.35rem .8rem}
.inline-form{display:inline}


/* ===== منقول ليتوفّر في _AuthLayout (صفحة التحقّق) ===== */
.kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 1.4rem;
    margin: 0;
}

    .kv > div {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        min-inline-size: 0;
    }

    .kv dt {
        color: var(--faint);
        font-size: .75rem;
    }

    .kv dd {
        margin: 0;
        color: var(--fg);
        font-size: var(--fs-sm);
        overflow-wrap: anywhere;
    }

.kv-wide {
    grid-column: 1 / -1;
}

.pre {
    white-space: pre-wrap;
}


/* =========================================================
   صفحة التحقّق العمومية من الرخصة
   ========================================================= */
.vfy {
    inline-size: min(660px, 100%);
    margin-inline: auto;
}

.vfy-sub {
    margin-block: .4rem 1.2rem;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.vfy-form {
    display: flex;
    gap: .5rem;
    margin-block-end: 1.2rem;
}

    .vfy-form .fi {
        flex: 1;
        min-inline-size: 0;
    }

/* شارة الحالة: الحكم أولاً وأكبر ما في الصفحة */
.vfy-status {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    margin-block-end: 1rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

    .vfy-status svg {
        inline-size: 22px;
        block-size: 22px;
        max-inline-size: 22px;
        max-block-size: 22px;
        flex: 0 0 auto;
    }

    .vfy-status.ok {
        border-color: var(--success);
        background: var(--success-s);
        color: var(--success);
    }

    .vfy-status.bad {
        border-color: var(--danger);
        background: var(--danger-s);
        color: var(--danger);
    }

.vfy-qr {
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
}

    .vfy-qr img {
        border-radius: var(--radius-sm);
    }


/* ===== محرّر الخطوات المبسّط: سلسلة صفوف مرتّبة ===== */
.lstep {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    margin-block-end: .5rem;
}

    .lstep.dragging {
        opacity: .5;
    }

    .lstep-h {
        cursor: grab;
        color: var(--muted);
        font-size: 1.1rem;
        user-select: none;
        flex: 0 0 auto;
    }

    .lstep-n {
        inline-size: 1.6rem;
        block-size: 1.6rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--inset);
        color: var(--fg);
        font-size: var(--fs-sm);
        flex: 0 0 auto;
    }

    .lstep .js-name {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .lstep .js-appr {
        flex: 0 0 auto;
        inline-size: 12rem;
        max-inline-size: 40%;
    }

    .lstep-arrow {
        color: var(--muted);
        flex: 0 0 auto;
    }

/* ===== خطوة مثبّتة في محرّر الخطوات (التقديم): للقراءة فقط ===== */
.lstep-locked {
    background: var(--inset);
    border-style: dashed;
}

    .lstep-pin {
        cursor: default;
        opacity: .7;
    }

    .lstep-owner-ro {
        display: inline-flex;
        align-items: center;
        inline-size: 12rem;
        max-inline-size: 40%;
        color: var(--muted);
        flex: 0 0 auto;
    }

    .lstep-pinhint {
        color: var(--faint);
        font-size: var(--fs-sm);
        flex: 0 0 auto;
    }

    .lstep-locked .js-name[readonly] {
        color: var(--muted);
        cursor: default;
    }

/* ===== نوع الخطوة في المحرّر ===== */
.lstep .js-type {
    flex: 0 0 auto;
    inline-size: 10rem;
    max-inline-size: 30%;
}

.lstep-type-ro {
    display: inline-flex;
    align-items: center;
    inline-size: 10rem;
    max-inline-size: 30%;
    color: var(--muted);
    flex: 0 0 auto;
}

/* ===== صندوق الإيقاف في صندوق الوارد ===== */
.hold-box .hold-reason {
    margin-block: .5rem;
    font-weight: 600;
    color: var(--fg);
}

/* ===== صفحة التحقّق العامّة من التقرير ===== */
.verify-body { display: flex; min-block-size: 100vh; align-items: center; justify-content: center; background: var(--inset); margin: 0; }
.verify-card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 2rem; max-inline-size: 30rem; inline-size: 92%; }
.verify-h { margin-block-start: 0; }
.verify-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; }
.verify-dl dt { color: var(--muted); }
.verify-dl dd { margin: 0; font-weight: 600; }

/* ===== استمارة الفحص: مجموعة بنود وخانات تأشير ===== */
.lux-form { max-inline-size: 44rem; }
.lux-fieldset { border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.25rem; margin-block: 1rem; }
.lux-fieldset legend { padding-inline: .5rem; color: var(--muted); font-weight: 600; }
.chk { display: flex; align-items: center; gap: .6rem; padding-block: .4rem; cursor: pointer; }
.chk input { inline-size: 1.1rem; block-size: 1.1rem; }

/* ===== صفحة تفاصيل الطلب ===== */
.det-sec { border-block-start: 1px solid var(--line); padding-block-start: 1rem; margin-block-start: .5rem; }
.det-sec:first-of-type { border-block-start: 0; }
.det-h { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 .6rem; font-weight: 700; }
.det-dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.det-dl dt { color: var(--muted); font-size: var(--fs-sm); }
.det-dl dd { margin: 0; font-weight: 600; }
.det-list { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
.det-list li { padding-block: .2rem; }
@media (max-width: 40rem) { .det-dl { grid-template-columns: 1fr; gap: .1rem .5rem; } .det-dl dd { margin-block-end: .5rem; } }

/* ===== مرشِّحات متابعة الطلبات ===== */
.ov-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.ov-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem;
    border: 1px solid var(--line); border-radius: 2rem; color: var(--muted);
    text-decoration: none; font-size: var(--fs-sm); background: var(--card); }
.ov-tab:hover { border-color: var(--lux); color: var(--fg); }
.ov-tab.on { background: var(--lux); color: var(--card); border-color: var(--lux); font-weight: 600; }
.ov-n { font-size: .75em; opacity: .85; }

/* ===== إجراءات صفحة التفاصيل ===== */
.det-actions form { margin-block: .75rem; padding-block-end: .75rem; border-block-end: 1px dashed var(--line); }
.det-actions form:last-child { border-block-end: 0; }
.btn-xs { padding: .2rem .55rem; font-size: .78rem; margin-inline-start: .5rem; }
.det-danger .fi { border-color: var(--danger); }

/* ===== توقيع الموظف ===== */
.sig-box { border: 1px solid var(--line); border-radius: .5rem; padding: .75rem; background: #fff; display: inline-block; margin-block-start: .5rem; }
.sig-img { max-block-size: 90px; max-inline-size: 320px; display: block; }

/* ===== إجراءات استثنائية + مدد + نوافذ ===== */
.det-exceptions { margin-block-start: 1rem; padding-block-start: .75rem; border-block-start: 1px dashed var(--line); }
.det-dur { margin: 0 0 .6rem; }
.det-chip { display: inline-block; margin-inline-start: .5rem; padding: .1rem .5rem;
    border-radius: 1rem; background: var(--inset); color: var(--muted); font-size: .75rem; }

/* زرّ تحذيريّ واضح — لا رماديّ منطفئ */
.btn-w { background: var(--warn, #b8860b); color: #fff; border-color: transparent; }
.btn-w:hover { filter: brightness(1.08); }



/* ---------- البحث برقم الوثيقة في الشريط العلويّ ----------
   يُخفى على الشاشات الضيّقة: الشريط هناك للعنوان وزرّ القائمة، والبحث يبقى
   متاحاً بصفحته. */
.tb-find input{width:230px}
@media (max-width:900px){.tb-find{display:none}}


/* ==========================================================================
   مخطّط أضرار تقرير الحادث
   --------------------------------------------------------------------------
   النقاط تُوضَع بالنسبة المئويّة لا بالبكسل: المخطّط يُعرَض بعرضٍ يتبع
   الشاشة، وفي الـPDF بعرضٍ ثالث. فالموضع يُخزَّن نسبةً وتُقرأ هنا نسبةً،
   فلا تزيح النقطةُ عن القطعة التي أُشير إليها مهما تغيّر المقاس.
   ========================================================================== */
.dmg-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 1.2rem; }
@media (max-width: 900px) { .dmg-grid { grid-template-columns: 1fr; } }

.dmg-stage { position: relative; inline-size: 100%; background: #fff; border: 1px solid var(--line-strong);
    border-radius: var(--radius); overflow: hidden; }
.dmg-stage.armed { cursor: crosshair; }
.dmg-stage img { display: block; inline-size: 100%; block-size: auto; user-select: none; -webkit-user-drag: none; }
.dmg-stage .dmg-none { display: grid; place-items: center; min-block-size: 220px; padding: 1.5rem;
    color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* الدبّوس: يسار/أعلى فيزيائيّان عمداً — النسبة تُقاس من حافّة الصورة اليسرى
   في الاتجاهين، فلو استعملنا inset-inline-start لانعكست النقاط في العربيّة. */
.dmg-pin { position: absolute; transform: translate(-50%, -50%); inline-size: 22px; block-size: 22px;
    border-radius: var(--full); display: grid; place-items: center; font-size: 11px; font-weight: 600;
    color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
    font-family: var(--font-latin, inherit); }
.dmg-pin[data-side="Responsible"] { background: #B01E30; }
.dmg-pin[data-side="Affected"]    { background: #0E5AA7; }
.dmg-pin[data-side="General"]     { background: #5D6B82; }
.dmg-pin[data-sev="High"] { inline-size: 27px; block-size: 27px; box-shadow: 0 0 0 4px rgba(176,30,48,.25), 0 1px 4px rgba(0,0,0,.35); }
.dmg-pin[data-sev="Low"]  { inline-size: 18px; block-size: 18px; font-size: 10px; }
.dmg-pin.sel { outline: 3px solid var(--primary); outline-offset: 2px; }

.dmg-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-block-start: .7rem; font-size: var(--fs-xs); color: var(--muted); }
.dmg-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dmg-legend i { inline-size: 11px; block-size: 11px; border-radius: var(--full); display: inline-block; }

.dmg-side { display: flex; gap: .4rem; margin-block-end: .8rem; }
.dmg-side label { flex: 1; text-align: center; padding: .5rem .3rem; border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); transition: all var(--dur); }
.dmg-side input { position: absolute; opacity: 0; pointer-events: none; }
.dmg-side input:checked + span { font-weight: 600; }
.dmg-side label:has(input:checked) { border-color: var(--primary); background: var(--inset); color: var(--primary); }

.dmg-rows { display: flex; flex-direction: column; gap: .5rem; max-block-size: 460px; overflow-y: auto; }
.dmg-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: .5rem; align-items: center;
    padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--inset); }
.dmg-row .n { inline-size: 22px; block-size: 22px; border-radius: var(--full); display: grid; place-items: center;
    color: #fff; font-size: 11px; font-weight: 600; }
.dmg-row .who { font-size: var(--fs-xs); color: var(--muted); }
.dmg-row .fi { padding: .35rem .5rem; font-size: .78rem; border-radius: 8px; }
.dmg-row .two { display: grid; grid-template-columns: 1.55fr 1fr; gap: .35rem; margin-block-start: .35rem; }
.dmg-empty { padding: 1.4rem; text-align: center; color: var(--muted); font-size: var(--fs-sm);
    border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* حاوية نموذجٍ تُقفَل جملةً واحدة: fieldset[disabled] يعطّل كلّ ما بداخله
   بما فيه الأزرار، فالتقرير المعتمَد لا يُعدَّل من الواجهة أصلاً — والخدمة
   ترفضه ثانيةً على الخادم، فالمنعُ في الطبقتين. */
.fset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }

/* مدىً في حقلٍ واحد (من/إلى): أربعة مرشِّحاتٍ لا تسع شبكةَ الثلاثة، فيجمع
   طرفا المدى في خانةٍ واحدة — وهما شيءٌ واحد في ذهن الموظّف أصلاً. */
.fpair { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

/* قوائم صفوف النقاط: الحشوة المختصرة تسحب حشوةَ السهم فيركب على النصّ. */
.dmg-row select.fi { padding-inline-start: 1.9rem; }

/* ==========================================================================
   نقطةٌ لم تُسمَّ بعد
   --------------------------------------------------------------------------
   كانت النقطة تُسمّى نيابةً عن المحرّر بأوّل قطعةٍ في القائمة، فيُطبع على
   وثيقةٍ رسميّة اسمُ قطعةٍ لم يقصدها أحد. صارت تُولَد بلا اسم — ولأنّ
   الفراغ لا يُرى، وجب أن يُرى: الدبّوس مخطَّطٌ مقطَّع لا مصمَت، والصفّ
   محاطٌ بحدٍّ محذِّر، وفوق القائمة سطرٌ يعدّ ما بقي. فلا يصل المحرّر إلى
   زرّ الاعتماد وهو يظنّ أنّه أتمّ.
   ========================================================================== */
.dmg-pin.unnamed { background: #fff; color: var(--danger); border-style: dashed;
    border-color: var(--danger); box-shadow: 0 0 0 3px rgba(176,30,48,.20), 0 1px 4px rgba(0,0,0,.25); }
.dmg-pin.unnamed[data-sev="High"] { box-shadow: 0 0 0 5px rgba(176,30,48,.22), 0 1px 4px rgba(0,0,0,.25); }

.dmg-row.unnamed { border-color: var(--danger); background: var(--danger-s); }
.dmg-row.unnamed select[data-f="part"] { border-color: var(--danger); }

/* الوقوف على الدبّوس يُبرز صفَّه والعكس: النقطة الثالثة عشرة لا تُعدّ بالإصبع. */
.dmg-row.sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--inset); }

.dmg-warn { margin-block: .2rem .6rem; padding: .5rem .7rem; border-radius: var(--radius-sm);
    background: var(--danger-s); border: 1px solid var(--danger);
    color: var(--danger); font-size: var(--fs-xs); font-weight: 600; }

/* ==========================================================================
   تقرير الحادث: الطرفان متجاوران
   --------------------------------------------------------------------------
   كانا في النظام السابق كتلتين متعاقبتين، فيملأ المحرِّرُ الأولى ثمّ ينزل
   شاشتين ليقارن. وهما في الواقعة شيءٌ واحد يُقارَن: وسيلتان تصادمتا. فصارا
   عمودين متجاورين بلونين لا يلتبسان — وهما لونا دبابيس الضرر أنفسهما، فلا
   يحتاج المحرِّر إلى حفظ أيّ لونٍ لأيّ طرف.
   ========================================================================== */
.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .party-grid { grid-template-columns: 1fr; } }

.party { overflow: hidden; }
.party-h { padding: .7rem 1.1rem; border-block-end: 1px solid var(--line); }
.party-t { margin: 0; font-size: var(--fs-md, 1rem); font-weight: 700; color: #fff; }
.party.resp .party-h { background: #B01E30; }
.party.aff  .party-h { background: #0E5AA7; }
.party.resp { border-color: rgba(176,30,48,.35); }
.party.aff  { border-color: rgba(14,90,167,.35); }

/* داخل عمودٍ نصفيّ لا تتّسع الشبكة لثلاثة حقول — حقلان بحدّ أدنى معقول. */
.party .frow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* «نعم/لا» — خياران ظاهران لا خانةُ تأشيرٍ صامتة تُقرأ «لا» وهي «لم يُملأ». */
.yn { display: flex; gap: .5rem; margin-block-start: .15rem; }
.yn label { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .45rem .3rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--fs-sm); transition: all var(--dur); }
.yn input { position: absolute; opacity: 0; pointer-events: none; }
.yn label:has(input:checked) { border-color: var(--primary); background: var(--inset);
    color: var(--primary); font-weight: 600; }
fieldset[disabled] .yn label { cursor: default; }

/* أزرار جانب الضرر تأخذ لون جانبها حين تُختار — لا لوناً واحداً للثلاثة. */
.dmg-side label.resp:has(input:checked) { border-color: #B01E30; color: #B01E30; background: rgba(176,30,48,.08); }
.dmg-side label.aff:has(input:checked)  { border-color: #0E5AA7; color: #0E5AA7; background: rgba(14,90,167,.08); }
.dmg-side label.gen:has(input:checked)  { border-color: #5D6B82; color: #5D6B82; background: rgba(93,107,130,.10); }

/* ==========================================================================
   شريطُ تقدّمٍ لمهمّةٍ في الخلفيّة
   --------------------------------------------------------------------------
   عملٌ طويلٌ بلا مؤشّرٍ يُقرأ كأنّه معلَّق. كانت ترجمةُ التعريفات تستغرق
   ساعاتٍ داخل نقرةٍ صامتة، فصارت مهمّةً في الخلفيّة — وهذا وجهُها.
   ========================================================================== */
.trbar { block-size: .5rem; background: var(--inset); border-radius: var(--full);
    overflow: hidden; display: flex; }
.trbar-fill { background: linear-gradient(90deg, var(--primary), var(--lux));
    border-radius: var(--full); min-inline-size: 2px; flex: 0 0 auto;
    transition: inline-size .4s var(--ease); }