/* =====================================================================
   Legal PMS — نظام التصميم الموحّد (Design System)
   الألوان الأساسية جاية من إعدادات المكتب (ThemeService) كمتغيرات في الـ Layout:
   --primary / --primary-dark / --bg / --sidebar / --sidebar-text
   أي صفحة جديدة: استخدم الكلاسات دي بدل الـ inline styles.
   ===================================================================== */

:root {
    /* الافتراضي = القالب البرونزي (نفس قيم ThemeSettings) — _Layout يكتب ألوان المكتب المحفوظة فوقها */
    --primary: #8f643c;
    --primary-dark: #74502f;
    /* اللون الأساسي كنص على خلفية فاتحة: _Layout بيغمّقه لو لون المكتب فاتح (Ui.TextColor) — غير كده هو نفسه */
    --primary-text: var(--primary);
    /* لون العناوين فوق الشريط العلوي (--sidebar): _Layout بيحسبه بـ Ui.OnColor — أبيض للغامق وغامق للفاتح */
    --sidebar-on: #fff;
    --primary-50: color-mix(in srgb, var(--primary) 7%, #fff);
    --primary-100: color-mix(in srgb, var(--primary) 13%, #fff);
    --primary-200: color-mix(in srgb, var(--primary) 25%, #fff);
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);

    --bg: #f4f6fa;
    --card: #ffffff;
    --surface-2: #f8fafc;
    --text: #0f172a;
    --text-2: #334155;
    /* muted: نص ثانوي — 4.5:1 على الأبيض وعلى خلفيات كل القوالب. faint: للحدود والأيقونات الباهتة فقط — ليس لون نص (2.56:1) */
    --muted: #5a6a80;
    --faint: #94a3b8;
    --border: #e4e8ef;
    --border-strong: #d0d6e0;

    --success: #16a34a; --success-bg: #dcfce7; --success-tx: #166534;
    --danger: #dc2626;  --danger-bg: #fee2e2;  --danger-tx: #991b1b;
    --warning: #d97706; --warning-bg: #fef3c7; --warning-tx: #92400e;
    --info-bg: #dbeafe; --info-tx: #1e40af;

    --sidebar: #191514;
    --sidebar-text: #f1ecdd;
    --sidebar-width: 268px;
    --topbar-h: 64px;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 8px 24px -6px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .05);
    --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .25);

    --ctl-h: 42px;
    /* لون النص فوق اللون الأساسي — بيتحسب لكل مكتب في الـ Layout (أبيض أو غامق حسب اللون) */
    --on-primary: #fff;

    /* درجات الحالة: -soft خلفية أفتح من -bg، -border حدودها، -strong أغمق (نص أبيض فوقه مقروء) */
    --success-soft: #f0fdf4; --success-border: #bbf7d0; --success-strong: #15803d;
    --danger-soft: #fef2f2;  --danger-border: #fecaca;  --danger-strong: #b91c1c;
    --warning-soft: #fffbeb; --warning-border: #fde68a;
    --info-soft: #eff6ff;    --info-border: #bfdbfe;
    --purple: #7c3aed;       --purple-bg: #f5f3ff;

    /* ألوان الرسوم في التقارير (--viz-<رمز>) — الـ JS (reports-charts.js) و .rp-dot[data-viz] يقرآنها بالرمز نفسه:
       primary = السلسلة الأساسية (لون المكتب) · compare = السلسلة المقارَنة · other = «أخرى / غير محدد»
       c2…c5 = فئات إضافية هادئة · g1/g2 = درجات رمادية · success = الكسب · والباقي ألوان شارات الحالات (blue/green/amber/red/purple/gray). */
    --viz-primary: var(--primary); --viz-compare: #94a3b8; --viz-other: #cbd5e1; --viz-success: var(--success);
    --viz-c2: #0f766e; --viz-c3: #b45309; --viz-c4: #be185d; --viz-c5: #4d7c0f; --viz-g1: #64748b; --viz-g2: #94a3b8;
    --viz-blue: #2563eb; --viz-green: var(--success); --viz-amber: var(--warning); --viz-red: var(--danger); --viz-purple: var(--purple); --viz-gray: #94a3b8;

    /* سلّم أحجام الخط الصغيرة (أقل حجم 12px) — أي حجم تحت 1rem ياخد درجة من دول */
    --fs-xs: .75rem; --fs-sm: .8rem; --fs-md: .85rem; --fs-lg: .9rem; --fs-xl: .95rem;

    /* طبقات z-index — من الأقل للأعلى */
    --z-sticky: 20; --z-backdrop: 110; --z-sidebar: 120; --z-topbar: 130; --z-dropdown: 300; --z-select: 400;
    --z-modal: 1100; --z-menu: 1200; --z-confirm: 1300; --z-picker: 9999; --z-toast: 10000;
}

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* clip (مش hidden): hidden بيخلّي الصفحة حاوية تمرير فبيعطّل position: sticky في السيستم كله */
html, body { overflow-x: clip; }
/* التركيز بالكيبورد: شكل واحد لكل ما ليس له شكل خاص (الروابط، الأزرار، التبويبات...) — ووالشريط العلوي الغامق بلون فاتح */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-offset: -2px; }
body {
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.6; font-size: 14px;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--primary-200); }
.ic { flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.ltr { direction: ltr; unicode-bidi: plaintext; }
.num { direction: ltr; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
div.num, .v.num, dd.num { text-align: right; }
.nowrap { white-space: nowrap; }
.text-link { color: var(--primary-text); text-decoration: none; font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ====================================================================
   الهيكل: شريط جانبي + شريط علوي + المحتوى
   ==================================================================== */
/* الشريط العلوي بعرض الصفحة كلها وبلون المكتب الغامق (--sidebar / --sidebar-text من إعدادات المظهر)،
   وتحته: القائمة الجانبية الفاتحة (من خلفية المكتب --bg) + المحتوى. */
:root { --sb-bg: color-mix(in srgb, var(--bg) 95%, var(--sidebar)); --sb-line: color-mix(in srgb, var(--border) 80%, var(--sidebar)); --tb-radius: 14px; }
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.topbar {
    height: var(--topbar-h); position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: 14px;
    padding: 0 18px; background: var(--sidebar); color: var(--sidebar-text);
}
/* الركنان المدوّران تحت الشريط (زي إطار حوالين الصفحة) — ثابتين مع التمرير */
.topbar::before, .topbar::after { content: ""; position: absolute; top: 100%; width: var(--tb-radius); height: var(--tb-radius); pointer-events: none; }
.topbar::before { right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--tb-radius) - .5px), var(--sidebar) var(--tb-radius)); }
.topbar::after { left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--tb-radius) - .5px), var(--sidebar) var(--tb-radius)); }
.topbar > a:focus-visible, .topbar > button:focus-visible, .topbar .icon-btn:focus-visible, .topbar .user-btn:focus-visible, .crumbs a:focus-visible { outline: 2px solid var(--sidebar-on); outline-offset: 2px; }
/* القوائم المنسدلة من الشريط (التنبيهات، المستخدم) على خلفية بيضا — ترجع لألوان النص العادية */
.topbar .dropdown, .topbar .nt-pop { color: var(--text); }

/* الشعار واسم المكتب — بعرض القائمة الجانبية عشان زر القائمة والمسار يبدأوا مع المحتوى */
.tb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; width: calc(var(--sidebar-width) - 18px - 14px); text-decoration: none; color: inherit; }
.tb-brand .sb-logo { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; }
.tb-brand .sb-logo img { border-radius: 10px; padding: 3px; }
/* شعار مرفوع: بياخد عرضه الطبيعي (الشعارات العريضة مبتتصغّرش جوه مربع) — بارتفاع ثابت وحد أقصى للعرض */
.tb-brand .sb-logo:has(img) { display: block; width: auto; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 9px; overflow: hidden; line-height: 0; }
.tb-brand .sb-logo:has(img) img { display: block; width: auto; height: 55px; max-width: 190px; object-fit: contain; padding: 0; border-radius: 0; background: none; }
.tb-brand-tx { min-width: 0; line-height: 1.3; display: flex; flex-direction: column; }
.tb-name { color: var(--sidebar-on); font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-logo {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--primary) 60%, transparent);
}
.sb-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; background: #fff; padding: 4px; }

.icon-btn {
    width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border); background: var(--card); color: var(--text-2); transition: background .15s, border-color .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.topbar .icon-btn { border-color: color-mix(in srgb, var(--sidebar-on) 14%, transparent); background: transparent; color: var(--sidebar-text); }
.topbar .icon-btn:hover { background: color-mix(in srgb, var(--sidebar-on) 10%, transparent); border-color: color-mix(in srgb, var(--sidebar-on) 22%, transparent); color: var(--sidebar-on); }
.tb-title { flex: 1; min-width: 0; }
/* مسار التنقّل وآخره الصفحة الحالية (على الموبايل بيتبدّل باسم الصفحة .tb-page) */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-lg); color: color-mix(in srgb, var(--sidebar-text) 78%, transparent); white-space: nowrap; overflow: hidden; }
.crumbs > * { flex: none; }
.crumb-now { flex: 0 1 auto; min-width: 0; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; font-weight: 800; color: var(--sidebar-on); }
.crumbs a { text-decoration: none; color: inherit; }
.crumbs a:hover { color: var(--sidebar-on); }
.crumbs .ic { width: 13px; height: 13px; opacity: .6; transform: scaleX(-1); }

/* القائمة الجانبية: فاتحة وثابتة تحت الشريط العلوي */
.sidebar {
    width: var(--sidebar-width); background: var(--sb-bg); color: var(--text-2);
    position: fixed; top: var(--topbar-h); bottom: 0; right: 0; display: flex; flex-direction: column; z-index: var(--z-sidebar);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    border-inline-end: 1px solid var(--sb-line);
}
body.collapsed .sidebar { transform: translateX(100%); }

.sb-nav { flex: 1; padding: 14px 12px 16px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .2) transparent; }
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .2); border-radius: 3px; }
.sb-section { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .6px; padding: 18px 12px 6px; color: var(--muted); }

.sb-link, .sb-group > .sb-head {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 2px;
    border: 1px solid transparent; background: transparent; border-radius: 9px; cursor: pointer; text-decoration: none; text-align: start;
    color: var(--text-2); font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; transition: background .15s, color .15s;
}
.sb-link .ic, .sb-head .ic { width: 19px; height: 19px; opacity: .8; }
.sb-link:hover, .sb-group > .sb-head:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.sb-link.active { background: var(--card); border-color: var(--sb-line); color: var(--text); font-weight: 800; box-shadow: var(--shadow-xs); }
.sb-link.active .ic { opacity: 1; color: var(--primary-text); }
.sb-head .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sb-head .chev { width: 16px; height: 16px; transition: transform .25s; opacity: .6; }
.sb-group.open > .sb-head .chev { transform: rotate(180deg); }
.sb-group.has-active > .sb-head { color: var(--text); }
.sb-group.has-active > .sb-head .ic:first-child { color: var(--primary-text); opacity: 1; }

/* المستوى الثالث في القائمة (التقارير › القضايا › التقارير): عنوان فرعي بيفتح/يقفل وتحته روابطه */
.sb-subhead { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; margin: 1px 0; margin-inline-start: 8px; width: calc(100% - 8px);
    border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; text-align: start; color: var(--text-2); font-size: var(--fs-md); font-weight: 700; transition: background .15s, color .15s; }
.sb-subhead:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sb-subhead .t { flex: 1; }
.sb-subhead .chev { width: 14px; height: 14px; opacity: .6; transition: transform .25s; }
.sb-subgroup.open > .sb-subhead .chev { transform: rotate(180deg); }
.sb-subgroup.has-active > .sb-subhead { color: var(--text); }
.sb-subpanel { display: none; padding-inline-start: 14px; }
.sb-subgroup.open > .sb-subpanel { display: block; }
.sb-sub.is-l3 { font-size: var(--fs-sm); white-space: normal; line-height: 1.5; padding-block: 5px; }
.sb-sub.is-l3.active::before { display: none; }/* أول صف في القائمة: «الرئيسية» وقصادها زر إخفاء القائمة. زر الشريط العلوي (.tb-toggle) للموبايل بس */
.sb-first { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.sb-first .sb-link { flex: 1; min-width: 0; margin-bottom: 0; }
.sb-toggle { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sb-toggle:hover { background: var(--card); border-color: var(--sb-line); color: var(--text); }
.tb-toggle { display: none; }

/* ===== القائمة وهي مقفولة (شاشات كبيرة) — الشكل من إعدادات المظهر: body[data-sb-mode] =====
   rail  = شريط أيقونات رفيع (الزر فوق في نفس مكانه، والضغط على أيقونة قسم بيفتح القائمة عليه)
   tab   = القائمة بتختفي كليًا ويفضل لسان (.sb-tab) على حافة الصفحة
   fixed = القائمة ثابتة مفتوحة ومفيش زر إخفاء */
:root { --sb-rail: 60px; }
.sb-tab { display: none; position: fixed; right: 0; top: calc(var(--topbar-h) + 18px); z-index: var(--z-sticky); width: 30px; height: 40px; place-items: center; padding: 0; cursor: pointer;
    border: 1px solid var(--sb-line); border-right: none; border-radius: 10px 0 0 10px; background: var(--card); color: var(--text-2); box-shadow: var(--shadow-xs); transition: color .15s, width .15s; }
.sb-tab:hover { color: var(--primary-text); width: 36px; }
@media (min-width: 993px) {
    .sidebar { transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .22s cubic-bezier(.4, 0, .2, 1); }
    body[data-sb-mode="fixed"] .sb-toggle { display: none; }

    body[data-sb-mode="tab"].collapsed .sb-tab { display: grid; }
    body[data-sb-mode="tab"].collapsed .content { padding-inline-start: 52px; }

    body[data-sb-mode="rail"].collapsed .sidebar { transform: none; width: var(--sb-rail); }
    body[data-sb-mode="rail"].collapsed .main { margin-right: var(--sb-rail); }
    body[data-sb-mode="rail"].collapsed .sb-nav { padding-inline: 8px; }
    body[data-sb-mode="rail"].collapsed .sb-first { flex-direction: column-reverse; gap: 4px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sb-line); }
    body[data-sb-mode="rail"].collapsed .sb-toggle { width: 100%; height: 40px; }
    body[data-sb-mode="rail"].collapsed .sb-first .sb-link { flex: none; width: 100%; }
    body[data-sb-mode="rail"].collapsed .sb-link, body[data-sb-mode="rail"].collapsed .sb-group > .sb-head { justify-content: center; gap: 0; padding: 10px 0; }
    body[data-sb-mode="rail"].collapsed .sb-link > span, body[data-sb-mode="rail"].collapsed .sb-head .t,
    body[data-sb-mode="rail"].collapsed .sb-head .chev, body[data-sb-mode="rail"].collapsed .sb-panel { display: none; }
    body[data-sb-mode="rail"].collapsed .sb-group.has-active > .sb-head { background: var(--card); border-color: var(--sb-line); box-shadow: var(--shadow-xs); }
}.sb-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .26s cubic-bezier(.4, 0, .2, 1), visibility .26s; }
.sb-group.open > .sb-panel { grid-template-rows: 1fr; visibility: visible; }
.sb-panel-in { overflow: hidden; padding-inline-start: 22px; position: relative; }
.sb-panel-in::before { content: ""; position: absolute; top: 2px; bottom: 6px; inset-inline-start: 21px; width: 1px; background: var(--sb-line); }
.sb-sub {
    display: block; position: relative; padding: 6px 14px 6px 10px; margin: 1px 0 1px 0; margin-inline-start: 8px; border-radius: 8px;
    border: 1px solid transparent; color: var(--text-2); font-size: var(--fs-md); text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.sb-sub:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sb-sub.active { color: var(--text); font-weight: 800; background: var(--card); border-color: var(--sb-line); box-shadow: var(--shadow-xs); }
.sb-sub.active::before { content: ""; position: absolute; inset-inline-start: -9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--sb-bg); }

.sb-logout { width: 34px; height: 34px; border: 1px solid var(--sb-line); border-radius: 9px; display: grid; place-items: center; cursor: pointer; background: var(--card); color: var(--text-2); transition: background .15s, color .15s, border-color .15s; }
.sb-logout:hover { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

.backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); z-index: var(--z-backdrop); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }

.main { flex: 1; min-width: 0; margin-right: var(--sidebar-width); display: flex; flex-direction: column; transition: margin .28s cubic-bezier(.4, 0, .2, 1); }
body.collapsed .main { margin-right: 0; }
.tb-page { display: none; font-weight: 800; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; color: var(--sidebar-on); }

/* ====================================================================
   رأس الصفحة
   ==================================================================== */
