/* @@TOKENS-CSS-BEGIN */
/* رموز التصميم v2 — «دفتر الربّان» (Maritime Editorial).
   المرجع الملزم لكل لون وظل وزاوية ومسافة وحركة. لا لون مكتوباً خارج هذا الملف.
   الهوية من شعار Coastal Wave S: كحلي بحري وتركوازي والذهبي لمسة رفيعة (خطوط شعرية وفواصل ومؤشر التحديد).
   الأسماء القديمة كلها محفوظة؛ ما أُضيف فهو إضافة. الكتلتان :root وhtml.dark بسيطتان (يقرؤهما scripts/check-contrast.mjs). */
:root {
  color-scheme: light;

  /* ---- الهوية: بحري + تركوازي + ذهبي ---- */
  --brand: #0a5e96; --brand-strong: #0b3256; --brand-fill: #0a679f;
  --on-brand: #ffffff; --brand-soft: #e3eff8; --brand-edge: rgba(10,94,150,.3);
  --accent: #1197b5; --accent-soft: #dff3f7; --accent-ink: #0a6a80;
  --gold: #c4953a; --gold-strong: #a87720; --gold-soft: #f8eed5; --gold-ink: #7a5510; --gold-edge: rgba(196,149,58,.5);

  /* ---- أسطح «ورق عاجي» ---- */
  --canvas: #f5f1e8; --surface: #fffefb; --surface-2: #faf7f0; --surface-3: #ede7d8; --surface-pop: #fffefb;
  --hover: #f3eee2; --select: #e6f0f8;

  /* ---- نص وحدود ---- */
  --ink: #0d2236; --ink-2: #2b4055; --muted: #52677b; --faint: #8394a4;
  --line: #e5ddcb; --line-strong: #d2c8b0; --ctl-border: #76848f;

  /* ---- دلالات ---- */
  --ok: #0a8659; --ok-soft: #ddf4ea; --ok-ink: #066a4a;
  --bad: #c62c39; --bad-soft: #fde9eb; --bad-ink: #a91f2c;
  --warn: #c27600; --warn-soft: #fff0d3; --warn-ink: #8a5200;
  --debit: #1d4f91; --credit: #0f7048; --approved: #5a3dc8;
  --focus: #1a73c8; --focus-soft: rgba(26,115,200,.18);

  /* ---- القائمة الجانبية (كحلية في الوضعين) ---- */
  --nav-bg: #071c32; --nav-bg-2: #0b2a4a; --nav-ink: #eaf1f7; --nav-ink-2: #bccbda; --nav-muted: #8fa5ba;
  --nav-line: rgba(255,255,255,.09); --nav-hover: #0f3558; --nav-active: #134569; --nav-accent: #e3b866; --nav-icon: #7fc3e3;

  /* ---- رأس الجداول ---- */
  --th-bg: #0b3256; --th-ink: #ffffff;

  /* ---- التسلسل الطباعي (Cairo فقط) ---- */
  --font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px;
  --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 34px; --fs-display: 44px;
  --fw-regular: 500; --fw-medium: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900;
  --lh-tight: 1.2; --lh-snug: 1.45; --lh-normal: 1.7; --lh-loose: 1.95;

  /* ---- المسافات (سلّم 4) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- الزوايا ---- */
  --r-xs: 6px; --r-sm: 8px; --r-ctl: 10px; --r-md: 12px; --r-card: 14px; --r-lg: 18px; --r-xl: 22px; --r-sheet: 26px; --r-pill: 999px;

  /* ---- الظلال ---- */
  --shadow-xs: 0 1px 1px rgba(13,34,54,.05);
  --shadow-card: 0 1px 2px rgba(13,34,54,.05), 0 10px 22px -16px rgba(13,34,54,.2);
  --shadow-hover: 0 1px 2px rgba(13,34,54,.06), 0 18px 34px -18px rgba(13,34,54,.32);
  --shadow-pop: 0 20px 50px -14px rgba(7,28,50,.3), 0 2px 8px rgba(7,28,50,.1);
  --shadow-sheet: 0 28px 80px rgba(7,28,50,.34);
  --shadow-brand: 0 10px 20px -12px rgba(10,103,159,.7);
  --shadow-nav: 0 0 0 1px rgba(255,255,255,.04);
  --scrim: rgba(6,24,43,.5); --scrim-soft: rgba(6,24,43,.16);

  /* ---- الحركة ---- */
  --ease-out: cubic-bezier(.22,1,.36,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.3,1.4,.5,1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 380ms;

  /* ---- الطبقات ---- */
  --z-sticky: 20; --z-fab: 40; --z-side: 55; --z-topbar: 60; --z-bottomnav: 62; --z-drawer: 70; --z-toast: 80; --z-popover: 3700; --z-overlay: 4300;

  /* ---- التخطيط ---- */
  --gutter: 14px; --row-h: 52px; --ctl-h: 38px; --tap: 44px;
  --side-w: 280px; --topbar-h: 64px; --bottomnav-h: 66px; --content-max: 1360px;
}
html.dark {
  color-scheme: dark;
  --brand: #5cc8ea; --brand-strong: #9ddff3; --brand-fill: #2bb1d8;
  --on-brand: #03212e; --brand-soft: rgba(43,177,216,.15); --brand-edge: rgba(92,200,234,.4);
  --accent: #4fd0e6; --accent-soft: rgba(79,208,230,.14); --accent-ink: #7fdcef;
  --gold: #deb25c; --gold-strong: #efc977; --gold-soft: rgba(222,178,92,.14); --gold-ink: #efca7d; --gold-edge: rgba(222,178,92,.5);

  --canvas: #04111c; --surface: #0b1c2b; --surface-2: #102536; --surface-3: #183349; --surface-pop: #102536;
  --hover: #0f2234; --select: #123049;

  --ink: #e9eef3; --ink-2: #c4ccdc; --muted: #a7b0c6; --faint: #7d87a3;
  --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16); --ctl-border: #7c86a3;

  --ok: #34d29f; --ok-soft: rgba(54,214,159,.14); --ok-ink: #5fe3b6;
  --bad: #ff7482; --bad-soft: rgba(255,113,128,.15); --bad-ink: #ff93a0;
  --warn: #f0951c; --warn-soft: rgba(255,166,43,.15); --warn-ink: #ffbd57;
  --debit: #5da0ff; --credit: #57d6a1; --approved: #a884f0;
  --focus: #7db4ff; --focus-soft: rgba(125,180,255,.25);

  --nav-bg: #030d17; --nav-bg-2: #06192a; --nav-ink: #e9eef3; --nav-ink-2: #b6c4d3; --nav-muted: #8a9db1;
  --nav-line: rgba(255,255,255,.08); --nav-hover: #0b2237; --nav-active: #0f2e48; --nav-accent: #e3b866; --nav-icon: #6fbfe0;

  --th-bg: #183349; --th-ink: #e9eef3;

  --shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-card: 0 1px 0 rgba(255,255,255,.045) inset, 0 16px 30px -20px rgba(0,0,0,.85);
  --shadow-hover: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 38px -20px rgba(0,0,0,.9);
  --shadow-pop: 0 0 0 1px rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.55);
  --shadow-sheet: 0 0 0 1px rgba(255,255,255,.07), 0 28px 80px rgba(0,0,0,.65);
  --shadow-brand: 0 10px 22px -12px rgba(43,177,216,.65);
  --shadow-nav: 0 0 0 1px rgba(255,255,255,.05);
  --scrim: rgba(1,8,15,.68); --scrim-soft: rgba(1,8,15,.3);
}

/* نبرات الأيقونات والأنواع: --t الأساس و--t-soft الخلفية و--t-ink النص. تُعيَّن على العنصر فيرثها أبناؤه (data-tone أو tone-*). */
[data-tone="slate"], .tone-slate { --t: #52677b; --t-soft: #e8ecf0; --t-ink: #3a4d60; }
[data-tone="blue"], .tone-blue { --t: #1d5fa8; --t-soft: #e1ecf9; --t-ink: #174a85; }
[data-tone="teal"], .tone-teal { --t: #0f8aa6; --t-soft: #dcf2f7; --t-ink: #0a6a80; }
[data-tone="green"], .tone-green { --t: #0a8659; --t-soft: #ddf4ea; --t-ink: #066a4a; }
[data-tone="gold"], .tone-gold { --t: #a06f1d; --t-soft: #f8eed5; --t-ink: #7a5510; }
[data-tone="red"], .tone-red { --t: #c62c39; --t-soft: #fde9eb; --t-ink: #a91f2c; }
[data-tone="violet"], .tone-violet { --t: #5a3dc8; --t-soft: #ece8fa; --t-ink: #4a31ad; }
html.dark [data-tone="slate"], html.dark .tone-slate { --t: #9fb0c3; --t-soft: rgba(159,176,195,.14); --t-ink: #bccadb; }
html.dark [data-tone="blue"], html.dark .tone-blue { --t: #6aa8f2; --t-soft: rgba(106,168,242,.15); --t-ink: #94c1f7; }
html.dark [data-tone="teal"], html.dark .tone-teal { --t: #4fd0e6; --t-soft: rgba(79,208,230,.14); --t-ink: #7fdcef; }
html.dark [data-tone="green"], html.dark .tone-green { --t: #34d29f; --t-soft: rgba(54,214,159,.14); --t-ink: #5fe3b6; }
html.dark [data-tone="gold"], html.dark .tone-gold { --t: #deb25c; --t-soft: rgba(222,178,92,.14); --t-ink: #efca7d; }
html.dark [data-tone="red"], html.dark .tone-red { --t: #ff7482; --t-soft: rgba(255,113,128,.15); --t-ink: #ff93a0; }
html.dark [data-tone="violet"], html.dark .tone-violet { --t: #a884f0; --t-soft: rgba(168,132,240,.16); --t-ink: #c3a8f5; }

/* الجذر: خلفية وخط وجوال. الهامش الجانبي يتّسع على الحاسوب. */
@media (min-width: 760px) { :root { --gutter: 22px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }
html, body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); }
* { box-sizing: border-box; }
.hidden, [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* @@TOKENS-CSS-END */

/* @@SHELL-CSS-BEGIN */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: block;
  src: url("/assets/fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: block;
  src: url("/assets/fonts/cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* الأساس: طباعة عربية وتركيز وأدوات مساعدة — بادئة shl-. كل الألوان من الرموز؛ لا style مضمّن. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(var(--topbar-h) + 12px); }
html.shl-lock { overflow: hidden; }
html:has(dialog[open]) { overflow: hidden; }
body {
  font-size: var(--fs-md); line-height: var(--lh-normal); font-weight: var(--fw-regular);
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
button, input, select, textarea { font-family: inherit; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::selection { background: var(--brand-soft); color: var(--ink); }

/* الأرقام: جدولية معزولة LTR فلا تتبعثر داخل النص العربي */
.shl-num, bdi { font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.shl-icon { width: 20px; height: 20px; flex: none; }
.shl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* «ما فوق العنوان» التحريري: خط ذهبي قصير ثم نص صغير ثقيل (بلا تباعد أحرف: العربية تتصل) */
.shl-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--gold-ink); line-height: 1.4; }
.shl-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold); }

/* مفتاح لوحة المفاتيح */
.shl-kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 0 6px; height: 22px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); color: var(--muted);
  font-family: inherit; font-size: 11px; font-weight: var(--fw-bold); line-height: 1; white-space: nowrap;
}

/* موجة زخرفية (خطوط فقط): الألوان من متغيرات الحاوية --wave-1/2/3 */
.shl-wave { width: 100%; height: 100%; display: block; }
.shl-wave-a, .shl-wave-b, .shl-wave-c { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.shl-wave-a { stroke: var(--wave-1, var(--brand)); stroke-width: 1.4; opacity: .55; }
.shl-wave-b { stroke: var(--wave-2, var(--gold)); stroke-width: 1.2; opacity: .6; }
.shl-wave-c { stroke: var(--wave-3, var(--accent)); stroke-width: 1; opacity: .3; }

/* هياكل التحميل */
.shl-skeletons { display: grid; gap: 10px; }
.shl-skel {
  border-radius: 8px; min-height: 18px;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%; animation: shl-shimmer 1.4s var(--ease-in-out) infinite;
}
.shl-skel--sm { height: 12px; width: 42%; }
.shl-skel--lg { height: 30px; width: 68%; }
@keyframes shl-shimmer { to { background-position: -200% 0; } }

/* أدوات تخطيط صغيرة */
.shl-stack { display: grid; gap: var(--sp-4); }
.shl-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.shl-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.shl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.shl-muted { color: var(--muted); }
.shl-divider { height: 1px; border: 0; margin: var(--sp-4) 0; background: var(--line); }

/* الهيكل: قائمة جانبية كحلية يمنى · شريط علوي زجاجي · شريط سفلي للجوال · ترويسة الصفحة. بادئة shl-. */

/* ---------- الإطار ---------- */
.shl-app { min-height: 100dvh; }
@media (min-width: 1100px) { .shl-app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.shl-main {
  min-width: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 380px at 100% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--canvas);
}
.shl-content { flex: 1; width: 100%; max-width: var(--content-max); margin-inline: auto; padding: 22px var(--gutter) 56px; outline: none; }
.shl-skip {
  position: fixed; inset-inline-start: 12px; top: -80px; z-index: var(--z-overlay); padding: 10px 18px; border-radius: var(--r-md);
  background: var(--ink); color: var(--surface); font-weight: var(--fw-heavy); text-decoration: none; transition: top var(--dur-2) var(--ease-out);
}
.shl-skip:focus { top: 12px; }

/* ---------- القائمة الجانبية ---------- */
.shl-side {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; z-index: var(--z-side);
  background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg-2)); color: var(--nav-ink);
  border-inline-end: 1px solid var(--nav-line); box-shadow: var(--shadow-nav);
  --wave-1: var(--nav-icon); --wave-2: var(--nav-accent); --wave-3: var(--nav-icon);
}
.shl-side-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 18px 16px; }
.shl-side-head::after { content: ""; position: absolute; inset-inline: 18px; bottom: 0; height: 1px; background: linear-gradient(270deg, var(--gold-edge), var(--nav-line) 70%, transparent); }
.shl-brand { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); color: var(--nav-ink); text-decoration: none; border-radius: var(--r-md); }
.shl-logo { width: 40px; height: 40px; border-radius: 12px; flex: none; box-shadow: 0 0 0 1px var(--nav-line); }
.shl-brand-text { display: grid; line-height: 1.15; }
.shl-brand-text strong { font-size: 21px; font-weight: var(--fw-black); }
.shl-brand-text small { color: var(--nav-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.shl-side-close { display: none; width: var(--tap); height: var(--tap); place-items: center; border: 0; border-radius: var(--r-md); background: transparent; color: var(--nav-ink-2); cursor: pointer; }
.shl-side-close:hover { background: var(--nav-hover); }

.shl-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 18px; display: grid; align-content: start; gap: 3px; overscroll-behavior: contain; }
.shl-ni {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px;
  color: var(--nav-ink-2); font-size: var(--fs-md); font-weight: var(--fw-bold); text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2);
}
.shl-ni:hover { background: var(--nav-hover); color: var(--nav-ink); }
.shl-ni[aria-current="page"] { background: var(--nav-active); color: var(--nav-ink); }
.shl-ni[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -12px; inset-block: 9px; width: 3px; border-radius: 3px; background: var(--nav-accent); }
.shl-ni-icon { width: 18px; height: 18px; color: var(--nav-icon); transition: color var(--dur-2); }
.shl-ni[aria-current="page"] .shl-ni-icon { color: var(--nav-accent); }
.shl-ni-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl-ni--flat { min-height: 46px; padding: 0 10px; font-weight: var(--fw-heavy); color: var(--nav-ink); }
.shl-ni--flat .shl-ni-icon { box-sizing: content-box; width: 18px; height: 18px; padding: 6px; border-radius: 9px; background: var(--nav-hover); }
.shl-ni--flat[aria-current="page"] .shl-ni-icon { background: var(--nav-bg); }
.shl-ni--home { margin-bottom: 6px; }

.shl-ng-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--nav-ink); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-heavy); text-align: start; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}
.shl-ng-head:hover { background: var(--nav-hover); }
.shl-ng-tile { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--nav-hover); color: var(--nav-icon); transition: background-color var(--dur-2), color var(--dur-2); }
.shl-ng-tile .shl-icon { width: 18px; height: 18px; }
.shl-ng[data-active] .shl-ng-tile { background: var(--nav-active); color: var(--nav-accent); }
.shl-ng-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl-ng-count { color: var(--nav-muted); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.shl-ng-chev { width: 16px; height: 16px; color: var(--nav-muted); transition: transform var(--dur-3) var(--ease-out); }
.shl-ng[data-open="1"] .shl-ng-chev { transform: rotate(180deg); }
.shl-ng-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.shl-ng[data-open="1"] .shl-ng-body { grid-template-rows: 1fr; }
.shl-ng-inner { min-height: 0; overflow: hidden; display: grid; gap: 2px; margin-inline-start: 24px; padding-inline-start: 12px; border-inline-start: 1px solid var(--nav-line); }
.shl-ng[data-open="1"] .shl-ng-inner { padding-block: 4px 6px; }
.shl-ng-inner .shl-ni { min-height: 38px; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.shl-ng-inner .shl-ni[aria-current="page"] { font-weight: var(--fw-bold); }
.shl-ng-inner .shl-ni[aria-current="page"]::before { inset-inline-start: -13px; inset-block: 11px; }

.shl-dot {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: var(--on-brand); font-size: 11px; font-weight: var(--fw-heavy); line-height: 1; font-variant-numeric: tabular-nums;
}
.shl-dot[hidden] { display: none; }

.shl-side-foot { position: relative; flex: none; padding: 14px 18px 18px; border-top: 1px solid var(--nav-line); color: var(--nav-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); overflow: hidden; }
.shl-side-wave { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 58px; opacity: .55; pointer-events: none; }
.shl-side-foot-text { position: relative; }

/* ---------- الشريط العلوي ---------- */
.shl-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: 10px;
  min-height: var(--topbar-h); padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--canvas) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.shl-topbar[data-scrolled] { box-shadow: 0 8px 24px -18px color-mix(in srgb, var(--ink) 55%, transparent); }
.shl-spacer { flex: 1; }
.shl-menu-toggle, .shl-top-brand, .shl-top-title { display: none; }
.shl-menu-toggle {
  width: var(--tap); height: var(--tap); place-items: center; flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.shl-menu-toggle:hover { background: var(--hover); }
.shl-top-brand { align-items: center; flex: none; border-radius: var(--r-md); }
.shl-top-brand .shl-logo { width: 36px; height: 36px; }
.shl-top-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--ink); }
@media (max-width: 1099px) { .shl-menu-toggle { display: grid; } .shl-top-brand { display: inline-flex; } }

.shl-search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; max-width: 540px; min-height: 42px; padding: 0 8px 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--muted);
  font: inherit; font-size: var(--fs-md); cursor: text; box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.shl-search:hover { border-color: var(--ctl-border); }
.shl-search .shl-icon { width: 18px; height: 18px; }
.shl-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }

.shl-tools { display: flex; align-items: center; gap: 2px; }
.shl-tool {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.shl-tool:hover { background: var(--surface-3); color: var(--brand); }
.shl-tool:active { transform: scale(.94); }
.shl-tool .shl-dot { position: absolute; inset-block-start: 3px; inset-inline-end: 1px; box-shadow: 0 0 0 2px var(--canvas); }
.shl-quick-btn { min-height: 42px; border-radius: var(--r-pill); padding: 0 18px 0 16px; }

.shl-acct {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px 4px 12px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.shl-acct:hover { background: var(--surface); border-color: var(--line-strong); }
.shl-acct-text { display: grid; line-height: 1.25; text-align: start; }
.shl-acct-text strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl-acct-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.shl-acct-chev { width: 15px; height: 15px; color: var(--muted); }
@media (max-width: 1099px) { .shl-acct-text, .shl-acct-chev { display: none; } .shl-acct { padding: 2px; } }
@media (max-width: 899px) { .shl-quick-label { display: none; } .shl-topbar .shl-quick-btn { width: 42px; padding: 0; } .shl-search-text, .shl-search .shl-kbd { display: none; } .shl-search { flex: 0 0 auto; width: 42px; padding: 0; justify-content: center; } }

/* الجوال: عنوان الصفحة في الشريط، والبحث والإجراء السريع والإشعارات في الشريط السفلي */
@media (max-width: 759px) {
  .shl-top-title { display: block; opacity: 0; transform: translateY(5px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .shl-topbar[data-scrolled="title"] .shl-top-title { opacity: 1; transform: none; }
  .shl-topbar { min-height: 58px; padding-block: 8px; }
  .shl-topbar .shl-search, .shl-topbar .shl-quick-btn, .shl-tools .shl-tool[data-tool="notifications"], .shl-topbar .shl-spacer { display: none; }
  .shl-content { padding-bottom: calc(var(--bottomnav-h) + 36px + env(safe-area-inset-bottom)); }
}

/* الصورة الرمزية */
.shl-avatar {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%; line-height: 1; font-weight: var(--fw-heavy); user-select: none;
  background: var(--t-soft, var(--brand-soft)); color: var(--t-ink, var(--brand));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t, var(--brand)) 30%, transparent);
}
.shl-avatar--sm { width: 34px; height: 34px; font-size: 13px; }
.shl-avatar--md { width: 42px; height: 42px; font-size: 15px; }
.shl-avatar--lg { width: 60px; height: 60px; font-size: 21px; }

/* ---------- الشريط السفلي (جوال) ---------- */
.shl-bottom { display: none; }
@media (max-width: 759px) {
  .shl-bottom {
    position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-bottomnav); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    min-height: var(--bottomnav-h); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 93%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
  }
}
.shl-bottom-item {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--muted); font: inherit; text-decoration: none; cursor: pointer;
}
.shl-bottom-item .shl-icon { width: 22px; height: 22px; }
.shl-bottom-label { font-size: 11px; font-weight: var(--fw-bold); line-height: 1.2; }
.shl-bottom-item[aria-current="page"], .shl-bottom-item[aria-expanded="true"] { color: var(--brand); }
.shl-bottom-item[aria-current="page"]::before { content: ""; position: absolute; inset-block-start: 0; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.shl-bottom-item .shl-dot { position: absolute; inset-block-start: 2px; inset-inline-start: calc(50% + 4px); box-shadow: 0 0 0 2px var(--surface); }
.shl-bottom-plus {
  display: grid; place-items: center; justify-self: center; width: 56px; height: 56px; margin-top: -26px; border: 4px solid var(--canvas); border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-fill), var(--accent)); color: var(--on-brand); box-shadow: var(--shadow-brand); cursor: pointer;
  transition: transform var(--dur-2) var(--ease-spring);
}
.shl-bottom-plus:active { transform: scale(.92); }
.shl-bottom-plus .shl-icon { width: 26px; height: 26px; }

/* ---------- الدرج (تحت 1100px): القائمة الجانبية نفسها تنزلق من اليمين ---------- */
.shl-scrim { display: none; }
@media (max-width: 1099px) {
  .shl-side {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-drawer); width: min(88vw, 340px); height: 100dvh;
    transform: translateX(100%); visibility: hidden; box-shadow: var(--shadow-sheet);
    transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }
  .shl-app[data-drawer="open"] .shl-side { transform: none; visibility: visible; transition-delay: 0s; }
  .shl-side-close { display: grid; }
  .shl-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); }
  .shl-app[data-drawer="open"] .shl-scrim { opacity: 1; pointer-events: auto; }
}

/* ---------- ترويسة الصفحة التحريرية ---------- */
.shl-ph, .shl-content > .shl-ph-legacy { position: relative; margin-bottom: 24px; padding-bottom: 18px; }
.shl-ph::before, .shl-content > .shl-ph-legacy::before {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; z-index: 1; width: 56px; height: 3px; border-radius: 3px; background: var(--gold);
}
.shl-ph::after, .shl-content > .shl-ph-legacy::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--line-strong); }
.shl-ph { display: grid; gap: 10px; }
.shl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.shl-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.shl-crumbs a { color: var(--muted); text-decoration: none; border-radius: 4px; }
.shl-crumbs a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.shl-crumbs li[aria-current="page"] { color: var(--ink-2); }
.shl-crumb-sep { width: 13px; height: 13px; opacity: .6; }
.shl-ph-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shl-ph-main { display: grid; gap: 6px; min-width: 0; }
.shl-ph-title { margin: 0; font-size: clamp(25px, 1.6vw + 18px, 34px); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--ink); text-wrap: balance; }
.shl-ph-sub { margin: 0; max-width: 68ch; color: var(--muted); font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-medium); }
.shl-ph-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* الترويسات القديمة (*-head): مقاس العنوان نفسه ورقيّ الفاصل، بلا تعديل في الشاشات */
.shl-content > .shl-ph-legacy { margin-bottom: 22px; }
.shl-ph-legacy > h1 { font-size: clamp(25px, 1.6vw + 18px, 34px); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--ink); text-wrap: balance; }

/* ---------- ظهور تدريجي للبطاقات (يتعطل مع reduced-motion بقاعدة الرموز) ---------- */
.shl-rise { animation: shl-rise var(--dur-4) var(--ease-out) backwards; }
@keyframes shl-rise { from { opacity: 0; transform: translateY(12px); } }

/* المكوّنات المشتركة (docs/COMPONENTS.md): أزرار · حقول · بطاقات · شارات · تبويبات · KPI · جدول بيانات · حالات. بادئة shl-. */

/* ---------- الأزرار ---------- */
.shl-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid transparent; font: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), color var(--dur-2);
}
.shl-btn:active { transform: scale(.97); }
.shl-btn .shl-icon { width: 18px; height: 18px; }
.shl-btn--primary { background: var(--brand-fill); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.shl-btn--primary:hover { background: color-mix(in srgb, var(--brand-fill) 86%, var(--ink)); transform: translateY(-1px); }
.shl-btn--primary:active { transform: scale(.97); }
/* ثانوي: حدّ وخلفية شفافة (الاسم القديم ghost باقٍ مرادفاً) */
.shl-btn--secondary, .shl-btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--ctl-border); }
.shl-btn--secondary:hover, .shl-btn--ghost:hover { background: var(--brand-soft); border-color: var(--brand-edge); color: var(--brand); }
/* هادئ: بلا حدّ، للإجراءات الثالثة */
.shl-btn--quiet { background: transparent; color: var(--ink-2); }
.shl-btn--quiet:hover { background: var(--surface-3); color: var(--ink); }
.shl-btn--danger { background: var(--bad-soft); color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.shl-btn--danger:hover { background: color-mix(in srgb, var(--bad-soft) 82%, var(--bad)); transform: translateY(-1px); }
.shl-btn--icon { width: var(--tap); min-width: var(--tap); height: var(--tap); padding: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-2); }
.shl-btn--icon:hover { background: var(--surface-3); color: var(--brand); }
.shl-btn--sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); }
.shl-btn--icon.shl-btn--sm { width: 36px; min-width: 36px; padding: 0; }
.shl-btn--lg { min-height: 50px; padding: 0 24px; font-size: var(--fs-lg); border-radius: 13px; }
.shl-btn--block { width: 100%; }
.shl-btn[disabled], .shl-btn.is-busy { pointer-events: none; opacity: .62; }
.shl-btn.is-busy::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent; animation: shl-spin 700ms linear infinite;
}
@keyframes shl-spin { to { transform: rotate(360deg); } }
.shl-btn-arrow { transition: transform var(--dur-2) var(--ease-out); }
.shl-btn:hover .shl-btn-arrow { transform: translateX(-3px); }
@media (pointer: coarse) { .shl-btn, .shl-chip { min-height: var(--tap); } }
a.shl-btn { text-decoration: none; }
/* مجموعة أزرار ملتحمة */
.shl-btn-group { display: inline-flex; }
.shl-btn-group > .shl-btn { border-radius: 0; margin-inline-start: -1px; }
.shl-btn-group > .shl-btn:first-child { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); margin-inline-start: 0; }
.shl-btn-group > .shl-btn:last-child { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.shl-btn-group > .shl-btn:hover, .shl-btn-group > .shl-btn:focus-visible { z-index: 1; }

/* ---------- الحقول ---------- */
.shl-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.shl-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); }
.shl-input, .shl-select {
  width: 100%; min-height: var(--ctl-h); padding: 6px 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--ctl-border); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-regular);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}
.shl-input::placeholder { color: var(--faint); }
.shl-input:hover, .shl-select:hover { border-color: var(--ink-2); }
.shl-input:focus, .shl-select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-soft); }
.shl-input[aria-invalid="true"], .shl-select[aria-invalid="true"] { border-color: var(--bad); }
.shl-input[aria-invalid="true"]:focus, .shl-select[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--bad-soft); }
.shl-input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.shl-input[disabled], .shl-select[disabled] { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
.shl-input[dir="ltr"] { text-align: start; }
textarea.shl-input { min-height: 88px; resize: vertical; line-height: 1.65; }
/* القائمة المنسدلة: سهم بتدرجين (الاتجاه RTL: السهم عند الحافة اليسرى) */
select.shl-select {
  appearance: none; -webkit-appearance: none; padding-inline-start: 12px; padding-inline-end: 36px; cursor: pointer;   /* السهم عند الطرف الأيسر = نهاية السطر في RTL */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: 12px calc(50% + 1px), 18px calc(50% + 1px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.shl-error { color: var(--bad-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); min-height: 1.2em; }
.shl-error:empty { display: none; }
.shl-hint { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.shl-field--wide { grid-column: 1 / -1; }
@media (pointer: coarse) { .shl-input, .shl-select { font-size: 16px; min-height: 44px; } }
/* حقل بأيقونة بادئة وعنصر لاحق */
.shl-input-wrap { position: relative; display: flex; align-items: center; }
.shl-input-icon { position: absolute; inset-inline-start: 13px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.shl-input-wrap.has-icon .shl-input { padding-inline-start: 42px; }
.shl-input-wrap.has-trailing .shl-input { padding-inline-end: 46px; }
.shl-reveal { position: absolute; inset-inline-end: 4px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.shl-reveal:hover { background: var(--surface-3); color: var(--ink); }
.shl-reveal .shl-icon { width: 18px; height: 18px; }
.shl-form-error { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--bad-soft); color: var(--bad-ink); font-weight: var(--fw-bold); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.shl-form-error:empty { display: none; }

/* خانة اختيار / زر اختيار مصمّمان */
.shl-check { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-weight: var(--fw-medium); }
.shl-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shl-check-box {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ctl-border); border-radius: 7px; background: var(--surface);
  color: transparent; transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-spring);
}
.shl-check-box .shl-icon { width: 15px; height: 15px; stroke-width: 3; }
.shl-check-input[type="radio"] + .shl-check-box { border-radius: 50%; }
.shl-check-input:checked + .shl-check-box { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
.shl-check-input:active + .shl-check-box { transform: scale(.9); }
.shl-check-input:focus-visible + .shl-check-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.shl-check-input:disabled + .shl-check-box { opacity: .5; }
/* مفتاح تبديل */
.shl-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; cursor: pointer; font-weight: var(--fw-bold); }
.shl-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shl-switch-track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--ctl-border); transition: background-color var(--dur-2), border-color var(--dur-2); }
.shl-switch-track::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ctl-border);
  transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2);
}
.shl-switch-input:checked + .shl-switch-track { background: var(--brand-fill); border-color: var(--brand-fill); }
.shl-switch-input:checked + .shl-switch-track::after { background: var(--on-brand); transform: translateX(-18px); }
.shl-switch-input:focus-visible + .shl-switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- البطاقات ---------- */
.shl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.shl-card--flat { box-shadow: none; }
.shl-card--interactive { cursor: pointer; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.shl-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand-edge); }
.shl-card--rail { position: relative; overflow: hidden; }
.shl-card--rail::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--t, var(--brand-edge)); }
.shl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.shl-card-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.shl-card-body { padding: 16px 18px; }
.shl-card-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-card) var(--r-card); }

/* ---------- الشارات والحبّات ---------- */
.shl-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; background: var(--surface-3); color: var(--ink-2);
}
.shl-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.shl-badge--ok { background: var(--ok-soft); color: var(--ok-ink); }
.shl-badge--bad { background: var(--bad-soft); color: var(--bad-ink); }
.shl-badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
.shl-badge--brand { background: var(--brand-soft); color: var(--brand); }
.shl-badge--gold { background: var(--gold-soft); color: var(--gold-ink); }
.shl-badge--violet { background: color-mix(in srgb, var(--approved) 11%, transparent); color: var(--approved); }
.shl-badge--bad::before { border-radius: 2px; }                   /* مربع للأحمر: يُقرأ بالرمادي */
.shl-badge--warn::before { border-radius: 2px; transform: rotate(45deg); }
.shl-badge--lg { padding: 4px 14px; font-size: var(--fs-sm); }

.shl-chip {
  min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.shl-chip:hover { background: var(--hover); }
.shl-chip[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-edge); }
.shl-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums;
}

/* ---------- التبويبات والتحكم المقطعي ---------- */
.shl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; }
.shl-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-weight: var(--fw-heavy); cursor: pointer; white-space: nowrap; transition: color var(--dur-2);
}
.shl-tab::after { content: ""; position: absolute; inset-inline: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); transform: scaleX(0); transition: transform var(--dur-3) var(--ease-out); }
.shl-tab:hover { color: var(--ink); }
.shl-tab[aria-selected="true"] { color: var(--ink); }
.shl-tab[aria-selected="true"]::after { transform: scaleX(1); }
.shl-tab[aria-selected="true"] .shl-count { background: var(--brand-soft); color: var(--brand); }
.shl-seg { justify-self: start; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--line); }
.shl-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.shl-seg-btn[aria-checked="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-card); }

/* ---------- مؤشر KPI ---------- */
.shl-kpi {
  position: relative; display: grid; gap: 10px; padding: 18px 18px 16px; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.shl-kpi::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 18px; width: 30px; height: 3px; border-radius: 0 0 3px 3px; background: var(--t, var(--gold)); }
a.shl-kpi { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
a.shl-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand-edge); }
.shl-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shl-kpi-label { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.shl-kpi-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.shl-kpi-icon .shl-icon { width: 18px; height: 18px; }
.shl-kpi-value { display: flex; align-items: baseline; gap: 6px; font-size: clamp(25px, 1.4vw + 15px, 33px); font-weight: var(--fw-black); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.shl-kpi-unit { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.shl-kpi.is-neg .shl-kpi-value { color: var(--bad-ink); }
.shl-kpi-foot { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.shl-kpi--skeleton { gap: 14px; }

/* ---------- شريط التقدم ---------- */
.shl-progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.shl-progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }
.shl-progress::-webkit-progress-value { background: var(--t, var(--brand-fill)); border-radius: 99px; transition: width var(--dur-4) var(--ease-out); }
.shl-progress::-moz-progress-bar { background: var(--t, var(--brand-fill)); border-radius: 99px; }

/* ---------- تلميح خفيف (data-tip) ---------- */
@media (hover: hover) and (pointer: fine) {
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip); position: absolute; inset-block-end: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); z-index: var(--z-popover);
    padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- القسم ---------- */
.shl-section { margin-top: 30px; }
.shl-section:first-child { margin-top: 0; }
.shl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.shl-section-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.shl-section-title::before { content: ""; flex: none; width: 4px; height: 20px; border-radius: 2px; background: var(--gold); }
.shl-section-title .shl-icon { width: 20px; height: 20px; color: var(--brand); }
.shl-section-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- حالات الواجهة: فارغ · خطأ ---------- */
.shl-state { display: grid; justify-items: center; gap: 10px; padding: 44px 16px; text-align: center; color: var(--muted); }
.shl-state strong { color: var(--ink); font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.shl-state > span:not(.shl-state-icon) { max-width: 46ch; }
.shl-state > .shl-icon { width: 40px; height: 40px; color: var(--faint); }
.shl-state-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--surface-3); color: var(--muted); }
.shl-state-icon .shl-icon { width: 26px; height: 26px; }
.shl-state--compact { padding: 26px 12px; }
.shl-state--compact .shl-state-icon { width: 46px; height: 46px; }
.shl-state--error .shl-state-icon { background: var(--bad-soft); color: var(--bad-ink); }

/* ---------- الإشعار المؤقت (toast) ---------- */
.shl-toasts {
  position: fixed; inset: auto; inset-inline-end: 16px; inset-block-end: calc(16px + env(safe-area-inset-bottom)); z-index: var(--z-toast);
  display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none;
}
.shl-toast {
  --t: var(--brand);
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); pointer-events: auto;
  background: var(--surface-pop); color: var(--ink); font-weight: var(--fw-bold); border: 1px solid var(--line-strong); border-inline-start: 4px solid var(--t);
  box-shadow: var(--shadow-pop); animation: shl-toast-in var(--dur-3) var(--ease-out) backwards; transition: opacity var(--dur-2), transform var(--dur-2);
}
.shl-toast-icon { width: 20px; height: 20px; color: var(--t); }
.shl-toast--ok { --t: var(--ok); }
.shl-toast--warn { --t: var(--warn); }
.shl-toast--error { --t: var(--bad); }
.shl-toast.is-leaving { opacity: 0; transform: translateY(6px); }
@keyframes shl-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 759px) { .shl-toasts { inset-block-end: calc(var(--bottomnav-h) + 22px + env(safe-area-inset-bottom)); inset-inline: 12px; width: auto; } }

/* ---------- جدول بيانات عام ---------- */
.shl-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.shl-table-wrap--scroll { max-height: 70dvh; overflow: auto; }
.shl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.shl-table thead th {
  position: sticky; top: 0; z-index: 1; height: 46px; padding: 0 16px; background: var(--th-bg); color: var(--th-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-heavy); text-align: start; white-space: nowrap;
}
.shl-table tbody td { height: var(--row-h); padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.shl-table tbody tr:last-child td { border-bottom: 0; }
.shl-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 75%, transparent); }
.shl-table tbody tr.is-interactive { cursor: pointer; }
.shl-table tbody tr:hover td { background: var(--hover); }
.shl-table tbody tr[aria-selected="true"] td { background: var(--select); }
.shl-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.shl-table tbody tr:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.shl-table .is-num { text-align: end; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; font-weight: var(--fw-bold); }
.shl-table .is-center { text-align: center; }
.shl-table .is-end { text-align: end; }
@media (max-width: 759px) {
  .shl-table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .shl-table, .shl-table tbody, .shl-table tr, .shl-table td { display: block; }
  .shl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .shl-table tbody tr { margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
  .shl-table tbody tr:hover td, .shl-table tbody tr:nth-child(even) td, .shl-table tbody tr[aria-selected="true"] td { background: transparent; }
  .shl-table tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; height: auto; padding: 6px 0; border: 0; }
  .shl-table tbody td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  .shl-table tbody td.is-title { display: block; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
  .shl-table tbody td.is-title::before { content: none; }
  .shl-table .is-hide-m { display: none; }
  .shl-table .is-num { text-align: start; }
}

/* ---------- قواعد كلمة المرور (الدخول وتغييرها) ---------- */
.shl-rules-box { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.shl-rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.shl-rules li { display: flex; align-items: center; gap: 8px; }
.shl-rules .shl-icon { width: 16px; height: 16px; opacity: .3; }
.shl-rules li[data-ok] { color: var(--ok-ink); font-weight: var(--fw-bold); }
.shl-rules li[data-ok] .shl-icon { opacity: 1; color: var(--ok); }

/* ---------- تنبيه مضمَّن (callout) ---------- */
.shl-callout {
  --c: var(--brand); --c-soft: var(--brand-soft); --c-ink: var(--ink-2);
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--c-soft); color: var(--c-ink); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-inline-start: 4px solid var(--c);
}
.shl-callout--ok { --c: var(--ok); --c-soft: var(--ok-soft); --c-ink: var(--ok-ink); }
.shl-callout--warn { --c: var(--warn); --c-soft: var(--warn-soft); --c-ink: var(--warn-ink); }
.shl-callout--bad { --c: var(--bad); --c-soft: var(--bad-soft); --c-ink: var(--bad-ink); }
.shl-callout-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: var(--c); }
.shl-callout-icon .shl-icon { width: 22px; height: 22px; }
.shl-callout-body { display: grid; gap: 2px; flex: 1; min-width: 0; font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.shl-callout-body strong { font-weight: var(--fw-heavy); }
.shl-callout .shl-btn { flex: none; align-self: center; }

/* ---------- قائمة مفتاح/قيمة ---------- */
.shl-kv { display: grid; gap: 14px 24px; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shl-kv--1 { grid-template-columns: 1fr; }
.shl-kv--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shl-kv-row { display: grid; gap: 2px; min-width: 0; align-content: start; }
.shl-kv-row--wide { grid-column: 1 / -1; }
.shl-kv dt { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.shl-kv dd { margin: 0; color: var(--ink); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
@media (max-width: 759px) { .shl-kv--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- شريط أدوات القوائم وحقل البحث ---------- */
.shl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.shl-toolbar-grow { flex: 1 1 260px; min-width: 0; }
.shl-toolbar .shl-select { width: auto; min-width: 150px; }
.shl-search-wrap .shl-input { border-radius: var(--r-pill); padding-inline-end: 40px; }
.shl-search-clear {
  position: absolute; inset-inline-end: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--surface-3); color: var(--muted); cursor: pointer;
}
.shl-search-clear[hidden] { display: none; }
.shl-search-clear:hover { color: var(--ink); }
.shl-search-clear .shl-icon { width: 15px; height: 15px; }
.shl-search-input::-webkit-search-cancel-button { display: none; }

/* ---------- قائمة صفوف (إشعارات، مهام، نشاط) ---------- */
.shl-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.shl-li {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; background: transparent;
  color: var(--ink); font: inherit; text-align: start; text-decoration: none;
}
.shl-li + .shl-li { border-top: 1px solid var(--line); }
.shl-li.is-interactive { cursor: pointer; transition: background-color var(--dur-2); }
.shl-li.is-interactive:hover, .shl-li.is-interactive:focus-visible { background: var(--hover); }
.shl-li.is-unread { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }
.shl-li-tile { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.shl-li-tile .shl-icon { width: 21px; height: 21px; }
.shl-li-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.shl-li-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.shl-li-text { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.shl-li-meta { flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.shl-li-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-fill); }

/* ---------- مؤشر الخطوات ---------- */
.shl-stepper { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.shl-step { position: relative; display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding-block: 4px; }
.shl-step:last-child { flex: none; }
.shl-step:not(:last-child)::after { content: ""; flex: 1 1 20px; min-width: 14px; height: 2px; margin-inline: 4px; border-radius: 2px; background: var(--line-strong); }
.shl-step.is-done:not(:last-child)::after { background: var(--gold); }
.shl-step-dot {
  position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-black); font-variant-numeric: tabular-nums;
}
.shl-step-dot .shl-icon { width: 16px; height: 16px; stroke-width: 3; }
.shl-step.is-done .shl-step-dot { background: var(--ok); border-color: var(--ok); color: var(--on-brand); }
.shl-step.is-current .shl-step-dot { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.shl-step-text { display: grid; line-height: 1.3; min-width: 0; }
.shl-step-text strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); color: var(--ink-2); }
.shl-step.is-current .shl-step-text strong { color: var(--ink); }
.shl-step-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
@media (max-width: 759px) { .shl-stepper { flex-direction: column; align-items: stretch; gap: 10px; } .shl-step:not(:last-child)::after { display: none; } }

/* ---------- ترقيم الصفحات ---------- */
.shl-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.shl-pager[hidden] { display: none; }
.shl-pager-info { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* الأوراق والحوارات والمنبثقات ولوحة البحث الاحتياطية: بادئة shl-. dialog أصلي (عزل الخلفية وفخ التركيز مجاناً). */

/* ---------- ورقة/درج ---------- */
.shl-sheet {
  border: 0; padding: 0; color: var(--ink); background: var(--surface-pop); box-shadow: var(--shadow-sheet);
  max-width: none; inset: auto 0 0 0; width: 100%; max-height: min(90dvh, 780px); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding-bottom: env(safe-area-inset-bottom); overflow: auto; overscroll-behavior: contain;
}
.shl-sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.shl-sheet[open] { animation: shl-sheet-in var(--dur-3) var(--ease-out) backwards; }
@keyframes shl-sheet-in { from { transform: translateY(28px); opacity: 0; } }
.shl-sheet:not(.shl-confirm)::before { content: ""; display: block; width: 42px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line-strong); }
@media (min-width: 900px) {
  .shl-sheet { inset: 0 auto 0 0; width: min(100%, 580px); height: 100dvh; max-height: none; border-radius: 0 var(--r-sheet) var(--r-sheet) 0; }
  .shl-sheet:not(.shl-confirm)::before { display: none; }
  .shl-sheet[open] { animation-name: shl-drawer-in; }
}
@keyframes shl-drawer-in { from { transform: translateX(-32px); opacity: 0; } }
.shl-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px; background: var(--surface-pop); border-bottom: 1px solid var(--line); }
.shl-sheet-head::after { content: ""; position: absolute; inset-inline-start: 20px; bottom: -1px; width: 44px; height: 3px; border-radius: 3px; background: var(--gold); }
.shl-sheet-head h2 { margin: 0; flex: 1; font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.shl-sheet-titles { display: grid; gap: 2px; flex: 1; min-width: 0; }
.shl-sheet-titles h2 { flex: none; }
.shl-sheet-body { padding: 18px 20px 24px; display: grid; gap: 16px; }
/* ذيل لاصق للنماذج داخل الورقة */
.shl-sheet-foot {
  position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--surface-pop); border-top: 1px solid var(--line);
}
.shl-sheet-foot .shl-btn--primary { flex: 1; }
.shl-sheet-foot .shl-form-error { flex-basis: 100%; }
.shl-sheet--form { padding-bottom: 0; }

/* ---------- حوار التأكيد: وسطي على كل العروض ---------- */
.shl-confirm {
  inset: 0; margin: auto; width: min(92vw, 440px); height: fit-content; max-height: 90dvh;
  border-radius: var(--r-xl); padding-bottom: 0; border: 1px solid var(--line-strong);
}
.shl-confirm[open] { animation-name: shl-confirm-in; }
@keyframes shl-confirm-in { from { transform: scale(.96) translateY(8px); opacity: 0; } }
.shl-confirm-body { display: grid; gap: 12px; padding: 22px; }
.shl-confirm-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.shl-confirm-icon--danger { background: var(--bad-soft); color: var(--bad-ink); }
.shl-confirm-body h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); }
.shl-confirm-body p { margin: 0; color: var(--ink-2); }
.shl-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 480px) { .shl-confirm-actions .shl-btn { flex: 1; } }

/* ---------- المنبثقات: لوحة تحت الشريط العلوي على الحاسوب، وورقة سفلية على الجوال ---------- */
.shl-pop {
  margin: 0; padding: 0; color: var(--ink); background: var(--surface-pop); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); overflow: auto; overscroll-behavior: contain; max-width: none;
  position: fixed; inset: auto 0 0 0; width: 100%; max-height: min(86dvh, 700px); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom);
}
.shl-pop::backdrop { background: var(--scrim-soft); }
.shl-pop[open] { animation: shl-sheet-in var(--dur-3) var(--ease-out) backwards; }
.shl-pop::before { content: ""; display: block; width: 42px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line-strong); }
.shl-pop:focus { outline: none; }
@media (min-width: 760px) {
  .shl-pop { inset-block-start: calc(var(--topbar-h) - 6px); inset-block-end: auto; inset-inline-start: auto; inset-inline-end: var(--gutter); width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - var(--topbar-h) - 20px); border-radius: var(--r-lg); padding-bottom: 0; }
  .shl-pop::before { display: none; }
  .shl-pop[open] { animation-name: shl-pop-in; transform-origin: top left; }
  .shl-pop--quick { width: min(700px, calc(100vw - 32px)); }
}
@media (min-width: 1100px) {
  .shl-pop--quick { width: min(940px, calc(100vw - 48px)); }
}
@keyframes shl-pop-in { from { transform: translateY(-8px) scale(.97); opacity: 0; } }
.shl-pop-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-pop); border-bottom: 1px solid var(--line); }
.shl-pop-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); }
.shl-pop-icon .shl-icon { width: 18px; height: 18px; }
.shl-pop-title { flex: 1; margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); }

/* إجراء سريع */
.shl-qm-search-wrap { position: relative; padding: 14px 16px 0; display: flex; align-items: center; }
.shl-qm-search-wrap .shl-icon { position: absolute; inset-inline-start: 28px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.shl-qm-search { padding-inline-start: 42px; border-radius: var(--r-pill); }
.shl-qm-groups { padding: 16px; }
.shl-qm-group { display: grid; gap: 6px; align-content: start; break-inside: avoid; margin-bottom: 18px; }
@media (min-width: 760px) { .shl-pop--quick .shl-qm-groups { columns: 2; column-gap: 28px; } }
@media (min-width: 1100px) { .shl-pop--quick .shl-qm-groups { columns: 3; column-gap: 30px; } }
.shl-qm-group-title { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.shl-qm-group-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.shl-qm-group-icon .shl-icon { width: 15px; height: 15px; }
.shl-qm-list { display: grid; gap: 2px; }
.shl-qa {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 5px 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: inherit; font-weight: var(--fw-bold); text-align: start; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.shl-qa:hover, .shl-qa:focus-visible { background: var(--hover); }
.shl-qa:active { transform: scale(.985); }
.shl-qa::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 12px; width: 3px; border-radius: 3px; background: var(--gold); opacity: 0; transition: opacity var(--dur-2); }
.shl-qa:hover::before, .shl-qa:focus-visible::before { opacity: 1; }
.shl-qa-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.shl-qa-tile .shl-icon { width: 18px; height: 18px; }
.shl-qa-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* قائمة الحساب */
.shl-acc-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 16px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent); }
.shl-acc-id { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.shl-acc-id strong { font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1.3; }
.shl-acc-id small { color: var(--muted); font-weight: var(--fw-bold); }
.shl-acc-close { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; }
.shl-menu-list { display: grid; gap: 2px; padding: 8px; }
.shl-menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font: inherit; font-weight: var(--fw-bold); text-align: start; cursor: pointer; transition: background-color var(--dur-2);
}
.shl-menu-row:hover { background: var(--hover); }
.shl-menu-row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); color: var(--ink-2); flex: none; }
.shl-menu-row-icon .shl-icon { width: 17px; height: 17px; }
.shl-menu-row-label { flex: 1; }
.shl-menu-row--switch { cursor: default; justify-content: flex-start; }
.shl-menu-row--switch:hover { background: transparent; }
.shl-menu-row--switch .shl-switch { flex: 1; justify-content: space-between; flex-direction: row-reverse; }
.shl-menu-row--danger { color: var(--bad-ink); }
.shl-menu-row--danger .shl-menu-row-icon { background: var(--bad-soft); color: var(--bad-ink); }
.shl-acc-hint { margin: 0; padding: 4px 16px 14px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

.shl-notif-body { min-height: 180px; display: grid; align-content: center; }

/* ---------- لوحة البحث والأوامر (الاحتياطية) ---------- */
.shl-cmd {
  margin: 10dvh auto auto; padding: 0; width: min(640px, calc(100vw - 24px)); color: var(--ink); background: var(--surface-pop);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-sheet); overflow: hidden; max-height: 80dvh;
}
.shl-cmd[open] { display: flex; flex-direction: column; animation: shl-confirm-in var(--dur-3) var(--ease-out) backwards; }
.shl-cmd::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.shl-cmd-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-bottom: 1px solid var(--line); }
.shl-cmd-head > .shl-icon { margin-inline-start: 8px; color: var(--faint); }
.shl-cmd-input { flex: 1; min-width: 0; min-height: 46px; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.shl-cmd-input::placeholder { color: var(--faint); font-weight: var(--fw-medium); }
.shl-cmd-list { display: grid; gap: 2px; padding: 8px; overflow-y: auto; min-height: 0; }
.shl-cmd-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: var(--fw-bold); text-align: start; cursor: pointer; }
.shl-cmd-item[aria-selected="true"] { background: var(--select); }
.shl-cmd-item-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); color: var(--ink-2); }
.shl-cmd-item[data-kind="action"] .shl-cmd-item-icon { background: var(--gold-soft); color: var(--gold-ink); }
.shl-cmd-item-icon .shl-icon { width: 17px; height: 17px; }
.shl-cmd-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl-cmd-item-group { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.shl-cmd-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.shl-cmd-foot span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 759px) { .shl-cmd { margin-top: 6dvh; } .shl-cmd-foot { display: none; } }

/* الدخول وتغيير كلمة المرور: لوحة هوية كحلية بالموجة + لوحة النموذج على الورق العاجي. بادئة shl-auth. */
.shl-auth { position: relative; min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--canvas); }
@media (min-width: 900px) { .shl-auth { grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); } }

.shl-auth-brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 30px var(--gutter) 64px; color: var(--nav-ink);
  background:
    radial-gradient(900px 520px at 88% -8%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(700px 480px at -10% 112%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%),
    linear-gradient(162deg, var(--nav-bg-2), var(--nav-bg));
  --wave-1: var(--nav-icon); --wave-2: var(--nav-accent); --wave-3: var(--nav-icon);
}
.shl-auth-wave { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 52%; pointer-events: none; }
.shl-auth-wave .shl-wave-a { stroke-width: 1.6; opacity: .5; }
.shl-auth-wave .shl-wave-b { stroke-width: 1.6; opacity: .75; }
.shl-auth-wave .shl-wave-c { stroke-width: 1.2; opacity: .3; }
.shl-auth-brand-inner { position: relative; display: grid; gap: 4px; align-content: start; }
.shl-auth-logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 0 0 1px var(--nav-line), 0 18px 40px -16px color-mix(in srgb, var(--ink) 55%, transparent); margin-bottom: 18px; }
.shl-auth-kicker { margin: 0; color: var(--nav-accent); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.shl-auth-word {
  margin: 0; font-size: clamp(46px, 7vw, 84px); font-weight: var(--fw-black); line-height: 1.02;
  background: linear-gradient(95deg, var(--nav-ink), var(--nav-icon)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shl-auth-rule { display: block; width: 68px; height: 3px; margin: 20px 0 18px; border-radius: 2px; background: var(--nav-accent); }
.shl-auth-tagline { margin: 0; max-width: 17em; font-size: clamp(20px, 2.2vw, 28px); font-weight: var(--fw-black); line-height: 1.5; color: var(--nav-ink); text-wrap: balance; }
.shl-auth-lead { margin: 10px 0 0; max-width: 32em; color: var(--nav-ink-2); font-size: var(--fs-lg); line-height: var(--lh-loose); font-weight: var(--fw-medium); }
.shl-auth-brand-foot { position: relative; margin: 0; color: var(--nav-ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-shadow: 0 0 10px var(--nav-bg), 0 0 3px var(--nav-bg), 0 0 3px var(--nav-bg); }   /* تبقى مقروءة فوق خطوط الموجة */
@media (min-width: 900px) {
  .shl-auth-brand { min-height: 100dvh; padding: 56px 64px 44px; }
  .shl-auth-logo { width: 84px; height: 84px; border-radius: 22px; }
}
@media (max-width: 899px) {
  .shl-auth { grid-template-rows: auto 1fr; }
  .shl-auth-brand { gap: 0; min-height: 0; }
  .shl-auth-tagline, .shl-auth-lead, .shl-auth-brand-foot, .shl-auth-rule { display: none; }
  .shl-auth-brand-inner { grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .shl-auth-logo { grid-row: span 2; margin: 0; }
  .shl-auth-word { font-size: 34px; }
  .shl-auth-wave { height: 70%; }
}

.shl-auth-panel { position: relative; display: grid; align-items: center; justify-items: center; padding: 28px var(--gutter) 40px; background: var(--canvas); }
@media (max-width: 899px) { .shl-auth-panel { margin-top: -30px; border-radius: 30px 30px 0 0; align-items: start; padding-top: 32px; } }
@media (min-width: 600px) and (max-width: 899px) and (min-height: 760px) { .shl-auth-panel { align-items: center; padding-block: 56px 72px; } }   /* لوحي طويل: النموذج في المنتصف لا ملتصقاً بالأعلى */
.shl-auth-form-wrap { width: min(100%, 420px); display: grid; gap: 22px; }
.shl-auth-head { display: grid; gap: 8px; }
.shl-auth-head h1 { margin: 0; font-size: clamp(30px, 3vw, 38px); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--ink); }
.shl-auth-head p { margin: 0; color: var(--muted); font-size: var(--fs-lg); line-height: var(--lh-snug); }
.shl-auth .shl-form { display: grid; gap: 16px; }
.shl-auth .shl-input { min-height: 52px; font-size: 16px; border-radius: 13px; }
.shl-auth .shl-input-wrap.has-icon .shl-input { padding-inline-start: 46px; }
.shl-auth .shl-input-icon { inset-inline-start: 15px; width: 20px; height: 20px; }
.shl-auth .shl-reveal { inset-inline-end: 7px; }
.shl-auth-foot { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.shl-caps { display: flex; align-items: center; gap: 6px; color: var(--warn-ink); font-weight: var(--fw-bold); margin-top: -8px; }
.shl-caps[hidden] { display: none; }
.shl-caps .shl-icon { width: 16px; height: 16px; }
.shl-auth-theme { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 2; }   /* في لوحة النموذج: يبقى بعيداً عن نص لوحة الهوية على الجوال */
@media (max-width: 899px) { .shl-auth-theme { inset-block-start: 20px; inset-inline-end: 12px; } }
.shl-form.is-shake { animation: shl-shake 380ms var(--ease-out); }
@keyframes shl-shake { 20% { transform: translateX(8px); } 40% { transform: translateX(-7px); } 60% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
/* @@SHELL-CSS-END */

/* @@EMPLOYEES-CSS-BEGIN */
/* عدّة شاشات الموظفين والعمليات اليومية: بادئة pkt- (بلاطات حالة · حبّات · شريط تصفية · قائمة جدول/بطاقات · إجراءات) */

/* ---------- بلاطات الحالة المرشِّحة ---------- */
.pkt-tiles { --n: 6; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.pkt-tiles[data-n="2"] { --n: 2; } .pkt-tiles[data-n="3"] { --n: 3; } .pkt-tiles[data-n="4"] { --n: 4; } .pkt-tiles[data-n="5"] { --n: 5; }
.pkt-tiles[data-n="6"] { --n: 6; } .pkt-tiles[data-n="7"] { --n: 7; } .pkt-tiles[data-n="8"] { --n: 8; }
@media (min-width: 760px) and (max-width: 1099px) {
  .pkt-tiles[data-n="6"] { --n: 3; } .pkt-tiles[data-n="7"], .pkt-tiles[data-n="8"] { --n: 4; }
}
.pkt-tile {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon num" "label label"; align-items: center; gap: 8px 10px;
  min-height: 78px; padding: 12px 14px; overflow: hidden; text-align: start; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2), background-color var(--dur-2);
}
.pkt-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand-edge); }
.pkt-tile:active { transform: scale(.98); }
.pkt-tile::after { content: ""; position: absolute; inset-inline: 14px; inset-block-end: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); transform: scaleX(0); transition: transform var(--dur-3) var(--ease-out); }
.pkt-tile[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-edge); }
.pkt-tile[aria-pressed="true"]::after { transform: scaleX(1); }
.pkt-tile-icon { grid-area: icon; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--t-soft); color: var(--t); }
.pkt-tile-icon .shl-icon { width: 18px; height: 18px; }
.pkt-tile-num { grid-area: num; justify-self: end; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.pkt-tile-label { grid-area: label; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.pkt-tile[data-zero="1"] .pkt-tile-num { color: var(--muted); }
.pkt-tile[data-zero="1"] .pkt-tile-icon { opacity: .55; }
.pkt-tile:is([data-tone="red"], [data-tone="gold"]):not([data-zero="1"]) .pkt-tile-num { color: var(--t-ink); }
@media (max-width: 759px) {
  .pkt-tiles { display: flex; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; margin-bottom: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .pkt-tiles::-webkit-scrollbar { display: none; }
  .pkt-tile { flex: 0 0 118px; min-height: 74px; padding: 10px 12px; scroll-snap-align: start; }
}

/* ---------- حبّات المرشّح ---------- */
.pkt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pkt-chip { display: inline-flex; align-items: center; gap: 8px; }
.pkt-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t, var(--faint)); }
.pkt-chip-count { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.pkt-chip[aria-pressed="true"] .pkt-chip-count { color: inherit; }
.pkt-chip[data-zero="1"]:not([aria-pressed="true"]) { color: var(--muted); }
@media (max-width: 759px) {
  .pkt-chips { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
  .pkt-chips::-webkit-scrollbar { display: none; }
  .pkt-chip { flex: none; min-height: var(--tap); }
}

/* ---------- شريط التصفية ---------- */
.pkt-filterbar { margin-bottom: 12px; }
.pkt-filters { display: contents; }
.pkt-filter-toggle { display: none; }
@media (max-width: 759px) {
  .pkt-filterbar { gap: 8px; }
  .pkt-filterbar > .shl-toolbar-grow { flex: 1 1 0; }
  .pkt-filter-toggle { display: inline-flex; flex: none; min-height: var(--tap); }
  .pkt-filter-badge { background: var(--brand-fill); color: var(--on-brand); }
  .pkt-filters { display: none; flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pkt-filters.is-open { display: grid; }
  .pkt-filters .shl-select { width: 100%; min-width: 0; }
  .pkt-filters > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.pkt-resultline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; margin: 0 2px 8px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* ---------- شخص: صورة + اسم ---------- */
.pkt-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pkt-person-main { display: grid; gap: 1px; min-width: 0; line-height: 1.4; }
.pkt-person-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.pkt-person-sub { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.pkt-dash { color: var(--muted); }
.pkt-filelink { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: var(--fw-bold); text-decoration: none; }
.pkt-filelink:hover { text-decoration: underline; text-underline-offset: 3px; }
.pkt-filelink .shl-icon { width: 16px; height: 16px; }

/* ---------- القائمة: جدول للحاسوب وبطاقات للجوال ---------- */
.pkt-list { container-type: inline-size; container-name: pkt-list; }
.pkt-list > .pkt-cards { display: none; }
.pkt-list .shl-table tbody td:first-child { min-width: 230px; border-inline-start: 4px solid transparent; }
.pkt-list .shl-table tbody tr[data-tone] td:first-child { border-inline-start-color: var(--t); }
.pkt-list .shl-table tbody td { height: 60px; }
.pkt-cards { display: grid; gap: 12px; }
/* العرض الفعلي للحاوية لا النافذة: الجدول يحتاج نحو 920px وإلا صارت بطاقات (بعمودين من 560px) */
@container pkt-list (max-width: 919px) {
  .pkt-list > .shl-table-wrap { display: none; }
  .pkt-list > .pkt-cards { display: grid; }
}
@container pkt-list (min-width: 560px) and (max-width: 919px) { .pkt-list > .pkt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.pkt-card { position: relative; display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.pkt-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--t, var(--line-strong)); }
.pkt-card-main { all: unset; box-sizing: border-box; display: grid; gap: 12px; padding: 14px 14px 14px 14px; padding-inline-start: 18px; cursor: pointer; min-width: 0; }
.pkt-card-main--static { cursor: default; }
.pkt-card-main:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-card); }
.pkt-card-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pkt-card-head > .shl-badge { flex: none; margin-inline-start: auto; }
.pkt-card-chevron { flex: none; align-self: center; margin-inline-start: auto; width: 20px; height: 20px; color: var(--faint); }
.pkt-card-head > .shl-badge + .pkt-card-chevron { margin-inline-start: 0; }
.pkt-lead { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.pkt-lead .shl-icon { width: 22px; height: 22px; }
.pkt-card--history { border-style: dashed; box-shadow: none; }
.pkt-card--history .pkt-card-main { opacity: .82; }
.pkt-card-titles { display: grid; gap: 2px; min-width: 0; flex: 1; line-height: 1.4; }
.pkt-card-title { font-size: var(--fs-lg); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.pkt-card-sub { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.pkt-card-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pkt-card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.pkt-card-field { display: grid; gap: 2px; min-width: 0; align-content: start; }
.pkt-card-field--wide { grid-column: 1 / -1; }
.pkt-card-field dt { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.pkt-card-field dd { margin: 0; color: var(--ink); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.pkt-card-foot { padding: 10px 14px 12px; padding-inline-start: 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

/* ---------- أزرار الإجراء ---------- */
.pkt-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pkt-act { flex: none; }
@media (min-width: 760px) {
  .pkt-act--icon { width: 36px; min-width: 36px; padding: 0; }
  .pkt-act--icon .pkt-act-label { display: none; }
}
@media (max-width: 759px) {
  .pkt-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .pkt-act { min-height: var(--tap); padding-inline: 10px; }
}

/* ---------- لوحة أفعال ثابتة أسفل الورقة (حفظ · اعتماد) تبقى في المتناول مهما طالت القائمة ---------- */
.pkt-dock {
  position: sticky; bottom: calc(var(--bottomnav-h) + 10px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-pop); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
@media (min-width: 760px) { .pkt-dock { bottom: 16px; padding-inline: 18px; } }
.pkt-dock-note { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.pkt-dock-note:empty { display: none; }
.pkt-dock-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
@media (max-width: 759px) {
  .pkt-dock-note { display: none; }
  .pkt-dock-actions { width: 100%; margin: 0; }
  .pkt-dock-actions .shl-btn { flex: 1 1 calc(50% - 4px); min-height: var(--tap); padding-inline: 8px; }
}

/* ---------- خطّ زمني عمودي (خطوات المرشح، خطوات كشف الدوام) ---------- */
.pkt-timeline { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.pkt-timeline-item { position: relative; display: grid; gap: 2px; padding: 0 0 16px; padding-inline-start: 24px; }
.pkt-timeline-item::before { content: ""; position: absolute; inset-inline-start: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--t, var(--brand-fill)); box-shadow: 0 0 0 4px var(--t-soft, var(--brand-soft)); }
.pkt-timeline-item[data-kind="note"]::before { background: var(--faint); box-shadow: 0 0 0 4px var(--surface-3); }
.pkt-timeline-item::after { content: ""; position: absolute; inset-inline-start: 8px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.pkt-timeline-item:last-child { padding-bottom: 0; }
.pkt-timeline-item:last-child::after { display: none; }
.pkt-timeline-item small { color: var(--muted); font-weight: var(--fw-bold); }
.pkt-timeline-note { color: var(--ink-2); font-weight: var(--fw-medium); overflow-wrap: anywhere; }

.pkt-skel .shl-skel { height: 58px; border-radius: var(--r-md); }
.pkt-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pkt-pager-info { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.pkt-pager .shl-pager { margin: 0; }

/* شاشة الموظفين: بادئة emp- (القائمة من عدّة pkt- في emp-kit.css، والأوراق من efm-) */
.emp-zero { color: var(--muted); font-weight: var(--fw-bold); }
.emp-name-en { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.emp-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.shl-table .emp-status { flex-wrap: nowrap; white-space: nowrap; }
.emp-review-chip { min-height: var(--ctl-h); }
.emp-review-chip .shl-icon { width: 16px; height: 16px; color: var(--warn-ink); }
.emp-review-chip[aria-pressed="true"] .shl-icon { color: inherit; }

/* ورقة الملف */
.emp-hero { display: flex; align-items: center; gap: 14px; }
.emp-hero-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.emp-hero-job { font-size: var(--fs-lg); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.emp-hero-main small { color: var(--muted); font-weight: var(--fw-bold); }
.emp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.emp-actions .shl-btn { flex: 0 1 auto; }
@media (max-width: 759px) { .emp-actions .shl-btn { flex: 1 1 calc(50% - 4px); min-height: var(--tap); } }
.emp-sec { margin-top: 6px; }
.emp-sec .shl-section-title { font-size: var(--fs-lg); }
.emp-sec .shl-section-head { margin-bottom: 12px; }
.emp-sec .shl-kv { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.emp-list { display: grid; gap: 10px; }
.emp-skel .shl-skel { height: 52px; border-radius: var(--r-md); }

/* مستند في الملف: حافة بنبرة الحالة (والشارة بالنص والشكل لا باللون وحده) */
.emp-doc { position: relative; display: grid; gap: 6px; padding: 12px 14px; padding-inline-start: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.emp-doc::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--t, var(--line-strong)); }
.emp-doc--history { background: transparent; border-style: dashed; }
.emp-doc--history > :not(.emp-doc-actions) { opacity: .82; }
.emp-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.emp-doc-title { font-weight: var(--fw-heavy); }
.emp-doc-meta, .emp-doc-note { color: var(--muted); font-weight: var(--fw-bold); }
.emp-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
@media (max-width: 759px) { .emp-doc-actions .shl-btn { flex: 1 1 0; min-height: var(--tap); } }
/* الصورة الشخصية والأفاتار */
.emp-photo { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 1px solid var(--line); }
.emp-photo--sm { width: 34px; height: 34px; }
.emp-photo--md { width: 42px; height: 42px; }
.emp-photo--lg { width: 60px; height: 60px; }
.emp-photo--xl { width: 112px; height: 112px; border-width: 2px; border-color: var(--brand-edge, var(--line-strong)); }
.emp-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.emp-who .emp-name { flex: 1; }
.emp-photo-block { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.emp-photo-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.emp-photo-note { color: var(--muted); font-weight: 700; flex-basis: 100%; }
.emp-photo-note:empty { display: none; }
.emp-cell-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* معدات الوقاية المستلمة */
.emp-equip-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.emp-equip-row strong { font-weight: var(--fw-heavy); }
.emp-equip-qty { color: var(--ink-2); font-weight: var(--fw-heavy); margin-inline-start: auto; }
.emp-equip-row small { flex-basis: 100%; color: var(--muted); font-weight: var(--fw-bold); }

/* صورة رأس الملف: زر الكاميرا فوقها والإفلات والرفع */
.emp-hero-photo { position: relative; flex: none; }
.emp-hero-photo .shl-avatar { width: 112px; height: 112px; font-size: 38px; }
.emp-hero-photo.is-busy::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--scrim-soft); }
.emp-hero-photo.is-drop .emp-photo, .emp-hero-photo.is-drop .shl-avatar { outline: 2px dashed var(--brand); outline-offset: 4px; }
.emp-photo-edit { position: absolute; inset-inline-end: -2px; inset-block-end: -2px; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; cursor: pointer; border-radius: 50%; border: 3px solid var(--surface); background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-card); }
.emp-photo-edit:hover { filter: brightness(1.08); }
.emp-photo-edit .shl-icon { width: 20px; height: 20px; }
.emp-photo-choices { display: grid; gap: 10px; }
.emp-photo-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--tap); padding: 12px 16px; font: inherit; font-weight: var(--fw-heavy); text-align: start; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.emp-photo-choice:hover { background: var(--surface-2); }
.emp-photo-choice.is-danger { color: var(--bad-ink); border-color: var(--bad); }
@media (max-width: 759px) { .emp-hero { align-items: flex-start; } }
/* @@EMPLOYEES-CSS-END */

/* @@EMPLOYEEFORM-CSS-BEGIN */
/* ورقة قصّ الصورة الشخصية (efm-photo.js) */
.efm-crop-body { display: grid; gap: 14px; }
.efm-crop-stage { display: grid; justify-items: center; }
.efm-crop-canvas { display: block; width: min(100%, 360px); aspect-ratio: 1; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; }
.efm-crop-canvas:active { cursor: grabbing; }
.efm-crop-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.efm-crop-zoom { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.efm-crop-range { flex: 1 1 140px; min-width: 120px; max-width: 220px; accent-color: var(--brand); }

/* نموذج الموظف: بادئة efm- */
.efm-sheet { padding-bottom: 0; }
@media (min-width: 900px) { .efm-sheet { width: min(100%, 640px); } }
.efm-form { display: block; }
.efm-section { display: grid; gap: 12px; padding: 14px 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.efm-section-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.efm-section-title::before { content: ""; flex: none; width: 3px; height: 16px; border-radius: 2px; background: var(--gold); }
.efm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; }
.efm-grid .shl-field--wide { grid-column: 1 / -1; }
.efm-photo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.efm-photo-preview { flex: none; }
.efm-photo-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 180px; }
.efm-photo-note { flex-basis: 100%; margin: 0; }
.efm-photo-note:empty { display: none; }
.efm-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.efm-form :is(.shl-input, .shl-select) { scroll-margin-block: 84px; }

/* حقل التاريخ: زر التقويم داخل الحقل عند نهايته (الحقل نفسه LTR فنهاية سطره اليمين، والزر عند بداية الحاوية RTL = اليمين) */
.efm-date { position: relative; display: flex; align-items: center; }
.efm-date .shl-input { flex: 1; padding-inline-end: 46px; }
.efm-date-btn { position: absolute; inset-inline-start: 4px; inset-block: 0; margin-block: auto; width: 34px; min-width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--muted); }
.efm-date-btn:hover { color: var(--brand); }
.efm-date-btn .shl-icon { width: 18px; height: 18px; }
.efm-native { position: absolute; inset-inline-end: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

.efm-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.efm-staged { margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--warn-soft); color: var(--warn-ink); font-weight: var(--fw-bold); }
.efm-staged:empty { display: none; }
.efm-review { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--warn-soft); color: var(--warn-ink); font-weight: var(--fw-bold); }
.efm-review-text { flex: 1; min-width: 180px; }
.efm-review .shl-btn { border-color: var(--warn-ink); color: var(--warn-ink); }
/* @@EMPLOYEEFORM-CSS-END */

/* @@NAMEMATCH-CSS-BEGIN */
/* مطابقة الأسماء: بادئة nmt- (البلاطات والتصفية ولوحة الأفعال من عدّة pkt-) */
.nmt-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

.nmt-head-action:empty { display: none; }
.nmt-file-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-xs); }
.nmt-file-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--ok-soft); color: var(--ok-ink); }
.nmt-file-main { display: grid; gap: 1px; min-width: 0; }
.nmt-file-name { font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.nmt-file-main small { color: var(--muted); font-weight: var(--fw-bold); }

/* الصفوف */
.nmt-list { display: grid; gap: 10px; margin-bottom: 18px; }
.nmt-row { position: relative; display: grid; gap: 12px 20px; align-items: start; padding: 14px 16px; padding-inline-start: 20px; overflow: hidden; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: background-color var(--dur-2), border-color var(--dur-2); }
.nmt-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--t, var(--line-strong)); }
.nmt-row[data-decided="1"]:not([data-status="alias"]) { background: var(--brand-soft); border-color: var(--brand-edge); }
.nmt-row[data-invalid="1"] { border-color: var(--bad); }
.nmt-who { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.nmt-who-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.nmt-name { font-size: var(--fs-lg); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.nmt-meta { color: var(--muted); font-weight: var(--fw-bold); }
.nmt-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.nmt-check .shl-icon { flex: none; width: 16px; height: 16px; }
.nmt-check--diff { color: var(--warn-ink); }
.nmt-check--same { color: var(--ok-ink); }
.nmt-decide { display: grid; gap: 10px; min-width: 0; }
.nmt-select { width: 100%; text-overflow: ellipsis; }
.nmt-ready { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; color: var(--brand-strong); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.nmt-ready-pick { color: var(--ink-2); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.nmt-ready .shl-icon { flex: none; align-self: center; width: 16px; height: 16px; }
@media (min-width: 900px) { .nmt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }

/* موظف جديد */
.nmt-new { display: grid; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.nmt-new-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.nmt-new-head .shl-icon { width: 18px; height: 18px; color: var(--brand); }
.nmt-new-head strong { font-weight: var(--fw-heavy); }
.nmt-new-head small { color: var(--muted); font-weight: var(--fw-bold); }
.nmt-new-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nmt-new-grid > .nmt-field:nth-child(-n+2) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .nmt-new-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .nmt-new-grid > .nmt-field:nth-child(-n+2) { grid-column: auto; }
}
.nmt-field { display: grid; gap: 4px; min-width: 0; }
.nmt-field--wide { grid-column: 1 / -1; }

/* ورقة البحث عن موظف */
.nmt-results { display: grid; gap: 8px; margin-top: 12px; }
.nmt-result {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; text-align: start; font: inherit; color: var(--ink); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: background-color var(--dur-1), border-color var(--dur-1);
}
.nmt-result:hover { background: var(--brand-soft); border-color: var(--brand-edge); }
.nmt-result:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nmt-result-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.nmt-result-main strong { font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.nmt-result-main small { color: var(--muted); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.nmt-result-go { flex: none; width: 18px; height: 18px; color: var(--faint); }
.nmt-sheet .pkt-skel .shl-skel { height: 60px; }
/* @@NAMEMATCH-CSS-END */

/* @@ATTENDANCE-CSS-BEGIN */
/* الحضور اليومي: بادئة att- (وتستعمل الشبكة att-grid شاشتا كشف الدوام وحضور المعدات) */
.att-print[hidden] { display: none; }

/* شريط السياق: الفريق + اليوم أو الشهر */
.att-ctx { display: flex; align-items: flex-end; gap: 12px 18px; flex-wrap: wrap; padding: 14px 16px; margin: 16px 0 18px; }
.att-ctx-field { display: grid; gap: 4px; }
.att-ctx-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.att-ctx .shl-select { width: auto; min-width: 210px; }
.att-datebar, .att-monthbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.att-datebar[hidden], .att-monthbar[hidden] { display: none; }
.att-date { width: 172px; }
@media (max-width: 759px) {
  .att-ctx { flex-direction: column; align-items: stretch; gap: 12px; }
  .att-ctx .shl-select { width: 100%; }
  .att-datebar { flex-wrap: nowrap; }
  .att-date { flex: 1; width: auto; min-width: 0; }
  .att-step { flex: none; }
}

/* ورقة اليوم */
.att-day { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.att-info { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.att-info small { color: var(--muted); font-weight: var(--fw-bold); }
.att-listbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.att-listbar .shl-search-wrap { flex: 1 1 280px; min-width: 0; }
.att-listbar > .shl-btn { flex: none; }
.att-listbar .pkt-chips { margin: 0; flex: 0 1 auto; }
@media (max-width: 759px) { .att-listbar { gap: 10px; } .att-listbar .pkt-chips { flex: 1 1 100%; } }
.att-nomatch[hidden] { display: none; }

.att-rows { display: grid; gap: 8px; }
.att-rows-head { display: none; }
.att-row {
  position: relative; display: grid; gap: 10px 14px; align-items: center; padding: 12px 14px; padding-inline-start: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  grid-template-columns: minmax(0, 1fr);
}
.att-row[hidden] { display: none; }
.att-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--att-tone, var(--line-strong)); }
.att-row[data-state="present"] { --att-tone: var(--ok); }
.att-row[data-state="absent"] { --att-tone: var(--bad); }
.att-row--permit { background: var(--bad-soft); }
.att-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.att-who-main { display: grid; gap: 1px; min-width: 0; line-height: 1.4; justify-items: start; }
.att-name { font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.att-who small { color: var(--muted); font-weight: var(--fw-bold); }
.att-who .shl-badge { margin-top: 3px; }
.att-pa-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.att-pa {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--ctl-border);
  background: var(--surface); color: var(--ink-2); font: inherit; font-weight: var(--fw-heavy); cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.att-pa:hover:not([disabled]) { background: var(--hover); }
.att-pa:active:not([disabled]) { transform: scale(.97); }
.att-pa[disabled] { cursor: default; opacity: .7; }
.att-pa--p[aria-pressed="true"] { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok); }
.att-pa--a[aria-pressed="true"] { background: var(--bad-soft); color: var(--bad-ink); border-color: var(--bad); }
.att-pa--p[aria-pressed="true"]::before { content: "✓"; font-weight: 900; }
.att-pa--a[aria-pressed="true"]::before { content: "✕"; font-weight: 900; }
.att-fields { display: grid; gap: 8px 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.att-f { display: grid; gap: 4px; min-width: 0; }
.att-f-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.att-f--note { grid-column: 1 / -1; }
.att-error { grid-column: 1 / -1; }
.att-more { display: none; }
@media (max-width: 759px) {
  /* الجوال: سطر تحكم واحد (حاضر · غائب · ساعات · وردية) وتُطوى BU والملاحظة خلف «المزيد» فلا يطول الصف */
  .att-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 66px 94px; gap: 10px 8px; padding-block: 12px; }
  .att-row[data-state="none"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .att-who, .att-more, .att-f--bu, .att-f--note, .att-error { grid-column: 1 / -1; }
  .att-pa-group, .att-fields { display: contents; }
  .att-f-label { display: none; }
  .att-f--hours { position: relative; grid-column: 3; }
  .att-f--shift { grid-column: 4; }
  .att-f--hours::after { content: "س"; position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); pointer-events: none; }
  .att-f--hours .shl-input { padding-inline: 8px 26px; text-align: start; }
  .att-f--shift .shl-select { padding-inline-start: 8px; padding-inline-end: 26px; background-position: 8px calc(50% + 1px), 14px calc(50% + 1px); }
  .att-row[data-state="none"] .att-f, .att-row[data-state="none"] .att-more { display: none; }
  .att-row[data-state="absent"] .att-f--hours { visibility: hidden; }
  .att-row:not(.is-open) .att-f--bu, .att-row:not(.is-open) .att-f--note { display: none; }
  .att-more { order: 1; }
  .att-f--bu, .att-f--note { order: 2; }
  .att-error { order: 3; }
  .att-more { display: inline-flex; justify-self: start; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
  .att-more .shl-icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
  .att-row.is-open .att-more .shl-icon { transform: rotate(180deg); }
}
@media (min-width: 760px) {
  .att-rows-head, .att-row { grid-template-columns: minmax(0, 1.5fr) 172px minmax(0, 3.6fr); }
  .att-rows-head { display: grid; gap: 10px 14px; align-items: center; padding: 0 14px; padding-inline-start: 18px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
  .att-row { padding-block: 8px; }
  .att-pa { min-height: 38px; padding: 0 8px; }
  .att-fields, .att-fields-head { grid-template-columns: 76px 96px minmax(120px, 1.5fr) minmax(110px, 1.5fr); }
  .att-fields-head { display: grid; gap: 8px 10px; }
  .att-f--note { grid-column: auto; }
  .att-f-label { display: none; }
}

/* ملخص الورقة الحيّ داخل اللوحة الثابتة pkt-dock */
.att-stats { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.att-stat { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-2); font-weight: var(--fw-bold); }
.att-stat-num { color: var(--ink); font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.att-stat[data-key="present"] .att-stat-num { color: var(--ok-ink); }
.att-stat[data-key="absent"] .att-stat-num { color: var(--bad-ink); }
@media (max-width: 759px) {
  .att-stats { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 6px; }
  .att-stat { flex-direction: column; align-items: center; gap: 2px; flex: 1; font-size: var(--fs-xs); }
}

/* الشبكة الشهرية */
.att-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.att-legend span { display: inline-flex; align-items: center; gap: 8px; }
.att-legend-hint { margin-inline-start: auto; color: var(--muted); }
.att-legend-hint .shl-icon { width: 16px; height: 16px; }
.att-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font-weight: 900; }
.att-mark--approved { background: var(--ok-soft); color: var(--ok-ink); }
.att-mark--draft { background: var(--warn-soft); color: var(--warn-ink); }
.att-gridwrap { overflow: auto; max-height: calc(100dvh - 260px); }
.att-grid { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; min-width: max-content; }
.att-grid th, .att-grid td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.att-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--th-bg); color: var(--th-ink); font-weight: var(--fw-heavy); }
.att-grid .att-g-name { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 190px; max-width: 230px; text-align: start; padding-inline: 12px; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.att-grid thead .att-g-name { z-index: 3; background: var(--th-bg); color: var(--th-ink); }
@media (max-width: 759px) { .att-grid .att-g-name { min-width: 150px; max-width: 170px; padding-inline: 10px; } .att-gridwrap { max-height: calc(100dvh - 220px); } }
.att-grid .att-g-name { white-space: normal; }
.att-g-name span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: var(--fw-bold); overflow-wrap: anywhere; line-height: 1.35; }
.att-g-name small { color: var(--muted); font-weight: var(--fw-medium); }
.att-g-day { min-width: 38px; padding: 0 !important; }
.att-g-daybtn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; min-height: 44px; cursor: pointer; line-height: 1.15; }
.att-g-daybtn:hover { background: color-mix(in srgb, var(--on-brand) 14%, transparent); }
.att-g-daybtn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.att-g-daybtn small { font-size: 11px; opacity: .9; }
.att-g-day--none .att-g-daybtn { opacity: .75; }
.att-g-cell--none { color: var(--muted); }
.att-g-cell--zero { background: var(--bad-soft); color: var(--bad-ink); font-weight: var(--fw-heavy); }
.att-g-cell--over { background: var(--warn-soft); color: var(--warn-ink); font-weight: var(--fw-heavy); }
.att-g-total { min-width: 60px; font-weight: var(--fw-heavy); background: var(--surface-2); }
.att-g-sum { font-weight: var(--fw-heavy); background: var(--surface-2); }
.att-grid tfoot th, .att-grid tfoot td { position: sticky; bottom: 0; z-index: 1; border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); }
.att-grid tfoot .att-g-name { z-index: 2; }
/* @@ATTENDANCE-CSS-END */

/* @@TIMESHEETS-CSS-BEGIN */
/* كشف دوام العميل: بادئة tms- (الشبكة تستعمل أصناف att-grid من الحضور، والقائمة والبطاقات من عدّة pkt-) */
.tms-ctx { display: flex; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; padding: 14px 16px; margin: 4px 0 18px; }
.tms-ctx-field { display: grid; gap: 4px; }
.tms-ctx-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tms-ctx .shl-select { width: auto; min-width: 200px; }
@media (max-width: 759px) {
  .tms-ctx { flex-direction: column; align-items: stretch; }
  .tms-ctx .shl-select { width: 100%; }
  .tms-ctx .shl-seg { justify-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .tms-ctx .shl-seg-btn { justify-content: center; min-height: var(--tap); }
}

/* شريط الحالة */
.tms-banner { --t: var(--brand); --t-soft: var(--brand-soft); --t-ink: var(--brand-strong); display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--r-card); background: var(--t-soft); border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); border-inline-start: 4px solid var(--t); }
.tms-banner[data-tone="ok"] { --t: var(--ok); --t-soft: var(--ok-soft); --t-ink: var(--ok-ink); }
.tms-banner[data-tone="warn"] { --t: var(--warn); --t-soft: var(--warn-soft); --t-ink: var(--warn-ink); }
.tms-banner[data-tone="info"] { --t: var(--brand); --t-soft: var(--brand-soft); --t-ink: var(--brand-strong); }
.tms-banner-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--t) 16%, transparent); color: var(--t-ink); }
.tms-banner-main { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; color: var(--t-ink); }
.tms-banner-main strong { font-weight: var(--fw-heavy); line-height: var(--lh-snug); }
.tms-banner-main small { color: inherit; opacity: .85; font-weight: var(--fw-bold); }
.tms-banner .shl-btn { margin-inline-start: auto; }
@media (max-width: 759px) { .tms-banner .shl-btn { width: 100%; min-height: var(--tap); margin: 0; } }
.tms-note-text { display: block; line-height: var(--lh-snug); }
.tms-note-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-heavy); }
.tms-missing { margin: 4px 0 0; padding: 0 20px 0 0; display: grid; gap: 2px; font-weight: var(--fw-bold); }
.tms-banner + .shl-callout, .shl-callout + .shl-callout { margin-top: 10px; }

/* شبكات المعاينة */
.tms-gridcard { margin-top: 16px; }
.tms-gridcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tms-gridcard-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.tms-gridcard-hint { color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.tms-gridwrap { max-height: calc(100dvh - 330px); }
.tms-pos { white-space: nowrap; color: var(--ink-2); padding-inline: 8px; text-align: start; }

/* الصادر */
.tms-issued { margin-top: 28px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.tms-issued-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.tms-issued-head .pkt-chips { margin: 0; }
.tms-sub { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); }
.tms-sub .shl-icon { color: var(--brand); }
.tms-ref { font-weight: var(--fw-heavy); }

/* التفاصيل */
.tms-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tms-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tms-detail-steps { display: grid; gap: 12px; }
.tms-detail-steps .tms-sub { font-size: var(--fs-lg); }
/* @@TIMESHEETS-CSS-END */

/* @@PAYROLL-CSS-BEGIN */
/* المرتبات: بادئة pay- (فوق طبقة money-ui المشتركة: mny-) */
.mny-slot { display: contents; }
.pay-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pay-status small { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* أسعار الصرف للشهر */
.pay-rates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.pay-rates-title { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.pay-rates-title .shl-icon { width: 18px; height: 18px; color: var(--brand); }
.pay-rate-list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.pay-rate { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.pay-rate b { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.pay-rate.is-missing { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
@media (max-width: 759px) {
  .pay-rates-title { flex: 1 1 100%; }
  .pay-rate-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; }
  .pay-rate { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: var(--r-md); text-align: center; }
  .pay-rates > .shl-btn { flex: 1 1 100%; min-height: var(--tap); }
}

/* الموظف في الجدول */
.pay-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.pay-who .mny-title { flex: 1 1 auto; }
.pay-hours { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.pay-hours small { color: var(--muted); font-weight: var(--fw-medium); }
.pay-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.pay-hint .shl-icon { width: 16px; height: 16px; }
.pay-lines { min-width: 0; }

/* موانع الاعتماد وتحذيراته */
.pay-detail { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.pay-orphan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pay-names { margin: 0; font-weight: var(--fw-medium); line-height: var(--lh-loose); }

/* شريط التحديد اللاصق (الصرف والإيصالات) */
.pay-selbar {
  position: sticky; bottom: 12px; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding: 10px 14px;
  border-radius: var(--r-md); background: var(--surface-pop); border: 1px solid var(--brand-edge); box-shadow: var(--shadow-pop);
}
.pay-selbar[hidden] { display: none; }
.pay-selbar-count { color: var(--ink); font-weight: var(--fw-heavy); }
.pay-selbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 759px) {
  .pay-selbar { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom)); }
  .pay-selbar-actions { flex: 1 1 100%; }
  .pay-selbar-actions .shl-btn { flex: 1; min-height: var(--tap); }
}

/* ورقة التسويات */
.pay-sheet .shl-callout { margin-bottom: 4px; }
.pay-rates:empty { display: none; }
/* @@PAYROLL-CSS-END */

/* @@DOCUMENTS-CSS-BEGIN */
/* شاشة المستندات والتصاريح: بادئة doc- (البناء من عدّة pkt-) */
.doc-type { font-weight: var(--fw-heavy); }
.pkt-card-strip .doc-type { font-size: var(--fs-md); }
/* @@DOCUMENTS-CSS-END */

/* @@DOCUMENTFORM-CSS-BEGIN */
/* نموذج المستند: بادئة dcf- (يرث أقسام وشبكة efm-) */
.dcf-file { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px; background: var(--surface); border: 1px dashed var(--ctl-border); border-radius: var(--r-md); }
.dcf-file-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); }
.dcf-file-state { display: grid; gap: 2px; min-width: 0; flex: 1 1 160px; }
.dcf-file-state strong { font-weight: var(--fw-heavy); }
.dcf-file-state small { color: var(--muted); font-weight: var(--fw-bold); }
.dcf-file-name, .dcf-file-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.dcf-file-link { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); }
.dcf-file-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.dcf-file-actions .shl-btn[hidden] { display: none; }
.dcf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.dcf-file:has(.dcf-file-input[aria-invalid="true"]) { border-color: var(--bad); border-style: solid; }
.dcf-sheet .efm-grid { align-items: start; }
.dcf-notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--brand-soft); color: var(--brand-strong); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.dcf-notice[hidden] { display: none; }
.dcf-notice .shl-icon { flex: none; width: 16px; height: 16px; }
/* @@DOCUMENTFORM-CSS-END */

/* @@COMPANYDOCUMENTS-CSS-BEGIN */
/* شاشة مستندات الشركة: بادئة cdo- (البطاقات من عدّة pkt-) */
.cdo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cdo-bar .pkt-resultline { margin: 0; }
.cdo-history { margin-inline-start: auto; }
.cdo-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); align-items: start; }
.cdo-note { display: block; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--ink-2); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
/* @@COMPANYDOCUMENTS-CSS-END */

/* @@LETTERS-CSS-BEGIN */
/* شاشة المراسلات: بادئة ltr- — ترويسة وتصفية وجدول بيانات عام وأوراق.
   تنبيه: القواعد المعلَّمة «مشترك» تستعملها شاشات أخرى (كشف الدوام والمرتبات والأستاذ والعهد والفوترة) فلا تُحذف ولا تُعاد تسميتها. */

/* مشترك: شارة الملغى (كل شارات الإلغاء في الشاشات المالية) */
.ltr-badge--cancelled { background: var(--surface-3); color: var(--muted); text-decoration: line-through; }

/* مشترك: بنية ورقة التفاصيل (كشف الدوام يبني تفاصيله بها) */
.ltr-detail-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ltr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.ltr-grid dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.ltr-grid dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ltr-wide { grid-column: 1 / -1; }
.ltr-pre { white-space: pre-line; }
.ltr-note { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; }
.ltr-section { display: grid; gap: 8px; }
.ltr-section-title { margin: 0; font-size: 15px; font-weight: 800; }
.ltr-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ltr-timeline li { display: grid; gap: 2px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-ctl); border-inline-start: 4px solid var(--line-strong); }
.ltr-timeline li[data-status="sent"] { border-inline-start-color: var(--brand); }
.ltr-timeline li[data-status="completed"] { border-inline-start-color: var(--ok); }
.ltr-timeline li[data-status="rejected"] { border-inline-start-color: var(--bad); }
.ltr-step { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.ltr-step-note { font-weight: 700; overflow-wrap: anywhere; }
.ltr-timeline small { color: var(--muted); }

/* الترويسة */
.ltr-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 26px; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.ltr-meta:empty::before { content: ""; width: 90px; height: 14px; border-radius: 8px; background: var(--surface-3); }
.ltr-print { white-space: nowrap; }
@media (max-width: 759px) {
  .ltr-print { width: var(--tap); min-width: var(--tap); padding: 0; }
  .ltr-print-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* البحث والتصفية */
.ltr-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ltr-search { flex: 1 1 280px; max-width: 460px; min-width: 220px; }
.ltr-bar .shl-select { width: auto; min-width: 160px; }
.ltr-chips { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-block: 4px; overflow-x: auto; scrollbar-width: none; }
.ltr-chips::-webkit-scrollbar { display: none; }
.ltr-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.ltr-chip--zero { color: var(--muted); }
@media (max-width: 759px) { .ltr-search { flex: 1 1 100%; max-width: none; } .ltr-bar .shl-select { flex: 1 1 140px; } }
@media (min-width: 1100px) { .ltr-chips { flex-wrap: wrap; overflow: visible; } }
.ltr-skeletons .shl-skel { min-height: 64px; border-radius: var(--r-card); }

/* الجدول */
.ltr-table .shl-table td:first-child { border-inline-start: 3px solid transparent; }
.ltr-table tr[data-status="sent"] td:first-child { border-inline-start-color: var(--brand); }
.ltr-table tr[data-status="completed"] td:first-child { border-inline-start-color: var(--ok); }
.ltr-table tr[data-status="rejected"] td:first-child { border-inline-start-color: var(--bad); }
.ltr-table tr[data-status="cancelled"] { opacity: .7; }
.ltr-refcell { display: grid; gap: 4px; min-width: 0; }
.ltr-refline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ltr-ref { font-weight: var(--fw-heavy); white-space: nowrap; }
.ltr-m-only { display: none; }
.ltr-subject { display: grid; min-width: 0; line-height: 1.4; max-width: 46ch; }
.ltr-subject > span { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltr-subject small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltr-table td.ltr-act-cell { width: 1%; white-space: nowrap; }
@media (max-width: 759px) {
  .ltr-m-only { display: inline-flex; }
  .ltr-m-subject { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
  .ltr-m-meta { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
  .ltr-table tr[data-status="sent"] { border-inline-start: 4px solid var(--brand); }
  .ltr-table tr[data-status="completed"] { border-inline-start: 4px solid var(--ok); }
  .ltr-table tr[data-status="rejected"] { border-inline-start: 4px solid var(--bad); }
  .ltr-table .shl-table td:first-child { border-inline-start: 0; }
  .ltr-table .shl-table tbody td.is-title { border-bottom: 0; padding-bottom: 4px; font-size: var(--fs-md); }
  .ltr-table .shl-table tbody td.ltr-act-cell { width: auto; display: block; margin-top: 6px; padding: 10px 0 0; border-top: 1px solid var(--line); }
  .ltr-table td.ltr-act-cell::before { content: none; }
  .ltr-table td.ltr-act-cell .shl-btn { width: 100%; min-height: var(--tap); }
}
.ltr-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ltr-pager div { display: flex; gap: 8px; }
.ltr-pager:empty { display: none; }

/* الأوراق */
.ltr-sheet:focus, .ltr-status-sheet:focus, .ltf-sheet:focus { outline: none; }
.ltr-sheet, .ltr-status-sheet { scroll-padding-block: 84px 150px; }   /* الحقل المركَّز لا يختبئ تحت رأس الورقة ولا ذيلها اللاصق (يظهر خطأ التحقق كاملاً) */
@media (min-width: 900px) {
  .ltr-status-sheet[open] { display: flex; flex-direction: column; }
  .ltr-status-sheet > form { flex: 1 0 auto; display: flex; flex-direction: column; }
  .ltr-status-sheet > form > .shl-sheet-body { flex: 1; align-content: start; }
}
.ltr-detail { gap: 14px; }
.ltr-sub { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ltr-top-print { margin-inline-start: auto; }
.ltr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ltr-actions .shl-btn .shl-icon { width: 17px; height: 17px; }
@media (max-width: 599px) { .ltr-actions .shl-btn { flex: 1 1 calc(50% - 4px); min-height: var(--tap); } .ltr-actions .shl-btn--primary { flex-basis: 100%; } }
.ltr-sec { margin-top: 8px; }
.ltr-sec .shl-section-title { font-size: var(--fs-lg); }
.ltr-workers { list-style: none; margin: 0; padding: 0; }
.ltr-worker { min-height: 56px; }
.ltr-worker-no { width: 34px; height: 34px; border-radius: 10px; font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.ltr-worker-exp { flex: none; color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; }
.ltr-worker-exp.is-none { color: var(--muted); font-weight: var(--fw-medium); }
.ltr-more { margin-top: 10px; }
/* @@LETTERS-CSS-END */

/* @@LETTERFORM-CSS-BEGIN */
/* نموذج إصدار الرسالة: بادئة ltf- (يرث أقسام وشبكة efm-) */
.ltf-sheet .efm-grid { align-items: start; }
.ltf-sheet { scroll-padding-block: 84px 150px; }   /* الحقل المركَّز لا يختبئ تحت رأس الورقة ولا ذيلها اللاصق (يظهر خطأ التحقق كاملاً) */
.ltf-fields[hidden], .ltf-sheet .efm-section[hidden] { display: none; }
.ltf-skeletons .shl-skel { min-height: 56px; border-radius: var(--r-card); }
/* الذيل اللاصق في أسفل الدرج حتى لو قصر النموذج */
@media (min-width: 900px) {
  .ltf-sheet[open] { display: flex; flex-direction: column; }
  .ltf-sheet > form { flex: 1 0 auto; display: flex; flex-direction: column; }
  .ltf-sheet > form > .shl-sheet-body { flex: 1; align-content: start; }
}
@media (min-width: 900px) { .ltf-sheet { width: min(100%, 700px); } }
.ltf-suggest { display: flex; }
.ltf-picker { display: grid; gap: 6px; }
.ltf-results, .ltf-selected { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ltf-results:empty { display: none; }
.ltf-sub { margin: 4px 0 0; font-size: 14px; font-weight: 800; }
.ltf-result {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--tap); padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer;
}
.ltf-result:hover:not([disabled]) { background: var(--brand-soft); }
.ltf-result[disabled] { cursor: default; color: var(--muted); background: var(--surface-2); }
.ltf-result-state { color: var(--brand); font-weight: 800; white-space: nowrap; font-size: 12px; }
.ltf-result[disabled] .ltf-result-state { color: var(--muted); }
.ltf-name { display: grid; min-width: 0; line-height: 1.35; }
.ltf-name small { color: var(--muted); }
.ltf-person { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 4px 4px 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.ltf-no { color: var(--muted); font-weight: 800; text-align: center; }
.ltf-empty { color: var(--muted); padding: 8px 4px; }
@media (max-width: 480px) { .ltf-person { grid-template-columns: 28px minmax(0, 1fr) auto; } .ltf-person .shl-badge { grid-column: 2; justify-self: start; } }

/* حقول القالب والبضاعة وخانة كل عامل */
.ltf-fields[hidden] { display: none; }
.ltf-good { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ltf-person-field { flex: 1 1 140px; min-width: 120px; max-width: 220px; }
@media (max-width: 560px) { .ltf-good { grid-template-columns: 1fr 1fr; } .ltf-good > input:nth-child(3) { grid-column: 1 / -1; } .ltf-person { flex-wrap: wrap; } }

/* بيانات كل شخص في نماذج التصاريح: بطاقة قابلة للطيّ لكل شخص بشبكة خانات */
.ltf-sheets { display: grid; gap: 8px; margin: 8px 0; }
.ltf-sheetcard { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 6px 12px 10px; }
.ltf-sheetcard > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.ltf-sheetcard > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ltf-sheetgrid { margin-top: 8px; }
.ltf-sf { display: grid; gap: 4px; align-content: start; min-width: 0; }
/* @@LETTERFORM-CSS-END */

/* @@LEDGER-CSS-BEGIN */
/* سلامة الدفاتر: بادئة led-int- — «دفتر الربّان»: شهادة بإطار ذهبي شعري، ختم بحلقة تميّز الحالة بلا لون، وفحوص تُطوى بنعومة.
   كل لون من الرموز. لوحة الحالة: data-led = ok | warn | fail تضبط --s و--s-soft و--s-ink لما تحتها. */
[data-led="ok"] { --s: var(--ok); --s-soft: var(--ok-soft); --s-ink: var(--ok-ink); }
[data-led="warn"] { --s: var(--warn); --s-soft: var(--warn-soft); --s-ink: var(--warn-ink); }
[data-led="fail"] { --s: var(--bad); --s-soft: var(--bad-soft); --s-ink: var(--bad-ink); }
[data-led="scan"] { --s: var(--brand); --s-soft: var(--brand-soft); --s-ink: var(--brand); }

.led-int { display: grid; gap: 22px; container: ledint / inline-size; }
.led-int > .shl-ph { margin-bottom: 0; }
.led-int-hero-host, .led-int-list { min-width: 0; }

/* ---------- بطاقة الحكم (الشهادة) ---------- */
.led-int-hero {
  position: relative; isolation: isolate; display: grid; gap: 22px; padding: 24px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--s-soft) 80%, var(--surface)) 0%, var(--surface) 64%);
  border: 1px solid color-mix(in srgb, var(--s) 30%, var(--line)); border-radius: var(--r-xl); box-shadow: var(--shadow-card);
}
.led-int-hero::before {
  content: ""; position: absolute; inset: 6px; z-index: -1; border: 1px solid var(--gold-edge); border-radius: calc(var(--r-xl) - 6px); pointer-events: none;
}
.led-int-wave { position: absolute; inset-inline-end: 0; inset-block-start: -18px; z-index: -1; width: min(46%, 520px); height: 112px; opacity: .55; pointer-events: none; --wave-1: var(--s); --wave-2: var(--gold); --wave-3: var(--accent); }
.led-int-hero.is-scanning::after {
  content: ""; position: absolute; inset-block-start: 0; left: 0; width: 38%; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: led-int-sweep 1.5s var(--ease-in-out) infinite;
}
@keyframes led-int-sweep { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

.led-int-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; min-width: 0; }
.led-int-seal {
  --seal: 96px; position: relative; display: grid; place-items: center; width: var(--seal); height: var(--seal); border-radius: 50%;
  color: var(--s); background: var(--s-soft); border: 3px solid var(--s); outline: 1px solid var(--gold-edge); outline-offset: 5px;
  animation: led-int-stamp var(--dur-4) var(--ease-spring) backwards;
}
.led-int-hero[data-led="warn"] .led-int-seal { border-style: dashed; }
.led-int-hero[data-led="fail"] .led-int-seal { border-style: double; border-width: 7px; }
.led-int-seal .shl-icon { width: calc(var(--seal) * .5); height: calc(var(--seal) * .5); stroke-width: 1.6; }
@keyframes led-int-stamp { from { opacity: 0; transform: scale(1.5) rotate(-10deg); } 60% { opacity: 1; transform: scale(.94) rotate(2deg); } }

.led-int-verdict { display: grid; gap: 4px; min-width: 0; }
.led-int-verdict-title { margin: 0; font-size: clamp(27px, 1.6vw + 20px, 42px); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--ink); text-wrap: balance; }
.led-int-verdict-line { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.led-int-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.led-int-meta li { display: inline-flex; align-items: center; gap: 6px; }
.led-int-meta .shl-icon { width: 15px; height: 15px; color: var(--gold-ink); }
.led-int-ago-wrap { color: var(--muted); font-weight: var(--fw-medium); }

/* العدّادات: أزرار تبديل تعمل مرشّحاً للحالات (الشكل: دائرة للسليم، معيّن للتنبيه، مربع للخلل) */
.led-int-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.led-int-tile {
  display: grid; gap: 4px; align-content: space-between; min-height: 82px; padding: 12px 14px; text-align: start; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); font: inherit; border: 1px solid var(--line-strong); border-radius: var(--r-card);
  transition: background-color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.led-int-tile:hover { border-color: color-mix(in srgb, var(--s) 55%, var(--line-strong)); }
.led-int-tile:active { transform: scale(.97); }
.led-int-tile[aria-pressed="true"] { background: var(--s-soft); border-color: color-mix(in srgb, var(--s) 60%, var(--line)); box-shadow: inset 0 -3px 0 var(--s); }
.led-int-tile[data-n="0"][aria-pressed="true"] { background: var(--surface-2); border-color: var(--line-strong); box-shadow: inset 0 -3px 0 var(--line-strong); }   /* صفر معروض: لا يوحي بإنذار */
.led-int-tile[data-n="0"][aria-pressed="true"] .led-int-tile-top { color: var(--ink-2); }
.led-int-tile-top { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.led-int-tile[aria-pressed="true"] .led-int-tile-top { color: var(--s-ink); }
.led-int-tile-n { font-size: 32px; font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.led-int-tile[data-n="0"] .led-int-tile-n { color: var(--muted); font-weight: var(--fw-bold); }
.led-int-glyph { flex: none; width: 12px; height: 12px; background: var(--s); }
.led-int-tile[data-status="pass"] .led-int-glyph { border-radius: 50%; }
.led-int-tile[data-status="warn"] .led-int-glyph { border-radius: 2px; transform: rotate(45deg) scale(.86); }
.led-int-tile[data-status="fail"] .led-int-glyph { border-radius: 2px; }

/* شريط الفحوص: خلية لكل فحص (السليم منخفض، التنبيه مخطَّط، الخلل أعلى) */
.led-int-strip { display: flex; align-items: flex-end; gap: 3px; height: 22px; padding-block-start: 2px; }
.led-int-cell { flex: 1 1 0; min-width: 3px; max-width: 20px; height: 11px; border-radius: 3px; background: color-mix(in srgb, var(--s) 62%, var(--surface)); transition: transform var(--dur-2) var(--ease-out); }
.led-int-cell[data-first] { margin-inline-start: 10px; }
.led-int-cell[data-led="warn"] { height: 16px; background: repeating-linear-gradient(135deg, var(--s) 0 3px, color-mix(in srgb, var(--s) 35%, transparent) 3px 6px); }
.led-int-cell[data-led="fail"] { height: 22px; background: var(--s); }
.led-int-cell:hover { transform: scaleY(1.2); transform-origin: bottom; }

/* هياكل التحميل */
.led-int-skel-seal { width: 88px; height: 88px; border-radius: 50%; }
.led-int-skel-title { height: 38px; width: min(100%, 320px); margin-block: 4px; }
.led-int-skel-line { width: min(100%, 420px); }
.led-int-skel-tile { min-height: 82px; border-radius: var(--r-card); }
.led-int-skel-strip { height: 16px; }
.led-int-skel-group { display: flex; align-items: center; gap: 14px; padding: 16px; }
.led-int-skel-tilesq { width: 42px; height: 42px; border-radius: 13px; flex: none; }
.led-int-skel-lines { display: grid; gap: 8px; flex: 1; }

/* ---------- الأدوات ---------- */
.led-int-toolbar { display: grid; gap: 4px; }
.led-int-toolbar[hidden] { display: none; }
.led-int-toolbar .shl-toolbar { margin-bottom: 0; }
.led-int-preset { display: inline-flex; align-items: center; gap: 8px; }
.led-int-preset .shl-icon { width: 16px; height: 16px; }
.led-int-preset[aria-pressed="true"] .shl-count { background: var(--surface); }
.led-int-resultline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 36px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* ---------- المجموعات ---------- */
.led-int-groups { display: grid; gap: 14px; }
.led-int-group { position: relative; overflow: hidden; }
.led-int-group[data-problem="1"]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 1; width: 4px; background: var(--s); }
.led-int-group.shl-rise[data-i="1"] { animation-delay: 50ms; }
.led-int-group.shl-rise[data-i="2"] { animation-delay: 100ms; }
.led-int-group.shl-rise[data-i="3"] { animation-delay: 150ms; }
.led-int-group.shl-rise[data-i="4"] { animation-delay: 200ms; }
.led-int-group.shl-rise[data-i="5"] { animation-delay: 250ms; }
.led-int-group-title { margin: 0; font: inherit; }
.led-int-group-head {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 18px; border: 0; background: transparent;
  color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2);
}
.led-int-group-head:hover { background: var(--hover); }
.led-int-group-head:focus-visible { outline-offset: -3px; }
.led-int-group-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.led-int-group-icon .shl-icon { width: 22px; height: 22px; }
.led-int-group-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.led-int-group-name { font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.led-int-group-sub { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.led-int-group-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.led-int-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform var(--dur-3) var(--ease-out); }
[aria-expanded="true"] > .led-int-chev, [aria-expanded="true"] .led-int-chev { transform: rotate(180deg); }

/* طيّ ناعم بلا قياس ارتفاع: صف الشبكة من 0fr إلى 1fr */
.led-int-collapse { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.led-int-collapse[data-open="1"] { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-3) var(--ease-out), visibility 0s; }
.led-int-collapse-inner { min-height: 0; overflow: hidden; }

/* ---------- الفحوص ---------- */
.led-int-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.led-int-check { position: relative; }
.led-int-check + .led-int-check { border-top: 1px solid var(--line); }
.led-int-check:not([data-led="ok"])::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--s); }
.led-int-check-h { margin: 0; font: inherit; }
.led-int-check-head {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; min-height: 60px; padding: 14px 18px; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2);
}
.led-int-check-head:hover { background: var(--hover); }
.led-int-check-head:focus-visible { outline-offset: -3px; }
.led-int-check[data-open="1"] > .led-int-check-h .led-int-check-head { background: color-mix(in srgb, var(--s-soft) 55%, transparent); }
.led-int-state { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: var(--s-soft); color: var(--s-ink); border: 1.5px solid color-mix(in srgb, var(--s) 50%, transparent); }
.led-int-state .shl-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.led-int-check[data-led="ok"] .led-int-state { border-radius: 50%; }
.led-int-check[data-led="warn"] .led-int-state { border-radius: 10px; border-style: dashed; }
.led-int-check[data-led="fail"] .led-int-state { border-radius: 6px; border-width: 2.5px; }
.led-int-check-main { display: grid; gap: 2px; flex: 1; min-width: 0; padding-block-start: 1px; }
.led-int-check-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-snug); text-wrap: pretty; }
.led-int-check-detail { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.led-int-check[data-open="1"] .led-int-check-detail { display: none; }
.led-int-check[data-led="ok"] .led-int-check-title { font-weight: var(--fw-bold); }
.led-int-check-side { display: inline-flex; align-items: center; gap: 8px; flex: none; padding-block-start: 5px; }
.led-int-check:not([data-led="ok"]) .shl-count { background: var(--s-soft); color: var(--s-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s) 40%, transparent); }

.led-int-body { display: grid; gap: 16px; padding: 4px 18px 20px; padding-inline-start: calc(18px + 34px + 14px); }
.led-int-detail { margin: 0; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.led-int-note { display: grid; gap: 6px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); border-radius: var(--r-md); }
.led-int-note p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.led-int-note b { color: var(--ink); font-weight: var(--fw-heavy); }
.led-int-section { display: grid; gap: 8px; min-width: 0; }
.led-int-sub { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.led-int-sub::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--gold); }
.led-int-sub-n { font-weight: var(--fw-bold); }

/* المتوقع / الفعلي / الفرق */
.led-int-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.led-int-num { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.led-int-num dt { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.led-int-num dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.led-int-num small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.led-int-num.is-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.led-int-num.is-bad dd { color: var(--bad-ink); }

/* سلاسل الترقيم */
.led-int-series { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.led-int-serie { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; background: var(--s-soft); color: var(--s-ink); border: 1px solid color-mix(in srgb, var(--s) 30%, transparent); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.led-int-serie.is-empty { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.led-int-serie-name { font-weight: var(--fw-heavy); }
.led-int-serie small { font-weight: var(--fw-heavy); }

/* الأمثلة */
.led-int-examples { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.led-int-ex {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 14px; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); text-decoration: none;
}
.led-int-ex-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.led-int-ex-go { flex: none; width: 16px; height: 16px; color: var(--faint); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2); }
a.led-int-ex { transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
a.led-int-ex:hover, a.led-int-ex:focus-visible { background: var(--hover); border-color: var(--brand-edge); color: var(--ink); }
a.led-int-ex:hover .led-int-ex-go { transform: translateX(-4px); color: var(--brand); }
.led-int-ex.is-redacted { border-style: dashed; color: var(--muted); }
.led-int-more { justify-self: start; }
.led-int-trunc { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.led-int-trunc .shl-icon { width: 16px; height: 16px; margin-block-start: 3px; }
.led-int-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* مراجع وتواريخ ومبالغ معزولة LTR */
.led-int-tok { white-space: nowrap; font-weight: var(--fw-bold); }
.led-int-tok--code { font-size: .94em; color: var(--ink); }

/* المجموعات السليمة بالكامل حين يُعرض الخلل والتنبيه فقط */
.led-int-healthy { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.led-int-healthy-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-ink); font-size: var(--fs-sm); font-weight: var(--fw-black); line-height: 32px; }
.led-int-healthy-label .shl-icon { width: 18px; height: 18px; color: var(--ok); }
.led-int-healthy ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.led-int-healthy-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; background: var(--ok-soft); color: var(--ok-ink); font: inherit;
  border: 0; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; transition: background-color var(--dur-2);
}
.led-int-healthy-chip:hover { background: color-mix(in srgb, var(--ok-soft) 70%, var(--ok)); }

/* شريحة لوحة التحكم */
.led-int-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px 0 10px; background: var(--s-soft); color: var(--s-ink);
  border: 1px solid color-mix(in srgb, var(--s) 32%, transparent); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-heavy); text-decoration: none;
  animation: shl-rise var(--dur-3) var(--ease-out) backwards; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.led-int-chip .shl-icon { width: 15px; height: 15px; }
.led-int-chip:hover { background: color-mix(in srgb, var(--s-soft) 68%, var(--s)); border-color: color-mix(in srgb, var(--s) 55%, transparent); }
@media (pointer: coarse) { .led-int-chip { min-height: var(--tap); } }

/* ورقة النسخ اليدوي */
.led-int-copybox { min-height: 240px; font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* ---------- العريض: الحكم والعدّادات في صف واحد ---------- */
@container ledint (min-width: 800px) {
  .led-int-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .led-int-strip { grid-column: 1 / -1; }
  .led-int-tiles { grid-template-columns: repeat(3, 112px); }
}

/* ---------- الجوال: صفوف مضغوطة بتفاصيل تُفتح بنقرة ---------- */
@media (max-width: 759px) {
  .led-int { gap: 16px; }
  .led-int-hero { gap: 16px; padding: 16px; }
  .led-int-hero-main { gap: 14px; }
  .led-int-seal { --seal: 64px; outline-offset: 4px; }
  .led-int-hero[data-led="fail"] .led-int-seal { border-width: 5px; }
  .led-int-skel-seal { width: 64px; height: 64px; }
  .led-int-verdict-title { font-size: 26px; }
  .led-int-verdict-line { font-size: var(--fs-md); }
  .led-int-meta { gap: 4px 14px; }
  .led-int-tile { min-height: 74px; padding: 10px 12px; }
  .led-int-tile-n { font-size: 28px; }
  .led-int-group-head { gap: 12px; min-height: 64px; padding: 12px 14px; }
  .led-int-group-icon { width: 40px; height: 40px; border-radius: 12px; }
  .led-int-group-name { font-size: var(--fs-lg); }
  .led-int-group[data-problem="1"] .led-int-group-head { flex-wrap: wrap; }
  .led-int-group[data-problem="1"] .led-int-group-main { flex-basis: calc(100% - 100px); }
  .led-int-group[data-problem="1"] .led-int-group-badges { order: 3; flex-basis: 100%; justify-content: flex-start; padding-inline-start: 52px; }
  .led-int-group[data-problem="0"] .led-int-group-badges { flex: none; }
  .led-int-check-head { gap: 12px; padding: 12px 14px; }
  .led-int-check-detail { display: none; }
  .led-int-body { padding: 2px 14px 16px; }
  .led-int-meta .led-int-meta-opt { display: none; }
  .led-int-nums { grid-template-columns: 1fr; gap: 6px; }
  .led-int-num { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; padding: 8px 12px; }
  .led-int-healthy { padding: 12px 14px; }
}

/* الأستاذ العام: بادئة led- */
.led-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.led-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.led-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.led-toolbar[hidden], .led-toolbar > [hidden] { display: none; }
.led-toolbar .shl-select { width: auto; min-width: 150px; }
.led-search { width: min(100%, 260px); }
.led-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.led-toolbar .led-chips { margin-bottom: 0; }
.led-date { display: flex; gap: 6px; align-items: center; color: var(--muted); font-weight: 700; }
.led-date .shl-input { width: 128px; }
.led-account-select { min-width: min(100%, 320px) !important; }
.led-more { margin: 14px auto 0; display: flex; }
.led-more[hidden] { display: none; }

.led-list { display: grid; gap: 8px; }
.led-row {
  position: relative; display: grid; gap: 6px 14px; align-items: center; padding: 10px 14px; overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.led-row[tabindex] { cursor: pointer; }
.led-row[tabindex]:hover { background: var(--surface-2); }
.led-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--led-tone, var(--line-strong)); }
.led-row[data-state="draft"] { --led-tone: var(--warn); }
.led-row[data-state="posted"], .led-row[data-state="closed"] { --led-tone: var(--ok); }
.led-row[data-state="voided"] { --led-tone: var(--faint); opacity: .75; }
.led-row--group { background: var(--surface-2); font-weight: 800; }
.led-row--off { opacity: .6; }
.led-row--head { display: none; }
.led-row--total { background: var(--surface-3); font-weight: 800; }
.led-name { grid-column: 1 / -1; display: flex; gap: 2px 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; line-height: 1.35; }
.led-name .led-sub { flex-basis: 100%; }
.led-code { color: var(--muted); font-weight: 700; }
.led-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.led-sub { color: var(--muted); font-weight: 600; }
.led-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.led-amount { font-variant-numeric: tabular-nums; text-align: start; }
.led-zero { color: var(--faint); }
.led-strong { font-weight: 800; }
.led-row [data-label]::before, .led-line [data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 700; font-size: 12px; }
.led-row--chart { grid-template-columns: minmax(0, 1fr); }
.led-row--chart .led-amount { justify-self: start; }
.led-l2 { margin-inline-start: 14px; }
.led-l3 { margin-inline-start: 28px; }
.led-l1.led-row--group { font-size: 16px; }
.led-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.led-actions:empty { display: none; }

.led-balance { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r-card); background: var(--surface-3); font-weight: 700; }
.led-balance small { color: var(--muted); }
.led-balance--ok { background: var(--ok-soft); color: var(--ok-ink); }
.led-balance--ok small { color: inherit; }
.led-balance--bad { background: var(--bad-soft); color: var(--bad-ink); }
.led-note { color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.led-total { margin: 10px 0 0; font-weight: 800; }
.led-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; }
.led-dl dt { color: var(--muted); font-weight: 700; }
.led-dl dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.led-check { display: flex; gap: 8px; align-items: center; font-weight: 700; grid-column: 1 / -1; }
.led-check input { width: 20px; height: 20px; accent-color: var(--brand-fill); }

.led-lines { display: grid; gap: 6px; }
.led-line { display: grid; gap: 4px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.led-fx { grid-column: 1 / -1; color: var(--ink-2); }
.led-line--head { display: none; }

/* محرر القيد */
.led-editor { display: grid; gap: 10px; }
.led-eline { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.led-eline-top { display: flex; gap: 8px; align-items: end; }
.led-eline-amounts, .led-eline-dims { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.led-fld { display: grid; gap: 3px; min-width: 0; }
.led-fld > span { color: var(--muted); font-weight: 700; font-size: 13px; }
.led-fld--grow { flex: 1; }
.led-editor-foot { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 10px; }
.led-totals { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); font-weight: 700; }
.led-totals--ok { background: var(--ok-soft); color: var(--ok-ink); }
.led-totals--off { background: var(--warn-soft); color: var(--warn-ink); }
.led-eline .shl-error:empty { display: none; }

@media (min-width: 900px) {
  .led-sheet--wide { width: min(100%, 860px); }
  .led-row--chart { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr); }
  .led-row--chart .led-name { grid-column: auto; }
  .led-row--entry { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
  .led-row--entry .led-name { grid-column: auto; }
  .led-row--trial { grid-template-columns: minmax(0, 3fr) repeat(5, minmax(0, 1fr)); }
  .led-row--trial .led-name { grid-column: auto; }
  .led-row--head { display: grid; background: transparent; border: 0; box-shadow: none; color: var(--muted); font-weight: 800; padding-block: 0; }
  .led-row--head::before { display: none; }
  .led-row--chart [data-label]::before, .led-row--trial [data-label]::before, .led-row--entry [data-label]::before, .led-row--stmt [data-label]::before, .led-row--period [data-label]::before { display: none; }
  .led-row--stmt { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) repeat(3, minmax(0, 1fr)); }
  .led-row--stmt .led-name { grid-column: auto; }
  .led-row--period { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1fr) minmax(0, 1.4fr); }
  .led-row--period .led-name { grid-column: auto; }
  .led-line { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .led-line [data-label]::before { display: none; }
  .led-line .led-name { grid-column: auto; }
  .led-line--head { display: grid; border: 0; padding-block: 0; color: var(--muted); font-weight: 800; }
  .led-fx { grid-column: auto; }
}

/* القوائم المالية */
.led-row--fin { grid-template-columns: minmax(0, 1fr) auto; }
.led-row--fin .led-name { grid-column: auto; }
.led-row--fin [data-label]::before { display: none; }
.led-row--fin .led-title { white-space: normal; }
.led-csv { margin-inline-start: auto; }
.led-sub-head { font-size: 16px; margin: 18px 0 8px; }
.led-fin-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.led-fin-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.led-fin-table th, .led-fin-table td { padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.led-fin-table thead th { color: var(--muted); font-weight: 800; background: var(--surface-2); position: sticky; top: 0; }
.led-fin-first { position: sticky; inset-inline-start: 0; background: var(--surface); font-weight: 700; z-index: 1; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
thead .led-fin-first { background: var(--surface-2); z-index: 2; }
.led-fin-group th, .led-fin-group td { background: var(--surface-2); font-weight: 800; }
.led-fin-group .led-fin-first { background: var(--surface-2); }
.led-fin-total th, .led-fin-total td { background: var(--surface-3); font-weight: 800; }
.led-fin-total .led-fin-first { background: var(--surface-3); }
tr.led-l2 .led-fin-first { padding-inline-start: 26px; }
tr.led-l3 .led-fin-first { padding-inline-start: 40px; }

@media (min-width: 1100px) {
  .led-row--profit { grid-template-columns: minmax(0, 2fr) repeat(8, minmax(0, 1fr)); }
  .led-row--profit-c { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
  .led-row--profit .led-name, .led-row--profit-c .led-name { grid-column: auto; }
  .led-row--profit [data-label]::before, .led-row--profit-c [data-label]::before { display: none; }
}

/* شاشات المال: بادئة mny- — طبقة فوق مكوّنات الغلاف المشتركة (المرتبات · السلف · الفوترة · العهد · السندات · الخزائن · الأستاذ · المطابقة).
   الألوان من الرموز فقط. تحت 760px الجداول بطاقات بشبكة عمودين، وفوقها جداول البيانات المشتركة. */

/* ---------- الترويسة ---------- */
@media (max-width: 759px) {
  .mny-ph .shl-ph-actions { width: 100%; }
  .mny-ph .shl-ph-actions > .shl-btn--primary { flex: 1 1 auto; }
  .mny-ph .shl-ph-sub { font-size: var(--fs-md); }
}

/* ---------- المؤشرات ---------- */
.mny-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 20px; }
.mny-kpis .shl-kpi-value { flex-wrap: wrap; font-size: clamp(22px, 1vw + 14px, 29px); }
.mny-kpis .shl-kpi-foot { overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .mny-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .mny-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mny-kpis .shl-kpi { padding: 12px 12px 10px; gap: 6px; }
  .mny-kpis .shl-kpi::before { inset-inline-start: 12px; }
  .mny-kpis .shl-kpi-label { font-size: var(--fs-xs); }
  .mny-kpis .shl-kpi-icon { width: 28px; height: 28px; border-radius: 9px; }
  .mny-kpis .shl-kpi-icon .shl-icon { width: 15px; height: 15px; }
  .mny-kpis .shl-kpi-value { font-size: 19px; gap: 4px; }
}

/* ---------- شرائح التصفية ---------- */
.mny-chips { display: flex; gap: 8px; margin-bottom: 14px; padding: 2px 1px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mny-chips::-webkit-scrollbar { display: none; }
.mny-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.mny-chip .shl-count[hidden] { display: none; }
.mny-chip[aria-pressed="true"] .shl-count { background: var(--surface); color: var(--brand); }
.mny-toolbar .mny-chips { margin: 0; padding: 0; }

/* ---------- شريط الأدوات ---------- */
.mny-toolbar { margin-bottom: 14px; }
.mny-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mny-field-label { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.mny-field .efm-date { min-width: 0; }
@media (max-width: 759px) {
  .mny-toolbar > .shl-select, .mny-toolbar > .mny-field { flex: 1 1 140px; min-width: 0; }
  .mny-toolbar .shl-select { width: 100%; min-width: 0; }
  .mny-toolbar > .mny-field { flex-basis: 100%; }
  .mny-toolbar > .mny-field .efm-date { flex: 1; }
}

/* ---------- لوحة التبويب ---------- */
.mny-tabs { margin-bottom: 16px; }
.mny-panel { min-width: 0; }

/* ---------- الأرقام ---------- */
.mny-amt { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.mny-amt.is-zero { color: var(--muted); font-weight: var(--fw-medium); }
.mny-amt.is-neg, .mny-amt.is-out { color: var(--bad-ink); }
.mny-amt.is-in { color: var(--ok-ink); }
.mny-amt.is-strong { font-weight: var(--fw-heavy); }
.mny-none { color: var(--muted); }

/* ---------- جدول البيانات ---------- */
.mny-title { display: grid; gap: 2px; min-width: 0; line-height: 1.45; }
.mny-title strong { color: var(--ink); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.mny-title small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.mny-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mny-table-wrap .shl-table tbody td:first-child { border-inline-start: 4px solid transparent; }
.mny-table-wrap tr[data-state="ok"] { --mny-tone: var(--ok); }
.mny-table-wrap tr[data-state="warn"] { --mny-tone: var(--warn); }
.mny-table-wrap tr[data-state="bad"] { --mny-tone: var(--bad); }
.mny-table-wrap tr[data-state="brand"] { --mny-tone: var(--brand); }
.mny-table-wrap tr[data-state="muted"] { --mny-tone: var(--line-strong); }
.mny-table-wrap tr[data-state] td:first-child { border-inline-start-color: var(--mny-tone); }
.mny-table-wrap tr[data-state="muted"] td { color: var(--muted); }
.mny-table-wrap tr[data-state="muted"] .mny-title strong { color: var(--ink-2); font-weight: var(--fw-bold); }
.mny-table-wrap .shl-table tbody td.mny-act { text-align: end; white-space: nowrap; }
.mny-table-wrap .shl-table td, .mny-table-wrap .shl-table th { vertical-align: middle; }
.mny-acts { display: inline-flex; align-items: center; gap: 6px; }
.mny-kebab { color: var(--ink-2); }
@media (min-width: 760px) {
  .mny-table-wrap .shl-table tbody td { padding-block: 10px; }
  .mny-table-wrap .shl-table .is-num { font-weight: var(--fw-bold); }
  .mny-table-wrap td.is-end, .mny-table-wrap th.is-end { text-align: end; }
}
@media (max-width: 759px) {
  .mny-table-wrap .shl-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 12px 14px 10px; border-inline-start: 4px solid var(--mny-tone, var(--line)); }
  .mny-table-wrap .shl-table tbody td, .mny-table-wrap .shl-table tbody td:first-child { display: grid; align-content: start; justify-content: stretch; gap: 1px; padding: 5px 0; border-inline-start: 0; }
  .mny-table-wrap .shl-table tbody td::before { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  .mny-table-wrap .shl-table tbody td.is-title, .mny-table-wrap .shl-table tbody td.mny-wide, .mny-table-wrap .shl-table tbody td.mny-act { grid-column: 1 / -1; }
  .mny-table-wrap .shl-table tbody td.is-title { padding-bottom: 8px; margin-bottom: 2px; }
  .mny-table-wrap .shl-table tbody td.mny-act { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); text-align: start; }
  .mny-table-wrap .shl-table tbody td.mny-act::before { content: none; }
  .mny-table-wrap .shl-table tbody td > * { justify-self: start; max-width: 100%; }
  .mny-table-wrap .shl-table tbody td.mny-key { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line); }
  .mny-table-wrap .shl-table tbody td.mny-key .shl-num, .mny-table-wrap .shl-table tbody td.mny-key .mny-amt { font-size: var(--fs-lg); }
  .mny-table-wrap .shl-table tbody td.mny-key { order: 1; }
  .mny-table-wrap .shl-table tbody td.mny-act { order: 2; }
  .mny-table-wrap .shl-table tbody td.mny-tick { grid-column: 1 / -1; padding-bottom: 0; order: -1; }
  .mny-table-wrap .shl-table tbody td.mny-tick::before { content: none; }
  .mny-acts { display: flex; width: 100%; }
  .mny-acts > .shl-btn:not(.shl-btn--icon) { flex: 1; min-height: var(--tap); }
  .mny-acts .shl-btn--icon { min-height: var(--tap); width: var(--tap); }
  .mny-acts.is-solo { justify-content: flex-end; }
  .mny-acts.is-solo > .shl-btn:not(.shl-btn--icon) { flex: 0 1 auto; padding-inline: 18px; }
}

/* ---------- الشبكة المالية: جدول يتمرّر أفقياً بعمود أول لاصق ---------- */
.mny-grid-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.mny-grid-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mny-grid { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.mny-grid th, .mny-grid td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; vertical-align: middle; background: var(--surface); }
.mny-grid thead th { position: sticky; top: 0; z-index: 2; height: 46px; background: var(--th-bg); color: var(--th-ink); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.mny-grid .is-num { text-align: end; font-variant-numeric: tabular-nums lining-nums; }
.mny-grid .is-strong { font-weight: var(--fw-heavy); }
.mny-grid-first { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 160px; max-width: 280px; white-space: normal !important; font-weight: var(--fw-bold); border-inline-end: 1px solid var(--line); }
.mny-grid thead .mny-grid-first { z-index: 3; }
.mny-grid tbody tr:last-child th, .mny-grid tbody tr:last-child td { border-bottom: 0; }
.mny-grid tr.is-interactive { cursor: pointer; }
.mny-grid tr.is-interactive:hover th, .mny-grid tr.is-interactive:hover td { background: var(--hover); }
.mny-grid tr.is-interactive:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.mny-grid tr.is-group th, .mny-grid tr.is-group td { background: var(--surface-2); font-weight: var(--fw-heavy); }
.mny-grid tr.is-total th, .mny-grid tr.is-total td { background: var(--surface-3); font-weight: var(--fw-heavy); border-top: 2px solid var(--line-strong); }
.mny-grid tr.is-off th, .mny-grid tr.is-off td { color: var(--muted); }
.mny-grid tr.lvl-2 .mny-grid-first { padding-inline-start: 30px; }
.mny-grid tr.lvl-3 .mny-grid-first { padding-inline-start: 46px; }
.mny-grid tr.is-bad th, .mny-grid tr.is-bad td:first-of-type { box-shadow: inset -4px 0 0 var(--bad); }
.mny-grid-sub { margin: 22px 0 10px; font-size: var(--fs-xl); font-weight: var(--fw-black); }
.mny-gridnote { margin: 0 0 12px; color: var(--muted); font-weight: var(--fw-medium); }

/* ---------- قائمة الإجراءات المنبثقة ---------- */
.mny-menu { display: grid; gap: 4px; padding: 10px 12px 16px; }
.mny-menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent;
  color: var(--ink); font: inherit; font-weight: var(--fw-bold); text-align: start; text-decoration: none; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.mny-menu-row:hover, .mny-menu-row:focus-visible { background: var(--hover); border-color: var(--line); }
.mny-menu-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.mny-menu-icon .shl-icon { width: 18px; height: 18px; }
.mny-menu-row.is-danger { color: var(--bad-ink); }
.mny-menu-row.is-danger .mny-menu-icon { background: var(--bad-soft); color: var(--bad-ink); }
@media (min-width: 760px) {
  .shl-pop.shl-pop--mny-menu { inset: 0; margin: auto; height: fit-content; width: min(380px, calc(100vw - 32px)); max-height: min(80dvh, 620px); border-radius: var(--r-xl); }
  .shl-pop.shl-pop--mny-menu[open] { animation-name: shl-confirm-in; transform-origin: center; }
}

/* ---------- قسم قابل للطي وتنبيهات بقوائم ---------- */
.mny-fold { margin-top: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.mny-fold > summary { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 14px; cursor: pointer; font-weight: var(--fw-bold); list-style: none; }
.mny-fold > summary::-webkit-details-marker { display: none; }
.mny-fold > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-md); }
.mny-fold-caret { width: 18px; height: 18px; margin-inline-start: auto; transition: transform var(--dur-2) var(--ease-out); }
.mny-fold[open] .mny-fold-caret { transform: rotate(180deg); }
.mny-fold-body { display: grid; gap: 6px; padding: 2px 14px 14px; }
.mny-notice { margin-bottom: 14px; }
.mny-notice .mny-fold { background: transparent; border-color: color-mix(in srgb, currentColor 30%, transparent); color: inherit; }
.mny-notice-list { display: grid; gap: 3px; margin: 4px 0 0; padding-inline-start: 18px; font-weight: var(--fw-medium); }
.mny-notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mny-notice .mny-fold-body { font-weight: var(--fw-medium); }

/* ---------- تحميل المزيد ---------- */
.mny-more { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.mny-more[hidden], .mny-more .shl-btn[hidden] { display: none; }
.mny-more-info { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* ---------- خانة اختيار داخل خلية ---------- */
.mny-check { min-height: 0; }
.mny-check .shl-check-box { width: 24px; height: 24px; }
@media (pointer: coarse) { .mny-check { min-width: var(--tap); min-height: var(--tap); } }

/* ---------- بطاقة بعنوان ---------- */
.mny-card { display: grid; gap: 0; overflow: hidden; }
.mny-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; }
.mny-card-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.mny-card-icon .shl-icon { width: 20px; height: 20px; }
.mny-card-titles { display: grid; gap: 1px; flex: 1; min-width: 0; }
.mny-card-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.mny-card-titles small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.mny-card-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.mny-card-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.mny-card-foot { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- أرقام صغيرة في بطاقة (مؤشر مصغّر) ---------- */
.mny-stats { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 0; }
.mny-stat { display: grid; gap: 1px; min-width: 0; }
.mny-stat dt { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.mny-stat dd { margin: 0; color: var(--ink); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 759px) { .mny-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- ورقة التفاصيل: ملخص بمبلغ بارز ---------- */
.mny-sheet-hero { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.mny-sheet-hero small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.mny-sheet-hero strong { font-size: clamp(24px, 2vw + 14px, 32px); font-weight: var(--fw-black); font-variant-numeric: tabular-nums lining-nums; line-height: 1.15; }
.mny-sheet-hero strong small { margin-inline-start: 6px; font-size: var(--fs-sm); }
.mny-sheet-sub { margin: 4px 0 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.mny-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.mny-sheet-actions:empty { display: none; }
.mny-sheet-actions > .shl-btn--primary { flex: 1 1 auto; }
.mny-list-sheet { display: grid; gap: 8px; }
.mny-line-note { margin: 0; color: var(--muted); font-weight: var(--fw-medium); }

@media print { .mny-kebab, .mny-acts { display: none; } }

/* ---------- إخفاء ما يُخفى بالسمة hidden رغم display الصريح ---------- */
.shl-btn[hidden], .mny-field[hidden], .mny-toolbar[hidden], .mny-chip[hidden] { display: none !important; }

/* ---------- شجرة دليل الحسابات ---------- */
.mny-tree { display: grid; gap: 2px; margin: 0; padding: 8px; list-style: none; }
.mny-tree-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 6px 14px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2);
}
.mny-tree-row:hover { background: var(--hover); }
.mny-tree-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.mny-tree-row.lvl-2 { padding-inline-start: 30px; }
.mny-tree-row.lvl-3 { padding-inline-start: 52px; }
.mny-tree-row.is-group { background: var(--surface-2); font-weight: var(--fw-heavy); }
.mny-tree-row.is-group:hover { background: var(--surface-3); }
.mny-tree-row.lvl-1.is-group { margin-top: 10px; border-inline-start: 4px solid var(--gold); font-size: var(--fs-lg); }
.mny-tree-item:first-child .mny-tree-row.lvl-1 { margin-top: 0; }
.mny-tree-row.is-off { color: var(--muted); }
.mny-tree-code { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mny-tree-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.mny-tree-name strong { font-weight: inherit; overflow-wrap: anywhere; }
.mny-tree-bal { text-align: end; }
@media (max-width: 759px) {
  .mny-tree { padding: 6px; }
  .mny-tree-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; }
  .mny-tree-row.lvl-2 { padding-inline-start: 16px; }
  .mny-tree-row.lvl-3 { padding-inline-start: 28px; }
}

/* ---------- القوائم المالية: ورقة بصفوف اسم ومبلغ ---------- */
.mny-fin { overflow: hidden; }
.mny-fin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.mny-fin-row:last-child { border-bottom: 0; }
.mny-fin-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.mny-fin-name small { flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.mny-fin-code { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.mny-fin-label { overflow-wrap: anywhere; }
.mny-fin-amt { flex: none; text-align: end; }
.mny-fin-row.lvl-2 { padding-inline-start: 34px; }
.mny-fin-row.lvl-3 { padding-inline-start: 52px; }
.mny-fin-row.is-group { background: var(--surface-2); font-weight: var(--fw-heavy); }
.mny-fin-row.is-total { background: var(--surface-3); border-top: 2px solid var(--line-strong); font-weight: var(--fw-heavy); }
@media (max-width: 759px) {
  .mny-fin-row { padding: 8px 12px; gap: 10px; }
  .mny-fin-row.lvl-2 { padding-inline-start: 22px; }
  .mny-fin-row.lvl-3 { padding-inline-start: 34px; }
}
.led-prof + .led-prof { margin-top: 28px; }

/* ---------- خلية حساب مدمجة ---------- */
.mny-acct { display: grid; gap: 1px; min-width: 0; }
.mny-acct-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mny-acct-line strong { color: var(--ink); font-weight: inherit; overflow-wrap: anywhere; }
.mny-acct small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.mny-code { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mny-grid tr.lvl-2 .mny-grid-first { padding-inline-start: 38px; }
.mny-grid tr.lvl-3 .mny-grid-first { padding-inline-start: 60px; }

/* ---------- مؤشرات كثيرة (خمسة فأكثر) في صف واحد على الحاسوب ---------- */
@media (min-width: 760px) {
  .mny-kpis--tight { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
  .mny-kpis--tight .shl-kpi-value { font-size: clamp(20px, 0.8vw + 13px, 26px); }
}

/* ---------- نماذج الأوراق: حقلان (أو ثلاثة في الدرج العريض) في الصف حيث يتسع المكان؛ الجوال عمود واحد ---------- */
.efm-sheet:is(.led-sheet, .trs-sheet) .efm-form > .shl-sheet-body { grid-template-columns: repeat(auto-fit, minmax(min(100%, 224px), 1fr)); align-items: start; gap: 14px; }
.efm-sheet:is(.led-sheet, .trs-sheet) .efm-form > .shl-sheet-body > :not(.shl-field),
.efm-sheet:is(.led-sheet, .trs-sheet) .efm-form > .shl-sheet-body > .shl-field--wide { grid-column: 1 / -1; }

/* ---------- الشبكة المالية على الجوال: عمود أول أضيق ليظهر رقم أو اثنان بجانبه ---------- */
@media (max-width: 759px) {
  .mny-grid-first { min-width: 124px; max-width: 160px; }
  .mny-grid th, .mny-grid td { padding: 10px 12px; }
}

/* ---------- دليل الحسابات: خط شعري يقود العين من الاسم إلى الرصيد ---------- */
@media (min-width: 760px) {
  .mny-tree-row:not(.is-group) { border-radius: 0; box-shadow: inset 0 -1px 0 var(--line); }
}

/* ---------- ترويسة بثلاثة إجراءات فأكثر على الجوال: الطباعة أيقونة وحدها كي تتسع الأزرار في صف واحد ---------- */
@media (max-width: 759px) {
  .mny-ph .shl-ph-actions:has(.mny-kebab) .led-print { flex: none; width: var(--tap); padding-inline: 0; }
  .mny-ph .shl-ph-actions:has(.mny-kebab) .led-print .led-print-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mny-ph .shl-ph-actions:has(.mny-kebab) .mny-kebab { flex: none; }
  .mny-ph .shl-ph-actions > .shl-btn--primary, .mny-ph .mny-slot > .shl-btn--primary { min-width: 0; }
}

/* ---------- الأوراق: الرأس والذيل فوق الشبكات اللاصقة داخل المحتوى ---------- */
.efm-sheet:is(.led-sheet, .pay-sheet, .trs-sheet) .shl-sheet-head, .efm-sheet:is(.led-sheet, .pay-sheet, .trs-sheet) .shl-sheet-foot { z-index: 6; }

/* ---------- إجراء الصف الهدّام الوحيد: هادئ حتى لا يصرخ في كل بطاقة ---------- */
.mny-acts > .shl-btn--danger { background: transparent; border-color: var(--line-strong); }
.mny-acts > .shl-btn--danger:hover, .mny-acts > .shl-btn--danger:focus-visible { background: var(--bad-soft); border-color: var(--bad); }

/* ---------- محاذاة حقل التاريخ مع جيرانه في شبكة النموذج ---------- */
@media (pointer: fine) {
  .efm-sheet:is(.led-sheet, .trs-sheet) .efm-date { min-height: var(--ctl-h); }
  .efm-sheet:is(.led-sheet, .trs-sheet) .efm-date-btn { height: var(--ctl-h); min-height: 0; }
}

/* خمسة مؤشرات أو أكثر على اللوحي: ثلاثة ثم اثنان بدل أربعة ثم واحد يتيم */
@media (min-width: 760px) and (max-width: 1099px) {
  .mny-kpis--tight:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- ترويسة بلا إجراءات (الخانة فارغة): لا فراغ يُحجز لها ---------- */
.mny-ph .shl-ph-actions:has(> .mny-slot:only-child:empty) { display: none; }

/* ---------- خلية الحساب على الجوال: الرمز فوق الاسم كي لا ينكسر الاسم كلمةً كلمة في العمود اللاصق ---------- */
@media (max-width: 759px) {
  .mny-grid .mny-acct-line { flex-direction: column; align-items: flex-start; gap: 0; }
  .mny-grid-first { min-width: 138px; max-width: 170px; }
}

/* ---------- شبكة مضغوطة بلا عمود لاصق: ملخصات قصيرة تتسع للجوال ---------- */
.mny-grid-scroll.mny-grid--flat .mny-grid { min-width: 0; }
.mny-grid-scroll.mny-grid--flat .mny-grid-first { position: static; min-width: 0; max-width: none; border-inline-end: 0; }
@media (max-width: 759px) { .mny-grid--flat th, .mny-grid--flat td { padding: 9px 8px; } }
/* @@LEDGER-CSS-END */

/* @@CUSTODY-CSS-BEGIN */
/* العهد والمصروفات: بادئة cus- (فوق طبقة money-ui المشتركة) */
.cus-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); margin: 16px 0 6px; }
.cus-card { container-type: inline-size; }
.cus-card--off { opacity: .7; }
.cus-card .mny-card-body { gap: 14px; }
.cus-body { display: grid; gap: 16px; }
.cus-balance { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--t-soft, var(--brand-soft)); }
.cus-balance small { color: var(--t-ink, var(--ink-2)); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cus-balance strong { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-size: clamp(26px, 2vw + 16px, 34px); font-weight: var(--fw-black); font-variant-numeric: tabular-nums lining-nums; line-height: 1.15; }
.cus-balance strong small { color: var(--muted); font-size: var(--fs-sm); }
@container (min-width: 600px) {
  .cus-body { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); align-items: center; }
}
.cus-moves { margin-top: 28px; }
/* @@CUSTODY-CSS-END */

/* @@BILLING-CSS-BEGIN */
/* الفوترة والتحصيل: بادئة bil- (فوق طبقة money-ui المشتركة) */
.bil-customer { margin-bottom: 16px; }
.bil-customer .mny-grid-scroll { box-shadow: none; }
.bil-preview { display: grid; gap: 14px; min-width: 0; }
.bil-ts { display: grid; gap: 8px; }
.bil-ts-row {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2);
}
.bil-ts-row:hover { background: var(--hover); }
.bil-ts-row:has(.shl-check-input:checked) { border-color: var(--brand-edge); background: var(--brand-soft); }
.bil-ts-row:has(.shl-check-input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.bil-ts-row.is-off { cursor: not-allowed; background: var(--surface-2); }
.bil-ts-row .shl-check-input:checked + .shl-check-box { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
.bil-ts-text { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.bil-ts-text strong { font-weight: var(--fw-heavy); }
.bil-ts-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.bil-rates { display: grid; gap: 10px; }
.bil-rate { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.bil-rate .led-fld { grid-template-columns: 1fr; }
.bil-allocs { display: grid; gap: 8px; }
.bil-alloc { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
@media (min-width: 900px) {
  .bil-rate { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: end; }
  .bil-alloc { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; }
  .bil-alloc .shl-error { grid-column: 1 / -1; }
}
/* @@BILLING-CSS-END */

/* @@EQUIPMENT-CSS-BEGIN */
/* حضور المعدات: بادئة eqp- (لكل معدة بطاقة بتقويم أيامها) */
.eqp-ctx { display: flex; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; padding: 14px 16px; margin: 4px 0 18px; }
.eqp-ctx-field { display: grid; gap: 4px; }
.eqp-ctx-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.eqp-ctx .shl-select { width: auto; min-width: 210px; }
.eqp-status { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-height: var(--ctl-h); }
.eqp-status-text { color: var(--ink-2); font-weight: var(--fw-bold); }
.eqp-status small { color: var(--muted); font-weight: var(--fw-bold); }
@media (max-width: 759px) { .eqp-ctx { flex-direction: column; align-items: stretch; } .eqp-ctx .shl-select { width: 100%; } }

.eqp-cards { display: grid; gap: 16px; margin: 16px 0; grid-template-columns: minmax(0, 1fr); }
.eqp-card { display: grid; gap: 14px; padding: 16px; }
.eqp-card-head { display: flex; align-items: center; gap: 14px; }
.eqp-card-titles { display: grid; gap: 2px; min-width: 0; flex: 1; line-height: 1.4; }
.eqp-card-title { font-size: var(--fs-lg); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.eqp-card-titles small { color: var(--muted); font-weight: var(--fw-bold); }
.eqp-total { display: grid; gap: 0; justify-items: end; text-align: end; }
.eqp-total-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.eqp-total-value { display: inline-flex; align-items: baseline; gap: 2px; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.eqp-total-value small { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.eqp-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.eqp-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px 6px; }
.eqp-day { display: grid; gap: 3px; justify-items: center; }
.eqp-day-n { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.eqp-day[data-off="1"] .eqp-day-n { opacity: .5; }
.eqp-in { width: 100%; min-height: 40px; padding: 2px 4px; text-align: center; }
.eqp-in:disabled { opacity: .5; }
@media (max-width: 759px) {
  .eqp-card { padding: 14px; }
  .eqp-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px 5px; }
  .eqp-in { min-height: var(--tap); padding-inline: 2px; font-size: var(--fs-md); }
}
.eqp-reg-end { display: grid; justify-items: end; gap: 4px; }
.eqp-reg-end small { color: var(--muted); font-weight: var(--fw-bold); }
/* @@EQUIPMENT-CSS-END */

/* @@ADVANCES-CSS-BEGIN */
/* السلف: بادئة adv- (فوق طبقة money-ui المشتركة) */
.adv-chosen { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 10px; border-radius: var(--r-ctl); background: var(--brand-soft); border: 1px solid var(--brand-edge); }
.adv-chosen[hidden], .adv-found[hidden] { display: none; }
.adv-chosen-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; text-align: start; }
.adv-chosen-text strong { font-weight: var(--fw-heavy); }
.adv-chosen-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.adv-found { display: grid; gap: 2px; max-height: 240px; margin-top: 6px; padding: 4px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.adv-found-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--tap); padding: 4px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: background-color var(--dur-2); }
.adv-found-row:hover, .adv-found-row:focus-visible { background: var(--hover); }
.adv-found-none { margin: 0; padding: 12px; color: var(--muted); font-weight: var(--fw-medium); text-align: center; }
/* @@ADVANCES-CSS-END */

/* @@RECONCILE-CSS-BEGIN */
/* مطابقة المصرف: بادئة rec- (فوق طبقة money-ui المشتركة) */
.rec-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: 16px; }
.rec-card { display: grid; gap: 12px; padding: 16px; text-align: start; font: inherit; color: var(--ink); cursor: pointer; }
.rec-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rec-card-top { display: flex; align-items: center; gap: 12px; }
.rec-card-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.rec-card-icon .shl-icon { width: 21px; height: 21px; }
.rec-card-name { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.rec-card-name strong { font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.rec-card-name small, .rec-card-foot { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.rec-card-balance { display: grid; gap: 1px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.rec-card-balance small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.rec-card-balance strong { display: flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums lining-nums; }
.rec-card-balance strong small { font-size: var(--fs-xs); }

.rec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.rec-bar-title { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.rec-bar-title strong { font-size: var(--fs-xl); font-weight: var(--fw-black); overflow-wrap: anywhere; }
.rec-bar-title small { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.rec-lines-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.rec-pos { color: var(--ok-ink); }
.rec-neg { color: var(--bad-ink); }
.mny-code { color: var(--muted); font-weight: var(--fw-bold); }

.rec-options { display: grid; gap: 8px; margin-bottom: 12px; }
.rec-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding: 10px 14px; font: inherit; color: var(--ink); text-align: start; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); transition: background-color var(--dur-2), border-color var(--dur-2);
}
.rec-option:hover { background: var(--hover); }
.rec-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rec-option--exact { border-color: var(--ok); background: var(--ok-soft); }
.rec-option-text { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.rec-option-text strong { font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.rec-option-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.rec-option--exact .rec-option-text small { color: var(--ok-ink); }
.rec-dims { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-column: 1 / -1; }
.rec-dims[hidden] { display: none; }
.rec-extra-list { display: grid; gap: 8px; margin: 6px 0 0; padding-inline-start: 18px; color: var(--ink); font-weight: var(--fw-medium); }
.rec-extra-list li { overflow-wrap: anywhere; }
.mny-panel .mny-fold { margin-top: 12px; }
/* @@RECONCILE-CSS-END */

/* @@VOUCHERS-CSS-BEGIN */
/* سندات القبض والصرف: بادئة vch- (فوق طبقة money-ui المشتركة) */
.vch-cash { flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.vch-dims { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-column: 1 / -1; }
.vch-dims[hidden], .shl-field[hidden] { display: none; }
/* @@VOUCHERS-CSS-END */

/* @@INVENTORY-CSS-BEGIN */
/* المخازن: بادئة inv- — ترويسة وأدوات وجدول بيانات عام وأوراق (كل الألوان من الرموز) */
.inv-sheet { scroll-padding-block: 84px 150px; }   /* الحقل المركَّز لا يختبئ تحت رأس الورقة ولا ذيلها اللاصق (يظهر خطأ التحقق كاملاً) */

/* الترويسة: الطباعة أيقونة وحدها على الجوال (aria-label وtitle موجودان) */
.inv-print { white-space: nowrap; }
@media (max-width: 759px) {
  .inv-print { width: var(--tap); min-width: var(--tap); padding: 0; }
  .inv-print-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.inv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 26px; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.inv-meta:empty::before { content: ""; width: 90px; height: 14px; border-radius: 8px; background: var(--surface-3); }
.inv-lowbadge { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.inv-lowbadge:hover { filter: brightness(.96); }
.inv-lowbadge[aria-pressed="true"] { outline: 2px solid var(--warn-ink); outline-offset: 1px; }

/* شريط البحث والتصفية: بحث ثم شرائح في صف واحد على الحاسوب، وعلى الجوال صفان والشرائح قابلة للسحب */
.inv-bar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-search { flex: 0 1 340px; min-width: 240px; }
.inv-chips { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; padding-block: 4px; overflow-x: auto; scrollbar-width: none; }
.inv-chips::-webkit-scrollbar { display: none; }
.inv-chips .shl-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.inv-chips-sep { flex: none; width: 1px; height: 22px; background: var(--line-strong); }
.inv-count--warn { background: var(--warn-soft); color: var(--warn-ink); }
@media (max-width: 759px) { .inv-search { flex: 1 1 100%; } .inv-chips { flex: 1 1 100%; } }
@media (min-width: 1100px) { .inv-chips { flex-wrap: wrap; overflow: visible; } }

.inv-skeletons .shl-skel { min-height: 64px; border-radius: var(--r-card); }

/* الجدول */
.inv-table .shl-table td:first-child { border-inline-start: 3px solid transparent; }
.inv-table tr[data-stock="low"] td:first-child { border-inline-start-color: var(--warn); }
.inv-table tr[data-stock="out"] td:first-child { border-inline-start-color: var(--bad); }
.inv-table tr[data-stock="off"] { opacity: .72; }
.inv-name { display: grid; gap: 1px; min-width: 0; }
.inv-name-line { display: flex; align-items: center; gap: 8px; }
.inv-code { color: var(--muted); font-weight: var(--fw-bold); }
.inv-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-snug); overflow-wrap: anywhere; }   /* الاسم كاملاً يلتف ولا يُقصّ بنقاط */
.inv-cat { white-space: nowrap; }
.inv-sub { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.inv-cat-m, .inv-min-m { display: none; }
.inv-dash { color: var(--faint); }
.inv-bal { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.inv-qty { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums lining-nums; }
.inv-qty > .shl-num { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.inv-unit { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.inv-bal.is-low .inv-qty > .shl-num { color: var(--warn-ink); }
.inv-table tr[data-stock="out"] .inv-bal .inv-qty > .shl-num { color: var(--bad-ink); }
.inv-min-m { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
@media (max-width: 759px) { .inv-cat-m, .inv-min-m { display: inline; } .inv-table .shl-table tbody td.is-title { border-bottom: 0; padding-bottom: 4px; } }
.inv-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.inv-acts .shl-btn--secondary .shl-icon { width: 16px; height: 16px; }
.inv-table td.inv-act-cell { width: 1%; white-space: nowrap; }
@media (max-width: 759px) {
  .inv-table tr[data-stock="low"] { border-inline-start: 4px solid var(--warn); }
  .inv-table tr[data-stock="out"] { border-inline-start: 4px solid var(--bad); }
  .inv-table .shl-table td:first-child { border-inline-start: 0; }
  .inv-table .shl-table tbody td.inv-act-cell { width: auto; display: block; margin-top: 6px; padding: 10px 0 0; border-top: 1px solid var(--line); }
  .inv-table td.inv-act-cell::before { content: none; }
  .inv-acts { justify-content: stretch; gap: 8px; }
  .inv-acts .shl-btn--secondary { flex: 1; min-height: var(--tap); }
  .inv-acts .inv-more { flex: none; width: var(--tap); min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--ctl-border); }
}

/* قائمة «المزيد» */
.inv-menu { display: grid; gap: 4px; padding: 10px 12px 16px; }
.inv-menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--ink);
  font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.inv-menu-row:hover, .inv-menu-row:focus-visible { background: var(--hover); border-color: var(--line); }
.inv-menu-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); }
.inv-menu-icon .shl-icon { width: 18px; height: 18px; }
.inv-menu-text { display: grid; gap: 1px; min-width: 0; }
.inv-menu-text strong { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.inv-menu-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
@media (min-width: 760px) {
  .shl-pop.shl-pop--inv-menu { inset: 0; margin: auto; height: fit-content; width: min(400px, calc(100vw - 32px)); max-height: min(80dvh, 620px); border-radius: var(--r-xl); }
  .shl-pop.shl-pop--inv-menu[open] { animation-name: shl-confirm-in; transform-origin: center; }
}

/* الأوراق */
.inv-sheet:focus { outline: none; }
/* الذيل اللاصق في أسفل الدرج حتى لو قصر النموذج */
@media (min-width: 900px) {
  .inv-sheet[open] { display: flex; flex-direction: column; }
  .inv-sheet > form { flex: 1 0 auto; display: flex; flex-direction: column; }
  .inv-sheet > form > .shl-sheet-body { flex: 1; align-content: start; }
}
.inv-switch-row { padding-top: 4px; }
.inv-balbox {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-card);
  background: var(--surface-2); border: 1px solid var(--line); border-inline-start: 4px solid var(--ok);
}
.inv-balbox.is-low { border-inline-start-color: var(--warn); background: var(--warn-soft); }
.inv-balbox.is-out { border-inline-start-color: var(--bad); background: var(--bad-soft); }
.inv-balbox.is-off { border-inline-start-color: var(--line-strong); }
.inv-balbox-main { display: grid; gap: 2px; }
.inv-balbox-main small, .inv-balbox-side small { color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.inv-balbox-main strong { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: 1.1; }
.inv-balbox-main .inv-unit { font-size: var(--fs-md); color: var(--ink-2); }
.inv-balbox-side { display: grid; gap: 6px; justify-items: end; }
.inv-recipient { display: grid; gap: 10px; }
.inv-chosen, .inv-found-row { display: flex; align-items: center; gap: 10px; }
.inv-chosen { padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--brand-edge); background: var(--brand-soft); }
.inv-chosen-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.inv-chosen-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.inv-chosen .shl-btn { margin-inline-start: auto; }
.inv-found { display: grid; gap: 2px; max-height: 232px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.inv-found-row { width: 100%; min-height: 48px; padding: 4px 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.inv-found-row:hover, .inv-found-row:focus-visible { background: var(--hover); }
.inv-found-none { margin: 0; padding: 10px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.inv-chosen[hidden], .inv-found[hidden], .inv-picker .shl-search-wrap[hidden] { display: none !important; }
.inv-picker { display: grid; gap: 8px; }

/* كشف الصنف */
.inv-statement-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-subhead { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.inv-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-move { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.inv-move.has-reverse { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.inv-move.is-reversed { background: var(--surface-2); }
.inv-move.is-reversed .inv-move-main strong, .inv-move.is-reversed .inv-move-nums .shl-num { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .7; }
.inv-move-tile { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.inv-move-tile .shl-icon { width: 19px; height: 19px; }
.inv-move-main { display: grid; gap: 2px; min-width: 0; }
.inv-move-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-move-top strong { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.inv-move-no { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.inv-move-meta { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.inv-move-nums { display: grid; gap: 1px; justify-items: end; font-variant-numeric: tabular-nums lining-nums; }
.inv-move-nums small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.inv-in { color: var(--ok-ink); font-weight: var(--fw-black); font-size: var(--fs-lg); }
.inv-out { color: var(--bad-ink); font-weight: var(--fw-black); font-size: var(--fs-lg); }
.inv-move-reverse { min-height: 36px; }
@media (max-width: 479px) {
  .inv-move.has-reverse { grid-template-columns: auto minmax(0, 1fr) auto; }
  .inv-move-reverse { grid-column: 2 / -1; justify-self: start; }
}
.inv-stock-note { color: var(--muted); font-weight: 600; font-size: 13px; }
.inv-equip { display: grid; gap: 6px; margin-top: 6px; }
.inv-equip-row { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); }
.inv-equip-row small { color: var(--muted); font-weight: 600; }
/* @@INVENTORY-CSS-END */

/* @@TRAINING-CSS-BEGIN */
/* التدريب والسلامة: بادئة trn- (البلاطات والتصفية من عدّة pkt-) */
.trn-host { container-type: inline-size; container-name: trn-host; }
.trn-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.trn-legend span { display: inline-flex; gap: 8px; align-items: center; }

/* المصفوفة (الحاسوب) */
.trn-gridwrap { overflow: auto; max-height: max(420px, calc(100dvh - 330px)); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.trn-grid { border-collapse: separate; border-spacing: 0; min-width: max-content; width: 100%; font-variant-numeric: tabular-nums; }
.trn-grid th, .trn-grid td { padding: 4px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.trn-grid thead th { position: sticky; top: 0; z-index: 2; height: 46px; background: var(--th-bg); color: var(--th-ink); font-weight: var(--fw-heavy); font-size: var(--fs-sm); }
.trn-grid tbody tr:hover > * { background: var(--hover); }
.trn-g-name { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 270px; max-width: 320px; text-align: start !important; padding-inline: 14px !important; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.trn-grid thead .trn-g-name { z-index: 3; background: var(--th-bg); color: var(--th-ink); }
.trn-g-course { min-width: 62px; padding: 0 !important; }
.trn-g-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; min-height: 46px; cursor: pointer; font-weight: var(--fw-heavy); }
.trn-g-btn:hover { background: color-mix(in srgb, var(--on-brand) 12%, transparent); }
.trn-g-btn[aria-pressed="true"] { box-shadow: inset 0 -4px 0 var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.trn-g-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.trn-g-cell { padding: 3px !important; }
.trn-cell { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--r-md); font-weight: 900; font-size: 17px; cursor: pointer; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2); }
.trn-cell:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.trn-cell:disabled { cursor: default; }
.trn-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.trn-cell[data-status="valid"], .trn-pill[data-status="valid"] { background: var(--ok-soft); color: var(--ok-ink); }
.trn-cell[data-status="soon"], .trn-pill[data-status="soon"] { background: var(--warn-soft); color: var(--warn-ink); }
.trn-cell[data-status="expired"], .trn-pill[data-status="expired"] { background: var(--bad-soft); color: var(--bad-ink); }
.trn-cell[data-status="no_date"], .trn-pill[data-status="no_date"] { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.trn-cell[data-status="missing"], .trn-pill[data-status="missing"] { color: var(--muted); }
.trn-cell--legend { min-width: 26px; min-height: 26px; font-size: 14px; cursor: default; }
.trn-g-sum { font-weight: var(--fw-heavy); background: var(--surface-2); font-size: var(--fs-sm); }
.trn-grid tfoot th, .trn-grid tfoot td { position: sticky; bottom: 0; z-index: 1; border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); }
.trn-grid tfoot .trn-g-name { z-index: 2; }

/* بطاقات الجوال: بطاقة لكل موظف بشبكة دوراته */
.trn-cards { display: none; gap: 12px; }
.trn-more { display: flex; justify-content: center; margin-top: 14px; }
.trn-more[hidden] { display: none; }
.trn-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trn-pill { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-weight: var(--fw-heavy); }
.trn-pill:disabled { cursor: default; }
.trn-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.trn-pill[data-status="valid"], .trn-pill[data-status="soon"], .trn-pill[data-status="expired"] { border-color: transparent; }
.trn-pill-glyph { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 15px; font-weight: 900; }
.trn-pill-key { font-size: var(--fs-sm); letter-spacing: 0; }
@container trn-host (max-width: 759px) {
  .trn-gridwrap { display: none; }
  .trn-cards { display: grid; }
  .trn-legend { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
}
@container trn-host (min-width: 560px) and (max-width: 759px) { .trn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* الأوراق */
.trn-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trn-status small { color: var(--muted); font-weight: var(--fw-bold); }
.trn-people { display: grid; gap: 2px; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px; background: var(--surface); }
.trn-person { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 4px 8px; border-radius: var(--r-sm); }
.trn-person:hover { background: var(--hover); }
.trn-person[hidden] { display: none; }
.trn-person-text { display: grid; gap: 0; line-height: 1.35; }
.trn-person-text small { color: var(--muted); font-weight: var(--fw-medium); }
.trn-people-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.trn-people-count { margin-inline-end: auto; color: var(--ink-2); font-weight: var(--fw-bold); }
.trn-course-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.trn-course-row > strong, .trn-course-row > small { grid-column: 1 / -1; }
.trn-course-row > small { color: var(--muted); }
.trn-emp { display: grid; gap: 8px; }
.trn-emp-row { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.trn-emp-row small { flex-basis: 100%; color: var(--muted); font-weight: var(--fw-bold); }
/* @@TRAINING-CSS-END */

/* @@RECRUITMENT-CSS-BEGIN */
/* التوظيف: بادئة rcr- (القائمة من عدّة pkt-، والنماذج من efm-) */
.rcr-prof { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.rcr-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-ink); font-weight: var(--fw-heavy); }
.rcr-rating .shl-icon { width: 15px; height: 15px; fill: currentColor; }
.rcr-go { color: var(--faint); }
.pkt-list .shl-table tbody tr:hover .rcr-go { color: var(--brand); }

/* ورقة المرشح */
.rcr-hero { display: flex; align-items: center; gap: 14px; }
.rcr-hero-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.rcr-hero-prof { font-size: var(--fs-lg); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.rcr-hero-main small { color: var(--muted); font-weight: var(--fw-bold); }
.rcr-sheet .shl-stepper { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
@media (max-width: 759px) {
  /* على الجوال: شريط أفقي من النقاط (النص للمرحلة الحالية فقط) بدل قائمة عمودية من خمسة أسطر */
  .rcr-sheet .shl-stepper { flex-direction: row; align-items: center; gap: 4px; }
  .rcr-sheet .shl-step:not(:last-child)::after { display: block; }
  .rcr-sheet .shl-step:not(.is-current) .shl-step-text { display: none; }
}
.rcr-cv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--ctl-border); border-radius: var(--r-md); background: var(--surface); }
.rcr-cv-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.rcr-cv-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 140px; }
.rcr-cv-main small { color: var(--muted); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.rcr-cv-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rcr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rcr-sub { margin: 4px 0 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); }
.rcr-noteform { display: flex; gap: 8px; flex-wrap: wrap; }
.rcr-noteform .shl-input { flex: 1 1 200px; }
/* @@RECRUITMENT-CSS-END */

/* @@ASSETS-CSS-BEGIN */
/* الأصول والمركبات: بادئة ast- — ترويسة وتبويبات وجداول بيانات عامة وأوراق (كل الألوان من الرموز) */
.ast-panel { margin-top: 20px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.ast-skeletons .shl-skel { min-height: 64px; border-radius: var(--r-card); }

/* مؤشرات الإجماليات: ثلاث بطاقات على الحاسوب، وبطاقة واحدة بثلاثة صفوف على الجوال */
.ast-kpis { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ast-kpis[hidden] { display: none; }
@media (max-width: 759px) {
  .ast-kpis { grid-template-columns: 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
  .ast-kpis .shl-kpi { flex-direction: row; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .ast-kpis .shl-kpi + .shl-kpi { border-top: 1px solid var(--line); }
  .ast-kpis .shl-kpi::before, .ast-kpis .shl-kpi-icon { display: none; }
  .ast-kpis .shl-kpi-value { font-size: var(--fs-xl); }
}

/* التبويبات الأربعة تتسع في 375px: بلا أيقونات وبحشو أضيق */
@media (max-width: 479px) { .ast-tabs { gap: 0; } .ast-tabs .shl-tab { padding-inline: 10px; gap: 4px; } .ast-tabs .shl-tab > .shl-icon { display: none; } }

/* البحث والتصفية */
.ast-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: -2px; }
.ast-search { flex: 0 1 360px; min-width: 240px; }
.ast-catsel .shl-select { width: auto; min-width: 180px; }
.ast-bar .ast-chiprow { flex: 1 1 auto; min-width: 0; }
.ast-chips { display: flex; align-items: center; gap: 8px; padding-block: 4px; overflow-x: auto; scrollbar-width: none; }
.ast-chips::-webkit-scrollbar { display: none; }
.ast-chips .shl-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.ast-count--warn { background: var(--warn-soft); color: var(--warn-ink); }
@media (max-width: 759px) { .ast-search, .ast-catsel, .ast-bar .ast-chiprow { flex: 1 1 100%; } .ast-catsel .shl-select { width: 100%; } }
@media (min-width: 1100px) { .ast-chips { flex-wrap: wrap; overflow: visible; } }
.ast-results { display: grid; gap: 14px; min-width: 0; }

/* الجداول */
.ast-table .shl-table td:first-child { border-inline-start: 3px solid transparent; }
.ast-table tr[data-state="overdue"] td:first-child { border-inline-start-color: var(--bad); }
.ast-table tr[data-state="soon"] td:first-child { border-inline-start-color: var(--warn); }
.ast-table tr[data-state="disposed"] { opacity: .7; }
.ast-name { display: grid; gap: 1px; min-width: 0; }
.ast-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ast-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ast-sub { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ast-code { color: var(--muted); font-weight: var(--fw-bold); }
.ast-asset { font-weight: var(--fw-bold); }
.ast-cat-m { display: none; }
.ast-dash { color: var(--faint); }
.ast-book { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.ast-maint { display: grid; gap: 3px; justify-items: start; }
.ast-cancelled { display: grid; gap: 2px; justify-items: start; }
.ast-table td.ast-act-cell { width: 1%; white-space: nowrap; }
.ast-table td .shl-num { font-variant-numeric: tabular-nums lining-nums; }
.ast-danger { color: var(--bad-ink); }
.ast-danger:hover { background: var(--bad-soft); color: var(--bad-ink); }
@media (max-width: 759px) {
  .ast-cat-m { display: inline; }
  .ast-table tr[data-state="overdue"] { border-inline-start: 4px solid var(--bad); }
  .ast-table tr[data-state="soon"] { border-inline-start: 4px solid var(--warn); }
  .ast-table .shl-table td:first-child { border-inline-start: 0; }
  .ast-table .shl-table tbody td.is-title { border-bottom: 0; padding-bottom: 4px; }
  .ast-table .shl-table tbody td.ast-act-cell { width: auto; display: block; margin-top: 6px; padding: 10px 0 0; border-top: 1px solid var(--line); }
  .ast-table td.ast-act-cell::before { content: none; }
  .ast-book { flex-direction: column; align-items: flex-end; gap: 4px; }
  .ast-maint, .ast-cancelled { justify-items: end; text-align: end; }
  .ast-table td.ast-act-cell .shl-btn { width: 100%; min-height: var(--tap); }
}

/* الإهلاك */
.ast-depbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.ast-monthlabel { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-bold); }
.ast-month { width: auto; min-width: 170px; }
@media (max-width: 759px) { .ast-depbar > .shl-btn { width: 100%; } .ast-monthlabel { width: 100%; } .ast-month { flex: 1; } }
.ast-periods { display: flex; gap: 8px; flex-wrap: wrap; }
.ast-period { display: inline-flex; align-items: center; gap: 6px; }
.ast-period-sep { color: var(--faint); }
.ast-more { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; padding-top: 12px; }
@media (max-width: 759px) { .ast-more .shl-btn { flex: 1 1 100%; } .ast-more .ast-sec-meta { flex: 1 1 100%; text-align: center; } }
.ast-sec { margin-top: 8px; }
.ast-sec .shl-section-title { font-size: var(--fs-lg); }
.ast-sec-meta { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* الأوراق */
.ast-sheet:focus { outline: none; }
.ast-sheet { scroll-padding-block: 84px 150px; }   /* الحقل المركَّز لا يختبئ تحت رأس الورقة ولا ذيلها اللاصق (يظهر خطأ التحقق كاملاً) */
@media (min-width: 900px) {
  .ast-sheet[open] { display: flex; flex-direction: column; }
  .ast-sheet > form { flex: 1 0 auto; display: flex; flex-direction: column; }
  .ast-sheet > form > .shl-sheet-body { flex: 1; align-content: start; }
}
.ast-form .efm-section[hidden] { display: none; }
.ast-stack { display: grid; gap: 12px; }
.ast-stack > .efm-grid:empty { display: none; }
.ast-switch-row { padding-top: 2px; }

/* تفاصيل الأصل */
.ast-detail { gap: 14px; }
.ast-detail-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ast-nums { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ast-num { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-card); background: var(--t-soft, var(--surface-2)); border: 1px solid var(--line); }
.ast-num > small { color: var(--t-ink, var(--muted)); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ast-num > strong { font-size: var(--fs-lg); font-weight: var(--fw-black); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.ast-cur { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
@media (max-width: 599px) { .ast-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ast-note { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
.ast-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ast-actions .shl-btn .shl-icon { width: 17px; height: 17px; }
.ast-empty-line { margin: 0; color: var(--muted); font-weight: var(--fw-medium); }
.ast-file { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ast-plans { display: grid; gap: 8px; }
.ast-plan { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-inline-start: 4px solid var(--ok); border-radius: var(--r-card); background: var(--surface); }
.ast-plan[data-status="overdue"] { border-inline-start-color: var(--bad); }
.ast-plan[data-status="soon"] { border-inline-start-color: var(--warn); }
.ast-plan[data-status="inactive"] { border-inline-start-color: var(--line-strong); opacity: .75; }
.ast-plan-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; }
.ast-plan-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ast-plan-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ast-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 14px 16px; border-radius: var(--r-card); border: 1px dashed color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
.ast-danger-text { display: grid; gap: 2px; }
.ast-danger-text strong { color: var(--bad-ink); font-weight: var(--fw-heavy); }
.ast-danger-text small { color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
/* @@ASSETS-CSS-END */

/* @@TREASURY-CSS-BEGIN */
/* الخزائن والعملات: بادئة trs- (فوق طبقة money-ui المشتركة) */
.trs-month { width: auto; min-width: 150px; }
.trs-in { color: var(--ok-ink); }
.trs-out { color: var(--bad-ink); }
.trs-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.trs-rate {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: var(--tap); padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font: inherit; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.trs-rate:hover { background: var(--brand-soft); border-color: var(--brand-edge); }
.trs-rate:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.trs-rate b { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.trs-rate strong { font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); }
.trs-rate small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.trs-group { margin-top: 26px; }
.trs-group:first-of-type { margin-top: 8px; }
.trs-group-sum { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.trs-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); }
.trs-card .mny-card-body { gap: 12px; }
.trs-balance { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--t-soft, var(--surface-2)); }
.trs-balance small { color: var(--t-ink, var(--muted)); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.trs-balance strong { font-size: clamp(22px, 1.4vw + 14px, 28px); font-weight: var(--fw-black); font-variant-numeric: tabular-nums lining-nums; line-height: 1.2; }
.trs-facts { display: grid; gap: 6px; margin: 0; }
.trs-facts div { display: flex; justify-content: space-between; gap: 10px; }
.trs-facts dt { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.trs-facts dd { margin: 0; font-weight: var(--fw-bold); }
.trs-amounts { display: grid; gap: 2px; font-weight: var(--fw-bold); }
.trs-amounts small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.trs-rateform { display: grid; gap: 14px; }
.trs-ratefields { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trs-rateactions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.trs-rateactions .shl-form-error { flex-basis: 100%; }
.trs-history { margin-top: 28px; }

/* ورقة الحركة: معاينة حيّة وتنبيهاتها (trs-sheets.js) */
.trs-note { margin: 6px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-weight: var(--fw-medium); }
.trs-note--ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-ink); }
.trs-note--warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn-ink); }
.trs-note--bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); }
.trs-kind { margin: 0; color: var(--muted); font-weight: var(--fw-bold); }
.trs-preview { grid-column: 1 / -1; }
.trs-bank { display: contents; }
.trs-bank[hidden] { display: none; }
@media (max-width: 759px) {
  .trs-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1px; padding-bottom: 4px; }
  .trs-rate { flex: none; }
  .trs-card .mny-card-foot .shl-btn { flex: 1; min-height: var(--tap); }
}

/* إجمالي كل عملة */
.trs-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0 0 6px; }
.trs-tile { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.trs-tile-cur { display: flex; align-items: baseline; gap: 8px; }
.trs-tile-cur b { color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.trs-tile-cur small, .trs-tile > small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.trs-tile strong { font-size: 20px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 759px) { .trs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trs-tile strong { font-size: 17px; } }
/* @@TREASURY-CSS-END */

/* @@SUPPLIERS-CSS-BEGIN */
/* الموردون والمشتريات: بادئة sup- (التخطيط العام من led-* وcus-* وbil-alloc) */
.sup-card { cursor: pointer; }
.sup-card:hover { background: var(--surface-2); }
.sup-aging { padding: 14px; display: grid; gap: 12px; margin-bottom: 12px; }
.sup-gap { margin-inline-start: 8px; }
.sup-lines { display: grid; gap: 12px; }
.sup-line { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.sup-line-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sup-line-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.sup-line-sum { display: grid; gap: 2px; align-content: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.sup-line-sum small { color: var(--muted); font-weight: 700; font-size: 12px; }
.sup-line-amount { font-size: 18px; }
.sup-lines-foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 10px; }
.sup-total-box { display: grid; gap: 0; text-align: end; }
.sup-total-box small { color: var(--muted); font-weight: 700; }
.sup-total { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
  .sup-line-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sup-line-wide { grid-column: span 2; }
  .sup-line-centers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sup-row--bill { grid-template-columns: minmax(0, 3.2fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.8fr); }
  .sup-row--payment { grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); }
  .sup-row--aging { grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1fr); }
  .sup-row--line { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 1fr)); }
  .sup-row--statement { grid-template-columns: minmax(0, 3fr) repeat(4, minmax(0, 1fr)); }
  .sup-row--bill .led-name, .sup-row--payment .led-name, .sup-row--aging .led-name, .sup-row--line .led-name, .sup-row--statement .led-name { grid-column: auto; }
  .sup-row--bill [data-label]::before, .sup-row--payment [data-label]::before, .sup-row--aging [data-label]::before, .sup-row--line [data-label]::before, .sup-row--statement [data-label]::before { display: none; }
}
/* @@SUPPLIERS-CSS-END */

/* @@HR-CSS-BEGIN */
/* شؤون العاملين: بادئة hr- (التخطيط العام من led-* وcus-* وأدوات النموذج المشتركة) */
.hr-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.hr-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--brand-strong); }
.hr-gap { margin-inline-start: 8px; }
.hr-chosen:empty { display: none; }
.hr-found { margin-top: 6px; }
.hr-days { margin: 0 0 10px; font-weight: 700; }
.hr-days:empty { display: none; }
.hr-h3 { margin: 16px 0 8px; font-size: 15px; font-weight: 800; }
.hr-file { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.hr-names { display: block; margin-top: 6px; line-height: 1.6; }
.hr-unit { cursor: pointer; }
.hr-unit:hover { background: var(--surface-2); }
.hr-occ { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; }
.hr-occ-bar { position: relative; flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.hr-occ-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; background: var(--brand-fill); border-radius: inherit; width: 0; }
.hr-occ-bar i[data-fill="1"] { width: 10%; } .hr-occ-bar i[data-fill="2"] { width: 20%; } .hr-occ-bar i[data-fill="3"] { width: 30%; } .hr-occ-bar i[data-fill="4"] { width: 40%; }
.hr-occ-bar i[data-fill="5"] { width: 50%; } .hr-occ-bar i[data-fill="6"] { width: 60%; } .hr-occ-bar i[data-fill="7"] { width: 70%; } .hr-occ-bar i[data-fill="8"] { width: 80%; }
.hr-occ-bar i[data-fill="9"] { width: 90%; } .hr-occ-bar i[data-fill="10"] { width: 100%; }
.hr-type-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hr-days-input { width: 100px; text-align: center; }
.hr-items { display: grid; gap: 8px; margin-bottom: 14px; }
.hr-item { display: grid; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.hr-item[data-status="done"] { border-color: var(--ok); }
.hr-item[data-status="waived"] { opacity: .75; }
.hr-item-main { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.hr-item-main > div { min-width: 0; overflow-wrap: anywhere; }
.hr-item-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.hr-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hr-blockers { color: var(--warn-ink); }
@media (min-width: 900px) {
  .hr-row--contract { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.8fr); }
  .hr-row--leave { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.6fr); }
  .hr-row--discipline { grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.6fr); }
  .hr-row--clearance { grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); }
  .hr-row--stay { grid-template-columns: minmax(0, 1fr) auto; }
  .hr-row--simple { grid-template-columns: minmax(0, 1fr) auto; }
  .hr-row--contract .led-name, .hr-row--leave .led-name, .hr-row--discipline .led-name, .hr-row--clearance .led-name, .hr-row--stay .led-name, .hr-row--simple .led-name { grid-column: auto; }
  .hr-row--contract [data-label]::before, .hr-row--leave [data-label]::before, .hr-row--discipline [data-label]::before, .hr-row--clearance [data-label]::before { display: none; }
  .hr-item { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
}
.hr-emp { display: grid; gap: 8px; margin-top: 6px; }
.hr-emp-row { display: grid; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.hr-emp-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; min-width: 0; }
.hr-emp-body small { color: var(--muted); font-weight: 600; }
@media (min-width: 700px) { .hr-emp-row { grid-template-columns: 130px minmax(0, 1fr); align-items: center; } }
/* @@HR-CSS-END */

/* @@FISCAL-CSS-BEGIN */
/* السنة المالية: بادئة fy- (التخطيط العام من led-* وcus-*) */
.fy-card { cursor: pointer; }
.fy-card:hover { background: var(--surface-2); }
.fy-card--open { border-color: var(--warn); }
.fy-card--closed { border-color: var(--ok); }
.fy-loss { color: var(--bad-ink); }
.fy-pending { color: var(--warn-ink); font-weight: 700; }
.fy-checks { display: grid; gap: 8px; margin-bottom: 12px; }
.fy-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.fy-check--ok { border-color: var(--ok); }
.fy-check--bad { border-color: var(--bad); background: var(--bad-soft); }
.fy-check-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; background: var(--ok-soft); color: var(--ok-ink); }
.fy-check--bad .fy-check-mark { background: var(--bad-soft); color: var(--bad-ink); border: 1px solid var(--bad); }
.fy-history { display: grid; gap: 4px; }
.fy-history p { margin: 0; }
@media (min-width: 900px) {
  .fy-row--eq { grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr)); }
  .fy-row--eq .led-name { grid-column: auto; }
  .fy-row--eq [data-label]::before { display: none; }
}
.fy-row { grid-template-columns: minmax(0, 1fr) auto; }
.fy-row .led-name { grid-column: auto; }

/* توزيع الأرباح والاحتياطي القانوني */
.fy-dist { display: grid; gap: 12px; margin-bottom: 12px; }
.fy-dist-stats { margin-bottom: 8px; }
.fy-sub-h { margin: 12px 0 6px; font-weight: 800; color: var(--muted); }
.fy-preview { margin-bottom: 12px; }
.fy-prev { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.fy-prev-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.fy-prev-row span { color: var(--muted); font-weight: 600; }
.fy-prev-problems { margin: 8px 0 0; padding: 8px 12px; padding-inline-start: 28px; border: 1px solid var(--bad); border-radius: var(--r-card); background: var(--bad-soft); color: var(--bad-ink); font-weight: 600; }
@media (min-width: 900px) {
  .fy-row--dist { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .fy-row--dist .led-name { grid-column: auto; }
  .fy-row--dist [data-label]::before { display: none; }
  .fy-row--partner { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .fy-row--partner .led-name { grid-column: auto; }
  .fy-row--partner [data-label]::before { display: none; }
}
.fy-dist-stats .cus-stat > bdi { justify-self: start; }
/* @@FISCAL-CSS-END */

/* @@REQUISITIONS-CSS-BEGIN */
/* الطلبات الداخلية: بادئة req- — ترويسة وتصفية وجدول بيانات عام وأوراق (كل الألوان من الرموز) */
.req-skeletons .shl-skel { min-height: 64px; border-radius: var(--r-card); }

/* البحث والتصفية */
.req-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.req-search { flex: 1 1 260px; max-width: 420px; min-width: 220px; }
.req-bar .shl-select { width: auto; min-width: 160px; }
.req-mine { display: inline-flex; align-items: center; gap: 6px; }
.req-mine .shl-icon { width: 16px; height: 16px; }
.req-chips { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-block: 4px; overflow-x: auto; scrollbar-width: none; }
.req-chips::-webkit-scrollbar { display: none; }
.req-chips .shl-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.req-count--warn { background: var(--warn-soft); color: var(--warn-ink); }
@media (max-width: 759px) { .req-search { flex: 1 1 100%; max-width: none; } .req-bar .shl-select { flex: 1 1 140px; } }
@media (min-width: 1100px) { .req-chips { flex-wrap: wrap; overflow: visible; } }

/* الجدول */
.req-table .shl-table td:first-child { border-inline-start: 3px solid transparent; }
.req-table tr[data-status="submitted"] td:first-child, .req-table tr[data-status="site_approved"] td:first-child { border-inline-start-color: var(--warn); }
.req-table tr[data-status="approved"] td:first-child { border-inline-start-color: var(--brand); }
.req-table tr[data-status="fulfilled"] td:first-child { border-inline-start-color: var(--ok); }
.req-table tr[data-status="rejected"] td:first-child { border-inline-start-color: var(--bad); }
.req-table tr[data-status="cancelled"] { opacity: .7; }
.req-name { display: grid; gap: 1px; min-width: 0; }
.req-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.req-sub { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.req-no { font-weight: var(--fw-bold); }
.req-meta-m { display: none; }
@media (max-width: 759px) {
  .req-table tr[data-status="submitted"], .req-table tr[data-status="site_approved"] { border-inline-start: 4px solid var(--warn); }
  .req-table tr[data-status="approved"] { border-inline-start: 4px solid var(--brand); }
  .req-table tr[data-status="fulfilled"] { border-inline-start: 4px solid var(--ok); }
  .req-table tr[data-status="rejected"] { border-inline-start: 4px solid var(--bad); }
  .req-table .shl-table td:first-child { border-inline-start: 0; }
  .req-table .shl-table tbody td.is-title { border-bottom: 0; padding-bottom: 4px; }
  .req-meta-m { display: block; }
}

/* منتقي النوع */
.req-menu { display: grid; gap: 6px; padding: 10px 12px 16px; }
.req-menu-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-1);
}
.req-menu-row:hover, .req-menu-row:focus-visible { background: var(--hover); border-color: var(--brand-edge); }
.req-menu-row:active { transform: scale(.985); }
.req-menu-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.req-menu-icon .shl-icon { width: 21px; height: 21px; }
.req-menu-text { display: grid; gap: 1px; min-width: 0; }
.req-menu-text strong { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.req-menu-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
@media (min-width: 760px) {
  .shl-pop.shl-pop--req-menu { inset: 0; margin: auto; height: fit-content; width: min(420px, calc(100vw - 32px)); max-height: min(80dvh, 620px); border-radius: var(--r-xl); }
  .shl-pop.shl-pop--req-menu[open] { animation-name: shl-confirm-in; transform-origin: center; }
}

/* الأوراق */
.req-sheet:focus { outline: none; }
.req-sheet { scroll-padding-block: 84px 150px; }   /* الحقل المركَّز لا يختبئ تحت رأس الورقة ولا ذيلها اللاصق (يظهر خطأ التحقق كاملاً) */
@media (min-width: 900px) {
  .req-sheet[open] { display: flex; flex-direction: column; }
  .req-sheet > form { flex: 1 0 auto; display: flex; flex-direction: column; }
  .req-sheet > form > .shl-sheet-body { flex: 1; align-content: start; }
}
.req-sub { margin: 0; }
.req-items { display: grid; gap: 12px; }
h3.req-sub { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--ink); }
h3.req-sub .shl-icon { width: 18px; height: 18px; color: var(--brand); }
.req-presets { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.req-presets small { color: var(--muted); font-weight: var(--fw-bold); }
.req-lines { display: grid; gap: 12px; }
.req-line { display: grid; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.req-line-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.req-line-no { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.req-line-del { color: var(--bad-ink); }
.req-line-del:hover { background: var(--bad-soft); color: var(--bad-ink); }
.req-line-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.req-fld--wide { grid-column: 1 / -1; }
.req-add { display: flex; }
.req-line-errors { margin: 0; padding-inline-start: 18px; color: var(--bad-ink); font-weight: var(--fw-bold); }
.req-line-errors:empty { display: none; }
.req-form .efm-date .shl-input { min-width: 0; }

/* التفاصيل */
.req-detail { gap: 14px; }
.req-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.req-detail-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 599px) { .req-actions .shl-btn { flex: 1 1 calc(50% - 4px); min-height: var(--tap); } .req-actions .shl-btn--primary { flex-basis: 100%; } }
.req-sec { margin-top: 8px; }
.req-sec .shl-section-title { font-size: var(--fs-lg); }
.req-lines-table .shl-table { font-size: var(--fs-sm); }
.req-lines-table .shl-table tbody td { height: 44px; padding-block: 6px; }
.req-lines-table .shl-table-wrap { box-shadow: none; }

/* التنفيذ */
.req-fulfill { display: grid; gap: 12px; }
.req-fulfill-row { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.req-fulfill-name { display: grid; gap: 1px; }
.req-fulfill-name strong { font-weight: var(--fw-heavy); }
.req-fulfill-name small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.req-fulfill-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* @@REQUISITIONS-CSS-END */

/* @@ADMIN-CSS-BEGIN */
/* الإدارة: ورقة تعديل الحساب وأدوات النموذج المشتركة مع مركز «الفريق والصلاحيات» (بادئة adm-).
   شاشتا المستخدمين والأدوار القديمتان صارتا في tools/team (بادئة tmh-)؛ بقي هنا ما تستعمله الأوراق فقط. */
.adm-sheet { padding-bottom: 0; }
@media (min-width: 900px) { .adm-sheet { width: min(100%, 640px); } }
.adm-form { display: block; }
.adm-section { display: grid; gap: 12px; padding: 14px 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.adm-section + .adm-section { margin-top: 14px; }
.adm-section-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px 14px; }
.adm-grid .shl-field--wide { grid-column: 1 / -1; }
.adm-form :is(.shl-input, .shl-select) { scroll-margin-block: 84px; }
.adm-pwd-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.adm-pwd-row .shl-input { flex: 1; min-width: 160px; }
.adm-password { letter-spacing: .4px; }
.adm-scope { display: grid; gap: 10px; }
.adm-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 4px 12px; }
/* @@ADMIN-CSS-END */

/* @@SETTINGS-CSS-BEGIN */
/* الإعدادات (بادئة stg-): انتقلت واجهتها إلى «ثوابت المنظومة» (tools/constants، بادئة cst-)؛ بقي tools/settings/js/stg.js منطقاً صرفاً بلا أنماط. */
/* @@SETTINGS-CSS-END */

/* @@PALETTE-CSS-BEGIN */
/* ===== لوحة الأوامر والبحث الشامل (بادئة pal-) — «دفتر الربّان»: ورقة عاجية بخط ذهبي شعري، نافذة وسطية على الحاسوب وشاشة كاملة على الجوال ===== */

dialog.pal {
  margin: 8dvh auto auto; padding: 0; width: min(760px, calc(100vw - 32px)); max-width: none; max-height: min(80dvh, 740px);
  color: var(--ink); background: var(--surface-pop); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sheet); overflow: hidden;
}
dialog.pal[open] { display: flex; flex-direction: column; animation: pal-in var(--dur-3) var(--ease-out) backwards; }
dialog.pal::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@keyframes pal-in { from { transform: translateY(-12px) scale(.975); opacity: 0; } }

/* ---------- الرأس: حقل البحث ---------- */
.pal-head {
  position: relative; display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 12px 10px 10px;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, var(--surface-pop)), var(--surface-pop));
}
.pal-head::after { content: ""; position: absolute; inset-inline-start: 20px; bottom: -1px; width: 46px; height: 3px; border-radius: 3px; background: var(--gold); }
.pal-head::before {   /* خط تقدّم رفيع أثناء الجلب */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; opacity: 0; transition: opacity var(--dur-2);
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 38% 100%;
}
dialog.pal.is-busy .pal-head::before { opacity: 1; animation: pal-sweep 1.05s linear infinite; }
@keyframes pal-sweep { from { background-position: 135% 0; } to { background-position: -35% 0; } }
.pal-head-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); }
.pal-head-icon .shl-icon { width: 20px; height: 20px; }
.pal-head:focus-within .pal-head-icon { background: var(--brand-fill); color: var(--on-brand); }   /* مؤشر تركيز الحقل */
.pal-head-icon { transition: background-color var(--dur-2), color var(--dur-2); }
.pal-mode { flex: none; padding: 3px 11px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-ink); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.pal-input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0; border: 0; outline: none; background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-xl); font-weight: var(--fw-bold); text-align: start;
}
.pal-input::placeholder { color: var(--faint); font-weight: var(--fw-medium); font-size: var(--fs-lg); }
.pal-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--brand); animation: pal-spin .7s linear infinite; }
@keyframes pal-spin { to { transform: rotate(360deg); } }
.pal-clear {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--ink-2);
  cursor: pointer; transition: background-color var(--dur-2);
}
.pal-clear:hover { background: var(--hover); }
.pal-clear .shl-icon { width: 15px; height: 15px; }
.pal-close { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: var(--fw-bold); cursor: pointer; }
.pal-close-text { display: none; }

/* ---------- المرشّحات ---------- */
.pal-chips { display: flex; gap: 8px; flex: none; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pal-chips::-webkit-scrollbar { display: none; }
.pal-chips { -webkit-mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); padding-inline-end: 28px; }
.pal-chips[hidden] { display: none; }
.pal-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; flex: none; }
.pal-chip[aria-pressed="true"] { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
.pal-chip-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.pal-chip[aria-pressed="true"] .pal-chip-count { background: color-mix(in srgb, var(--on-brand) 22%, transparent); color: var(--on-brand); }

/* ---------- الجسم: الأقسام والصفوف ---------- */
.pal-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px; }
.pal-body.is-empty { min-height: 0; }
.pal-list { display: grid; padding: 4px 8px 6px; transition: opacity var(--dur-2); }
.pal-list:empty { display: none; }
.pal-list.is-stale { opacity: .55; }
.pal-sec { display: grid; gap: 2px; padding-top: 6px; }
.pal-sec-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; }
.pal-sec-title { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.pal-sec-title::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--gold); }
.pal-sec-clear { margin-inline-start: auto; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.pal-sec-clear:hover { background: var(--hover); color: var(--ink); }

.pal-row {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 10px; border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1);
}
.pal-row[aria-selected="true"] { background: var(--select); }
.pal-row::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 13px; width: 3px; border-radius: 3px; background: var(--gold); opacity: 0; transition: opacity var(--dur-1); }
.pal-row[aria-selected="true"]::before { opacity: 1; }
.pal-row:focus-visible { outline: none; }
.pal-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.pal-tile .shl-icon { width: 20px; height: 20px; }
.pal-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.45; }
.pal-sub, .pal-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.5; }
.pal-note { color: var(--ink-2); font-size: var(--fs-xs); }
.pal-hit { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; }
.pal-end { display: flex; align-items: center; gap: 8px; flex: none; }
.pal-go { display: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); color: var(--muted); }
.pal-go .shl-icon { width: 14px; height: 14px; }
@media (hover: hover) and (min-width: 760px) { .pal-row[aria-selected="true"] .pal-go { display: grid; } }
.pal-tag { padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); white-space: nowrap; }
.pal-tag--gold { background: var(--gold-soft); color: var(--gold-ink); }
.pal-year { padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--muted); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); white-space: nowrap; }
.pal-year[data-past="1"] { border-color: transparent; background: var(--warn-soft); color: var(--warn-ink); }

/* «عرض كل النتائج»: صف أهدأ */
.pal-row[data-kind="more"] { min-height: 46px; }
.pal-row[data-kind="more"] .pal-tile { width: 32px; height: 32px; border-radius: 10px; background: transparent; color: var(--brand); }
.pal-row[data-kind="more"] .pal-title { color: var(--brand); font-size: var(--fs-md); }

/* الحاسبة: النتيجة كبيرة بإطار ذهبي شعري */
.pal-row[data-kind="calc"] { min-height: 68px; margin-block: 2px; border: 1px solid var(--gold-edge); background: color-mix(in srgb, var(--gold) 9%, var(--surface-pop)); }
.pal-row[data-kind="calc"][aria-selected="true"] { background: color-mix(in srgb, var(--gold) 17%, var(--surface-pop)); }
.pal-act { color: var(--gold-ink); font-size: var(--fs-xs); font-weight: var(--fw-heavy); white-space: nowrap; }
.pal-title--calc { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: 1.2; letter-spacing: 0; }
.pal-row[data-kind="calc"] .pal-sub { direction: ltr; text-align: end; }
.pal-row[data-kind="insert"] .pal-title { font-size: var(--fs-md); }

/* ---------- الحالات والأمثلة ---------- */
.pal-status:empty { display: none; }
.pal-status .shl-state { padding: 30px 16px; }
.pal-skeletons { padding: 14px 18px; }
.pal-skeletons .shl-skel { height: 44px; border-radius: var(--r-md); }
.pal-tips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 16px; }
.pal-tips-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.pal-tip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 1px dashed var(--ctl-border); border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.pal-tip .shl-icon { width: 15px; height: 15px; color: var(--gold-ink); }
.pal-tip:hover { background: var(--hover); border-style: solid; }

/* ---------- التذييل: اختصارات ---------- */
.pal-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: none; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.pal-hint { display: inline-flex; align-items: center; gap: 7px; }
.pal-hint[hidden] { display: none; }
.pal-foot.is-idle .pal-hint--nav { display: none; }

/* ---------- اللمس: أهداف ≥ 44px ---------- */
@media (pointer: coarse) {
  .pal-chip, .pal-tip, .pal-sec-clear { min-height: var(--tap); }
  .pal-clear { width: var(--tap); height: var(--tap); }
}

/* ---------- الجوال: شاشة كاملة ---------- */
@media (max-width: 759px) {
  dialog.pal { inset: 0; margin: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  dialog.pal[open] { animation-name: pal-in-mobile; }
  .pal-head { padding: calc(8px + env(safe-area-inset-top)) 10px 8px 6px; }
  .pal-close-text { display: grid; place-items: center; min-height: var(--tap); padding: 0 10px; color: var(--brand); }
  .pal-close-kbd { display: none; }
  .pal-foot { display: none; }
  .pal-body { padding-bottom: env(safe-area-inset-bottom); }
  /* الصف على الجوال: الشارات تحت النص لا بجانبه (فلا يُقصّ المرجع)، والعنوان والبيان بسطرين */
  .pal-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 60px; padding-block: 8px; }
  .pal-tile { grid-row: span 2; align-self: start; }
  .pal-row:not(:has(.pal-end)) .pal-tile { align-self: center; }
  .pal-end { grid-column: 2; flex-wrap: wrap; margin-top: 6px; }
  .pal-go { display: none; }
  .pal-title, .pal-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .pal-title--calc { font-size: var(--fs-2xl); }
}
@keyframes pal-in-mobile { from { transform: translateY(18px); opacity: 0; } }

/* ---------- هبوط الرابط العميق: وميض ذهبي للعنصر الذي جاء منه الرابط (palLand) ---------- */
.pal-landed { animation: pal-land 2.4s var(--ease-out); }
@keyframes pal-land {
  0%, 55% { box-shadow: 0 0 0 3px var(--gold-edge), 0 0 0 10px color-mix(in srgb, var(--gold) 16%, transparent); background-color: var(--gold-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- منتقي الأمين/الصنف (ورقة) ---------- */
.pal-pick .shl-sheet-body { gap: 14px; }
.pal-pick-list { min-height: 120px; }
/* @@PALETTE-CSS-END */

/* @@NOTIFICATIONS-CSS-BEGIN */
/* ===== مركز الإشعارات (بادئة ntf): الجرس المنسدل والصفحة الكاملة وورقة التفضيلات =====
   الهوية «دفتر الربّان»: بطاقات ورقية بحدود شعرية، شريط خطورة على حافة غير المقروء، بلاطة نوع بنبرة المجموعة وشارة خطورة بالشكل،
   وفواصل أيام بخط ذهبي. كل لون من الرموز؛ الحركة تتعطل مع reduced-motion من tokens.css. */

/* ---------- البطاقة ---------- */
.ntf-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: background-color var(--dur-2), border-color var(--dur-2), opacity var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2);
}
.ntf-card.is-link, .ntf-card.is-selecting { cursor: pointer; }
.ntf-card:hover { background: var(--hover); }
.ntf-card.is-unread { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.ntf-card.is-unread:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
/* شريط الخطورة على الحافة: لغير المقروء فقط، والشكل يُقرأ أيضاً من شارة الزاوية ونص الشارة */
.ntf-card.is-unread::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); opacity: .55; }
.ntf-card[data-severity="bad"].is-unread::before { background: var(--bad); opacity: 1; }
.ntf-card[data-severity="warn"].is-unread::before { background: var(--warn); opacity: 1; }
.ntf-card[data-severity="ok"].is-unread::before { background: var(--ok); opacity: .8; }
.ntf-card.is-active { background: var(--select); }
.ntf-card.is-leaving { opacity: 0; transform: translateX(-18px) scale(.98); pointer-events: none; }
.ntf-card[aria-selected="true"] { background: var(--select); border-color: var(--brand-edge); }

.ntf-tile {
  position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand));
}
.ntf-tile > .shl-icon { width: 20px; height: 20px; }
.ntf-card.is-read .ntf-tile { opacity: .72; }
.ntf-sev {
  position: absolute; inset-block-end: -5px; inset-inline-end: -5px; display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--surface);
}
.ntf-sev .shl-icon { width: 15px; height: 15px; }
.ntf-sev--bad { color: var(--bad); }
.ntf-sev--warn { color: var(--warn); }
.ntf-sev--info { color: var(--brand); }
.ntf-sev--ok { color: var(--ok); }

.ntf-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ntf-title-row { display: block; }
.ntf-title { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ntf-card.is-unread .ntf-title { font-weight: var(--fw-black); }
.ntf-card.is-read .ntf-title { color: var(--ink-2); }
.ntf-dot { display: inline-block; width: 9px; height: 9px; margin-inline-end: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); vertical-align: .08em; }
.ntf-body { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ntf-card.is-read .ntf-body { color: var(--muted); }
.ntf-view--pop .ntf-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

.ntf-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; min-height: 22px; margin-top: 4px; }
.ntf-meta-info { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ntf-meta-info .shl-badge { font-size: var(--fs-2xs); padding: 1px 8px; }
.ntf-kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ntf-view--pop .ntf-kind { display: none; }
.ntf-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ntf-stack { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-ink); font-weight: var(--fw-heavy); }
.ntf-stack .shl-icon { width: 12px; height: 12px; }

.ntf-acts { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.ntf-act {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--muted); cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.ntf-act .shl-icon { width: 17px; height: 17px; }
.ntf-act:hover { background: var(--surface-3); color: var(--ink); }
.ntf-act:active { transform: scale(.9); }
.ntf-act--open:hover { background: var(--brand-soft); color: var(--brand); }
.ntf-act--dismiss:hover { background: var(--bad-soft); color: var(--bad-ink); }
/* اللمس: الإجراءان الثانويان (مقروء، إخفاء) في صف التفاصيل بحجم لمس مريح، والنقر على البطاقة يفتحها */
@media (hover: none), (pointer: coarse) {
  .ntf-act { width: 40px; height: 40px; }
  .ntf-act--open { display: none; }
  .ntf-meta { min-height: 40px; }
}
/* الفأرة: شريط الإجراءات يطفو فوق ركن البطاقة عند التحويم أو التركيز فلا يحجز صفاً ولا يقفز التخطيط */
@media (hover: hover) and (pointer: fine) {
  .ntf-meta { min-height: 32px; }
  .ntf-act { width: 28px; height: 28px; }
  .ntf-act .shl-icon { width: 16px; height: 16px; }
  .ntf-acts {
    position: absolute; inset-block-end: 6px; inset-inline-end: 10px; padding: 2px; border-radius: var(--r-ctl); background: var(--surface-pop);
    box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-xs); opacity: 0; transform: translateY(3px); pointer-events: none;
    transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
  }
  .ntf-card:hover .ntf-acts, .ntf-card:focus-within .ntf-acts, .ntf-card.is-active .ntf-acts { opacity: 1; transform: none; pointer-events: auto; }
}

.ntf-pick {
  display: grid; place-items: center; flex: none; align-self: center; width: 22px; height: 22px; border: 2px solid var(--ctl-border); border-radius: 7px;
  background: var(--surface); color: transparent; transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.ntf-pick .shl-icon { width: 14px; height: 14px; }
.ntf-pick.is-on { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }

/* ---------- حركة الدخول ---------- */
@keyframes ntf-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes ntf-flash { from { background-color: var(--gold-soft); } }
@keyframes ntf-rise { from { opacity: 0; transform: translateY(10px); } }
.ntf-card.is-new { animation: ntf-in var(--dur-3) var(--ease-out), ntf-flash 1.8s ease-out; }
.ntf-view.is-fresh .ntf-day-list > .ntf-card { animation: ntf-rise var(--dur-3) var(--ease-out) backwards; }
.ntf-view.is-fresh .ntf-day-list > .ntf-card:nth-child(2) { animation-delay: 40ms; }
.ntf-view.is-fresh .ntf-day-list > .ntf-card:nth-child(3) { animation-delay: 80ms; }
.ntf-view.is-fresh .ntf-day-list > .ntf-card:nth-child(4) { animation-delay: 120ms; }
.ntf-view.is-fresh .ntf-day-list > .ntf-card:nth-child(5) { animation-delay: 160ms; }
.ntf-view.is-fresh .ntf-day-list > .ntf-card:nth-child(n+6) { animation-delay: 200ms; }
@keyframes ntf-ring {
  0%, 100% { transform: rotate(0); } 12% { transform: rotate(15deg); } 24% { transform: rotate(-13deg); } 36% { transform: rotate(10deg); }
  48% { transform: rotate(-7deg); } 60% { transform: rotate(4deg); } 72% { transform: rotate(-2deg); }
}
.ntf-ring { transform-origin: 50% 12%; animation: ntf-ring 1.3s var(--ease-out); }

/* ---------- العارض: القائمة والأيام وحالاتها ---------- */
.ntf-view { position: relative; display: block; min-width: 0; }
.ntf-list { outline: none; }
.ntf-list:focus-visible { outline: none; }
.ntf-list:focus-visible .ntf-card.is-active { outline: 3px solid var(--focus); outline-offset: -3px; }
.ntf-day { display: block; }
.ntf-day-title {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 8px;
  color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-black);
  background: color-mix(in srgb, var(--surface-pop) 90%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ntf-day-title::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--gold); }
.ntf-day-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ntf-day-list { display: grid; gap: 8px; }
.ntf-status[hidden], .ntf-newbar[hidden], .ntf-bulk[hidden], .ntf-pref[hidden], .ntf-pref-group[hidden], .ntf-rail-count[hidden] { display: none; }
.ntf-status { display: block; }

.ntf-newbar { position: sticky; top: 8px; z-index: 4; display: flex; justify-content: center; height: 0; overflow: visible; pointer-events: none; }
.ntf-newbar > .shl-btn { pointer-events: auto; box-shadow: var(--shadow-pop); animation: ntf-in var(--dur-3) var(--ease-spring); }

.ntf-more { display: block; }
.ntf-more-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ntf-spinner { width: 16px; height: 16px; border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: shl-spin 700ms linear infinite; }
.ntf-sentinel { height: 1px; }

.ntf-skeletons { display: grid; gap: 8px; padding: 6px 10px 10px; }
.ntf-skel-card { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ntf-skel-tile { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); }
.ntf-skel-lines { display: grid; gap: 9px; flex: 1; align-content: center; }
.ntf-skel-line { height: 11px; min-height: 0; }
.ntf-skel-line--title { width: 62%; height: 13px; }
.ntf-skel-line--short { width: 36%; }
.ntf-skel-chip { display: inline-block; width: 96px; height: 28px; min-height: 0; border-radius: var(--r-pill); }

/* ---------- التبويبات (عدّادات غير المقروء بلون العلامة) ---------- */
.ntf-tabs .shl-count, .ntf-tabs .shl-tab[aria-selected="true"] .shl-count { background: var(--brand-fill); color: var(--on-brand); }

/* ---------- لوحة الجرس ---------- */
.shl-pop.ntf-pop { overflow: hidden; padding-bottom: 0; }
.shl-pop.ntf-pop[open] { display: flex; flex-direction: column; height: min(88dvh, 720px); }
.ntf-pop .shl-pop-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-width: 760px) {
  .shl-pop.ntf-pop { width: min(448px, calc(100vw - 32px)); }
  .shl-pop.ntf-pop[open] { height: min(680px, calc(100dvh - var(--topbar-h) - 20px)); }
}
.ntf-head { position: relative; flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px 8px; padding-inline-start: 16px; border-bottom: 1px solid var(--line); background: var(--surface-pop); }
.ntf-head::after { content: ""; position: absolute; inset-inline-start: 16px; bottom: -1px; width: 44px; height: 3px; border-radius: 3px; background: var(--gold); }
.ntf-head-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--gold-soft); color: var(--gold-ink); }
.ntf-head-tile .shl-icon { width: 21px; height: 21px; }
.ntf-head-titles { display: grid; gap: 1px; flex: 1; min-width: 0; margin-inline-start: 4px; }
.ntf-head-titles h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.ntf-head-sub { margin: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ntf-head-sub[data-unread="1"] { color: var(--brand); font-weight: var(--fw-heavy); }
.ntf-head-btn[disabled] { opacity: .4; }
.ntf-slot { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ntf-pop .ntf-tabs { flex: none; padding-inline: 8px; background: var(--surface-pop); }
.ntf-pop .ntf-tabs .shl-tab { min-height: 44px; padding-inline: 12px; font-size: var(--fs-sm); }
.ntf-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.ntf-view--pop .ntf-day-list { padding: 0 10px 8px; }
.ntf-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface-pop);
}
.ntf-all { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--brand); font-weight: var(--fw-heavy); text-decoration: none; }
.ntf-all .shl-icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.ntf-all:hover .shl-icon { transform: translateX(-3px); }

/* ---------- الصفحة الكاملة ---------- */
.ntf-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ntf-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.ntf-chip.is-unread { background: var(--brand-soft); color: var(--brand); }
.ntf-layout { display: grid; gap: 14px; align-items: start; }
.ntf-aside { display: none; }
.ntf-main-col { display: grid; gap: 12px; min-width: 0; }
.ntf-main-col .shl-toolbar { margin: 0; }
.ntf-spacer { flex: 1; }
.ntf-panel { min-height: 220px; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.ntf-view--page .ntf-day-list { gap: 0; }
.ntf-view--page .ntf-card { padding: 14px 18px; border-width: 0 0 1px; border-radius: 0; background: transparent; }
.ntf-view--page .ntf-card.is-unread { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.ntf-view--page .ntf-card:hover { background: var(--hover); }
.ntf-view--page .ntf-card.is-active, .ntf-view--page .ntf-card[aria-selected="true"] { background: var(--select); }
.ntf-view--page .ntf-card.is-unread::before { inset-block: 0; border-radius: 0; }
.ntf-view--page .ntf-day-list > .ntf-card:last-child { border-bottom-width: 0; }
.ntf-view--page .ntf-day-title { top: var(--topbar-h); padding-inline: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); }
.ntf-view--page .ntf-newbar { top: calc(var(--topbar-h) + 10px); }
@media (max-width: 759px) { .ntf-view--page .ntf-day-title { top: 0; } .ntf-view--page .ntf-newbar { top: 10px; } }
.ntf-view--page .ntf-skeletons { padding: 14px; }

.ntf-bulk {
  position: sticky; bottom: calc(var(--bottomnav-h) + 14px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: grid; gap: 8px;
  margin-top: 16px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface-pop); box-shadow: var(--shadow-pop);
  animation: ntf-in var(--dur-3) var(--ease-out);
}
.ntf-bulk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ntf-bulk-count { padding-inline-start: 4px; font-size: var(--fs-md); font-weight: var(--fw-black); }
.ntf-bulk-quiet { display: flex; gap: 2px; }
.ntf-bulk-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 760px) {
  .ntf-bulk { bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
  .ntf-bulk-head { gap: 16px; }
  .ntf-bulk-actions { display: flex; }
}

/* شريط المجموعات الجانبي (الشاشات العريضة) */
.ntf-rail { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.ntf-rail-item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--ink-2); font: inherit; font-weight: var(--fw-bold); text-align: start; cursor: pointer; transition: background-color var(--dur-2), color var(--dur-2);
}
.ntf-rail-item:hover { background: var(--hover); }
.ntf-rail-item[aria-pressed="true"] { background: var(--select); color: var(--ink); font-weight: var(--fw-heavy); }
.ntf-rail-item[aria-pressed="true"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.ntf-rail-tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.ntf-rail-tile .shl-icon { width: 17px; height: 17px; }
.ntf-rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-rail-count { display: grid; place-items: center; min-width: 24px; height: 21px; padding: 0 7px; border-radius: 11px; background: var(--brand-fill); color: var(--on-brand); font-size: 11px; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.ntf-hints { padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
.ntf-hints-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.ntf-hints-title .shl-icon { width: 16px; height: 16px; }
.ntf-hints-list { display: grid; gap: 8px; margin: 0; }
.ntf-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ntf-hint-row dt { flex: none; }
.ntf-hint-row dd { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: end; }
@media (min-width: 1100px) {
  .ntf-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 28px; }
  .ntf-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 16px); }
  .ntf-main-col > .ntf-tabs { display: none; }
}
@media (max-width: 480px) {
  .ntf-view--page .ntf-card { padding: 12px 14px; }
  .ntf-panel { border-inline: 0; border-radius: var(--r-card); }
}

/* ---------- ورقة التفضيلات ---------- */
.ntf-prefs-body { gap: 14px; }
.ntf-pref-device, .ntf-pref { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ntf-pref-device { background: var(--surface-2); }
.ntf-pref.is-locked { background: var(--surface-2); }
.ntf-pref-group { display: grid; gap: 8px; }
.ntf-pref-head { display: flex; align-items: center; gap: 10px; padding-block: 4px; }
.ntf-pref-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.ntf-pref-count { flex: 1; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ntf-pref-list { display: grid; gap: 6px; }
.ntf-pref-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.ntf-pref-tile .shl-icon { width: 18px; height: 18px; }
.ntf-pref-head .ntf-pref-tile { width: 30px; height: 30px; border-radius: 9px; }
.ntf-pref-head .ntf-pref-tile .shl-icon { width: 16px; height: 16px; }
.ntf-pref-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ntf-pref-text strong { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-snug); }
.ntf-pref-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ntf-pref-lock { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 9px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-ink); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); }
.ntf-pref-lock .shl-icon { width: 12px; height: 12px; }
.ntf-pref .shl-switch, .ntf-pref-device .shl-switch { flex: none; }
.ntf-prefs { display: contents; }
/* @@NOTIFICATIONS-CSS-END */

/* @@TASKS-CSS-BEGIN */
/* ===== المهام (بادئة tsk) — «دفتر الربّان»: ورق عاجي بخطوط شعرية، شريط أولوية على حافة الصف، دائرة إنجاز بنبضة، وفترات كتبويبات دفتر =====
   كل لون من الرموز (tokens.css) فيعمل فاتحاً وداكناً؛ الحركة تتعطل مع reduced-motion من tokens.css؛ الجوال أولاً (375px) ثم 760 ثم 1100.
   الشكل يحمل المعنى مع اللون: الأولوية بأيقونة، الحالة بأيقونة وشكل، الاستحقاق بنص نسبي — فتُقرأ الشاشة بالأبيض والأسود. */

/* ---------- أزرار الترويسة ---------- */
.tsk-btn-count { margin-inline-start: 2px; }
@media (max-width: 639px) {
  .tsk-btn-label { display: none; }
  .tsk-ph .shl-ph-actions { gap: 6px; }
  .tsk-ph .shl-ph-actions .shl-btn { min-width: var(--tap); padding-inline: 12px; }
  .tsk-ph .shl-ph-actions .tsk-btn-count { position: absolute; inset-block-start: -6px; inset-inline-start: -6px; background: var(--gold); color: var(--on-brand); box-shadow: 0 0 0 2px var(--canvas); }
}
/* الجوال: الأرقام في الحبّات تكفي عن جملة الملخص، فيصعد الإجراءان إلى سطر العنوان ويظهر المحتوى أعلى الشاشة */
@media (max-width: 899px) {
  .tsk-ph .shl-ph-sub { display: none; }
  .tsk-ph { margin-bottom: 16px; padding-bottom: 14px; }
  .tsk-ph .shl-ph-row { flex-wrap: nowrap; align-items: center; }
  .tsk-ph .shl-ph-main { flex: 1; }
  .tsk-ph .shl-ph-actions { flex: none; flex-wrap: nowrap; }
}
@media (max-width: 359px) { .tsk-ph .shl-ph-actions .shl-btn { min-width: 40px; padding-inline: 8px; } .tsk-ph .shl-ph-actions { gap: 4px; } }

/* ---------- الإضافة السريعة الذكية ---------- */
.tsk-quick { margin-bottom: 16px; }
.tsk-quick-field {
  display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--surface); border: 1px solid var(--ctl-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.tsk-quick-field:hover { border-color: var(--ink-2); }
.tsk-quick-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-soft), var(--shadow-card); }
.tsk-quick-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); }
.tsk-quick-icon .shl-icon { width: 20px; height: 20px; }
.tsk-quick-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; outline: none; background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-bold);
}
.tsk-quick-input::placeholder { color: var(--faint); font-weight: var(--fw-medium); }
.tsk-quick-input::-webkit-search-cancel-button { display: none; }
.tsk-quick-kbd { flex: none; }
.tsk-quick-detail { flex: none; }
.tsk-quick-send { flex: none; min-height: 44px; }
@media (max-width: 639px) {
  .tsk-quick-kbd { display: none; }
  .tsk-quick-send span { display: none; }
  .tsk-quick-send { width: var(--tap); padding: 0; }
  .tsk-quick-input { font-size: 16px; }
}
@media (pointer: coarse) { .tsk-quick-kbd { display: none; } }
.tsk-quick-error { padding: 6px 12px 0; }
.tsk-quick-preview { padding: 10px 6px 0; min-height: 36px; }
.tsk-quick-preview:empty { display: none; }
/* الأمثلة تظهر عند التركيز فقط: لا تستهلك مساحة الشاشة وهي مقروءة */
.tsk-quick:not(:focus-within) .tsk-quick-preview:has(.tsk-examples) { display: none; }
.tsk-examples { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tsk-examples-label { flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tsk-example {
  flex: none; min-height: 32px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.tsk-example:hover { background: var(--brand-soft); border-color: var(--brand-edge); color: var(--brand); }
.tsk-pv-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; color: var(--ink); font-size: var(--fs-sm); }
.tsk-pv-title strong { font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.tsk-pv-title em { color: var(--muted); font-style: normal; }
.tsk-pv-label { flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tsk-pv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tsk-pv {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 4px 0 12px; border-radius: var(--r-pill);
  background: var(--brand-soft); border: 1px solid var(--brand-edge); color: var(--ink);
  animation: tsk-pv-in var(--dur-3) var(--ease-spring) backwards;
}
@keyframes tsk-pv-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.tsk-pv-val { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-pv-val .shl-icon { width: 15px; height: 15px; }
.tsk-pv-val[data-tone] { color: var(--t-ink); }
.tsk-pv-x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.tsk-pv-x:hover { background: var(--surface); color: var(--bad-ink); }
.tsk-pv-x .shl-icon { width: 14px; height: 14px; }
.tsk-pv--ghost { padding-inline: 12px; background: transparent; border-style: dashed; color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.tsk-pv--ghost .shl-icon { width: 14px; height: 14px; }
.tsk-pv--ghost:hover { background: var(--brand-soft); }
.tsk-pv-hint { margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* ---------- شريط اقتراحات النظام ---------- */
.tsk-strip {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 7px 12px 7px 10px; border: 1px solid var(--gold-edge); border-radius: var(--r-lg);
  background: linear-gradient(270deg, var(--gold-soft), var(--surface) 70%); color: var(--ink); font: inherit; text-align: start; cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.tsk-strip:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.tsk-strip-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-edge); }
.tsk-strip-tile .shl-icon { width: 20px; height: 20px; }
.tsk-strip-main { display: flex; align-items: baseline; gap: 4px 12px; flex: 1; min-width: 0; }
.tsk-strip-main strong { flex: none; font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.tsk-strip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
@media (max-width: 639px) { .tsk-strip-main { flex-direction: column; align-items: stretch; gap: 0; } }
@media (min-width: 1200px) { .tsk-strip:not([data-wide]) { display: none; } }
.tsk-strip-go { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--gold-ink); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-strip-go .shl-icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.tsk-strip:hover .tsk-strip-go .shl-icon { transform: translateX(-3px); }
@media (max-width: 639px) { .tsk-strip-go { font-size: 0; gap: 0; } }

/* ---------- التبويبات وحبّات الفترات ---------- */
.tsk-tabs-host { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.tsk-tabs-host .shl-tabs { flex: 1; min-width: 0; border-bottom: 0; }
.tsk-tabs-host .tsk-layout { margin-block-end: 5px; }
@media (max-width: 759px) { .tsk-tabs-host .tsk-layout { display: none; } }
.tsk-toolbar .tsk-layout { display: none; }
@media (max-width: 759px) { .tsk-toolbar .tsk-layout { display: inline-flex; } }
.tsk-buckets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (max-width: 759px) {
  .tsk-buckets { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; }
  .tsk-bucket { flex: 0 0 96px; min-height: 62px; grid-template-columns: 1fr; grid-template-areas: "num" "label"; gap: 0; padding: 8px 12px 10px; scroll-snap-align: start; }
  .tsk-bucket-icon { display: none; }
  .tsk-bucket-num { justify-self: start; font-size: var(--fs-3xl); }
}
.tsk-bucket {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon num" "label label"; align-items: center; gap: 4px 10px; min-height: 76px;
  padding: 10px 12px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer;
  box-shadow: var(--shadow-xs); overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2);
}
.tsk-bucket:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand-edge); }
.tsk-bucket:active { transform: scale(.98); }
.tsk-bucket::after { content: ""; position: absolute; inset-inline: 14px; inset-block-end: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); transform: scaleX(0); transition: transform var(--dur-3) var(--ease-out); }
.tsk-bucket[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-edge); box-shadow: var(--shadow-card); }
.tsk-bucket[aria-pressed="true"]::after { transform: scaleX(1); }
.tsk-bucket-icon { grid-area: icon; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--t-soft); color: var(--t); }
.tsk-bucket-icon .shl-icon { width: 17px; height: 17px; }
.tsk-bucket-num { grid-area: num; justify-self: end; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.tsk-bucket-label { grid-area: label; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); white-space: nowrap; }
.tsk-bucket[data-zero="1"] .tsk-bucket-num { color: var(--muted); }
.tsk-bucket[data-zero="1"] .tsk-bucket-icon { opacity: .55; }
.tsk-bucket[data-bucket="overdue"]:not([data-zero="1"]) { border-color: color-mix(in srgb, var(--bad) 38%, var(--line)); }
.tsk-bucket[data-bucket="overdue"]:not([data-zero="1"]) .tsk-bucket-num { color: var(--bad-ink); }

/* ---------- شريط الأدوات والمرشّحات ---------- */
.tsk-toolbar { margin-bottom: 12px; }
.tsk-toolbar-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tsk-search { flex: 1 1 200px; min-width: 0; }
.tsk-ftoggle { flex: none; }
.tsk-layout { flex: none; }
.tsk-statuschips { display: flex; gap: 6px; flex: none; }
.tsk-statuschips .shl-chip { min-height: 38px; }
@media (max-width: 759px) { .tsk-statuschips { display: none; } }
@media (max-width: 639px) {
  .tsk-layout .shl-seg-btn span { display: none; }
  .tsk-layout .shl-seg-btn { min-width: 38px; justify-content: center; padding: 0 8px; }
  .tsk-toolbar-main { gap: 8px; flex-wrap: nowrap; }
  .tsk-search { flex: 1 1 0; }
  .tsk-ftoggle { position: relative; width: var(--tap); padding: 0; }
  .tsk-ftoggle .tsk-fcount { position: absolute; inset-block-start: -6px; inset-inline-start: -6px; background: var(--brand-fill); color: var(--on-brand); box-shadow: 0 0 0 2px var(--canvas); }
}
.tsk-filters { display: none; gap: 10px 12px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.tsk-filters.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); animation: tsk-drop var(--dur-3) var(--ease-out) backwards; }
@keyframes tsk-drop { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 760px) { .tsk-filters.is-open { display: flex; flex-wrap: wrap; align-items: flex-end; } }
.tsk-fsel { display: grid; gap: 4px; min-width: 0; }
.tsk-fsel label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tsk-fsel .shl-select { width: 100%; min-height: 38px; }
@media (min-width: 760px) { .tsk-fsel { min-width: 160px; } .tsk-fsel .shl-select { width: auto; min-width: 160px; } }
.tsk-fcount { background: var(--brand-soft); color: var(--brand); }
.tsk-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tsk-fchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 12px; border: 1px solid var(--brand-edge); border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-heavy); cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2);
}
.tsk-fchip .shl-icon { width: 14px; height: 14px; }
.tsk-fchip:hover { background: color-mix(in srgb, var(--brand-soft) 70%, var(--bad-soft)); border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad-ink); }
.tsk-fclear { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.tsk-fclear:hover { color: var(--ink); text-decoration: underline; }

/* ---------- النتائج ---------- */
.tsk-results { min-height: 160px; transition: opacity var(--dur-2); }
.tsk-results.is-loading { opacity: .55; pointer-events: none; }
.tsk-skeletons .shl-skel { height: 64px; border-radius: var(--r-card); }
.tsk-groups { display: grid; gap: 18px; }
.tsk-group { display: grid; gap: 8px; align-content: start; }
.tsk-group-head {
  position: sticky; top: calc(var(--topbar-h) - 1px); z-index: var(--z-sticky); display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 2px;
  background: color-mix(in srgb, var(--canvas) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-black);
}
.tsk-group-mark { width: 4px; height: 16px; border-radius: 2px; background: var(--t, var(--gold)); }
.tsk-group[data-bucket="overdue"] .tsk-group-label { color: var(--bad-ink); }
.tsk-group[data-bucket="overdue"] .shl-count { background: var(--bad-soft); color: var(--bad-ink); }
.tsk-group[data-bucket="today"] .tsk-group-label { color: var(--brand); }
.tsk-listfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tsk-note { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* ---------- الصفوف ---------- */
.tsk-rows { list-style: none; margin: 0; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tsk-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 6px; min-height: 64px; padding: 8px 8px 10px 10px;
  transition: background-color var(--dur-2), opacity var(--dur-3), transform var(--dur-3) var(--ease-out);
}
.tsk-row + .tsk-row { border-top: 1px solid var(--line); }
.tsk-row:hover { background: var(--hover); }
.tsk-row::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.tsk-row[data-priority="urgent"]:not([data-status="done"]):not([data-status="cancelled"])::before { background: var(--bad); }
.tsk-row[data-priority="high"]:not([data-status="done"]):not([data-status="cancelled"])::before { background: var(--gold); }
.tsk-row-main { display: grid; gap: 6px; min-width: 0; padding-block: 8px 2px; }
.tsk-title {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-heavy);
  line-height: var(--lh-snug); text-align: start; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; transition: color var(--dur-2);
}
.tsk-title:hover { color: var(--brand); }
.tsk-title:focus-visible { outline-offset: 3px; }
.tsk-row[data-status="done"] .tsk-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.tsk-row[data-status="cancelled"] .tsk-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.tsk-row-side { display: flex; align-items: center; gap: 4px; padding-block-start: 4px; }
.tsk-avatars.tsk-av-end { margin-inline-start: auto; }
.tsk-more { opacity: .85; }
@media (hover: hover) and (pointer: fine) {
  .tsk-more { opacity: 0; transition: opacity var(--dur-2); }
  .tsk-row:hover .tsk-more, .tsk-more:focus-visible, .tsk-card:hover .tsk-more { opacity: 1; }
}
.tsk-row.is-new { animation: tsk-flash 2.4s var(--ease-out); }
.tsk-card.is-new { animation: tsk-flash 2.4s var(--ease-out); }
@keyframes tsk-flash { 0%, 30% { background: var(--gold-soft); } 100% { background: transparent; } }
.tsk-row.is-leaving { animation: tsk-leave var(--dur-3) var(--ease-in-out) forwards; pointer-events: none; }
@keyframes tsk-leave { to { opacity: 0; transform: translateX(-18px) scale(.985); } }
.tsk-row.is-completing .tsk-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }

/* دائرة الإنجاز: مساحة لمس 44px ودائرة مرسومة 24px تنبض عند الإنجاز */
.tsk-check {
  position: relative; display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: transparent; cursor: pointer;
}
.tsk-check::before {
  content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ctl-border); background: var(--surface);
  transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.tsk-check .shl-icon { position: relative; z-index: 1; width: 14px; height: 14px; stroke-width: 3.2; transition: color var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.tsk-check:not(.is-done):not(:disabled):hover { color: var(--ok); }
.tsk-check:not(.is-done):not(:disabled):hover::before { border-color: var(--ok); background: var(--ok-soft); }
.tsk-check:active::before { transform: scale(.88); }
.tsk-check.is-done, .tsk-row.is-completing .tsk-check { color: var(--on-brand); }
.tsk-check.is-done::before, .tsk-row.is-completing .tsk-check::before { background: var(--ok); border-color: var(--ok); }
.tsk-row.is-completing .tsk-check::before { animation: tsk-pop var(--dur-4) var(--ease-spring); }
.tsk-row.is-reopening .tsk-check::before { background: var(--surface); border-color: var(--ctl-border); }
@keyframes tsk-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.tsk-check:disabled { cursor: default; }
.tsk-check:disabled:not(.is-done)::before { border-style: dashed; opacity: .6; }
.tsk-check.is-cancelled { color: var(--faint); cursor: default; }
.tsk-check.is-cancelled::before { border-color: var(--line-strong); background: var(--surface-3); }
.tsk-check.is-cancelled .shl-icon { width: 16px; height: 16px; stroke-width: 2.4; }
.tsk-check--static { width: 36px; cursor: default; }
.tsk-check--static[data-status="done"] { color: var(--on-brand); }
.tsk-check--static[data-status="done"]::before { background: var(--ok); border-color: var(--ok); }
.tsk-check--static[data-status="in_progress"] { color: var(--accent-ink); }
.tsk-check--static[data-status="blocked"] { color: var(--warn-ink); }
.tsk-check--static[data-status="open"] { color: transparent; }

/* ---------- الرقاقات: أولوية · حالة · استحقاق · خطوات · كيان ---------- */
.tsk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.tsk-chip, .tsk-due, .tsk-pri, .tsk-status {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; text-decoration: none;
}
.tsk-chip .shl-icon, .tsk-due .shl-icon, .tsk-pri .shl-icon, .tsk-status .shl-icon { width: 13px; height: 13px; }
.tsk-chip { background: var(--surface-3); color: var(--ink-2); }
.tsk-chip bdi, .tsk-due bdi { font-variant-numeric: tabular-nums lining-nums; }
.tsk-chip.is-complete { background: var(--ok-soft); color: var(--ok-ink); }
.tsk-chip--late { background: var(--bad-soft); color: var(--bad-ink); }
.tsk-chip--cat { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.tsk-chip--entity { background: var(--brand-soft); color: var(--brand); }
.tsk-chip--entity span { overflow: hidden; text-overflow: ellipsis; }
a.tsk-chip--link { cursor: pointer; transition: background-color var(--dur-2); }
a.tsk-chip--link:hover { background: color-mix(in srgb, var(--brand-soft) 60%, var(--brand-edge)); text-decoration: underline; }
.tsk-pri { background: var(--t-soft); color: var(--t-ink); }
.tsk-pri[data-p="urgent"] { font-weight: var(--fw-heavy); }
.tsk-status { border-radius: 7px; background: var(--t-soft); color: var(--t-ink); }
.tsk-status[data-status="done"] .tsk-status-icon { stroke-width: 2.6; }
.tsk-due { background: var(--surface-3); color: var(--ink-2); }
.tsk-due-date { color: var(--muted); font-weight: var(--fw-medium); }
.tsk-due[data-due="overdue"] { background: var(--bad-soft); color: var(--bad-ink); font-weight: var(--fw-heavy); }
.tsk-due[data-due="overdue"] .tsk-due-date { color: var(--bad-ink); opacity: .8; }
.tsk-due[data-due="today"] { background: var(--gold-soft); color: var(--gold-ink); font-weight: var(--fw-heavy); box-shadow: inset 0 0 0 1px var(--gold-edge); }
.tsk-due[data-due="soon"] { background: var(--brand-soft); color: var(--brand); }
.tsk-due[data-due="week"] { background: var(--accent-soft); color: var(--accent-ink); }
.tsk-due[data-due="none"], .tsk-due[data-due="closed"], .tsk-due[data-due="later"] { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-weight: var(--fw-medium); }
.tsk-avatars { display: inline-flex; align-items: center; flex-direction: row; }
.tsk-avatars .shl-avatar { width: 28px; height: 28px; font-size: 11px; margin-inline-start: -8px; box-shadow: 0 0 0 2px var(--surface); }
.tsk-avatars .shl-avatar:first-child { margin-inline-start: 0; }
.tsk-avatars-more { display: grid; place-items: center; min-width: 28px; height: 28px; margin-inline-start: -8px; padding: 0 6px; border-radius: 14px; background: var(--surface-3); box-shadow: 0 0 0 2px var(--surface); color: var(--ink-2); font-size: 11px; font-weight: var(--fw-heavy); }

/* ---------- لوحة الحالات ---------- */
.tsk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1099px) { .tsk-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .tsk-board { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; }
  .tsk-col { flex: 0 0 84%; scroll-snap-align: center; }
}
.tsk-col { display: grid; gap: 10px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); min-width: 0; }
.tsk-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; border-bottom: 1px solid var(--line); }
.tsk-col-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--t-soft); color: var(--t); }
.tsk-col-icon .shl-icon { width: 15px; height: 15px; }
.tsk-col-title { flex: 1; margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.tsk-col-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.tsk-col-empty { padding: 22px 8px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: center; }
.tsk-col-more { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.tsk-card {
  position: relative; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-xs); cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.tsk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand-edge); }
.tsk-card::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.tsk-card[data-priority="urgent"]::before { background: var(--bad); }
.tsk-card[data-priority="high"]::before { background: var(--gold); }
.tsk-card[data-status="done"] .tsk-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.tsk-card-progress { display: flex; align-items: center; gap: 8px; }
.tsk-card-progress .shl-progress { flex: 1; height: 6px; }
.tsk-card-steps { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tsk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.tsk-card .tsk-avatars .shl-avatar { box-shadow: 0 0 0 2px var(--surface); }

/* ---------- التقويم الشهري ---------- */
.tsk-cal { display: grid; gap: 14px; }
.tsk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tsk-cal-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); }
.tsk-cal-nav { display: flex; align-items: center; gap: 6px; }
.tsk-cal-sum { margin: -6px 0 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.tsk-cal-grid { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.tsk-cal-dow, .tsk-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tsk-cal-dow { background: var(--th-bg); }
.tsk-dow { padding: 10px 4px; color: var(--th-ink); font-size: var(--fs-xs); font-weight: var(--fw-heavy); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsk-dow[data-weekend="1"] { opacity: .72; }
.tsk-dow-short { display: none; }
@media (max-width: 559px) { .tsk-dow-full { display: none; } .tsk-dow-short { display: inline; } .tsk-dow { padding-inline: 0; font-size: 11px; } }
.tsk-day {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 4px; min-width: 0; min-height: 104px; padding: 6px; border: 0; border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; align-content: start;
  transition: background-color var(--dur-2);
}
.tsk-cal-week > .tsk-day:first-child { border-inline-start: 0; }
.tsk-day:hover { background: var(--hover); }
.tsk-day[data-weekend="1"] { background: color-mix(in srgb, var(--surface-2) 80%, var(--surface)); }
.tsk-day[data-in-month="0"] { color: var(--muted); background: var(--surface-2); }
.tsk-day[data-in-month="0"] .tsk-day-chips, .tsk-day[data-in-month="0"] .tsk-dots { opacity: .55; }
.tsk-day[aria-selected="true"] { background: var(--select); box-shadow: inset 0 0 0 2px var(--brand); z-index: 1; }
.tsk-day:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 2; }
.tsk-day-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 13px; font-size: var(--fs-sm); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.tsk-day[data-today="1"] .tsk-day-num { background: var(--brand-fill); color: var(--on-brand); }
.tsk-day-chips { display: grid; gap: 3px; align-content: start; min-width: 0; }
.tsk-day-chip {
  display: block; overflow: hidden; padding: 2px 6px; border-radius: 5px; border-inline-start: 3px solid var(--t); background: var(--t-soft); color: var(--t-ink);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap;
}
.tsk-day-chip[data-done="1"] { text-decoration: line-through; opacity: .7; }
.tsk-day-more { color: var(--muted); font-size: 11px; font-weight: var(--fw-heavy); padding-inline: 4px; }
.tsk-dots { display: none; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: center; }
.tsk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
@media (max-width: 759px) {
  .tsk-day { min-height: 58px; padding: 4px 2px; justify-items: center; }
  .tsk-day-chips { display: none; }
  .tsk-dots { display: flex; }
}
.tsk-agenda { display: grid; gap: 10px; }
.tsk-agenda-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tsk-agenda-titles { display: grid; gap: 4px; }
.tsk-agenda-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); }
.tsk-agenda-empty { margin: 0; padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); color: var(--muted); font-weight: var(--fw-bold); text-align: center; }
.tsk-row--agenda { grid-template-columns: auto minmax(0, 1fr); }
.tsk-row--agenda .tsk-check--static { margin-top: 2px; }

/* ---------- ورقة المهمة ---------- */
@media (min-width: 900px) { .shl-sheet.tsk-sheet { width: min(100%, 660px); } }
.tsk-detail-wrap { display: grid; }
.tsk-detail { gap: 26px; }
.tsk-d-sec { display: grid; gap: 12px; align-content: start; min-width: 0; }
.tsk-d-sec:empty { display: none; }
.tsk-d-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: var(--lh-snug); overflow-wrap: anywhere; text-wrap: balance; }
.tsk-d-chips { margin-top: -2px; }
.tsk-d-h { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-black); }
.tsk-d-h::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--gold); }
.tsk-d-headrow { display: flex; align-items: center; gap: 10px; }
.tsk-d-headrow .tsk-manage { margin-inline-start: auto; }
.tsk-d-count { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-none { color: var(--muted); font-weight: var(--fw-medium); }
.tsk-preview { display: grid; gap: 14px; }

/* شريط الحالة */
.tsk-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.tsk-track-step {
  display: grid; justify-items: center; gap: 4px; min-height: 58px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-heavy); cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.tsk-track-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--t-soft); color: var(--t); }
.tsk-track-icon .shl-icon { width: 16px; height: 16px; }
.tsk-track-step:not(:disabled):not([aria-pressed="true"]):hover { background: var(--surface); border-color: var(--line-strong); }
.tsk-track-step:active { transform: scale(.96); }
.tsk-track-step[aria-pressed="true"] { background: var(--surface); border-color: var(--t); color: var(--t-ink); box-shadow: var(--shadow-card); cursor: default; }
.tsk-track-step[aria-pressed="true"] .tsk-track-icon { background: var(--t); color: var(--surface); }
.tsk-track-step:disabled { opacity: .42; cursor: not-allowed; }
.tsk-track-label { line-height: 1.25; text-align: center; }

/* التفاصيل */
.tsk-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin: 0; }
@media (max-width: 559px) { .tsk-props { grid-template-columns: 1fr; gap: 14px; } }
.tsk-prop { display: grid; gap: 4px; align-content: start; min-width: 0; }
.tsk-prop--wide { grid-column: 1 / -1; }
.tsk-prop dt { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tsk-prop dd { margin: 0; min-width: 0; font-weight: var(--fw-bold); }
.tsk-prop-val { display: inline-flex; flex-direction: column; gap: 1px; }
.tsk-prop-val small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tsk-prop:has(.tsk-editor) { grid-column: 1 / -1; }
/* مفتاح الأولوية بعرض كامل وأزرار متساوية (النموذج وورقة المهمة)؛ على الجوال بلا أيقونات كي تتسع الأسماء الأربعة */
.tsk-prio { display: flex; width: 100%; }
.tsk-prio .shl-seg-btn { flex: 1; justify-content: center; padding: 0 8px; }
@media (max-width: 479px) { .tsk-prio .shl-seg-btn .shl-icon { display: none; } }
.tsk-prop .shl-select { width: 100%; }
.tsk-people { display: grid; gap: 10px; justify-items: start; }
.tsk-people-list { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.tsk-person { display: flex; align-items: center; gap: 8px; }
.tsk-person-text { display: grid; line-height: 1.25; }
.tsk-person-text strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-person-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* تعديل بنقرة */
.tsk-edit { min-width: 0; }
.tsk-edit-btn {
  position: relative; display: block; width: calc(100% + 16px); margin: -6px -8px; padding: 6px 30px 6px 8px; border: 1px dashed transparent; border-radius: var(--r-ctl);
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: text; transition: border-color var(--dur-2), background-color var(--dur-2);
}
.tsk-edit-pen { position: absolute; inset-inline-end: 8px; inset-block-start: 50%; width: 15px; height: 15px; margin-top: -7px; color: var(--faint); opacity: .55; transition: opacity var(--dur-2), color var(--dur-2); }
.tsk-edit-btn:hover, .tsk-edit-btn:focus-visible { background: var(--hover); border-color: var(--line-strong); }
.tsk-edit-btn:hover .tsk-edit-pen, .tsk-edit-btn:focus-visible .tsk-edit-pen { opacity: 1; color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .tsk-edit-pen { opacity: 0; } }
.tsk-editor { display: grid; gap: 8px; animation: tsk-drop var(--dur-2) var(--ease-out) backwards; }
.tsk-editor .shl-input { width: 100%; }
.tsk-editor-actions { display: flex; gap: 6px; }
.tsk-date-editor { display: grid; gap: 8px; }
.tsk-desc { margin: 0; color: var(--ink); font-weight: var(--fw-medium); line-height: var(--lh-loose); white-space: pre-wrap; overflow-wrap: anywhere; }

/* الخطوات */
.tsk-steps { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.tsk-steps-empty { margin: 0; }
.tsk-step { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 2px 4px 2px 12px; }
.tsk-step + .tsk-step { border-top: 1px solid var(--line); }
.tsk-step-text { flex: 1; min-width: 0; padding-block: 8px; font-weight: var(--fw-bold); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.tsk-step.is-done .tsk-step-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); font-weight: var(--fw-medium); }
.tsk-step-check { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: transparent; cursor: pointer; }
.tsk-step-check::before {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--ctl-border); background: var(--surface);
  transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.tsk-step-check .shl-icon { position: relative; z-index: 1; width: 13px; height: 13px; stroke-width: 3.4; }
.tsk-step-check:not(.is-done):not(:disabled):hover { color: var(--ok); }
.tsk-step-check:not(.is-done):not(:disabled):hover::before { border-color: var(--ok); background: var(--ok-soft); }
.tsk-step-check.is-done { color: var(--on-brand); }
.tsk-step-check.is-done::before { background: var(--ok); border-color: var(--ok); animation: tsk-pop var(--dur-4) var(--ease-spring); }
.tsk-step-check:disabled { cursor: default; opacity: .7; }
.tsk-step.is-managing { padding-block: 4px; }
.tsk-step-edit { flex: 1; min-width: 0; min-height: 38px; }
.tsk-step-tools { display: inline-flex; flex: none; }
.tsk-del:hover { background: var(--bad-soft); color: var(--bad-ink); }
.tsk-step-add { display: flex; gap: 8px; }
.tsk-step-add .shl-input { flex: 1; min-width: 0; }
.tsk-d-steps .shl-progress { height: 6px; }
@media (max-width: 479px) { .tsk-step-add .tsk-lbl { display: none; } }

/* التعليقات */
.tsk-comments { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tsk-cm { display: flex; align-items: flex-start; gap: 10px; }
.tsk-cm-body { flex: 1; min-width: 0; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: 4px var(--r-md) var(--r-md) var(--r-md); background: var(--surface-2); }
.tsk-cm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tsk-cm-head strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-cm-head small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tsk-cm-text { margin: 2px 0 0; font-weight: var(--fw-medium); line-height: var(--lh-normal); white-space: pre-wrap; overflow-wrap: anywhere; }
.tsk-composer { display: grid; gap: 8px; justify-items: end; }
.tsk-composer .shl-input { width: 100%; min-height: 66px; }

/* سجل النشاط */
.tsk-timeline summary { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); cursor: pointer; list-style: none; }
.tsk-timeline summary::-webkit-details-marker { display: none; }
.tsk-timeline summary .shl-icon { width: 17px; height: 17px; color: var(--muted); }
.tsk-timeline summary::after { content: ""; width: 8px; height: 8px; margin-inline-start: auto; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--dur-2); }
.tsk-timeline[open] summary::after { transform: rotate(-135deg); }
.tsk-tl { position: relative; display: grid; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.tsk-tl::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 13px; width: 2px; background: var(--line); }
.tsk-tl-item { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.tsk-tl-dot { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--line); color: var(--muted); }
.tsk-tl-dot .shl-icon { width: 14px; height: 14px; }
.tsk-tl-item[data-action="complete"] .tsk-tl-dot { background: var(--ok-soft); color: var(--ok-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 40%, transparent); }
.tsk-tl-item[data-action="cancel"] .tsk-tl-dot { background: var(--bad-soft); color: var(--bad-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 40%, transparent); }
.tsk-tl-text { display: grid; gap: 1px; padding-top: 3px; line-height: 1.35; }
.tsk-tl-text strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tsk-tl-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

.tsk-sheet:focus { outline: none; }
.tsk-detail-foot .shl-btn--primary { flex: 1 1 120px; }
@media (max-width: 479px) { .tsk-detail-foot { gap: 6px; } .tsk-cancel-btn { padding-inline: 10px; } }
.tsk-cancel-btn { margin-inline-start: auto; color: var(--bad-ink); }
.tsk-cancel-btn:hover { background: var(--bad-soft); color: var(--bad-ink); }

/* ---------- النموذج ---------- */
.tsk-form-body { gap: 18px; }
.tsk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 479px) { .tsk-form-grid { grid-template-columns: 1fr; } }
.tsk-smart-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px; padding: 10px 12px; border: 1px solid var(--gold-edge); border-radius: var(--r-md); background: var(--gold-soft); animation: tsk-drop var(--dur-3) var(--ease-out) backwards; }
.tsk-smart-icon { color: var(--gold-ink); }
.tsk-smart-text { flex: 1 1 200px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; color: var(--gold-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tsk-smart-part { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: var(--fw-heavy); }
.tsk-smart-part .shl-icon { width: 14px; height: 14px; }
.tsk-date { display: flex; align-items: center; gap: 6px; position: relative; }
.tsk-date .shl-input { flex: 1; min-width: 0; }
.tsk-native-date { position: absolute; inset-inline-end: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tsk-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.tsk-due-block { display: grid; gap: 8px; align-content: start; min-width: 0; }
.tsk-form-grid { align-items: start; }
.tsk-preset { min-height: 32px; font-size: var(--fs-xs); }
.tsk-assignee-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tsk-assignee-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tsk-assignee { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tsk-linkrow { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--brand-edge); border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-heavy); }
.tsk-linkrow-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- اقتراحات النظام ---------- */
.tsk-sg-intro { margin: 0; color: var(--muted); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
.tsk-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.tsk-kinds .shl-chip { display: inline-flex; align-items: center; gap: 6px; }
.tsk-sg-toggle { display: flex; }
.tsk-sg-cards { display: grid; gap: 10px; }
.tsk-sg {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  box-shadow: var(--shadow-xs); animation: tsk-pv-in var(--dur-3) var(--ease-out) backwards; transition: opacity var(--dur-2);
}
.tsk-sg[data-priority="urgent"] { border-color: color-mix(in srgb, var(--bad) 32%, var(--line)); }
.tsk-sg.is-dismissed { opacity: .62; background: var(--surface-2); }
.tsk-sg-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--t-soft); color: var(--t); }
.tsk-sg-tile .shl-icon { width: 20px; height: 20px; }
.tsk-sg-main { display: grid; gap: 4px; min-width: 0; }
.tsk-sg-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.tsk-sg-why { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.tsk-sg-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--line); }
@media (min-width: 640px) {
  .tsk-sg { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .tsk-sg-actions { grid-column: auto; flex-direction: column; justify-content: flex-start; padding-top: 0; border-top: 0; }
}

/* ---------- المهام الدورية ---------- */
.tsk-rec-intro { display: grid; gap: 12px; justify-items: start; }
.tsk-rec-intro p { margin: 0; color: var(--muted); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
.tsk-rec-list { display: grid; gap: 12px; }
.tsk-rec { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-xs); }
.tsk-rec.is-off { background: var(--surface-2); }
.tsk-rec.is-off .tsk-rec-tile, .tsk-rec.is-off .tsk-rec-title { opacity: .6; }
.tsk-rec-head { display: flex; align-items: center; gap: 12px; }
.tsk-rec-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.tsk-rec-tile .shl-icon { width: 20px; height: 20px; }
.tsk-rec-titles { display: grid; flex: 1; min-width: 0; gap: 1px; }
.tsk-rec-title { font-size: var(--fs-md); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.tsk-rec-sched { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tsk-rec-head .shl-switch-label { font-size: var(--fs-xs); }
.tsk-rec-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.tsk-rec-next-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.tsk-rec-dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tsk-rec-dates li { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-rec-dates small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tsk-rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tsk-weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
.tsk-wd { min-height: 38px; padding: 0 12px; }
.tsk-wd[data-weekend="1"] { border-style: dashed; }
.tsk-rule-preview { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--accent-soft); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); }
.tsk-rule-preview-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-rule-preview-label .shl-icon { width: 16px; height: 16px; }
.tsk-rule-preview .tsk-rec-dates li { color: var(--ink); }
.tsk-rule-preview .tsk-none { color: var(--accent-ink); opacity: .8; }

/* ---------- ويدجت لوحة التحكم ---------- */
.tsk-w { display: grid; gap: 12px; }
.tsk-w-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tsk-w-stat {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon num" "label label"; align-items: center; gap: 2px 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink); text-decoration: none; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background-color var(--dur-2);
}
.tsk-w-stat:hover { transform: translateY(-2px); border-color: var(--brand-edge); background: var(--surface); }
.tsk-w-stat-icon { grid-area: icon; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--t-soft); color: var(--t); }
.tsk-w-stat-icon .shl-icon { width: 15px; height: 15px; }
.tsk-w-stat-num { grid-area: num; justify-self: end; font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: 1; }
.tsk-w-stat-label { grid-area: label; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tsk-w-stat[data-zero="1"] { opacity: .75; }
.tsk-w-stat[data-tone="red"]:not([data-zero="1"]) .tsk-w-stat-num { color: var(--bad-ink); }
.tsk-w-rows { box-shadow: none; }
.tsk-row--mini { grid-template-columns: auto minmax(0, 1fr); min-height: 56px; padding: 4px 8px 6px 6px; }
.tsk-row--mini .tsk-row-main { padding-block: 6px 0; gap: 4px; }
.tsk-row--mini .tsk-title { font-size: var(--fs-sm); }
.tsk-title--link:hover { text-decoration: none; }
.tsk-w-all { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-decoration: none; }
.tsk-w-all:hover { color: var(--brand); }
.tsk-w-all .shl-icon { width: 15px; height: 15px; }
.tsk-w-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---------- شريط التراجع (طبقة عليا) ---------- */
.tsk-undo {
  position: fixed; inset: auto; inset-inline: 0; inset-block-end: calc(18px + env(safe-area-inset-bottom)); margin: 0 auto; width: fit-content; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px;
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--ink); color: var(--surface);
  box-shadow: var(--shadow-pop); font-weight: var(--fw-bold); overflow: visible; animation: tsk-undo-in var(--dur-3) var(--ease-out) backwards; transition: opacity var(--dur-2), transform var(--dur-2);
}
.tsk-undo.is-leaving { opacity: 0; transform: translateY(8px); }
@keyframes tsk-undo-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.tsk-undo-icon { width: 20px; height: 20px; opacity: .9; }
.tsk-undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.tsk-undo-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 16%, transparent);
  color: var(--surface); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-heavy); cursor: pointer; transition: background-color var(--dur-2);
}
.tsk-undo-btn:hover { background: color-mix(in srgb, var(--surface) 28%, transparent); }
.tsk-undo-btn .shl-icon { width: 16px; height: 16px; }
.tsk-undo-btn.is-busy { opacity: .6; }
@media (max-width: 759px) { .tsk-undo { inset-block-end: calc(var(--bottomnav-h) + 92px + env(safe-area-inset-bottom)); } }

/* ---------- منتقي المكلَّفين وقائمة الحالة ---------- */
.tsk-pick { display: grid; gap: 10px; padding: 12px 14px 16px; }
.tsk-pick-list { display: grid; gap: 2px; max-height: 44dvh; overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.tsk-pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 4px 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink);
  font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2);
}
.tsk-pick-row:hover { background: var(--hover); }
.tsk-pick-row[aria-selected="true"] { background: var(--select); }
.tsk-pick-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.tsk-pick-text strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tsk-pick-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tsk-pick-mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ctl-border); color: var(--on-brand); transition: background-color var(--dur-2), border-color var(--dur-2); }
.tsk-pick-row[aria-selected="true"] .tsk-pick-mark { background: var(--brand-fill); border-color: var(--brand-fill); }
.tsk-pick-mark .shl-icon { width: 14px; height: 14px; stroke-width: 3; }
.tsk-menu { display: grid; gap: 4px; padding: 10px 12px 16px; }
.tsk-menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--ink);
  font: inherit; font-weight: var(--fw-bold); text-align: start; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.tsk-menu-row:hover { background: var(--hover); border-color: var(--line); }
.tsk-menu-row[data-status="cancelled"] { color: var(--bad-ink); }
.tsk-menu-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--t-soft); color: var(--t); }
.tsk-menu-icon .shl-icon { width: 17px; height: 17px; }

/* القائمتان السياقيتان (نقل الحالة، اختيار المكلَّفين): نافذة وسطية على الحاسوب بدل لوحة الشريط العلوي — أقرب لما نقر عليه المستخدم */
@media (min-width: 760px) {
  .shl-pop.shl-pop--tsk-menu, .shl-pop.shl-pop--tsk-pick {
    inset: 0; margin: auto; height: fit-content; width: min(400px, calc(100vw - 32px)); max-height: min(80dvh, 620px); border-radius: var(--r-xl);
  }
  .shl-pop.shl-pop--tsk-menu[open], .shl-pop.shl-pop--tsk-pick[open] { animation-name: shl-confirm-in; transform-origin: center; }
}

/* ---------- ورقة السبب ---------- */
.tsk-reason .shl-sheet-body { gap: 12px; }

/* ---------- تخطيط الصفحة: عمود الاقتراحات الجانبي على الشاشات العريضة ---------- */
.tsk-split { display: block; }
.tsk-main { min-width: 0; }
.tsk-aside { display: none; }
@media (min-width: 1200px) {
  .tsk-split[data-aside="1"] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .tsk-split[data-aside="1"] .tsk-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100dvh - var(--topbar-h) - 32px); overflow-y: auto; scrollbar-width: none; align-content: start; }
}
.tsk-aside-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--gold-edge); border-radius: var(--r-card); background: linear-gradient(180deg, var(--gold-soft), var(--surface) 90px); box-shadow: var(--shadow-card); }
.tsk-aside-head { display: flex; align-items: center; gap: 10px; }
.tsk-aside-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-edge); }
.tsk-aside-tile .shl-icon { width: 18px; height: 18px; }
.tsk-aside-title { flex: 1; margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.tsk-aside-list { display: grid; gap: 8px; }
.tsk-sg--compact { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 10px; background: var(--surface); }
.tsk-sg--compact .tsk-sg-tile { width: 32px; height: 32px; border-radius: 10px; }
.tsk-sg--compact .tsk-sg-tile .shl-icon { width: 17px; height: 17px; }
.tsk-sg--compact .tsk-sg-title { font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tsk-sg--compact .tsk-sg-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; font-size: var(--fs-xs); }
.tsk-sg--compact .tsk-sg-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--line); }
.tsk-hints { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.tsk-hints-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.tsk-hints-title .shl-icon { width: 16px; height: 16px; color: var(--muted); }
.tsk-hints-list { display: grid; gap: 8px; margin: 0; }
.tsk-hints-list > div { display: flex; align-items: center; gap: 10px; }
.tsk-hints-list dt { min-width: 52px; }
.tsk-hints-list dd { margin: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
/* @@TASKS-CSS-END */

/* @@TEAM-CSS-BEGIN */
/* الفريق والصلاحيات (بادئة tmh-) — «دفتر الربّان»: ورق عاجي وحبر كحلي، خطوط شعرية ذهبية، ألوان الدلالة بالشكل والنص معاً.
   كل لون من tokens.css (لا لون مكتوب هنا)، والخصائص منطقية (inline-start/end) فتنقلب مع RTL. */

/* ======================================================================================================================
   المركز: الملخص والتبويبات
   ====================================================================================================================== */
.tmh { display: block; }
.tmh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 26px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.tmh-meta-item + .tmh-meta-item::before { content: ""; width: 5px; height: 5px; margin-inline-end: 12px; border-radius: 50%; background: var(--gold); }
.tmh .shl-ph { margin-bottom: 10px; }
.tmh-tabs .shl-tab { flex: 0 1 auto; }
@media (max-width: 559px) {
  .tmh-tabs .shl-tabs { gap: 0; }
  .tmh-tabs .shl-tab { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 8px; font-size: var(--fs-sm); }
  .tmh-tabs .shl-tab > .shl-icon { display: none; }
}
.tmh-tabs { margin-bottom: 20px; position: sticky; top: calc(var(--topbar-h) - 1px); z-index: var(--z-sticky); background: var(--canvas); }
@media (max-width: 759px) { .tmh-tabs { position: static; } }
.tmh-panel[hidden] { display: none; }
.tmh-alertbadge { border: 0; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out); }
.tmh-alertbadge:hover { background: color-mix(in srgb, var(--bad-soft) 80%, var(--bad)); }
.tmh-alertbadge:active { transform: scale(.97); }
.tmh-dim { color: var(--muted); font-weight: var(--fw-medium); }
.tmh-dash { color: var(--faint); }
.tmh-online { color: var(--ok-ink); font-weight: var(--fw-heavy); }
.tmh-sub { color: var(--muted); font-weight: var(--fw-medium); }
.tmh-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .2px; }
.tmh-inline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tmh-note { margin: 0; color: var(--muted); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
/* الشبكات ذات العمود الواحد لا تتمدد بمحتوى nowrap (تبويبات، شارات): minmax(0,1fr) يمنع تجاوز العرض */
.tmh-stack, .tmh-card, .tmh-pf, .tmh-wiz-body, .tmh-rpanel, .tmh-map, .tmh-scard, .tmh-govern, .tmh-conf-body, .tmh-map-body, .tmh-sod, .tmh-cmp, .tmh-spcat, .tmh-hygiene, .tmh-feed, .tmh-dgroup, .tmh-filters, .tmh-rhead, .tmh-spcard { grid-template-columns: minmax(0, 1fr); }
.tmh-stack { display: grid; gap: 14px; align-content: start; min-width: 0; }
.tmh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tmh-linkbtn { justify-self: start; max-width: 100%; height: auto; padding-block: 6px; white-space: normal; text-align: start; line-height: 1.4; }

/* بطاقة قسم */
.tmh-card { display: grid; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); min-width: 0; }
.tmh-card-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.tmh-card-title::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--gold); }
.tmh-card-title .shl-icon { width: 18px; height: 18px; color: var(--brand); }
.tmh-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }

/* ======================================================================================================================
   الصورة الرمزية بنقطة الحالة
   ====================================================================================================================== */
.tmh-av { position: relative; display: inline-grid; flex: none; }
.tmh-av--lg .shl-avatar { width: 72px; height: 72px; font-size: 26px; }
.tmh-av-dot { position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--surface); background: var(--faint); }
.tmh-av--lg .tmh-av-dot { width: 18px; height: 18px; border-width: 3px; inset-block-end: 2px; inset-inline-end: 2px; }
.tmh-av[data-state="online"] .tmh-av-dot { background: var(--ok); animation: tmh-pulse 2.4s var(--ease-out) infinite; }
.tmh-av[data-state="account"] .tmh-av-dot { background: var(--brand-fill); }
.tmh-av[data-state="locked"] .tmh-av-dot { background: var(--bad); border-radius: 3px; }
.tmh-av[data-state="off"] .tmh-av-dot { background: var(--faint); }
@keyframes tmh-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.tmh-profile .tmh-av-dot { border-color: var(--surface-pop); }

/* ======================================================================================================================
   تبويب الأشخاص: خريطة الفريق · شريط الأدوات · البطاقات والجدول
   ====================================================================================================================== */
.tmh-map { position: relative; display: grid; gap: 16px; margin-bottom: 18px; padding: 18px 18px 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tmh-map::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 18px; width: 38px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.tmh-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tmh-map-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.tmh-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.tmh-tile .shl-icon { width: 18px; height: 18px; }
.tmh-map-total { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.tmh-map-total small { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-bar { display: block; width: 100%; height: 12px; border-radius: 7px; background: var(--surface-3); overflow: hidden; }
.tmh-bar-seg { transition: width var(--dur-4) var(--ease-out); }
.tmh-bar-seg--employee { fill: var(--faint); }
.tmh-bar-seg--employee_user { fill: var(--brand-fill); }
.tmh-bar-seg--external_user { fill: var(--approved); }
.tmh-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tmh-legend-item {
  --dot: var(--faint);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; min-height: 58px; padding: 8px 12px; text-align: start; font: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2);
}
.tmh-legend-item[data-kind="employee_user"] { --dot: var(--brand-fill); }
.tmh-legend-item[data-kind="external_user"] { --dot: var(--approved); }
.tmh-legend-item:hover { border-color: var(--brand-edge); background: var(--hover); }
.tmh-legend-item[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--focus-soft); }
.tmh-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.tmh-legend-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); line-height: 1.3; }
.tmh-legend-n { grid-column: 1 / -1; justify-self: start; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.tmh-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.tmh-flags-label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 4px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tmh-flags-label .shl-icon { width: 16px; height: 16px; color: var(--warn); }
.tmh-flagchip { display: inline-flex; align-items: center; gap: 8px; }
.tmh-flagchip-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tmh-flagchip[data-tone="bad"] .tmh-flagchip-n { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-flagchip[data-tone="warn"] .tmh-flagchip-n { background: var(--warn-soft); color: var(--warn-ink); }
.tmh-flagchip[aria-pressed="true"] .tmh-flagchip-n { background: var(--surface); color: var(--brand); }
.tmh-slot { display: contents; }
.tmh-resultline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin-bottom: 10px; }
.tmh-count { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-results { min-height: 120px; }
.tmh-more { display: flex; justify-content: center; margin: 18px 0 4px; }
@media (max-width: 759px) { .tmh-viewseg { display: none; } .tmh-legend-n { font-size: var(--fs-xl); } .tmh-legend-item { padding: 8px 10px; } }

/* بطاقة شخص */
.tmh-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.tmh-pcard {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 14px 14px 12px; text-align: start; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.tmh-pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand-edge); }
.tmh-pcard:active { transform: scale(.992); }
.tmh-pcard[aria-current="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-soft), var(--shadow-card); }
.tmh-pcard[data-inactive="1"] { opacity: .78; }
.tmh-pcard[data-state="locked"]::before, .tmh-pcard[data-kind="external_user"]::before {
  content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--approved);
}
.tmh-pcard[data-state="locked"]::before { background: var(--bad); }
.tmh-pcard-main { display: grid; gap: 1px; min-width: 0; line-height: 1.4; }
.tmh-pcard-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-lg); font-weight: var(--fw-black); overflow-wrap: anywhere; }
.tmh-pcard-en { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: start; }
.tmh-pcard-sub { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmh-pcard-code { padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.tmh-pcard-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.tmh-pcard-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.tmh-pcard-login { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-pcard-login .shl-icon { width: 15px; height: 15px; }
.tmh-pcard-login.is-online { color: var(--ok-ink); }
.tmh-pcard-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.tmh-flagtag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-flagtag .shl-icon { width: 13px; height: 13px; }
.tmh-flagtag[data-tone="bad"] { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-flagtag[data-tone="warn"] { background: var(--warn-soft); color: var(--warn-ink); }

/* خلية الشخص في الجدول */
.tmh-pcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tmh-pcell-main { display: grid; min-width: 0; line-height: 1.35; }
.tmh-pcell-main strong { font-weight: var(--fw-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmh-pcell-main small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmh-state { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tmh-urgent { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bad-soft); color: var(--bad-ink); }
.tmh-urgent .shl-icon { width: 15px; height: 15px; }
@media (min-width: 760px) { .tmh-results .shl-table td:first-child { max-width: 340px; } }

/* هياكل التحميل */
.tmh-skeleton { display: grid; gap: 12px; }
.tmh-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.tmh-skel-av { flex: none; width: 42px; height: 42px; border-radius: 50%; }
.tmh-skel-av--lg { width: 72px; height: 72px; }
.tmh-skel-tile { flex: none; width: 42px; height: 42px; border-radius: 13px; }
.tmh-skel-lines { display: grid; gap: 10px; flex: 1; min-width: 0; }
.tmh-skel-line { height: 16px; width: 70%; }
.tmh-skel-block { height: 120px; border-radius: var(--r-card); }
.tmh-skel-cards { display: flex; gap: 10px; overflow: hidden; }
.tmh-skel-card { flex: 1 0 150px; height: 92px; border-radius: var(--r-card); }
.tmh-pf-skel { padding: 20px; }

/* ======================================================================================================================
   ملف الشخص (درج/ورقة)
   ====================================================================================================================== */
.tmh-dlg { max-width: none; }
@media (min-width: 900px) { .tmh-profile { width: min(100%, 680px); } .tmh-wiz { width: min(100%, 620px); } .tmh-rolesheet { width: min(100%, 540px); } }
.tmh-pf { display: grid; align-content: start; }
.tmh-hero { display: flex; align-items: flex-start; gap: 16px; padding: 22px 20px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent); }
.tmh-hero-main { display: grid; gap: 6px; min-width: 0; padding-top: 2px; }
.tmh-hero-sub { color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.4; overflow-wrap: anywhere; }
.tmh-hero-en { justify-self: start; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tmh-hero-login { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-hero-login .shl-icon { width: 15px; height: 15px; }
.tmh-hero-login.is-online { color: var(--ok-ink); }
.tmh-pf-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px 16px; }
@media (max-width: 559px) {
  .tmh-profile .shl-callout { flex-wrap: wrap; }
  .tmh-profile .shl-callout-body { flex: 1 1 calc(100% - 48px); }
  .tmh-profile .shl-callout > .shl-btn { margin-inline-start: 40px; }
  .tmh-pf-tabs .shl-tabs { gap: 0; }
  .tmh-pf-tabs .shl-tab { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 6px; font-size: var(--fs-sm); }
  .tmh-pf-tabs .shl-tab > .shl-icon { display: none; }
  .tmh-hero { padding-inline: 16px; gap: 12px; }
  .tmh-pf-actions { padding-inline: 16px; }
  .tmh-pf-panel { padding-inline: 14px; }
  .tmh-av--lg .shl-avatar { width: 60px; height: 60px; font-size: 21px; }
}
.tmh-pf-tabs { padding-inline: 8px; border-bottom: 1px solid var(--line); background: var(--surface-pop); }
.tmh-pf-tabs .shl-tabs { border-bottom: 0; }
.tmh-pf-panel { padding: 18px 20px 32px; }
.tmh-profile .tmh-card { background: var(--surface-2); box-shadow: none; }
.tmh-profile .shl-kv dd { font-size: var(--fs-md); }
.tmh-scope-text { margin: 0; color: var(--ink); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.tmh-team-chip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-docs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.tmh-docs-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: var(--fw-heavy); }
.tmh-docs-label .shl-icon { width: 17px; height: 17px; color: var(--brand); }
.tmh-docs-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* الوصول الفعلي */
.tmh-level {
  --t: var(--muted); --t-soft: var(--surface-3);
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--t-soft);
  border: 1px solid color-mix(in srgb, var(--t) 30%, transparent); border-inline-start: 4px solid var(--t);
}
.tmh-level[data-level="admin"] { --t: var(--approved); --t-soft: color-mix(in srgb, var(--approved) 10%, var(--surface-2)); }
.tmh-level[data-level="approver"] { --t: var(--gold-strong); --t-soft: var(--gold-soft); }
.tmh-level[data-level="editor"] { --t: var(--accent-ink); --t-soft: var(--accent-soft); }
.tmh-level[data-level="viewer"] { --t: var(--muted); --t-soft: var(--surface-3); }
.tmh-level-tile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--surface); color: var(--t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 35%, transparent); }
.tmh-level-tile .shl-icon { width: 22px; height: 22px; }
.tmh-level-text { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.tmh-level-text strong { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.tmh-level-text small { color: var(--ink-2); font-weight: var(--fw-medium); }
.tmh-sentences { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tmh-sentences li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.tmh-sentences li:last-child { border-bottom: 0; }
.tmh-sent-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ok-soft); color: var(--ok-ink); }
.tmh-sent-ico .shl-icon { width: 16px; height: 16px; }
.tmh-sentences li[data-cat="approve"] .tmh-sent-ico { background: var(--gold-soft); color: var(--gold-ink); }
.tmh-sentences li[data-cat="control"] .tmh-sent-ico { background: color-mix(in srgb, var(--approved) 12%, transparent); color: var(--approved); }
.tmh-sentences li[data-cat="visibility"] .tmh-sent-ico { background: var(--accent-soft); color: var(--accent-ink); }
.tmh-sentences li[data-cat="manage"] .tmh-sent-ico, .tmh-sentences li[data-cat="view"] .tmh-sent-ico { background: var(--brand-soft); color: var(--brand); }
.tmh-sent-text { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--ink); padding-top: 3px; }
.tmh-cat { align-self: center; padding: 1px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); white-space: nowrap; }
.tmh-cat[data-cat="approve"] { background: var(--gold-soft); color: var(--gold-ink); }
.tmh-cat[data-cat="visibility"] { background: var(--accent-soft); color: var(--accent-ink); }
.tmh-sentences--no li { padding-block: 6px; align-items: center; }
.tmh-sentences--no .tmh-sent-ico { width: 24px; height: 24px; border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.tmh-sentences--no .tmh-sent-text { padding-top: 0; }
.tmh-sentences--no .tmh-sent-text { color: var(--ink-2); font-weight: var(--fw-medium); }
.tmh-details { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.tmh-details > summary, .tmh-fold > summary {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 14px; list-style: none; cursor: pointer; font-weight: var(--fw-heavy); color: var(--ink-2);
}
.tmh-details > summary::-webkit-details-marker, .tmh-fold > summary::-webkit-details-marker { display: none; }
.tmh-details > summary::after, .tmh-fold > summary::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--dur-2); }
.tmh-details[open] > summary::after, .tmh-fold[open] > summary::after { transform: rotate(-135deg); }
.tmh-details > summary .shl-icon { width: 18px; height: 18px; color: var(--brand); }
.tmh-details-body { display: grid; gap: 14px; padding: 4px 14px 16px; }
.tmh-modrows { display: grid; }
.tmh-modrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tmh-modrow:last-child { border-bottom: 0; }
.tmh-modname { font-weight: var(--fw-bold); }
.tmh-modacts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tmh-act { padding: 1px 8px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.tmh-sub-title { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.tmh-special { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; }
.tmh-special-name { flex: 1 1 200px; font-weight: var(--fw-bold); }

/* الجلسات والأمان */
.tmh-sess-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.tmh-sess-count { font-weight: var(--fw-heavy); color: var(--ink-2); }
.tmh-ev-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.tmh-profile .shl-list { background: var(--surface); box-shadow: none; }
.tmh-sesslist { display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.tmh-sess { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px; }
.tmh-sess + .tmh-sess { border-top: 1px solid var(--line); }
.tmh-sess.is-current { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.tmh-sess-tile { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.tmh-sess-tile .shl-icon { width: 21px; height: 21px; }
.tmh-sess-main { display: grid; gap: 2px; min-width: 0; }
.tmh-sess-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: var(--fw-heavy); line-height: 1.4; }
.tmh-sess-sub { display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-profile .shl-li { min-height: 60px; }
.tmh-sec-sum { display: flex; }
.tmh-sec-fact { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok-ink); font-weight: var(--fw-bold); }
.tmh-sec-fact.is-bad { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-sec-fact .shl-icon { width: 18px; height: 18px; flex: none; }

/* كلمة المرور المؤقتة (تُعرض مرة واحدة) */
.tmh-secret { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--gold-soft); border: 1px dashed var(--gold-edge); }
.tmh-secret-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; color: var(--gold-ink); }
.tmh-secret-head .shl-icon { width: 20px; height: 20px; }
.tmh-secret-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tmh-secret-code {
  flex: 1 1 220px; min-width: 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--gold-edge); color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: 1.4px; text-align: start; user-select: all; overflow-wrap: anywhere;
}
.tmh-secret-note { margin: 0; color: var(--gold-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.tmh-pwd .shl-sheet-head, .tmh-rolesheet .shl-sheet-head { position: relative; }
.tmh-pwd .shl-confirm-body { padding-top: 6px; }
.adm-pwd-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ======================================================================================================================
   معالج إضافة شخص
   ====================================================================================================================== */
.tmh-wiz-form { display: block; }
.tmh-wiz-body { display: grid; gap: 14px; align-content: start; min-height: 240px; }
.tmh-wiz-lead { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.tmh-wsteps { display: flex; align-items: center; margin: 0 0 4px; padding: 0; list-style: none; }
.tmh-wstep { display: flex; align-items: center; flex: 1 1 auto; gap: 8px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-wstep:last-child { flex: none; }
.tmh-wstep:not(:last-child)::after { content: ""; flex: 1 1 14px; min-width: 12px; height: 2px; margin-inline: 8px; border-radius: 2px; background: var(--line-strong); }
.tmh-wstep.is-done:not(:last-child)::after { background: var(--gold); }
.tmh-wstep-dot {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong);
  color: var(--muted); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.tmh-wstep-dot .shl-icon { width: 15px; height: 15px; stroke-width: 3; }
.tmh-wstep.is-done .tmh-wstep-dot { background: var(--ok); border-color: var(--ok); color: var(--on-brand); }
.tmh-wstep.is-current .tmh-wstep-dot { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.tmh-wstep.is-current .tmh-wstep-label { color: var(--ink); font-weight: var(--fw-heavy); }
@media (max-width: 479px) { .tmh-wstep:not(.is-current) .tmh-wstep-label { display: none; } }
.tmh-modes { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tmh-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tmh-mode {
  display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px; text-align: start; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-card);
  transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.tmh-mode:hover:not([disabled]) { border-color: var(--brand-edge); background: var(--hover); }
.tmh-mode:active:not([disabled]) { transform: scale(.985); }
.tmh-mode[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--focus-soft); }
.tmh-mode[disabled] { opacity: .5; cursor: not-allowed; }
.tmh-mode-tile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); }
.tmh-mode[aria-checked="true"] .tmh-mode-tile { background: var(--surface); }
.tmh-mode-tile .shl-icon { width: 22px; height: 22px; }
.tmh-mode-text { display: grid; gap: 2px; flex: 1; min-width: 0; line-height: 1.4; }
.tmh-mode-text strong { font-size: var(--fs-md); font-weight: var(--fw-black); }
.tmh-mode-text small { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.tmh-mode-check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: transparent; transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.tmh-mode-check .shl-icon { width: 14px; height: 14px; stroke-width: 3; }
[aria-checked="true"] > .tmh-mode-check { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
.tmh-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.tmh-grid .shl-field--wide { grid-column: 1 / -1; }
.tmh-pick { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; padding: 2px; margin: 0 -2px; }
.tmh-pickrow {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px; text-align: start; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur-2), background-color var(--dur-2);
}
.tmh-pickrow:hover { background: var(--hover); border-color: var(--brand-edge); }
.tmh-pickrow[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); }
.tmh-pickrow-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.tmh-pickrow-main strong { font-weight: var(--fw-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmh-pickrow-main small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-fieldset { display: grid; gap: 10px; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.tmh-fieldset legend { padding: 0 8px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.tmh-radios { display: grid; gap: 2px; }
.tmh-pwd-manual { margin-top: 6px; }
.tmh-rolehint { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.tmh-rolehint:empty { display: none; }
.tmh-review { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.tmh-done { display: grid; justify-items: center; gap: 12px; padding: 14px 0 4px; text-align: center; }
.tmh-done > * { justify-self: stretch; }
.tmh-done-icon { justify-self: center !important; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); animation: tmh-pop var(--dur-4) var(--ease-spring) backwards; }
.tmh-done-icon .shl-icon { width: 32px; height: 32px; }
@keyframes tmh-pop { from { transform: scale(.6); opacity: 0; } }
.tmh-done-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); }
.tmh-done-sub { margin: 0; color: var(--ink-2); font-weight: var(--fw-bold); }
.tmh-done .shl-kv { text-align: start; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.tmh-wiz .shl-sheet-foot .shl-btn--primary { flex: 1 1 140px; }

/* ======================================================================================================================
   تبويب الأدوار والصلاحيات
   ====================================================================================================================== */
.tmh-roles-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; }
.tmh-roleseg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tmh-roleseg .shl-seg-btn { white-space: nowrap; }
.tmh-newrole { margin-inline-start: auto; }
@media (max-width: 559px) {
  .tmh-roleseg { display: flex; width: 100%; }
  .tmh-roleseg .shl-seg-btn { flex: 1 1 auto; justify-content: center; padding: 0 8px; font-size: var(--fs-xs); }
  .tmh-roleseg .shl-seg-btn > .shl-icon { display: none; }
  .tmh-newrole { margin-inline-start: 0; }
}
.tmh-rl { display: grid; gap: 14px; align-items: start; }
@media (min-width: 980px) { .tmh-rl { grid-template-columns: 270px minmax(0, 1fr); gap: 20px; } }
.tmh-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
@media (min-width: 980px) { .tmh-rail { flex-direction: column; overflow: visible; position: sticky; top: calc(var(--topbar-h) + 64px); padding: 0; margin: 0; max-height: calc(100dvh - var(--topbar-h) - 88px); overflow-y: auto; } }
.tmh-rcard {
  position: relative; display: grid; gap: 10px; flex: 0 0 168px; padding: 12px 14px; text-align: start; font: inherit; color: var(--ink); cursor: pointer; scroll-snap-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}
@media (min-width: 980px) { .tmh-rcard { flex: none; } }
.tmh-rcard:hover { transform: translateY(-1px); border-color: var(--brand-edge); }
.tmh-rcard[aria-current="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--focus-soft); }
.tmh-rcard[aria-current="true"]::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.tmh-rcard[data-inactive="1"] { opacity: .72; }
.tmh-rcard-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tmh-rcard-tile, .tmh-rhead-tile {
  --t: var(--muted); --t-soft: var(--surface-3);
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--t-soft); color: var(--t);
}
.tmh-rcard-tile[data-level="admin"], .tmh-rhead-tile[data-level="admin"] { --t: var(--approved); --t-soft: color-mix(in srgb, var(--approved) 12%, transparent); }
.tmh-rcard-tile[data-level="approver"], .tmh-rhead-tile[data-level="approver"] { --t: var(--gold-strong); --t-soft: var(--gold-soft); }
.tmh-rcard-tile[data-level="editor"], .tmh-rhead-tile[data-level="editor"] { --t: var(--accent-ink); --t-soft: var(--accent-soft); }
.tmh-rcard-tile .shl-icon { width: 18px; height: 18px; }
.tmh-rcard-name { min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-black); line-height: 1.3; overflow-wrap: anywhere; }
.tmh-rcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-rcard-members { display: inline-flex; align-items: center; gap: 5px; }
.tmh-rcard-members .shl-icon { width: 14px; height: 14px; }
.tmh-rtag { padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); line-height: 1.7; }
.tmh-rtag--off { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-rtag--bad { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-rpanel { display: grid; gap: 14px; min-width: 0; }
.tmh-rhead { display: grid; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); position: relative; }
.tmh-rhead::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 18px; width: 38px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.tmh-rhead-main { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; }
.tmh-rhead-tile { width: 48px; height: 48px; border-radius: 14px; }
.tmh-rhead-tile .shl-icon { width: 24px; height: 24px; }
.tmh-rhead-text { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }
.tmh-rhead-name { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1.25; overflow-wrap: anywhere; }
.tmh-rhead-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tmh-rhead-desc { margin: 0; color: var(--ink-2); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.tmh-ractions { display: flex; flex-wrap: wrap; gap: 8px; }
.tmh-rstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .tmh-rstats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.tmh-stat { display: grid; gap: 2px; align-content: start; padding: 10px 12px; text-align: start; font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
button.tmh-stat { cursor: pointer; transition: border-color var(--dur-2), background-color var(--dur-2); }
button.tmh-stat:hover { border-color: var(--brand-edge); background: var(--hover); }
.tmh-stat[data-tone="bad"] { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.tmh-stat[data-tone="warn"] { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.tmh-stat-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.tmh-stat-sub { color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-stat[data-tone="bad"] .tmh-stat-sub, .tmh-stat[data-tone="bad"] .tmh-stat-value { color: var(--bad-ink); }
.tmh-members { display: flex; flex-wrap: wrap; gap: 8px; }
.tmh-member {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 12px 3px 4px; font: inherit; color: var(--ink); text-align: start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); transition: border-color var(--dur-2), background-color var(--dur-2);
}
button.tmh-member { cursor: pointer; }
button.tmh-member:hover { background: var(--hover); border-color: var(--brand-edge); }
.tmh-member[data-off="1"] { opacity: .62; }
.tmh-member .shl-avatar { width: 30px; height: 30px; font-size: 12px; }
.tmh-member-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* المصفوفة */
.tmh-matrix-card, .tmh-special-card { padding: 0; gap: 0; }
.tmh-matrix-card > .tmh-card-title-row, .tmh-special-card > .tmh-card-title-row { padding: 16px 18px 6px; }
.tmh-mtools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 18px 14px; }
.tmh-mtools-grow { flex: 1 1 220px; min-width: 0; }
.tmh-mwrap { border-top: 1px solid var(--line); }
.tmh-matrix { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tmh-matrix thead th {
  position: sticky; top: var(--topbar-h); z-index: 2; height: 44px; padding: 0 4px; background: var(--th-bg); color: var(--th-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-heavy); text-align: center;
}
.tmh-matrix thead th.tmh-mhead-name { text-align: start; padding-inline-start: 18px; }
.tmh-matrix col { width: 64px; }
.tmh-matrix thead th.tmh-mhead { width: 64px; }
.tmh-mhead-btn { width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color var(--dur-2); }
.tmh-mhead-btn:hover { background: color-mix(in srgb, var(--th-ink) 14%, transparent); }
.tmh-mhead-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tmh-mgroup th {
  position: relative; padding: 8px 18px; background: var(--surface-3); color: var(--ink-2); text-align: start; font-size: var(--fs-xs); font-weight: var(--fw-black);
  border-bottom: 1px solid var(--line);
}
.tmh-mrow th, .tmh-mrow td { height: 48px; padding: 0; border-bottom: 1px solid var(--line); background: var(--surface); transition: background-color var(--dur-2); }
.tmh-mrow:hover th, .tmh-mrow:hover td { background: var(--hover); }
.tmh-mname { display: flex; align-items: center; gap: 8px; height: 48px; padding: 4px 18px; text-align: start; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.3; }
.tmh-mname span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tmh-mdot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: rotate(45deg) scale(0); transition: transform var(--dur-3) var(--ease-spring); }
.tmh-mrow[data-changed] .tmh-mdot { transform: rotate(45deg) scale(1); }
.tmh-mrow[data-changed] th, .tmh-mrow[data-changed] td { background: color-mix(in srgb, var(--gold-soft) 70%, var(--surface)); }
.tmh-mrow[data-changed] th { box-shadow: inset 3px 0 0 var(--gold); }
.tmh-mrow:not([data-on]) .tmh-mname { color: var(--ink-2); font-weight: var(--fw-medium); }
.tmh-mcell { text-align: center; }
.tmh-mcell .shl-check { display: inline-flex; justify-content: center; min-height: 44px; width: 44px; }
.tmh-mcell .shl-check-box { width: 24px; height: 24px; }
.tmh-matrix-empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 16px; color: var(--muted); font-weight: var(--fw-bold); }
.tmh-matrix-empty[hidden] { display: none; }
.tmh-matrix-empty .shl-icon { width: 20px; height: 20px; }
@media (max-width: 479px) {
  .tmh-matrix col, .tmh-matrix thead th.tmh-mhead { width: 50px; }
  .tmh-mname { padding-inline: 12px 6px; font-size: var(--fs-sm); }
  .tmh-matrix thead th.tmh-mhead-name { padding-inline-start: 12px; }
  .tmh-mgroup th { padding-inline: 12px; }
  .tmh-mcell .shl-check { width: 38px; }
  .tmh-matrix thead th { font-size: var(--fs-xs); }
}

/* الصلاحيات الخاصة */
.tmh-special-card { padding-bottom: 8px; }
.tmh-spgroup { padding: 4px 18px 14px; }
.tmh-spgroup + .tmh-spgroup { border-top: 1px solid var(--line); padding-top: 14px; }
.tmh-spgroup-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 6px; }
.tmh-spgroup-head strong { font-size: var(--fs-md); font-weight: var(--fw-black); }
.tmh-spgroup-head small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tmh-splist { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tmh-splist .shl-switch { align-items: center; min-height: 48px; padding: 4px 8px; border-radius: var(--r-md); transition: background-color var(--dur-2); line-height: 1.35; }
.tmh-splist .shl-switch:hover { background: var(--hover); }
.tmh-splist .shl-switch[data-changed] { background: color-mix(in srgb, var(--gold-soft) 70%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
.tmh-splist .shl-switch-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* شريط الحفظ اللاصق */
.tmh-savebar {
  position: sticky; bottom: 14px; z-index: var(--z-sticky); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px;
  background: var(--surface-pop); border: 1px solid var(--gold-edge); border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  animation: tmh-rise var(--dur-3) var(--ease-out) backwards;
}
.tmh-savebar[hidden] { display: none; }
@keyframes tmh-rise { from { transform: translateY(14px); opacity: 0; } }
.tmh-savebar-text { display: grid; flex: 1 1 150px; line-height: 1.3; }
.tmh-savebar-text strong { font-weight: var(--fw-black); }
.tmh-savebar-text small { color: var(--muted); font-weight: var(--fw-bold); }
@media (max-width: 759px) { .tmh-savebar { bottom: calc(var(--bottomnav-h) + 14px + env(safe-area-inset-bottom)); } .tmh-savebar .shl-btn--primary { flex: 1 1 130px; } }

/* المقارنة */
.tmh-cmp { display: grid; gap: 16px; }
.tmh-cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tmh-swap { margin-bottom: 0; border: 1px solid var(--line-strong); background: var(--surface-2); }
@media (max-width: 559px) { .tmh-cmp-pick { grid-template-columns: 1fr; } .tmh-swap { justify-self: center; transform: rotate(90deg); } }
.tmh-cmp-sides { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tmh-cmp-side { --t: var(--accent); --t-soft: var(--accent-soft); display: grid; gap: 10px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--t); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tmh-cmp-side[data-tone="gold"] { --t: var(--gold); }
.tmh-cmp-side-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.tmh-cmp-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tmh-cmp-list li { position: relative; padding-inline-start: 18px; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.tmh-cmp-list li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.tmh-cmprows { display: grid; }
.tmh-cmprow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tmh-cmprow:last-child { border-bottom: 0; }
.tmh-cmprow--head { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); padding-block: 4px 8px; }
.tmh-cmp-mod { font-weight: var(--fw-bold); }
.tmh-cmp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmh-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tmh-pill { padding: 1px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-decoration: line-through; text-decoration-thickness: 1px; }
.tmh-pill[data-on="1"] { background: var(--brand-soft); color: var(--brand); text-decoration: none; font-weight: var(--fw-heavy); }
.tmh-pill[data-diff="1"] { box-shadow: 0 0 0 2px var(--gold); }
.tmh-yn { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-yn .shl-icon { width: 15px; height: 15px; }
.tmh-yn[data-on="1"] { color: var(--ok-ink); }
@media (max-width: 639px) {
  .tmh-cmprow { grid-template-columns: 1fr; gap: 6px; }
  .tmh-cmprow--head { display: none; }
  .tmh-cmprow > .tmh-pills:nth-of-type(1)::before, .tmh-cmprow > .tmh-yn:nth-of-type(1)::before { content: "الأول:"; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); margin-inline-end: 6px; }
  .tmh-cmprow > .tmh-pills:nth-of-type(2)::before, .tmh-cmprow > .tmh-yn:nth-of-type(2)::before { content: "الثاني:"; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); margin-inline-end: 6px; }
}

/* ======================================================================================================================
   الحوكمة: خريطة الاعتماد وكاشف التعارض
   ====================================================================================================================== */
.tmh-govern { display: grid; gap: 16px; }
.tmh-govern-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.tmh-govern-lead h3 { margin: 0 0 2px; font-size: var(--fs-xl); font-weight: var(--fw-black); }
.tmh-govern-lead p { margin: 0; color: var(--muted); font-weight: var(--fw-medium); max-width: 62ch; line-height: var(--lh-snug); }
.tmh-govern-sub { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.tmh-govern-sub::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold); }
.tmh-govern-sub .shl-icon { width: 18px; height: 18px; color: var(--brand); }
.tmh-map-body, .tmh-conf-body { display: grid; gap: 16px; }
.tmh-chains { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.tmh-chain { padding: 16px 18px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tmh-chain-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.tmh-chain-mark { width: 4px; height: 18px; border-radius: 2px; background: var(--gold); }
.tmh-hsteps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tmh-hstep { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.tmh-hstep:not(:last-child)::before { content: ""; position: absolute; inset-block: 30px 0; inset-inline-start: 13px; width: 2px; background: var(--line-strong); border-radius: 2px; }
.tmh-hstep-dot { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 2px solid var(--brand-edge); font-size: var(--fs-xs); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tmh-hstep[data-status="none"] .tmh-hstep-dot { background: var(--bad-soft); color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.tmh-hstep[data-status="admin_only"] .tmh-hstep-dot { background: var(--warn-soft); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.tmh-hstep-main { display: grid; gap: 8px; flex: 1; min-width: 0; align-content: start; }
.tmh-hstep-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 28px; }
.tmh-hstep-title strong { font-weight: var(--fw-black); }
.tmh-hstep-special { padding: 0 8px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-ink); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); line-height: 1.7; }
.tmh-rchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); cursor: pointer;
  background: var(--brand-soft); border: 1px solid var(--brand-edge); border-radius: var(--r-pill); transition: background-color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.tmh-rchip:hover { background: color-mix(in srgb, var(--brand-soft) 70%, var(--brand)); }
.tmh-rchip:active { transform: scale(.97); }
.tmh-rchip .shl-icon { width: 14px; height: 14px; color: var(--approved); }
.tmh-rchip[data-admin="1"] { background: color-mix(in srgb, var(--approved) 9%, transparent); border-color: color-mix(in srgb, var(--approved) 35%, transparent); }
.tmh-rchip[data-off="1"] { opacity: .6; }
.tmh-rchip-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tmh-fold > summary { min-height: 32px; padding: 0; gap: 8px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-fold > summary::after { margin-inline-start: 4px; width: 6px; height: 6px; }
.tmh-fold > summary .shl-icon { width: 15px; height: 15px; }
.tmh-fold-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; }
.tmh-spcat { display: grid; gap: 10px; }
.tmh-spcat-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-black); }
.tmh-spcat-title .shl-icon { width: 17px; height: 17px; color: var(--brand); }
.tmh-spcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tmh-spcard { display: grid; gap: 8px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tmh-spcard-name { font-weight: var(--fw-black); line-height: 1.35; }
.tmh-spcard-text { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }

.tmh-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .tmh-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tmh-conf-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tmh-sods { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.tmh-sod {
  --sev: var(--muted);
  position: relative; display: grid; gap: 10px; padding: 16px 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.tmh-sod::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--sev); }
.tmh-sod[data-sev="high"] { --sev: var(--bad); }
.tmh-sod[data-sev="medium"] { --sev: var(--warn); }
.tmh-sod-head { display: flex; align-items: flex-start; gap: 12px; }
.tmh-sod-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--surface-3); color: var(--sev); }
.tmh-sod[data-sev="high"] .tmh-sod-ico { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-sod[data-sev="medium"] .tmh-sod-ico { background: var(--warn-soft); color: var(--warn-ink); }
.tmh-sod-ico .shl-icon { width: 19px; height: 19px; }
.tmh-sod-titles { display: grid; gap: 6px; min-width: 0; }
.tmh-sod-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); line-height: 1.4; }
.tmh-sod-sev { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tmh-sod-why { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-normal); }
.tmh-sod-advice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--gold-soft); color: var(--gold-ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.tmh-sod-advice .shl-icon { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.tmh-sod-advice strong { font-weight: var(--fw-black); }
.tmh-sod-group { display: grid; gap: 6px; }
.tmh-sod-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.tmh-hygiene { display: grid; gap: 10px; }
.tmh-excluded { display: flex; align-items: flex-start; gap: 8px; line-height: var(--lh-snug); }
.tmh-excluded .shl-icon { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--approved); }

/* ======================================================================================================================
   تبويب سجل النشاط
   ====================================================================================================================== */
.tmh-stats { display: grid; gap: 12px; margin-bottom: 16px; }
@media (min-width: 760px) { .tmh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tmh-scard--chart { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .tmh-stats { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); } .tmh-scard--chart { grid-column: auto; } }
@media (max-width: 759px) {
  /* الجوال: بطاقات الإحصاء شريط أفقي بتثبيت (بدل ثلاث بطاقات متراصة تدفع التغذية إلى أسفل الشاشة) */
  .tmh-stats { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scrollbar-width: none; }
  .tmh-stats > .tmh-scard { flex: 0 0 min(86%, 340px); scroll-snap-align: center; }
  .tmh-chart { height: 80px; }
}
.tmh-scard { position: relative; display: grid; gap: 12px; align-content: start; padding: 16px 18px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tmh-scard::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 18px; width: 30px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.tmh-scard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tmh-scard-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.tmh-scard-total { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.tmh-scard-total small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-chart { display: block; width: 100%; height: 96px; overflow: visible; }
.tmh-chart-base { stroke: var(--line-strong); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tmh-day { cursor: pointer; outline: none; }
.tmh-day-hit { fill: transparent; transition: fill var(--dur-2); }
.tmh-day:hover .tmh-day-hit { fill: var(--hover); }
.tmh-day:focus-visible .tmh-day-hit { fill: var(--focus-soft); stroke: var(--focus); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tmh-day.is-selected .tmh-day-hit { fill: var(--brand-soft); }
.tmh-bar-total { fill: var(--brand-fill); opacity: .85; transition: opacity var(--dur-2); }
.tmh-day:hover .tmh-bar-total { opacity: 1; }
.tmh-day.is-today .tmh-bar-total { fill: var(--gold-strong); opacity: 1; }
.tmh-bar-sec { fill: var(--warn); }
.tmh-bar-zero { fill: var(--line-strong); }
.tmh-chart-axis { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-legend-mini { display: inline-flex; align-items: center; gap: 6px; }
.tmh-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.tmh-key--sec { background: var(--warn); }
.tmh-top { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tmh-top-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 8px; text-align: start; font: inherit; color: var(--ink); cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); transition: background-color var(--dur-2), border-color var(--dur-2); }
.tmh-top-row:hover { background: var(--hover); }
.tmh-top-row[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-edge); }
.tmh-top-main { display: grid; gap: 5px; flex: 1; min-width: 0; }
.tmh-top-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmh-top-main .shl-progress { height: 5px; }
.tmh-top-n { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tmh-secbtn { min-height: 32px; padding-inline: 12px; display: inline-flex; align-items: center; gap: 6px; }
.tmh-secbtn .shl-icon { width: 14px; height: 14px; }
.tmh-secchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tmh-secchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-secchip .shl-icon { width: 15px; height: 15px; }
.tmh-secchip bdi { font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tmh-secchip[data-tone="bad"] { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-secchip[data-tone="warn"] { background: var(--warn-soft); color: var(--warn-ink); }
.tmh-sec-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ok-ink); font-weight: var(--fw-bold); }
.tmh-sec-ok .shl-icon { width: 18px; height: 18px; color: var(--ok); }

/* المرشحات */
.tmh-filters { display: grid; gap: 10px; margin-bottom: 8px; }
.tmh-frow { display: flex; align-items: center; gap: 10px; }
.tmh-fsearch { flex: 1; min-width: 0; }
.tmh-ftoggle { display: none; gap: 8px; }
.tmh-fpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tmh-fpanel .shl-select { width: auto; min-width: 150px; flex: 0 1 190px; }
.tmh-dlabel { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.tmh-fpanel .efm-date { width: 190px; }
.tmh-fpanel .efm-date .tmh-date { width: auto; min-width: 0; flex: 1; }
@media (max-width: 759px) {
  .tmh-ftoggle { display: inline-flex; }
  .tmh-fpanel { display: none; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
  .tmh-filters.is-open .tmh-fpanel { display: grid; grid-template-columns: 1fr 1fr; }
  .tmh-fpanel .shl-select { width: 100%; min-width: 0; flex: none; }
  .tmh-fpanel .efm-date { width: 100%; }
  .tmh-fpanel > .shl-select { grid-column: 1 / -1; }
  .tmh-dlabel { display: grid; gap: 4px; }
  .tmh-fpanel > .shl-switch, .tmh-fpanel > .tmh-fclear { grid-column: 1 / -1; }
}

/* التغذية */
.tmh-feed { display: grid; gap: 20px; min-height: 140px; }
.tmh-dgroup { display: grid; gap: 8px; }
.tmh-dgroup-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.tmh-dgroup-title::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold); }
.tmh-dgroup-word { color: var(--ink); font-size: var(--fs-md); }
.tmh-evlist { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.tmh-ev + .tmh-ev { border-top: 1px solid var(--line); }
.tmh-ev[data-open="1"] { background: var(--surface-2); }
.tmh-ev-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: start; font: inherit; color: var(--ink); cursor: pointer; background: transparent; border: 0;
  transition: background-color var(--dur-2);
}
.tmh-ev-head:hover { background: var(--hover); }
.tmh-ev-head:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tmh-ev-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--t-soft, var(--surface-3)); color: var(--t, var(--muted)); }
.tmh-ev-tile .shl-icon { width: 20px; height: 20px; }
.tmh-ev-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tmh-ev-line { font-size: var(--fs-md); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.tmh-ev-actor { font-weight: var(--fw-black); }
.tmh-ev-sentence { font-weight: var(--fw-medium); color: var(--ink-2); }
.tmh-ev-sub { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-ev-sec { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-ink); line-height: 1.7; }
.tmh-ev-sec .shl-icon { width: 12px; height: 12px; }
.tmh-ev-end { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--muted); }
.tmh-ev-chev { width: 18px; height: 18px; transition: transform var(--dur-2); }
.tmh-ev-head[aria-expanded="true"] .tmh-ev-chev { transform: rotate(180deg); }
.tmh-ev-detail { padding: 2px 14px 16px; }
.tmh-ev-detail[hidden] { display: none; }
.tmh-ev-body { display: grid; gap: 12px; padding-inline-start: 52px; animation: tmh-rise var(--dur-3) var(--ease-out) backwards; }
@media (max-width: 559px) { .tmh-ev-body { padding-inline-start: 0; } }
.tmh-diff { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.tmh-diff-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.tmh-diff-row:last-child { border-bottom: 0; }
.tmh-diff-row--head { background: var(--surface-3); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); padding-block: 5px; }
.tmh-diff-field { font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.tmh-diff-before, .tmh-diff-after { overflow-wrap: anywhere; font-weight: var(--fw-bold); padding: 1px 8px; border-radius: 6px; }
.tmh-diff-before { background: var(--bad-soft); color: var(--bad-ink); }
.tmh-diff-after { background: var(--ok-soft); color: var(--ok-ink); }
.tmh-diff-before[data-empty="1"], .tmh-diff-after[data-empty="1"] { background: transparent; color: var(--faint); }
@media (max-width: 559px) {
  .tmh-diff-row { grid-template-columns: 1fr 1fr; }
  .tmh-diff-row--head { display: none; }
  .tmh-diff-field { grid-column: 1 / -1; }
  .tmh-diff-before::before, .tmh-diff-after::before { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-heavy); opacity: .8; }
  .tmh-diff-before::before { content: "قبل"; }
  .tmh-diff-after::before { content: "بعد"; }
}
.tmh-ev-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.tmh-ev-when { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tmh-ev-when .shl-icon { width: 14px; height: 14px; }
.tmh-sentinel { height: 1px; }
/* @@TEAM-CSS-END */

/* @@CONSTANTS-CSS-BEGIN */
/* ثوابت المنظومة (بادئة cst-) — «دفتر الربّان»: ورق عاجي وحبر كحلي وخطوط شعرية ذهبية، الدلالة بالشكل والنص معاً.
   كل لون من tokens.css (لا لون مكتوب هنا)، والخصائص منطقية (inline-start/end) فتنقلب مع RTL. */

/* ======================================================================================================================
   المركز: الملخص والبحث وشريط الملاحظات
   ====================================================================================================================== */
.cst { display: block; }
.cst .shl-ph { margin-bottom: 10px; }
.cst-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 26px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cst-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.cst-meta-item + .cst-meta-item::before { content: ""; width: 5px; height: 5px; margin-inline-end: 11px; border-radius: 50%; background: var(--gold); }
.cst-meta-item .shl-icon { width: 16px; height: 16px; }
.cst-meta-attn { color: var(--warn-ink); }
.cst-meta-attn[data-level="bad"] { color: var(--bad-ink); }
.cst-meta-ok { color: var(--ok-ink); }
.cst-host { display: block; min-width: 0; }
.cst-host > .shl-callout { margin-bottom: 14px; }

.cst-ph-search { width: min(100%, 380px); min-width: 0; }
.cst-ph-search:empty { display: none; }
.shl-ph-actions:has(> .cst-ph-search) { flex: 0 1 380px; max-width: 100%; }
@media (max-width: 759px) {
  .shl-ph-actions:has(> .cst-ph-search) { flex-basis: 100%; }
  .cst-ph-search { width: 100%; }
}
@media (max-width: 559px) { .cst .shl-ph-sub { display: none; } }
.cst-search .shl-input { min-height: 46px; background: var(--surface); box-shadow: var(--shadow-xs); }
.cst-search .shl-input:focus { box-shadow: 0 0 0 4px var(--focus-soft); }
.cst-search .shl-input-icon { inset-inline-start: 16px; }
.cst-search.has-icon .shl-input { padding-inline-start: 46px; }
.cst-results { margin-bottom: 20px; }
.cst-results[hidden] { display: none; }
.cst-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cst-results-count { color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-heavy); }

/* شريط ما يحتاج مراجعة */
.cst-attn { margin-bottom: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); border-inline-start: 4px solid var(--warn); }
.cst-attn-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: transparent;
  color: var(--ink); font: inherit; text-align: start; cursor: pointer;
}
.cst-attn-head:disabled { cursor: default; }
.cst-attn-title { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-black); }
.cst-attn-title .shl-icon { width: 18px; height: 18px; color: var(--warn); }
.cst-attn-chev { flex: none; color: var(--muted); transition: transform var(--dur-3) var(--ease-out); }
.cst-attn[data-open="1"] .cst-attn-chev { transform: rotate(180deg); }
.cst-attn-head:has(.cst-attn-names) { padding-block: 8px; }
.cst-attn-title { flex: none; }
.cst-attn-names { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cst-attn[data-open="1"] .cst-attn-names { display: none; }
.cst-attn-name { padding: 1px 10px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; }
.cst-attn-name[data-level="bad"] { background: var(--bad-soft); color: var(--bad-ink); }
.cst-attn-name[data-level="info"] { background: var(--brand-soft); color: var(--brand); }
@media (max-width: 759px) { .cst-attn-head:has(.cst-attn-names) { flex-wrap: wrap; } .cst-attn-names { order: 3; flex-basis: 100%; } }
.cst-attn-list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 2px; }
.cst-attn-list[hidden] { display: none; }
.cst-attn-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 5px 10px; border: 0; border-radius: var(--r-md); background: transparent;
  color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2);
}
.cst-attn-row:hover, .cst-attn-row:focus-visible { background: var(--hover); }
.cst-attn-row[aria-current="true"] { background: var(--select); }
.cst-attn-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink); }
.cst-attn-row[data-level="bad"] .cst-attn-ico { background: var(--bad-soft); color: var(--bad-ink); }
.cst-attn-row[data-level="info"] .cst-attn-ico { background: var(--brand-soft); color: var(--brand); }
.cst-attn-ico .shl-icon { width: 17px; height: 17px; }
.cst-attn-text { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; line-height: 1.5; }
.cst-attn-text strong { font-weight: var(--fw-heavy); }
.cst-attn-text span { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.cst-attn-go { flex: none; color: var(--faint); }

/* ======================================================================================================================
   التنقل: مجموعات ثم تبويبات
   ====================================================================================================================== */
.cst-nav { margin-bottom: 4px; background: var(--canvas); }
@media (min-width: 760px) { .cst-nav { position: sticky; top: calc(var(--topbar-h) - 1px); z-index: var(--z-sticky); padding-top: 2px; } }
.cst-nav .shl-tabs { -webkit-mask-image: linear-gradient(to left, transparent, var(--ink) 18px, var(--ink) calc(100% - 18px), transparent); mask-image: linear-gradient(to left, transparent, var(--ink) 18px, var(--ink) calc(100% - 18px), transparent); }
.cst-nav .shl-tab { flex: 0 0 auto; }
@media (min-width: 1100px) { .cst-nav .shl-tabs { -webkit-mask-image: none; mask-image: none; } }
.cst-nav[data-single="1"] .cst-subtabs { display: none; }
.cst-subtab { border-bottom: 0; gap: 8px; padding: 12px 2px 4px; }
.cst-subtab[hidden] { display: none; }
.cst-subtab .shl-tab {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-sm); transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.cst-subtab .shl-tab::after { display: none; }
.cst-subtab .shl-tab:hover { background: var(--hover); color: var(--ink); }
.cst-subtab .shl-tab[aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand-edge); color: var(--brand); }
.cst-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); margin-inline-start: 2px; }
.cst-dot[data-level="bad"] { background: var(--bad); border-radius: 2px; }
.cst-dot[data-level="warn"] { background: var(--warn); border-radius: 2px; transform: rotate(45deg); }
.cst-dot[data-level="info"] { background: var(--brand-fill); }
@media (max-width: 559px) {
  .cst-nav .shl-tab { padding: 0 12px; }
  .cst-nav .shl-tabs:not(.cst-subtab) .shl-tab { gap: 6px; font-size: var(--fs-sm); }
}

/* ======================================================================================================================
   لوحة التبويب
   ====================================================================================================================== */
.cst-panes { min-width: 0; }
.cst-pane[hidden] { display: none; }
.cst-pane:not([hidden]) { animation: cst-in var(--dur-3) var(--ease-out) backwards; }
@keyframes cst-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cst-pane:not([hidden]) { animation: none; } }
.cst-pane-head { position: relative; display: flex; align-items: center; gap: 14px; margin: 14px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cst-pane-head::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 44px; height: 3px; border-radius: 3px; background: var(--gold); }
.cst-pane-titles { display: grid; flex: 1; min-width: 0; gap: 2px; }
.cst-pane-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.cst-pane-hint { margin: 0; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-snug); max-width: 70ch; }
.cst-pane-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cst-pane-actions:empty { display: none; }
.cst-lockbadge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); border: 1px dashed var(--line-strong); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.cst-lockbadge .shl-icon { width: 15px; height: 15px; }
@media (max-width: 759px) {
  .cst-pane-head { flex-wrap: wrap; align-items: flex-start; }
  .cst-pane-title { font-size: var(--fs-xl); }
  .cst-pane-actions { flex: 1 1 100%; justify-content: stretch; }
  .cst-pane-actions .shl-btn { flex: 1; }
}
.cst-pane-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line-strong); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.cst-pane-note .shl-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.cst-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.cst-tile .shl-icon { width: 19px; height: 19px; }
.cst-tile--lg { width: 50px; height: 50px; border-radius: 15px; }
.cst-tile--lg .shl-icon { width: 24px; height: 24px; }

/* بطاقة عامة */
.cst-card { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.cst-section { display: grid; gap: 12px; margin-top: 22px; }
.cst-section:first-child { margin-top: 0; }
.cst-section-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.cst-section-title::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--gold); }
.cst-fine { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.cst-fine .shl-icon { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.cst-form-actions { display: flex; justify-content: flex-start; }
.cst-form-actions .shl-btn { min-width: 160px; }
@media (max-width: 559px) { .cst-form-actions .shl-btn { flex: 1; } }
.cst-dim { color: var(--muted); font-weight: var(--fw-medium); }
.cst-dash { color: var(--faint); }
.cst-warnline { color: var(--warn-ink); font-weight: var(--fw-bold); }
.cst-unused { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ======================================================================================================================
   القوائم: شريط الأدوات والجدول
   ====================================================================================================================== */
.cst-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cst-toolbar[hidden] { display: none; }
.cst-localsearch { flex: 1 1 260px; min-width: 0; }
.cst-localsearch[hidden], .cst-chips[hidden] { display: none; }
.cst-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.cst-chips .shl-chip { display: inline-flex; align-items: center; gap: 8px; }
.cst-chips .shl-chip[aria-pressed="true"] .shl-count { background: var(--surface); color: var(--brand); }
.cst-count { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cst-list { min-height: 120px; }
.cst-list .shl-table tbody tr[data-inactive="1"] td { color: var(--muted); }
.cst-list .shl-table tbody tr[data-inactive="1"] .cst-name-main strong { color: var(--ink-2); }
@media (min-width: 760px) { .cst-list .shl-table td:first-child { max-width: 360px; } }
@media (max-width: 759px) {
  .cst .shl-table tbody tr[aria-selected="true"] td:first-child { box-shadow: none; }
  .cst .shl-table tbody tr[aria-selected="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-soft), var(--shadow-card); }
  .cst .shl-table tbody tr[data-inactive="1"] { opacity: .75; }
}

.cst-name { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.cst-mono {
  display: inline-grid; place-items: center; flex: none; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 11px; border: 1px solid var(--brand-edge);
  background: var(--brand-soft); color: var(--brand); font-size: var(--fs-md); font-weight: var(--fw-black); line-height: 1;
}
.cst-mono--icon { width: 38px; padding: 0; }
.cst-mono .shl-icon { width: 19px; height: 19px; }
.cst-name-main { display: grid; min-width: 0; line-height: 1.4; text-align: start; }
.cst-name-main strong { font-weight: var(--fw-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-name-main small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-name.is-dim .cst-mono { background: var(--surface-3); border-color: var(--line-strong); color: var(--muted); }
.shl-table td.is-title .cst-name { display: flex; }
.cst-code {
  display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); font-size: .92em; font-weight: var(--fw-heavy);
  letter-spacing: .3px; line-height: 1.7; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums;
}
.cst-code--chip { font-size: var(--fs-xs); }
.cst-pair { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.cst-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cst-period { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-2); font-weight: var(--fw-bold); }
.cst-use { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.cst-use-pill { display: inline-flex; align-items: center; gap: .3em; padding: 1px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; }

/* هياكل التحميل */
.cst-skel { display: grid; gap: 10px; }
.cst-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.cst-skel-tile { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.cst-skel-lines { display: grid; gap: 10px; flex: 1; min-width: 0; }
.cst-skel-line { height: 16px; width: 64%; }

/* ======================================================================================================================
   الورقة: الحقول والملخص وقسم الحالة
   ====================================================================================================================== */
.cst-form { display: block; }
.cst-form.cst-card { display: grid; }
.cst-sheet:focus { outline: none; }
.cst-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.cst-fgrid > .shl-field--wide { grid-column: 1 / -1; }
@media (max-width: 559px) { .cst-fgrid { grid-template-columns: minmax(0, 1fr); } }
.cst .shl-field .shl-hint, .cst-sheet .shl-field .shl-hint { line-height: var(--lh-snug); order: 2; }
.cst .shl-field > .shl-error, .cst-sheet .shl-field > .shl-error { order: 1; }     /* الخطأ فوراً تحت الحقل، ثم التلميح (الورقة خارج .cst: dialog في body) */
.cst-sheet-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cst-zone { display: grid; gap: 10px; margin-top: 4px; padding: 16px; border-radius: var(--r-card); background: var(--surface-2); border: 1px solid var(--line); }
.cst-zone[data-state="blocked"] { border-style: dashed; border-color: var(--line-strong); }
.cst-zone-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cst-zone-note { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.cst-zone-block { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn-ink); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.cst-zone-block > .shl-icon { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.cst-zone-block div { display: grid; gap: 2px; line-height: var(--lh-snug); min-width: 0; }
.cst-zone-block strong { font-weight: var(--fw-black); }
.cst-zone-block small { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.cst-zone .shl-btn { justify-self: start; }
.cst-zone .shl-btn.is-blocked { border-style: dashed; opacity: .78; }
.cst-info-msg { font-weight: var(--fw-bold); color: var(--ink); }
.cst-info-detail { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); }

/* ======================================================================================================================
   شبكة التعديل المباشر (أنواع المستندات والدورات)
   ====================================================================================================================== */
.cst-gridform { display: block; }
.cst-grid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 980px; }
.cst-grow {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, auto) auto auto; align-items: center; gap: 10px 20px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.cst-grow[data-dirty="1"] { border-color: var(--gold-edge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent), var(--shadow-card); }
.cst-grow[data-inactive="1"] .cst-name-main strong { color: var(--muted); }
.cst-grow-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cst-grow-use { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cst-grow-inputs { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cst-grow-act { justify-self: end; }
.cst-grow-err { grid-column: 1 / -1; }
.cst-num { display: grid; gap: 4px; }
.cst-num-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cst-num-box { display: inline-flex; align-items: center; gap: 8px; }
.cst-num-box .shl-input { width: 92px; text-align: center; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums lining-nums; }
.cst-num-box em { color: var(--muted); font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cst-num-hint { color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
@media (max-width: 899px) {
  .cst-grow { grid-template-columns: minmax(0, 1fr) auto; }
  .cst-grow-use { grid-column: 1 / -1; grid-row: 2; }
  .cst-grow-inputs { grid-column: 1 / -1; grid-row: 3; gap: 12px 18px; }
  .cst-grow-act { grid-column: 2; grid-row: 1; }
}
.cst-savebar {
  position: sticky; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 16px; padding: 12px 16px; background: var(--surface-pop); border: 1px solid var(--gold-edge); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  animation: cst-bar-in var(--dur-3) var(--ease-out) backwards;
}
.cst-savebar[hidden] { display: none; }
@keyframes cst-bar-in { from { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cst-savebar { animation: none; } }
@media (max-width: 759px) { .cst-savebar { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom)); } }
.cst-savebar-main { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-heavy); }
.cst-savebar-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.cst-savebar-actions { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.cst-savebar-error { flex: 1 1 220px; min-width: 0; margin: 0; padding: 6px 12px; }
.cst-grow { scroll-margin-block: 96px 140px; }
@media (max-width: 559px) { .cst-savebar-actions { width: 100%; } .cst-savebar-actions .shl-btn--primary { flex: 1; } }

/* ======================================================================================================================
   حد الاعتماد
   ====================================================================================================================== */
.cst-approval { display: grid; gap: 18px; }
.cst-approval-grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cst-approval-main { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 899px) { .cst-approval-grid { grid-template-columns: minmax(0, 1fr); } }
.cst-approval .shl-kpi-value { font-size: var(--fs-4xl); }
.cst-ladder-card { align-content: start; }
.cst-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cst-ladder-step { display: flex; align-items: flex-start; gap: 12px; }
.cst-ladder-step > div { display: grid; gap: 2px; min-width: 0; line-height: var(--lh-snug); }
.cst-ladder-step strong { font-weight: var(--fw-black); }
.cst-ladder-step span { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.cst-amount { font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .2px; }

/* ======================================================================================================================
   أسعار الصرف
   ====================================================================================================================== */
.cst-rates { display: grid; gap: 22px; }
.cst-rates-form { max-width: 760px; }
.cst-rates-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cst-rates-pick { display: grid; gap: 6px; min-width: min(100%, 260px); }
.cst-month { min-width: 240px; }
.cst-rate-list { display: grid; }
.cst-rate { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(170px, 230px); align-items: center; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.cst-rate:first-child { border-top: 0; }
.cst-rate-code .cst-code { min-width: 54px; text-align: center; font-size: var(--fs-md); padding: 4px 10px; }
.cst-rate-main { display: grid; gap: 2px; min-width: 0; line-height: 1.4; }
.cst-rate-main strong { font-weight: var(--fw-black); }
.cst-rate-main small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cst-rate-field { display: flex; align-items: center; gap: 8px; }
.cst-rate-field em { flex: none; color: var(--muted); font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cst-rate .shl-error { grid-column: 1 / -1; }
@media (max-width: 559px) {
  .cst-rate { grid-template-columns: auto minmax(0, 1fr); }
  .cst-rate-field { grid-column: 1 / -1; }
}

/* ======================================================================================================================
   ربط الحسابات الافتراضية
   ====================================================================================================================== */
.cst-mapping { display: grid; gap: 18px; }
.cst-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.cst-map-card {
  position: relative; display: grid; gap: 12px; align-content: start; padding: 16px 16px 14px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.cst-map-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--ok); }
.cst-map-card[data-ok="0"]::before { background: var(--bad); }
.cst-map-card[data-ok="0"] { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.cst-map-head { display: flex; align-items: center; gap: 12px; }
.cst-map-titles { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.cst-map-titles strong { font-weight: var(--fw-black); }
.cst-map-titles small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cst-map-account { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-weight: var(--fw-bold); }
.cst-map-account.is-none { color: var(--muted); border-style: dashed; }
.cst-map-problem { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--bad-soft); color: var(--bad-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.cst-map-problem .shl-icon { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.cst-map-foot { display: flex; align-items: center; min-height: 36px; }
.cst-fixed { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.cst-fixed .shl-icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.cst-picker-list { display: grid; gap: 8px; }
.cst-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.cst-pick:hover:not(:disabled) { background: var(--hover); border-color: var(--brand-edge); }
.cst-pick[aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand); }
.cst-pick:disabled { opacity: .55; cursor: not-allowed; }
.cst-pick-main { display: grid; gap: 2px; min-width: 0; }
.cst-pick-main small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cst-pick-on { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.cst-pick-on .shl-icon { width: 16px; height: 16px; }

/* ======================================================================================================================
   الموقّعون والقوالب
   ====================================================================================================================== */
.cst-letters { display: grid; gap: 18px; }
@media (max-width: 559px) { .cst-letters .cst-form .cst-fgrid { grid-template-columns: minmax(0, 1fr); } }
.cst-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cst-tpl { display: grid; gap: 12px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.cst-tpl-head { display: flex; align-items: center; gap: 12px; }
.cst-tpl-head strong { font-weight: var(--fw-black); line-height: 1.35; }
.cst-tpl-kv { display: grid; gap: 6px; margin: 0; }
.cst-tpl-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cst-tpl-kv dt { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cst-tpl-kv dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: end; }
.cst-tpl-subject { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }

/* ======================================================================================================================
   الأرقام التسلسلية وثوابت العرض
   ====================================================================================================================== */
.cst-seq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-top: 12px; }
.cst-seq { display: grid; gap: 12px; align-content: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.cst-seq-head { display: flex; align-items: center; gap: 10px; }
.cst-seq-head strong { flex: 1; min-width: 0; font-weight: var(--fw-black); line-height: 1.35; }
.cst-seq-next, .cst-seq-last, .cst-seq-old { display: grid; gap: 3px; }
.cst-seq small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cst-seq-ref { justify-self: start; padding: 2px 12px; border-radius: var(--r-sm); background: var(--gold-soft); color: var(--gold-ink); font-size: var(--fs-lg); font-weight: var(--fw-black); letter-spacing: .4px; }
.cst-seq[data-used="0"] .cst-seq-ref { background: var(--surface-3); color: var(--ink-2); }
.cst-display { display: grid; gap: 14px; }
.cst-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.cst-dcard { gap: 14px; }
.cst-dcard--wide { grid-column: 1 / -1; }
.cst-dcard-head { display: flex; align-items: center; gap: 12px; }
.cst-dcard-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.cst-dcard .shl-table-wrap { box-shadow: none; }
.cst-dcard .shl-kv dd .cst-code { white-space: normal; overflow-wrap: anywhere; }
.cst-dcard .shl-kv dd { min-width: 0; }
/* @@CONSTANTS-CSS-END */

/* @@INSIGHTS-CSS-BEGIN */
/* مساعد الإغلاق الشهري: بادئة ins- — شريط الأشهر · ملخص بحلقة تقدّم · خطوات مرتّبة بعلامات تُقرأ بالشكل وخط واصل · تفاصيل قابلة للطي */
.ins-cl { display: grid; gap: 22px; min-width: 0; container: ins-cl / inline-size; }
.ins-cl .shl-ph { margin-bottom: 0; }

/* شريط الأشهر الاثنا عشر: يمتد حتى حافة الصفحة ويُسحب أفقياً */
.ins-months-wrap { min-width: 0; margin-inline: calc(var(--gutter) * -1); }
.ins-months { display: flex; gap: 10px; overflow-x: auto; padding: 6px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.ins-month {
  position: relative; flex: none; display: grid; align-content: start; gap: 8px; width: 152px; min-height: 104px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-xs);
  color: var(--ink); font: inherit; text-align: start; cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}
.ins-month:hover { transform: translateY(-2px); border-color: var(--brand-edge); box-shadow: var(--shadow-card); }
.ins-month:active { transform: scale(.98); }
.ins-month[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-soft); }
.ins-month[aria-pressed="true"]::after { content: ""; position: absolute; inset-inline: 16px; inset-block-end: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.ins-month[data-status="empty"], .ins-month[data-status="before_ledger"] { background: transparent; box-shadow: none; border-style: dashed; color: var(--muted); }
.ins-month[data-status="empty"][aria-pressed="true"], .ins-month[data-status="before_ledger"][aria-pressed="true"] { background: var(--brand-soft); border-style: solid; color: var(--ink); }
.ins-month-name { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1.2; }
.ins-month-name small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-month .shl-badge { justify-self: start; }
.ins-month-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: auto; }
.ins-month-meter .shl-progress { height: 5px; }
.ins-month-meter small { color: var(--muted); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.ins-months--skeleton { overflow: hidden; }
.ins-month-skel { flex: none; width: 152px; height: 104px; border-radius: var(--r-card); }

/* الشبكة: الخطوات (الرئيسي) والملخص (الجانبي، لاصق على الحاسوب)؛ على الجوال الملخص أولاً */
.ins-cl-grid { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; }
.ins-cl-main { grid-area: main; display: grid; gap: 16px; align-content: start; min-width: 0; }
.ins-cl-side { grid-area: side; min-width: 0; }
@container ins-cl (min-width: 940px) {
  .ins-cl-grid { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side"; }
  .ins-cl-side { position: sticky; inset-block-start: calc(var(--topbar-h) + 16px); }
}
.ins-state { padding: 8px; }

.ins-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.ins-hide-done { display: inline-flex; align-items: center; gap: 8px; }
.ins-hide-done .shl-icon { width: 15px; height: 15px; opacity: .45; }
.ins-hide-done[aria-pressed="true"] .shl-icon { opacity: 1; }
.ins-updated { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* مجموعات الخطوات */
.ins-group { padding: 0; overflow: hidden; }
.ins-group--skeleton { padding: 18px 20px; }
.ins-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 6px; }
.ins-group-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.ins-group-title::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 2px; background: var(--gold); }
.ins-group-count { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ins-steps { display: grid; margin: 0; padding: 4px 12px 14px; list-style: none; }

.ins-step { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 12px 8px; border-radius: var(--r-md); }
.ins-step[data-next="1"] { background: color-mix(in srgb, var(--brand-soft) 65%, transparent); }
.ins-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 24px; inset-block: 46px -12px; width: 2px; border-radius: 1px; background: var(--line-strong); }
.ins-step[data-status="done"]:not(:last-child)::before { background: color-mix(in srgb, var(--ok) 50%, var(--line)); }

/* علامة الخطوة: دائرة بعلامة ✓ · حلقة بقوس نسبتها · مربع مدوّر بقفل · دائرة متقطعة */
.ins-marker { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.ins-marker .shl-icon { width: 18px; height: 18px; stroke-width: 2.6; }
.ins-marker[data-status="done"] { border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); box-shadow: inset 0 0 0 2px var(--ok); }
.ins-marker[data-status="blocked"] { border-radius: 10px; background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset 0 0 0 2px var(--warn); }
.ins-marker[data-status="blocked"] .shl-icon { stroke-width: 2.2; }
.ins-marker[data-status="todo"] { border-radius: 50%; background: var(--surface); border: 2px dashed var(--ctl-border); }
.ins-marker[data-status="partial"] { border-radius: 50%; background: var(--surface); }
.ins-marker-ring { display: block; width: 100%; height: 100%; }
.ins-marker-track { stroke: var(--surface-3); }
.ins-marker-bar { stroke: var(--brand-fill); }

.ins-step-body { display: grid; gap: 6px 16px; min-width: 0; flex: 1; grid-template-columns: minmax(0, 1fr); }
.ins-step-info { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ins-subs { grid-column: 1 / -1; }
.ins-step-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.ins-step-title { flex: 1 1 200px; min-width: 0; margin: 0; font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ins-step[data-status="done"] .ins-step-title { color: var(--ink-2); }
.ins-step-tags { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.ins-counter { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-step-detail { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ins-blocker { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ins-blocker .shl-icon { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.ins-blocker strong { font-weight: var(--fw-heavy); }
.ins-step .shl-progress { height: 5px; max-width: 360px; }
.ins-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
.ins-toggle-icon { transition: transform var(--dur-2) var(--ease-out); }
.ins-toggle[aria-expanded="true"] .ins-toggle-icon { transform: rotate(180deg); }
.ins-toggle .shl-count { margin-inline-start: 2px; }
.ins-subs { display: grid; margin: 4px 0 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.ins-subs[hidden] { display: none; }
.ins-subs li + li { border-top: 1px solid var(--line); }
.ins-sub { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
a.ins-sub { transition: background-color var(--dur-2); }
a.ins-sub:hover, a.ins-sub:focus-visible { background: var(--hover); }
.ins-sub-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ins-sub-main strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.ins-sub-main small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.ins-sub-go { flex: none; width: 14px; height: 14px; color: var(--faint); }

/* ملخص الشهر */
.ins-sum { display: grid; gap: 18px; padding: 20px; overflow: hidden; }
.ins-sum--skeleton { padding: 20px; }
.ins-sum-top { display: flex; align-items: center; gap: 18px; }
.ins-ring { position: relative; flex: none; width: 120px; height: 120px; }
.ins-ring-svg { display: block; width: 100%; height: 100%; }
.ins-ring-track { stroke: var(--surface-3); }
.ins-ring-bar { stroke: var(--t, var(--brand-fill)); transition: stroke-dasharray var(--dur-4) var(--ease-out) 120ms; }
.ins-ring-bar.is-zero { display: none; }
.ins-ring-text { position: absolute; inset: 0; display: grid; place-content: center; gap: 3px; text-align: center; }
.ins-ring-text strong { direction: ltr; font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: 1; font-variant-numeric: tabular-nums; }
.ins-ring-text strong small { margin-inline-start: 1px; color: var(--muted); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.ins-ring-text span { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-sum-id { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.ins-sum-month { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.ins-sum-state { --c-soft: var(--surface-3); --c-ink: var(--ink-2); display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.ins-sum-state[data-tone="ok"] { --c-soft: var(--ok-soft); --c-ink: var(--ok-ink); }
.ins-sum-state[data-tone="warn"] { --c-soft: var(--warn-soft); --c-ink: var(--warn-ink); }
.ins-sum-state[data-tone="info"] { --c-soft: var(--brand-soft); --c-ink: var(--brand); }
.ins-sum-state-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-soft); color: var(--c-ink); }
.ins-sum-state-icon .shl-icon { width: 18px; height: 18px; }
.ins-sum-state strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.ins-sum-state small { display: block; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ins-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ins-stat { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.ins-stat dt { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); }
.ins-stat dt .ins-marker { width: 24px; height: 24px; }
.ins-stat dt .ins-marker .shl-icon { width: 13px; height: 13px; }
.ins-stat dt .ins-marker[data-status="blocked"] { border-radius: 8px; }
.ins-stat dd { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; line-height: 1; }
.ins-next { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.ins-next strong { font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.ins-next p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ins-next p.ins-next-block { display: flex; align-items: flex-start; gap: 8px; color: var(--warn-ink); }
.ins-next-block .shl-icon { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.ins-notes { display: grid; gap: 8px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.ins-notes li { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ins-notes .shl-icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }

@container ins-cl (max-width: 560px) {
  .ins-sum { padding: 16px; gap: 14px; }
  .ins-ring { width: 96px; height: 96px; }
  .ins-ring-text strong { font-size: var(--fs-2xl); }
  .ins-sum-month { font-size: var(--fs-xl); }
  .ins-group-head { padding-inline: 16px; }
  .ins-steps { padding-inline: 6px; }
  .ins-step { gap: 12px; padding-inline: 6px; }
  .ins-step:not(:last-child)::before { inset-inline-start: 22px; }
  .ins-step-actions { width: 100%; }
  .ins-step-actions .ins-cta { flex: 1 1 auto; min-height: var(--tap); }
  .ins-toggle { min-height: var(--tap); }
}

/* الإجراء في عمود جانبي بعرض ثابت على الحاسوب (بعد القواعد الأساسية كي لا تغلبه ترتيباً) */
@container ins-cl (min-width: 720px) {
  .ins-step-body { grid-template-columns: minmax(0, 1fr) 172px; }
  .ins-step-actions { grid-column: 2; grid-row: 1; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; margin-top: 0; }
  .ins-step-actions .shl-btn { justify-content: space-between; }
}

/* اللوحي: الملخص بعمودين (الهوية والحال | العدّادات والخطوة التالية) بدل عمود طويل بعرض الصفحة */
@container ins-cl (min-width: 600px) and (max-width: 939px) {
  .ins-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
  .ins-sum-top { grid-column: 1; grid-row: 1; }
  .ins-sum-state { grid-column: 1; grid-row: 2; }
  .ins-stats { grid-column: 2; grid-row: 1; }
  .ins-next { grid-column: 2; grid-row: 2; padding-top: 0; border-top: 0; }
  .ins-notes { grid-column: 1 / -1; }
}

/* الذكاء داخل النماذج: بادئة ins- — شرائح اقتراح الحساب بنسبة الثقة، ولافتة «يشبه مصروفاً سابقاً» قبل الحفظ */
.ins-suggest { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--brand-edge); border-radius: var(--r-md); background: var(--surface-2); animation: ins-pop var(--dur-3) var(--ease-out) backwards; }
.ins-suggest[hidden] { display: none; }
.ins-suggest-head { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-black); }
.ins-suggest-head .shl-icon { width: 14px; height: 14px; }
.ins-suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-sg {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: start; cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.ins-sg:hover { background: var(--brand-soft); border-color: var(--brand-edge); }
.ins-sg:active { transform: scale(.97); }
.ins-sg[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.ins-sg-code { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.ins-sg[aria-pressed="true"] .ins-sg-code { color: var(--brand); }
.ins-sg-name { min-width: 0; overflow-wrap: anywhere; }
.ins-sg-meter { display: inline-flex; flex: none; align-items: flex-end; gap: 2px; height: 14px; }
.ins-sg-meter i { width: 3px; border-radius: 1px; background: var(--line-strong); }
.ins-sg-meter i:nth-child(1) { height: 6px; }
.ins-sg-meter i:nth-child(2) { height: 10px; }
.ins-sg-meter i:nth-child(3) { height: 14px; }
.ins-sg-meter i.is-on { background: var(--brand-fill); }
.ins-sg[data-level="1"] .ins-sg-meter i.is-on { background: var(--warn); }
.ins-sg-pct { flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.ins-suggest-why { margin: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ins-suggest-why q { quotes: "«" "»"; color: var(--ink-2); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.ins-suggest-warn { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--warn-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ins-suggest-warn .shl-icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* لافتة المراجعة قبل الحفظ: أعلى النموذج، بحدّ جانبي بنبرة الخطورة */
.ins-review {
  --c: var(--warn); --c-soft: var(--warn-soft); --c-ink: var(--warn-ink);
  display: grid; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-inline-start: 4px solid var(--c);
  border-radius: var(--r-md); background: var(--c-soft); color: var(--ink); outline: none; animation: ins-pop var(--dur-3) var(--ease-out) backwards;
}
.ins-review:focus-visible { box-shadow: 0 0 0 4px var(--focus-soft); }
.ins-review[data-tone="bad"] { --c: var(--bad); --c-soft: var(--bad-soft); --c-ink: var(--bad-ink); }
.ins-review-head { display: flex; align-items: flex-start; gap: 12px; }
.ins-review-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--c-ink); }
.ins-review-icon .shl-icon { width: 24px; height: 24px; }
.ins-review h3 { margin: 0; color: var(--c-ink); font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.ins-review-head p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ins-dups { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ins-dup { display: grid; gap: 4px; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ins-dup-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ins-dup-no { font-size: var(--fs-sm); font-weight: var(--fw-black); }
.ins-dup-text { margin: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ins-dup-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-dup-meta span + span::before { content: "·"; margin-inline-end: 8px; color: var(--faint); }
.ins-dup-open { margin-inline-start: auto; }
.ins-review-more { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-warns { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ins-warn { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ins-warn .shl-icon { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.ins-warn[data-severity="bad"] .shl-icon { color: var(--bad-ink); }
.ins-warn[data-severity="warn"] .shl-icon { color: var(--warn-ink); }
.ins-warn[data-severity="info"] .shl-icon { color: var(--brand); }
.ins-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 759px) {
  .ins-review-actions .shl-btn { flex: 1 1 auto; min-height: var(--tap); }
  .ins-dup-open { min-height: var(--tap); }
  .ins-sg { min-height: var(--tap); }
}

/* الرؤى الذكية في لوحة التحكم: بادئة ins- — ملخص بالأعداد · حبّات الفئات · صفوف بخطورة تُقرأ بالشكل · تأجيل بتراجع · حالة «كل شيء على ما يرام» */
@keyframes ins-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
@keyframes ins-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.ins-panel { display: grid; gap: 12px; min-width: 0; }
.ins-panel .shl-state { padding: 22px 12px; }
.ins-skeletons { display: grid; gap: 4px; padding: 6px 4px 4px; }
.ins-skel-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; }
.ins-skel-tile { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.ins-skel-lines { display: grid; flex: 1; gap: 10px; padding-top: 4px; }
.ins-skel-line { height: 14px; }
.ins-skel-line--short { width: 62%; }

/* الرأس: عدّادات الخطورة (شارات بعلامات مختلفة الشكل) وزر التحديث */
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.ins-counts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ins-refresh[data-spin="1"] .shl-icon { animation: shl-spin 900ms linear infinite; }
.ins-refresh[disabled] { opacity: .85; }

/* حبّات الفئات: صف واحد قابل للسحب بحواف متلاشية */
.ins-cats {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 6px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
}
.ins-cats::-webkit-scrollbar { display: none; }
.ins-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 12px 8px; }
.ins-chip[aria-pressed="true"] .shl-count { background: var(--surface); color: var(--brand); }
.ins-chip[data-worst="bad"] .shl-count { background: var(--bad-soft); color: var(--bad-ink); }
.ins-chip[data-worst="warn"] .shl-count { background: var(--warn-soft); color: var(--warn-ink); }

/* الصفوف */
.ins-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ins-item { position: relative; display: grid; gap: 10px; padding: 14px 8px 12px; }
.ins-item + .ins-item { border-top: 1px solid var(--line); }
.ins-item.shl-rise[data-i="1"] { animation-delay: 50ms; }
.ins-item.shl-rise[data-i="2"] { animation-delay: 100ms; }
.ins-item.shl-rise[data-i="3"] { animation-delay: 150ms; }
.ins-item.shl-rise[data-i="4"], .ins-item.shl-rise[data-i="5"] { animation-delay: 200ms; }
.ins-main { display: flex; align-items: flex-start; gap: 12px; }

/* بلاطة الخطورة: عاجل = مربع مدوّر بإطار مصمت · للمتابعة = مربع بإطار متقطع · للعلم = دائرة (وكل منها بأيقونة مختلفة وكلمة صريحة) */
.ins-tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.ins-tile .shl-icon { width: 21px; height: 21px; }
.ins-tile[data-severity="bad"] { border-radius: 11px; background: var(--bad-soft); color: var(--bad-ink); box-shadow: inset 0 0 0 2px var(--bad); }
.ins-tile[data-severity="warn"] { border-radius: 11px; background: var(--warn-soft); color: var(--warn-ink); border: 1.5px dashed var(--warn); }
.ins-tile[data-severity="info"] { border-radius: 50%; background: var(--brand-soft); color: var(--brand); }

.ins-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.ins-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: var(--lh-snug); text-wrap: balance; overflow-wrap: anywhere; }
.ins-detail {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0;
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow-wrap: anywhere;
}
.ins-item[data-expanded="1"] .ins-detail { display: block; overflow: visible; -webkit-line-clamp: unset; }
.ins-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.ins-cat { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* المقياس: عمود أرقام بارز بلون الخطورة؛ المبالغ سطر داخل النص */
.ins-metric { flex: none; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 56px; padding-top: 1px; text-align: center; line-height: 1.1; }
.ins-metric-value { color: var(--ink); font-size: var(--fs-2xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ins-metric-unit { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-metric--inline { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; padding: 0; }
.ins-metric--inline .ins-metric-value { font-size: var(--fs-md); }
.ins-item[data-severity="bad"] .ins-metric-value { color: var(--bad-ink); }
.ins-item[data-severity="warn"] .ins-metric-value { color: var(--warn-ink); }

/* الإجراءات تحاذي النص لا الأيقونة */
.ins-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ins-more-icon, .ins-all-icon { transition: transform var(--dur-2) var(--ease-out); }
.ins-more[aria-expanded="true"] .ins-more-icon, .ins-all[aria-expanded="true"] .ins-all-icon { transform: rotate(180deg); }
.ins-more .shl-count { margin-inline-start: 2px; }
.ins-actions .shl-btn--quiet { padding-inline: 8px; }
.ins-actions .shl-btn--quiet .shl-icon { width: 16px; height: 16px; }

.ins-tray, .ins-samples { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.ins-tray { display: grid; gap: 8px; padding: 10px 12px; animation: ins-pop var(--dur-2) var(--ease-out) backwards; }
.ins-tray[hidden], .ins-samples[hidden] { display: none; }
.ins-tray-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.ins-tray-options { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-snooze-opt { min-height: 36px; padding-inline: 12px; }

.ins-samples { display: grid; margin-block: 0; padding: 0; list-style: none; overflow: hidden; }
.ins-samples li + li { border-top: 1px solid var(--line); }
.ins-sample { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
a.ins-sample { transition: background-color var(--dur-2); }
a.ins-sample:hover, a.ins-sample:focus-visible { background: var(--hover); }
.ins-sample-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ins-sample-main strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.ins-sample-main small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.ins-sample-go { flex: none; width: 14px; height: 14px; color: var(--faint); }

/* شريط التراجع بعد التأجيل: يتناقص شريطه الرفيع طوال مهلته (8 ثوانٍ، وتطابق INS_UNDO_MS) */
.ins-item--undo { display: flex; align-items: center; gap: 12px; margin-block: 6px; padding: 12px 12px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); animation: ins-pop var(--dur-2) var(--ease-out) backwards; }
.ins-item--undo + .ins-item, .ins-item + .ins-item--undo { border-top-color: transparent; }
.ins-item--undo::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: var(--brand-fill); transform-origin: right center; animation: ins-drain 8s linear forwards; }
.ins-undo-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); }
.ins-undo-icon .shl-icon { width: 18px; height: 18px; }
.ins-undo-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ins-undo-text strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.ins-undo-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
@media (prefers-reduced-motion: reduce) { .ins-item--undo::after { display: none; } }

.ins-all { justify-self: center; }

/* حالة «كل شيء على ما يرام»: هادئة، بموجة رفيعة وجوانب مفحوصة */
.ins-ok { position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 16px 58px; overflow: hidden; text-align: center; }
.ins-ok > :not(.ins-ok-wave) { position: relative; }
.ins-ok-wave { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; height: 54px; opacity: .55; pointer-events: none; --wave-1: var(--ok); --wave-2: var(--gold); --wave-3: var(--accent); }
.ins-ok-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok-soft) 55%, transparent); }
.ins-ok-icon .shl-icon { width: 28px; height: 28px; }
.ins-ok strong { margin-top: 6px; font-size: var(--fs-lg); font-weight: var(--fw-black); }
.ins-ok-text { max-width: 34ch; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.ins-ok-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ins-ok-list li { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-ok-list .shl-icon { width: 13px; height: 13px; }

/* التذييل والمؤجَّلة */
.ins-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ins-note .shl-icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.ins-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 6px 4px 0; border-top: 1px solid var(--line); }
.ins-foot:has(:only-child) { justify-content: flex-start; }
.ins-time { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-gone-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; animation: ins-pop var(--dur-2) var(--ease-out) backwards; }
.ins-gone { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 8px 8px 12px; }
.ins-gone + .ins-gone { border-top: 1px solid var(--line); }
.ins-gone-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 180px; }
.ins-gone-text strong { font-size: var(--fs-sm); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.ins-gone-text small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

@media (max-width: 759px) {
  .ins-item { padding-inline: 4px; }
  .ins-metric { min-width: 48px; }
  .ins-metric-value { font-size: var(--fs-xl); }
  .ins-actions .shl-btn { min-height: var(--tap); }
}

/* فروق المرتبات عن الشهر السابق (تبويب في شاشة المرتبات): بادئة ins- */
.pay-filters { flex-wrap: wrap; }   /* تبويب «الفروق» الثالث لا يُخرج الصف عن عرض الهاتف */
.pay-variance { display: grid; gap: 16px; min-width: 0; }
.ins-var { display: grid; gap: 16px; min-width: 0; }
.ins-var-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ins-var-label { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ins-var-result { display: grid; gap: 16px; min-width: 0; }
.ins-var-range { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ins-var-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 980px) { .ins-var-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .ins-var-kpis .shl-kpi { padding: 14px 14px 12px; } .ins-var-kpis .shl-kpi-icon { display: none; } .ins-var-kpis .shl-kpi-value { font-size: 20px; } }
.ins-var-table { overflow: hidden; padding: 0; }
.ins-var-table .shl-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

.ins-var-who { display: grid; gap: 2px; justify-items: start; }
.ins-var-who strong { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.ins-var-who small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-var-who .shl-badge { margin-top: 2px; }

/* الفرق: اتجاه بسهم (أعلى/أسفل) لا بلون وحده؛ وما تجاوز العتبة بخلفية ذهبية */
.ins-delta { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-pill); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-delta .shl-icon { width: 14px; height: 14px; stroke-width: 2.8; }
.ins-delta small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-delta[data-dir="up"] { color: var(--ink); }
.ins-delta[data-dir="down"] { color: var(--ink); }
.ins-delta[data-over="1"] { background: var(--warn-soft); color: var(--warn-ink); }
.ins-delta[data-over="1"] small { color: var(--warn-ink); }
.ins-delta[data-dir="flat"] { color: var(--faint); }

.ins-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ins-reason { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ins-reason-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-reason[data-code="new"], .ins-reason[data-code="left"] { background: var(--brand-soft); color: var(--brand); }
.ins-quiet { color: var(--faint); }
/* @@INSIGHTS-CSS-END */

/* @@DASHBOARD-CSS-BEGIN */
/* لوحة التحكم: بادئة dsh- — ترحيب · وصول سريع · KPI · «ما يحتاج إجراءً» · حاويتا الرؤى والمهام */
.dsh { display: grid; gap: 30px; container: dsh / inline-size; }   /* التخطيط بحسب عرض المحتوى لا الشاشة: القائمة الجانبية تقتطع 280px */

/* المقدّمة: ترويسة تحريرية كبيرة وموجة زخرفية في الطرف المقابل */
.dsh-hero { position: relative; }
.dsh-hero .shl-ph { position: relative; z-index: 1; margin-bottom: 0; }
.dsh-hero .shl-ph-title { font-size: clamp(30px, 2.6vw + 18px, 46px); }
.dsh-hero .shl-ph-sub { font-size: var(--fs-lg); color: var(--ink-2); }
.dsh-hero-wave { display: none; position: absolute; inset-block-start: -6px; inset-inline-end: 0; width: min(36%, 460px); height: 128px; opacity: .8; pointer-events: none; --wave-1: var(--brand); --wave-2: var(--gold); --wave-3: var(--accent); }
@container dsh (min-width: 1000px) { .dsh-hero-wave { display: block; } }   /* الموجة لا تظهر إلا إن اتّسع المحتوى كي لا تتداخل مع التحية */
.dsh-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* الوصول السريع */
.dsh-quick .shl-section-head { margin-bottom: 12px; }
.dsh-quick-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container dsh (min-width: 900px) { .dsh-quick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dsh-q {
  position: relative; display: grid; gap: 14px; align-content: space-between; min-height: 112px; padding: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  color: var(--ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.dsh-q::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 16px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); transform-origin: right; transition: transform var(--dur-3) var(--ease-out); }
.dsh-q:hover, .dsh-q:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--brand-edge); }
.dsh-q:hover::before, .dsh-q:focus-visible::before { transform: scaleX(2); }
.dsh-q:active { transform: scale(.98); }
.dsh-q-tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); transition: transform var(--dur-3) var(--ease-spring); }
.dsh-q-tile .shl-icon { width: 24px; height: 24px; }
.dsh-q:hover .dsh-q-tile { transform: scale(1.06) rotate(-4deg); }
.dsh-q-label { font-size: var(--fs-md); font-weight: var(--fw-heavy); line-height: 1.35; text-wrap: balance; }
@media (max-width: 759px) {
  .dsh-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .dsh-q { min-height: 104px; padding: 12px; gap: 10px; }
  .dsh-q-tile { width: 40px; height: 40px; border-radius: 12px; }
  .dsh-q-label { font-size: var(--fs-sm); }
}
.dsh-pick-group { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dsh-pick-group legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-black); }

/* مؤشرات KPI */
.dsh-kpis { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container dsh (min-width: 980px) { .dsh-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dsh-kpis[hidden] { display: none; }
@media (max-width: 759px) { .dsh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dsh-kpis .shl-kpi { padding: 14px 14px 12px; } .dsh-kpis .shl-kpi-icon { display: none; } .dsh-kpis .shl-kpi-value { font-size: 20px; flex-wrap: wrap; column-gap: 6px; min-width: 0; } }
.shl-kpi.shl-rise[data-i="1"] { animation-delay: 60ms; }
.shl-kpi.shl-rise[data-i="2"] { animation-delay: 120ms; }
.shl-kpi.shl-rise[data-i="3"] { animation-delay: 180ms; }

/* التخطيط: العمود الرئيسي + العمود الجانبي (الرؤى والمهام) */
.dsh-cols { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@container dsh (min-width: 980px) { .dsh-cols { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); align-items: start; } }
.dsh-main, .dsh-side { display: grid; gap: 24px; min-width: 0; align-content: start; }

/* بطاقات اللوحة */
.dsh-panel { overflow: hidden; }
.dsh-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 6px; }
.dsh-panel-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.dsh-panel-title::before { content: ""; flex: none; width: 4px; height: 20px; border-radius: 2px; background: var(--gold); }
.dsh-slot .dsh-panel-title::before { display: none; }
.dsh-slot-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--t-soft, var(--brand-soft)); color: var(--t, var(--brand)); }
.dsh-slot-icon .shl-icon { width: 18px; height: 18px; }
.dsh-slot-body { padding: 4px 12px 16px; }
.dsh-skeletons { padding: 16px 20px 20px; }

/* «ما يحتاج إجراءً الآن» */
.dsh-att-list { display: grid; padding: 6px 8px 8px; }
.dsh-att { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: background-color var(--dur-2); }
.dsh-att + .dsh-att::before { content: ""; position: absolute; inset-inline: 12px; inset-block-start: -1px; height: 1px; background: var(--line); }
.dsh-att:hover, .dsh-att:focus-visible { background: var(--hover); }
.dsh-att-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; }
.dsh-att-icon .shl-icon { width: 22px; height: 22px; }
.dsh-att--bad .dsh-att-icon { background: var(--bad-soft); color: var(--bad-ink); }
.dsh-att--warn .dsh-att-icon { background: var(--warn-soft); color: var(--warn-ink); }
.dsh-att--info .dsh-att-icon { background: var(--brand-soft); color: var(--brand); }
.dsh-att-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dsh-att-body strong { font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.dsh-att-text { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.dsh-hint { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.dsh-att > .shl-badge { flex: none; }
.dsh-att-go { width: 16px; height: 16px; flex: none; color: var(--faint); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2); }
.dsh-att:hover .dsh-att-go { transform: translateX(-4px); color: var(--brand); }
@media (max-width: 759px) { .dsh-att { flex-wrap: wrap; } .dsh-att > .shl-badge { order: 3; } .dsh-att-go { display: none; } }
.dsh-ok { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.dsh-ok-label { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ok-ink); font-size: var(--fs-sm); font-weight: var(--fw-black); line-height: 28px; }
.dsh-ok-label .shl-icon { width: 18px; height: 18px; color: var(--ok); }
.dsh-ok ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dsh-ok a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-decoration: none; }
.dsh-ok a:hover { background: color-mix(in srgb, var(--ok-soft) 70%, var(--ok)); }
/* @@DASHBOARD-CSS-END */