/* IT Hub — نظام IT Hub للدعم والأصول التقنية
   كل لون وقياس هنا. لا تكتب قيمة لون خام في أي قاعدة أخرى. */
:root{
  /* ===== ألوان هوية IT Hub (من ملفات العلامة) ===== */
  --brand-navy:#0F1828;
  --brand-bronze:#8F795C;
  --brand-blue:#001757;

  /* ===== الأسطح ===== */
  --ink:var(--brand-navy);
  --ink-2:#1B2942;
  --ink-3:#2A3B57;
  --ink-line:#243550;
  --canvas:#F2F1EE;
  --surface:#FFFFFF;
  --surface-2:#FAF9F7;
  --surface-3:#F5F3EF;
  --surface-4:#F0EEE9;
  --line:#DFDBD3;
  --line-soft:#EBE8E2;
  --line-strong:#CFC9BE;

  /* ===== النص ===== */
  --text:#16202E;
  --muted:#6A6F78;
  --muted-2:#8A8F98;
  --on-dark:#FFFFFF;
  --on-dark-soft:#C6CDD8;
  --on-dark-muted:#8B96A6;

  /* ===== لون العلامة التفاعلي =====
     البرونزي للتعبئة والحدود؛ النسخة الداكنة للنص لتحقيق تباين AA على الأبيض. */
  --accent:var(--brand-bronze);
  /* هذا اللون يُنسَخ حرفياً خارج CSS في موضعين لا يقرآن المتغيّرات:
     <meta name="theme-color"> في الواجهات، و brand/ithub-favicon-v2.svg.
     كان قد انحرف إلى #6B5744 فاختلف لون شريط المتصفح عن لون الزرّ.
     أي تغيير هنا يجب أن ينعكس هناك — و tests/contrast.php يمنع الانحراف. */
  --accent-ink:#6B5942;
  --accent-soft:#F5F1EA;
  --accent-line:#DCD2C2;

  /* ===== ألوان الحالة ===== */
  --info:#1C4E8A;      --info-soft:#E7EFFA;   --info-line:#C9DCF2;
  --amber:#8F5A08;     --amber-soft:#FBF2E0;  --amber-line:#EFD9AE;
  --red:#B3261E;       --red-soft:#FBE8E6;    --red-line:#F0CBC7;
  --red-ink:#8A1C16;   --red-line-2:#E7C4C0;
  --green:#12572F;     --green-soft:#E4F3EA;  --green-line:#C3E4D2;
  --violet:#59477F;    --violet-soft:#EFEBF7; --violet-line:#D8D0EC;
  --violet-ink:#3E3162;
  --warn:#E8892B;      --warn-soft:#FFF4E5;   --warn-ink:#6B4415;
  --neutral-soft:#EEF1F5; --neutral-line:#C8D3DE; --neutral-ink:#33455A;
  --slate:#7A8A9B;     --slate-2:#C3CEDA;

  /* ===== كتل الشيفرة ===== */
  --code-bg:#1E1B2E;   --code-text:#E6E1FF;

  /* ===== القياسات ===== */
  --radius:5px;
  --radius-lg:8px;
  --shadow:0 1px 2px rgba(15,24,40,.06), 0 6px 18px -12px rgba(15,24,40,.35);
  --shadow-lg:0 2px 6px rgba(15,24,40,.08), 0 18px 40px -24px rgba(15,24,40,.45);
  --sans:"IBM Plex Sans Arabic","IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --focus:var(--accent-ink);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--canvas);color:var(--text);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:16px}
small{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:8px;top:8px;background:var(--surface);padding:8px;z-index:10}

/* ===== الهيكل ===== */
.shell{display:flex;min-height:100vh}
.sidebar{width:250px;flex:0 0 250px;background:var(--ink);color:var(--on-dark-soft);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.main{flex:1;min-width:0;padding:22px 26px 60px}
.brand{display:flex;flex-direction:column;gap:10px;padding:16px 16px 14px;border-radius:var(--radius);text-decoration:none}
.brand:hover{text-decoration:none}
.brand:hover .brand-plate{box-shadow:0 0 0 2px var(--accent)}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.brand-plate{transition:box-shadow .12s ease}
.brand-plate{background:var(--surface);border-radius:var(--radius-lg);padding:10px 12px;display:block}
.brand-plate img{display:block;width:100%;height:auto;max-height:42px;object-fit:contain}
.brand-text{display:flex;flex-direction:column;color:var(--on-dark);font-weight:600;line-height:1.3;font-size:14px}
.brand-text small{color:var(--on-dark-muted);font-size:11.5px;font-weight:400}
.brand-lg .brand-plate{padding:0;background:none}
.brand-lg .brand-plate img{max-height:64px;margin-inline:auto}
.nav{display:flex;flex-direction:column;gap:1px;padding:8px}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius);color:var(--on-dark-soft);font-size:14px;border-inline-start:3px solid transparent}
.nav-link:hover{background:var(--ink-2);color:var(--on-dark);text-decoration:none}
.nav-link.is-active{background:var(--ink-2);color:var(--on-dark);border-inline-start-color:var(--accent)}
.nav-icon{font-size:13px;color:var(--on-dark-muted);width:16px;text-align:center}
.nav-link.is-active .nav-icon{color:var(--accent)}
.nav-sep{margin:14px 12px 6px;font-size:11px;color:var(--on-dark-muted);letter-spacing:.06em}
.sidebar-foot{margin-top:auto;padding:12px;border-top:1px solid var(--ink-line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.who{display:flex;align-items:center;gap:9px;color:var(--on-dark-soft);font-size:13px}
.who:hover{text-decoration:none;color:var(--on-dark)}
.who small{display:block;color:var(--on-dark-muted);font-size:11px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ink-3);display:grid;place-items:center;color:var(--on-dark);font-weight:600}
.link-btn{background:none;border:0;color:var(--on-dark-muted);cursor:pointer;font-family:inherit;font-size:12.5px;padding:4px}
.link-btn:hover{color:var(--on-dark);text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.topbar h1{font-size:20px}
.topbar-actions{display:flex;gap:8px}

/* ===== لوحات وجداول ===== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.panel-body{padding:16px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

table{width:100%;border-collapse:collapse}
th,td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line-soft);vertical-align:middle}
th{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;background:var(--surface-3);border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.num,.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.02em}
.table-wrap{overflow-x:auto}
.th-sort{padding:0}
.th-sort a{display:flex;align-items:center;gap:5px;padding:10px 14px;color:inherit;text-decoration:none;white-space:nowrap}
.th-sort a:hover{background:var(--surface-4);color:var(--ink)}
.th-sort.is-sorted a{color:var(--accent-ink)}
.sort-arrow{font-size:9px;line-height:1}
.row-rail td:first-child{border-inline-start:3px solid transparent}
tr[data-rail="urgent"] td:first-child{border-inline-start-color:var(--red)}
tr[data-rail="high"] td:first-child{border-inline-start-color:var(--amber)}
tr[data-rail="normal"] td:first-child{border-inline-start-color:var(--line)}
tr[data-rail="low"] td:first-child{border-inline-start-color:var(--slate-2)}

/* ===== المؤشرات ===== */
.pill{display:inline-block;padding:2px 9px;border-radius:100px;font-size:12px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.pill-new{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.pill-open{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.pill-pending{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.pill-resolved,.pill-active,.pill-assigned{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.pill-closed,.pill-retired,.pill-cancelled,.pill-in_stock{background:var(--neutral-soft);color:var(--muted);border-color:var(--line)}
.pill-urgent,.pill-lost,.pill-expired{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
.pill-high,.pill-repair{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.pill-normal{background:var(--neutral-soft);color:var(--muted);border-color:var(--line)}
.pill-low{background:var(--surface-4);color:var(--slate);border-color:var(--line)}
.pill-admin{background:var(--violet-soft);color:var(--violet);border-color:var(--violet-line)}
.pill-agent{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.pill-user{background:var(--neutral-soft);color:var(--muted);border-color:var(--line)}
.pill-it{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.dim{color:var(--muted)}
.warn-text{color:var(--amber);font-weight:500}
.danger-text{color:var(--red);font-weight:500}

/* ===== بطاقات الأرقام ===== */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;border-inline-start:3px solid var(--accent);box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--mono);font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-.03em}
.stat span{font-size:12.5px;color:var(--muted)}
.stat--red{border-inline-start-color:var(--red)} .stat--red b{color:var(--red)}
.stat--amber{border-inline-start-color:var(--amber)} .stat--amber b{color:var(--amber)}
.stat--green{border-inline-start-color:var(--green)}
.stat--violet{border-inline-start-color:var(--violet)}
.stat a{color:inherit}
.stat-sub{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:.85}

/* ===== نماذج ===== */
.stack{display:flex;flex-direction:column;gap:13px}
label{display:block;font-size:13px;font-weight:500;color:var(--neutral-ink)}
input,select,textarea{width:100%;padding:8px 10px;margin-top:5px;border:1px solid var(--neutral-line);border-radius:var(--radius);font-family:inherit;font-size:14px;background:var(--surface);color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:0}
textarea{min-height:110px;resize:vertical;line-height:1.7}
input[type=checkbox]{width:auto;margin:0 0 0 6px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.field-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.hint{font-size:12px;color:var(--muted);font-weight:400;margin-top:4px;display:block}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 14px}
legend{font-size:12px;color:var(--muted);padding:0 6px}

.btn{display:inline-block;padding:8px 14px;border-radius:var(--radius);border:1px solid var(--neutral-line);background:var(--surface);color:var(--text);font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;text-align:center}
.btn:hover{background:var(--surface-3);text-decoration:none}
.btn-primary{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--on-dark)}
.btn-primary:hover{background:var(--brand-navy);border-color:var(--brand-navy)}
.btn-danger{color:var(--red);border-color:var(--red-line-2)}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:4px 9px;font-size:12.5px}
.btn-block{width:100%}
.btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:end;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.filters label{font-size:11.5px;color:var(--muted)}
.filters input,.filters select{margin-top:3px;padding:6px 9px;font-size:13px}
.filters .grow{flex:1;min-width:180px}

/* ===== رسائل ===== */
.flash{padding:10px 14px;border-radius:var(--radius);margin-bottom:14px;font-size:13.5px;border-inline-start:3px solid}
.flash-success{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.flash-error{background:var(--red-soft);border-color:var(--red);color:var(--red-ink)}
.flash-info{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.empty-state{padding:44px 20px;text-align:center;color:var(--muted)}
.err-code{font-family:var(--mono);font-size:44px;color:var(--line);font-weight:500}

/* ===== المحادثة داخل التذكرة ===== */
.thread{display:flex;flex-direction:column;gap:12px;padding:16px}
.msg{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--surface)}
.msg-head{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.msg-body{white-space:pre-wrap;line-height:1.75}
.msg--internal{background:var(--amber-soft);border-color:var(--amber-line)}
.msg--staff{border-inline-start:3px solid var(--accent)}
.meta-list{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px;padding:16px}
.meta-list dt{color:var(--muted);font-size:12.5px}
.meta-list dd{margin:0}
.file-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:5px 9px;font-size:12.5px;margin:0 0 6px 6px;background:var(--surface-2)}

/* ===== الخزنة ===== */
.secret{font-family:var(--mono);font-size:13px;background:var(--surface-3);border:1px dashed var(--neutral-line);border-radius:var(--radius);padding:5px 9px;display:inline-block;min-width:150px;letter-spacing:.02em;user-select:all}
.secret--hidden{color:var(--muted);letter-spacing:.25em;user-select:none}
.vault-note{background:var(--violet-soft);border-inline-start:3px solid var(--violet);padding:10px 14px;font-size:13px;border-radius:var(--radius);margin-bottom:16px;color:var(--violet-ink)}

/* ===== الدخول ===== */
.login-body{display:grid;place-items:center;min-height:100vh;background:var(--ink);background-image:radial-gradient(circle at 25% 15%, var(--ink-3) 0, transparent 55%)}
.login-card{width:min(400px,92vw);background:var(--surface);border-radius:8px;padding:28px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.brand-lg{padding:0 0 18px}
.login-note{font-size:12px;color:var(--muted);margin:16px 0 0;text-align:center}
.pagination{display:flex;gap:6px;padding:12px 16px;justify-content:center}
.pagination a,.pagination span{padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--mono);font-size:12.5px}
.pagination .current{background:var(--accent-ink);color:var(--on-dark);border-color:var(--accent-ink)}

@media (max-width:900px){
  .shell{flex-direction:column}
  .sidebar{width:100%;flex:0 0 auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:8px}
  .nav{flex-direction:row;flex-wrap:wrap;flex:1}
  .nav-sep{display:none}
  .sidebar-foot{border-top:0;width:100%}
  .main{padding:16px}
  .grid-3,.grid-4,.grid-2,.field-row,.field-row-3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .flash{animation:slide .22s ease-out}
  @keyframes slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media print{.sidebar,.topbar-actions,.filters,.btn{display:none}.main{padding:0}}

/* ---- قفل الخزنة ---- */
.vault-note--warn{background:var(--warn-soft);border-inline-start-color:var(--warn);color:var(--warn-ink)}
.vault-note .btn{margin-inline-start:10px;vertical-align:middle}
.panel-narrow{max-width:520px;margin-inline:auto}
.inline-form{display:inline-block;margin-inline-start:10px}
.cmd{background:var(--code-bg);color:var(--code-text);padding:8px 12px;border-radius:6px;font-family:"IBM Plex Mono",monospace;font-size:12px;margin:8px 0 0;overflow-x:auto}


/* ===== مبدّل اللغة ===== */
.lang-switch{display:inline-flex;gap:2px;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--radius);padding:2px}
.lang-switch button{border:0;background:none;font-family:inherit;font-size:12.5px;padding:4px 10px;border-radius:3px;cursor:pointer;color:var(--muted)}
.lang-switch button:hover{color:var(--text)}
.lang-switch button[aria-current="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(15,24,40,.08)}
.sidebar .lang-switch{background:var(--ink-2);border-color:var(--ink-line)}
.sidebar .lang-switch button{color:var(--on-dark-muted)}
.sidebar .lang-switch button:hover{color:var(--on-dark)}
.sidebar .lang-switch button[aria-current="true"]{background:var(--ink-3);color:var(--on-dark);box-shadow:none}
.sidebar-lang{padding:8px 12px 0}

/* ===== صفحة الدخول ===== */
.login-body{min-height:100vh;display:grid;place-items:center;background:var(--canvas);padding:24px}
.login-shell{width:100%;max-width:404px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px 26px 22px}
.login-head{text-align:center;margin-bottom:22px}
.login-head img{display:block;max-width:190px;height:auto;margin:0 auto 14px}
.login-head h1{font-size:17px;margin-bottom:2px}
.login-head p{margin:0;font-size:13px;color:var(--muted)}
.login-top{display:flex;justify-content:center;margin-bottom:14px}
.login-note{margin:16px 0 0;font-size:12px;color:var(--muted);text-align:center;line-height:1.7}
.login-foot{margin-top:14px;text-align:center;font-size:12.5px}

/* حقل كلمة المرور مع زر الإظهار */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-inline-end:44px}
.pw-toggle{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;padding:6px 8px;border-radius:4px;color:var(--muted);font-size:12px;font-family:inherit;line-height:1}
.pw-toggle:hover{color:var(--text);background:var(--surface-3)}
.pw-toggle svg{display:block;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}

.check-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin:2px 0 4px}
.check-row input{margin:2px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.check-row small{display:block;color:var(--muted);font-size:11.5px}
.forgot-link{font-size:12.5px;color:var(--accent-ink)}
.caps-hint{display:none;background:var(--warn-soft);color:var(--warn-ink);border-inline-start:3px solid var(--warn);padding:7px 10px;border-radius:var(--radius);font-size:12.5px;margin-top:8px}
.caps-hint.is-on{display:block}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}

/* ===== إيصال تسليم العهدة — مصمَّم للطباعة ===== */
.receipt-body{background:var(--canvas);padding:20px}
.receipt-actions{max-width:800px;margin:0 auto 14px;display:flex;gap:8px}
.receipt{max-width:800px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px}
.rc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:2px solid var(--brand-navy);padding-bottom:14px;margin-bottom:16px}
.rc-logo{max-width:170px;height:auto}
.rc-titles{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:15px;line-height:1.5}
.rc-titles span{font-size:12px;color:var(--muted);font-weight:500}
.rc-ref{text-align:end;font-size:12px;color:var(--muted)}
.rc-kind{margin:0 0 16px;text-align:center;font-size:14px}
.rc-kind span{color:var(--muted);font-size:12px;margin-inline-start:8px}
.rc-table{width:100%;border-collapse:collapse;font-size:13px}
.rc-table th,.rc-table td{border:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:start}
.rc-table th{background:var(--surface-3);width:18%;font-weight:600;color:var(--text)}
.rc-table th small{display:block;font-weight:400;font-size:10.5px;color:var(--muted)}
.rc-blank{height:34px}
.rc-terms{margin:16px 0;font-size:11.5px;line-height:1.8;color:var(--text);border:1px solid var(--line-soft);background:var(--surface-2);padding:10px 12px;border-radius:var(--radius)}
.rc-terms p{margin:0 0 6px}
.rc-terms p:last-child{margin:0;color:var(--muted)}
.rc-signs{display:flex;gap:40px;margin-top:26px}
.rc-sign{flex:1;font-size:12px}
.rc-sign span{color:var(--muted)}
.rc-line{margin-top:34px;border-bottom:1px solid var(--text)}
.rc-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:10.5px;color:var(--muted)}

@media print{
  .receipt-body{background:none;padding:0}
  .receipt-actions{display:none}
  .receipt{max-width:none;border:0;border-radius:0;padding:0;box-shadow:none}
  .rc-terms{background:none}
  @page{margin:14mm}
}

/* ===== حقل رفع الملف =====
   المتصفّح يرسم نصّ <input type=file> بلغته هو ومن اليسار لليمين، ولا يقبل
   تغييراً بـCSS. فيُخفى بصرياً — مع بقائه في شجرة الوصول وقابلاً للتركيز —
   ويُرسَم مكانه <label> يعمل عمل الزرّ ونصّه من ملفات الترجمة.
   لا `display:none` ولا `visibility:hidden`: كلاهما يُخرج الحقل من ترتيب
   التنقّل بلوحة المفاتيح فيصير الرفع متعذّراً بلا فأرة. */
.file-field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
            overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-btn{cursor:pointer;flex:none}
/* التركيز بلوحة المفاتيح يقع على الحقل المخفيّ، فتُنقل حلقته إلى الوسم */
.file-input:focus-visible + .file-btn{outline:2px solid var(--accent);outline-offset:2px}
.file-name{color:var(--muted);font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.file-name.has-file{color:var(--text);font-weight:500}
/* الاسم يبقى بجانب الزرّ في الاتّجاهين: لا `direction:ltr` مفروضة على
   الحاوية، والاسم وحده يُعرَض LTR لأن أسماء الملفات لاتينية غالباً. */
.file-name[dir="ltr"]{text-align:start}

/* حقل مركّب: وسم فوق ومحتوى تحت — يطابق شكل <label> القياسي في النماذج */
.field{display:block;margin-bottom:14px}
.field-label{display:block;margin-bottom:6px;font-weight:500}

/* اسم الكيان تحت رقمه في سجل النشاط — يُقرأ بلا أن يزاحم الرقم */
.ent-name{color:var(--text);font-size:.9rem;overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════
   الجداول تصير بطاقات على الشاشات الصغيرة
   ═══════════════════════════════════════════════════════════════════════
   جدولٌ بثمانية أعمدة على شاشة 360px لا يُقرأ: إمّا يُمرَّر أفقياً — وهو
   ما لا يفعله أحد بيد واحدة وهو يمشي — أو تُقصّ أعمدته. والموظف الذي
   يفتح النظام من هاتفه لا يريد ثمانية أعمدة أصلاً؛ يريد سطراً يقول له
   «أي تذكرة» و«ما حالتها».

   فكل صفّ يصير بطاقة: سطر عنوان بارز، ثم أزواج «وسم: قيمة» مأخوذة من
   `data-label` على الخلية نفسها. لا جافاسكربت ولا قالب ثانٍ — نفس الـHTML
   يُقرأ جدولاً على الحاسوب وبطاقةً على الهاتف، فلا يفترقان أبداً.

   والأعمدة التي لا تهمّ على الهاتف تُخفى بـ`.cell-hide` — لا تُحذف من
   الصفحة: قارئ الشاشة والطباعة والتصدير تبقى كاملة.
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width:600px){
  .cards-sm,
  .cards-sm > tbody,
  .cards-sm > tbody > tr,
  .cards-sm > tbody > tr > td{display:block;width:auto}

  /* الرأس يختفي بصرياً لا من الشجرة — الوسوم تنتقل إلى data-label */
  .cards-sm > thead{position:absolute;width:1px;height:1px;overflow:hidden;
                    clip:rect(0 0 0 0);white-space:nowrap}

  .cards-sm > tbody > tr{border:1px solid var(--line);border-radius:var(--radius);
                         background:var(--surface);margin-bottom:10px;padding:12px 14px}
  .cards-sm > tbody > tr:hover{background:var(--surface)}

  .cards-sm > tbody > tr > td{border:0;padding:5px 0;min-height:0;
                              display:flex;gap:12px;align-items:baseline;
                              justify-content:space-between;text-align:end}
  .cards-sm > tbody > tr > td::before{content:attr(data-label);color:var(--muted);
                                      font-size:12px;font-weight:500;flex:0 0 auto;
                                      text-align:start}

  /* سطر العنوان: بارز، بلا وسم، بعرض البطاقة */
  .cards-sm .cell-head{display:block;text-align:start;font-size:15.5px;font-weight:600;
                       padding:0 0 8px;margin-bottom:8px;
                       border-bottom:1px solid var(--line-soft)}
  .cards-sm .cell-head::before{content:none}

  /* ما لا يهمّ على الهاتف — مخفيّ بصرياً، باقٍ في الشجرة */
  .cards-sm .cell-hide{display:none}

  /* شريط الأولوية ينتقل من الخلية الأولى إلى حافة البطاقة */
  .cards-sm.row-rail > tbody > tr{border-inline-start-width:3px}
  .cards-sm.row-rail > tbody > tr > td:first-child{border-inline-start:0}

  /* الأزرار في آخر البطاقة، بعرض كامل وقابلة للّمس */
  .cards-sm .col-actions{margin-top:10px;padding-top:10px;
                         border-top:1px solid var(--line-soft);text-align:start}
  .cards-sm .col-actions::before{content:none}
  .cards-sm .btn-row{flex-wrap:wrap;gap:8px}
  .cards-sm .btn-row .btn{flex:1 1 auto;min-width:96px}
  .cards-sm .btn-row form{flex:1 1 auto;display:flex}
  .cards-sm .btn-row form .btn{width:100%}

  /* حالة الفراغ تبقى سطراً واحداً بلا وسم */
  .cards-sm .empty-state{display:block;text-align:center}
  .cards-sm .empty-state::before{content:none}

  /* البطاقات تلغي الحاجة إلى التمرير الأفقي */
  .panel:has(> .table-wrap > .cards-sm) .table-wrap{overflow-x:visible;margin-inline:0}
}

/* ===== الجوال — أجهزة متوسطة وصغيرة (≤600px) =====
   إضافات فقط؛ لا تُعدَّل أي قاعدة قائمة. مقيّدة بـ screen حتى لا تؤثر على الطباعة. */
@media screen and (max-width:600px){
  /* التنقّل: بلا أيقونات، والروابط موزّعة أربعة في السطر (سطران للمشرف) */
  .nav-icon{display:none}
  .nav{gap:5px;padding:8px 10px}
  .nav-link{flex:1 1 calc(25% - 4px);justify-content:center;text-align:center;
            min-height:44px;padding:8px 6px;font-size:13px;
            border-inline-start-width:0;border-bottom:2px solid transparent}
  .nav-link.is-active{border-inline-start-color:transparent;border-bottom-color:var(--accent)}

  /* حشو أقل للمحتوى */
  .main{padding:14px 12px 40px}
  .topbar{margin-bottom:14px}

  /* الجداول تمتد إلى حافة الشاشة مع تمرير أفقي */
  .table-wrap{margin-inline:-13px}
  .panel:has(> .table-wrap){border-inline-color:transparent}
  th,td{padding:10px 12px}

  /* أهداف لمس مريحة: ارتفاع 42px على الأقل */
  /* 44px هو الحدّ الأدنى الموصى به لهدف اللمس — لا 42. الفرق بكسلان
     على الورق، وعلى الهاتف هو الفرق بين ضغطة تصيب وأخرى تخطئ. */
  .btn{display:inline-flex;align-items:center;justify-content:center;
       min-height:44px;padding:8px 14px;line-height:1.3}
  .btn-sm{min-height:44px;padding:6px 12px;font-size:13px}
  .pw-toggle{display:flex;align-items:center;justify-content:center;
             min-width:44px;min-height:44px;padding:0}

  /* كل حقل إدخال هدف لمس أيضاً — لا الأزرار وحدها.
     و16px ليس تكبيراً تجميلياً: iOS يقرّب الصفحة تلقائياً عند التركيز على
     حقل خطّه أصغر من 16px، فيقفز التخطيط ويخرج نصفه عن الشاشة. وأول ما
     يلمسه الموظف غداً هو حقل كلمة المرور في صفحة الدعوة. */
  input,select,textarea{min-height:44px;font-size:16px;padding:10px 12px}
  /* مربّع الاختيار لا يُكبَّر إلى 44px — يصير مربّعاً ضخماً قبيحاً.
     الهدف القابل للّمس هو الوسم المحيط به: يُعطى ارتفاعاً كافياً وحشوة،
     فتصيب الضغطةُ الوسمَ فيتبدّل المربّع. هذا ما يفعله المستخدم أصلاً —
     يضغط على الكلمة لا على المربّع. */
  input[type=checkbox]{min-height:0;width:20px;height:20px}
  .check-row,.check-line{display:flex;align-items:flex-start;gap:10px;
                         min-height:44px;padding:10px 0;cursor:pointer}
  textarea{min-height:120px}

  /* الفلاتر بيد واحدة: كل حقل بعرض البطاقة وبارتفاع يُلمس.
     كانت الحقول 30px تقريباً وأربعة في السطر — تُصاب بالإبهام صدفةً. */
  .filters{gap:10px;padding:12px}
  .filters label{flex:1 1 100%;font-size:12.5px}
  .filters .grow{flex:1 1 100%;min-width:0}
  .filters input,.filters select{width:100%;margin-top:5px;min-height:44px;
                                 padding:8px 10px;font-size:15px}
  .filters .btn{flex:1 1 calc(50% - 5px)}

  /* الترقيم: أهداف لمس لا روابط نصّية */
  .pagination{gap:8px;flex-wrap:wrap}
  .pagination a,.pagination span{min-width:44px;min-height:44px;
                                 display:inline-flex;align-items:center;justify-content:center}
}

/* عمود الإجراءات في الجداول.
   بزرّ ثالث صار العمود يُعصر حتى يهبط كل زرّ في سطر، فيبلغ الصف ثلاثة
   أضعاف ارتفاعه. عرض أدنى يُبقي زرّين في السطر وسطراً ثانياً على الأكثر —
   دون منع الالتفاف، لأن منعه يدفع الزرّ الأخير خارج الشاشة على الشاشات
   الضيّقة، والزرّ المخفيّ أسوأ من الصف الطويل. */
td .btn-row{min-width:152px}
@media screen and (max-width:600px){td .btn-row{min-width:0}}

/* ===== أزرار إجراءات الصفوف =====
   كانت `.btn-row` تلتفّ (flex-wrap:wrap)، وعدد الأزرار يختلف من صفّ لآخر
   حسب حالة المستخدم — فيلتفّ صفّ إلى 2+2 وآخر إلى 2+1، ويقفز «حذف» من
   موضع لموضع. والنتيجة أن زرّين مدمّرين («إنهاء خدمة» و«حذف») يتجاوران
   أحياناً ويتبادلان المكان — وهو أسوأ ما يقع لزرَّين لا رجعة عنهما.
   الحلّ: صفّ واحد لا يلتفّ، وترتيب ثابت في القالب، و«حذف» مدفوع إلى
   نهاية الخلية دائماً بفاصل مرئي. فموضعه ثابت مهما اختلفت بقيّة الأزرار. */
.btn-row--actions{flex-wrap:nowrap;white-space:nowrap}
.btn-row--actions .act-danger{margin-inline-start:auto;padding-inline-start:12px;
                              border-inline-start:1px solid var(--line)}

/* ===== عمود الإجراءات: لا يضيق ولا يُبتر =====
   `nowrap` وحده ثبّت الترتيب لكنه وسّع الجدول عن حاويته، وفي RTL يقع
   الفائض على اليسار — حيث هذا العمود بعينه. فبدا زرّ «حذف» مقطوعاً من
   حدّه الأيسر: لم يكن مقصوصاً بل خارج نافذة التمرير، والفرق لا يراه أحد.
   قياساً على الإنتاج: الجدول 1153px والحاوية 1081px، و49 صفاً من 50 آخرُ
   زرّ فيها خارج المرئي.

   علاجان معاً:
   ١) `min-width:max-content` — العمود لا يضيق عن محتواه أبداً. وهي قيمة
      محسوبة من المحتوى لا رقم مكتوب بيد: العربية تحتاج 352px والإنجليزية
      393px (مقيسان)، وأي لغة أو خطّ لاحق يضبط نفسه بلا تعديل هنا.
   ٢) `position:sticky` على الحافة الداخلية — يبقى العمود مثبَّتاً في
      نافذة التمرير مهما انزلق الجدول. فالتمرير الأفقي يعمل لبقيّة
      الأعمدة، والزرّان المدمّران لا يخرجان عن البصر أصلاً.
   والخلفية إلزامية مع sticky: بدونها تمرّ الأعمدة المنزلقة تحت العمود. */
.col-actions{min-width:max-content;position:sticky;inset-inline-end:0;
             background:var(--surface);z-index:1}
tbody tr:hover .col-actions{background:var(--surface-2)}
/* فاصل يفصل العمود المثبَّت عمّا ينزلق تحته */
.col-actions::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;
                     width:1px;background:var(--line)}

@media screen and (max-width:600px){
  /* على الجوال يلتفّ الصفّ ولا يُثبَّت العمود: الشاشة أضيق من أن تحتمل
     عموداً مثبَّتاً يأكل نصفها. */
  .col-actions{position:static;min-width:0}
  .col-actions::before{content:none}
}
@media screen and (max-width:600px){
  /* على الجوال يُسمح بالالتفاف — الخلية أضيق من أن تسع صفّاً واحداً —
     لكن الفاصل يبقى فيبقى «حذف» متميّزاً عمّا قبله. */
  .btn-row--actions{flex-wrap:wrap;white-space:normal}
  .btn-row--actions .act-danger{margin-inline-start:0}
}

/* زرّ كشف العنوان الكامل — صغير ومحايد: الكشف ليس إجراءً يُشجَّع عليه */
.ip-reveal{color:var(--muted);font-size:11px;padding:0 4px;text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;background:none;border:0;font-family:inherit}
.ip-reveal:hover{color:var(--accent-ink)}
.ip-reveal[disabled]{opacity:.5;cursor:default}
.is-revealed{color:var(--text);font-weight:500}

/* ===== منتقي البحث =====
   يحلّ محلّ قائمة منسدلة طويلة. الـ<select> يبقى في الصفحة حاملاً للقيمة
   ويُخفى بـ .picker__native فقط بعد أن ينجح JavaScript في التحسين —
   فبلا سكربت تظهر القائمة المنسدلة كاملةً كما كانت. */
.picker{position:relative;margin-top:5px}
.picker>select,.picker__input{margin-top:0}
.picker__native{display:none}
.picker__input{width:100%}
.picker__list{position:absolute;z-index:20;inset-inline:0;top:calc(100% + 3px);
  margin:0;padding:4px;list-style:none;max-height:264px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.picker__opt{display:flex;flex-direction:column;gap:1px;padding:7px 10px;
  border-radius:3px;cursor:pointer;font-size:13.5px;color:var(--text)}
.picker__opt-hint{font-size:11.5px;color:var(--muted);font-family:var(--mono);
  letter-spacing:-.02em;direction:ltr;text-align:start;unicode-bidi:plaintext}
.picker__opt:hover{background:var(--surface-3)}
.picker__opt.is-active{background:var(--accent-soft);color:var(--accent-ink)}
.picker__opt.is-active .picker__opt-hint{color:var(--accent-ink);opacity:.85}
.picker__none{padding:12px 10px;text-align:center;font-size:13px;color:var(--muted)}
/* عدّاد النتائج: لقارئ الشاشة وحده، لا يزيح شيئاً في الصفحة */
.picker__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media print{.picker__list{display:none}}

/* ===== الجوال — شاشات ضيقة (≤430px) ===== */
@media screen and (max-width:430px){
  /* ثلاثة روابط في السطر */
  .nav{gap:5px;padding:6px 8px}
  .nav-link{flex:1 1 calc(33.333% - 4px);font-size:12.5px;padding:8px 4px}

  /* حشو أدنى */
  .main{padding:10px 9px 32px}
  .topbar{flex-direction:column;align-items:stretch;gap:10px}
  .topbar h1{font-size:18px}

  /* الجداول إلى الحافة تماماً */
  .table-wrap{margin-inline:-10px}
  th,td{padding:9px 10px}

  /* الأزرار: ارتفاع 44px */
  .btn,.btn-sm{min-height:44px}
}

/* ===== لوحة حسابات العرض (تظهر في نسخة العرض فقط) =====
   منطقية الاتجاه بالكامل (inline-start/end) فتنقلب مع RTL بلا قواعد خاصة.
   الزرّ 44px كحد أدنى ليحقّق هدف اللمس على الجوال. */
.demo-accounts{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.demo-accounts__title{font-size:13px;font-weight:600;margin:0 0 3px;color:var(--text)}
.demo-accounts__hint{margin:0 0 12px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.demo-accounts__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.demo-account{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius);border-inline-start:3px solid var(--accent-line)}
.demo-account__info{min-width:0;flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}
.demo-account__email{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.demo-account__desc{flex:1 1 100%;font-size:11.5px;line-height:1.55;color:var(--muted)}
.demo-account__use{flex:0 0 auto;min-height:44px;padding-inline:12px;white-space:nowrap}
.demo-account__use:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.demo-account__use.is-filled{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.demo-accounts__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:420px){
  .demo-account{flex-wrap:wrap;gap:8px}
  .demo-account__use{width:100%}
}