/* رأس الصفحة: سطر واحد — العنوان (+ العدّاد) والأزرار قصاده. السطر الوصفي اتشال من صفحات القوائم */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; }
.page-head h1 .badge { vertical-align: middle; margin-inline-start: 6px; }
/* مسار التنقل: في الصفحات الداخلية فقط (تفاصيل/تعديل/إضافة) — يُرسم من _Layout */
.page-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; font-size: var(--fs-sm); color: var(--muted); }
.page-crumbs a { color: inherit; text-decoration: none; }
.page-crumbs a:hover { color: var(--text); text-decoration: underline; }
.page-crumbs [aria-current] { color: var(--text-2); max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ملاحظة الصفحة: سطر صغير فوق المحتوى الذي تشرحه — بديل الوصف الطويل تحت العنوان */
.page-note { display: flex; align-items: flex-start; gap: 6px; margin: -6px 0 14px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.page-note .ic { flex: none; margin-top: 3px; }
.page-head .toolbar, .page-head > .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 9px; margin-inline-start: 8px; border-radius: 999px; background: var(--primary-100); color: var(--primary-text); font-size: var(--fs-sm); font-weight: 800; vertical-align: middle; }

/* ====================================================================
   الأزرار
   ==================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px;
    border: 1px solid transparent; border-radius: 10px; cursor: pointer; white-space: nowrap; text-decoration: none;
    font-family: inherit; font-size: var(--fs-lg); font-weight: 700; line-height: 1;
    background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn .ic { width: 17px; height: 17px; }
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* جارٍ الحفظ: الزر اللي اتضغط بدوّارة (app.js بيقفل أزرار الإرسال لحد ما الصفحة تتنقل) */
.btn.is-busy { position: relative; cursor: progress; }
.btn.is-busy::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: btnSpin .7s linear infinite; }
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.btn-ghost, .btn-secondary { background: var(--card); color: var(--text-2); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--faint); }
.btn-soft { background: var(--primary-50); color: var(--primary-text); border-color: var(--primary-100); box-shadow: none; }
.btn-soft:hover { background: var(--primary-100); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger-strong); }
.btn-danger-soft { background: #fff; color: var(--danger); border-color: var(--danger-border); box-shadow: none; }
.btn-danger-soft:hover { background: var(--danger-bg); }
/* أغمق من --success عشان النص الأبيض يبقى 5:1 (كان 3.3:1) */
.btn-success { background: var(--success-strong); }
.btn-success:hover { background: var(--success-tx); }
.btn-sm { height: 32px; padding: 0 11px; font-size: var(--fs-sm); border-radius: 8px; gap: 5px; }
.btn-sm .ic { width: 15px; height: 15px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: var(--fs-xl); border-radius: 12px; }
.btn-block { width: 100%; }
.btn-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; background: transparent; color: var(--muted); border: 1px solid transparent; box-shadow: none; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.btn-icon:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-icon.primary:hover { color: var(--primary-text); background: var(--primary-50); border-color: var(--primary-100); }
.btn-icon.danger:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.btn-icon .ic { width: 17px; height: 17px; }

.row-actions { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.row-actions form { display: inline; margin: 0; }

/* ====================================================================
   البطاقات
   ==================================================================== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); min-width: 0; }
.card + .card { margin-top: 18px; }
.card h3, .card-title { font-size: 1rem; font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.card h3 .ic, .card-title .ic { color: var(--primary-text); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.card-head h3, .card-head .card-title { margin: 0; }
.card-head .sub { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-head { padding: 16px 20px; margin: 0; }
.card-muted { background: var(--surface-2); box-shadow: none; }

.grid { display: grid; gap: 18px; }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-all { grid-column: 1 / -1; }
.vstack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 16px; }
/* مسافات ومحاذاة صغيرة بالبكسل — بدل style="" في الصفحات (important عشان تفضل بأولوية الـ inline اللي كانت مكانها) */
.m-0 { margin: 0 !important; }
.mt-6 { margin-top: 6px !important; } .mt-8 { margin-top: 8px !important; } .mt-10 { margin-top: 10px !important; } .mt-12 { margin-top: 12px !important; }
.mt-14 { margin-top: 14px !important; } .mt-16 { margin-top: 16px !important; } .mt-18 { margin-top: 18px !important; }
.mb-6 { margin-bottom: 6px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-12 { margin-bottom: 12px !important; } .mb-20 { margin-bottom: 20px !important; }
.p-24 { padding: 24px !important; } .p-14-16 { padding: 14px 16px !important; }
.ta-right { text-align: right !important; } .ta-left { text-align: left !important; } .ta-center { text-align: center !important; }
.fw-600 { font-weight: 600 !important; }
.min-w-0 { min-width: 0 !important; } .min-w-160 { min-width: 160px !important; }
.scroll-x { overflow-x: auto !important; }
.break-all { word-break: break-all !important; }
.flex-center { display: flex !important; justify-content: center !important; }
.inline-form { display: inline !important; margin: 0 !important; }
.pre-text { white-space: pre-wrap !important; color: var(--text-2) !important; }
/* سطر مربع اختيار + عنوانه (مفعّل...) */
.check-row { display: flex !important; align-items: center !important; gap: 8px !important; }
.chk-16 { width: 16px !important; height: 16px !important; }

/* بطاقات الإحصائيات */
.stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 18px; }
.stat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
a.stat:hover { border-color: var(--primary-200); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; background: var(--primary-50); color: var(--primary-text); }
.stat-ic .ic { width: 22px; height: 22px; }
.stat-ic.green { background: var(--success-soft); color: var(--success); } .stat-ic.amber { background: var(--warning-soft); color: #d97706; }
.stat-ic.violet { background: var(--purple-bg); color: var(--purple); } .stat-ic.rose { background: #fff1f2; color: #e11d48; }
.stat-v { font-size: 1.55rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-k { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

/* ====================================================================
   الجداول
   ==================================================================== */
.table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.table-wrap > .table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); }
/* جدول لوحده (مش جوه table-wrap أو card) بياخد شكل البطاقة */
.content table:not(.plain) { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.content .table-wrap table:not(.plain) { border: none; border-radius: 0; box-shadow: none; }
.content .card table:not(.plain) { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }
.content .card .table-wrap table:not(.plain) { border: none; }
thead th { background: var(--surface-2); }
th, td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; letter-spacing: .1px; }
/* عمود المسلسل «#» — بيتضاف لكل table.stack من app.js (numberTables): ضيّق، في المنتصف، بلون هادئ */
th.col-serial, td.col-serial { width: 1%; padding-inline: 14px 6px; text-align: center; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
td { font-size: var(--fs-lg); color: var(--text-2); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 3%, #fff); }
tbody tr:last-child td { border-bottom: none; }
td.actions, th.actions { width: 1%; white-space: nowrap; text-align: left; }
.cell-title { font-weight: 700; color: var(--text); text-decoration: none; display: block; line-height: 1.45; }
a.cell-title:hover { color: var(--primary-text); }
.cell-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-person .avatar { width: 34px; height: 34px; font-size: var(--fs-xs); }
.cell-mono { direction: ltr; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); font-weight: 600; }
tr.is-inactive td { color: var(--muted); }
.date-tile { width: 52px; flex-shrink: 0; text-align: center; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--card); line-height: 1.2; }
.date-tile .m { display: block; font-size: var(--fs-xs); white-space: nowrap; font-weight: 800; color: var(--on-primary); background: var(--primary); padding: 2px 0; }
.date-tile .d { display: block; font-size: 1.15rem; font-weight: 800; color: var(--text); padding: 3px 0 4px; font-variant-numeric: tabular-nums; }
.date-tile.past .m { background: var(--muted); color: #fff; }
.cell-row { display: flex; align-items: center; gap: 12px; min-width: 0; }

.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--card); }
.table-wrap .pagination { margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); }

/* ====================================================================
   الشارات
   ==================================================================== */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.badge-green { background: var(--success-soft); color: var(--success-tx); border-color: var(--success-border); }
.badge-gray { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.badge-blue { background: var(--info-soft); color: #1d4ed8; border-color: var(--info-border); }
.badge-amber { background: var(--warning-soft); color: #b45309; border-color: var(--warning-border); }
.badge-red { background: var(--danger-soft); color: var(--danger-strong); border-color: var(--danger-border); }
.badge-purple { background: var(--purple-bg); color: #6d28d9; border-color: #ddd6fe; }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ====================================================================
   النماذج
   ==================================================================== */
.field { margin-bottom: 18px; min-width: 0; }
.field > label, .field-label { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 6px; font-weight: 700; }
.field .hint, .field-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; line-height: 1.5; }
.field input[type=text], .field input[type=email], .field input[type=number], .field input[type=date], .field input[type=password],
.field input[type=tel], .field input[type=url], .field input[type=search], .field input[type=file], .field input[type=time],
.field input[type=datetime-local], .field input[type=month], .field input:not([type]), .field select, .field textarea, .input {
    width: 100%; min-height: var(--ctl-h); padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--card); font-family: inherit; font-size: var(--fs-lg); color: var(--text);
    transition: border-color .15s, box-shadow .15s, background .15s; box-shadow: var(--shadow-xs);
}
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--muted); }
.field input[type=file] { padding: 7px 10px; cursor: pointer; }
.field input[type=file]::file-selector-button { border: 1px solid var(--border); background: var(--surface-2); border-radius: 7px; padding: 5px 12px; margin-inline-end: 10px; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { border-color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.field input[readonly], .field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--surface-2); color: var(--muted); }
.field textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.field input[type=color] { width: 44px; height: var(--ctl-h); padding: 3px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); cursor: pointer; }

.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: var(--fs-lg); color: var(--text-2); user-select: none; }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.form-grid > .span-all, .form-grid-3 > .span-all, .form-grid-4 > .span-all { grid-column: 1 / -1; }
.span-2 { grid-column: span 2; }

.form-section { padding-bottom: 6px; }
.form-section + .form-section { border-top: 1px dashed var(--border); padding-top: 22px; margin-top: 6px; }
.form-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.form-section-head .fs-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary-text); flex-shrink: 0; }
.form-section-head h3 { margin: 0; font-size: var(--fs-xl); }
.form-section-head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* عنوان قسم داخل فورم طويل (h3.case-sec) */
.case-sec { margin: 30px 0 16px; font-size: 1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.case-sec::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: var(--primary); flex-shrink: 0; }
.case-sec::after { content: ""; flex: 1; min-width: 40px; height: 1px; background: var(--border); }
.case-sec small { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); }
form > .case-sec:first-child, .summary + .case-sec, .validation-summary-valid + .case-sec, form > h3.case-sec:first-of-type { margin-top: 0; }

/* أزرار الحفظ: بتلزق تحت الشاشة في الفورمات الطويلة */
.form-actions {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; padding: 14px 0 0; border-top: 1px solid var(--border);
}
.card > form > .form-actions:last-child, .card > .form-actions:last-child, form.card > .form-actions:last-child {
    position: sticky; bottom: 0; z-index: var(--z-sticky); margin: 20px -24px -24px; padding: 14px 24px;
    background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(6px);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.form-actions .spacer { flex: 1; }

/* ===== التحقق بنمط ERP: نجمة حمراء + إطار أحمر ===== */
.validation, .field-validation-error, .field-validation-valid { display: none !important; }
.req-star { color: var(--danger); font-weight: 800; margin-inline-start: 3px; }
.input-validation-error, .is-invalid,
.field input.input-validation-error, .field select.input-validation-error, .field textarea.input-validation-error {
    border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}
.ss-root.is-invalid .ss-display, .rk-date.is-invalid .rk-disp { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; }
.summary { background: var(--danger-soft); color: var(--danger-tx); border: 1px solid var(--danger-border); border-radius: 10px; padding: 12px 15px; font-size: var(--fs-md); margin-bottom: 18px; }
.summary ul { list-style: none; }
.summary:empty, .summary.validation-summary-valid { display: none; }

/* شريط الحالة — شكل واحد بحجمين: .alert (العادي، ومعاه .voucher-banner للسند الملغي) و.rcm-bar (الصغير جوه النوافذ) — بنفس الألوان */
.alert, .voucher-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 12px; margin-bottom: 18px; font-size: var(--fs-lg); font-weight: 600; border: 1px solid transparent; }
.alert .ic, .voucher-banner .ic { margin-top: 2px; flex: none; }
.alert-success { background: var(--success-soft); color: var(--success-tx); border-color: var(--success-border); }
.alert-error, .voucher-banner { background: var(--danger-soft); color: var(--danger-tx); border-color: var(--danger-border); }
.alert-info { background: var(--info-soft); color: #1e3a8a; border-color: var(--info-border); }
.alert-warning { background: var(--warning-soft); color: var(--warning-tx); border-color: var(--warning-border); }

/* ====================================================================
   شريط الفلاتر
   ==================================================================== */
.filter-bar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; padding: 14px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.filter-bar .fb-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-bar .fb-field label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.filter-bar .fb-field input, .filter-bar .fb-field select {
    height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; font-family: inherit; font-size: var(--fs-lg); min-width: 160px; background: var(--card);
}
.filter-bar .fb-field input:focus, .filter-bar .fb-field select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.filter-bar .fb-field .ss-root { min-width: 160px; }
.filter-bar .fb-field .ss-display { min-height: 40px; }
.filter-bar .fb-grow { flex: 1; min-width: 220px; }
.filter-bar .fb-grow input {
    width: 100%; padding-inline-start: 36px;
    background: var(--card) no-repeat right 12px center / 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.filter-bar .fb-actions { display: flex; gap: 8px; }
.filter-bar .fb-check { height: 40px; display: flex; align-items: center; }
.fb-toggle { display: none; }

/* ====================================================================
   ترقيم الصفحات
   ==================================================================== */
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 12px; }
.pagination .pinfo { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
/* اختيار حجم الصفحة (10/20/50/100) — بين العدد وأرقام الصفحات */
.pagination .psize { display: flex; align-items: center; gap: 8px; margin-inline-end: auto; }
.pagination .psize label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.pagination .psize select { width: auto; min-height: 34px; height: 34px; padding: 0 10px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pagination .ppages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pagination .ppages a, .pagination .ppages span {
    min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 9px; text-decoration: none; font-size: var(--fs-md); font-weight: 700;
    color: var(--text-2); background: var(--card); transition: background .15s, border-color .15s;
}
.pagination .ppages a:hover { background: var(--surface-2); border-color: var(--border-strong); }
.pagination .ppages .current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pagination .ppages .disabled { opacity: .45; pointer-events: none; }

/* ====================================================================
   الحالة الفارغة
   ==================================================================== */
.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty .icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary-text); font-size: 1.8rem; }
.empty .icon .ic { width: 28px; height: 28px; }
.empty h3, .empty strong { display: block; color: var(--text); font-size: 1.02rem; font-weight: 800; margin-bottom: 4px; justify-content: center; }
.empty p { margin: 0 auto; max-width: 420px; }
.empty .btn { margin-top: 16px; }
.empty-sm { padding: 26px 16px; border: 1.5px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); text-align: center; font-size: var(--fs-md); }

/* ====================================================================
   صفحات التفاصيل
   ==================================================================== */
.hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 40%, #a78bfa)); }
.hero-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; background: var(--primary-50); color: var(--primary-text); }
.hero-ic .ic { width: 26px; height: 26px; }
.hero-main { flex: 1; min-width: 220px; }
.hero-kicker { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero h1 { font-size: 1.4rem; font-weight: 800; line-height: 1.35; margin: 2px 0 6px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--muted); font-size: var(--fs-md); }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .ic { width: 15px; height: 15px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* قائمة بيانات: عنوان صغير + قيمة */
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 20px; }
.dl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl > div { min-width: 0; padding-inline-start: 12px; border-inline-start: 2px solid var(--border); }
.dl dt, .dl .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.dl dd, .dl .v { font-size: var(--fs-lg); color: var(--text); font-weight: 600; word-break: break-word; }
.dl .v.empty-v, .dl dd.empty-v { color: var(--muted); font-weight: 500; }
.dl .wide { grid-column: 1 / -1; }
.dl .pre { white-space: pre-wrap; font-weight: 500; line-height: 1.75; }

