:root { --reversal-warn: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
/* Anfal Custody unified design system - Phase A (visual and responsive only). */
:root {
  --anfal-navy-950: #071a2c;
  --anfal-navy-900: #0d2c4a;
  --anfal-navy-800: #173d60;
  --anfal-navy-700: #245d8c;
  --anfal-gold-700: #8a6835;
  --anfal-gold-600: #a67c40;
  --anfal-gold-500: #b89255;
  --anfal-gold-100: #f4ecdf;
  --anfal-bg: #f5f7fa;
  --anfal-surface: #ffffff;
  --anfal-surface-soft: #f8fafb;
  --anfal-ink: #162b3d;
  --anfal-muted: #667786;
  --anfal-border: #dce5eb;
  --anfal-border-strong: #c9d6df;
  --anfal-approved: #25845a;
  --anfal-approved-soft: #e5f4ec;
  --anfal-pending: #c18a2f;
  --anfal-pending-soft: #fff4dc;
  --anfal-returned: #d66f2c;
  --anfal-returned-soft: #fff0e5;
  --anfal-rejected: #b53b35;
  --anfal-rejected-soft: #fdebea;
  --anfal-info: #34749a;
  /* ===== ألوان أنفال المرافق =====
     هذه اللوحة هي القالب. ما تحتها أسماءٌ أُخذت من ألوانٍ كانت مكتوبة
     بأرقامها في الشيفرة، فصار للّون مالكٌ واحد يُغيَّر منه.
     وهي **لا تتبع الوضع الداكن**: الكحلي كحليٌّ في السمتين، والأسطح
     وحدها تنقلب - وتلك أسماؤها فوق. */
  --anfal-navy-600: #1f3b63;  /* الكحلي الذي يقول «مختار»: تبويب مفتوح، أداة مفعّلة */
  --anfal-navy-ink: #102a43;  /* كحلي الحبر — الورق يستعمله أيضًا */
  --anfal-danger-ink: #a12727;  /* حبر الخطر على سطحٍ فاتح، لا سطحُ الخطر */
  --anfal-danger-600: #c0392b;  /* الأحمر الممتلئ */
  --anfal-caution-ink: #8a5b12;  /* حبر التنبيه */
  --anfal-success-ink: #176b43;  /* حبر الموافقة */
  --anfal-dark-900: #0f1a28;  /* أسطح الوضع الداكن — تُسمّى ولا تتبع السمة */
  --anfal-dark-800: #131e2c;
  --anfal-dark-700: #182535;
  --anfal-dark-600: #1e2e3f;
  --anfal-line-cool: #e4eaf0;  /* شعرة باردة */
  --anfal-line-quiet: #e4e6ea;  /* شعرة هادئة */
  --anfal-steel: #8fa3b8;  /* رمادي مزرقّ للنصّ الخافت */
  --anfal-gold-800: #765e38;  /* ذهبيٌّ داكن — حبر على سطحٍ ذهبي فاتح */
  --anfal-gold-750: #8a6b2f;
  --anfal-gold-400: #e0b969;  /* ذهبيٌّ فاتح — حدّ وتنبيه */
  --anfal-gold-300: #d8b87f;
  --anfal-gold-200: #dec79d;
  --anfal-gold-150: #ddcfb7;
  --anfal-gold-075: #f6efdf;
  --anfal-gold-050: #fffaf0;  /* أفتح سطحٍ ذهبي */
  --anfal-slate-600: #667786;  /* رماديات النصّ الخافت والحدود */
  --anfal-slate-500: #6b7280;
  --anfal-slate-400: #94a3b4;
  --anfal-slate-300: #a4acb9;
  --anfal-line-soft: #cbd5dc;  /* شعرة فاتحة */
  --anfal-surface-cool: #f4f7fa;  /* سطحٌ بارد فاتح */
  --anfal-surface-mist: #f8fafb;
  --anfal-green-700: #1d6b43;  /* أخضر الموافقة الداكن */
  --anfal-green-050: #e5f4ec;  /* أفتح سطحٍ أخضر */
  --anfal-red-700: #b42318;  /* أحمر الخطر */
  --anfal-red-250: #ff8f85;
  --anfal-red-200: #f0cfc7;
  --anfal-red-150: #d59b98;
  --anfal-red-075: #fdebea;
  --anfal-red-050: #fdf2f1;  /* أفتح سطحٍ أحمر */
  /* نصٌّ قويّ: كان يقرأ --forest، و--forest كحليٌّ ثابت لأنه يُستعمل
     خلفيةً أيضًا. فصار للنصّ اسمُه الذي ينقلب وحده، ولا يجرّ الخلفيات معه. */
  --anfal-text-strong: #0d2c4a;
  /* ===== سُلَّم الخطّ والشكل =====
     المقاسات كانت أرقامًا في ٧١٧ موضعًا و٣٠ درجة، والانحناءات في ٣٨٨
     موضعًا و٢١ درجة. فصار لكل درجةٍ اسمٌ يُشتقّ من أصلين:

       --anfal-text-base       مقاس المتن (اليوم ١٢)
       --anfal-text-emphasis   اتّساع الفرق بين الكبير والصغير (اليوم ٠)

     والصيغة: base * (R + (R-1) * emphasis) حيث R نسبةُ الدرجة إلى المتن
     اليوم. فعند emphasis = 0 تخرج المقاسات **كما هي حرفًا بحرف**، وكلّما
     زاد اتّسع الفرق بين العنوان والنصّ - وهو ما يفرّق مظهرًا رسميًّا
     هادئًا عن مظهرٍ تتقارب فيه الدرجات فيُصنَع التمييز بالثقل.

     والانحناءات تُضرب في --anfal-radius-scale، والحبّات (999) تبقى نصف
     دائرةٍ لا مقاسًا يُضرب. */
  --anfal-text-base: 12px;
  --anfal-text-emphasis: 0;
  --anfal-radius-scale: 1;
  --fs-8: calc(var(--anfal-text-base) * (0.66667 + (0.66667 - 1) * var(--anfal-text-emphasis)));
  --fs-9: calc(var(--anfal-text-base) * (0.75 + (0.75 - 1) * var(--anfal-text-emphasis)));
  --fs-9p5: calc(var(--anfal-text-base) * (0.79167 + (0.79167 - 1) * var(--anfal-text-emphasis)));
  --fs-10: calc(var(--anfal-text-base) * (0.83333 + (0.83333 - 1) * var(--anfal-text-emphasis)));
  --fs-10p5: calc(var(--anfal-text-base) * (0.875 + (0.875 - 1) * var(--anfal-text-emphasis)));
  --fs-11: calc(var(--anfal-text-base) * (0.91667 + (0.91667 - 1) * var(--anfal-text-emphasis)));
  --fs-11p5: calc(var(--anfal-text-base) * (0.95833 + (0.95833 - 1) * var(--anfal-text-emphasis)));
  --fs-12: calc(var(--anfal-text-base) * (1.0 + (1.0 - 1) * var(--anfal-text-emphasis)));
  --fs-12p5: calc(var(--anfal-text-base) * (1.04167 + (1.04167 - 1) * var(--anfal-text-emphasis)));
  --fs-13: calc(var(--anfal-text-base) * (1.08333 + (1.08333 - 1) * var(--anfal-text-emphasis)));
  --fs-13p5: calc(var(--anfal-text-base) * (1.125 + (1.125 - 1) * var(--anfal-text-emphasis)));
  --fs-14: calc(var(--anfal-text-base) * (1.16667 + (1.16667 - 1) * var(--anfal-text-emphasis)));
  --fs-14p5: calc(var(--anfal-text-base) * (1.20833 + (1.20833 - 1) * var(--anfal-text-emphasis)));
  --fs-15: calc(var(--anfal-text-base) * (1.25 + (1.25 - 1) * var(--anfal-text-emphasis)));
  --fs-15p5: calc(var(--anfal-text-base) * (1.29167 + (1.29167 - 1) * var(--anfal-text-emphasis)));
  --fs-16: calc(var(--anfal-text-base) * (1.33333 + (1.33333 - 1) * var(--anfal-text-emphasis)));
  --fs-17: calc(var(--anfal-text-base) * (1.41667 + (1.41667 - 1) * var(--anfal-text-emphasis)));
  --fs-18: calc(var(--anfal-text-base) * (1.5 + (1.5 - 1) * var(--anfal-text-emphasis)));
  --fs-19: calc(var(--anfal-text-base) * (1.58333 + (1.58333 - 1) * var(--anfal-text-emphasis)));
  --fs-20: calc(var(--anfal-text-base) * (1.66667 + (1.66667 - 1) * var(--anfal-text-emphasis)));
  --fs-21: calc(var(--anfal-text-base) * (1.75 + (1.75 - 1) * var(--anfal-text-emphasis)));
  --fs-22: calc(var(--anfal-text-base) * (1.83333 + (1.83333 - 1) * var(--anfal-text-emphasis)));
  --fs-23: calc(var(--anfal-text-base) * (1.91667 + (1.91667 - 1) * var(--anfal-text-emphasis)));
  --fs-24: calc(var(--anfal-text-base) * (2.0 + (2.0 - 1) * var(--anfal-text-emphasis)));
  --fs-25: calc(var(--anfal-text-base) * (2.08333 + (2.08333 - 1) * var(--anfal-text-emphasis)));
  --fs-26: calc(var(--anfal-text-base) * (2.16667 + (2.16667 - 1) * var(--anfal-text-emphasis)));
  --fs-27: calc(var(--anfal-text-base) * (2.25 + (2.25 - 1) * var(--anfal-text-emphasis)));
  --fs-28: calc(var(--anfal-text-base) * (2.33333 + (2.33333 - 1) * var(--anfal-text-emphasis)));
  --fs-29: calc(var(--anfal-text-base) * (2.41667 + (2.41667 - 1) * var(--anfal-text-emphasis)));
  --fs-32: calc(var(--anfal-text-base) * (2.66667 + (2.66667 - 1) * var(--anfal-text-emphasis)));
  --r-2p5: calc(2.5px * var(--anfal-radius-scale));
  --r-3: calc(3.0px * var(--anfal-radius-scale));
  --r-4: calc(4.0px * var(--anfal-radius-scale));
  --r-5: calc(5.0px * var(--anfal-radius-scale));
  --r-6: calc(6.0px * var(--anfal-radius-scale));
  --r-7: calc(7.0px * var(--anfal-radius-scale));
  --r-8: calc(8.0px * var(--anfal-radius-scale));
  --r-9: calc(9.0px * var(--anfal-radius-scale));
  --r-10: calc(10.0px * var(--anfal-radius-scale));
  --r-11: calc(11.0px * var(--anfal-radius-scale));
  --r-12: calc(12.0px * var(--anfal-radius-scale));
  --r-13: calc(13.0px * var(--anfal-radius-scale));
  --r-14: calc(14.0px * var(--anfal-radius-scale));
  --r-15: calc(15.0px * var(--anfal-radius-scale));
  --r-16: calc(16.0px * var(--anfal-radius-scale));
  --r-17: calc(17.0px * var(--anfal-radius-scale));
  --r-18: calc(18.0px * var(--anfal-radius-scale));
  --r-20: calc(20.0px * var(--anfal-radius-scale));
  --r-22: calc(22.0px * var(--anfal-radius-scale));
  --r-99: calc(99.0px * var(--anfal-radius-scale));
  --r-999: 999.0px;
  /* أوزان الخطّ بأسمائها: خمس درجات كانت أرقامًا في ٣٤٠ موضعًا. وقيمُها
     اليوم هي قيمُها نفسها، فالتسمية وحدها لا تغيّر شيئًا - ومن أراد مظهرًا
     أهدأ خفّض الثلاثة العليا معًا من موضعٍ واحد. */
  --anfal-weight-heavy: 900;
  --anfal-weight-bold: 800;
  --anfal-weight-strong: 700;
  --anfal-weight-semi: 600;
  --anfal-weight-medium: 500;
  --anfal-weight-regular: 400;
  /* ===== العنبريّ: لونُ التنبيه لا لونُ الهوية =====
     كان التنبيه يستعير سُلَّم الذهب، والذهبُ أصلُ التمييز يتبع القالب. فلمّا
     صار التمييز أزرق صار «بانتظار الاعتماد» أزرق و«إرجاع للتعديل» أزرق -
     ورآه المالك وقال: الأخضر يبقى أخضر والأحمر أحمر.
     فللتنبيه سُلَّمُه، بقيم الذهب اليوم نفسها، ثابتًا مع كل قالب. */
  --anfal-amber-800: #765e38;
  --anfal-amber-750: #8a6b2f;
  --anfal-amber-700: #8a6835;
  --anfal-amber-600: #c18a2f;
  --anfal-amber-500: #b89255;
  --anfal-amber-400: #e0b969;
  --anfal-amber-300: #d8b87f;
  --anfal-amber-200: #dec79d;
  --anfal-amber-150: #ddcfb7;
  --anfal-amber-100: #f4ecdf;
  --anfal-amber-075: #f6efdf;
  --anfal-amber-050: #fffaf0;
  --anfal-radius-control: 9px;
  --anfal-radius-card: 12px;
  --anfal-radius-dialog: 20px;
  --anfal-shadow-card: 0 8px 24px rgba(16, 42, 67, .045);
  --anfal-shadow-float: 0 22px 60px rgba(8, 28, 45, .24);
  --anfal-focus: 0 0 0 4px rgba(35, 84, 125, .16);
  --ink: var(--anfal-ink);
  --muted: var(--anfal-muted);
  --line: var(--anfal-border);
  --paper: var(--anfal-bg);
  --white: var(--anfal-surface);
  --forest: var(--anfal-navy-900);
  --forest-2: var(--anfal-navy-800);
  --mint: var(--anfal-gold-500);
  --gold-soft: var(--anfal-gold-100);
  --danger: var(--anfal-rejected);
}

html { background: var(--anfal-bg); scroll-behavior: smooth; }
body {
  background: var(--anfal-bg);
  color: var(--anfal-ink);
  font-family: "IBM Plex Sans Arabic", Tahoma, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
}

::selection { background: var(--anfal-gold-100); color: var(--anfal-navy-950); }
button, input, select, textarea { border-radius: var(--anfal-radius-control); }
button { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 120ms ease; }
button svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .58; }
:where(button, input, select, textarea, a):focus-visible { outline: 3px solid rgba(184, 146, 85, .52); outline-offset: 2px; }
input, select, textarea {
  border-color: var(--anfal-border-strong);
  background: var(--anfal-surface);
  color: var(--anfal-ink);
}
input::placeholder, textarea::placeholder { color: #7b8994; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--anfal-navy-700); box-shadow: var(--anfal-focus); }
label { color: var(--anfal-navy-900); }

/* Login */
.brand-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 38%),
    linear-gradient(180deg, var(--anfal-navy-900), var(--anfal-navy-950));
}
.brand-panel::after { border-color: rgba(184, 146, 85, .32); }
.brand-copy h1 { max-width: 10ch; font-weight: var(--anfal-weight-heavy); }
.company, .product-name { color: var(--anfal-gold-400); }
.access-panel { background: rgba(255, 255, 255, .26); }
.access-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(220, 229, 235, .9);
  border-radius: var(--anfal-radius-dialog);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--anfal-shadow-card);
}
.primary-button {
  border: 1px solid var(--anfal-navy-900);
  background: var(--anfal-navy-900);
  color: #fff;
  box-shadow: 0 8px 18px rgba(16, 42, 67, .14);
}
.primary-button:hover { border-color: var(--anfal-navy-800); background: var(--anfal-navy-800); }
.secondary-button {
  border: 1px solid var(--anfal-border-strong);
  background: var(--anfal-surface);
  color: var(--anfal-navy-900);
}
.secondary-button:hover { border-color: var(--anfal-navy-700); background: var(--anfal-surface-soft); }
.password-toggle { border-color: var(--anfal-border-strong); }

/* Shared workspace surfaces */
.workspace-mode .access-panel { background: transparent; }
.dashboard { position: relative; }
.summary-overview,
.workspace-panel,
.employee-custody-card,
.inactive-custody-report,
.users-status-group,
.permission-user-card {
  border-color: var(--anfal-border);
  border-radius: var(--anfal-radius-card);
  background: var(--anfal-surface);
  box-shadow: var(--anfal-shadow-card);
}
.summary-heading h3,
.accountant-heading h3,
.workspace-panel h3,
.panel-heading h3,
.employee-detail-heading h3,
.users-status-heading h3 { color: var(--anfal-navy-900); letter-spacing: -.015em; }
.summary-heading p,
.accountant-heading p,
.panel-heading p,
.workspace-panel > p { color: var(--anfal-muted); }
.summary-heading > span,
.panel-heading > span,
.workspace-user > span,
.users-status-heading span {
  border: 1px solid var(--anfal-gold-150);
  background: var(--anfal-gold-100);
  color: var(--anfal-gold-700);
}