/* قائمة مواعيد/عناصر مختصرة (لوحة الرئيسية وغيرها) */
.agenda { list-style: none; display: flex; flex-direction: column; }
.agenda li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.agenda li:first-child { padding-top: 0; }
.agenda li:last-child { border-bottom: none; padding-bottom: 0; }
.agenda-main { flex: 1; min-width: 0; }
.agenda-main .cell-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dl-1 { grid-template-columns: minmax(0, 1fr); }
.dl-1 { gap: 0; }
.dl-1 > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 0; border-inline-start: none; border-bottom: 1px dashed var(--border); }
.dl-1 > div:first-child { padding-top: 0; }
.dl-1 > div:last-child { border-bottom: none; padding-bottom: 0; }
.dl-1 .k { margin: 0; }
.money-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.money-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.money-list > div:first-child { padding-top: 0; }
.money-list .k { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.money-list .v { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.team-block + .team-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.team-block > .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

.doc-ext { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3px; color: var(--primary-text); background: var(--primary-50); border: 1px solid var(--primary-100); direction: ltr; }
.docs-list + .docs-upload, .docs-upload { margin-top: 18px; }

/* شرائح (أسماء فريق/أشخاص) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); text-decoration: none; }
.chip .avatar { width: 22px; height: 22px; font-size: var(--fs-xs); }
a.chip:hover { border-color: var(--primary-200); color: var(--primary-text); }

/* تبويبات عامة */
/* التبويبات — شكل واحد في السيستم كله: شريط بخط سفلي، والمفتوح تحته خط بلون المكتب.
   (.tab إعدادات النظام · .nt-tab التنبيهات والمهام ومفتاح التقرير/التحليلات · .cd-tab تفاصيل القضية وجدولا الجلسات والاستشارات
    · .clk-tab القوائم · .ps-tab إعدادات الطباعة)
   النسخة الصغيرة للفلاتر جوه الكروت: .tk-period — وأزرار الاختيار في النماذج شكل تاني: .hp-pill */
.tabs, .nt-tabs, .cd-tabs, .clk-tabs, .ps-tabs {
    display: flex; gap: 22px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px;
    box-shadow: inset 0 -1px 0 var(--border);
}
.tabs::-webkit-scrollbar, .nt-tabs::-webkit-scrollbar, .cd-tabs::-webkit-scrollbar, .clk-tabs::-webkit-scrollbar, .ps-tabs::-webkit-scrollbar { display: none; }
.tab, .nt-tab, .cd-tab, .clk-tab, .ps-tab {
    display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: none; color: var(--muted); font: inherit; font-size: var(--fs-lg); font-weight: 600; text-decoration: none;
    white-space: nowrap; cursor: pointer; user-select: none; transition: color .15s, border-color .15s;
}
.tab:hover, .nt-tab:hover, .cd-tab:hover, .clk-tab:hover, .ps-tab:hover { color: var(--text); border-bottom-color: var(--border-strong, var(--border)); }
.tab:focus-visible, .nt-tab:focus-visible, .cd-tab:focus-visible, .clk-tab:focus-visible, .ps-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tab.active, .tab.active:hover, .nt-tab.active, .nt-tab.active:hover, .cd-tab.active, .cd-tab.active:hover,
.clk-tab.active, .clk-tab.active:hover, .ps-tab.active, .ps-tab.active:hover { color: var(--primary-text); border-bottom-color: var(--primary); font-weight: 700; }
/* عدّاد التبويب */
.tab .count-pill, .nt-tab .count-pill, .cd-tab .count-pill { margin: 0; min-width: 24px; height: 22px; padding: 0 7px; }
.tab:not(.active) .count-pill, .nt-tab:not(.active) .count-pill, .cd-tab:not(.active) .count-pill { background: var(--surface-2); color: var(--text-2); }
/* تبويب فيه خانة عليها خطأ (نموذج الموظف) */

/* مبلغ بعملة المكتب (Ui.Money) */
.money { white-space: nowrap; font-weight: 700; }
.money .cur { font-size: .78em; color: var(--muted); font-weight: 600; }
.money.neg, .money.neg .cur { color: var(--danger-tx); }

/* ===== الحسابات ===== */
/* خانة مبلغ + رمز العملة جنبها */
.money-input { display: flex; align-items: stretch; }
.money-input input { flex: 1; min-width: 0; border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.money-input .cur { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-inline-start: none; border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: var(--fs-md); }
[dir="rtl"] .money-input .cur { border-radius: 10px 0 0 10px; }
/* إجمالي فوق جدول السندات */
.finance-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-weight: 700; color: var(--muted); }
.finance-total .money { font-size: 1.1rem; color: var(--text); }
.confirm-dup { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 800; cursor: pointer; }
.confirm-dup input { width: 16px !important; height: 16px; }
.voucher-cancelled { border-color: var(--danger-border); background: var(--danger-soft); }
.voucher-cancelled h3 { color: var(--danger-tx); }
/* تفاصيل السند: شريط "ملغي" فوق الصفحة + الملاحظات + إلغاء مطوي (_VoucherCancelled / _VoucherActions) */
/* شريط السند الملغي = تنبيه خطأ عادي (التعريف مع .alert فوق) + سطر التفاصيل */
.voucher-banner-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; font-size: var(--fs-sm); font-weight: 500; }
.voucher-note { font-size: var(--fs-lg); line-height: 1.7; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.voucher-edit { margin-top: 12px; }
details.voucher-cancel { padding-top: 12px; padding-bottom: 12px; }
details.voucher-cancel > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); font-weight: 700; color: var(--danger); }
details.voucher-cancel > summary::-webkit-details-marker { display: none; }
details.voucher-cancel > summary:hover { text-decoration: underline; }
/* تفاصيل سند القبض (Receipts/Details) */
.rv-amount { text-align: end; margin-inline-start: auto; }
.rv-amount-v { font-size: 1.7rem; font-weight: 800; line-height: 1.3; }
.rv-amount-w { font-size: var(--fs-sm); color: var(--text-2); }
.rv-amount.is-cancelled .rv-amount-v { text-decoration: line-through; color: var(--muted); }
.rv-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rv-chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-chip { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.rv-chip .k { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.rv-paid { font-weight: 800; white-space: nowrap; }
/* شريط نسبة المدفوع — النسبة مكتوبة في قلبه */
.rv-progress { position: relative; height: 24px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; margin: 12px 0; }
.rv-progress-fill { height: 100%; background: color-mix(in srgb, var(--success) 55%, #fff); border-radius: 999px; }
.rv-progress-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; color: var(--text); }
@media (max-width: 700px) {
    .rv-chips { grid-template-columns: minmax(0, 1fr); }
    .rv-amount { text-align: start; margin: 0; width: 100%; }
}
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
.year-pill { display: inline-flex; align-items: center; padding: 0 16px; height: 38px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-weight: 800; }
/* الملخص الشهري: شريطين نسبيين (إيراد/مصروف) */
.fin-bar { height: 7px; border-radius: 99px; min-width: 2px; }
.fin-bar + .fin-bar { margin-top: 4px; }
.fin-bar.in { background: var(--success); }
.fin-bar.out { background: #f59e0b; }
.fin-foot td { font-weight: 800; background: var(--surface-2); }
@media (max-width: 700px) { .hide-sm { display: none !important; } .finance-total { flex-direction: column; align-items: flex-start; } }

/* ===== اتفاقات الأتعاب ===== */
.card .fee-card { box-shadow: none; border: 1px solid var(--border); }
.fee-card .card-head h3 { flex-wrap: wrap; }
.fee-terms { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; font-size: var(--fs-md); color: var(--muted); font-weight: 600; }
.fee-terms span { display: inline-flex; align-items: center; gap: 5px; }
.fee-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.fee-totals > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.fee-totals .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.fee-totals .due { border-color: var(--warning-border); background: var(--warning-soft); }
.fee-pct { margin-bottom: 12px; }
.fee-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.fee-confirm label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); font-weight: 700; }
.fee-confirm input { height: 34px; width: 150px !important; }
/* اختيار نوع الاتفاق (أزرار متلاصقة) */
/* جدول الدفعات في الفورم */
.fee-split { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; font-size: var(--fs-md); font-weight: 600; }
.fee-split label { display: inline-flex; align-items: center; gap: 6px; }
.fee-split input { width: 74px !important; height: 34px; }
.fee-split input[type="date"] { width: 150px !important; }
/* منتقي التاريخ بيلفّ الخانة في .rk-date (والخانة الظاهرة نص) — العرض على اللفّة مش على الخانة */
.fee-split .rk-date { width: 170px; }
.fee-split .rk-date input { width: 100% !important; }
/* خانات جدول الدفعات بنفس شكل خانات الفورم */
.fee-rows td > input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: var(--fs-lg); background: var(--card); color: var(--text); }
.fee-rows td > input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
/* جداول الإدخال (كل صف فيه خانات) — شكل واحد: عنوان صغير من غير خلفية + خط خفيف فوق كل صف.
   .fee-rows دفعات الاتفاق · .cn-rates أسعار الاستشارات · .rc-alloc توزيع السند. (جداول العرض: .ns-table / .tk-table) */
.fee-rows, .cn-rates { width: 100%; border-collapse: collapse; }
.fee-rows th, .cn-rates th { text-align: start; font-size: var(--fs-sm); color: var(--muted); font-weight: 700; padding: 6px; }
.fee-rows td, .cn-rates td, .rc-alloc td { padding: 8px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.fee-rows td:last-child { width: 44px; }
.fee-rows-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.fee-sum { font-weight: 700; font-size: var(--fs-md); color: var(--muted); }
.fee-sum.bad { color: var(--danger-tx); }
/* سند القبض: توزيع المبلغ على دفعات الاتفاق */
.rc-alloc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.rc-alloc-head .case-sec { margin: 0; }
.rc-alloc td { font-size: var(--fs-lg); }
.rc-alloc td:last-child, .rc-alloc th.rc-pay { width: 190px; }
.rc-alloc .rc-pick { width: 36px; text-align: center; }
.rc-alloc .rc-pick input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.rc-alloc tr.on td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
/* الدفعة في كارت الاتفاق: السندات اللي سدّدتها */
.fee-pays { display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* ====================================================================
   نافذة التحصيل (سند قبض) في صفحة القضية — تصميم بطاقات
   ==================================================================== */
/* خلفية بيضا (مش لون الصفحة --bg اللي بياخد لون الثيم).
   .fa-dialog.rcm-dialog عشان يغلب قاعدة .fa-dialog اللي جاية بعده في الملف (كانت بتلغي الخلفية والعرض) */
.fa-dialog.rcm-dialog { width: min(640px, 100%); background: var(--card); }
.fa-dialog.rcm-dialog > form { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.rcm-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
.rcm-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 16px; }
.rcm-ctx b { color: var(--text); font-weight: 700; }
.rcm-ctx .sep { opacity: .5; }
/* التصنيف الثابت كوسم في آخر شريط السياق */
.rcm-cat { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary-text); padding: 2px 10px; border-radius: 20px; font-weight: 700; }
.rcm-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.rcm-sec h3 { margin: 0; font-size: var(--fs-xl); }
/* الدفعات كبطاقات */
.rcm-list { display: flex; flex-direction: column; gap: 8px; }
.rcm-i { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); }
/* المختارة: حد ملوّن + خط جانبي (من غير تعبئة لونية) */
.rcm-i.on { border-color: var(--primary); box-shadow: inset -3px 0 0 var(--primary); }
[dir="ltr"] .rcm-i.on { box-shadow: inset 3px 0 0 var(--primary); }
.rcm-i .rcm-chk { width: 19px; height: 19px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.rcm-i .rcm-info { flex: 1; min-width: 0; }
.rcm-i .rcm-dline { display: flex; align-items: center; gap: 7px; font-size: var(--fs-lg); flex-wrap: wrap; }
.rcm-i .rcm-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.rcm-i .rcm-pay { width: 128px; flex-shrink: 0; }
.rcm-i .rcm-pay label { display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 3px; }
/* الخانة مش جوه .field — بتاخد شكل خانات الفورم هنا */
.rcm-i .rcm-pay .money-input input { height: 34px; font-size: var(--fs-xl); padding: 0 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-family: inherit; }
.rcm-i .rcm-pay .money-input input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.rcm-i .rcm-pay .money-input .cur { padding: 0 8px; font-size: var(--fs-xs); }
/* تذييل ثابت: شريط الحالة + الأزرار */
.rcm-foot { position: sticky; bottom: 0; background: var(--surface-2); border-top: 1px solid var(--border); padding: 12px 18px; }
.rcm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--fs-md); padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; border: 1px solid transparent; }
.rcm-bar .st { font-weight: 700; }
.rcm-bar.ok { background: var(--success-soft); color: var(--success-tx); border-color: var(--success-border); }
.rcm-bar.bad { background: var(--warning-soft); color: var(--warning-tx); border-color: var(--warning-border); }
.rcm-foot .form-actions { margin: 0; padding: 0; border: none; }
.rcm-more { margin-top: 14px; }
.rcm-more > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); font-weight: 700; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.rcm-more > summary::before { content: "+"; font-weight: 700; }
.rcm-more[open] > summary::before { content: "−"; }
.rcm-more > summary::-webkit-details-marker { display: none; }
/* صفحة سند القبض (Receipts/Create): ملخص السند الجانبي */
.rcp-no { font-size: var(--fs-xs); color: var(--muted); }
.rcp-total { font-size: 1.7rem; font-weight: 800; line-height: 1.3; margin-top: 4px; }
.rcp-total small { font-size: var(--fs-md); font-weight: 700; color: var(--muted); }
.rcp-words { font-size: var(--fs-sm); color: var(--text-2); min-height: 1.2em; line-height: 1.6; }
.fa-summary .rcm-bar { margin: 0; }
/* فورم الجلسة (Hearings/_Form): أزرار النوع والحالة + ملخص الجلسة */
.hp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-pill { margin: 0; cursor: pointer; position: relative; }
.hp-pill input { position: absolute; opacity: 0; pointer-events: none; }
.hp-pill span {
    display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; font-size: var(--fs-md); font-weight: 700;
    border: 1.5px solid var(--border-strong); background: var(--card); color: var(--text-2); transition: border-color .15s, background .15s, color .15s;
}
.hp-pill:hover span { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.hp-pill input:checked + span { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary-text); }
.hp-pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.hp-pill.ok input:checked + span { border-color: var(--success); background: var(--success-bg); color: var(--success-tx); }
.hp-pill.warn input:checked + span { border-color: var(--warning); background: var(--warning-bg); color: var(--warning-tx); }
.hp-pill.bad input:checked + span { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-tx); }
.hp-when { text-align: center; padding: 14px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.hp-when-d { font-size: 1.15rem; font-weight: 800; }
.hp-when-t { font-size: var(--fs-md); color: var(--text-2); margin-top: 2px; }
.hp-when-r { font-size: var(--fs-sm); font-weight: 700; color: var(--primary-text); margin-top: 4px; }
.hp-when-t:empty, .hp-when-r:empty { display: none; }
.hp-last { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; overflow-wrap: anywhere; }
/* تفاصيل الجلسة (Hearings/Details): القرار + الخط الزمني لجلسات القضية */
.hd-rel { font-weight: 700; color: var(--primary-text); }
.hd-decision { font-size: var(--fs-xl); line-height: 1.9; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); box-shadow: inset -3px 0 0 var(--primary); overflow-wrap: anywhere; }
[dir="ltr"] .hd-decision { box-shadow: inset 3px 0 0 var(--primary); }
.hd-sub { margin: 16px 0 8px; font-size: var(--fs-lg); }
.hd-notes { font-size: var(--fs-lg); line-height: 1.8; color: var(--text-2); overflow-wrap: anywhere; }
.hd-timeline { list-style: none; margin: 0; padding: 0; padding-inline-start: 20px; position: relative; display: grid; gap: 6px; }
.hd-timeline::before { content: ""; position: absolute; inset-inline-start: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.hd-ev { position: relative; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; }
.hd-ev::before { content: ""; position: absolute; inset-inline-start: -20px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--border-strong); }
.hd-ev.is-current { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--card)); }
.hd-ev.is-current::before { background: var(--primary); border-color: var(--primary); }
.hd-ev.is-cancelled { opacity: .6; }
.hd-ev-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hd-ev-title { font-weight: 700; font-size: var(--fs-lg); }
.hd-ev-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; display: grid; gap: 2px; overflow-wrap: anywhere; }
.hd-ev-sub:empty { display: none; }
.hd-ev-sub strong { color: var(--primary-text); }
.hd-next-btn { width: 100%; justify-content: center; margin-top: 10px; }
/* فورم الاستشارة: الموكّل + زر "موكّل جديد" في سطر واحد */
/* زر «تحصيل» تحت مبلغ الاستشارة في القائمة (button بشكل رابط) + جدول أسعار الأنواع في صفحة التكاليف */
.cn-collect { background: none; border: none; padding: 0; margin-inline-start: 6px; font: inherit; font-weight: 700; color: var(--primary-text); cursor: pointer; }
.cn-collect:hover, .cn-collect:focus-visible { text-decoration: underline; }
.cn-rates td.r { width: 220px; }
.cn-rates .money-input input { height: 38px; }
@media (max-width: 560px) { .cn-rates td.r { width: 150px; } }
.cn-client { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.cn-client .btn { height: var(--ctl-h); margin-bottom: 18px; white-space: nowrap; }
.cn-client:has(.validation:not(:empty)) .btn { margin-bottom: 40px; }
@media (max-width: 560px) { .cn-client { grid-template-columns: minmax(0, 1fr); } .cn-client .btn { margin-top: -8px; } }
/* "عن شهر" في سند الصرف: قائمة الشهر (بالعربي) + قائمة السنة */
.month-pick { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
/* المرجع والملاحظات: سطر واحد صغير تحت بيانات السند */
.rcp-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 20px; padding-top: 12px; border-top: 1px dashed var(--border); }
.rcp-extra .field { margin-bottom: 0; }
.rcp-extra .field > label { font-size: var(--fs-xs); margin-bottom: 4px; }
.rcp-extra .field input, .rcp-extra .field textarea { height: 36px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-md); }
.rcp-extra .field textarea { resize: vertical; }
@media (max-width: 700px) { .rcp-extra { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.fa-step .rcm-sec { margin: 0 0 14px; }
.fa-step .rcm-sec .fa-head { margin: 0; font-size: 1rem; }
@media (max-width: 560px) {
    .rcm-i { flex-wrap: wrap; }
    .rcm-i .rcm-pay { width: 100%; }
}
@media (max-width: 700px) { .fee-totals { grid-template-columns: minmax(0, 1fr); } }

/* فورم اتفاق الأتعاب: كروت مرقّمة + ملخص جانبي ثابت مع التمرير */
.fa-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.fa-step[hidden], .fa-sum > div[hidden], .fa-sum-msg[hidden] { display: none !important; }
.fa-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; font-size: 1rem; }
.fa-head small { font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
/* الصادر والوارد: عمود الموضوع (سطران بحد أقصى) + عدد المرفقات + نافذة التسجيل */
.cr-subject { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 180px; max-width: 360px; white-space: normal; line-height: 1.6; }
.cr-docs { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.fa-dialog.cr-dialog { width: min(680px, 100%); }
.cr-dialog .docs-ed { margin: 4px 0 14px; }
@media (max-width: 760px) { .cr-subject { min-width: 0; max-width: none; } }
/* عمود العنوان في قائمة الموكلين: عرض ثابت، يلف على سطرين بحد أقصى ثم «…» (النص كاملًا في title) */
.cl-address { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 200px; max-width: 300px; white-space: normal; line-height: 1.6; font-size: var(--fs-md); color: var(--text-2); }
/* العنوان المقسَّم: سطر «المدينة، الحي» + الدولة بخط خفيف، وتحته التفاصيل بخط صغير */
.cl-addr { min-width: 190px; max-width: 320px; white-space: normal; line-height: 1.55; }
.cl-addr-main { font-weight: 700; color: var(--text); }
.cl-addr-country { margin-inline-start: 8px; font-weight: 500; font-size: var(--fs-sm); color: var(--muted); }
.cl-addr-country::before { content: "·"; margin-inline-end: 8px; }
.cl-addr-sub { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 760px) { .cl-address, .cl-addr { min-width: 0; max-width: none; } }
/* عنوان فرعي جوه كارت مرقّم (العنوان في كارت التواصل) */
.fa-sub { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; padding-top: 16px; border-top: 1px dashed var(--border); font-size: var(--fs-lg); font-weight: 800; color: var(--text-2); }
.fa-n {
    flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800;
    background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary-text);
}
.fa-step .field-hint { margin-top: 8px; }
/* نوع الأتعاب: 3 اختيارات كبيرة */
.fa-types { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fa-type { margin: 0; cursor: pointer; position: relative; }
.fa-type input { position: absolute; opacity: 0; pointer-events: none; }
.fa-type-box { display: grid; gap: 3px; height: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, background .15s; }
.fa-type-box strong { font-size: var(--fs-xl); }
.fa-type-box small { font-size: var(--fs-xs); color: var(--muted); }
.fa-type:hover .fa-type-box { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.fa-type input:checked + .fa-type-box { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.fa-type input:checked + .fa-type-box strong { color: var(--primary-text); }
.fa-type input:focus-visible + .fa-type-box { outline: 2px solid var(--primary); outline-offset: 2px; }
/* مبلغ الاتفاق + أداة التقسيم في سطر واحد */
.fa-fixed { display: grid; gap: 12px 14px; grid-template-columns: minmax(150px, 180px) minmax(0, 1fr); align-items: start; margin-bottom: 10px; }
.fa-fixed .fee-split { margin: 0; padding: 5px 10px; gap: 6px 10px; border-radius: 10px; background: var(--bg); min-height: 44px; }
.fa-fixed .fee-split input { width: 58px !important; }
.fa-fixed .fee-split .rk-date { width: 150px; }
.fa-fixed .fee-split .rk-date input { width: 100% !important; }
.fee-rows .fa-no { width: 34px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
/* الملخص الجانبي */
.fa-summary { position: sticky; top: 84px; display: grid; gap: 12px; }
.fa-summary .fa-head { margin: 0; }
.fa-sum { margin: 0; display: grid; }
.fa-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.fa-sum > div:last-child { border-bottom: none; }
.fa-sum dt { color: var(--muted); font-size: var(--fs-md); }
.fa-sum dd { margin: 0; font-weight: 700; font-size: var(--fs-lg); text-align: end; }
.fa-sum dd.ok { color: var(--success-strong); }
.fa-sum dd.bad, .fa-sum-msg { color: var(--danger-tx); }
.fa-sum-msg { font-size: var(--fs-sm); font-weight: 700; }
.fa-actions { display: grid; gap: 8px; }
.fa-actions .btn { justify-content: center; }
/* نوافذ النماذج (.fa-overlay): نفس شكل «النافذة الموحّدة» (.mdl-*) — في نص الشاشة، رأس بلون المكتب، والضغط برّه لا يقفل.
   الأحجام: .fa-dialog كبير 1120 (اتفاق الأتعاب) · .rcm-dialog 640 · والخاصة (.um-dialog / .td-dialog / .tk-dialog) تحت. */
.fa-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; overscroll-behavior: contain; }
.fa-overlay[hidden] { display: none; }
.fa-dialog { width: min(1120px, 100%); background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
.fa-dialog-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--primary); color: var(--on-primary); }
.fa-dialog-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: inherit; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fa-dialog-head .btn-icon { flex: none; width: 32px; height: 32px; border: none; border-radius: 9px; background: none; color: inherit; }
.fa-dialog-head .btn-icon:hover { background: color-mix(in srgb, var(--on-primary) 18%, transparent); color: inherit; }
.fa-dialog-head .btn-icon:focus-visible { outline: 2px solid var(--on-primary); outline-offset: 1px; }
.fa-dialog-body { padding: 18px 20px 20px; overflow-y: auto; }
.fa-dialog .fa-summary { top: 0; }
.fa-dialog .summary ul { margin: 0; padding-inline-start: 18px; }
.fa-dialog .summary[hidden] { display: none; }
@media (max-width: 1100px) {
    .fa-layout { grid-template-columns: minmax(0, 1fr); }
    .fa-summary { position: static; }
}
@media (max-width: 700px) {
    .fa-types, .fa-fixed { grid-template-columns: minmax(0, 1fr); }
}

/* صف إعداد (صفحة إعدادات النظام): عنوان + وصف + مفتاح تشغيل */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.setting-row:last-of-type { border-bottom: none; }
.setting-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.setting-title { font-weight: 800; font-size: var(--fs-lg); color: var(--text); }
.setting-desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
.setting-note { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); }
.setting-switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 42px !important; height: 24px; border-radius: 999px; background: var(--border); cursor: pointer; transition: background .15s; margin: 0; }
.setting-switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.setting-switch:checked { background: var(--primary); }
.setting-switch:checked::after { transform: translateX(-18px); }
.setting-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* خط زمني بسيط */
.timeline { list-style: none; position: relative; }
.timeline li { position: relative; padding: 0 22px 16px 0; }
.timeline li::before { content: ""; position: absolute; right: 5px; top: 8px; bottom: -8px; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; right: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 3px solid var(--primary); }

/* ====================================================================
   Toast
   ==================================================================== */
.app-toast-wrap { position: fixed; top: 18px; left: 18px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.app-toast {
    --c: #1d4ed8; pointer-events: auto; min-width: 290px; max-width: 400px; background: var(--card); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: toastIn .28s cubic-bezier(.16, 1, .3, 1); cursor: pointer;
}
.app-toast.hide { animation: toastOut .22s ease forwards; }
.app-toast .at-row { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.app-toast .at-chip { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: var(--c); font-size: var(--fs-sm); font-weight: 900; }
.app-toast .at-tx { font-size: var(--fs-lg); font-weight: 700; color: var(--text); line-height: 1.5; }
.app-toast .at-bar { height: 3px; background: var(--c); opacity: .8; animation: toastBar linear forwards; transform-origin: right; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-24px); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ====================================================================
   قائمة منسدلة قابلة للبحث (بتتعمل تلقائي لكل select)
   ==================================================================== */
.ss-root { position: relative; min-width: 0; }
.ss-display {
    width: 100%; min-height: var(--ctl-h); border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card);
    padding: 0 13px; font-family: inherit; font-size: var(--fs-lg); cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: 8px; text-align: right; color: var(--text); transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow-xs);
}
.ss-display:hover { border-color: var(--faint); }
.ss-root.open .ss-display, .ss-display:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.ss-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-text.ss-ph { color: var(--muted); }
.ss-caret { color: var(--muted); font-size: 11px; transition: transform .15s; flex-shrink: 0; }
.ss-root.open .ss-caret { transform: rotate(180deg); }
.ss-panel { position: absolute; top: calc(100% + 5px); inset-inline: 0; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); z-index: var(--z-select); display: none; overflow: hidden; }
.ss-root.open .ss-panel { display: block; animation: ssIn .12s ease; }
@keyframes ssIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ss-search-wrap { padding: 7px; border-bottom: 1px solid var(--border); }
.ss-search { width: 100%; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 11px; font-family: inherit; font-size: var(--fs-md); outline: none; background: var(--surface-2); }
.ss-search:focus { border-color: var(--primary); background: var(--card); }
.ss-list { max-height: 240px; overflow-y: auto; padding: 5px; }
.ss-item { padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item:hover, .ss-item.active { background: var(--surface-2); }
.ss-item.sel { background: var(--primary-50); color: var(--primary-text); font-weight: 800; }
.ss-empty { padding: 12px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }

/* ====================================================================
   منتقي التاريخ (dd/mm/yyyy)
   ==================================================================== */
.rk-date { position: relative; display: block; }
.rk-date > input[type="hidden"] { display: none; }
.rk-date .rk-disp {
    width: 100%; min-height: var(--ctl-h); padding: 9px 40px 9px 13px; border: 1px solid var(--border-strong); border-radius: 10px;
    font-family: inherit; font-size: var(--fs-lg); transition: border-color .15s, box-shadow .15s; background: var(--card); color: var(--text); box-shadow: var(--shadow-xs);
}
.rk-date .rk-disp::placeholder { color: var(--muted); }
.rk-date .rk-disp:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
/* زر (مش span) عشان يتقري ويتضغط بالكيبورد — من غير شكل الزر الافتراضي */
.rk-date-ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xl); cursor: pointer; opacity: .65; border: 0; background: none; padding: 0; line-height: 0; }
.rk-cal { position: fixed; display: none; z-index: var(--z-picker); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px; width: 284px; font-family: inherit; }
.rk-cal.open { display: block; }
.rk-cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; direction: ltr; }
.rk-cal-title { flex: 1; text-align: center; font-weight: 800; color: var(--text); font-size: var(--fs-xl); }
.rk-cal-nav { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--card); border-radius: 8px; cursor: pointer; color: var(--muted); font-family: inherit; font-weight: 700; }
.rk-cal-nav:hover { border-color: var(--primary); color: var(--primary-text); background: var(--primary-50); }
.rk-cal-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.rk-cal-wk span { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); padding: 4px 0; }
.rk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rk-cal-d { border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: var(--fs-md); padding: 7px 0; color: var(--text); }
.rk-cal-d:hover:not(.rk-empty) { background: var(--primary-50); color: var(--primary-text); }
.rk-cal-d.rk-empty { cursor: default; }
.rk-cal-d.today { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary-text); font-weight: 700; }
.rk-cal-d.sel { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.rk-cal-foot { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rk-cal-btn { flex: 1; border: none; background: var(--primary); color: var(--on-primary); border-radius: 8px; padding: 7px; font-family: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.rk-cal-btn.ghost { background: var(--card); color: var(--muted); border: 1px solid var(--border); }
.rk-cal-btn:hover { filter: brightness(.96); }
.rk-cal-btn.ghost:hover { border-color: var(--danger); color: var(--danger); }

/* ====================================================================
   صفحات الدخول (Auth)
   ==================================================================== */
/* دخول المكتب (Account/Login): الصفحة كلها بلون الشريط العلوي للمكتب (--sidebar)، الشعار في المنتصف ثم كارت النموذج. بلا نصوص تسويقية ولا تدرّجات.
   الشعار يُعرض مباشرة فوق اللون الغامق (كما في الشريط العلوي)، فشعار «المظهر» يُختار مناسبًا له؛ شعار الورق الأبيض في «إعدادات الطباعة». */
.signin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 28px;
    /* خلفية صورة (ميزان ومطرقة) تملأ الصفحة، فوقها تعتيم خفيف ليبقى الشعار وسطر الحقوق مقروءين — ولون القالب احتياطي لو لم تُحمَّل الصورة */
    background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)), url("../img/login-bg.webp") center / cover no-repeat, var(--sidebar); }
.signin-brand { display: grid; place-items: center; margin-bottom: 28px; }
.signin-brand img { display: block; max-width: min(360px, 82vw); max-height: 120px; object-fit: contain; }
.signin-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--primary); color: var(--on-primary); }
.signin-card { width: 100%; max-width: 440px; padding: 32px; background: var(--card); border-radius: var(--radius-lg); }
.signin-card h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.3; text-align: center; }
.signin-card .lead { margin: 4px 0 24px; text-align: center; color: var(--muted); }
.signin-card .field input { min-height: 46px; }
.signin-card .check { margin-bottom: 20px; }
.signin-pw { position: relative; }
.signin-pw > input { padding-inline-end: 50px !important; }
.signin-toggle { position: absolute; top: 50%; inset-inline-end: 5px; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.signin-toggle span { display: grid; }
.signin-toggle .ic-hide, .signin-toggle[aria-pressed="true"] .ic-show { display: none; }
.signin-toggle[aria-pressed="true"] .ic-hide { display: grid; }
.signin-toggle:hover { color: var(--text); background: var(--surface-2); }
.signin-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.signin-help { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: var(--fs-md); color: var(--muted); }
.signin-copy { margin-top: 22px; text-align: center; font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.signin-card { box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
@media (max-width: 480px) { .signin-card { padding: 22px; } .signin-brand { margin-bottom: 20px; } }

/* دخول المزوّد (Master/Login): لوحة جانبية غامقة فيها علامة واسم ثابتان، والنموذج بجوارها */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--card); }
.auth-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px; background: var(--sidebar); color: var(--sidebar-text); }
.auth-copy { font-size: var(--fs-sm); color: color-mix(in srgb, var(--sidebar-text) 80%, transparent); }
.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 1.6rem; font-weight: 800; line-height: 1.3; }
.auth-card .lead { margin: 6px 0 26px; color: var(--muted); }
.auth-card .field input { min-height: 46px; }
.auth-card .check { margin-bottom: 20px; }
/* الشاشات الصغيرة: اللوحة الجانبية تختفي، والعلامة والاسم يظهران فوق النموذج */
.auth-mbrand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; font-weight: 800; font-size: 1.05rem; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.15rem; color: var(--sidebar-on); }
.auth-pitch { max-width: 460px; }
.auth-pitch h2 { font-size: 1.9rem; font-weight: 800; line-height: 1.35; margin-bottom: 10px; color: var(--sidebar-on); }
.auth-pitch p { font-size: var(--fs-xl); }
.input-icon { position: relative; }
.input-icon > .ic { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--faint); pointer-events: none; width: 18px; height: 18px; }
.input-icon > input { padding-inline-start: 40px !important; }
.input-icon .pw-toggle { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.input-icon .pw-toggle:hover { background: var(--surface-2); color: var(--text); }
.input-icon.has-toggle > input { padding-inline-end: 44px !important; }

/* ====================================================================
   موديولات: التنبيهات · المهام · الأدوار والصلاحيات · نافذة المستخدم
   (بعد المكوّنات الأساسية عشان قواعدها تغلب من غير حيل — وقبل قسم الموبايل)
   ==================================================================== */
/* ===== التنبيهات: الجرس + القائمة المنسدلة + صفحة التنبيهات ===== */
.nt-bell { position: relative; }
.nt-bell .icon-btn { position: relative; }
.nt-count { position: absolute; top: -6px; inset-inline-start: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--danger, var(--danger)); color: #fff; font-size: var(--fs-xs); font-weight: 800; display: grid; place-items: center; line-height: 1; border: 2px solid var(--card); }
.nt-count[hidden] { display: none; }
.nt-pop { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: min(370px, calc(100vw - 24px)); z-index: var(--z-dropdown); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.nt-pop[hidden] { display: none; }
.nt-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-weight: 800; border-bottom: 1px solid var(--border); }
.nt-link { background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--primary-text); cursor: pointer; }
.nt-link:hover, .nt-link:focus-visible { text-decoration: underline; }
.nt-link[hidden] { display: none; }
.nt-pop-list { max-height: min(420px, 60vh); overflow-y: auto; }
.nt-pop-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: var(--fs-lg); }
.nt-pop-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); }
.nt-pop-item:last-child { border-bottom: none; }
.nt-pop-item:hover, .nt-pop-item:focus-visible { background: var(--surface-2); }
.nt-pop-item.unread { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.nt-pop-foot { display: block; text-align: center; padding: 11px; font-size: var(--fs-md); font-weight: 700; color: var(--primary-text); text-decoration: none; border-top: 1px solid var(--border); }
.nt-pop-foot:hover { background: var(--surface-2); }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 11px; flex-shrink: 0; background: transparent; }
.unread > .nt-dot { background: var(--primary); }
.nt-ic { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; }
.nt-blue { background: var(--info-soft); color: #1e40af; }
.nt-purple { background: var(--purple-bg); color: #5b21b6; }
.nt-amber { background: var(--warning-bg); color: var(--warning-tx); }
.nt-red { background: var(--danger-bg); color: var(--danger-tx); }
.nt-green { background: var(--success-bg); color: var(--success-tx); }
.nt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.nt-title { font-size: var(--fs-lg); font-weight: 600; }
.unread .nt-title { font-weight: 800; }
.nt-sub { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-card { overflow: hidden; }
.nt-group { padding: 8px 16px; font-size: var(--fs-sm); font-weight: 800; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.nt-item .nt-dot { margin-top: 0; }
.nt-item.unread { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.nt-item .nt-main:hover .nt-title, .nt-item .nt-main:focus-visible .nt-title { color: var(--primary-text); text-decoration: underline; }
.nt-item .nt-sub { white-space: normal; }
@media (max-width: 560px) { .nt-item { flex-wrap: wrap; } .nt-item .nt-main { flex-basis: calc(100% - 70px); } }
/* التذكيرات اليدوية (تبويب «تذكيراتي» + نافذة التذكير) + «إعداداتي» + صلاحيات التذكير في صفحة الأدوار */
.nt-gray { background: var(--surface-2); color: var(--text-2); }
.nt-item .nt-note { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px; }
.nt-item.nt-done .nt-title { color: var(--muted); text-decoration: line-through; }
.nt-item:target { outline: 2px solid var(--primary); outline-offset: -2px; }
.rm-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; max-height: 190px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.rm-link { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: end; }
@media (max-width: 560px) { .rm-link { grid-template-columns: minmax(0, 1fr); } }
/* جداول العرض الصغيرة — شكل واحد: عنوان بخلفية رمادي + خط تحت كل صف (.ns-table إعدادات التنبيهات · .tk-table المهام) */
.ns-table, .tk-table { width: 100%; border-collapse: collapse; }
.ns-table th, .tk-table th { text-align: start; font-size: var(--fs-sm); font-weight: 800; color: var(--muted); padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ns-table td, .tk-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ns-table .c { text-align: center; width: 80px; }
.ns-table input[type="checkbox"][data-ns-on] { width: 19px; height: 19px; accent-color: var(--primary); cursor: pointer; }
.ns-name { font-weight: 700; cursor: pointer; }
.ns-table tr.is-off .hp-pills, .ns-table tr.is-off .muted { opacity: .45; }
/* ===== المهام: صفوف القوائم (_TaskItem) + نافذة «مهام جديدة» ===== */
.tk-list { list-style: none; margin: 0; padding: 0; }
.tk-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.tk-item.is-late { box-shadow: inset -3px 0 0 var(--danger); }
[dir="ltr"] .tk-item.is-late { box-shadow: inset 3px 0 0 var(--danger); }
.tk-check-form { margin: 0; display: flex; }
.tk-check { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 2px solid var(--border-strong); background: var(--card); color: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
button.tk-check:hover, button.tk-check:focus-visible { border-color: var(--success); background: var(--success-bg); }
.tk-check.on { background: var(--success); border-color: var(--success); }
.tk-check.is-static { cursor: default; }
.tk-main { flex: 1; min-width: 0; }
.tk-title { font-weight: 700; font-size: var(--fs-lg); color: var(--text); text-decoration: none; }
.tk-title:hover, .tk-title:focus-visible { color: var(--primary-text); text-decoration: underline; }
.tk-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.tk-item.is-closed .tk-title { color: var(--muted); text-decoration: line-through; }
.tk-late, .nt-group.tk-late { color: var(--danger-tx); font-weight: 700; }
/* جدول المهام المدمج (_TaskTable): مهامي / كارت الرئيسية / تبويب القضية — المنتهية باهتة من غير شطب */
.tk-table td { font-size: var(--fs-lg); }
.tk-table tbody tr:last-child td { border-bottom: none; }
.tk-table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.tk-table th.actions, .tk-table td.actions { text-align: end; width: 1%; white-space: nowrap; }
.tk-table tr.tk-done td { color: var(--muted); }
.tk-table tr.tk-done .tk-title { color: var(--muted); font-weight: 600; }
.tk-table tr.tk-done .badge:not(.ts-btn) { opacity: .65; }
tr.tk-done td { color: var(--muted); }
tr.tk-done .cell-title { color: var(--muted); }
tr.tk-done a.cell-title:hover { color: var(--primary-text); }
.tk-done-at { display: inline-block; margin-inline-start: 4px; }
.tk-done-at:first-child { margin-inline-start: 0; }
.tk-actions { display: inline-flex; align-items: center; gap: 2px; }
.tk-actions form { margin: 0; display: inline-flex; }
.row-actions.tk-actions form { display: inline; }
.btn-icon.tk-finish { color: var(--success-tx); }
.btn-icon.tk-finish:hover, .btn-icon.tk-finish:focus-visible { background: var(--success-bg); color: var(--success-tx); }
/* ===== الأدوار والصلاحيات: جدول الأدوار (شريط «دور جديد» فوقه) + صفحة صلاحيات الدور (كروت الأقسام + زر لكل عملية) ===== */
.rl-add, .rl-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: end; }
.card.rl-add { padding: 14px 16px; margin-bottom: 16px; }
.rl-add .field, .rl-edit .field { margin: 0; }
.rl-add .btn { height: var(--ctl-h); white-space: nowrap; }
.rl-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* صفحة الصلاحيات: كل قسم كارت، وتحته صفحاته — كل صفحة سطر بأزرار عملياتها (hp-pill) وتحته إضافاتها السريعة */
.card.rl-edit { margin-bottom: 16px; }
.card.rl-sec { padding: 0; margin-bottom: 16px; overflow: hidden; }
.rl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--primary) 5%, var(--card)); }
.rl-sec-head h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 800; }
.rl-sec-count, .rl-count { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.rl-row { padding: 12px 16px; border-top: 1px solid var(--border); }
.rl-line { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.rl-row-name { font-weight: 700; }
.rl-pills .hp-pill span { font-size: var(--fs-sm); padding: 5px 14px; border-radius: 999px; }
.rl-pills .hp-pill input:checked + span::before { content: "✓"; margin-inline-end: 6px; font-weight: 800; }
.rl-pills .hp-pill input:disabled + span { cursor: default; }
.rl-pills-sm .hp-pill span { font-size: var(--fs-xs); padding: 3px 11px; }
.rl-extras { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 10px; }
.rl-extras-label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.card.rl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; position: sticky; bottom: 12px; }
.rl-foot-btns { display: inline-flex; gap: 8px; }
@media (max-width: 760px) {
    .rl-add, .rl-edit { grid-template-columns: minmax(0, 1fr); }
}/* نافذة المستخدم (Users/_UserModal): رأس بالحروف الأولى + قسمين بفاصل خفيف */
.fa-dialog.rcm-dialog.um-dialog { width: min(580px, 100%); }
.um-head { gap: 12px; }
.um-avatar { width: 46px; height: 46px; font-size: var(--fs-xl); background: color-mix(in srgb, var(--on-primary) 18%, transparent); color: inherit; }
.um-head-main { flex: 1; min-width: 0; }
.um-head h2 { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-head-sub { font-size: var(--fs-sm); color: color-mix(in srgb, var(--on-primary) 82%, var(--primary)); min-height: 1.2em; direction: rtl; unicode-bidi: plaintext; }
.um-sec { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 800; color: var(--muted); margin: 4px 0 12px; }
.um-sec::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.um-sec:not(:first-of-type) { margin-top: 6px; }
.um-pass { display: flex; gap: 8px; }
.um-pass input { flex: 1; min-width: 0; }
.um-pass .btn { height: var(--ctl-h); white-space: nowrap; }
.um-active { margin-top: 4px; }
/* نافذة تفاصيل المهمة (Tasks/_Details جوه overlay من js/tasks.js) */
.fa-dialog.rcm-dialog.td-dialog { width: min(600px, 100%); }
.td-head-main { min-width: 0; }
.td-head h2 { font-size: 1.1rem; overflow-wrap: anywhere; }
.td-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.td-chips { display: grid; gap: 10px; }
.td-chips .rv-chip { min-width: 0; overflow-wrap: anywhere; }
.td-label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.td-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: var(--fs-lg); }
.td-box.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.td-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-foot form { margin: 0; display: inline-flex; }
.td-spacer { flex: 1; }
.td-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 6px 4px; font: inherit; font-size: var(--fs-md); font-weight: 700; color: var(--text-2); cursor: pointer; }
.td-link:hover, .td-link:focus-visible { text-decoration: underline; color: var(--text); }
.td-link.danger { color: var(--danger-tx); }
/* كارت فيه جدول مهام (الرئيسية / تبويب القضية): من غير padding والجدول لحد الحافة */
.tk-card { overflow: hidden; }
.tk-card .card-head { padding: 14px 16px; margin: 0; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
.tk-card .empty-sm { padding: 22px 16px; }
/* شريط نسبة الإنجاز (_TaskProgress) */
.card.tk-progress { padding: 14px 16px; margin-bottom: 14px; }
.tk-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tk-progress-title { font-weight: 800; }
.tk-progress-count { font-weight: 600; color: var(--muted); font-size: var(--fs-md); }
.card.tk-progress .rv-progress { margin: 10px 0 0; }
.tk-periods { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tk-period { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.tk-period:hover { background: var(--surface-2); color: var(--text); }
.tk-period.active, .tk-period.active:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tk-progress.is-compact { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; max-width: 320px; }
.tk-progress.is-compact .rv-progress { flex: 1; margin: 0; height: 20px; }
.tk-progress.is-compact .tk-progress-count { white-space: nowrap; }
/* خانات الأرقام في «مهامي» (بتفلتر الجدول) */
.tk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tk-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.tk-tile:hover, .tk-tile:focus-visible { border-color: var(--primary); }
.tk-tile.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.tk-tile .k { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.tk-tile .n { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.tk-tile.is-late .k, .tk-tile.is-late .n { color: var(--danger-tx); }
.tk-tile.is-ok .n { color: var(--success-tx); }
@media (max-width: 640px) { .tk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* قائمة حالة المهمة (_StatusMenu): الشارة زر + قائمة fixed بتتموضع من js/tasks.js */
.ts-menu { display: inline-block; }
button.ts-btn { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; }
button.ts-btn:hover, button.ts-btn[aria-expanded="true"] { filter: brightness(.95); }
button.ts-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ts-pop { position: fixed; z-index: var(--z-menu); min-width: 190px; margin: 0; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); }
.ts-pop[hidden] { display: none; }
.ts-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; background: none; border-radius: 9px; cursor: pointer; font: inherit; font-size: var(--fs-lg); font-weight: 700; color: var(--text); text-align: start; }
.ts-item:hover:not([disabled]), .ts-item:focus-visible { background: var(--surface-2); outline: none; }
.ts-item[disabled] { cursor: default; }
.ts-item .ts-name { flex: 1; }
.ts-item .ts-check { color: var(--success); display: inline-flex; }
.ts-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.ts-gray { background: #94a3b8; }
.ts-blue { background: #2563eb; }
.ts-green { background: var(--success); }
.ts-red { background: var(--danger); }
.nt-tab.tk-warn:not(.active) .count-pill { background: var(--danger-bg); color: var(--danger-tx); }
/* نافذة المهام: كل مهمة = سطر (عنوان + موعد + وقت + أولوية + حذف) وتحته «تفاصيل» اختيارية */
.fa-dialog.rcm-dialog.tk-dialog { width: min(860px, 100%); }
.tk-rows-head, .tk-line.field { display: grid; grid-template-columns: minmax(0, 1fr) 150px 118px 104px 34px; gap: 8px; align-items: center; }
.tk-rows-head { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin: 6px 0 6px; }
.tk-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--border); }
.tk-row:last-child { border-bottom: none; margin-bottom: 4px; }
.tk-line.field { margin: 0; }
.tk-line .rk-date { width: 100%; }
.tk-line [hidden] { display: none; }
.tk-more.field { margin: 6px 0 0; }
.tk-more textarea { margin-top: 6px; }
.tk-more textarea[hidden] { display: none; }
@media (max-width: 640px) {
    .tk-item { flex-wrap: wrap; }
    .tk-item .tk-main { flex-basis: calc(100% - 40px); }
    .tk-rows-head { display: none; }
    .tk-line.field { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
    .tk-line.field > :nth-child(1) { grid-column: 1 / 3; }
    .tk-line.field > :nth-child(5) { grid-column: 3; grid-row: 1; }
    .tk-line.field > :nth-child(4) { grid-column: 1 / 3; }
}
.perm-custom { padding: 14px 16px; border-top: 1px solid var(--border); }
.perm-custom-t { font-weight: 700; margin-bottom: 8px; }
.perm-custom-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 10px; border: 1px solid transparent; background: transparent; border-radius: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.user-btn:hover, .user-menu.open .user-btn { background: color-mix(in srgb, var(--sidebar-on) 10%, transparent); border-color: color-mix(in srgb, var(--sidebar-on) 16%, transparent); }
.user-btn .u-tx { text-align: start; line-height: 1.25; }
.user-btn .u-name { font-weight: 700; font-size: var(--fs-md); color: var(--sidebar-on); }
.user-btn .u-role { font-size: var(--fs-xs); color: color-mix(in srgb, var(--sidebar-text) 75%, transparent); }
.user-btn .chev { width: 15px; height: 15px; color: var(--sidebar-text); }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm);
    color: var(--on-primary); background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--purple)));
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; border-radius: 18px; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.7rem; border-radius: 22px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.dropdown {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 230px; z-index: var(--z-dropdown);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.user-menu.open .dropdown { opacity: 1; visibility: visible; transform: none; }
.dd-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.dd-head .n { font-weight: 800; }
.dd-head .e { font-size: var(--fs-sm); color: var(--muted); word-break: break-all; }
/* قائمة الجرس: زر طلب إذن إشعارات النظام (يختفي بعد القرار) */
.nt-enable { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); background: var(--primary-50); color: var(--primary-text); font: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; text-align: start; cursor: pointer; }
.nt-enable[hidden] { display: none; }
.nt-enable svg { flex: none; margin-top: 3px; }
.nt-enable:hover { background: var(--primary-100); }
.nt-enable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* إعدادات التنبيهات: خيار الصوت تحت الجدول */
.ns-sound { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); cursor: pointer; }
.ns-sound input[type=checkbox] { margin-top: 4px; }
.ns-sound b { display: block; font-weight: 700; color: var(--text); }
.ns-sound small { color: var(--muted); font-size: var(--fs-sm); }
/* تقرير الحركات (ActivityReports/Index) */
.act-time { white-space: nowrap; }
.act-time small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.act-what { font-weight: 700; color: var(--text); }
.act-sec { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.act-diff { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.9; overflow-wrap: anywhere; }
.act-diff b { font-weight: 700; color: var(--text); }
.act-diff .old { color: var(--muted); text-decoration: line-through; }
.act-diff .arr { color: var(--muted); margin: 0 4px; }
.act-more summary { cursor: pointer; color: var(--primary-text); font-size: var(--fs-xs); font-weight: 700; margin-top: 2px; }
.act-more summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.dd-tenant { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.dd-tenant .dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex-shrink: 0; }
.dd-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: none; background: none; cursor: pointer; text-decoration: none; font-size: var(--fs-lg); font-weight: 600; color: var(--text-2); text-align: start; }
.dd-item:hover { background: var(--surface-2); color: var(--text); }
.dd-item.danger { color: var(--danger); }
.dd-item.danger:hover { background: var(--danger-bg); }

.content { flex: 1; width: 100%; min-width: 0; padding: 28px; }
.content-inner { max-width: 1480px; margin: 0 auto; }

/* ===== المظهر (Settings/Index): الشعار + القوالب الجاهزة + منتقيات الألوان + المعاينة الحية ===== */
.th-logo-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.th-logo-box { flex: none; width: 76px; height: 76px; border: 2px dashed var(--border-strong); border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-2); }
.th-logo-box img { width: 100%; height: 100%; object-fit: contain; }
/* الشعار يُعرَض على لون الشريط العلوي (مكانه الفعلي) — شعار أبيض شفاف يختفي على خلفية بيضاء */
.th-logo-box:has(img) { width: auto; height: auto; padding: 10px 14px; background: var(--sidebar); border-style: solid; border-color: var(--sidebar); }
.th-logo-box:has(img) img { display: block; width: auto; height: 64px; max-width: 220px; object-fit: contain; border-radius: 6px; }
.th-logo-ph { color: var(--muted); line-height: 0; }
.th-logo-file { flex: 1; min-width: 220px; }
.th-logo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.th-file { position: relative; cursor: pointer; }
.th-file input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.th-file:focus-within { box-shadow: var(--ring); }
.th-fav-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); align-items: center; }
.th-fav-box { flex: none; width: 48px; height: 48px; border: 2px dashed var(--border-strong); border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); }
.th-fav-box img { width: 32px; height: 32px; object-fit: contain; }
.th-hint { color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; }
.th-logo-actions .th-hint { margin-top: 0; }
.th-note { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 12px; }
.th-note.is-foot { margin: 12px 0 0; }
.th-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.preset-card { display: block; border: 2px solid var(--border); background: var(--card); border-radius: 12px; padding: 10px; cursor: pointer; font-family: inherit; text-align: start; transition: border-color .15s, transform .05s; }
.preset-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.preset-card.active { border-color: var(--primary); box-shadow: var(--ring); }
.preset-swatch { display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--border); }
.preset-swatch span { flex: 1; }
.preset-swatch span:first-child { flex: 1.4; }
.preset-name { display: block; font-size: var(--fs-md); font-weight: 600; }
.th-color { display: flex; gap: 8px; align-items: center; }
.th-color input[type=color] { width: 48px; height: var(--ctl-h, 42px); padding: 2px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; flex: none; background: var(--card); }
.th-color input[type=text] { flex: 1; min-width: 0; }
/* شكل القائمة الجانبية عند إغلاقها: ثلاث خيارات (radio) ككروت */
.th-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.th-mode { position: relative; margin: 0; cursor: pointer; }
.th-mode input { position: absolute; opacity: 0; pointer-events: none; }
.th-mode-box { display: block; height: 100%; padding: 12px 14px; border: 2px solid var(--border); border-radius: 12px; background: var(--card); transition: border-color .15s, background .15s; }
.th-mode:hover .th-mode-box { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.th-mode input:checked + .th-mode-box { border-color: var(--primary); background: var(--primary-50); }
.th-mode input:focus-visible + .th-mode-box { box-shadow: var(--ring); }
.th-mode-t { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-md); }
.th-mode input:checked + .th-mode-box .th-mode-t { color: var(--primary-text); }
.th-mode-h { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
@media (max-width: 768px) { .th-modes { grid-template-columns: minmax(0, 1fr); } }
.th-preview-card { position: sticky; top: calc(var(--topbar-h) + 20px); }
/* المعاينة الحية: نفس هيكل الواجهة — شريط علوي ملوّن + قائمة فاتحة + محتوى. الألوان من متغيّرات --pv-* (بيحطّها الـ JS) */
.th-preview { --pv-bar: var(--sidebar); --pv-bar-on: var(--sidebar-on); --pv-bg: var(--bg); --pv-primary: var(--primary); --pv-on-primary: var(--on-primary); --pv-primary-text: var(--primary-text);
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--pv-bar); font-size: var(--fs-xs); color: var(--text); }
.th-pv-top { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--pv-bar-on); }
.th-pv-logo { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; overflow: hidden; background: var(--pv-primary); color: var(--pv-on-primary); }
.th-pv-logo img { width: 100%; height: 100%; object-fit: contain; background: none; }
.th-pv-logo:has(img) { display: block; width: auto; height: auto; padding: 0; background: none; border-radius: 5px; line-height: 0; }
.th-pv-logo:has(img) img { display: block; width: auto; height: 24px; max-width: 96px; object-fit: contain; background: none; }
.th-pv-name { flex: 0 1 auto; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-pv-search { flex: 1; max-width: 90px; height: 16px; margin-inline-start: auto; border-radius: 5px; background: color-mix(in srgb, var(--pv-bar-on) 14%, transparent); }
.th-pv-body { display: flex; min-height: 190px; border-radius: 10px 10px 0 0; background: var(--pv-bg); }
.th-pv-side { flex: none; width: 92px; padding: 8px 6px; display: flex; flex-direction: column; gap: 3px; background: color-mix(in srgb, var(--pv-bg) 95%, var(--pv-bar)); border-inline-end: 1px solid color-mix(in srgb, var(--border) 80%, var(--pv-bar)); border-start-start-radius: 10px; }
.th-pv-item { padding: 4px 7px; border-radius: 6px; border: 1px solid transparent; color: var(--text-2); }
.th-pv-item.is-on { background: #fff; border-color: var(--border); color: var(--text); font-weight: 800; }
.th-pv-main { flex: 1; min-width: 0; padding: 10px; }
.th-pv-title { font-size: var(--fs-md); font-weight: 800; margin-bottom: 8px; }
.th-pv-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.th-pv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.th-pv-link { color: var(--pv-primary-text); font-weight: 700; }
.th-pv-btn { display: inline-block; padding: 5px 12px; border-radius: 8px; background: var(--pv-primary); color: var(--pv-on-primary); font-weight: 700; }

/* ===== الحقول المخصصة (CaseFields/Index + Form) ===== */
.cf-wide { max-width: 760px; }
.cf-hint { color: var(--muted); font-size: var(--fs-sm); }
.cf-group { margin-bottom: 16px; scroll-margin-top: 80px; }
.cf-ghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cf-ghead h3 { margin: 0; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cf-ghead h3 small { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
.cf-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cf-tools form, .cf-field form { display: inline; margin: 0; }
.cf-rename { display: none; gap: 6px; align-items: center; }
.cf-tools form.cf-rename { display: none; }
.cf-tools form.cf-rename.open { display: inline-flex; }
.cf-rename input, .cf-newgroup input { padding: 7px 10px; border: 1px solid #d5dae3; border-radius: 8px; font: inherit; font-size: var(--fs-lg); min-width: 200px; }
.cf-scroll { overflow-x: auto; }
.cf-col-order { width: 70px; }
.cf-field { scroll-margin-top: 80px; }
.cf-field.is-off td { opacity: .6; }
.cf-optline { font-size: var(--fs-xs); color: var(--muted); }
.cf-types { display: flex; gap: 4px; flex-wrap: wrap; }
.cf-move { border: 1px solid var(--border); background: var(--card); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; color: var(--muted); font-size: var(--fs-sm); }
.cf-move:hover:not(:disabled) { color: var(--primary-text); border-color: var(--primary); }
.cf-move:disabled { opacity: .35; cursor: default; }
.cf-empty { color: var(--muted); font-size: var(--fs-md); padding: 12px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
.cf-newgroup { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cf-newgroup label { font-weight: 600; font-size: var(--fs-lg); }
/* مقصورة على جدول الإدارة: نفس الاسم مستخدم في نموذج القضية (من غير bold) */
tr.cf-field .cf-req { color: var(--danger-strong); font-weight: 700; }
.cf-group:target, .cf-field:target { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 2px; border-radius: 10px; }
/* نموذج الحقل */
.cf-types-box { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.cf-types-box[hidden] { display: none; }
.cf-chk { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; font-weight: 500 !important; cursor: pointer; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-md) !important; user-select: none; }
.cf-chk.cf-all { margin-bottom: 8px !important; }
.cf-chk:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); color: var(--primary-text); }
.cf-chk input { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; }
.cf-switches { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 4px 0 18px; }
.cf-options { border: none; padding: 0; }
.cf-options[hidden] { display: none; }
.cf-options legend { font-size: var(--fs-md); font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.cf-opt-list { display: grid; gap: 6px; margin-bottom: 8px; }
.cf-opt { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 34px; gap: 6px; align-items: center; }
.cf-opt .cf-grip { color: var(--muted); text-align: center; font-size: var(--fs-sm); }
.cf-opt input[type=text] { width: 100%; padding: 9px 12px; border: 1px solid #d5dae3; border-radius: 9px; font: inherit; font-size: var(--fs-lg); }
.cf-opt input[type=text]:focus { outline: none; border-color: var(--primary); }
.cf-opt-del { width: 34px; height: 38px; border: 1px solid transparent; background: none; border-radius: 9px; cursor: pointer; color: var(--muted); font-size: 1.1rem; }
.cf-opt-del:hover, .cf-opt-del:focus-visible { background: var(--danger-soft); color: var(--danger-strong); border-color: var(--danger-border); outline: none; }
.cf-opt.is-off input[type=text] { opacity: .55; }
.cf-note { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
/* ===== تفاصيل صغيرة كانت style="" في صفحاتها ===== */
.date-tile.lg { width: 64px; }
.date-tile.lg .d { font-size: 1.5rem; }
.stat-ic.is-36 { width: 36px; height: 36px; border-radius: 10px; }
.stat-ic.is-38 { width: 38px; height: 38px; border-radius: 10px; }
.stat-ic.is-40 { width: 40px; height: 40px; border-radius: 11px; }
.avatar.is-opponent { background: linear-gradient(135deg, #ef4444, #f97316) !important; }
.card.denied-card { max-width: 560px; margin: 40px auto !important; }
/* صفحة «غير مصرّح» (Account/AccessDenied): محتوى هادئ في وسط الصفحة بلا بطاقة */
.denied { max-width: 460px; margin: 56px auto; text-align: center; }
.denied-mark { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-text); border: 1.5px solid var(--primary-200); background: var(--primary-50); }
.denied h1 { font-size: 1.375rem; font-weight: 800; margin-bottom: 8px; }
.denied p { color: var(--muted); line-height: 1.9; margin-bottom: 22px; }
.denied-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.empty .icon.is-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.count-pill.is-consult { background: var(--purple-bg) !important; color: #5b21b6 !important; }
.cal-time { font-weight: 800 !important; min-width: 44px !important; }
.emp-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.doc-ext-col { width: 44px !important; flex: none !important; }
/* ===== البحث العام في الشريط العلوي (js/global-search.js) ===== */
.gs { position: relative; flex: 0 1 360px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--sidebar-on) 16%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--sidebar-on) 10%, transparent); color: var(--sidebar-on); transition: background .15s, border-color .15s; }
.gs:focus-within { background: color-mix(in srgb, var(--sidebar-on) 16%, transparent); border-color: color-mix(in srgb, var(--sidebar-on) 40%, transparent); }
.gs-lead { display: grid; place-items: center; opacity: .8; }
.gs-input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none; color: inherit; font-size: var(--fs-md); }
.gs-input::placeholder { color: color-mix(in srgb, var(--sidebar-text) 70%, transparent); }
.gs-kbd { flex: none; font: inherit; font-size: var(--fs-xs); direction: ltr; padding: 1px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--sidebar-on) 22%, transparent); color: color-mix(in srgb, var(--sidebar-text) 80%, transparent); }
.gs:focus-within .gs-kbd { display: none; }
.gs-close { display: none; flex: none; width: 32px; height: 32px; place-items: center; border: none; border-radius: 9px; background: none; color: inherit; cursor: pointer; }
.gs-open { display: none; }
.tb-spacer { flex: 1; min-width: 0; }
.gs-pop { position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: var(--z-dropdown); max-height: min(480px, 70vh); overflow-y: auto; padding: 6px;
    background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.gs-gtitle { padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: var(--fs-md); }
.gs-ic { flex: none; display: grid; place-items: center; color: var(--muted); }
.gs-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; unicode-bidi: plaintext; }
.gs-s { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; font-size: var(--fs-xs); color: var(--muted); unicode-bidi: plaintext; }
.gs-item:hover, .gs-item.is-active, .gs-all:hover, .gs-all.is-active { background: var(--primary-50); }
.gs-item.is-active .gs-ic { color: var(--primary-text); }
.gs-pop mark { background: var(--warning-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.gs-all { display: block; padding: 7px 10px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--primary-text); text-decoration: none; }
.gs-empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: var(--fs-md); }
@media (max-width: 1200px) { .gs-kbd { display: none; } }
@media (max-width: 768px) {
    /* الموبايل: أيقونة بحث — بتفتح الخانة بعرض الشريط كله */
    .gs { display: none; }
    .tb-spacer { display: none; }
    .gs-open { display: grid; }
    .topbar.gs-open .gs { display: flex; position: absolute; inset: 0; z-index: 2; height: auto; margin: 10px 12px; background: var(--sidebar); border-color: color-mix(in srgb, var(--sidebar-on) 40%, transparent); box-shadow: 0 0 0 12px var(--sidebar); }
    .topbar.gs-open .gs-close { display: grid; }
}
/* ===== النافذة الموحّدة (.mdl-*) — شكل واحد لكل نوافذ النماذج والإضافة السريعة =====
   رأس بلون المكتب (عنوان + أيقونة إغلاق) · جسم بيتمرّر · تذييل ثابت (حفظ ثم إلغاء) · في نص الشاشة دايمًا.
   الأحجام: الافتراضي صغير 440 · .mdl-md 680 · .mdl-lg 1120. الضغط برّه النافذة لا يقفلها (Esc / إلغاء / أيقونة الإغلاق).
   السلوك المشترك (حبس التركيز + قفل تمرير الصفحة) في app.js قسم 7: RKModal.opened(overlay) / RKModal.closed(overlay).
   المرحلة 1: نوافذ القوائم والإضافة السريعة (.clk-*) — المرحلة 2: نوافذ .fa-overlay. */
.mdl-overlay, .clk-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15, 23, 42, .45); display: none; align-items: center; justify-content: center; padding: 16px; overscroll-behavior: contain; }
.mdl-overlay.open, .clk-overlay.open { display: flex; animation: mdlFade .15s ease; }
@keyframes mdlFade { from { opacity: 0; } to { opacity: 1; } }
.mdl, .clk-modal { background: var(--card); border-radius: var(--radius-lg); width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.mdl.mdl-md, .clk-modal.pt-modal-wide { max-width: 680px; }
.mdl.mdl-lg { max-width: 1120px; }
.mdl-head, .clk-modal-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--primary); color: var(--on-primary); }
.mdl-head h2, .mdl-head h3, .clk-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: inherit; min-width: 0; overflow-wrap: anywhere; }
.mdl-x, .clk-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: none; border-radius: 9px; background: none; color: inherit; cursor: pointer; }
.mdl-x:hover, .clk-x:hover { background: color-mix(in srgb, var(--on-primary) 18%, transparent); }
.mdl-x:focus-visible, .clk-x:focus-visible { outline: 2px solid var(--on-primary); outline-offset: 1px; }
.mdl-body, .clk-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 8px; }
.mdl-foot, .clk-modal-foot { flex: none; display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
html.rk-modal-open { overflow: hidden; scrollbar-gutter: stable; }
/* ===== نافذة التأكيد الموحّدة (app.js قسم 6 — RKConfirm / data-confirm): بدل confirm بتاع المتصفح ===== */
.cfm-overlay { position: fixed; inset: 0; z-index: var(--z-confirm); display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .45); }
.cfm-overlay[hidden] { display: none; }
.cfm-dialog { width: min(420px, 100%); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px 20px 16px; }
.cfm-head { display: flex; align-items: flex-start; gap: 14px; }
.cfm-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.cfm-ic.is-danger { background: var(--danger-bg); color: var(--danger); }
.cfm-ic.is-normal { background: var(--primary-100); color: var(--primary-text); }
.cfm-tx { min-width: 0; }
.cfm-tx h2 { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
.cfm-tx p { margin: 6px 0 0; font-size: var(--fs-lg); color: var(--muted); line-height: 1.7; }
.cfm-tx p[hidden] { display: none; }
.cfm-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
/* ===== الرئيسية (Home/Index): شريط المطلوب اليوم + عمودان (جدول اليوم والتقويم | المهام والإنجاز والتحصيل والمكتب) ===== */
/* خانة التحية في أول شريط الرئيسية: الاسم، وتحته التاريخ الميلادي · الهجري */
.hm-hello { flex: 1.7 1 260px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px 22px; background: var(--card); min-width: 0; }
.hm-hello h1 { font-size: 1.2rem; font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-date { display: flex; flex-wrap: wrap; gap: 0 8px; }
.hm-need .hm-date span { color: var(--muted); font-size: var(--fs-md); font-weight: 600; }
.hm-date-h::before { content: "·"; margin-inline-end: 8px; }
/* خانة فيها ما يحتاج تصرّفًا (متأخر / يحتاج قرارًا) */
.stat.is-hot { border-color: var(--danger-border); }
.stat.is-hot .stat-v { color: var(--danger); }
.stat.is-hot .stat-ic { background: var(--danger-soft); color: var(--danger); }
/* شريط «المطلوب اليوم»: كارت واحد بأرقام متجاورة (الفاصل = لون الحد الظاهر بين الخانات) — الرقم المحتاج تصرّفًا بالأحمر */
.hm-need { display: flex; flex-wrap: wrap; gap: 1px; padding: 0; margin-bottom: 18px; overflow: hidden; background: var(--border); }
.hm-need a { flex: 1 1 170px; display: block; padding: 16px 22px; background: var(--card); color: inherit; text-decoration: none; transition: background .15s; }
.hm-need a:hover { background: var(--surface-2); }
.hm-need a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.hm-need b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.hm-need span { color: var(--muted); font-size: var(--fs-md); font-weight: 600; }
.hm-need a.is-hot b { color: var(--danger-tx); }
/* العمودان: الرئيسي (جدول اليوم + التقويم) والجانبي (المهام + الإنجاز + التحصيل + المكتب) */
.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.hm-split.is-one { grid-template-columns: minmax(0, 1fr); }
.hm-col { display: grid; gap: 18px; min-width: 0; }
.hm-col > .card { margin: 0; }
@media (max-width: 1100px) { .hm-split { grid-template-columns: minmax(0, 1fr); } }
/* مهام اليوم في العمود الجانبي: قائمة مدمجة (العنوان + الربط والموعد) وشارة الحالة */
.hm-scope { margin-bottom: 12px; }
.hm-tasks, .hm-due { list-style: none; display: grid; margin-top: 12px; }
.hm-tasks li, .hm-due li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.hm-tasks li:first-child, .hm-due li:first-child { padding-top: 0; }
.hm-tasks li:last-child, .hm-due li:last-child { border-bottom: none; padding-bottom: 0; }
/* القوائم الطويلة في الرئيسية (المهام، جدول اليوم) تتمرّر داخل كارتها بدل ما تطوّل الصفحة — حوالي 5 عناصر ظاهرة */
.hm-tasks, .hm-col .agenda { max-height: 390px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding-inline-end: 6px; }
.hm-col .agenda li { flex: none; }
.hm-task-main { flex: 1; min-width: 0; }
.hm-tasks .tk-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.hm-due { padding-top: 12px; border-top: 1px solid var(--border); }
/* صفوف (تسمية ↔ قيمة) في كروت العمود الجانبي */
.hm-kv { display: grid; }
.hm-kv > * { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); color: inherit; text-decoration: none; }
.hm-kv > *:first-child { padding-top: 0; }
.hm-kv > *:last-child { border-bottom: none; padding-bottom: 0; }
.hm-kv b { font-weight: 800; white-space: nowrap; }
.hm-kv a:hover { color: var(--primary-text); }
.hm-kv .is-hot, .hm-kv .is-hot .money, .hm-kv .is-hot .cur { color: var(--danger-tx); }
/* الأكثر إنجازًا هذا الأسبوع: الترتيب + الاسم + النسبة، وتحتها الشريط والأعداد */
.hm-top { list-style: none; display: grid; gap: 14px; }
.hm-top li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.hm-top .rk { font-weight: 800; color: var(--muted); }
.hm-top .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-top .pc { font-weight: 800; }
.hm-top .bar { grid-column: 2 / -1; display: block; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.hm-top .bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.hm-top .mt { grid-column: 2 / -1; font-size: var(--fs-sm); color: var(--muted); }
.hm-note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
/* تقويم الشهر في الرئيسية: نفس كلاسات صفحة التقويم (cal-*) بخلايا أقصر */
.hm-cal { margin-top: 0; }
.hm-cal .cal-nav .cal-month { min-width: 130px; justify-content: center; }
.hm-cal .cal-cell { min-height: 92px; }
.hm-cal a.cal-more { display: block; text-decoration: none; }
.hm-cal a.cal-more:hover { color: var(--primary-text); }
@media (max-width: 768px) { .hm-cal .cal-cell { min-height: 54px; } .hm-hello { flex-basis: 100%; } }
/* ===== ملف الموكّل (Clients/Details): شريط الحساب بأربع خانات + كروت القضايا/الاتفاقات/السندات/الاستشارات ===== */
.fee-totals.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.fee-totals.is-4 > div { background: var(--card); box-shadow: var(--shadow-xs); padding: 12px 16px; }
.fee-totals.is-4 > div.due { background: var(--warning-soft); }
.fee-totals .late { border-color: var(--danger-border); background: var(--danger-soft); }
.agenda li.is-off { opacity: .6; }
.cl-notes { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cl-notes .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; margin-bottom: 4px; }
@media (max-width: 700px) { .fee-totals.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ====================================================================
   الاستجابة (Responsive)
   ==================================================================== */
@media (max-width: 1280px) {
    .form-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .split { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid-4, .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: minmax(0, 1fr); }
    .dl-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* تابلت وموبايل: الشريط الجانبي بيتحول لدرج منزلق فوق المحتوى */
@media (max-width: 992px) {
    .main, body.collapsed .main { margin-right: 0; }
    .sidebar { transform: translateX(100%); box-shadow: none; }
    body.mobile-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
    body.mobile-open .backdrop { opacity: 1; visibility: visible; }
    body.mobile-open { overflow: hidden; }
    /* الدرج: زر القائمة أولًا ثم الشعار */
    .tb-toggle { display: grid; }
    .tb-brand { width: auto; order: 1; }
    .topbar > [data-sidebar-toggle] { order: 0; }
    .topbar > :not(.tb-brand):not([data-sidebar-toggle]) { order: 2; }
    .content { padding: 22px 18px; }
    .auth { grid-template-columns: 1fr; }
    .auth-side { display: none; }
    .auth-mbrand { display: flex; }
}

@media (max-width: 768px) {
    body { font-size: 14px; }
    .content { padding: 16px 14px 28px; }
    .topbar { padding: 0 12px; gap: 10px; }
    .tb-brand-tx { display: none; }
    .user-btn .u-tx, .user-btn .chev { display: none; }
    .user-btn { padding: 2px; }
    .crumbs { display: none; }
    .tb-page { display: block; }

    .page-head { align-items: stretch; margin-bottom: 16px; }
    .page-head h1 { font-size: 1.28rem; }
    .page-head .toolbar, .page-head > .actions { width: 100%; }
    .page-head .toolbar .btn, .page-head > .actions .btn { flex: 1 1 0; min-width: max-content; }
    .page-head .toolbar .btn:not(.btn-ghost):not(.btn-soft), .page-head > .actions .btn:not(.btn-ghost):not(.btn-soft) { order: -1; flex-basis: 100%; }

    .card { padding: 16px; border-radius: 14px; }
    .card > form > .form-actions:last-child, .card > .form-actions:last-child, form.card > .form-actions:last-child { margin: 16px -16px -16px; padding: 12px 16px; }
    .form-grid, .form-grid-3, .form-grid-4, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .dl-2, .dl-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
    .span-2 { grid-column: auto; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { padding: 14px; gap: 10px; flex-direction: column; align-items: flex-start; }
    .stat-ic { width: 40px; height: 40px; }
    .stat-v { font-size: 1.3rem; }
    .form-actions .btn { flex: 1 1 auto; }

    .hero { padding: 18px 16px; gap: 14px; }
    .hero h1 { font-size: 1.18rem; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { flex: 1 1 auto; }
    .hero-actions .btn-ghost[title] { flex: 0 0 44px; padding: 0; }
    .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .filter-bar { padding: 12px; gap: 10px; }
    /* الموبايل: البحث ظاهر والفلاتر التانية ورا زر «فلترة» (app.js بيضيفه) */
    .filter-bar.fb-collapsible .fb-toggle { display: inline-flex; flex: 0 0 auto; }
    .filter-bar.fb-collapsible .fb-grow { flex: 1 1 0; }
    .filter-bar.fb-collapsible:not(.open) > .fb-field:not(.fb-grow), .filter-bar.fb-collapsible:not(.open) > .fb-actions { display: none; }
    .filter-bar.fb-collapsible .fb-toggle .fb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
    .filter-bar .fb-field, .filter-bar .fb-grow { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .filter-bar .fb-grow { flex-basis: 100%; }
    .filter-bar .fb-field input, .filter-bar .fb-field select, .filter-bar .fb-field .ss-root { min-width: 0; width: 100%; }
    .filter-bar .fb-actions { flex: 1 1 100%; }
    .filter-bar .fb-actions .btn { flex: 1; }

    .clk-tabs, .subj-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
    .clk-tabs::-webkit-scrollbar { display: none; }

    /* جداول الموبايل: كل صف بيتحول لبطاقة (table.stack) — الـ Layout بيحط data-label من العناوين */
    table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
    table.stack thead { display: none; }
    .content table.stack:not(.plain), .table-wrap table.stack { border: none; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
    .table-wrap:has(table.stack) { background: transparent; border: none; box-shadow: none; overflow: visible; }
    .table-wrap:has(table.stack) .pagination { border: none; padding: 12px 2px 0; }
    table.stack tr { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 10px; padding: 8px 14px; }
    table.stack tbody tr:hover { background: var(--card); }
    table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: start; min-height: 36px; }
    table.stack td:last-child { border-bottom: none; }
    table.stack td::before { content: attr(data-label); flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
    table.stack td[data-label=""]::before { display: none; }
    table.stack td > * { text-align: left; }
    table.stack td.cell-primary { display: block; padding: 6px 0 10px; font-size: var(--fs-xl); }
    table.stack td.cell-primary::before { display: none; }
    table.stack td.cell-primary > * { text-align: start; }
    table.stack td.actions { justify-content: flex-end; width: 100%; padding-top: 8px; }
    table.stack td.actions::before { display: none; }
    table.stack .row-actions { width: 100%; justify-content: flex-end; gap: 6px; }
    table.stack .row-actions .btn-icon { border-color: var(--border); background: var(--surface-2); }

    /* باقي الجداول: تمرير أفقي داخل حدودها */
    table:not(.stack) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table:not(.stack) th, table:not(.stack) td { white-space: nowrap; }

    .app-toast-wrap { left: 12px; right: 12px; top: 12px; }
    .app-toast { min-width: 0; max-width: none; }
    .pagination { justify-content: center; }
    .pagination .pinfo { width: 100%; text-align: center; }
}

@media (max-width: 420px) {
    .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .dl, .dl-2, .dl-3 { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .sidebar, .topbar, .backdrop, .app-toast-wrap, .page-crumbs, .page-note, .page-head .toolbar, .hero-actions, .row-actions, .form-actions { display: none !important; }
    .main { margin: 0 !important; }
    .content { padding: 0; }
    body { background: #fff; }
    .card, .hero, table { box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ====================================================================
   أنماط صفحات كانت <style> جوّه الصفحة — في آخر الملف عشان تفضل بنفس أولويتها (بعد كل اللي فوق)
   ==================================================================== */
/* ===== نموذج القضية (Cases/_Form): رقم الملف + الموضوع + الحقول الإضافية ===== */
.fn-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.fn-readonly { background: var(--bg) !important; color: var(--muted); cursor: default; font-weight: 700; }
.subj { display: grid; gap: 8px; justify-items: start; }
.subj textarea { min-height: 110px; width: 100%; }
.subj-en { width: 100%; }
.subj-en[hidden] { display: none !important; }
/* الحقول الإضافية */
.xf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; }
.xf-chips-label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.xf-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--border); background: transparent; color: var(--muted); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s; }
.xf-chip:hover, .xf-chip:focus-visible { color: var(--primary-text); border-color: var(--primary); border-style: solid; }
.xf { position: relative; }
.xf-x { position: absolute; top: 0; left: 0; z-index: 1; border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px; line-height: 0; border-radius: 6px; }
.xf-x:hover, .xf-x:focus-visible { color: #dc2626; }
.xf[hidden], .xf-chip[hidden] { display: none !important; }
.xf-chips:not(:has(.xf-chip:not([hidden]))) { display: none; }

/* ===== الحقول المخصصة في نموذج القضية (Cases/_CaseCustomFields) ===== */
    .cf-req { color: #b91c1c; }
    .cf-sec { margin-top: 14px; }
    .cf-title { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 700; color: var(--muted); }
    .cf-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cf-range > span { color: var(--muted); font-size: var(--fs-md); }
    .cf-range > input, .cf-range > .rk-date { flex: 1 1 160px; min-width: 150px; }
    .cf-yesno { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 30px !important; cursor: pointer; font-weight: 600; }
    .cf-yesno input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
    .cf-field[hidden], .cf-sec[hidden] { display: none !important; }

/* ===== نموذج الموكّل (Clients/_Form) ===== */
/* جهات الاتصال جوه كارت «التواصل»: من غير إطار خاص — فاصل خفيف فوقها بس */
.cl-form .ce { border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 0 0; margin-top: 4px; }
/* عنوان «المستندات» الداخلي مكرر مع عنوان الكارت */
.cl-form .docs-ed .case-sec { margin-top: 0; }
.cl-savebar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; position: sticky; bottom: 12px; z-index: 4; }

/* ===== اختيار الأعمدة (Shared/_ColumnsMenu) — زر في شريط عنوان الصفحة يفتح أزرار تبديل ===== */
.cl-cols { position: relative; }
.cl-cols > summary { list-style: none; cursor: pointer; }
.cl-cols > summary::-webkit-details-marker { display: none; }
.cl-cols[open] > summary { border-color: var(--primary); color: var(--primary-text); }
.cl-cols-pop {
    position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 30; width: 290px; max-width: calc(100vw - 32px);
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14); text-align: start; font-weight: 400;
}
.cl-cols-title { margin: 0; font-size: var(--fs-md); font-weight: 800; }
.cl-cols-hint { margin: 2px 0 12px; font-size: var(--fs-xs); color: var(--muted); }
.cl-cols-pop .hp-pills { gap: 6px; }
.cl-cols-pop .hp-pill input:disabled + span { opacity: .65; }
.cl-cols-actions { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ===== نموذج القضية (Cases/Create|Edit) — كروت مرقّمة ===== */
.cs-form .docs-ed { margin-top: 0; }
.cs-form .docs-ed-head { margin-bottom: 14px; }
.cs-form .docs-ed-head .fa-head { margin: 0; }
.cs-form .xf-chips { margin: 14px 0 0; }
/* القضايا المرتبطة: الكارت بيتحمّل من جديد بعد كل ربط — فالرقم بييجي من الكارت نفسه (--step) */
.cs-form .cs-links .cl-head h3 { font-size: 1rem; gap: 10px; }
.cs-form .cs-links .cl-head h3::before {
    content: var(--step); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: var(--fs-sm); font-weight: 800; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary-text);
}

/* ===== جهات اتصال الموكّل (Clients/_ContactsEditor) ===== */
.ce { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 16px; }
.ce-head h3 { margin: 0 0 10px; font-size: 1rem; }
.ce-head small { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
.ce-rows { display: grid; gap: 8px; }
.ce-rows:empty::before { content: attr(data-empty); display: block; padding: 10px; text-align: center; color: var(--muted); font-size: var(--fs-md); border: 1px dashed var(--border); border-radius: 10px; }
.ce-row { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(270px, 1.7fr) minmax(140px, 1.2fr) 110px auto auto 36px; gap: 8px; align-items: center; }
.ce-row input[type=text], .ce-row select { width: 100%; padding: 9px 11px; border: 1px solid #d5dae3; border-radius: 9px; font: inherit; font-size: var(--fs-lg); background: var(--card); }
.ce-row input[type=text]:focus, .ce-row select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.ce-chk { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; margin: 0; font-weight: 500; }
.ce-chk input { width: 15px; height: 15px; accent-color: var(--primary); margin: 0; }
.ce-del { width: 36px; height: 38px; border: 1px solid transparent; background: none; border-radius: 9px; cursor: pointer; color: var(--muted); font-size: 1.15rem; }
.ce-del:hover, .ce-del:focus-visible { background: #fef2f2; color: #b91c1c; border-color: #fecaca; outline: none; }
.ce-add { margin-top: 8px; border: none; background: none; color: var(--primary-text); font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; padding: 6px 4px; border-radius: 8px; }
.ce-add:hover, .ce-add:focus-visible { background: color-mix(in srgb, var(--primary) 8%, transparent); outline: none; }
@media (max-width: 1150px) { .ce-row { grid-template-columns: 1fr 1fr; } .ce-row .ce-del { justify-self: end; } }

/* ===== نموذج الموظف (Employees/_Form): التبويبات ===== */
.form-grid-multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0 20px; }

/* ===== نموذج الخصم (Opponents/_Form) ===== */
/* حقل الهاتف بمفتاح الدولة (js/phone-input.js): قائمة الدولة + الرقم — الصف LTR والقائمة نفسها RTL */
.ph-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.ph-row .ss-root, .ph-row select.ph-code { flex: 0 0 172px; width: 172px; direction: rtl; }
.ph-row .ss-panel { inset-inline: auto; left: 0; width: 260px; max-width: 80vw; }
.ph-row .ph-num { flex: 1 1 auto; min-width: 0; width: auto; direction: ltr; text-align: left; }
.ce-row .ph-num { padding: 9px 11px; border: 1px solid #d5dae3; border-radius: 9px; font: inherit; font-size: var(--fs-lg); background: var(--card); }
.ce-row .ph-num:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.ce-row .ph-row .ss-root { flex-basis: 150px; width: 150px; }
@media (max-width: 520px) { .ph-row .ss-root, .ph-row select.ph-code { flex-basis: 132px; width: 132px; } }
.phone-row { display: flex; gap: 8px; }
.phone-row .phone-code { flex: 0 0 96px; width: 96px !important; text-align: center; }
.check-inline { display: inline-flex !important; gap: 8px; align-items: center; font-weight: 500 !important; cursor: pointer; }

/* ===== تقويم الجلسات (Hearings/Calendar) ===== */
.cal-card { padding: 0; overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cal-month { font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 10px 6px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-dow .s { display: none; }
.cal-cell { min-height: 112px; border-inline-start: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 7px; position: relative; min-width: 0; }
.cal-grid > .cal-cell:nth-child(7n+1) { border-inline-start: none; }
.cal-cell.out { background: var(--surface-2); }
/* أيام الشهر السابق/التالي داخل الشبكة: رقمها ومواعيدها باهتة (تبقى قابلة للضغط) */
.cal-cell.out .dn, .cal-cell.out.has-ev .dn { color: var(--muted); font-weight: 400; }
.cal-cell.out .cal-ev, .cal-cell.out .cal-more, .cal-cell.out .cal-dots { opacity: .6; }
.cal-cell.out .cal-ev:hover, .cal-cell.out .cal-ev:focus-visible { opacity: 1; }
.cal-cell .dn { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin-bottom: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-cell.today { background: var(--primary-50); }
.cal-cell.today .dn { background: var(--primary); color: var(--on-primary); }
.cal-cell.has-ev .dn { color: var(--text); }
.cal-ev { display: block; border-radius: 7px; padding: 4px 7px; margin-bottom: 4px; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; border: 1px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter .1s; }
.cal-ev:hover { filter: brightness(.96); }
.cal-ev .tm { font-weight: 800; }
.ev-scheduled { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ev-held { background: var(--success-soft); border-color: var(--success-border); color: var(--success-tx); }
.ev-adjourned { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.ev-cancelled { background: #fef2f2; border-color: #fecaca; color: #b91c1c; text-decoration: line-through; }
/* الاستشارات: بنفسجي + خط جانبي — الملغاة مشطوبة */
.ev-consult { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; border-inline-start-width: 3px; border-inline-start-color: #7c3aed; }
.ev-consult.is-off { text-decoration: line-through; opacity: .7; }
.cal-dots i.c { background: #7c3aed; }
.cal-more { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; padding: 2px 7px; }
.cal-dots { display: none; gap: 3px; justify-content: center; flex-wrap: wrap; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid; }
.cal-agenda { display: none; }
@media (max-width: 768px) {
    .cal-head { padding: 12px; }
    .cal-cell { min-height: 54px; padding: 4px 2px; text-align: center; }
    .cal-cell .dn { margin: 0 auto 3px; width: 26px; height: 26px; font-size: var(--fs-sm); }
    .cal-ev, .cal-more { display: none; }
    .cal-dots { display: flex; }
    .cal-dow { padding: 8px 2px; }
    .cal-dow .l { display: none; }
    .cal-dow .s { display: inline; }
    .cal-agenda { display: block; margin-top: 16px; }
    .cal-agenda h4 { font-size: var(--fs-md); color: var(--muted); margin: 14px 0 6px; }
    .cal-agenda h4:first-of-type { margin-top: 0; }
}

/* ===== العقود: قائمة البنود، محرر نص البند، نافذة المكتبة، ورقة العقد ===== */
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-clause { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 10px 12px; }
.ct-clause.is-editing { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.ct-clause.is-dragging { opacity: .45; }
.ct-clause-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-clause-head .row-actions { margin-inline-start: auto; }
.ct-grip { cursor: grab; color: var(--muted); font-weight: 800; letter-spacing: -2px; padding: 4px 6px; user-select: none; }
.ct-ord { flex: none; font-weight: 800; color: var(--primary-text); font-size: var(--fs-md); white-space: nowrap; }
.ct-title { flex: 1 1 200px; min-width: 0; font-weight: 700; }
.ct-item-title { flex: 1 1 200px; min-width: 0; }
.ct-excerpt { margin-top: 6px; color: var(--muted); font-size: var(--fs-md); line-height: 1.7; }
.ct-rte { margin-top: 8px; }
.ct-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ct-tool { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-2); cursor: pointer; font: inherit; }
.ct-tool:hover { background: var(--surface-2); }
.ct-tool:focus-visible, .ct-body:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ct-field-pick { width: auto; min-width: 150px; height: 32px; padding-block: 0; margin-inline-start: auto; font-size: var(--fs-md); }
.ct-body { line-height: 1.9; color: var(--text-2); overflow-wrap: anywhere; }
.ct-body p { margin: 0 0 6px; }
.ct-body ol, .ct-body ul { margin: 0 0 6px; padding-inline-start: 24px; }
.ct-body[contenteditable="true"], .ct-body-edit { min-height: 110px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--card); color: inherit; }
.ct-body:empty::before { content: "لا يوجد نص — اضغط «تعديل» لكتابة البند."; color: var(--muted); }
.ct-body[contenteditable="true"]:empty::before { content: "اكتب نص البند هنا…"; }
.ct-chip { display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 6px; background: var(--primary-50); color: var(--primary-text); font-weight: 700; font-size: .92em; white-space: nowrap; user-select: all; }
.ct-missing { background: var(--warning-soft); color: var(--warning-tx); border: 1px dashed var(--warning-border); border-radius: 6px; padding: 0 5px; }
.ct-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.ct-add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-add-row select { flex: 1 1 260px; }
.ct-fees { display: grid; gap: 14px; }
.ct-fees-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; }
.ct-fees-title small { font-weight: 600; color: var(--muted); font-size: var(--fs-sm); }
.ct-fees [data-fee-terms] .fa-n { display: none; }
.fa-dialog.ct-dialog { width: min(720px, 100%); }
.ct-lib { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ct-lib label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.ct-lib label:hover { background: var(--surface-2); }
.ct-lib input { margin-top: 5px; flex: none; }
.ct-lib-tx { display: grid; gap: 2px; min-width: 0; }
.ct-lib-tx span { color: var(--muted); font-size: var(--fs-md); line-height: 1.6; }
.ct-errors ul { margin: 6px 0 0; padding-inline-start: 20px; font-weight: 600; }
.ct-paper-card { padding: 28px 32px; }
.ct-paper-card.is-draft { background-image: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--warning-border) 28%, transparent) 22px 23px); }
.ct-paper-head { text-align: center; margin-bottom: 18px; }
.ct-paper-head h2 { margin: 0 0 4px; font-size: 1.3rem; }
.ct-paper-meta { color: var(--muted); font-size: var(--fs-md); }
.ct-preamble, .ct-party { margin: 0 0 8px; line-height: 1.9; }
.ct-paper-clause { margin-top: 16px; }
.ct-paper-clause h3 { margin: 0 0 4px; font-size: 1rem; }
.ct-noclauses { color: var(--muted); margin: 16px 0; }
.ct-schedule { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: var(--fs-md); }
.ct-schedule th, .ct-schedule td { border: 1px solid var(--border); padding: 5px 9px; text-align: start; }
.ct-schedule th { background: var(--surface-2); }
.ct-sign { display: flex; justify-content: space-between; gap: 32px; margin-top: 36px; }
.ct-sign > div { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.ct-sign-line { margin-top: 34px; border-top: 1px solid var(--text-2); padding-top: 4px; color: var(--muted); font-size: var(--fs-sm); }
.ct-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-weight: 600; }
.ct-strip .row-actions { margin-inline-start: auto; }
@media (max-width: 760px) { .ct-paper-card { padding: 18px 16px; } .ct-sign { flex-direction: column; } .ct-field-pick { margin-inline-start: 0; } }
/* ===== نافذة الجلسة في صفحة القضية ===== */
.fa-dialog.hr-dialog { width: min(760px, 100%); }
.hr-case { font-weight: 600; font-size: .85em; opacity: .85; }
.hr-last { margin-bottom: 14px; }
/* ===== التقارير (rp-*) — مكوّنات مشتركة لكل صفحات التقارير =====
   شريط التصفية: .filter-bar.rp-filter (أزرار الفترة .rp-periods سطر كامل أولًا، ثم العوامل، و«المزيد» من cases-list.css)
   ← سطر «التصفية الحالية» .rp-chips ← المؤشرات .rp-kpis (.stat.rp-kpi) ← النتائج .rp-results (رأس .rp-head + جدول + .rp-total). */
.rp-filter { flex-wrap: wrap; margin-bottom: 12px; }
.rp-periods { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 18px; font-size: var(--fs-sm); }
.rp-chips-k { color: var(--muted); font-weight: 700; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; background: var(--primary-50); color: var(--primary-text); font-weight: 700; text-decoration: none; }
a.rp-chip:hover { background: var(--primary-100); }
.rp-chip .ic { flex: none; }
.rp-chip.is-fixed { background: var(--card); color: var(--text-2); border-color: var(--border); }
.rp-chips-clear { margin-inline-start: auto; color: var(--muted); font-weight: 700; text-decoration: none; }
.rp-chips-clear:hover { color: var(--danger-tx); text-decoration: underline; }
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.stat.rp-kpi { flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 18px; color: var(--text); }
.stat.rp-kpi.is-on { border-color: var(--primary); background: var(--primary-50); }
.rp-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.rp-delta.up { color: var(--success-tx); }
.rp-delta.down { color: var(--danger-tx); }
.rp-delta .ic { flex: none; }
.rp-results { scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); transition: opacity .15s; }
.rp-results.is-loading { opacity: .5; pointer-events: none; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.rp-head h2 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.4; }
.rp-views { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
.rp-sort:hover, .rp-sort.active { color: var(--primary-text); }
.rp-sort .ic { flex: none; transition: transform .15s; }
.rp-sort.is-asc .ic { transform: rotate(180deg); }
.rp-table td { vertical-align: middle; }
.rp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 320px; overflow-wrap: anywhere; }
.rp-total { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); font-weight: 800; }
.rp-results > .empty { padding-block: 44px; }
.rp-switch { margin-bottom: 14px; }
[data-rp-results] { transition: opacity .15s; }
[data-rp-results].is-loading { opacity: .5; pointer-events: none; }
/* التحليلات: ستة مؤشرات + بطاقات الرسوم (عمودان) */
.rp-kpis.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rp-kpis.is-6 .stat.rp-kpi { padding: 14px 16px; }
.rp-kpis.is-6 .stat-v { font-size: 1.35rem; }
.rp-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.rp-chart { display: flex; flex-direction: column; min-width: 0; }
.rp-chart.is-wide { grid-column: 1 / -1; }
.rp-chart h3 { margin-bottom: 2px; line-height: 1.5; text-wrap: balance; }
.rp-chart-sub { margin: 0 0 14px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.rp-chart-body.is-donut { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; }
.rp-canvas { position: relative; height: 240px; min-width: 0; }
.rp-canvas.is-donut { height: 170px; }
.rp-canvas canvas { display: block; }
.rp-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.rp-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rp-legend.is-list { margin: 0; display: grid; gap: 7px; }
.rp-legend-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-legend-v { font-weight: 800; color: var(--text); white-space: nowrap; }
.rp-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--viz-other); }
.rp-dot[data-viz="primary"] { background: var(--viz-primary); } .rp-dot[data-viz="compare"] { background: var(--viz-compare); }
.rp-dot[data-viz="success"] { background: var(--viz-success); } .rp-dot[data-viz="c2"] { background: var(--viz-c2); }
.rp-dot[data-viz="c3"] { background: var(--viz-c3); } .rp-dot[data-viz="c4"] { background: var(--viz-c4); }
.rp-dot[data-viz="c5"] { background: var(--viz-c5); } .rp-dot[data-viz="g1"] { background: var(--viz-g1); }
.rp-dot[data-viz="g2"] { background: var(--viz-g2); } .rp-dot[data-viz="blue"] { background: var(--viz-blue); }
.rp-dot[data-viz="green"] { background: var(--viz-green); } .rp-dot[data-viz="amber"] { background: var(--viz-amber); }
.rp-dot[data-viz="red"] { background: var(--viz-red); } .rp-dot[data-viz="purple"] { background: var(--viz-purple); }
.rp-dot[data-viz="gray"] { background: var(--viz-gray); }
.rp-chart-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.rp-chart .empty-sm { margin-top: 2px; }
/* نظرة عامة (Reports/Index): قائمة «يحتاج إلى إجراء» ثم بطاقة لكل قسم (ثلاثة أرقام + اتجاه مصغّر) */
.rp-attn { margin-bottom: 18px; }
.rp-attn h3 .ic { color: var(--danger); }
.rp-attn-list { list-style: none; margin: 0; padding: 0; }
.rp-attn-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--border); font-weight: 600; }
.rp-attn-list li:first-child { border-top: none; padding-top: 0; }
.rp-attn-list li:last-child { padding-bottom: 0; }
.rp-attn-list b { display: inline-block; min-width: 2ch; margin-inline-end: 6px; font-size: 1.05rem; font-weight: 800; color: var(--danger-tx); }
.rp-attn-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--success-tx); font-weight: 700; }
.rp-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.rp-ov { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-ov-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rp-ov-head h3 { margin: 0; }
.rp-ov-links { display: flex; gap: 12px; font-size: var(--fs-sm); font-weight: 700; }
.rp-ov-links a { color: var(--primary-text); text-decoration: none; }
.rp-ov-links a:hover { text-decoration: underline; }
.rp-ov-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp-ov-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2); color: var(--text); text-decoration: none; border: 1px solid transparent; transition: border-color .15s, background .15s; }
a.rp-ov-stat:hover { border-color: var(--primary-200); background: var(--primary-50); }
.rp-ov-stat .k { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.rp-ov-stat .v { font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.rp-ov-stat .n { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ov-stat.is-hot .v { color: var(--danger); }
.rp-mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; border-bottom: 1px solid var(--border); }
.rp-mini-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.rp-mini-col i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--viz-primary); }
.rp-mini-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.rp-ov-foot { margin: 0; padding-top: 12px; border-top: 1px dashed var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
@media (max-width: 1280px) { .rp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .rp-overview { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .rp-ov-stat { transition: none; } }
.rp-print-head { display: none; }
@media (max-width: 1280px) { .rp-kpis.is-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 992px) { .rp-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .rp-kpis.is-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .rp-chart-body.is-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; } .rp-legend.is-list { width: 100%; } }
/* طباعة صفحة التحليلات (body.rp-page — window.print): إطار النظام والتصفية يختفيان، ورأس الطباعة يظهر، والبطاقة لا تنقسم بين صفحتين */
@page rp-sheet { size: A4 portrait; margin: 12mm; }
@media print {
    body.rp-page { page: rp-sheet; background: var(--card); }
    body.rp-page .topbar, body.rp-page .sidebar, body.rp-page .sb-tab, body.rp-page .backdrop,
    body.rp-page .page-head, body.rp-page .rp-switch, body.rp-page .rp-filter, body.rp-page .rp-chips { display: none !important; }
    body.rp-page .main { margin: 0 !important; }
    body.rp-page .content { padding: 0; }
    body.rp-page .content-inner { max-width: none; }
    body.rp-page .rp-print-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); font-size: var(--fs-sm); }
    body.rp-page .rp-print-office { font-weight: 700; color: var(--text-2); }
    body.rp-page .rp-print-title { font-size: 1.3rem; font-weight: 800; }
    body.rp-page .rp-print-meta { color: var(--muted); text-align: left; white-space: nowrap; }
    body.rp-page .rp-kpis.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    body.rp-page .stat.rp-kpi { padding: 8px 10px; box-shadow: none; }
    body.rp-page .rp-kpis.is-6 .stat-v { font-size: 1.1rem; }
    body.rp-page .rp-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.rp-page .rp-chart { break-inside: avoid; box-shadow: none; padding: 14px; overflow: hidden; }
    /* الرسم مرسوم بمقاس الشاشة: في الطباعة يُصغَّر كصورة على عرض بطاقته (المقاس المضبوط من Chart.js يُتجاوز) فلا يخرج منها */
    body.rp-page .rp-canvas { height: auto !important; }
    body.rp-page .rp-canvas canvas { width: 100% !important; height: auto !important; }
    body.rp-page .rp-chart-body.is-donut { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
    body.rp-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 1100px) { .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rp-kpis { grid-template-columns: minmax(0, 1fr); } .rp-chips-clear { margin-inline-start: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-results, .rp-sort .ic { transition: none; } }

/* ===== إعدادات الطباعة ===== */
.ps-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.ps-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.ps-fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.ps-main form { margin: 0; }
.ps-card.card { padding: 0; overflow: hidden; border: 1px solid var(--border); }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--border); margin: 0; }
label.ps-row { cursor: pointer; }
.ps-row-title { font-weight: 700; }
.ps-sec { border-bottom: 1px solid var(--border); }
.ps-card > .ps-sec:last-child { border-bottom: none; }
.ps-sec > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; cursor: pointer; list-style: none; user-select: none; }
.ps-sec > summary::-webkit-details-marker { display: none; }
.ps-sec > summary:hover { background: var(--surface-2); }
.ps-sec > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ps-sec-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.ps-sec-title::before { content: ""; width: 7px; height: 7px; border-inline-start: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; flex: none; }
.ps-sec[open] > summary .ps-sec-title::before { transform: rotate(-45deg); }
.ps-sec[open] > summary .ps-sec-title { color: var(--primary-text); }
.ps-sec-sum { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; white-space: nowrap; }
.ps-sec-body { padding: 4px 18px 16px; }
.ps-sec-body .field:last-child { margin-bottom: 0; }
.ps-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; margin-bottom: 10px; }
.ps-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; cursor: pointer; }
.ps-check input[type="checkbox"] { margin-top: 5px; flex: none; }
.ps-check small { font-weight: 500; color: var(--muted); }
.ps-wm img { max-height: 90px; max-width: 220px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--surface-2); }
.ps-wm { margin-bottom: 12px; }
.ps-wm-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.ps-preview-card { position: sticky; top: 84px; padding: 14px; background: var(--surface-2); }
.ps-preview-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 10px; }
.ps-preview-note a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
/* الورقة: الخط نسبة من عرضها (cqw) فتكبر وتصغر كلها معًا — وA4 بالطول يُحدّ عرضها بارتفاع الشاشة */
.ps-pv-box { container-type: inline-size; margin-inline: auto; }
.ps-pv-box:has(.ps-pv.is-a4) { max-width: calc((100vh - 190px) * 210 / 297); min-width: 260px; }
.ps-pv { position: relative; overflow: hidden; background: #fff; color: #0f172a; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); padding: 1.6em 1.8em; font-size: 11px; font-size: clamp(9px, 2.5cqw, 17px); line-height: 1.7; aspect-ratio: 210 / 148; display: flex; flex-direction: column; }
.ps-pv.is-a4 { aspect-ratio: 210 / 297; }
.ps-pv-wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ps-pv-wm img { width: 44%; max-height: 70%; object-fit: contain; opacity: .07; }
.ps-pv-head { display: flex; align-items: center; justify-content: space-between; gap: .8em; border-bottom: 2px solid var(--pc); padding-bottom: .6em; margin-bottom: .8em; }
.ps-pv-head.is-end { flex-direction: row-reverse; }
.ps-pv-head.is-center { flex-direction: column; text-align: center; gap: .4em; }
.ps-pv-head.is-bare { border-bottom: none; padding-bottom: 0; }
.ps-pv-office { display: flex; align-items: center; gap: .6em; min-width: 0; }
.ps-pv-head.is-end .ps-pv-office { flex-direction: row-reverse; text-align: left; }
.ps-pv-head.is-center .ps-pv-office { flex-direction: column; gap: .2em; }
.ps-pv-office img { max-height: 2.7em; max-width: 7.5em; object-fit: contain; display: block; }
.ps-pv-name { font-weight: 800; font-size: 1.1em; }
.ps-pv-lines { font-size: .82em; color: #475569; line-height: 1.5; }
.ps-pv-title { display: flex; flex-direction: column; text-align: left; }
.ps-pv-head.is-end .ps-pv-title { text-align: right; }
.ps-pv-head.is-center .ps-pv-title { text-align: center; }
.ps-pv-title strong { color: var(--pc); font-size: 1.1em; }
.ps-pv-items { list-style: none; margin: 0; padding: 0; flex: 1; }
.ps-pv-items li { border-bottom: 1px dotted #cbd5e1; padding: .3em 0; }
.ps-pv-signs { display: flex; gap: 1em; align-items: flex-end; margin-top: 1.2em; }
.ps-pv-sign { flex: 1; border-top: 1px solid #94a3b8; text-align: center; color: #475569; font-size: .82em; }
.ps-pv-stamp { width: 4.4em; height: 2.8em; border: 1px dashed #94a3b8; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: .82em; }
.ps-pv-text { margin-top: .8em; text-align: center; font-size: .82em; color: #334155; }
.ps-pv-meta { margin-top: .4em; text-align: center; font-size: .75em; color: #94a3b8; display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }
.ps-pv-page { text-align: center; font-size: .75em; color: #64748b; margin-top: .2em; }
.ps-pv.is-mono img { filter: grayscale(1); }
/* السندات: شكل الإيصال — إطار، العنوان والرقم في سطر علوي، ثم المكتب يمينًا والشعار يسارًا */
.ps-pv.is-voucher { border: 2px solid #64748b; border-radius: 0; }
.ps-pv.is-voucher .ps-pv-head { flex-direction: column; align-items: stretch; gap: .4em; border-bottom-color: #94a3b8; }
.ps-pv.is-voucher .ps-pv-title { order: -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: right; }
.ps-pv.is-voucher .ps-pv-title strong { font-size: 1.5em; }
.ps-pv.is-voucher .ps-pv-head .ps-pv-office { flex-direction: row; justify-content: space-between; text-align: left; }
.ps-pv.is-voucher .ps-pv-head.is-end .ps-pv-office { flex-direction: row-reverse; text-align: right; }
.ps-pv.is-voucher .ps-pv-head.is-center .ps-pv-office { flex-direction: column; justify-content: center; text-align: center; }
.ps-pv.is-voucher .ps-pv-items li { border-bottom: none; }
@media (max-width: 1000px) { .ps-layout { grid-template-columns: minmax(0, 1fr); } .ps-preview-card { position: static; order: -1; } }
/* ===== نافذة «تسجيل القرار» الصغيرة للجلسة ===== */
.fa-dialog.hdm-dialog { width: min(520px, 100%); }
.hdm-info { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.hdm-create { align-self: end; }
/* ===== ملف الخصم (Opponents/Details): عمود واحد يطول ويقصر مع المحتوى ===== */
.dl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-notes { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.op-notes .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.op-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.op-none { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-md); }
@media (max-width: 1000px) { .dl-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dl-4 { grid-template-columns: minmax(0, 1fr); } }