/* Desktop right sidebar */
@media (min-width: 1120px) {
  .dashboard { min-height: 100dvh; padding: 20px 272px 40px 20px; }
  .workspace-header {
    position: fixed;
    z-index: 30;
    inset: 20px 20px 20px auto;
    width: var(--ui-side-w, 240px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--ui-side-pad, 18px 14px);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-13);
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .045), transparent 38%),
      var(--anfal-navy-900);
    box-shadow: 0 12px 34px rgba(8, 28, 45, .11);
    color: #fff;
  }
  .workspace-header img {
    width: 100%;
    max-height: 72px;
    margin-bottom: 22px;
    padding: 8px;
    border-radius: var(--r-9);
    background: #fff;
    object-fit: contain;
  }
  .workspace-header > div:nth-child(2) { padding: 0 5px 19px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .workspace-header p { color: var(--anfal-gold-300); }
  .workspace-header h2 { color: #fff; font-size: var(--fs-19); line-height: 1.55; }
  .workspace-user { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 7px; margin-top: 18px; }
  .workspace-user > span { align-self: flex-start; margin-bottom: 8px; border-color: rgba(217, 189, 136, .26); background: rgba(184, 146, 85, .15); color: var(--anfal-gold-150); }
  .workspace-user .profile-button,
  .workspace-user .secondary-button {
    width: 100%;
    min-height: 46px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border: 1px solid transparent;
    background: transparent;
    color: #edf2f4;
    box-shadow: none;
    text-align: right;
  }
  .workspace-user .profile-button:hover,
  .workspace-user .secondary-button:hover { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .1); color: #fff; }
  #home-button:not([hidden]) { background: rgba(255, 255, 255, .11); }
  #logout-button { margin-top: auto !important; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; color: var(--anfal-line-quiet); }
}

/* KPI and chart language */
.summary-overview { padding: 24px; }
.summary-content { max-width: 960px; }
.summary-donut,
.employee-donut {
  background: conic-gradient(
    var(--anfal-approved) 0 var(--approved-stop),
    var(--anfal-pending) var(--approved-stop) var(--pending-stop),
    var(--anfal-navy-700) var(--pending-stop) 100%
  );
  box-shadow: none;
}
.summary-donut::after, .employee-donut::after { border: 1px solid var(--anfal-border); background: var(--anfal-surface); }
.summary-donut.is-empty, .employee-donut.is-empty { background: var(--anfal-line-quiet); }
.summary-center strong, .employee-donut-center strong { color: var(--anfal-navy-900); }
.summary-details { gap: 8px; }
.summary-details article {
  min-height: 54px;
  padding: 11px 4px;
  border: 0;
  border-bottom: 1px solid var(--anfal-border);
  border-radius: 0;
  background: transparent;
}
.summary-details article + article { margin-top: 0; }
.summary-details .total i { background: var(--anfal-navy-700); }
.summary-details .approved i, .employee-custody-stats .approved dt::before { background: var(--anfal-approved); }
.summary-details .pending i, .employee-custody-stats .pending dt::before { background: var(--anfal-pending); }
.summary-details .available i, .employee-custody-stats .available dt::before { background: var(--anfal-navy-700); }
.employee-custody-stats .rejected dt::before { background: var(--anfal-rejected); }

/* Role dashboards and cards */
.employee-custody-grid { gap: 20px; }
.employee-custody-card { padding: 22px; }
.employee-custody-card:hover { border-color: var(--anfal-line-soft); box-shadow: 0 12px 30px rgba(16, 42, 67, .09); }
.employee-details-button,
.camera-action,
.funding-launch,
.manage-user-button,
.user-push-devices button {
  border-color: var(--anfal-navy-900);
  background: var(--anfal-navy-900);
  color: #fff;
}
.employee-details-button:hover,
.camera-action:hover,
.funding-launch:hover,
.manage-user-button:hover,
.user-push-devices button:hover { border-color: var(--anfal-navy-800); background: var(--anfal-navy-800); color: #fff; }
.file-action,
.secondary-launch,
.employee-statement-button,
.detail-home-button,
.view-back-button {
  border-color: var(--anfal-gold-200);
  background: var(--anfal-gold-100);
  color: var(--anfal-gold-700);
}
.file-action:hover,
.secondary-launch:hover,
.employee-statement-button:hover,
.detail-home-button:hover,
.view-back-button:hover { background: #f0dfc0; }
.no-custody-badge { border-color: var(--anfal-border); background: var(--anfal-line-quiet); color: var(--anfal-muted); }

/* Invoice and status system */
.invoice-group { border-color: var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface-soft); }
.invoice-group-pending { border-color: var(--anfal-amber-150); background: var(--anfal-amber-050); }
.invoice-group-approved { border-color: #b8ddc8; background: #f6fbf8; }
.invoice-group-rejected { border-color: var(--anfal-red-200); background: #fff8f7; }
.invoice-item { border-color: var(--anfal-border); border-radius: var(--r-13); background: var(--anfal-surface); }
.invoice-item.amount-adjusted { border-color: var(--anfal-amber-300); background: var(--anfal-amber-050); }
.status-badge { border: 1px solid transparent; border-radius: var(--r-999); padding: 6px 10px; }
.status-approved, .status-active { border-color: #b8ddc8; background: var(--anfal-approved-soft); color: var(--anfal-success-ink); }
.status-pending { border-color: var(--anfal-amber-200); background: var(--anfal-pending-soft); color: var(--anfal-amber-750); }
.status-returned { border-color: var(--anfal-amber-150); background: var(--anfal-returned-soft); color: var(--anfal-amber-800); }
.status-rejected { border-color: var(--anfal-red-200); background: var(--anfal-rejected-soft); color: var(--anfal-red-700); }
.status-cancelled { border-color: var(--anfal-border); background: var(--anfal-surface-soft); color: var(--anfal-muted); text-decoration: line-through; }
.rd-shell :is(.cancel-invoice,.request-cancel,.refuse-cancel) { border-color: #f3b5aa; background: var(--anfal-red-050); color: var(--anfal-red-700); }
.cancel-pending-note { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--anfal-amber-200); border-radius: var(--r-8); background: var(--anfal-amber-075); color: var(--anfal-amber-750); font-size: var(--fs-13); }
.approve { background: var(--anfal-approved); color: #fff; }
/* موافقة أيضًا، لكنها لا تطلب سندًا إلكترونيًا: نفس لون القرار مفرغًا،
   حتى لا يقرأها المدير كإجراء ثانوي ولا يخلطها بالزر الأساسي. */
.approve-manual { border: 1px solid var(--anfal-approved); background: transparent; color: var(--anfal-approved); font-weight: var(--anfal-weight-bold); }
.approve-manual:hover { background: rgba(23, 107, 67, .08); }
html[data-theme="dark"] .approve-manual { border-color: #4cbf8b; color: #4cbf8b; }
.reject, .danger-action, .deactivate-user, .delete-user { background: var(--anfal-rejected-soft); color: var(--anfal-rejected); }
.scan-status { border-radius: var(--r-13); }
.scan-status.is-processing { border-color: var(--anfal-amber-200); background: var(--anfal-amber-050); }
.amount-confirmation { border-color: var(--anfal-amber-150); background: var(--anfal-amber-050); }
.scan-review-note,
.amount-adjustment-note { border-inline-start-width: 1px; }

/* Forms, tables and management */
.workspace-panel form { gap: 12px; }
.table-wrap { border: 1px solid var(--anfal-border); border-radius: var(--r-10); background: var(--anfal-surface); }
table { border-collapse: separate; border-spacing: 0; }
thead th { background: #fafbfd; color: var(--anfal-navy-900); font-weight: var(--anfal-weight-bold); }
tbody tr:nth-child(even) { background: var(--anfal-surface); }
tbody tr:hover { background: #f7f9fb; }
th, td { border-color: var(--anfal-border); }
th { padding-block: 16px; }
td { padding-block: 15px; }
.user-compact-item { border-color: var(--anfal-border); background: var(--anfal-surface-soft); }
.permission-toggle.is-enabled, .account-role-button.is-selected { border-color: var(--anfal-navy-700); background: var(--anfal-line-quiet); color: var(--anfal-navy-900); }
.account-created-result { border-color: #b8ddc8; background: var(--anfal-approved-soft); }
.empty-state, .invoice-group-empty, .users-status-empty { border-color: var(--anfal-border-strong); background: rgba(255, 255, 255, .64); }

/* Overlays and feedback */
.profile-overlay,
.statement-overlay,
.approval-overlay,
.notification-overlay,
.push-consent-overlay,
.page-count-overlay,
.pwa-install-overlay { background: rgba(8, 28, 45, .72); backdrop-filter: blur(5px); }
.profile-dialog,
.statement-dialog,
.approval-dialog,
.notification-dialog,
.push-consent-dialog,
.page-count-dialog,
.pwa-install-dialog {
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--anfal-radius-dialog);
  box-shadow: var(--anfal-shadow-float);
}
.success-toast { border: 1px solid #b8ddc8; background: #f6fbf8; color: var(--anfal-success-ink); box-shadow: var(--anfal-shadow-float); }
.profile-dialog { width: min(100%, 760px); }
.profile-summary { display: grid; grid-template-columns: 84px 1fr; gap: 18px; margin-top: 20px; }
.profile-avatar { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid var(--anfal-gold-200); border-radius: var(--r-22); background: var(--anfal-gold-100); color: var(--anfal-gold-700); font-size: var(--fs-22); font-weight: var(--anfal-weight-heavy); }
.profile-summary dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; margin: 0; }
.profile-summary dl div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--anfal-border); }
.profile-summary dt { color: var(--anfal-muted); font-size: var(--fs-12); }.profile-summary dd { margin: 0; color: var(--anfal-ink); font-weight: var(--anfal-weight-bold); overflow-wrap: anywhere; }
.profile-summary > .primary-button { grid-column: 2; width: min(100%,260px); margin: 4px 0 0; }
.profile-form-heading, .profile-password-launch { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profile-form-heading h3, .profile-password-launch h3 { margin: 0; }.profile-form-heading .secondary-button, .profile-password-launch .secondary-button { width: auto; min-height: 42px; margin: 0; }
.profile-password-launch { padding: 14px 0; }.profile-password-launch p { margin: 5px 0 0; color: var(--anfal-muted); font-size: var(--fs-12); }
.notification-center { width: 100%; max-width: 1280px; }
.notification-center-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.notification-center-toolbar h2 { margin: 0; font-size: var(--fs-22); }.notification-center-toolbar p { margin: 5px 0 0; color: var(--anfal-muted); }
.notification-center-toolbar button { min-height: 44px; padding: 0 18px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-control); background: var(--anfal-surface); color: var(--anfal-ink); font: inherit; font-weight: var(--anfal-weight-bold); }
.notification-center-list { display: grid; gap: 12px; }
.notification-center-item { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--anfal-gold-150); border-radius: var(--anfal-radius-card); background: var(--anfal-amber-050); box-shadow: var(--anfal-shadow-card); }
.notification-center-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: var(--r-15); background: var(--anfal-gold-100); color: var(--anfal-gold-700); font-size: var(--fs-10); font-weight: var(--anfal-weight-heavy); }
.notification-center-item > div:nth-child(2) > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.notification-center-item h3 { margin: 0; font-size: var(--fs-16); }.notification-center-item p { margin: 7px 0; color: var(--anfal-ink); line-height: 1.7; }.notification-center-item small { color: var(--anfal-muted); }
.notification-center-actions { display: grid; gap: 8px; min-width: 150px; }.notification-center-actions button { min-height: 42px; margin: 0; padding-inline: 14px; }
.notification-center-note { margin: 14px 0 0; color: var(--anfal-muted); font-size: var(--fs-12); }

/* Shared operational density: preserve each workflow while using one page rhythm. */
.workspace-panel, .admin-tools, .permissions-panel { container-type: inline-size; }
.accountant-home, .permissions-panel, .invoice-create-panel, .invoices-panel { width: 100%; max-width: 1280px; }
.invoice-create-panel form { width: 100%; max-width: 980px; }
.admin-tools:not(.funding-only), .permission-management { align-items: start; }
.user-compact-item, .invoice-item, .inactive-custody-row { min-width: 0; }
.profile-dialog :is(input,select,textarea), .approval-dialog :is(input,select,textarea), .page-count-dialog :is(input,select) { background: var(--anfal-surface); color: var(--anfal-ink); }
.form-error:not(:empty), .invoice-action-error:not(:empty) { padding: 10px 12px; border-radius: var(--r-10); background: var(--anfal-rejected-soft); }
/* شريط «الإشعارات غير مفعّلة» حالةٌ لا هوية: يبقى بلون التنبيه الثابت
   مهما قُلب القالب. كان يقرأ عائلة التمييز فصار تيلًا مع قالبٍ أخضر. */
.push-reminder-banner { border-color: var(--anfal-pending); background: var(--anfal-pending-soft); color: var(--anfal-caution-ink); }

/* Tablet: top workspace bar and stacked operational content. */
@media (min-width: 761px) and (max-width: 1119px) {
  .dashboard { padding: 24px 24px 56px; }
  .workspace-header {
    position: sticky;
    z-index: 20;
    top: 0;
    max-width: none;
    margin: -24px -24px 26px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--anfal-border);
    background: rgba(243, 246, 248, .96);
    box-shadow: 0 8px 24px rgba(16, 42, 67, .06);
  }
  .employee-custody-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-custody-card { grid-template-columns: 1fr; }
  .employee-custody-stats, .employee-details-button { grid-column: 1; }
}

/* Mobile PWA: task-first stacked layout with a fixed bottom navigation. */
@media (max-width: 760px) {
  body { background: var(--anfal-bg); }
  .brand-panel { min-height: 132px; padding: 16px 18px; background: var(--anfal-navy-900); }
  .brand-mark { width: 48px; height: 48px; flex-basis: 48px; }
  .brand-copy h1 { font-size: var(--fs-19); line-height: 1.3; }
  .company { font-size: var(--fs-12); }
  .access-panel { padding: 16px 14px calc(30px + env(safe-area-inset-bottom)); }
  .access-card { padding: 19px 17px; border-radius: var(--r-16); }
  .access-card header { margin-bottom: 18px; }
  .access-card h2 { font-size: var(--fs-26); }
  .login-logo { width: min(100%, 205px); margin-bottom: 13px; }
  .dashboard { padding: 0 12px calc(28px + env(safe-area-inset-bottom)); }
  .workspace-header {
    display: grid;
    grid-template-columns: 1fr 118px;
    align-items: center;
    gap: 12px;
    margin: 0 -12px 14px;
    padding: 18px 18px 20px;
    border: 0;
    border-radius: 0 0 20px 20px;
    background: var(--anfal-navy-900);
    box-shadow: 0 8px 24px rgba(8, 28, 45, .12);
    color: #fff;
  }
  .workspace-header img { width: 118px; grid-column: 2; grid-row: 1; padding: 6px; border-radius: var(--r-8); background: #fff; }
  .workspace-header > div:nth-child(2) { grid-column: 1; grid-row: 1; min-width: 0; }
  .workspace-header p { color: var(--anfal-gold-400); font-size: var(--fs-11); }
  .workspace-header h2 { overflow: hidden; color: #fff; font-size: var(--fs-17); text-overflow: ellipsis; white-space: nowrap; }
  .workspace-user {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .workspace-user > span { display: none; }
  .workspace-user .profile-button,
  .workspace-user .secondary-button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    border-color: rgba(255, 255, 255, .5);
    background: transparent;
    color: #fff;
    font-size: var(--fs-12);
    line-height: 1.35;
    white-space: normal;
  }
  .workspace-user .profile-button:hover,
  .workspace-user .secondary-button:hover { border-color: var(--anfal-gold-400); background: rgba(216, 179, 95, .16); }
  #profile-button { border-color: var(--anfal-gold-400); background: var(--anfal-gold-400); color: var(--anfal-navy-950); }
  .summary-overview, .workspace-panel, .employee-custody-card { padding: 16px; border-radius: var(--r-15); }
  .summary-heading, .panel-heading, .accountant-heading { align-items: flex-start; gap: 12px; }
  .summary-heading h3, .panel-heading h3, .accountant-heading h3 { font-size: var(--fs-18); }
  .summary-content { gap: 18px; }
  .summary-donut { width: min(68vw, 250px); }
  .summary-details article { min-height: 50px; padding: 10px 2px; }
  .employee-custody-card { grid-template-columns: 1fr; }
  .employee-custody-card header, .employee-custody-stats, .employee-details-button { grid-column: 1; }
  .capture-actions { gap: 10px; }
  .camera-action, .file-action { min-height: 88px; padding: 16px; }
  input, select { min-height: 50px; }
  textarea { min-height: 108px; }
  .invoice-item { padding: 15px; }
  .invoice-actions button { min-height: 46px; }
  .table-wrap { border: 0; overflow: visible; background: transparent; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap tr { margin-bottom: 12px; padding: 13px; border: 1px solid var(--anfal-border); border-radius: var(--r-13); background: var(--anfal-surface); box-shadow: 0 5px 16px rgba(16, 42, 67, .05); }
  .table-wrap td { display: grid; grid-template-columns: minmax(92px, .42fr) 1fr; gap: 10px; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--anfal-line-quiet); }
  .table-wrap td:last-child { border-bottom: 0; }
  .profile-overlay, .statement-overlay, .approval-overlay, .notification-overlay, .push-consent-overlay, .page-count-overlay { padding: 10px; }
  .profile-dialog, .statement-dialog, .approval-dialog, .notification-dialog, .push-consent-dialog, .page-count-dialog { max-height: calc(100dvh - 20px); padding: 18px; border-radius: var(--r-16); }
}

@media (max-width: 420px) {
  .workspace-user { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .summary-heading, .panel-heading, .accountant-heading { flex-direction: column; }
  .summary-heading > span, .panel-heading > span, .accountant-heading > span { align-self: flex-start; }
  .invoice-item { grid-template-columns: 1fr; }
  .invoice-amount { justify-self: stretch; }
}

@media (display-mode: standalone) {
  .workspace-header { padding-top: max(16px, env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Phase A.1: approved-reference application shell and view composition. */
.workspace-content { min-width: 0; }
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 18px;
  padding: 4px 2px;
}
.page-toolbar h1 { margin: 0 0 4px; color: var(--anfal-navy-950); font-size: var(--fs-25); line-height: 1.35; }
.page-toolbar p { margin: 0; color: var(--anfal-muted); font-size: var(--fs-13); }
.toolbar-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--anfal-border);
  background: var(--anfal-surface);
  color: var(--anfal-navy-900);
}
.app-navigation, .mobile-bottom-nav { display: none; }

@media (min-width: 1120px) {
  .dashboard { min-height: 100dvh; padding: 20px 288px 34px 20px; background: var(--anfal-bg); }
  .workspace-content { width: 100%; max-width: 1600px; margin: 0 auto; }
  .workspace-header {
    inset: 20px 20px 20px auto;
    width: 244px;
    padding: 22px 14px 18px;
    border-radius: var(--r-12);
    overflow: hidden;
  }
  .workspace-header img { width: 100%; max-height: 70px; margin: 0 0 16px; padding: 7px; border-radius: var(--r-8); }
  .workspace-welcome { padding: 0 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .workspace-welcome p { margin: 0 0 4px; color: var(--anfal-gold-400); font-size: var(--fs-11); }
  .workspace-welcome h2 { margin: 0; color: #fff; font-size: var(--fs-17); }
  .app-navigation { display: flex; flex-direction: column; gap: 5px; margin-top: 15px; }
  .app-navigation button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--anfal-line-quiet);
    font-weight: var(--anfal-weight-strong);
    text-align: right;
  }
  .app-navigation button:hover { background: rgba(255, 255, 255, .07); }
  .app-navigation button.is-active { border-color: rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .12); color: #fff; }
  .workspace-user { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .workspace-user > span { margin: 0 5px 5px; }
  .workspace-user .profile-button, .workspace-user .secondary-button { min-height: 44px; }
  #logout-button { margin-top: 4px !important; border-top: 0; border-radius: var(--r-9); }
  .summary-overview, .workspace-panel, .employee-custody-card, .inactive-custody-report, .users-status-group, .permission-user-card {
    border-radius: var(--r-11);
    box-shadow: 0 6px 22px rgba(16, 42, 67, .045);
  }
  .summary-overview { max-width: none; margin-bottom: 18px; padding: 22px 24px; }
  .summary-content { grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); max-width: none; gap: 38px; }
  .summary-donut { width: 210px; }
  .summary-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 12px; }
  .summary-details article { min-height: 108px; padding: 18px; border: 1px solid var(--anfal-border); border-radius: var(--r-10); background: #fbfcfd; }
  .summary-details article strong { margin-top: 11px; font-size: var(--fs-20); }
  .accountant-home { max-width: none; margin-bottom: 18px; }
  .accountant-heading { margin-bottom: 16px; padding: 0 2px; }
  .employee-custody-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .employee-custody-card {
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 13px 16px;
    padding: 17px;
  }
  .employee-custody-card header { grid-column: 1 / -1; padding-bottom: 11px; }
  .employee-custody-card header h4 { font-size: var(--fs-16); }
  .employee-donut-block { grid-column: 1; align-self: center; }
  .employee-donut { width: 138px; }
  .employee-statement-button { min-height: 36px; margin-top: 9px; }
  .employee-custody-stats { grid-column: 2; align-self: stretch; }
  .employee-custody-stats > div { min-height: 43px; padding: 7px 0; }
  .employee-custody-stats dt { font-size: var(--fs-11); }
  .employee-custody-stats dd { font-size: var(--fs-12); }
  .employee-details-button { grid-column: 1 / -1; min-height: 42px; }
  .admin-home-actions { margin-top: 18px; }
  .workspace-panel { max-width: none; padding: 22px 24px; }
  .invoice-create-panel form { max-width: 900px; }
  .invoice-group { padding: 16px; }
  .invoice-item { padding: 17px; }
  /* Option 2: keep the user tools as two balanced cards on desktop.
     Funding remains intentionally single-column via .funding-only. */
  .admin-grid:not(.funding-only) {
    max-width: 1280px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: initial;
  }
  .admin-grid.funding-only { max-width: none; grid-template-columns: minmax(420px, 680px); justify-content: center; }
  .employees-panel, .permissions-panel { max-width: none; }
  .permissions-users { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .permission-user-card { grid-column: 1 / -1; }
}

@media (min-width: 1120px) and (max-width: 1450px) {
  .employee-custody-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permissions-users { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 761px) and (max-width: 1119px) {
  .workspace-content { max-width: 980px; margin: 0 auto; }
  .workspace-header { display: grid; grid-template-columns: 130px 1fr; gap: 14px 20px; width: 100%; margin: 0 0 18px; background: var(--anfal-navy-900); color: #fff; }
  .workspace-header img { width: 130px; padding: 6px; border-radius: var(--r-8); background: #fff; }
  .workspace-welcome p { color: var(--anfal-gold-400); }
  .workspace-welcome h2 { color: #fff; }
  .app-navigation { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; }
  .app-navigation button { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 0 12px; border-color: rgba(255,255,255,.12); background: transparent; color: #fff; white-space: nowrap; }
  .app-navigation button.is-active { background: rgba(255,255,255,.13); }
  .workspace-user { grid-column: 1 / -1; display: flex; gap: 8px; }
  .workspace-user > span { margin-inline-end: auto; }
  .workspace-user button { color: #fff; }
}

@media (max-width: 760px) {
  body { background: var(--anfal-bg); }
  .dashboard { min-height: 100dvh; padding: 0 0 calc(86px + env(safe-area-inset-bottom)); }
  .workspace-header {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: max(15px, env(safe-area-inset-top)) 16px 18px;
    border-radius: 0 0 20px 20px;
    background: var(--anfal-navy-900);
    box-shadow: 0 8px 22px rgba(8, 28, 45, .13);
  }
  .workspace-header img { grid-column: auto !important; grid-row: 1; width: 118px; margin: 0; padding: 6px; border-radius: var(--r-8); background: #fff; }
  .workspace-header > .workspace-welcome { grid-column: auto !important; grid-row: 1; align-self: center; min-width: 0; padding: 0; border: 0; }
  .workspace-welcome p { margin: 0 0 4px; color: var(--anfal-gold-400); font-size: var(--fs-10); }
  .workspace-welcome h2 { overflow: hidden; margin: 0; color: #fff; font-size: var(--fs-16); text-overflow: ellipsis; white-space: nowrap; }
  .app-navigation { display: none; }
  .workspace-user { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
  .workspace-user > span { display: none; }
  .workspace-user .profile-button, .workspace-user .secondary-button { min-height: 43px; border-color: rgba(255,255,255,.48); background: transparent; color: #fff; }
  #profile-button { border-color: var(--anfal-gold-400); background: var(--anfal-gold-400); color: var(--anfal-navy-950); }
  .workspace-content { padding: 12px; }
  .page-toolbar { margin: 0 0 10px; padding: 5px 2px; }
  .page-toolbar h1 { font-size: var(--fs-20); }
  .page-toolbar p { font-size: var(--fs-11); }
  .toolbar-profile { display: none; }
  .push-reminder-banner { margin: 0 0 10px; }
  .summary-overview, .workspace-panel, .employee-custody-card, .inactive-custody-report, .users-status-group {
    margin-bottom: 12px;
    padding: 15px;
    border-radius: var(--r-15);
    box-shadow: 0 5px 18px rgba(16, 42, 67, .055);
  }
  .summary-heading, .panel-heading, .accountant-heading { margin-bottom: 13px; }
  .summary-heading h3, .panel-heading h3, .accountant-heading h3 { font-size: var(--fs-17); }
  .summary-content { display: flex; flex-direction: column; gap: 14px; }
  .summary-donut { width: min(58vw, 220px); }
  .summary-details { width: 100%; }
  .summary-details article { min-height: 46px; }
  .accountant-home { margin: 0; }
  .dashboard[data-view="dashboard"] .accountant-home { display: none; }
  .employee-custody-grid { grid-template-columns: 1fr; gap: 11px; }
  .employee-custody-card { grid-template-columns: 118px minmax(0, 1fr); gap: 10px 13px; }
  .employee-custody-card header { grid-column: 1 / -1; }
  .employee-donut-block { grid-column: 1; }
  .employee-donut { width: 116px; }
  .employee-custody-stats { grid-column: 2; }
  .employee-details-button { grid-column: 1 / -1; }
  .capture-actions { grid-template-columns: 1fr; }
  .camera-action, .file-action { min-height: 84px; }
  .invoice-group { padding: 12px; border-radius: var(--r-13); }
  .invoice-item { padding: 13px; border-radius: var(--r-11); }
  .mobile-bottom-nav {
    position: fixed;
    z-index: 55;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 66px;
    padding: 7px 5px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.12);
    background: var(--anfal-navy-900);
    box-shadow: 0 -8px 24px rgba(8, 28, 45, .16);
  }
  .mobile-bottom-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 50px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: #dce5eb;
    font-size: var(--fs-9);
  }
  .mobile-bottom-nav button svg { width: 21px; height: 21px; }
  .mobile-bottom-nav button.is-active {
    border-radius: var(--r-10);
    background: rgba(214, 170, 79, .16);
    color: var(--anfal-gold-300);
  }
  .permissions-users { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .workspace-header { grid-template-columns: 102px minmax(0, 1fr); padding-inline: 13px; }
  .workspace-header img { width: 102px; }
  .workspace-content { padding: 10px; }
  .page-toolbar h1 { font-size: var(--fs-18); }
  .employee-custody-card { grid-template-columns: 1fr; }
  .employee-custody-card header, .employee-donut-block, .employee-custody-stats, .employee-details-button { grid-column: 1; }
  .mobile-bottom-nav button { font-size: var(--fs-8); }
}

/* Final pre-production UI audit: shared workflow and density corrections */
/* النوافذ المشتركة كانت تحت صندوق تفاصيل الموظف (220) وصندوق الصلاحيات،
   فتُفتح ولا تُرى - «تختفي خلف الصندوق». مكانها فوق أثاث الصفحة كله،
   وتحت النوافذ العليا: الإشعار (1000) وعدد الصفحات (1100) وتحديد
   الحدود (1150) وتثبيت التطبيق (1200) ورسالة النجاح (1300). */
.referral-overlay {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 26, 44, .64);
  backdrop-filter: blur(5px);
}
.referral-overlay[hidden] { display: none; }
.referral-dialog {
  width: min(100%, 620px);
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--anfal-border);
  border-radius: var(--r-20);
  background: var(--anfal-surface);
  box-shadow: var(--anfal-shadow-float);
}
.referral-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.referral-heading h2 { margin: 0 0 5px; color: var(--anfal-navy-950); font-size: var(--fs-21); }
.referral-heading p { margin: 0; color: var(--anfal-muted); font-size: var(--fs-13); line-height: 1.7; }
.referral-heading > button { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 1px solid var(--anfal-border); border-radius: var(--r-11); background: var(--anfal-surface-soft); color: var(--anfal-navy-900); font-size: var(--fs-24); cursor: pointer; }
.referral-dialog form { display: grid; gap: 9px; }
.referral-dialog label { color: var(--anfal-navy-900); font-size: var(--fs-13); font-weight: var(--anfal-weight-bold); }
.referral-dialog :is(select, textarea) { width: 100%; min-height: 44px; border: 1px solid var(--anfal-border); border-radius: var(--r-11); background: var(--anfal-surface); color: var(--anfal-ink); font: inherit; }
.referral-dialog textarea { min-height: 112px; padding: 12px; resize: vertical; }
.referral-file-field { display: grid; gap: 6px; min-height: 92px; padding: 14px; border: 1px dashed var(--anfal-border-strong); border-radius: var(--r-12); background: var(--anfal-surface-soft); cursor: pointer; }
.referral-file-field small { color: var(--anfal-muted); font-weight: var(--anfal-weight-medium); }
.referral-file-field b { min-width: 0; overflow: hidden; color: var(--anfal-gold-700); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
.referral-file-field input { min-height: 44px; padding-block: 9px; }
.referral-actions { display: flex; gap: 10px; margin-top: 6px; }
.referral-actions button { min-height: 44px; }
.referral-history > div { display: grid; }
.referral-history article { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--anfal-border); }
.referral-history article:last-child { border-bottom: 0; }
.referral-history article i { width: 11px; height: 11px; margin-top: 5px; border: 3px solid var(--anfal-gold-100); border-radius: 50%; background: var(--anfal-gold-500); box-sizing: content-box; }
.referral-history article div { display: grid; gap: 4px; min-width: 0; }
.referral-history strong { color: var(--anfal-navy-900); font-size: var(--fs-13); }
.referral-history p { margin: 0; color: var(--anfal-ink); font-size: var(--fs-13); line-height: 1.65; overflow-wrap: anywhere; }
.referral-history time { color: var(--anfal-muted); font-size: var(--fs-11); }
.manager-support-actions button, .manager-attachment-actions button { background: var(--anfal-gold-100); border-color: var(--anfal-gold-300); color: var(--anfal-navy-900); }
.manager-support-preview { background: var(--anfal-surface-soft); border-color: var(--anfal-border); }
.manager-response-block { background: var(--anfal-gold-100); border-color: var(--anfal-gold-150); }

/* نافذة تفاصيل المهمة: تُفتح من «مهامي الآن» بدل القفز إلى صفحة الفواتير.
   مبنية على --anfal-* وحدها، فالوضع الليلي يأتي معها بلا قواعد مطاردة. */
/* أسفل نوافذ القرار: الاعتماد والإرجاع والإحالة تُفتح فوقها لا خلفها.
   لكن 30 كانت تحت صناديق الصفحة المرقّاة إلى نوافذ (تفاصيل العهدة
   ولوحة الصلاحيات، وكلتاهما 220) - فيُفتح المرفق من داخل تفاصيل
   العهدة ويظهر خلف الصندوق. الطبقة الآن فوق تلك الصناديق ودون نوافذ
   القرار: 230 < 240 (الاعتماد) < 900 (الإحالة). */
#task-detail-overlay { z-index: 230; }
/* شريط ثابت فوق وشريط ثابت تحت، والمحتوى وحده هو الذي يتمرّر.
   الاسم في الشريط الأعلى يبقى معك مهما نزلت في التفاصيل. */
.task-detail-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 680px);
  padding: 0;
}
#task-detail-overlay .task-detail-dialog { max-height: min(88vh, 860px); overflow: hidden; }
.task-detail-head { align-items: center; margin-bottom: 0; padding: 14px 18px; border-bottom: 1px solid var(--anfal-border); background: var(--anfal-surface); }
.task-detail-head h2 { font-size: var(--fs-18); }
.task-detail-head p { font-size: var(--fs-12); }
.task-detail-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
.task-detail-foot { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding: 12px 16px; border-top: 1px solid var(--anfal-border); background: var(--anfal-surface); }
.task-detail-foot:empty { display: none; }
.task-detail-foot button { min-height: 42px; padding-inline: 15px; }
html[data-theme="dark"] :is(.task-detail-head, .task-detail-foot) { background: var(--anfal-surface); border-color: var(--anfal-border); }
/* شريط التنقل السفلي في الجوال ثابت فوق النافذة، فكان يبتلع شريط
   القرار. نترك له مكانه بدل أن نتسلّق فوقه. */
@media (max-width: 760px) {
  #task-detail-overlay { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  #task-detail-overlay .task-detail-dialog { max-height: min(78vh, 860px); }
  .task-detail-foot button { min-height: 40px; padding-inline: 12px; font-size: var(--fs-13); }
}

.task-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.task-detail-amount { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--anfal-border); border-radius: var(--r-14); background: var(--anfal-surface-soft); }
.task-detail-amount strong { color: var(--anfal-navy-950); font-size: var(--fs-24); }
.task-detail-amount small { color: var(--anfal-muted); font-size: var(--fs-12); }
.task-detail-grid { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 0; margin: 16px 0 0; }
.task-detail-grid dt { padding: 10px 0; border-bottom: 1px solid var(--anfal-border); color: var(--anfal-muted); font-size: var(--fs-12); font-weight: var(--anfal-weight-strong); }
.task-detail-grid dd { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--anfal-border); color: var(--anfal-ink); font-size: var(--fs-13); line-height: 1.65; overflow-wrap: anywhere; }
.task-detail-grid :is(dt, dd):nth-last-of-type(1) { border-bottom: 0; }
.task-detail-notes { display: grid; gap: 10px; margin-top: 16px; }
.task-detail-notes:empty { margin-top: 0; }
.task-detail-note { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--anfal-border); border-radius: var(--r-13); background: var(--anfal-surface-soft); }
.task-detail-note h5 { margin: 0; color: var(--anfal-navy-900); font-size: var(--fs-13); }
.task-detail-note p { margin: 0; color: var(--anfal-ink); font-size: var(--fs-13); line-height: 1.7; overflow-wrap: anywhere; }
.task-detail-note small { color: var(--anfal-muted); font-size: var(--fs-11); }
.task-detail-note.is-warning { border-color: var(--anfal-amber-150); background: var(--anfal-amber-100); }
.task-detail-note.is-warning h5 { color: var(--anfal-navy-950); }
/* تصميم السند: صف الختم ومعاينته. */
.voucher-stamp-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.voucher-stamp-row img { width: 84px; height: 84px; padding: 6px; border: 1px solid var(--anfal-border); border-radius: var(--r-12); background: var(--anfal-surface-soft); object-fit: contain; }
.voucher-stamp-row img[hidden] { display: none; }
.settings-hint { margin: 6px 0 0; color: var(--anfal-muted); font-size: var(--fs-12); line-height: 1.7; }
.settings-hint code { font-family: inherit; font-weight: var(--anfal-weight-bold); color: var(--anfal-gold-700); }
.color-control { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: center; }
.color-control input[type="color"] { width: 54px; min-height: 44px; padding: 4px; border: 1px solid var(--anfal-border); border-radius: var(--r-11); background: var(--anfal-surface); cursor: pointer; }
.color-control input[type="text"] { min-height: 44px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; text-transform: lowercase; direction: ltr; text-align: left; }
.approval-voucher-note { margin: 2px 0 0; padding: 10px 12px; border: 1px solid var(--anfal-gold-150); border-radius: var(--r-11); background: var(--anfal-gold-100); color: var(--anfal-navy-900); font-size: var(--fs-12); font-weight: var(--anfal-weight-strong); line-height: 1.6; }
.approval-voucher-note[hidden] { display: none; }
html[data-theme="dark"] .approval-voucher-note { background: rgba(184, 146, 85, .16); border-color: rgba(184, 146, 85, .38); color: var(--anfal-ink); }
.task-detail-error:empty { display: none; }
.task-detail-error { margin: 14px 0 0; color: var(--anfal-danger, var(--anfal-red-700)); font-size: var(--fs-13); font-weight: var(--anfal-weight-strong); }
.task-detail-preview { display: grid; gap: 8px; margin-top: 14px; padding: 10px; border: 1px solid var(--anfal-border); border-radius: var(--r-14); background: var(--anfal-surface-soft); }
.task-detail-preview[hidden] { display: none; }
.task-detail-preview :is(img, iframe) { width: 100%; max-height: 420px; border: 0; border-radius: var(--r-10); background: #fff; object-fit: contain; }
.task-detail-preview iframe { height: 420px; }
.task-detail-loading { margin: 0; padding: 22px 0; color: var(--anfal-muted); font-size: var(--fs-13); text-align: center; }
.task-detail-newtab { color: var(--anfal-gold-700); font-size: var(--fs-12); font-weight: var(--anfal-weight-strong); text-align: center; text-decoration: none; }
.task-detail-actions:empty { display: none; }
.task-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.task-detail-actions button { min-height: 42px; padding-inline: 14px; }

html[data-theme="dark"] .task-detail-preview { background: var(--anfal-surface-soft); border-color: var(--anfal-border); }
html[data-theme="dark"] :is(.task-detail-amount, .task-detail-note) { background: var(--anfal-surface-soft); border-color: var(--anfal-border); }
html[data-theme="dark"] :is(.task-detail-amount strong, .task-detail-note h5) { color: var(--anfal-ink); }
html[data-theme="dark"] .task-detail-note.is-warning { background: rgba(184, 146, 85, .16); border-color: rgba(184, 146, 85, .38); }

.operations-dashboard { color: var(--anfal-ink); background: var(--anfal-surface); border-color: var(--anfal-border); }
.operations-heading h3 { margin-top: 0; color: var(--anfal-navy-950); }
.operations-heading button { min-height: 44px; background: var(--anfal-navy-900); }
.operations-columns section { background: var(--anfal-surface); border-color: var(--anfal-border); }
.operation-row { min-height: 64px; background: var(--anfal-surface); color: var(--anfal-ink); border-color: var(--anfal-border); }
.operation-row:hover { background: var(--anfal-surface-soft); }
.operation-row:focus-visible { position: relative; z-index: 1; }
.invoice-actions button, .invoice-file { min-height: 42px; padding-inline: 13px; }
.invoice-item, .operation-row, .user-compact-item, .permission-user-card { min-width: 0; }
.invoice-item :is(strong, p, span), .operation-row :is(strong, span), .user-compact-item :is(h4, p) { overflow-wrap: anywhere; }

@media (min-width: 1120px) {
  .employee-custody-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

html[data-theme="dark"] :is(.operations-dashboard, .operations-columns section, .operation-row, .referral-dialog) { background: var(--anfal-surface); border-color: var(--anfal-border); color: var(--anfal-ink); }
html[data-theme="dark"] :is(.custody-status-summary article, .custody-filter-bar, .custody-filter-bar input, .custody-filter-bar select, .invoice-status-summary button, .invoice-filter-bar, .invoice-filter-bar input, .invoice-filter-bar select, .invoice-group-all, .invoice-row-expanded) { background: var(--anfal-surface); border-color: var(--anfal-border); color: var(--anfal-ink); }
html[data-theme="dark"] :is(.custody-status-summary strong, .invoice-table-row summary strong) { color: var(--anfal-ink); }
html[data-theme="dark"] :is(.custody-status-summary span, .invoice-table-row summary small, .invoice-table-row summary time) { color: var(--anfal-muted); }
html[data-theme="dark"] .operation-row:hover { background: var(--anfal-surface-soft); }
html[data-theme="dark"] :is(.operations-heading h3, .operations-columns h4, .referral-heading h2, .referral-dialog label, .referral-history strong) { color: var(--anfal-ink); }
html[data-theme="dark"] :is(.referral-dialog select, .referral-dialog textarea, .referral-heading > button) { background: var(--anfal-surface-soft); border-color: var(--anfal-border); color: var(--anfal-ink); }
html[data-theme="dark"] :is(.manager-support-preview, .manager-response-block, .manager-support-actions button, .manager-attachment-actions button) { background: var(--anfal-surface-soft); border-color: var(--anfal-border); color: var(--anfal-ink); }
html[data-theme="dark"] :is(.admin-finance-donut, .admin-role-donut)::after { background: var(--anfal-surface); }
html[data-theme="dark"] .admin-more-sheet { background: var(--anfal-surface); }
/* Currency hierarchy: keep the amount primary and the SAR unit quiet beneath it. */
.summary-center strong, .employee-donut-center strong { display: block; line-height: 1.05; }
.currency-unit { display: block; margin-top: 5px; color: var(--anfal-muted); font-size: .72em; font-weight: var(--anfal-weight-bold); line-height: 1; }
.employee-custody-stats > div { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--anfal-border); border-radius: var(--r-10); background: var(--anfal-surface-soft); }
.employee-custody-stats > div:last-child { margin-bottom: 0; }
html[data-theme="dark"] .employee-custody-stats > div { background: var(--anfal-surface); border-color: var(--anfal-border); }

/* Keep custody actions consistent with the compact profile control. */
.accountant-heading-actions { display:flex; align-items:center; gap:12px; }
.accountant-heading-actions .funding-launch { width:auto; min-height:42px; margin:0; padding:0 16px; border:1px solid #dce5eb; border-radius: var(--r-11); background:#fff; color:var(--anfal-navy-900); font-size: var(--fs-14); font-weight: var(--anfal-weight-bold); box-shadow:none; }
.accountant-heading-actions .funding-launch:hover { background:var(--anfal-surface-cool); border-color:#b9c8d2; }
.employee-statement-button { border-color:#dce5eb; background:#fff; color:var(--anfal-navy-900); }
.employee-statement-button:hover { background:var(--anfal-surface-cool); border-color:#b9c8d2; }
.custody-funding-action { display:flex; justify-content:flex-start; margin-top:12px; }
.custody-funding-action .funding-launch { width:auto; min-height:42px; margin:0; padding:0 16px; border-color:#dce5eb; background:#fff; color:var(--anfal-navy-900); font-size: var(--fs-14); }
.custody-funding-action .funding-launch:hover { background:var(--anfal-surface-cool); border-color:#b9c8d2; }
.user-push-devices > div > span { display:flex; flex-direction:column; gap:3px; }
.user-push-devices > div > span small { color:var(--anfal-muted); font-size: var(--fs-11); font-weight: var(--anfal-weight-semi); }
html[data-theme="dark"] .accountant-heading-actions .funding-launch,
html[data-theme="dark"] .employee-statement-button,
html[data-theme="dark"] .custody-funding-action .funding-launch { border-color:var(--anfal-border-strong); background:var(--anfal-surface); color:var(--anfal-ink); }
html[data-theme="dark"] .accountant-heading-actions .funding-launch:hover,
html[data-theme="dark"] .employee-statement-button:hover,
html[data-theme="dark"] .custody-funding-action .funding-launch:hover { background:var(--anfal-surface-soft); }
html[data-theme="dark"] :is(.operation-kpi, .notification-details div, .employee-detail-summary, .invoice-group, .users-status-group, .user-compact-item, .inactive-custody-report, .inactive-custody-row, .permission-user-card, .optional-invoice-fields, .amount-confirmation, .receipt-preview, .pdf-preview-frame, .statement-filters, .role-guide span) { background: var(--anfal-surface-soft); border-color: var(--anfal-border); color: var(--anfal-ink); }
/* ===== الطبقة الثانية: ما لا يُرى حتى يُفتح =====
   المسح الأول لم يرَ إلا المعروض. وحين مُسحت الصفحة كلّها - بما لم يُفتح
   بعد - ظهرت ثلاث عشرة سطحًا ناصعًا تنتظر أن تُفتح: النوافذ، وقوائم
   البطاقة، وبطاقات المهامّ، وأشرطة التقدّم. تُصلَح قبل أن تُرى، لا بعد.

   ولا تُمسّ معاينة بطاقة المنشأة: ألوانها من بيانات المالك لا من السمة. */
/* ولوحتا «مضغوط» و«متوازن» في بطاقات المنشأة: لوحتان تحملان البطاقات لا
   بطاقتان، فتتبعان السمة. سقطتا من القائمة فبقيتا بيضاوين في الوضع
   الليلي، والحبر عليهما حبرُ السمة الفاتح - **فأبيضُ على أبيض**: اسم من
   بحوزته البطاقة ورصيدها يختفيان تمامًا، لا يبهتان.
   (٥ أكتوبر ٢٠٢٦؛ لاحظ المالك «مضغوط» فأُصلح، ثم لاحظ «متوازن».) */
html[data-theme="dark"] :is(.modal-card, .card-task, .my-card, .control-inline-form,
    .org-cards-row, .org-cards-split .org-card,
    .org-card-menu, .purchase-capture-card, .users-summary-overview, .funding-proof) {
  background: var(--anfal-surface); color: var(--anfal-ink); border-color: var(--anfal-border);
}
html[data-theme="dark"] :is(.icon-button, .next-page-button, .modal-close-button,
    .org-card-gear-button, .pwa-install-button, .rd-chip, .brand-mark, .home-ic, .scan-status) {
  background: var(--anfal-surface-soft); color: var(--anfal-ink); border-color: var(--anfal-border);
}
html[data-theme="dark"] :is(.statement-chain, .card-task-progress-track) {
  background: var(--anfal-surface-soft); color: var(--anfal-ink);
}
html[data-theme="dark"] .statement-chain.is-warning { background: var(--anfal-pending-soft); }
html[data-theme="dark"] .nav-count { background: var(--anfal-rejected-soft); color: var(--anfal-ink); }
/* والأحمر حبرًا على سطحٍ داكن يغمض؛ يُرفع إلى درجةٍ تُقرأ. */
html[data-theme="dark"] :is(.employee-custody-stats .employee-due dd, small, strong, span, p)[class*="danger"],
html[data-theme="dark"] .is-irreversible { color: var(--anfal-red-250); }

/* والجولة الثالثة: ما غلبته قاعدةٌ أخصّ منه في الجولة الثانية. */
html[data-theme="dark"] :is(.purchase-capture-code, .card-task-banner) {
  background: var(--anfal-surface-soft); color: var(--anfal-ink); border-color: var(--anfal-border);
}
html[data-theme="dark"] :is(.daftra-journal-total, .rd-chip, .rd-chip.is-ok) {
  background: var(--anfal-approved-soft); color: var(--anfal-ink); border-color: #2c5a45;
}

/* والجولة الرابعة: ستّةٌ بلا اسم صنف — تُطال بموضعها لا باسمها.
   عدّادات تبويبات الفواتير بمعرّفاتها، ونقطة الشارة الحيّة، وأزرار عناوين
   الكشف والاعتماد، وزرّا نافذتي مرفق المدير وقائمة الإدارة، ووجه وضع
   العمل. آخر ما بقي ناصعًا في شاشةٍ داكنة. */
html[data-theme="dark"] :is(#invoice-tab-approved, #invoice-tab-pending, #invoice-tab-returned,
    #invoice-tab-rejected, #invoice-tab-all) {
  background: var(--anfal-surface-soft); color: var(--anfal-ink);
}
/* النقطة الحيّة تُلوَّن من صنفين في الفاتح، والتعادل يذهب للأخير في
   الملف - فتُرفع درجةً هنا لتحسم. */
html[data-theme="dark"] .rd-chip.rd-chip-live i,
html[data-theme="dark"] .rd-chip i { background: var(--anfal-approved); }
html[data-theme="dark"] :is(.statement-heading, .approval-heading) > button,
html[data-theme="dark"] :is(#manager-support-preview, .admin-more-sheet, .manager-support-preview) button,
html[data-theme="dark"] .workspace-mode > div {
  background: var(--anfal-surface-soft); color: var(--anfal-ink); border-color: var(--anfal-border);
}

/* ===== ما بقي فاتحًا في الوضع الداكن =====
   مسحٌ حيٌّ على خمس عشرة شاشة (٢٨ سبتمبر ٢٠٢٦) كشف خمسة أسطح تبقى ناصعة
   في شاشةٍ داكنة، واسمًا مستعمَلًا بلا تعريف يجعل الخلفية شفّافة. */
html[data-theme="dark"] { --anfal-surface-raised: #142b33; }
html[data-theme="dark"] .home-alert-row { background: var(--anfal-surface); border-color: var(--anfal-border); border-inline-start-color: var(--anfal-rejected); }
html[data-theme="dark"] .home-go { background: var(--anfal-surface-soft); color: var(--anfal-ink); border-color: var(--anfal-border); }
/* الوسم يُلوَّن من ثلاث طبقات في الوضع الفاتح (.classify-pick.is-main-account
   .classify-account-tag)، فلا يكفي صفّان هنا ليغلبها. */
html[data-theme="dark"] :is(.classify-account-tag, .classify-pick .classify-account-tag, .classify-pick .classify-account-tag.is-card) {
  background: var(--anfal-gold-100); color: var(--anfal-gold-400); border-color: #4a3d28;
}
/* بطاقة المنشأة تحمل نمطًا سطريًّا من ألوان المالك: معاينةُ ورقٍ مطبوع،
   فتبقى بألوانها في السمتين ولا تُثنى. */
html[data-theme="dark"] .journal-source-kind { background: var(--anfal-surface-soft); color: var(--anfal-ink); border-color: var(--anfal-border); }
html[data-theme="dark"] :is(.invoice-group-pending, .invoice-group-approved, .invoice-group-rejected, .invoice-item.amount-adjusted, .amount-adjustment-note, .scan-review-note) { background: var(--anfal-surface-raised); border-color: var(--anfal-border-strong); color: var(--anfal-ink) !important; }
html[data-theme="dark"] :is(.invoice-actions button, .invoice-file, .pdf-preview-button, .retake-button, .manage-user-button, .account-role-button, .permission-toggle, .user-account-actions button, .view-back-button, .page-count-dialog select, .amount-confirmation button, .funding-launch, .secondary-launch) { background: var(--anfal-surface); border-color: var(--anfal-border-strong); color: var(--anfal-ink); }
html[data-theme="dark"] :is(.receipt-preview img, .employee-donut::after) { background: var(--anfal-surface); }
html[data-theme="dark"] :is(.status-manager_approved, .status-pending_manager) { background: rgba(53, 132, 190, .2); color: var(--anfal-line-soft); }
html[data-theme="dark"] .status-manager_rejected { background: rgba(204, 72, 72, .2); color: var(--anfal-red-200); }

@media (max-width: 760px) {
  .referral-overlay { align-items: end; padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .referral-dialog { width: 100%; max-height: 88dvh; padding: 18px; border-radius: 20px 20px 14px 14px; }
  .referral-actions { flex-direction: column; }
  .referral-actions button { width: 100%; min-height: 46px; }
  .invoice-actions button, .invoice-file { min-height: 44px; }
}

/* Phase B.2 — administration control center */
.admin-card-action { width: 100%; min-height: 40px; margin-top: 12px; border: 1px solid var(--anfal-border); background: var(--anfal-surface-soft); color: var(--anfal-navy-900); font-weight: var(--anfal-weight-bold); }
.admin-control-page { display: grid; gap: 18px; }
.control-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.control-page-heading h2 { margin: 0; color: var(--anfal-navy-950); font-size: var(--fs-22); line-height: 1.35; }
.control-page-heading p { margin: 3px 0 0; color: var(--anfal-muted); font-size: var(--fs-12); }
.activity-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding: 15px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface); box-shadow: var(--anfal-shadow-card); }
.activity-filters label, .logs-toolbar label { display: grid; gap: 5px; color: var(--anfal-navy-900); font-size: var(--fs-11); font-weight: var(--anfal-weight-strong); }
.activity-filters :is(input, select), .logs-toolbar select { min-height: 40px; }
.activity-filters button, .logs-toolbar button, .backup-toolbar button { min-height: 40px; padding: 0 16px; border: 1px solid var(--anfal-navy-900); background: var(--anfal-navy-900); color: #fff; font-size: var(--fs-12); font-weight: var(--anfal-weight-bold); }
.activity-records, .backup-history, .system-log-list { overflow: hidden; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface); }
.activity-records article, .backup-history article, .system-log-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 66px; padding: 12px 16px; border-bottom: 1px solid var(--anfal-border); }
.activity-records article:last-child, .backup-history article:last-child, .system-log-list article:last-child { border-bottom: 0; }
.activity-records article div, .backup-history article div, .system-log-list article div { display: grid; gap: 3px; }
.activity-records strong, .backup-history strong, .system-log-list strong { color: var(--anfal-ink); font-size: var(--fs-13); }
.activity-records span, .activity-records time, .backup-history time, .system-log-list span, .system-log-list time { color: var(--anfal-muted); font-size: var(--fs-11); }
.activity-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; }
.activity-pagination button { min-width: 86px; min-height: 40px; border: 1px solid var(--anfal-border); background: var(--anfal-surface); color: var(--anfal-navy-900); font-weight: var(--anfal-weight-bold); }

.settings-tabs { display: flex; gap: 3px; overflow-x: auto; padding: 4px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-control); background: var(--anfal-surface); scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid transparent; background: transparent; color: var(--anfal-muted); font-size: var(--fs-13); font-weight: var(--anfal-weight-strong); white-space: nowrap; }
.settings-tabs button:hover { background: var(--anfal-surface-soft); color: var(--anfal-navy-900); }
.settings-tabs button.is-active { border-color: var(--anfal-navy-900); background: var(--anfal-navy-900); color: #fff; }
.settings-page-state:empty { display: none; }
.settings-section { padding: 20px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface); box-shadow: var(--anfal-shadow-card); }
.settings-section :is(small, form > p) { color: var(--anfal-muted); font-size: var(--fs-12); line-height: 1.65; }
.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-general-column { display: grid; gap: 16px; align-content: start; min-width: 0; }
.settings-form-grid fieldset, .settings-single-form fieldset { min-width: 0; margin: 0; padding: 17px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface-soft); }
.settings-form-grid legend, .settings-single-form legend { padding: 0 7px; color: var(--anfal-text-strong); font-size: var(--fs-14); font-weight: var(--anfal-weight-bold); }
.settings-form-grid label:not(.switch-control, .file-control), .settings-single-form > label:not(.switch-control, .check-control), .settings-number-grid label { display: grid; gap: 6px; margin-top: 9px; color: var(--anfal-navy-900); font-size: var(--fs-12); font-weight: var(--anfal-weight-strong); }
.settings-form-grid :is(input, select, textarea), .settings-single-form :is(input, select, textarea) { width: 100%; min-height: 42px; padding-block: 8px; font-size: var(--fs-14); }
.settings-form-grid textarea, .settings-single-form textarea { min-height: 72px; resize: vertical; }
.settings-logo-preview { display: block; width: min(100%, 280px); height: 104px; margin: 10px auto 14px; object-fit: contain; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-control); background: #fff; }
.file-control { display: flex; align-items: center; justify-content: center; min-height: 42px; border: 1px dashed var(--anfal-border-strong); border-radius: var(--anfal-radius-control); color: var(--anfal-navy-900); font-size: var(--fs-13); font-weight: var(--anfal-weight-bold); cursor: pointer; }
.file-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-control, .check-control { display: flex; align-items: center; gap: 9px; min-height: 42px; color: var(--anfal-ink); font-size: var(--fs-12); font-weight: var(--anfal-weight-strong); cursor: pointer; }
.settings-form-grid .switch-control input, .settings-single-form .switch-control input, .switch-control input { appearance: none; flex: 0 0 38px; width: 38px; min-width: 38px; max-width: 38px; height: 22px; min-height: 22px; padding: 0; margin: 0; border: 1px solid rgba(7,26,44,.12); border-radius: var(--r-999); background: #b9c8d2; box-shadow: none; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.switch-control input::after { display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(7,26,44,.24); content: ""; transition: transform 160ms ease; }
.switch-control input:checked { border-color: var(--anfal-navy-800); background: var(--anfal-navy-800); }
.switch-control input:checked::after { transform: translateX(-16px); }
.switch-control input:focus-visible { outline: 3px solid rgba(184,146,85,.52); outline-offset: 3px; }
.settings-control :is(.switch-control, .check-control) { gap: 10px; min-height: 44px; font-size: var(--fs-13); }
.settings-control .switch-control input { flex-basis: 44px; width: 44px; min-width: 44px; max-width: 44px; height: 24px; min-height: 24px; }
.settings-control .switch-control input::after { width: 18px; height: 18px; }
.settings-control .switch-control input:checked::after { transform: translateX(-20px); }
.check-control input { width: 20px !important; min-height: 20px !important; accent-color: var(--anfal-navy-900); }
.profile-theme-control { margin: 4px 0; }
.settings-save { grid-column: 1 / -1; min-height: 44px; padding: 0 22px; border: 1px solid var(--anfal-navy-900); border-radius: var(--anfal-radius-control); background: var(--anfal-navy-900); color: #fff; font-size: var(--fs-13); font-weight: var(--anfal-weight-bold); justify-self: end; }
.settings-save:hover, .activity-filters button:hover, .logs-toolbar button:hover, .backup-toolbar button:hover { border-color: var(--anfal-navy-800); background: var(--anfal-navy-800); }
.settings-single-form { display: grid; gap: 14px; width: min(100%, 1180px); }
.settings-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-switch-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-note, .settings-warning { padding: 13px 15px; border: 1px solid var(--anfal-amber-200); border-radius: var(--anfal-radius-control); background: var(--anfal-amber-100); color: var(--anfal-amber-700); font-size: var(--fs-13); line-height: 1.6; }
.settings-note p, .settings-warning { margin: 3px 0 0; font-size: var(--fs-12); }

@media (min-width: 901px) {
  [data-settings-section="custody"] .settings-single-form { grid-template-columns: minmax(280px, .8fr) minmax(520px, 1.45fr); align-items: start; }
  [data-settings-section="custody"] .settings-note, [data-settings-section="custody"] > form > .switch-control { grid-column: 1; }
  [data-settings-section="custody"] .settings-number-grid { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  [data-settings-section="invoices"] .settings-single-form { grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.5fr); align-items: start; }
  [data-settings-section="invoices"] fieldset { grid-column: 1; grid-row: 1 / span 2; }
  [data-settings-section="invoices"] :is(.settings-number-grid, .settings-switch-pair) { grid-column: 2; }
  [data-settings-section="invoices"] .settings-warning { grid-column: 1 / -1; }
}
.settings-toggle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.permission-matrix { display: grid; gap: 14px; margin-top: 14px; }
.permission-role-card { padding: 17px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface-soft); }
.permission-role-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.permission-role-card h3 { margin: 0; color: var(--anfal-navy-950); font-size: var(--fs-16); }
.permission-role-card > header span { color: var(--anfal-muted); font-size: var(--fs-12); font-weight: var(--anfal-weight-strong); }
.permission-role-card > header span.is-dirty { color: var(--anfal-pending); }
.permission-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; align-items: start; }
.permission-category-grid fieldset { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-control); background: var(--anfal-surface); }
.permission-category-grid legend { padding-inline: 5px; color: var(--anfal-text-strong); font-size: var(--fs-12); font-weight: var(--anfal-weight-heavy); }
.permission-check { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; min-height: 38px; color: var(--anfal-ink); font-size: var(--fs-12); cursor: pointer; }
.permission-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--anfal-navy-800); }
.permission-check input:focus-visible { outline: 3px solid rgba(44,103,151,.24); outline-offset: 2px; }
.permission-check:has(input:disabled) { color: var(--anfal-muted); cursor: not-allowed; }
.permission-role-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.permission-role-actions button { min-height: 44px; padding-inline: 18px; }
.permission-role-actions .settings-save { grid-column: auto; }
.backup-toolbar, .logs-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.backup-toolbar h3 { margin: 0; color: var(--anfal-navy-950); font-size: var(--fs-15); }
.backup-toolbar p { margin: 4px 0 0; color: var(--anfal-muted); font-size: var(--fs-12); }
.backup-history article { grid-template-columns: minmax(0, 1fr) auto 80px; }
.backup-status { display: inline-flex; justify-content: center; min-width: 72px; padding: 4px 8px; border-radius: var(--r-999); font-size: var(--fs-10); font-weight: var(--anfal-weight-bold); }
.backup-status.succeeded { background: var(--anfal-approved-soft); color: var(--anfal-approved); }
.backup-status.running { background: var(--anfal-pending-soft); color: var(--anfal-pending); }
.backup-status.failed { background: var(--anfal-rejected-soft); color: var(--anfal-rejected); }
.system-log-list article { border-inline-start: 1px solid transparent; }
.system-log-list .log-warning { border-inline-start-color: var(--anfal-pending); }
.system-log-list .log-error { border-inline-start-color: var(--anfal-rejected); }

html[data-theme="dark"] {
  color-scheme: dark;
  --anfal-text-strong: #edf4f8;
  --anfal-bg: #131c27; --anfal-surface: #1a2532; --anfal-surface-soft: #222e3d; --anfal-ink: #edf4f8; --anfal-muted: #a8bac7; --anfal-border: #2f3d4e; --anfal-border-strong: #415367; --anfal-gold-100: #332b20; --anfal-approved-soft: #15372c; --anfal-pending-soft: #3a3020; --anfal-returned-soft: #3b281e; --anfal-rejected-soft: #3d2324; --anfal-shadow-card: 0 8px 24px rgba(0,0,0,.18);
}
html[data-theme="dark"] :is(.access-card, .workspace-panel, .summary-overview, .employee-custody-card, .inactive-custody-report, .users-status-group, .permission-user-card, .admin-dashboard-card, .admin-kpi-grid article, .admin-more-sheet, .profile-dialog, .statement-dialog, .approval-dialog, .notification-dialog, .push-consent-dialog, .page-count-dialog, .pwa-install-dialog) { background: var(--anfal-surface); border-color: var(--anfal-border); color: var(--anfal-ink); }
html[data-theme="dark"] :is(h1,h2,h3,h4,h5,label,strong,dt,.admin-more-sheet h2,.control-page-heading h2,.permission-matrix h3,.backup-toolbar h3) { color: var(--anfal-ink); }
/* ولا يصل ذلك إلى وجه البطاقة: حبرُه من لون بنكه يضعه JS، لا من السمة.
   والقاعدة أعلاه كانت تصبغ **كل** <strong> بحبر الوضع الليلي الفاتح —
   ومنها اسم من بحوزته ورصيدها على وجهٍ أبيض: فيُكتبان ولا يُرَيان.
   والمسمّيات تحتهما كانت تُقرأ لأنها <span> لا <strong>، فبدا الأمر
   «باهتًا» وهو اختفاءٌ تامّ. (لاحظه المالك، ٥ أكتوبر ٢٠٢٦.) */
html[data-theme="dark"] .org-card-face :is(strong, label, dt, h1, h2, h3, h4, h5) { color: inherit; }
html[data-theme="dark"] :is(input,select,textarea,.admin-quick-actions button,.activity-pagination button,.admin-card-action) { background: #10283d; border-color: var(--anfal-border-strong); color: var(--anfal-ink); }
html[data-theme="dark"] .switch-control input { border-color: var(--anfal-border-strong); background: var(--anfal-slate-600); }
html[data-theme="dark"] .switch-control input:checked { border-color: var(--anfal-gold-500); background: var(--anfal-gold-500); }
html[data-theme="dark"] :is(.admin-finance-donut::after,.admin-role-donut::after) { background: var(--anfal-surface); }
html[data-theme="dark"] :is(.invoice-group,.settings-note,.settings-warning) { border-color: var(--anfal-border); }
html[data-theme="dark"] .settings-logo-preview { background: #fff; }
html[data-theme="dark"] :is(.success-toast,.account-created-result) { border-color: #2c7454; background: #123c2c; color: var(--anfal-green-050); }
html[data-theme="dark"] .success-toast span { background: #3aa675; color: #061e14; }
html[data-theme="dark"] :is(.form-error:not(:empty),.invoice-action-error:not(:empty),.status-rejected,.invoice-group-rejected) { border-color: #6b3b38; background: #3d2324; color: var(--anfal-red-075); }
html[data-theme="dark"] .status-cancelled { border-color: var(--anfal-border); background: var(--anfal-surface-soft); color: var(--anfal-muted); }
html[data-theme="dark"] :is(.status-approved,.status-active,.invoice-group-approved) { border-color: #2c7454; background: #15372c; color: #cbe7d9; }
html[data-theme="dark"] :is(.status-pending,.invoice-group-pending,.scan-status.is-processing,.push-reminder-banner) { border-color: var(--anfal-amber-800); background: #3a3020; color: var(--anfal-amber-150); }
html[data-theme="dark"] :is(.status-returned,.settings-warning,.amount-confirmation,.amount-adjusted) { border-color: var(--anfal-amber-750); background: #3b281e; color: #f0dfc0; }
html[data-theme="dark"] :is(.empty-state,.invoice-group-empty,.users-status-empty,.user-compact-item,.inactive-custody-row,.optional-invoice-fields) { border-color: var(--anfal-border); background: var(--anfal-surface-soft); color: var(--anfal-muted); }

/* Users workspace — option 2: compact top tools and a dense role grid. */
@media (min-width: 821px) {
  #admin-tools:not(.funding-only) {
    grid-template-columns: minmax(220px, .78fr) minmax(360px, 1.22fr);
    align-items: start;
  }
  #admin-tools:not(.funding-only) #employee-tool,
  #admin-tools:not(.funding-only) #users-status-summary {
    padding: 18px 20px;
  }
  #admin-tools:not(.funding-only) .add-user-open-button {
    width: fit-content;
    min-width: 150px;
  }
  #permissions-panel .permissions-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  #permissions-panel .permissions-users > .users-status-group {
    grid-column: auto;
  }
}
html[data-theme="dark"] :is(.notification-details div,.profile-avatar,.profile-notifications,.profile-password-launch) { border-color: var(--anfal-border); background: var(--anfal-surface-soft); }
html[data-theme="dark"] :is(.secondary-button,.file-action,.detail-home-button,.employee-statement-button,.view-back-button) { border-color: var(--anfal-gold-800); background: #332b20; color: var(--anfal-gold-150); }
html[data-theme="dark"] :is(input,textarea)::placeholder { color: var(--anfal-slate-300); opacity: 1; }
html[data-theme="dark"] :is(input,select,textarea):disabled { background: #142331; color: #7d8f9b; opacity: 1; }
html[data-theme="dark"] :is(thead th) { background: #10283d; color: var(--anfal-line-quiet); }
html[data-theme="dark"] :is(tbody tr:hover,.table-wrap tr) { background: #122b41; }
/* Final custody-card polish: keep the last source box closed and the action button aligned. */
.employee-custody-stats > div:last-child { border-bottom: 1px solid var(--anfal-border); }
.employee-statement-button { min-height: 44px; border-radius: var(--r-10); font-size: var(--fs-14); font-weight: var(--anfal-weight-bold); }
html[data-theme="dark"] :is(.profile-divider,.profile-summary dl div,.admin-finance-body dl div,.admin-system-status dl div) { border-color: var(--anfal-border); }
html[data-theme="dark"] .notification-center-item { border-color: var(--anfal-gold-800); background: #30291e; }

@media (max-width: 760px) {
  .profile-summary { grid-template-columns: 1fr; }
  .profile-avatar { margin-inline: auto; }
  .profile-summary dl { grid-template-columns: 1fr; }
  .profile-summary > .primary-button { grid-column: 1; width: 100%; }
  .profile-form-heading, .profile-password-launch { align-items: stretch; flex-direction: column; }
  .profile-form-heading .secondary-button, .profile-password-launch .secondary-button { width: 100%; }
  .notification-center-toolbar { align-items: stretch; flex-direction: column; }.notification-center-toolbar button { width: 100%; }
  .notification-center-item { grid-template-columns: 46px minmax(0,1fr); padding: 15px; }.notification-center-icon { width: 44px; height: 44px; border-radius: var(--r-12); }.notification-center-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; width: 100%; }
}

@media (max-width: 900px) {
  .activity-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .admin-control-page { gap: 12px; }
  .control-page-heading h2 { font-size: var(--fs-20); }
  .activity-filters, .settings-form-grid, .settings-number-grid, .settings-switch-pair, .settings-toggle-list, .permission-category-grid { grid-template-columns: 1fr; }
  .permission-role-actions { display: grid; grid-template-columns: 1fr; }
  .permission-role-actions button { width: 100%; }
  .activity-filters button, .settings-save { width: 100%; justify-self: stretch; }
  .settings-section { padding: 13px; border-radius: var(--anfal-radius-card); }
  .settings-tabs { margin-inline: -2px; padding: 4px; }
  .settings-tabs button { min-height: 40px; padding-inline: 10px; }
  .backup-toolbar, .logs-toolbar { align-items: stretch; flex-direction: column; }
  .backup-toolbar button, .logs-toolbar button { width: 100%; }
  .activity-records article, .system-log-list article { grid-template-columns: 1fr; gap: 5px; }
  .backup-history article { grid-template-columns: 1fr auto; }
  .backup-history article > span:last-child { grid-column: 1 / -1; }
  .admin-finance-body dl div, .admin-role-legend > div { min-height: 36px; }
  .admin-finance-body dt, .admin-role-legend span { font-size: var(--fs-12); }
  .admin-finance-body dd, .admin-role-legend strong { font-size: var(--fs-13); }
}

/* Phase B.1 — system administration dashboard */
.nav-group-label { padding: 11px 13px 3px; color: var(--anfal-gold-300); font-size: var(--fs-10); font-weight: var(--anfal-weight-bold); letter-spacing: .07em; }
html[data-theme="dark"] #dashboard-view.rd-shell .nav-group-label::after { background: rgba(255, 255, 255, .12); }
.app-navigation button small { margin-inline-start: auto; color: var(--anfal-line-soft); font-size: var(--fs-9); }
.app-navigation button:disabled { background: transparent; color: var(--anfal-slate-300); opacity: .72; }
.nav-badge, .admin-more-sheet b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-999); background: var(--anfal-rejected); color: #fff; font-size: var(--fs-10); line-height: 20px; text-align: center; }
.system-admin-dashboard { display: grid; gap: 18px; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.admin-kpi-grid article { display: flex; align-items: center; gap: 14px; min-height: 118px; padding: 18px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface); box-shadow: var(--anfal-shadow-card); }
.admin-kpi-icon { display: grid; flex: 0 0 auto; width: 46px; height: 46px; place-items: center; border-radius: var(--r-12); background: var(--anfal-line-quiet); color: var(--anfal-navy-800); }
.admin-kpi-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-kpi-grid article > div { display: grid; min-width: 0; }
.admin-kpi-grid article span:not(.admin-kpi-icon) { color: var(--anfal-muted); font-size: var(--fs-12); }
.admin-kpi-grid article strong { color: var(--anfal-navy-950); font-size: var(--fs-29); line-height: 1.25; font-variant-numeric: tabular-nums; }
.admin-kpi-grid article small { color: var(--anfal-muted); font-size: var(--fs-10); }
.admin-dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.admin-dashboard-card { min-width: 0; padding: 20px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface); box-shadow: var(--anfal-shadow-card); }
.admin-dashboard-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-dashboard-card h3 { margin: 0 0 3px; color: var(--anfal-navy-900); font-size: var(--fs-17); }
.admin-dashboard-card p { margin: 0; color: var(--anfal-muted); font-size: var(--fs-11); }
.admin-dashboard-card > header > button { min-height: 36px; padding: 0 12px; border: 1px solid var(--anfal-gold-300); background: var(--anfal-gold-100); color: var(--anfal-gold-700); font-weight: var(--anfal-weight-bold); }
.admin-finance-summary { grid-column: span 7; }
.admin-role-summary { grid-column: span 5; }
.admin-activity-card { grid-column: span 7; }
.admin-support-column { display: grid; grid-column: span 5; gap: 16px; }
.admin-finance-body { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: center; }
.admin-finance-donut, .admin-role-donut { position: relative; display: grid; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--anfal-approved) 0 var(--approved-stop, 0%), var(--anfal-pending) var(--approved-stop, 0%) var(--pending-stop, 0%), #526b80 var(--pending-stop, 0%) 100%); }
.admin-finance-donut { width: 190px; }
.admin-finance-donut::after, .admin-role-donut::after { position: absolute; width: 68%; height: 68%; border-radius: 50%; background: #fff; content: ""; }
.admin-finance-donut.is-empty { background: var(--anfal-line-quiet); }
.admin-finance-donut > div, .admin-role-donut > strong, .admin-role-donut > span { position: relative; z-index: 1; text-align: center; }
.admin-finance-donut > div { display: grid; }
.admin-finance-donut span { color: var(--anfal-muted); font-size: var(--fs-10); }
.admin-finance-donut strong { color: var(--anfal-navy-950); font-size: var(--fs-15); }
.admin-finance-body dl { margin: 0; }
.admin-finance-body dl div, .admin-system-status dl div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--anfal-line-quiet); }
.admin-finance-body dl div:last-child, .admin-system-status dl div:last-child { border-bottom: 0; }
.admin-finance-body dt, .admin-system-status dt { color: var(--anfal-muted); font-size: var(--fs-11); }
.admin-finance-body dd, .admin-system-status dd { margin: 0; color: var(--anfal-navy-950); font-size: var(--fs-13); font-weight: var(--anfal-weight-heavy); font-variant-numeric: tabular-nums; }
.admin-role-body { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; }
.admin-role-donut { width: 165px; }
.admin-role-donut > strong { align-self: end; color: var(--anfal-navy-950); font-size: var(--fs-26); line-height: 1; }
.admin-role-donut > span { align-self: start; color: var(--anfal-muted); font-size: var(--fs-10); }
.admin-role-legend { display: grid; gap: 7px; }
.admin-role-legend > div { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; min-height: 27px; }
.admin-role-legend i { width: 8px; height: 8px; border-radius: 50%; }
.admin-role-legend span { color: var(--anfal-muted); font-size: var(--fs-11); }
.admin-role-legend strong { color: var(--anfal-navy-950); font-size: var(--fs-12); }
.admin-activity-list { display: grid; }
.admin-activity-list article { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 11px; min-height: 56px; border-bottom: 1px solid var(--anfal-line-quiet); }
.admin-activity-list article:last-child { border-bottom: 0; }
.admin-activity-mark { width: 25px; height: 25px; border-radius: var(--r-8); background: var(--anfal-line-quiet); }
.admin-activity-list strong { color: var(--anfal-ink); font-size: var(--fs-12); }
.admin-activity-list p, .admin-activity-list time { color: var(--anfal-muted); font-size: var(--fs-10); }
.system-health-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--r-999); background: var(--anfal-approved-soft); color: var(--anfal-approved); font-size: var(--fs-10); font-weight: var(--anfal-weight-heavy); white-space: nowrap; }
.system-health-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--anfal-approved); }
.admin-system-status dl { margin: 0; }
.admin-quick-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.admin-quick-actions button { min-height: 42px; border: 1px solid var(--anfal-border); background: var(--anfal-surface-soft); color: var(--anfal-navy-900); font-weight: var(--anfal-weight-bold); }
.admin-more-overlay { position: fixed; z-index: 100; inset: 0; display: grid; align-items: end; padding: 16px; background: rgba(7, 26, 44, .5); }
.admin-more-sheet { display: grid; gap: 7px; width: min(100%, 430px); margin: 0 auto env(safe-area-inset-bottom); padding: 16px; border-radius: var(--r-18); background: #fff; box-shadow: var(--anfal-shadow-float); }
.admin-more-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.admin-more-sheet h2 { margin: 0; color: var(--anfal-navy-950); font-size: var(--fs-19); }
.admin-more-sheet header button { width: 38px; height: 38px; border: 1px solid var(--anfal-border); background: #fff; color: var(--anfal-navy-900); font-size: var(--fs-22); }
.admin-more-sheet > button { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 13px; border: 1px solid var(--anfal-border); background: var(--anfal-surface-soft); color: var(--anfal-navy-900); font-weight: var(--anfal-weight-bold); text-align: right; }

@media (min-width: 1120px) {
  .is-system-admin .workspace-header { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .is-system-admin .workspace-header::-webkit-scrollbar { display: none; }
  .is-system-admin .app-navigation { gap: 2px; }
  .is-system-admin .app-navigation button { min-height: 38px; }
  .is-system-admin .workspace-user { margin-top: auto; }
}

@media (max-width: 1320px) {
  .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-finance-summary, .admin-role-summary, .admin-activity-card, .admin-support-column { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .system-admin-dashboard { gap: 12px; }
  .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .admin-kpi-grid article { align-items: flex-start; min-height: 118px; padding: 13px; }
  .admin-kpi-icon { width: 36px; height: 36px; border-radius: var(--r-10); }
  .admin-kpi-icon svg { width: 19px; height: 19px; }
  .admin-kpi-grid article strong { font-size: var(--fs-24); }
  .admin-kpi-grid article small { line-height: 1.35; }
  .admin-dashboard-grid { display: flex; flex-direction: column; gap: 12px; }
  .admin-dashboard-card, .admin-support-column { width: 100%; }
  .admin-dashboard-card { padding: 15px; border-radius: var(--r-15); }
  .admin-dashboard-card > header { margin-bottom: 14px; }
  .admin-finance-body { grid-template-columns: 142px 1fr; gap: 14px; }
  .admin-finance-donut { width: 140px; }
  .admin-finance-donut strong { font-size: var(--fs-12); }
  .admin-role-body { grid-template-columns: 132px 1fr; gap: 14px; }
  .admin-role-donut { width: 130px; }
  .admin-activity-list article { grid-template-columns: 25px 1fr; padding: 8px 0; }
  .admin-activity-list time { grid-column: 2; }
  .admin-support-column { display: contents; }
  .admin-quick-actions { order: 5; }
  .admin-more-overlay[hidden] { display: none; }
}

@media (max-width: 390px) {
  .admin-kpi-grid article { display: grid; gap: 8px; }
  .admin-finance-body, .admin-role-body { grid-template-columns: 1fr; justify-items: center; }
  .admin-finance-body dl, .admin-role-legend { width: 100%; }
}

/* ---------------------------------------------------------------
   شاشة تحديد حدود الفاتورة
   الصورة هي البطل: كل ما حولها داكن ثابت حتى لا تنافسها الواجهة،
   والنقاط والخطوط ذهبية بحدّ داكن لتُرى فوق ورق أبيض وطاولة سوداء
   على السواء.
   --------------------------------------------------------------- */
.boundary-overlay {
  position: fixed;
  z-index: 1150;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(4, 14, 24, .93);
  overscroll-behavior: contain;
}
.boundary-overlay[hidden] { display: none; }
/* الصفحة خلف الشاشة لا تتمرر مع الإصبع أثناء ضبط الزوايا. */
body.is-boundary-open { overflow: hidden; touch-action: none; }

.boundary-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 10px;
  width: min(720px, 100%);
  max-height: 100%;
  padding: 14px;
  border: 1px solid rgba(232, 200, 135, .28);
  border-radius: var(--r-18);
  background: #0b1f2e;
  color: var(--anfal-surface-cool);
}
.boundary-dialog[hidden] { display: none; }

.boundary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.boundary-head h2 { margin: 0 0 4px; color: #fff; font-size: var(--fs-15); line-height: 1.5; }
.boundary-head p { margin: 0; color: #b9c8d2; font-size: var(--fs-12p5); line-height: 1.6; }
.boundary-count {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(232, 200, 135, .45);
  border-radius: var(--r-999);
  background: rgba(232, 200, 135, .12);
  color: var(--anfal-gold-300);
  font-size: var(--fs-12);
  font-weight: var(--anfal-weight-bold);
  white-space: nowrap;
}
.boundary-count.is-complete { border-color: #4cbf8b; background: rgba(76, 191, 139, .16); color: #8fd9bb; }

.boundary-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.boundary-canvas {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* الإصبع يسحب النقطة، ولا يمرر الصفحة ولا يكبّرها. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.boundary-canvas img { display: block; max-width: 100%; max-height: 62vh; border-radius: var(--r-10); object-fit: contain; pointer-events: none; }
.boundary-shape { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.boundary-handles { position: absolute; inset: 0; }

/* مساحة اللمس 44px، والدائرة المرئية أصغر: الإصبع يمسك أكثر مما يرى. */
.boundary-handle {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
}
.boundary-handle span {
  width: 18px;
  height: 18px;
  border: 3px solid #0b1f2e;
  border-radius: 50%;
  background: var(--anfal-gold-300);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
}
.boundary-handle.is-confirmed span { background: #4cbf8b; box-shadow: 0 0 0 1.5px #fff, 0 0 10px rgba(76, 191, 139, .7); }
.boundary-handle:active { cursor: grabbing; }
.boundary-handle:focus-visible { outline: 2px solid var(--anfal-gold-300); outline-offset: 2px; }

/* المكبّر يقفز إلى الجهة المقابلة للإصبع، ولا يخرج عن الشاشة. */
.boundary-loupe {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 132px;
  height: 132px;
  border: 2px solid var(--anfal-gold-300);
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.boundary-loupe[hidden] { display: none; }
.boundary-loupe.is-left { inset-inline-end: auto; inset-inline-start: 10px; }
/* والزاوية العليا تُسحب بإصبعٍ يأتي من أسفل الشاشة، فيقع المكبّر الثابت في
   الأعلى تحت اليد نفسها. فيهبط إلى الأسفل - نفس منطق الجهة، على المحور الآخر. */
.boundary-loupe.is-below { top: auto; bottom: 10px; }
.boundary-crosshair { position: absolute; inset: 0; }
.boundary-crosshair::before, .boundary-crosshair::after { content: ""; position: absolute; background: rgba(232, 200, 135, .95); }
.boundary-crosshair::before { top: 50%; left: 12%; width: 76%; height: 1.5px; transform: translateY(-50%); }
.boundary-crosshair::after { left: 50%; top: 12%; height: 76%; width: 1.5px; transform: translateX(-50%); }

.boundary-error { min-height: 18px; margin: 0; color: #f3b5aa; font-size: var(--fs-12p5); font-weight: var(--anfal-weight-strong); line-height: 1.6; }
.boundary-error:empty { min-height: 0; }

.boundary-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.boundary-tools button {
  min-height: 42px;
  padding-inline: 13px;
  border: 1px solid rgba(232, 200, 135, .35);
  border-radius: var(--r-11);
  background: rgba(255, 255, 255, .06);
  color: #f0dfc0;
  font: inherit;
  font-size: var(--fs-12p5);
  font-weight: var(--anfal-weight-strong);
  cursor: pointer;
}
.boundary-tools button:hover:not(:disabled) { background: rgba(232, 200, 135, .16); }
.boundary-tools button:disabled { opacity: .45; cursor: not-allowed; }

.boundary-actions { display: flex; gap: 10px; }
.boundary-actions button { flex: 1; min-height: 48px; border: 0; border-radius: var(--r-12); font: inherit; font-size: var(--fs-14); font-weight: var(--anfal-weight-bold); cursor: pointer; }
.boundary-primary { background: var(--anfal-gold-500); color: #10202c; }
.boundary-primary:disabled { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .45); cursor: not-allowed; }
.boundary-secondary { background: transparent; border: 1px solid rgba(255, 255, 255, .28) !important; color: #dce5eb; }

.boundary-compare { display: grid; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.boundary-compare.is-comparing { grid-template-columns: 1fr 1fr; align-items: start; }
.boundary-compare figure { margin: 0; display: grid; gap: 6px; min-width: 0; }
.boundary-compare figcaption { color: #b9c8d2; font-size: var(--fs-12); font-weight: var(--anfal-weight-strong); }
.boundary-compare img { width: 100%; max-height: 52vh; border-radius: var(--r-10); background: #fff; object-fit: contain; }
.boundary-compare.is-comparing img { max-height: 46vh; }
.boundary-compare figure[hidden] { display: none; }
.boundary-result { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }

@media (max-width: 560px) {
  .boundary-dialog { padding: 11px; border-radius: var(--r-14); }
  .boundary-head { flex-direction: column; gap: 8px; }
  .boundary-head h2 { font-size: var(--fs-14); }
  .boundary-canvas img { max-height: 52vh; }
  /* على الهاتف يبقيان تحت بعضهما، والمنطقة وحدها هي التي تتمرّر. */
  .boundary-compare.is-comparing { grid-template-columns: 1fr; }
  .boundary-compare.is-comparing img { max-height: 38vh; }
  .boundary-loupe { width: 112px; height: 112px; }
  .boundary-tools button { flex: 1 1 auto; font-size: var(--fs-12); padding-inline: 10px; }
}

.boundary-modes { display: flex; gap: 8px; }
.boundary-modes button {
  flex: 1;
  min-height: 40px;
  border: 1px solid rgba(232, 200, 135, .3);
  border-radius: var(--r-10);
  background: rgba(255, 255, 255, .05);
  color: #dce5eb;
  font: inherit;
  font-size: var(--fs-12p5);
  font-weight: var(--anfal-weight-strong);
  cursor: pointer;
}
.boundary-modes button.is-active { border-color: var(--anfal-gold-500); background: rgba(184, 146, 85, .26); color: #fff; }

/* إلغاء العملية: خروج صريح بحدود حمراء وكتابة حمراء، لا يُخلط بأزرار
   المتابعة ولا يُضغط بالخطأ. */
.cancel-capture-button {
  width: 100%;
  min-height: 46px;
  margin-top: 9px;
  border: 1.5px solid var(--anfal-danger, var(--anfal-red-700));
  border-radius: var(--r-12);
  background: transparent;
  color: var(--anfal-danger, var(--anfal-red-700));
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--anfal-weight-bold);
  cursor: pointer;
}
.cancel-capture-button:hover { background: rgba(180, 35, 24, .08); }
html[data-theme="dark"] .cancel-capture-button { border-color: var(--anfal-red-250); color: var(--anfal-red-250); }
html[data-theme="dark"] .cancel-capture-button:hover { background: rgba(255, 143, 133, .12); }

/* المصروف بدون فاتورة يُميَّز من الصف نفسه لا من شارة داخله: شريط ذهبي
   على حافة السطر يجعل القائمة تُقرأ بلمحة، بلون الهوية لا بلون تحذير. */
.invoice-table-row.is-no-invoice, .invoice-item.is-no-invoice {
  border-inline-start: 3px solid var(--anfal-gold-500, #b89255);
  background: linear-gradient(90deg, rgba(184, 146, 85, .07), transparent 55%);
}
html[data-theme="dark"] :is(.invoice-table-row, .invoice-item).is-no-invoice {
  border-inline-start-color: var(--anfal-gold-300);
  background: linear-gradient(90deg, rgba(216, 184, 127, .12), transparent 55%);
}


/* ===== الوضع الليلي: ما بقي فاتحًا =====
   الصناديق المضافة حديثًا كُتبت بألوان حرفية، والوضع الليلي يقرأ الرموز.
   كل صندوق هنا يحتفظ بلون حدّه المميِّز - فهو ما يفرّق بينها - ويأخذ
   سطحًا داكنًا ونصًّا فاتحًا. */
html[data-theme="dark"] .operations-tasks header { background: rgba(184, 146, 85, .14); }
html[data-theme="dark"] .operation-row:hover { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .operation-row.is-action { background: rgba(184, 146, 85, .10); }
html[data-theme="dark"] .operation-row.is-action:hover { background: rgba(184, 146, 85, .16); }
html[data-theme="dark"] .operations-follow-up-label { color: var(--anfal-muted); }
html[data-theme="dark"] :is(.operations-follow-up-label::before, .operations-follow-up-label::after) { background: var(--anfal-border); }

html[data-theme="dark"] .invoice-file-actions { background: var(--anfal-surface-soft); border-color: var(--anfal-border); }
html[data-theme="dark"] .invoice-files-label { color: var(--anfal-muted); }
html[data-theme="dark"] .invoice-file-actions button { background: var(--anfal-surface); border-color: var(--anfal-border); color: var(--anfal-ink); }
html[data-theme="dark"] .invoice-file-actions button:hover { background: rgba(255, 255, 255, .06); }

html[data-theme="dark"] .invoice-trail-note { background: var(--anfal-surface-soft); border-color: var(--anfal-border); border-right-color: #7d8f9b; color: var(--anfal-ink); }
html[data-theme="dark"] .invoice-review-note { background: rgba(63, 125, 92, .12); border-color: rgba(63, 125, 92, .35); border-right-color: #4cbf8b; color: var(--anfal-ink); }
html[data-theme="dark"] .invoice-referral-note { background: rgba(52, 116, 154, .14); border-color: rgba(52, 116, 154, .38); border-right-color: #7d8f9b; color: var(--anfal-ink); }
html[data-theme="dark"] :is(.cancel-pending-note, .invoice-notes-row > .amount-adjustment-note) { background: rgba(184, 146, 85, .14); border-color: rgba(184, 146, 85, .38); color: var(--anfal-ink); }
html[data-theme="dark"] .invoice-notes-row > .expense-return-callout { background: rgba(184, 146, 85, .12); border-color: rgba(184, 146, 85, .34); color: var(--anfal-ink); }
html[data-theme="dark"] :is(.invoice-trail-note, .invoice-review-note, .invoice-referral-note, .invoice-notes-row > .expense-return-callout) :is(h5, strong) { color: var(--anfal-ink); }
html[data-theme="dark"] :is(.invoice-trail-note, .invoice-review-note, .invoice-referral-note, .invoice-notes-row > .expense-return-callout) small { color: var(--anfal-muted); }

html[data-theme="dark"] :is(.referral-history-inline, .invoice-log-actions .expense-timeline-button) { background: var(--anfal-surface); border-color: var(--anfal-border); color: var(--anfal-ink); }

/* شارة نوع الصفّ في شريط البطاقات: في الوضع الداكن تُقرأ بحبرٍ فاتح. */
html[data-theme="dark"] .receipt-alert-row .card-alert-kind {
  background: rgba(226, 75, 74, .18);
  color: var(--anfal-red-250);
}

/* سجلّ الكشوف في الوضع الداكن. */
html[data-theme="dark"] .statement-account { background: var(--anfal-surface); border-color: var(--anfal-border); }
html[data-theme="dark"] .statement-account strong,
html[data-theme="dark"] .statement-imports-title { color: var(--anfal-ink); }
html[data-theme="dark"] .statement-account-gap.is-match { background: rgba(29,158,117,.18); color: #9fe1cb; }
html[data-theme="dark"] .statement-account-age.is-fresh { color: #9fe1cb; }
html[data-theme="dark"] .statement-account-gap.is-gap { background: rgba(226,75,74,.18); color: var(--anfal-red-250); }
html[data-theme="dark"] .statement-account-gap.is-unknown { background: rgba(255,255,255,.08); color: var(--anfal-slate-300); }

/* أيقونتا سطر «ما بحوزته» في الوضع الداكن: نفس المعنى بحبرٍ أفتح. */
html[data-theme="dark"] .onhand-part.is-custody { color: var(--anfal-gold-200); }
html[data-theme="dark"] .onhand-part.is-card { color: #8fd0e3; }

/* ===== الوضع الداكن: جداول شُيّدت بعد آخر مراجعة له =====
   جدول المراجعة يستعمل لونًا احتياطيًا فاتحًا (var(--anfal-surface-cool)) حين يغيب الرمز،
   ونصّه يرث حبرًا كحليًا - فيصير عنوانٌ فاتح على فاتح، ومتنٌ كحليّ على
   داكن. كلاهما يُقرأ بصعوبة، وقد ظهر في «سجلّ الكشوف» أوّل ليلة عُرض. */
html.rd-shell[data-theme="dark"] .daftra-journal-review th,
html[data-theme="dark"] .daftra-journal-review th {
  background: #10283d;
  color: var(--anfal-line-quiet);
}
html.rd-shell[data-theme="dark"] .daftra-journal-review td,
html.rd-shell[data-theme="dark"] .statement-page-table-wrap td,
html[data-theme="dark"] .daftra-journal-review td,
html[data-theme="dark"] .statement-page-table-wrap td {
  color: var(--anfal-ink);
  border-bottom-color: var(--anfal-border);
}
html[data-theme="dark"] .daftra-journal-review td small,
html[data-theme="dark"] .daftra-journal-review .daftra-review-role,
html[data-theme="dark"] .daftra-journal-review .daftra-review-center {
  color: var(--anfal-muted);
}
html.rd-shell[data-theme="dark"] .statement-page-table-wrap,
html[data-theme="dark"] .statement-page-table-wrap {
  background: transparent;
  border-color: var(--anfal-border);
}
/* أشرطة أنماط العرض: خلفية بيضاء صريحة في الوضع الفاتح لا تنقلب وحدها. */
html[data-theme="dark"] .org-cards-modes button {
  background: var(--anfal-surface);
  border-color: var(--anfal-border);
  color: var(--anfal-muted);
}
html[data-theme="dark"] .org-cards-modes button.is-active {
  border-color: var(--anfal-gold-500);
  color: var(--anfal-ink);
}
html[data-theme="dark"] .statement-account {
  background: var(--anfal-surface);
  border-color: var(--anfal-border);
}
html[data-theme="dark"] .statement-account strong { color: var(--anfal-ink); }
html[data-theme="dark"] .statement-link-account {
  background: var(--anfal-surface-soft);
  border-color: var(--anfal-border);
}
html[data-theme="dark"] .statement-link-account label { color: var(--anfal-ink); }
/* جدول الحسابات البنكية يُلوَّن بمُحدِّد فيه مُعرِّف، فلا تغلبه قاعدةٌ
   بصنفٍ وسمة. يُطابَق بمثل تخصيصه. */
html[data-theme="dark"] #org-cards-page .statement-page-table-wrap {
  background: transparent;
  border-color: var(--anfal-border);
}
/* «تسليم لموظف» وأخواته: حبرٌ كحليّ صريح على خلفيةٍ داكنة. */
html[data-theme="dark"] #org-cards-page .link-button,
html[data-theme="dark"] .org-card .link-button { color: var(--anfal-gold-150); }

/* استبعاد حركة من الترحيل: فعلٌ نادرٌ لا يزاحم صندوق الاختيار. */
.daftra-funding-exclude {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-11);
  color: var(--anfal-caution-ink);
  white-space: nowrap;
}
html[data-theme="dark"] .daftra-funding-exclude { color: var(--anfal-amber-400); }

/* ===== قيود عكسية مستحقّة ===== */
/* لوحة إنذار لا جدول: بقاؤها يعني أن دفترنا ودفترة مفترقان.
   والقيد سطران، فيُعرضان سطرًا أفقيًا - الجدول كان يفرش لهما رأسًا
   وأربعة أعمدة أوسع منهما، والزرّان كانا بعرض الصفحة وهما فعلٌ على صفّ. */
.reversal-panel {
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(161, 39, 39, .3);
  border-radius: var(--r-12);
  background: rgba(161, 39, 39, .05);
}
.reversal-panel h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 3px;
  font-size: var(--fs-14);
  color: var(--anfal-danger-ink);
}
.reversal-panel h3::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--reversal-warn) center / contain no-repeat;
  mask: var(--reversal-warn) center / contain no-repeat;
}
.reversal-panel .field-help { margin: 0 0 11px; font-size: var(--fs-12); }

.reversal-row {
  padding: 11px 12px;
  margin-top: 8px;
  border: 1px solid rgba(161, 39, 39, .16);
  border-radius: var(--r-10);
  background: var(--rd-surface, #fff);
}
.reversal-row:first-child { margin-top: 0; }
.reversal-row > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.reversal-row > header strong { display: block; font-size: var(--fs-14); }
.reversal-row > header small { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }
.reversal-amount {
  font-size: var(--fs-17);
  font-weight: var(--anfal-weight-semi);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* السطر الأفقي: مدين ← دائن. يلتفّ على الشاشات الضيقة ولا يُعصر. */
.reversal-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-8);
  background: var(--rd-surface-soft, var(--anfal-surface-cool));
  font-size: var(--fs-12);
}
.reversal-side { color: var(--rd-muted, var(--anfal-slate-500)); }
.reversal-lines .daftra-account-code { font-size: var(--fs-12); font-weight: var(--anfal-weight-semi); }
.reversal-account-name { color: var(--rd-muted, var(--anfal-slate-500)); }
.reversal-arrow { margin: 0 6px; color: var(--rd-muted, var(--anfal-slate-400)); }

.reversal-reason { margin: 9px 0 0; font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }
.reversal-error { margin: 8px 0 0; font-size: var(--fs-12); color: var(--anfal-danger-ink); }

/* الزرّان بحجمهما لا بعرض الصفحة: الفعل على صفّ لا على الشاشة. */
.reversal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.reversal-actions button {
  width: auto;
  flex: 0 0 auto;
  min-height: 38px;
  margin-top: 0;
  padding: 0 16px;
  border-radius: var(--r-9);
  font-size: var(--fs-13);
  font-weight: var(--anfal-weight-strong);
}

html[data-theme="dark"] .reversal-panel {
  border-color: rgba(224, 122, 122, .32);
  background: rgba(224, 122, 122, .07);
}
html[data-theme="dark"] .reversal-panel h3 { color: var(--anfal-red-150); }
html[data-theme="dark"] .reversal-row {
  background: #1b1f27;
  border-color: rgba(224, 122, 122, .2);
}
html[data-theme="dark"] .reversal-row > header strong { color: var(--anfal-line-quiet); }
html[data-theme="dark"] .reversal-amount { color: var(--anfal-line-quiet); }
html[data-theme="dark"] .reversal-lines { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .reversal-lines .daftra-account-code { color: var(--anfal-line-quiet); }
html[data-theme="dark"] .reversal-side,
html[data-theme="dark"] .reversal-account-name,
html[data-theme="dark"] .reversal-arrow,
html[data-theme="dark"] .reversal-reason,
html[data-theme="dark"] .reversal-row > header small { color: var(--anfal-slate-300); }
html[data-theme="dark"] .reversal-error { color: var(--anfal-red-150); }

/* ===== القيود المرفوعة: قائمة وتفصيل ===== */
/* القيد قد يحمل أربعة عشر سطرًا؛ القائمة تثبت والتفصيل وحده يتبدّل. */
.journal-browser {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  /* إيقاعٌ واحد داخل الصندوق: نفس الستّة التي بين بطاقات القيود، بين
     شريط البحث وما تحته وبين عمود القائمة ولوح التفصيل. كانت أربعة عشر،
     فبدا الصندوق ثلاث قطعٍ متباعدة لا صندوقًا واحدًا. */
  gap: 6px;
  align-items: start;
}
.journal-browser-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.journal-pick {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rd-line, #e4e6ea);
  border-radius: var(--r-10);
  background: var(--rd-surface, #fff);
  text-align: start;
  cursor: pointer;
}
.journal-pick:hover { border-color: var(--rd-line-strong, var(--anfal-line-soft)); }
.journal-pick.is-picked { border-color: var(--anfal-navy-600); border-width: 2px; padding: 8px 10px; }
.journal-pick strong { display: block; font-size: var(--fs-14); font-weight: var(--anfal-weight-semi); }
.journal-pick small { display: block; margin-top: 2px; font-size: var(--fs-11); color: var(--rd-muted, var(--anfal-slate-500)); }
.journal-pick-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.journal-badge {
  font-style: normal;
  font-size: var(--fs-11);
  padding: 2px 8px;
  border-radius: var(--r-99);
}
.journal-badge.is-invoice { background: rgba(31, 59, 99, .1); color: var(--anfal-navy-600); }
.journal-badge.is-funding { background: rgba(154, 107, 18, .12); color: var(--anfal-caution-ink); }
.journal-badge.is-pending { background: rgba(161, 39, 39, .1); color: var(--anfal-danger-ink); }
/* البنك أخضرُ المطابقة نفسه: اللون الذي يعني «من الكشف» أينما ظهر. */
.journal-badge.is-bank { background: rgba(29, 107, 67, .1); color: var(--anfal-green-700); }

/* شريط بحث القيود يأخذ شكل شريط الفواتير نفسه: نفس الصفوف، فلا يتعلّم
   القارئ شكلين لفعلٍ واحد. وهو عريضٌ فوق الشاشة لا داخل عمود القائمة. */
/* البحث سطرٌ في أعلى الصندوق يمتدّ على عموديه — القائمة والتفصيل —
   كما في شاشة الفواتير. ووضعُه خارج الصندوق لا يثبت: طبقة التصميم تلفّ
   الصندوق في بطاقة وترفعها فوق ما كان قبلها، فينزل الشريط تحت الكل.

   وحقلٌ واحد لا أربعة: شبكة شريط الفواتير تحجز ثلاثة أعمدة بعرض ١٥٠
   لكلٍّ منها، فيبقى البحث في ربعه وثلاثة أرباعه فراغ. */
.journal-filter-bar { grid-column: 1 / -1; grid-template-columns: 1fr; }
.journal-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.journal-pager-nav { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; width: 100%; gap: 6px; direction: rtl; }
.journal-pager small { text-align: center; font-size: var(--fs-11); color: var(--rd-muted, var(--anfal-slate-500)); }
.journal-pager small strong { color: var(--rd-navy, #102a43); font-size: var(--fs-13); }
.journal-pager button { width: 34px; height: 30px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; }
.journal-pager button svg { width: 16px; height: 16px; }

.journal-browser-detail {
  border: 1px solid var(--rd-line, #e4e6ea);
  border-radius: var(--r-12);
  background: var(--rd-surface, #fff);
  padding: 12px 14px;
}
.journal-detail-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.journal-detail-head strong { display: block; font-size: var(--fs-16); }
.journal-detail-head small { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }
.journal-section-title {
  margin: 12px 0 6px;
  font-size: var(--fs-12);
  font-weight: var(--anfal-weight-semi);
}
.journal-section-title.is-funding { color: var(--anfal-caution-ink); }
.journal-section-title.is-invoice { color: var(--anfal-navy-600); }
.journal-section-title.is-bank { color: var(--anfal-green-700); }
.journal-section-title.is-purchase { color: #5b3f8a; }
.journal-browser-detail .empty-state { margin: 0; }

.journal-browser-picks { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 860px) {
  .journal-browser { grid-template-columns: 1fr; }
  /* الشريط الأفقي للقيود وحدها: البحث فوقه والترقيم تحته يبقيان عريضين،
     ولو دخلا الشريط لصارا صندوقين صغيرين يجريان معه. */
  .journal-browser-list { flex-direction: column; }
  .journal-browser-picks { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .journal-pick { min-width: 150px; }
}

html[data-theme="dark"] .journal-pick,
html[data-theme="dark"] .journal-browser-detail {
  background: #1b1f27;
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .journal-pick.is-picked { border-color: var(--anfal-slate-300); }
html[data-theme="dark"] .journal-pick strong,
html[data-theme="dark"] .journal-detail-head strong { color: var(--anfal-line-quiet); }
html[data-theme="dark"] .journal-pick small,
html[data-theme="dark"] .journal-detail-head small { color: var(--anfal-slate-300); }
html[data-theme="dark"] .journal-badge.is-invoice { background: rgba(127, 166, 217, .16); color: #b9c8d2; }
html[data-theme="dark"] .journal-badge.is-funding { background: rgba(224, 185, 105, .16); color: var(--anfal-gold-400); }
html[data-theme="dark"] .journal-badge.is-pending { background: rgba(229, 138, 138, .16); color: var(--anfal-red-150); }
html[data-theme="dark"] .journal-section-title.is-funding { color: var(--anfal-gold-400); }
html[data-theme="dark"] .journal-section-title.is-invoice { color: #b9c8d2; }
html[data-theme="dark"] .journal-badge.is-bank { background: rgba(29, 158, 117, .18); color: #9fe1cb; }
html[data-theme="dark"] .journal-section-title.is-bank { color: #9fe1cb; }

/* ===== أوعية كشف الحساب ===== */
/* العهدة ذمّة والبطاقة أصل: يُختار أحدهما، ويبقى مجموعهما ظاهرًا -
   وهو الرقم الوحيد الذي يربطهما. */
.statement-pots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.statement-pot {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--rd-line, #e4e6ea);
  border-radius: var(--r-12);
  background: var(--rd-surface, #fff);
  text-align: start;
  font: inherit;
  cursor: pointer;
}
.statement-pot:disabled { cursor: default; opacity: .55; }
.statement-pot:not(:disabled):hover { border-color: var(--rd-line-strong, var(--anfal-line-soft)); }
.statement-pot.is-picked { border: 2px solid var(--anfal-navy-600); padding: 10px 12px; }
.statement-pot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-13);
  font-weight: var(--anfal-weight-semi);
  color: var(--rd-ink, #0d2c4a);
}
.statement-pot-head svg {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--rd-muted, var(--anfal-slate-500));
}
.statement-pot.is-picked .statement-pot-head svg { color: var(--anfal-navy-600); }
.statement-pot strong {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-22);
  font-weight: var(--anfal-weight-semi);
  font-variant-numeric: tabular-nums;
}
.statement-pot small { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }
.statement-pot.is-total {
  border-color: transparent;
  background: rgba(31, 59, 99, .07);
  cursor: default;
}
.statement-pot.is-total .statement-pot-head,
.statement-pot.is-total strong,
.statement-pot.is-total small { color: var(--anfal-navy-600); }

html[data-theme="dark"] .statement-pot {
  background: #1b1f27;
  border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .statement-pot.is-picked { border-color: var(--anfal-slate-300); }
html[data-theme="dark"] .statement-pot-head,
html[data-theme="dark"] .statement-pot strong { color: var(--anfal-line-quiet); }
html[data-theme="dark"] .statement-pot small,
html[data-theme="dark"] .statement-pot-head svg { color: var(--anfal-slate-300); }
html[data-theme="dark"] .statement-pot.is-picked .statement-pot-head svg { color: var(--anfal-slate-300); }
html[data-theme="dark"] .statement-pot.is-total {
  background: rgba(127, 166, 217, .12);
  border-color: transparent;
}
html[data-theme="dark"] .statement-pot.is-total .statement-pot-head,
html[data-theme="dark"] .statement-pot.is-total strong,
html[data-theme="dark"] .statement-pot.is-total small { color: #b9c8d2; }

/* ترويسة جدول الكشف: العنوان وزرّ الورقة معًا - الورقة تخصّ هذا الكشف
   لا الصفحة، فمكانها بجانب عنوانه لا فوق الشاشة كلها. */
.statement-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.statement-table-head h3 { margin: 0; }
.statement-table-head .statement-pdf-button {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  font-size: var(--fs-13);
}

/* «تصحيح» بجانب رصيد البداية: ممكنٌ ما دام لم يُبنَ عليه شيء، وصغيرٌ
   لأنه استثناء لا إجراء يومي. */
.org-opening-fix { margin-inline-start: 10px; font-size: var(--fs-12); color: var(--anfal-caution-ink); }
html[data-theme="dark"] .org-opening-fix { color: var(--anfal-gold-400); }

.statement-ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.statement-ledger-head h3 { margin: 0; }
.statement-ledger-head .secondary-button { width: auto; min-height: 36px; margin: 0; padding: 0 16px; font-size: var(--fs-13); }

/* ===== تصنيف الحركات ===== */
/* قائمة يمينًا وتفصيل يسارًا: الحركة سطرٌ قصير، وتفصيلها نموذجٌ طويل،
   وجمعهما في عمودٍ واحد يدفن أحدهما. */
.classify-shell {
  display: grid;
  /* ثلاثة أعمدة: القائمة، والنموذج، والمستند. المستند بجانب الحقول لا
     في نافذة تغطّيها — منه تُقرأ الأرقام أثناء الكتابة.
     والحصّة الكبرى له: الحقول أربعة أسطر قصيرة، والورقة تُقرأ منها أرقام. */
  grid-template-columns: minmax(0, 190px) minmax(0, 300px) minmax(0, 1.6fr);
  gap: 10px;
  align-items: start;
}
.classify-list { display: flex; flex-direction: column; gap: 6px; overflow: visible; }
.classify-list-pager { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; align-items: center; gap: 6px; width: 100%; margin-top: 4px; direction: rtl; }
.classify-list-pager small { text-align: center; font-size: var(--fs-11); color: var(--rd-muted, var(--anfal-slate-500)); }
.classify-list-pager small strong { color: var(--rd-navy, #102a43); font-size: var(--fs-13); }
.classify-list-pager button { width: 34px; height: 30px; min-height: 30px; margin: 0; padding: 4px; display: inline-flex; align-items: center; justify-content: center; }
.classify-list-pager button svg { width: 16px; height: 16px; }
.classify-pick {
  display: block; width: 100%; margin: 0; padding: 10px 12px;
  border: 1px solid var(--rd-line, #e4e6ea); border-radius: var(--r-10);
  background: var(--rd-surface, #fff); text-align: start; font: inherit; cursor: pointer;
}
.classify-pick:hover { border-color: var(--rd-line-strong, var(--anfal-line-soft)); }
/* الصفّ المختار يُعرف بخلفيته لا بإطارٍ عريض يحيط به: الإطار كان يزاحم
   شريط البنك على اليمين فيقرأ الاثنان حدًّا واحدًا سميكًا. */
.classify-pick.is-picked { border-color: var(--anfal-navy-600); background: color-mix(in srgb, var(--anfal-navy-600) 7%, #fff); }
.classify-pick.is-reviewed { border-color:#79b89a; background:#f6fbf8; }
.classify-pick.is-reviewed.is-picked { border-color:#2c7454; box-shadow:0 0 0 2px rgba(47,125,87,.12); }
.classify-pick.is-reviewed small { color:var(--anfal-green-700); font-weight: var(--anfal-weight-strong); }
.classify-pick.is-dirty { border-color:var(--anfal-gold-400); background:var(--anfal-gold-050); }
.classify-pick.is-dirty small { color:var(--anfal-amber-750); font-weight: var(--anfal-weight-strong); }
.classify-pick strong { display: block; font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
.classify-pick strong.is-debit { color: var(--anfal-danger-ink); }
.classify-pick strong.is-credit { color: var(--anfal-green-700); }
.classify-pick span { display: block; margin-top: 2px; font-size: var(--fs-12); overflow-wrap: anywhere; }
.classify-pick small { display: block; margin-top: 3px; font-size: var(--fs-11); color: var(--rd-muted, var(--anfal-slate-500)); }

.classify-detail {
  border: 1px solid var(--rd-line, #e4e6ea); border-radius: var(--r-12);
  background: var(--rd-surface, #fff); padding: 14px 16px;
}
.classify-known { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rd-line-soft, var(--anfal-line-quiet)); }
.classify-known > strong { display: block; font-size: var(--fs-20); font-variant-numeric: tabular-nums; }
.classify-known > strong.is-debit { color: var(--anfal-danger-ink); }
.classify-known > strong.is-credit { color: var(--anfal-green-700); }
.classify-known dl {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px; margin: 10px 0 0; font-size: var(--fs-12);
}
.classify-known dt { color: var(--rd-muted, var(--anfal-slate-500)); }
.classify-known dd { margin: 0; overflow-wrap: anywhere; }

.classify-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.classify-proof .secondary-button { width: auto; min-height: 36px; margin: 0; padding: 0 14px; font-size: var(--fs-13); }
/* كانا يتمدّدان ليملآ السطر يوم كانا يحملان اسم الملف وكلمة «استبدله».
   وبعد أن صارا أيقونتين، التمدّد يجعل رسمًا صغيرًا في وسط زرٍّ عريض. */
.classify-proof .classify-proof-pick { flex: 0 0 auto; min-width: 0; }
.bank-capture-dialog>section{justify-items:center;text-align:center}
.bank-capture-qr{width:220px;height:220px;max-width:75vw;border:8px solid #fff;border-radius: var(--r-12)}
.bank-capture-code{font-size:1.45rem;letter-spacing:.22em;color:#12385c}

/* أسطرٌ تحت بعضها لا عمودين: العمودان يوسّعان النموذج ويضيّقان الورقة. */
/* شاشتان بنموذجٍ واحد: التصنيف والمشتريات يسألان نفس السؤال بنفس البنية
   (label > span + control)، وكانتا تتباينان في التباعد والمقاس وحدهما.
   فتُوحَّد القواعد هنا، وتبقى ألوان حالة الحقل خاصّةً بالمشتريات. */
.classify-form, .purchase-review-form { display: grid; grid-template-columns: 1fr; gap: 9px; }
.classify-field, .purchase-field { display: grid; gap: 4px; }
.classify-field > span, .purchase-field > span { font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }
.classify-field input, .classify-field select,
.purchase-field input, .purchase-field select { width: 100%; }
/* القيمة في وسط صندوقها لا ملتصقةً بحافّته: الصفّ يُقرأ عمودًا واحدًا
   فتستقيم العين عليه، ولا تبدو الأرقام ملحومةً بالإطار. */
.classify-field :is(input, select), .purchase-field :is(input, select) { text-align: center; }
.classify-field :is(input, select):disabled, .purchase-field :is(input, select):disabled { text-align: center; }

.classify-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.classify-actions button { width: auto; min-height: 38px; margin: 0; padding: 0 16px; font-size: var(--fs-13); }

/* المستند: طويلٌ عمدًا. ورقةٌ تُقرأ منها أرقام لا تُقرأ في صندوق صغير. */
.classify-doc {
  border: 1px solid var(--rd-line, #e4e6ea);
  border-radius: var(--r-12);
  background: var(--rd-surface-soft, var(--anfal-surface-cool));
  padding: 10px 12px;
  position: sticky;
  top: 12px;
}
.classify-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; font-size: var(--fs-12);
}
.classify-doc-head strong { overflow-wrap: anywhere; }
.classify-doc-view {
  display: block; width: 100%; height: 72vh; min-height: 520px;
  border: 1px solid var(--rd-line, #e4e6ea); border-radius: var(--r-8);
  background: #fff; object-fit: contain;
}
#purchases-shell .classify-detail { min-height: 0; }
#purchases-shell .classify-doc { min-height: calc(100% - 2px); }
#purchases-shell .purchase-image-viewport { min-height: 720px; }
#purchases-shell .classify-doc-view { height:calc(100vh - 220px); min-height:720px; }
.classify-doc .empty-state { margin: 0; padding: 40px 12px; text-align: center; }

/* ===== مراجعة الفواتير =====
   لا تصميم جديد: الشاشة تستعمل أصناف شاشة تصنيف الحركات نفسها، فتبقى
   الشاشتان واحدةً ولا تنحرف إحداهما عن الأخرى عند أي تعديل لاحق.
   وما يلي ضبطُ ما يُنقل إليها من الصفّ القديم فقط. */
#invoice-review > .classify-shell { align-items: start; }
#invoice-review-side { display: grid; gap: 12px; }
#invoice-review-side > .classify-known { margin: 0; padding-bottom: 0; border: 0; }

/* حقول الاعتماد داخل الصندوق: أسطرٌ تحت بعضها بعرض الصندوق، ويطول
   الصندوق بها إلى ما يقارب طول الورقة — وهي المساحة التي كانت تأخذها
   النافذة. */
.invoice-approval-host { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rd-line-soft, var(--anfal-line-quiet)); }
.invoice-approval-host label { font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); margin: 0; }
/* حقولٌ أقصر داخل الصندوق: ستّة حقول بارتفاع النافذة تجعل الصندوق
   أطول من الورقة بمئتي بكسل، فيُدفع الاعتماد خارج الشاشة. */
.invoice-approval-host input, .invoice-approval-host select {
  width: 100%; height: 36px; min-height: 36px; margin: 0; font-size: var(--fs-13);
}
.invoice-approval-host .approval-heading { margin: 0; }
.invoice-approval-host > p { margin: 0; font-size: var(--fs-11p5); color: var(--rd-muted, var(--anfal-slate-500)); line-height: 1.5; }
.invoice-approval-host .field-help { font-size: var(--fs-11); }
.invoice-approval-host form { display: grid; gap: 4px; }
.invoice-approval-host .approval-heading h2 { font-size: var(--fs-15); margin: 0; }
.invoice-approval-host .approval-heading span { font-size: var(--fs-11p5); color: var(--rd-muted, var(--anfal-slate-500)); }
.invoice-approval-host .approval-actions { display: flex; gap: 6px; margin-top: 4px; }
.invoice-approval-host .approval-actions button { flex: 1 1 0; width: auto; min-height: 38px; margin: 0; font-size: var(--fs-12p5); }
/* لا تمرير في صندوق القرار: أثناء الاعتماد تُطوى الحقائق إلى ثلاثة
   أسطر — المبلغ والفاتورة والموظف — وتختفي القرارات ومسار المصروف،
   فتتّسع الحقول كلّها بلا تمرير. وحدها الثلاثة تكفي للتعريف بما يُعتمد. */
/* اسم المكان داخل صندوق العمل، كما في شاشة تصنيف الحركات: من يفتح
   الشاشة على طابورٍ بعينه يقرأ أين هو وما المطلوب منه. وبصنفٍ خاصّ لا
   بصنف ترويسة الطبقة — لئلا تنقلها الطبقة من مكانها ظنًّا أنها ترويستها. */
.invoice-review-head { margin: 0 0 10px; }
.invoice-review-head .rd-title { margin: 0; font-size: var(--fs-17); }
.invoice-review-head .rd-sub { margin: 2px 0 0; font-size: var(--fs-12p5); color: var(--rd-muted, var(--anfal-slate-500)); }

/* أثناء الاعتماد تختفي قائمة الفواتير أيضًا: المحاسب في فاتورةٍ واحدة
   الآن، وقائمةٌ تدعوه إلى غيرها وسط تعبئة نموذج تُضيّع ما كتب. وهو
   السلوك نفسه في شاشة تصنيف الحركات. */
#invoice-review:has(#invoice-review-side.is-approving) > .classify-shell {
  grid-template-columns: minmax(0, 340px) minmax(0, 1.6fr);
}
#invoice-review:has(#invoice-review-side.is-approving) #invoice-review-picks { display: none; }

/* وصف صندوق الحالات، ومسافةٌ تفصله عمّا تحته — كان ملتحمًا به. */
.invoice-summary-copy { margin: 0 0 8px; font-size: var(--fs-12p5); color: var(--rd-muted, var(--anfal-slate-500)); }
/* المسافة على الصندوق نفسه لا على جاره: بينهما صندوقٌ ثالث مخفيّ
   (مهام الموظف)، فقاعدة «الجار التالي» لا تنطبق أصلًا وبقي الالتحام. */
#invoice-review { margin-top: 10px; }

#invoice-review-side.is-approving .classify-known dl > *:nth-child(n+7) { display: none; }
#invoice-review-side.is-approving .invoice-trail,
#invoice-review-side.is-approving .invoice-decision-actions { display: none; }

/* والورقة أطول من البداية: هي ما يُقرأ، وطولها يخدم المراجعة كلّها لا
   لحظة الاعتماد وحدها. */
#invoice-review-doc .classify-doc-view { height: 84vh; min-height: 680px; }

/* أزرار المستند فوقه: صفٌّ من خيارات عرض، المختار منها بحدٍّ أوضح. */
.invoice-doc-views { display: flex; flex-wrap: wrap; gap: 6px; }
.invoice-doc-view {
  width: auto; min-height: 30px; margin: 0; padding: 0 12px; font-size: var(--fs-12);
  border: 1px solid var(--rd-line, #e4e6ea); border-radius: var(--r-8);
  background: var(--rd-surface, #fff); color: var(--rd-ink, #0d2c4a); cursor: pointer;
}
.invoice-doc-view:hover { border-color: var(--rd-gold-line, var(--anfal-gold-200)); }
.invoice-doc-view.is-picked { border-color: var(--anfal-navy-600); color: var(--anfal-navy-600); font-weight: var(--anfal-weight-strong); }

/* مسار المصروف مطويّ بعرض الصندوق كلّه. */
.invoice-trail { border: 1px solid var(--rd-line, #e4e6ea); border-radius: var(--r-10); background: var(--rd-surface, #fff); }
.invoice-trail > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; cursor: pointer; font-size: var(--fs-13);
}
.invoice-trail > summary small { color: var(--rd-muted, var(--anfal-slate-500)); font-size: var(--fs-11p5); overflow-wrap: anywhere; }
.invoice-trail-body { padding: 0 12px 10px; display: grid; gap: 8px; }
.invoice-trail-body article { border-top: 1px solid var(--rd-line-soft, var(--anfal-line-quiet)); padding-top: 8px; }
.invoice-trail-body strong { display: block; font-size: var(--fs-12p5); }
.invoice-trail-body p { margin: 2px 0; font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }
.invoice-trail-body time { font-size: var(--fs-11); color: var(--rd-faint, var(--anfal-slate-400)); }
.invoice-trail-body .empty-state { margin: 0; padding: 10px 0; }
/* القرارات الثلاثة في صفٍّ واحد: أن تُقرأ معًا هو ما يجعلها اختيارًا
   بين ثلاثة، لا ثلاثة أوامر متتابعة. وتتقاسم العرض بالتساوي فلا يبدو
   أحدها أهمّ لأن نصّه أطول. */
/* يلتفّ ولا يفيض: الزرّ يتمدّد عند المرور ليُظهر نصّه، فإن ضاق الصفّ
   نزل سطرًا. كان `nowrap` فخرج آخر الأزرار من الصندوق. */
#invoice-review-side .invoice-decision-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#invoice-review-side .invoice-decision-actions button {
  width: auto; min-height: 38px; margin: 0; padding: 0 10px; font-size: var(--fs-12); white-space: nowrap;
}
/* أيقونةٌ وحدها، والنصّ يحلّ محلّها عند المرور. العرض يتمدّد للزرّ الواحد
   ولا يتمدّد الصندوق: بقيّة الأزرار تنكمش معه في الصفّ نفسه. */
/* الزرّ الأيقوني: أيقونةٌ وحدها، والاسم يحلّ محلّها عند المرور أو التركيز
   بلوحة المفاتيح. وهو مبنيٌّ على أن من يستعمله على حاسوب - المحاسب
   والمدير - لا على جوّال، فالمرور لا مقابل له باللمس. */
button.is-iconic:not(.is-glyph) {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  transition: none;
}
/* ===== الاسم فقاعةٌ فوق الزرّ، لا يحلّ محلّ الأيقونة =====
   كان الاسم يحلّ محلّ الأيقونة **داخل** الزرّ فيتّسع، والصفّ مثبّتٌ على
   يمينه، فكلّ زرٍّ يتّسع يدفع ما على يساره. فمن يتّجه إلى آخر الأزرار
   (الرفض ✕) يمرّ على إخوته فيتّسع كلٌّ منها تحت المؤشّر ويدفعه أبعد -
   فيهرب الزرّ من الفأرة ولا يُدرَك. (لاحظه المالك، ٧ أكتوبر ٢٠٢٦: «لمن
   أجي على الـX ما بجي».)
   فصار الزرّ ثابت العرض، والاسم فقاعةٌ مطلقة فوقه لا تأخذ مكانًا في الصفّ. */
button.is-iconic:not(.is-glyph) { position: relative; }
button.is-iconic:not(.is-glyph) .rd-btn-label {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 30; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font-size: var(--fs-12); font-weight: 600; line-height: 1.4;
  background: var(--anfal-slate-900, #111827); color: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .18);
}
button.is-iconic:not(.is-glyph):hover .rd-btn-label,
button.is-iconic:not(.is-glyph):focus-visible .rd-btn-label { display: block; }
html[data-theme="dark"] button.is-iconic:not(.is-glyph) .rd-btn-label { background: #e5e7eb; color: #111827; }
button.is-iconic:not(.is-glyph) svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
button.is-iconic:not(.is-glyph) .rd-btn-icon { flex: 0 0 auto; }
/* في صفّ القرار يتقاسم الأزرار عرضًا ثابتًا؛ وفي النماذج يبقى بمقاسه. */
.classify-actions button.is-iconic { min-width: 44px; justify-content: center; padding: 0 12px; }
/* وعمود القرار أوسع قليلًا ليسعها، على حساب الورقة لا على حساب القائمة. */
#invoice-review > .classify-shell { grid-template-columns: minmax(0, 190px) minmax(0, 340px) minmax(0, 1.5fr); }
#invoice-review-side .invoice-amount { display: none; }

.classify-head { display: flex; justify-content: flex-end; margin-bottom: 10px; font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }

@media (max-width: 1240px) {
  .classify-shell { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
  .classify-doc { grid-column: 1 / -1; position: static; }
  .classify-doc-view { height: 460px; }
}

@media (max-width: 900px) {
  .classify-shell { grid-template-columns: 1fr; }
  .classify-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
  .classify-pick { min-width: 0; }
  .classify-list-pager { grid-column: 1 / -1; }
  #purchases-shell .purchase-image-viewport { min-height:460px; }
  #purchases-shell .classify-doc-view { height:460px; min-height:460px; }
}

html[data-theme="dark"] .classify-pick,
html[data-theme="dark"] .classify-detail { background: #1b1f27; border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .classify-pick.is-picked { border-color: var(--anfal-slate-300); }
html[data-theme="dark"] .classify-pick strong.is-debit,
html[data-theme="dark"] .classify-known > strong.is-debit { color: var(--anfal-red-150); }
html[data-theme="dark"] .classify-pick strong.is-credit,
html[data-theme="dark"] .classify-known > strong.is-credit { color: #8fd9bb; }
html[data-theme="dark"] .classify-pick span,
html[data-theme="dark"] .classify-known dd { color: var(--anfal-line-quiet); }
html[data-theme="dark"] .classify-pick small,
html[data-theme="dark"] .classify-known dt,
html[data-theme="dark"] .classify-field > span { color: var(--anfal-slate-300); }
html[data-theme="dark"] .classify-known { border-bottom-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .classify-doc { background: #161a21; border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .classify-doc-head strong { color: var(--anfal-line-quiet); }
html[data-theme="dark"] .classify-doc-view { border-color: rgba(255,255,255,.12); }

/* تبويبا الطابور: بانتظار التصنيف، ومُعَدّ ينتظر المحاسب. */
.classify-head { justify-content: space-between; align-items: center; }
.classify-tabs { display: inline-flex; gap: 4px; border: 0; border-radius: var(--r-9); }
.classify-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; min-height: 32px; margin: 0; padding: 0 13px;
  border: 1px solid var(--rd-line, #e4e6ea); border-radius: var(--r-8);
  background: var(--rd-surface, #fff); font: inherit; font-size: var(--fs-12); cursor: pointer;
  color: var(--rd-muted, var(--anfal-slate-500));
}
.classify-tabs button:first-child { border-inline-start: 1px solid var(--rd-line, #e4e6ea); }
.classify-tabs button.is-active { background: var(--anfal-navy-600); color: #fff; }
.classify-tabs strong { font-variant-numeric: tabular-nums; }
/* حقول المشتريات بهيئة حقول تصنيف الحركات: كان كلُّ حقلٍ في صندوقٍ
   مؤطَّر، فصارت الشاشة صناديق داخل صندوق داخل صندوق، وهي شاشةٌ أختها
   (تصنيف الحركات) تعرض حقولها عاريةً. واكتفاءً بالتسمية فوق الحقل.
   وحالةُ الحقل — ناقص أو مراجَع أو مكتمل — تبقى مقروءة لكن في حدّ
   الحقل نفسه لا في إطارٍ حوله: المعنى باقٍ والضجيج ذاهب. */
.purchase-field strong { color:var(--rd-ink,#17304f); overflow-wrap:anywhere; }
.purchase-field input:disabled,.purchase-field select:disabled { opacity:1; background:transparent; border-color:transparent; padding-inline:0; }
.purchase-review-form .classify-actions { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.purchase-review-progress { flex-basis:100%; color:var(--rd-muted,var(--anfal-slate-600)); }
.classify-doc.has-image-magnifier { position:relative; overflow:hidden; }
.purchase-image-tools { display:flex; align-items:center; gap:6px; padding:7px 8px; border-bottom:1px solid var(--rd-line,#e4e6ea); background:var(--rd-surface,#fff); position:sticky; top:0; z-index:6; }
.purchase-image-tools button { width:auto; min-width:38px; min-height:32px; margin:0; padding:4px 11px; border:1px solid var(--rd-line,#dce5eb); border-radius: var(--r-7); background:var(--rd-surface,#fff); color:var(--rd-ink,#17304f); font:inherit; font-weight: var(--anfal-weight-strong); cursor:pointer; }
.purchase-image-tools button.is-active { background:var(--anfal-navy-600); border-color:var(--anfal-navy-600); color:#fff; }
.purchase-image-tools button:disabled { opacity:.45; cursor:not-allowed; }
.purchase-image-viewport { position:relative; overflow:auto; max-height:720px; background:var(--anfal-line-quiet); }
.purchase-image-viewport .classify-doc-view { display:block; height:auto; margin:0; }
.classify-doc-view.is-magnifiable { cursor:zoom-in; }
.purchase-image-magnifier {
  position:absolute; z-index:4; width:min(320px,calc(100% - 24px)); height:230px; padding:0;
  border:3px solid #fff; border-radius: var(--r-12); background-repeat:no-repeat; background-color:#fff;
  box-shadow:0 8px 24px rgba(16,42,67,.28); pointer-events:none;
}
.purchase-image-magnifier[hidden] { display:none; }
@media (hover:none), (pointer:coarse) { .classify-doc-view.is-magnifiable { cursor:default; } }
html[data-theme="dark"] .purchase-image-tools { background:#1b1f27; }
html[data-theme="dark"] .purchase-image-tools button { background:#1b1f27; color:var(--anfal-line-quiet); border-color:rgba(255,255,255,.16); }
html[data-theme="dark"] .purchase-image-tools button.is-active { background:#2f5488; }
.purchase-field.is-success :is(input,select) { border-color:#79b89a; }
.purchase-field.is-review :is(input,select) { border-color:var(--anfal-gold-400); }
.purchase-field.is-missing :is(input,select) { border-color:var(--anfal-red-150); }
html[data-theme="dark"] .classify-pick.is-reviewed { background:#14251d; border-color:#487d62; }
html[data-theme="dark"] .classify-pick.is-dirty { background:#292214; border-color:var(--anfal-gold-750); }
html[data-theme="dark"] .classify-tabs { border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .classify-tabs button { background: #1b1f27; border-inline-start-color: rgba(255,255,255,.12); color: var(--anfal-slate-300); }
html[data-theme="dark"] .classify-tabs button.is-active { background: #2f5488; color: #fff; }
.classify-field > small { font-size: var(--fs-11); color: var(--rd-muted, var(--anfal-slate-500)); }
html[data-theme="dark"] .classify-field > small { color: var(--anfal-slate-400); }

/* خيار ورقة التفاصيل: سطرٌ واحد فوق الحقول، لا حقلٌ خامس. */
.classify-cover { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); }
.classify-cover input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; }
.classify-cover label { margin: 0; cursor: pointer; }
.classify-cover .link-button { margin-inline-start: auto; font-size: var(--fs-12); }
/* داخل صفّ المرفق: يلتصق بأزراره ولا يتمدّد، ولا يدفع «عاينها» للطرف. */
.classify-proof .classify-cover { flex: 0 0 auto; margin-inline-start: 6px; padding-inline-start: 10px; border-inline-start: 1px solid var(--anfal-border); }
.classify-proof .classify-cover .link-button { margin-inline-start: 6px; }
.classify-approve { background: #0b342e; }
/* الاعتماد والحفظ في صفّ، والإعادة سطرٌ تحتهما: فعلٌ رئيسيٌّ واحد،
   وثانٍ بجانبه، ونادرٌ لا يزاحمهما. */
.classify-actions { align-items: center; }
.classify-actions button { flex: 0 1 auto; }
.classify-return { flex-basis: 100%; margin-top: 2px; font-size: var(--fs-12); text-align: start; }
.classify-closed { margin: 8px 0 0; font-size: var(--fs-12); color: var(--rd-muted, var(--anfal-slate-500)); }
html[data-theme="dark"] .classify-closed { color: var(--anfal-slate-300); }

/* الحركة البنكية في شاشة القيد: بابٌ ثالث يُميَّز بحدٍّ لا بخلفية صارخة. */
.daftra-bank-row > td:first-child { border-inline-start: 3px solid rgba(31, 59, 99, .5); }
.daftra-sides-vat { display: block; margin-top: 2px; font-size: var(--fs-11); color: var(--anfal-caution-ink); }
html[data-theme="dark"] .daftra-bank-row > td:first-child { border-inline-start-color: rgba(127, 166, 217, .6); }
html[data-theme="dark"] .daftra-sides-vat { color: var(--anfal-gold-400); }
.classify-head #classify-apply-rules { width: auto; min-height: 32px; margin: 0; padding: 0 14px; font-size: var(--fs-12); }

/* ===== الرئيسية =====
   ثلاث طبقات بثلاثة أشكال: أحمرُ يختفي، وذهبيٌّ يفرغ، ومحايدٌ يبقى.
   اختلاف الشكل هو ما يمنع الرقم الثابت من أن يصير أثاثًا. */
.home-page { display: grid; gap: 14px; }
.home-page h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: var(--fs-13p5);
}
.home-page h3 svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-page h3 .link-button { margin-inline-start: auto; font-size: var(--fs-12); }

.home-alert h3 { color: var(--anfal-danger-ink); }
/* ===== التنبيهات: شريطٌ لا لوحةٌ حمراء =====
   خمسة صفوف حمراء متتابعة تصرخ معًا، فلا يعود أحدها أهمّ من الآخر - وتبدو
   الرئيسية كأن النظام معطوب وهي تعرض عملًا عاديًّا ينتظر. فالسطح يهدأ
   ويبقى **رايةٌ حمراء على حافّته**: تُمسح بالعين في لمحة، ولا تملأ الشاشة. */
.home-alert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 6px;
  border: 1px solid var(--anfal-border); border-inline-start: 3px solid var(--anfal-rejected);
  border-radius: var(--r-12); background: var(--anfal-surface);
}
.home-alert-row:last-child { margin-bottom: 0; }
.home-ic {
  width: 34px; height: 34px; border-radius: var(--r-10); display: grid; place-items: center;
  background: var(--anfal-rejected-soft); color: var(--anfal-danger-ink); flex: 0 0 auto;
}
.home-ic svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-alert-row > div { flex: 1; }
.home-alert-row strong { display: block; font-size: var(--fs-13p5); color: var(--anfal-danger-ink); }
.home-alert-row small { display: block; font-size: var(--fs-11p5); color: var(--anfal-muted); }
.home-go {
  border: 1px solid var(--anfal-red-150); background: #fff; color: var(--anfal-danger-ink);
  border-radius: var(--r-9); padding: 6px 13px; font: inherit; font-size: var(--fs-12); cursor: pointer; white-space: nowrap;
}
.home-go:hover { background: #fff6f5; }

.home-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.home-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rd-line, #dce5eb); background: var(--rd-surface, #fff);
  border-radius: var(--r-99); padding: 6px 14px; font: inherit; font-size: var(--fs-12p5);
  color: var(--rd-muted, var(--anfal-slate-600)); cursor: pointer; max-width: 100%;
}
.home-chip.is-new { border-color: var(--anfal-gold-200); background: #fffdf8; color: var(--anfal-gold-750); }
.home-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.home-chip em { font-style: normal; font-size: var(--fs-11); color: var(--rd-faint, var(--anfal-slate-400)); }
.home-chip svg { fill: none; stroke: currentColor; stroke-width: 1.7; flex: 0 0 auto; }

.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.home-sect {
  display: block; width: 100%; margin: 0; text-align: start; font: inherit; cursor: pointer;
  background: var(--rd-surface, #fff); border: 1px solid var(--rd-line, #dce5eb);
  border-radius: var(--r-13); padding: 12px 14px;
}
.home-sect:hover { border-color: var(--anfal-gold-200); }
.home-sect header { display: flex; align-items: center; gap: 9px; }
.home-sect header svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--rd-muted, var(--anfal-slate-600)); }
.home-sect h4 { margin: 0; font-size: var(--fs-13); }
.home-nums { display: flex; gap: 16px; margin-top: 9px; }
.home-nums small { font-size: var(--fs-11p5); color: var(--rd-muted, var(--anfal-slate-600)); }
.home-nums strong { display: block; font-size: var(--fs-20); line-height: 1.25; font-variant-numeric: tabular-nums; }
.home-nums strong.is-hot { color: var(--anfal-danger-ink); }
.home-nums strong.is-good { color: var(--anfal-green-700); }
.home-nums strong.is-warn { color: var(--anfal-amber-750); }
.home-sect p { margin: 7px 0 0; font-size: var(--fs-11p5); color: var(--rd-faint, var(--anfal-slate-400)); }

/* عدّاد القائمة الجانبية: ما يحتاج عملًا فقط — الصفر ضجيج. */
.nav-count {
  margin-inline-start: auto; font-size: var(--fs-11); font-weight: var(--anfal-weight-strong);
  background: var(--anfal-red-050); color: var(--anfal-danger-ink); border-radius: var(--r-99); padding: 1px 8px;
}

@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-chip span { max-width: 190px; }
}

/* آخر العمليات: سطورٌ رفيعة تُقرأ بطرف العين. لا أزرار فيها — من أرادها
   كاملةً فله سجلّ النشاط. */
.home-feed-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--rd-line-soft, var(--anfal-line-quiet));
  font-size: var(--fs-12p5); color: var(--rd-muted, var(--anfal-slate-600));
}
.home-feed-row:last-child { border-bottom: 0; }
.home-feed-row i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rd-line, #dce5eb); flex: 0 0 auto;
}
.home-feed-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-feed-row time { font-size: var(--fs-11); color: var(--rd-faint, var(--anfal-slate-400)); white-space: nowrap; }
.home-feed { background: var(--rd-surface, #fff); border: 1px solid var(--rd-line, #dce5eb); border-radius: var(--r-13); padding: 12px 14px; }

/* الأقسام يمينًا وآخر العمليات عمودًا يسارها: القراءة تبدأ من البطاقات
   وتنتهي بالسطور، ولا تنزل الصفحة طولًا بلا داعٍ. */
/* الصندوقان يبدآن وينتهيان معًا: stretch يجعل الشريط بطول صفوف
   البطاقات، وخصمُ إزاحة العنوان يمنعه من تجاوزها من الأسفل. */
.home-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 375px); gap: 7px; align-items: stretch; }
/* height:0 مع min-height يمنع الصندوق من أن يُطيل الصفّ بمحتواه ثم
   يقيس نفسه عليه — فيصير طوله طول البطاقات لا العكس، وما زاد يُخفى. */
.home-body .home-feed { height: 0; min-height: calc(100% - 35px); overflow: hidden; }
/* الإزاحة بقدر عنوان «حال الأقسام» فوقه: فيبدأ الصندوقان من خطٍّ واحد.
   وهي محسوبة من ارتفاع العنوان وهامشه لا مقدَّرة بالعين. */
.home-body .home-feed { margin-top: 35px; }
@media (max-width: 1100px) {
  .home-body { grid-template-columns: 1fr; }
  .home-body .home-feed { margin-top: 0; }
}


/* ===== المصروف بدون فاتورة: إطارٌ يومض =====
   كان يُميَّز بلونٍ خاص، واللون في هذه الشاشة يعني حالةً (أحمر مرفوض،
   ذهبي منتظر). فيُميَّز بالحركة لا باللون: ومضةٌ خفيفة تقول «هذا مختلف»
   ولا تدّعي معنًى ثانيًا. ومن يكره الحركة يُطفئها نظامُه نفسه. */
@keyframes rd-no-invoice-pulse {
  0%, 100% { border-color: var(--rd-gold-line, var(--anfal-gold-200)); }
  50% { border-color: #b98a2e; }
}
.classify-pick.is-no-invoice,
#invoice-review-side.is-no-invoice {
  border-color: var(--rd-gold-line, var(--anfal-gold-200));
  animation: rd-no-invoice-pulse 2.4s ease-in-out infinite;
}
.classify-pick.is-no-invoice.is-picked { border-width: 2px; }
.classify-pick.is-main-account {
  /* الشريط صار عنصرًا مرسومًا (styles.css)، فلا حدَّ هنا يُفرض بـ!important. */
  background: #f7f9fc;
  /* ٦٪ كانت تُثقل البطاقة؛ خُفّفت الثلث بطلب المالك (٢٨ سبتمبر ٢٠٢٦). */
  background: color-mix(in srgb, var(--classify-bank-accent, #173a5e) 4%, #fff);
}
.classify-pick.is-main-account .classify-account-tag { background: var(--anfal-gold-075); color: var(--anfal-gold-800); }
.classify-pick .classify-account-tag.is-card { background: var(--anfal-gold-075); color: var(--anfal-gold-800); }
@media (prefers-reduced-motion: reduce) {
  .classify-pick.is-no-invoice,
  #invoice-review-side.is-no-invoice { animation: none; border-color: #b98a2e; }
}

/* ملاحظات الإحالة داخل صندوق القرار: تُقرأ ولا تُزاحم. كانت تأخذ نصف
   الصندوق بحواشيها وعناوينها، فيُدفع القرار إلى أسفل الشاشة. */
#invoice-review-side :is(.invoice-referral-note, .manager-response-block, .invoice-review-note, .cancel-pending-note, .amount-adjustment-note) {
  margin: 0; padding: 8px 10px; font-size: var(--fs-12); line-height: 1.55; border-radius: var(--r-10);
}
#invoice-review-side :is(.invoice-referral-note, .manager-response-block) h4,
#invoice-review-side :is(.invoice-referral-note, .manager-response-block) h5 { margin: 0 0 3px; font-size: var(--fs-12); }
#invoice-review-side :is(.invoice-referral-note, .manager-response-block) p { margin: 2px 0; }
#invoice-review-side :is(.invoice-referral-note, .manager-response-block) small { font-size: var(--fs-10p5); }
#invoice-review-side :is(.invoice-referral-note, .manager-response-block) button { min-height: 30px; padding: 0 10px; font-size: var(--fs-11p5); }

/* ردّ المدير وقد قرّر: حدٌّ أحمر وعنوانٌ أحمر. المحاسب كان يقرؤه هادئًا
   فيُعيد المصروف إلى المدير وقد وافق عليه، فيدور بينهما بلا سبب.
   واللون هنا يعني «قُرِّر فانتبه»، لا «خطأ». */
.manager-response-block.is-decided {
  border: 1px solid var(--anfal-red-150);
  background: var(--anfal-red-050);
}
.manager-response-block.is-decided h5 { color: var(--anfal-danger-ink); }
.manager-response-block.is-decided h5::after {
  content: " — قرارٌ نهائي، لا يُعاد إليه";
  font-weight: var(--anfal-weight-regular); font-size: var(--fs-11p5); color: var(--anfal-red-700);
}
html[data-theme="dark"] .manager-response-block.is-decided {
  border-color: #6b3b38; background: #2a1b1a;
}
html[data-theme="dark"] .manager-response-block.is-decided h5 { color: var(--anfal-red-250); }

/* في يد من البطاقة: سطرٌ صغير تحت الرصيد بأيقونته. أخضر لمن استلمها
   وأقرّ، وذهبيّ لمن هي معه بلا إقرار — والذهبي هنا يعني «ينتظر توقيعًا»
   لا «خطأ». ومن لم تُسلَّم: رماديٌّ هادئ. */
.statement-account-hold {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 3px; font-size: var(--fs-11);
}
.statement-account-hold svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
.statement-account-hold.is-held { color: var(--anfal-green-700); }
.statement-account-hold.is-waiting { color: var(--anfal-amber-750); }
.statement-account-hold.is-idle { color: var(--rd-faint, var(--anfal-slate-400)); }
html[data-theme="dark"] .statement-account-hold.is-held { color: #9fe1cb; }
html[data-theme="dark"] .statement-account-hold.is-waiting { color: var(--anfal-amber-400); }

/* صفّ التحويل الداخلي: لا مصروف فيه ولا ضريبة، فيُميَّز بشريطٍ هادئ عن
   صفوف الفواتير والحركات — وهو خبرٌ محايد لا قرارٌ يُتّخذ. */
.daftra-transfer-row td:first-child { border-inline-start: 3px solid var(--anfal-slate-300); }
html[data-theme="dark"] .daftra-transfer-row td:first-child { border-inline-start-color: var(--anfal-slate-600); }
.purchase-create-actions{display:flex;gap:.6rem;flex-wrap:nowrap;align-items:center}
.purchase-create-actions button{width:auto;min-height:40px;margin:0;flex:1 1 0;white-space:nowrap;padding-inline:1rem}
.purchase-capture-card{margin:1rem 0;padding:1rem;border:1px solid var(--line,#dce5eb);border-radius: var(--r-14);background:#f8fbfd;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.purchase-capture-card[hidden]{display:none}
.purchase-capture-card p{margin:.25rem 0 0;color:var(--anfal-slate-600)}
.purchase-capture-code{display:grid;gap:.15rem;text-align:center;padding:.55rem 1rem;border-radius: var(--r-10);background:#fff;border:1px solid #dce5eb}
.purchase-capture-code b{font-size:1.5rem;letter-spacing:.22em;color:#12385c}
.purchase-capture-qr{width:180px;height:180px;max-width:45vw;border:8px solid #fff;border-radius: var(--r-12)}
@media(max-width:760px){.purchase-create-actions{flex-wrap:wrap}.purchase-create-actions button{flex:1 1 100%}.purchase-capture-card{justify-content:center;text-align:center}}
.purchase-mobile-capture{position:fixed;inset:0;z-index:1100;background:var(--anfal-surface-cool);display:grid;place-items:center;padding:1rem;direction:rtl}
.purchase-mobile-capture>section{width:min(100%,520px);background:#fff;border:1px solid #dce5eb;border-radius: var(--r-20);padding:1.25rem;box-shadow:0 18px 60px #12385c22;display:grid;gap:1rem}
.purchase-mobile-capture h2,.purchase-mobile-capture p{margin:0}
.purchase-mobile-capture input[type=file]{display:none}
.purchase-mobile-capture select{width:100%;min-height:46px}
.purchase-mobile-capture .capture-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.purchase-mobile-capture .capture-actions>*{width:100%;margin:0}
.capture-pdf-preview{width:100%;height:min(55vh,560px);border:1px solid #dce5eb;border-radius: var(--r-12);background:#fff}
.mobile-qr-scan { display: none; }
.qr-scanner-overlay { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 16px; background: rgba(8,28,45,.78); direction: rtl; }
.qr-scanner-card { width: min(100%, 420px); display: grid; gap: 12px; padding: 18px; border: 1px solid #dce5eb; border-radius: var(--r-18); background: var(--anfal-surface,#fff); color: var(--anfal-ink,#102a43); box-shadow: 0 20px 70px rgba(0,0,0,.25); }
.qr-scanner-card h2,.qr-scanner-card p { margin: 0; }
.qr-scanner-video { width: 100%; aspect-ratio: 1; border-radius: var(--r-14); background: #081c2d; object-fit: cover; }
.qr-scanner-card input[type=file] { display: none; }
@media (max-width: 760px) {
  .workspace-user { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-qr-scan { width: 100%; min-width: 0; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-11); background: transparent; color: #fff; font: inherit; font-size: var(--fs-12); }
  .mobile-qr-scan svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  #profile-button { min-width: 0; }
}
/* شاشة المدير/المحاسب على الجوال: العمليات تقرأ عموديًا، لا في عمود جانبي ضيق.
   النطاق staff متعمد حتى يبقى تخطيط الموظف الحالي كما هو. */
@media (max-width: 900px) {
  #dashboard-view[data-scope="staff"] .operations-columns {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px;
  }
  #dashboard-view[data-scope="staff"] .operations-columns > #card-alert,
  #dashboard-view[data-scope="staff"] .operations-columns > .operations-tasks,
  #dashboard-view[data-scope="staff"] .operations-columns > .operations-follow-up {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100%;
  }
  #dashboard-view[data-scope="staff"] .operations-tasks { order: 1; }
  #dashboard-view[data-scope="staff"] .operations-follow-up { order: 2; }
  #dashboard-view[data-scope="staff"] .operations-columns > #card-alert { order: 3; }
  /* تنبيهات المدير المهمة تبقى فوق البطاقات على الجوال. */
  #dashboard-view[data-scope="staff"] .home-alert { display: block; margin-bottom: 14px; }
  #dashboard-view[data-scope="staff"] .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #dashboard-view[data-scope="staff"] .home-sect { min-height: 132px; padding: 11px 12px; }
  #dashboard-view[data-scope="staff"] .home-nums { gap: 9px; margin-top: 7px; }
  #dashboard-view[data-scope="staff"] .home-nums strong { font-size: var(--fs-18); }
  #dashboard-view[data-scope="staff"] .home-sect p { font-size: var(--fs-10p5); line-height: 1.5; }
}

/* تنبيه تكرار فاتورة المشتريات: يقول بأيّ فاتورةٍ تشبه، لا «مكرّرة» وحدها. */
.purchase-duplicate { margin:12px 0; padding:10px 12px; border:1px solid var(--anfal-gold-400); border-radius: var(--r-10); background:var(--anfal-gold-050); }
.purchase-duplicate.is-blocking { border-color:#c0504a; background:var(--anfal-red-050); }
.purchase-duplicate > strong { display:block; font-size: var(--fs-13); color:var(--anfal-amber-750); }
.purchase-duplicate.is-blocking > strong { color:#6b3b38; }
.purchase-duplicate ul { margin:6px 0 0; padding-inline-start:18px; }
.purchase-duplicate li { font-size: var(--fs-12); line-height:1.7; color:var(--rd-ink,#17304f); }
html[data-theme="dark"] .purchase-duplicate { background:#292214; }
html[data-theme="dark"] .purchase-duplicate.is-blocking { background:#2b1719; }

/* شريط اختيار الحزمة: يظهر حين تتعدّد حزم الحالة الواحدة — حزمةٌ ترفعها
   بيدك وأخرى واردة عبر واتساب في اليوم نفسه. */
.purchase-batch-picker { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }
.purchase-batch-chip { display:grid; gap:2px; text-align:start; padding:8px 12px; border:1px solid var(--rd-line,#e4e6ea); border-radius: var(--r-10); background:var(--rd-surface,#fff); cursor:pointer; }
.purchase-batch-chip strong { font-size: var(--fs-12p5); color:var(--rd-ink,#17304f); }
.purchase-batch-chip small { font-size: var(--fs-11); color:var(--rd-muted,var(--anfal-slate-500)); }
.purchase-batch-chip.is-picked { border-color:var(--anfal-navy-600); background:color-mix(in srgb, var(--anfal-navy-600) 7%, #fff); }
html[data-theme="dark"] .purchase-batch-chip { background:#1b1f27; }

/* زرّ الأيقونة وحدها: النصّ يبقى في الشجرة لقارئ الشاشة وللتلميح عند
   المرور، ويُخفى عن العين بتصفير حجم الخطّ — لا بإخفاء عنصرٍ بعينه،
   لأن تأكيد الحذف يستبدل محتوى الزرّ بنصٍّ عارٍ لا وسمَ له.
   وحين يسأل الزرّ «تأكيد الحذف؟» يعود النصّ مرئيًّا، وإلّا سُئل المستخدم
   سؤالًا لا يراه. */
.rd-btn.is-glyph { font-size: 0; padding-inline: 10px; gap: 0; width: auto; min-width: 0; flex: 0 0 auto; }
.rd-btn.is-glyph .rd-btn-icon { font-size: var(--fs-14); }
/* «تأكيد داخل الزرّ» لم يعد يكبّر الزرّ: السؤال فقاعةٌ فوقه (٧ أكتوبر ٢٠٢٦). */
/* مرفقٌ موجود: الأيقونة تقول ذلك بلونها، فلا يحتاج المستخدم أن يفتحه ليعرف. */
.classify-proof-pick.has-proof { border-color: #79b89a; color: var(--anfal-green-700); }
/* معبّأة تنتظر ورقتها: تحذيرٌ لا خطأ — العمل تمّ، والناقص مستندٌ يُرفق. */
.classify-account-tag.is-waiting { border-color: var(--anfal-amber-300); background: var(--anfal-amber-050); color: var(--anfal-caution-ink); }

/* إعدادات استقبال واتساب: قائمة الأرقام وسجلّ الوارد. */
.whatsapp-sender-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--rd-line,#e4e6ea); border-radius: var(--r-8); margin-bottom:6px; }
.whatsapp-sender-row strong { font-size: var(--fs-13); }
.whatsapp-sender-row small { color:var(--rd-muted,var(--anfal-slate-500)); font-size: var(--fs-12); margin-inline-start:auto; direction:ltr; }
.whatsapp-sender-add { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.whatsapp-sender-add input { flex:1 1 120px; min-width:0; }
.whatsapp-log-row { display:grid; gap:2px; padding:7px 10px; border-inline-start:3px solid var(--rd-line,#dce5eb); margin-bottom:6px; }
.whatsapp-log-row strong { font-size: var(--fs-12p5); }
.whatsapp-log-row small { font-size: var(--fs-11p5); color:var(--rd-muted,var(--anfal-slate-500)); }
.whatsapp-log-row.is-accepted { border-inline-start-color:#79b89a; }
.whatsapp-log-row.is-rejected { border-inline-start-color:var(--anfal-amber-400); }
.whatsapp-log-row.is-failed { border-inline-start-color:#c0504a; }

/* وسمٌ هادئ: حركةٌ سابقة لتاريخ بدء الترحيل — مقابلها في دفترة داخلٌ في
   الرصيد الافتتاحي، فلا تُرحَّل. يُقال في الطابور لا يُكتشف بعده. */
.classify-account-tag.is-muted { background:var(--anfal-line-quiet); color:#526b80; }
html[data-theme="dark"] .classify-account-tag.is-muted { background:#232a33; color:var(--anfal-slate-400); }

/* فصلُ ما انتهى عمّا فيه عمل: التبويبات الأولى طابورٌ يُعمل فيه،
   والأخيرتان أرشيفٌ يُنظر فيه. فاصلٌ بينهما ولونٌ أهدأ لهما — فلا تُقرأ
   «معتمَدة» عملًا باقيًا، ولا يُبحث عن المطابَقة بين ما ينتظر قرارًا. */
.classify-tabs .tabs-divider {
  width: 1px; align-self: stretch; margin-inline: 6px;
  background: var(--rd-line, #e4e6ea);
}
.classify-tabs button.is-done { opacity: .72; }
.classify-tabs button.is-done:hover,
.classify-tabs button.is-done.is-active { opacity: 1; }

/* ===== شاشة ألوان النظام ===== */
.brand-theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.brand-theme-card { display: grid; gap: 4px; width: auto; min-height: 0; margin: 0; padding: 12px 14px; text-align: start;
  border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-card); background: var(--anfal-surface); }
.brand-theme-card.is-active { border-color: var(--anfal-gold-500); background: var(--anfal-gold-100); }
.brand-theme-card strong { font-size: var(--fs-13p5); color: var(--anfal-text-strong); }
.brand-theme-card small { font-size: var(--fs-11p5); color: var(--anfal-muted); }
.brand-theme-dots { display: flex; gap: 5px; margin-top: 6px; }
.brand-theme-dots i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--anfal-border); }
.brand-seeds { display: grid; gap: 8px; margin-bottom: 14px; }
.brand-seed { display: grid; grid-template-columns: 1fr 46px 76px; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--anfal-border); border-radius: var(--anfal-radius-control); background: var(--anfal-surface); }
.brand-seed > span { font-size: var(--fs-12p5); color: var(--anfal-ink); }
.brand-seed input[type="color"] { width: 46px; height: 30px; padding: 0; border: 1px solid var(--anfal-border); border-radius: var(--r-7); background: none; cursor: pointer; }
.brand-seed input[type="color"]:disabled { cursor: not-allowed; opacity: .6; }
.brand-seed code { font-size: var(--fs-11p5); color: var(--anfal-muted); direction: ltr; text-align: center; }
.brand-preview { display: grid; gap: 8px; margin-bottom: 14px; }
.brand-chip { display: inline-block; margin-inline-end: 6px; padding: 5px 12px; border-radius: var(--r-999); font-size: var(--fs-11p5); font-weight: var(--anfal-weight-strong); }
/* السُّلَّم كلّه في صفّ: الإحدى وستّون درجة تُرى معًا فيُكتشف نشازها بلمحة. */
.brand-ladder { display: flex; flex-wrap: wrap; gap: 3px; }
.brand-ladder i { width: 22px; height: 22px; border-radius: var(--r-5); border: 1px solid var(--anfal-border); }
.brand-theme-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-theme-actions button { width: auto; min-height: 38px; margin: 0; padding: 0 16px; font-size: var(--fs-13); }
html[data-theme="dark"] .brand-theme-card { background: var(--anfal-surface); }
html[data-theme="dark"] .brand-seed { background: var(--anfal-surface); }

.brand-sub { margin: 4px 0 8px; font-size: var(--fs-13); font-weight: var(--anfal-weight-strong); color: var(--anfal-text-strong); }
.brand-style-row input[type="number"], .brand-style-row input[type="text"] { width: 100%; min-height: 30px; padding: 0 8px; text-align: center; }
.brand-style-row { grid-template-columns: 1fr 96px 26px; }

/* القالب المعروض يُميَّز بحدّه، والفعّال بشريطٍ ذهبيّ — حالان لا حال واحد:
   قد تعدّل قالبًا وأنت تعمل بغيره. */
.brand-theme-card.is-picked { border-color: var(--anfal-navy-600); box-shadow: 0 0 0 1px var(--anfal-navy-600); }
.brand-theme-card.is-active { background: var(--anfal-gold-100); border-color: var(--anfal-gold-500); }
.brand-theme-card.is-new { border-style: dashed; color: var(--anfal-muted); }

/* ===== الأرقام والتنبيه =====

   المبالغ كانت تُكتب بحبر النصّ نفسه، فتذوب في السطر وهي أوّل ما يُبحث
   عنه. والتنبيه («بعده يومان بلا كشف») كان رماديًّا خافتًا كأي تفصيل -
   وهو الشيء الوحيد في البطاقة الذي يطلب فعلًا.

   فالرقم يأخذ حبرًا أزرق أوضح وأرقامًا مصطفّة، والتنبيه يأخذ الأحمر
   ووزنًا أثقل. واللون هنا **معنًى لا زينة**: يبقى كما هو مهما قُلب
   القالب. */
.invoice-table-amount, .classify-known > strong, .classify-pick strong,
.operation-kpi strong, .employee-custody-stats dd, .inactive-custody-row dd,
.notification-details dd, .daftra-review-amount, .statement-amount {
  color: var(--anfal-navy-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1px;
}
/* والمدين والدائن يغلبان: خروجُ المال وحده يُقال بالأحمر. */
.classify-pick strong.is-debit, .classify-known > strong.is-debit { color: var(--anfal-danger-ink); }
.classify-pick strong.is-credit, .classify-known > strong.is-credit { color: var(--anfal-green-700); }



/* ===== القائمة الجانبية أكورديون =====
   خمس عشرة وجهة مفتوحة دائمًا تملأ العمود، فيضيع ما يُستعمل كل يوم بين ما
   يُستعمل مرّة في الشهر. فالظاهر خمسةُ عناوين بأيقوناتها، وتُفتح واحدةٌ
   فتنغلق أختها - فيبقى العمود قصيرًا مهما كثرت الوجهات. */
.nav-group-label {
  display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  padding: 9px 11px; margin-top: 4px; border-radius: var(--r-9);
  color: var(--anfal-text-strong); font-weight: var(--anfal-weight-semi);
}
.nav-group-label:hover { background: var(--anfal-surface-soft); }
.nav-group-label.is-open { background: var(--anfal-gold-100); color: var(--anfal-gold-800); }
.nav-group-label:focus-visible { outline: 2px solid var(--anfal-gold-500); outline-offset: 2px; }
.nav-group-icon {
  width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nav-group-caret {
  width: 6px; height: 6px; margin-inline-start: auto; flex: 0 0 auto;
  border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease; opacity: .75;
}
.nav-group-label.is-open .nav-group-caret { transform: rotate(-135deg); }
/* الحركة على الارتفاع المقيس: overflow يقصّ ما لم يُفتح بعد. */
.nav-group-body {
  display: grid; gap: 2px; overflow: hidden;
  max-height: 0; transition: max-height .22s ease;
  padding-inline-start: 8px;
}
.nav-group-body.is-open { margin-block: 2px 6px; }
@media (prefers-reduced-motion: reduce) {
  .nav-group-body { transition: none; }
  .nav-group-caret { transition: none; }
}

/* مجموع المجموعة يسبق السهم ويترك له طرفه. */
.nav-group-label .nav-count { margin-inline-start: auto; }
.nav-group-label .nav-count + .nav-group-caret { margin-inline-start: 8px; }

/* ===== شاشة ضريبة القيمة المضافة ===== */
/* صفحة الضريبة تستعير صناديق النظام: شريط الملخّص للقسمين، وغلاف
   الجداول للصندوق السفلي. فما يبقى هنا مربّعات الفترة في الترويسة. */
.vat-period { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vat-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 46px;
  min-height: 32px; padding: 0 10px; border: 1px solid var(--anfal-border);
  border-radius: var(--anfal-radius-control); background: var(--anfal-surface);
  color: var(--anfal-text-strong); font-size: var(--fs-12); font-weight: var(--anfal-weight-bold);
  font-variant-numeric: tabular-nums; cursor: pointer; }
.vat-chip:hover { border-color: var(--anfal-gold-500); }
.vat-chip.is-active { border-color: var(--anfal-gold-500); background: var(--anfal-gold-100); color: var(--anfal-gold-800); }
html[data-theme="dark"] .vat-chip.is-active { background: rgba(255,255,255,.08); color: var(--anfal-ink); }
.vat-chip-year { padding: 0 4px; }
.vat-chip-year select { border: 0; background: transparent; color: inherit; font: inherit;
  text-align: center; text-align-last: center; cursor: pointer; padding: 0 4px; }
.vat-net { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--anfal-border); }
.vat-net span { font-size: var(--fs-12); color: var(--anfal-muted); }
.vat-net strong { font-size: var(--fs-18); font-variant-numeric: tabular-nums; color: var(--anfal-navy-700); }
.vat-net.is-credit strong { color: var(--anfal-approved); }
.vat-gap { display: grid; gap: 3px; margin-top: 12px; padding: 12px 15px;
  border: 1px solid var(--anfal-caution-line, var(--anfal-border)); border-radius: var(--r-12);
  background: var(--anfal-caution-soft, var(--anfal-surface)); }
.vat-gap strong { font-size: var(--fs-13); color: var(--anfal-caution-ink); }
.vat-gap small { font-size: var(--fs-12); color: var(--anfal-muted); }
.vat-details { display: block; margin-top: 14px; }
.vat-box { display: grid; gap: 10px; }
.vat-details-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.vat-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.vat-filters .is-active { border-color: var(--anfal-navy-700); color: var(--anfal-navy-700); font-weight: 600; }
.vat-table td.is-number, .vat-table th.is-number { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vat-table tfoot th { font-weight: 700; }
.vat-empty-box { display: grid; gap: 6px; padding: 18px 4px; text-align: center; }
.vat-empty-box strong { font-size: var(--fs-14); color: var(--anfal-text-strong); }
.vat-empty-box p { margin: 0; max-width: 60ch; margin-inline: auto; font-size: var(--fs-12); line-height: 1.85; color: var(--anfal-muted); }
.vat-note { margin: 0; max-width: 68ch; font-size: var(--fs-12); line-height: 1.85; color: var(--anfal-muted); }
.vat-note strong { color: var(--anfal-text-strong); }

/* سطرٌ عبّأته قاعدةٌ ولم يُراجَع: إطارٌ كهرمانيّ على حافّته في القائمة.
   كهرمانيّ لا أحمر - ليس خطأً بل «لم يُرَ بعد»، والأحمر للخطأ وحده. */
.classify-pick.is-autofilled { border-inline-start: 4px solid var(--anfal-amber-300); background: var(--anfal-amber-050); }
html[data-theme="dark"] .classify-pick.is-autofilled { background: #2a2414; }

/* فقاعة «متأكد؟» فوق الزرّ المسؤول: مطلقةٌ لا تأخذ مكانًا، فلا يتحرّك الزرّ
   ولا جيرانه بين الضغطتين. وتُخفى معها فقاعة الاسم لئلّا تتراكبا. */
.rd-asking[data-ask] { position: relative; }
.rd-asking[data-ask]::after {
  content: attr(data-ask); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 31; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font-size: var(--fs-12); font-weight: 700; line-height: 1.4;
  background: var(--anfal-rejected, #b42318); color: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .2);
}
button.is-iconic.rd-asking .rd-btn-label { display: none !important; }