/* ==========================================================================
   Raseem (منصة رسيم) — design system
   Structure follows the Najiz platform pattern (top navbar, split login,
   card-grid home); identity is muted light-green on white.
   Hard rules: no black/near-black, no dark fills, no gradients, no shadows,
   no bright/saturated colours. RTL-first. TWO typefaces, split by audience: Almarai in the app (login + every
   signed-in page), Thmanyah (خط ثمانية) on the public pages — see the font block and «.public-shell» below.
   Loaded after Bootstrap so these rules intentionally override its defaults.
   ========================================================================== */

/* ---------- Thmanyah typeface (خط ثمانية) — self-hosted, no CDN -------------
   Two families in use: **Serif Display** (خط ثمانية للعناوين) for titles/headings and **Serif Text**
   (خط ثمانية للنصوص) for body & everything else. The Sans "digital" family is intentionally NOT used.
   Five real weights each (Light/Regular/Medium/Bold/Black); the app's 600 → Medium and 800/900 → Black so
   every weight it uses maps to a real face (no faux-bold synthesis). */
@font-face { font-family: 'Thmanyah Serif Display'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('/fonts/thmanyahserifdisplay-Light.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Display'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/thmanyahserifdisplay-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Display'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/thmanyahserifdisplay-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Display'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Display'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('/fonts/thmanyahserifdisplay-Black.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Display'; font-style: normal; font-weight: 900; font-display: swap;
    src: url('/fonts/thmanyahserifdisplay-Black.woff2') format('woff2'); }

@font-face { font-family: 'Thmanyah Serif Text'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('/fonts/thmanyahseriftext-Light.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Text'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/thmanyahseriftext-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Text'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/fonts/thmanyahseriftext-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Text'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/thmanyahseriftext-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Text'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/thmanyahseriftext-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Text'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('/fonts/thmanyahseriftext-Black.woff2') format('woff2'); }
@font-face { font-family: 'Thmanyah Serif Text'; font-style: normal; font-weight: 900; font-display: swap;
    src: url('/fonts/thmanyahseriftext-Black.woff2') format('woff2'); }

/* ---------- Almarai — the APP typeface (client 2026-08-14) -------------------
   Everything behind the door reads Almarai: the login screen and every signed-in page. TWO real weights only —
   400 for body, 700 for headings — so nothing is faux-bolded and nothing else has to be downloaded.
   Self-hosted like Thmanyah rather than pulled from fonts.gstatic.com: the app must not hand a third party a hit
   on every page load, and a CDN font is one more thing that can be slow or blocked. The four files are Google's
   own woff2 subsets (v19), split arabic/latin with the same unicode-range they ship — Arabic pages never
   download the latin file and vice-versa.
   ⚠ The PUBLIC pages (الصفحة الرئيسية · الاشتراك, everything under PublicLayout) deliberately KEEP Thmanyah —
   see «.public-shell» further down. Changing the base here must never reach them. */
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/almarai-Regular-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
        U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEF1; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/fonts/almarai-Regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/almarai-Bold-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
        U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
        U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEF1; }
@font-face { font-family: 'Almarai'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/fonts/almarai-Bold-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* ── Two-tone brand (client 2026-08-03) ────────────────────────────────────────────────────────────────
       INK stays navy, FILL is a light plate. Every navy *background* became a light fill; every navy *text /
       icon / border* stayed navy. So the two families are deliberately separate:
         --accent*  → ink: link + icon colour, borders, focus ring. NEVER a fill any more.
         --fill*    → the plate a navy background became — sand #cdbd9f until 2026-08-14, a light grey since.
                      It is LIGHT, so anything sitting on it takes --on-fill (navy), not white: a filled button
                      is «light plate, navy ink». */

    /* Accent — navy-blue family, now ink only (low-saturation, on-palette) */
    --accent: #223f73;         /* main accent — text, icons, borders */
    --accent-strong: #16294d;  /* hover / pressed ink */
    --accent-soft: #eaeff7;    /* active / hover tint surfaces — a pale NAVY wash, so a hover is told apart
                                  from a --fill «selected» plate by HUE, not by being a shade darker */
    --accent-ring: rgba(34, 63, 115, 0.25); /* focus ring — stays navy: it must read against a warm page */

    /* Fill — a cool light grey (client 2026-08-14; was sand #cdbd9f, then briefly a warm cream). Every «filled»
       surface in the app: buttons, active nav pill/glider, chips, badges. It is the one COOL neutral in an
       otherwise warm palette, which is what keeps it distinct from --accent-soft (the warm HOVER tint) — so
       «selected» never reads the same as «hovered» even though the two are equally light. */
    --fill: #f3f4f5;           /* buttons, active nav pill/glider, badges, hero wash */
    --fill-strong: #e4e7ea;    /* hover / pressed */
    --on-fill: #1a3157;        /* navy ink ON a light fill — white would be unreadable */
    /* The fill is close to the page, so a filled surface can't hold its own shape by colour alone: it gets a
       navy hairline (see the block at the end of this file). Applied as an INSET shadow, never a border, so
       adding it to an already-laid-out element costs no reflow. */
    --fill-line: var(--accent);
    /* MARK — a bare shape carrying no text: a dot, a progress fill, a rail, a clock hand, a switch knob. The
       fill would disappear on the light tracks these sit on, so they stay NAVY. The rule of thumb here:
       the fill is a surface you write navy on; navy is the ink AND every mark. */
    --mark: #223f73;

    /* Text — muted charcoal / deep navy, never pure black */
    --ink: #383e49;           /* body */
    --ink-heading: #1a3157;   /* headings, section titles */
    --muted: #6f7788;         /* secondary text */

    /* Surfaces & lines — COOL neutrals (client 2026-08-14). They were warm/sand (#faf8f3 · #f3eee4 · #e6dfd1)
       from 2026-08-03 until the client asked for the sand out of the navbar and the page itself. The ramp is
       ordered so a filled plate never disappears into what it sits on:
           surface #fff  >  bg #f7f8f9  >  FILL #f3f4f5  >  surface-soft #ebedf0  >  line #e2e5e9 */
    --bg: #f7f8f9;           /* page background (faint cool white) */
    --surface: #ffffff;      /* cards, tables, navbar */
    --surface-soft: #ebedf0; /* subtle fills (table head, inactive rows, chips, the nav track) */
    --line: #e2e5e9;         /* hairline borders */

    /* Semantic — kept low-saturation, feedback only */
    --ok: #4f7a52;
    --ok-soft: #eef3ec;
    --danger: #a4553d;
    --danger-soft: #f5ece7;

    /* Depth — NAVY-tinted (never neutral black) so shadows stay on-palette; they were brown rgba(90,74,48)
       while the palette was sand. --shadow-inset = a surface carved INTO its parent (recessed track);
       --shadow-raised = a surface sitting ON TOP of one. */
    --shadow-inset: inset 0 2px 4px rgba(26, 49, 87, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.6);
    --shadow-raised: 0 1px 2px rgba(26, 49, 87, 0.16), 0 3px 8px rgba(26, 49, 87, 0.12);
    /* The one-off shadows scattered through this file read this instead of repeating the rgb triplet. */
    --shadow-rgb: 26, 49, 87;

    --navbar-h: 64px;
    --radius: 10px;

    /* ── Typography (client 2026-08-14) ────────────────────────────────────────────────────────────────────
       TWO type systems live side by side, and the split is by AUDIENCE, not by page:
         --font-app-*     Almarai — the login screen and everything behind it. Body 400, headings 700; those are
                          the only two weights that exist, so anything asking for 600/800 lands on one of them.
         --font-public-*  Thmanyah (خط ثمانية) — الصفحة الرئيسية and صفحة الاشتراك, i.e. what a visitor sees
                          before signing in. The client wants that face left exactly as it is.
       The app pair is the DEFAULT (it is most of the product); the public pair is re-asserted inside
       «.public-shell», the single wrapper PublicLayout puts around itself. */
    --font-app-body: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
    --font-app-head: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
    --font-public-body: 'Thmanyah Serif Text', 'Segoe UI', Tahoma, 'Times New Roman', serif;
    --font-public-head: 'Thmanyah Serif Display', Georgia, 'Times New Roman', serif;
}

html, body {
    font-family: var(--font-app-body);
    font-weight: 400;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75; /* generous for Arabic legibility */
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-heading);
    text-wrap: balance;
}

/* Headings take the head face; body & everything else inherits the body face from <body>. Covers real heading
   tags plus the title classes (some render as <div>/<p>, not <h*>). */
h1, h2, h3, h4, h5, h6,
.brand-mark, .page-title, .card-title, .section-title, .sv-detail-title, .notice-title {
    font-family: var(--font-app-head);
}

/* Almarai ships 400 and 700 only, so headings are pinned to 700 rather than left to the user agent's «bold».
   Bare tags only: every title CLASS already carries its own weight, and one of them (.section-title) belongs to
   the public pages — a blanket rule here would reach across the split. */
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* ── The public pages keep Thmanyah ──────────────────────────────────────────────────────────────────────
   PublicLayout wraps itself in .public-shell for exactly this: one hook, so nothing about the app's typeface
   can leak into الصفحة الرئيسية or صفحة الاشتراك, and anything added to those pages later is covered without
   being listed here. Weights are NOT restated — the landing's own rules (.hero h1 800, .section-title 800 …)
   are more specific than the bare-tag 700 above and still win. */
.public-shell { font-family: var(--font-public-body); }
.public-shell :is(h1, h2, h3, h4, h5, h6,
    .brand-mark, .page-title, .card-title, .section-title, .sv-detail-title, .notice-title) {
    font-family: var(--font-public-head);
}

h1:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Buttons ------------------------------------------------------ */
/* Every button reads the same: white bg + green text + 1.5px green border at
   rest; on hover the whole button fills green and the text turns white, with a
   smooth fade + subtle lift. Driven through Bootstrap's own --bs-btn-* tokens
   so every state (hover/active/focus/disabled) stays on-palette — no default
   blue leaking through on any state. */
.btn {
    border-width: 1.5px;
    border-style: solid;
    font-weight: 600;
    border-radius: 8px;
    /* The fill lives in the background-image (variant colour via tokens): a white→fill split held off-canvas at
       rest, wiped across on hover. It reads --bs-btn-hover-bg (not the border colour) so the wipe always matches
       the hovered state — which is what lets the default button be «navy border, SAND fill» (client 2026-08-03)
       while the semantic variants stay a solid green / terracotta. */
    background-image: linear-gradient(
        to right,
        var(--bs-btn-bg, var(--surface)) 48%,
        var(--bs-btn-hover-bg, var(--fill)) 52%);
    background-size: 220% 100%;
    background-position: left center;   /* white half showing */
    transition: color 0.25s ease,
                background-position 0.42s cubic-bezier(0.45, 0.05, 0.25, 1),
                transform 0.14s ease;
    --bs-btn-focus-shadow-rgb: 79, 138, 82;
}

/* Wipe the green in from the inline-start (right, in RTL) + a subtle lift */
.btn:hover { background-position: right center; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn svg { width: 15px; height: 15px; vertical-align: -2px; }

/* The app default — navy ink + navy hairline, sand fill on hover/active (client 2026-08-03) */
.btn-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--accent);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--on-fill);
    --bs-btn-hover-bg: var(--fill);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--on-fill);
    --bs-btn-active-bg: var(--fill-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-disabled-color: var(--muted);
    --bs-btn-disabled-bg: var(--surface-soft);
    --bs-btn-disabled-border-color: var(--line);
}

/* Semantic — activate (muted green), same inverse behaviour */
.btn-outline-success {
    --bs-btn-color: var(--ok);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--ok);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ok);
    --bs-btn-hover-border-color: var(--ok);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ok);
    --bs-btn-active-border-color: var(--ok);
    --bs-btn-disabled-color: var(--muted);
    --bs-btn-disabled-bg: var(--surface-soft);
    --bs-btn-disabled-border-color: var(--line);
}

/* Semantic — deactivate (muted terracotta) */
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-disabled-color: var(--muted);
    --bs-btn-disabled-bg: var(--surface-soft);
    --bs-btn-disabled-border-color: var(--line);
}

.btn:disabled, .btn.disabled { cursor: not-allowed; transform: none; }
.btn:disabled:hover, .btn.disabled:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .btn { transition: color 0.15s ease; }
    .btn:hover { background-position: right center; transform: none; }
    .btn:active { transform: none; }
}

/* ---------- Top navbar (Najiz pattern) ---------------------------------- */
.app-navbar {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 30;
    height: var(--navbar-h);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.brand:hover { text-decoration: none; }
.brand-mark { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.brand-tag { font-size: 0.75rem; color: var(--muted); }
/* Brand logo images (replace the text wordmark). Mark = the nav/header logo; full = the footer lockup. */
.brand-logo { height: 40px; width: auto; display: block; }
.brand-logo-full { width: 210px; max-width: 100%; height: auto; display: block; }

/* Input with a grey read-only prefix/suffix (e.g. the user email's @firmdomain.com). */
.affix-group {
    display: flex;
    align-items: stretch;
    direction: ltr;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.affix-group .form-control { border: none; border-radius: 0; flex: 1; min-width: 0; text-align: left; box-shadow: none; }
.affix-prefix, .affix-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

/* Horizontal nav pills — active tab is a solid green pill, others plain text */
.nav-pills { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; position: relative; }

.nav-pill {
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    position: relative;   /* sit above the sliding glider */
    z-index: 1;
    transition: background-color 0.15s, color 0.15s;
}

.nav-pill:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }
/* The active pill's green comes from the sliding glider behind it (this app always runs JS — it's Blazor), so
   the fill is transparent and only the text colour is set here. */
.nav-pill.active, .nav-pill.active:hover { background: transparent; color: var(--on-fill); }
.nav-pill:not(.active):hover { background: var(--accent-soft); color: var(--accent-strong); }

/* The five core work sections (الدعاوى · التنفيذ · الخدمات القانونية · الإستشارات · الجلسات) live in ONE
   segmented track (NavMenu.razor → .nav-track): a single darker-tinted bar CARVED into the navbar with an inner
   shadow, so the group reads as one control and the tabs need no chrome of their own.
   Keep the track UNPOSITIONED — initNavGlider places the sliding navy fill from each pill's offsetLeft/offsetTop,
   which must stay measured against .nav-pills (its offsetParent). Giving .nav-track `position: relative` would
   re-base those offsets and the glider would land in the wrong place. */
.nav-track {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--surface-soft);
    box-shadow: var(--shadow-inset);
}

/* Inactive tabs: text only — no fill, no shadow. Hover lifts one out of the recess with a light surface fill. */
.nav-pill-core {
    background: transparent;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.nav-pill-core:not(.active):hover {
    background: var(--surface);
    color: var(--accent-strong);
}
/* The active tab's navy fill comes from the glider BEHIND it (hence the transparent background inherited from
   .nav-pill.active); its own shadow is what makes it read as sitting ON the recessed track. */
.nav-pill-core.active, .nav-pill-core.active:hover { box-shadow: var(--shadow-raised); }

/* The sliding highlight — a rounded pill behind the links that animates to the active one (positioned by
   initNavGlider). Rendered in NavMenu.razor so it survives Blazor enhanced-nav DOM merges; hidden until JS
   places it. */
.nav-glider {
    position: absolute;
    top: 0;
    left: 0;   /* physical — translate() uses offsetLeft, which is measured from the left in RTL too */
    z-index: 0;
    border-radius: 999px;
    background: var(--fill);
    opacity: 0;
    pointer-events: none;
    will-change: transform, width;
    transition: transform 0.32s cubic-bezier(0.34, 1.1, 0.5, 1), width 0.32s cubic-bezier(0.34, 1.1, 0.5, 1),
                height 0.32s ease, opacity 0.15s ease;
}
.nav-pill.disabled { color: #a9aeb6; cursor: default; }
.nav-pill.disabled:hover { background: transparent; color: #a9aeb6; }

.nav-tools {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-inline-start: auto; /* push tools to the far (left) end in RTL */
}

/* Circular/square icon action — hairline border, green icon, inverse on hover */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent);
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.icon-btn:hover {
    background: var(--fill);
    color: var(--on-fill);
    border-color: var(--accent);
}

.icon-btn svg { width: 18px; height: 18px; }

/* Notification count — restrained red, small functional indicator only */
.bell-badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* الطلبات nav-pill: a pending-count badge riding the top corner of the pill. */
.nav-pill-req { position: relative; overflow: visible; }
.nav-req-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    z-index: 2;
}

/* details/summary dropdowns — interactive without a Blazor circuit */
.tool { position: relative; }
.tool > summary { list-style: none; }
.tool > summary::-webkit-details-marker { display: none; }

.tool-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem;
    z-index: 40;
}

.tool-menu-empty { color: var(--muted); margin: 0; text-align: center; font-size: 0.9rem; }

/* «+ إنشاء جديد» picker on the dashboard (routes to each module's create page) */
.dash-create > summary { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.create-menu { min-width: 200px; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.create-menu-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.7rem; border-radius: 8px;
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem;
    transition: background 0.12s, color 0.12s;
}
.create-menu-link:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }
.create-menu-link svg { width: 18px; height: 18px; }

/* الإعدادات dropdown — a categorised menu of admin/config screens */
.nav-settings { position: relative; }
.nav-settings-trigger { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none; }
.nav-settings-trigger > span:not([class]) { line-height: 1; }
.nav-settings-ic { display: inline-flex; }
.nav-settings-ic svg { width: 17px; height: 17px; }
.nav-settings-caret { display: inline-flex; transition: transform 0.15s; }
.nav-settings-caret svg { width: 14px; height: 14px; }
.nav-settings[open] .nav-settings-caret { transform: rotate(180deg); }
.nav-settings[open] > .nav-settings-trigger { background: var(--accent-soft); color: var(--accent-strong); }

.settings-menu { inset-inline-end: 0; min-width: 250px; display: flex; flex-direction: column;
    box-shadow: 0 14px 34px rgba(20, 40, 24, 0.14); }
.settings-group { padding: 0.15rem 0; }
.settings-group + .settings-group { margin-top: 0.45rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }
.settings-group-title { margin: 0 0 0.3rem; padding: 0 0.35rem; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.01em; color: var(--muted); }
.settings-links { display: flex; flex-direction: column; gap: 0.1rem; }
.settings-link { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.55rem; border-radius: 8px;
    color: var(--ink); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
    /* الخدمات items are <button>s — strip the UA button chrome so they read like the anchor links (white/app theme). */
    background: transparent; border: 0; width: 100%; text-align: start; font-family: inherit; cursor: pointer; }
.settings-link:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }
.settings-link.active { background: var(--fill); color: var(--on-fill); }
.settings-link-ic { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.settings-link.active .settings-link-ic { color: var(--on-fill); }
.settings-link-ic svg { width: 16px; height: 16px; }

/* User chip — solid green pill */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 0.4rem 0 0.85rem;
    border-radius: 999px;
    background: var(--fill);
    color: var(--on-fill);
    cursor: pointer;
    list-style: none;
}

.user-chip::-webkit-details-marker { display: none; }
.chip-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(26, 49, 87, 0.14);
    color: var(--on-fill);
    font-weight: 700;
    font-size: 0.85rem;
}

.chip-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
/* «فهد القحطاني | مسؤول» (client 2026-08-14) — the role reads as a quiet qualifier, never competing with the
   name. The separator carries the same gap on both sides as the chip's own, so it isn't glued to either word. */
.chip-sep { color: var(--line); font-weight: 400; margin: 0 -0.15rem; }
.chip-role { font-weight: 500; font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.chip-caret { display: inline-flex; }
.chip-caret svg { width: 14px; height: 14px; }

.chip-menu-head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--line);
}

.chip-menu-name { font-weight: 700; color: var(--ink); }
.chip-menu-role { font-size: 0.8rem; color: var(--muted); }

.logout-quick { margin: 0; }

/* ---------- Page shell -------------------------------------------------- */
.app-content {
    /* Full-width dashboard layout: no centered max-width cap — content stretches
       to near the browser edges with only consistent side padding. */
    padding: calc(var(--navbar-h) + 1.75rem) 2rem 3rem;
}

/* PDPL / NCA-ECC compliance footer (client 2026-08-20) — a slim bar under every authenticated page's content,
   the app-shell twin of .footer-compliance on the public site footer (same wording, ComplianceNotice.Text). */
.app-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 0.9rem 2rem;
}
.app-footer p {
    margin: 0;
    max-width: 900px;
    margin-inline: auto;
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}
.app-footer-links { margin-top: 0.35rem !important; }
.app-footer-links a { color: var(--muted); text-decoration: underline; }
.app-footer-links a:hover { color: var(--accent); }

@media (max-width: 720px) {
    .app-navbar { gap: 0.75rem; padding: 0 0.85rem; }
    .brand-tag { display: none; }
    /* On a phone the chip collapses to its avatar — the role goes with the name it qualifies. */
    .chip-name, .chip-sep, .chip-role { display: none; }
    .app-content { padding: calc(var(--navbar-h) + 1.25rem) 1rem 2.5rem; }
}

/* ---------- Page scaffolding -------------------------------------------- */
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-heading);
    margin: 0 0 1rem;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-head .page-title { margin: 0; }
.page-head-actions { display: flex; align-items: center; gap: 0.5rem; }
.page-subtitle { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* Intro paragraph under a page heading (e.g. System Values explainer). */
.page-intro {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 60ch;
    margin: -0.5rem 0 1.5rem;
}

/* Two-line table cell: primary Arabic label + faint secondary (English / code). */
.cell-title { display: block; color: var(--ink); line-height: 1.3; }
.cell-sub { display: block; color: var(--muted); font-size: 0.76rem; line-height: 1.2; margin-top: 0; }
/* A cell that opens its record (رقم الملف / رقم الدعوى / عنوان الاستشارة) — the list rows no longer carry an
   actions column, so the identifier itself is the affordance (client note 2026-07-27). */
.cell-link { color: var(--accent); font-weight: 600; text-decoration: none; cursor: pointer; }
.cell-link:hover, .cell-link:focus-visible { text-decoration: underline; color: var(--accent-strong); }
/* التحديثات cell (client 2026-09-19) — the newest تحديث, tappable to read its تفاصيل in the shared [data-tip]
   card. It looks tappable on its own because the whole row is already a link to a DIFFERENT place (the file),
   so nothing else would tell the user this cell does something of its own. */
.cell-update { display: block; cursor: pointer; border-radius: 8px; padding: 0.15rem 0.3rem; margin: -0.15rem -0.3rem;
    transition: background 0.15s ease; }
.cell-update:hover, .cell-update:focus-visible { background: var(--accent-soft); outline: none; }
.cell-update .cd-la-status { margin-top: 0.2rem; }

/* اعتماد تقرير الجلسة (client 2026-09-19) — one button, two states. It reads as a STATE first and a control
   second, which is why the whole pill takes the colour: a manager scanning a list of sittings is looking for
   which reports are still unsigned, not for something to press. */
.rz-approve {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid #C0392B33; border-radius: 999px; padding: 0.3rem 0.85rem;
    background: #C0392B14; color: #A5342A; font: inherit; font-size: 0.85rem; font-weight: 600;
    min-height: 2.3rem;
    cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rz-approve:hover { background: #C0392B24; }
.rz-approve.on { border-color: #2F6B3433; background: #2F6B3414; color: #2F6B34; }
.rz-approve.on:hover { background: #2F6B3424; }
.rz-approve-ic { display: inline-flex; }
.rz-approve-ic svg { width: 1.15rem; height: 1.15rem; stroke-width: 2.4; }
.rz-approve-err { color: var(--danger); font-size: 0.78rem; margin-inline-start: 0.5rem; }

/* ---------- الدعاوى/التنفيذ/الخدمات القانونية/الاستشارات list — row-card table (client 2026-08-22: "make it
   unique, not a generic table"). .cases-table sits on top of the shared .table (every other list in the app
   keeps the plain bordered look — only these four indexes opt into the card treatment), so a plain bordered
   grid becomes soft, separated row-cards with a status-colour accent on the leading edge, hover lift, and a
   quiet uppercase header with no boxed background. ---------- */
.cases-table-wrap { background: transparent; border: none; border-radius: 0; overflow-x: auto; }
.cases-table.table { border-collapse: separate; border-spacing: 0 0.55rem; }
.cases-table thead th {
    background: transparent; border-bottom: none;
    color: var(--muted); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding-bottom: 0.5rem;
}
.cases-table tbody tr {
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
/* Whole-row click (see initCasesRowClick, raseem-forms.js) — only rows carrying a data-row-open link show the
   pointer cursor; التوكيلات's rows use the same .cases-table look but aren't whole-row-clickable. */
.cases-table tbody tr:has([data-row-open]) { cursor: pointer; }
.cases-table tbody tr:hover { box-shadow: 0 8px 22px rgba(var(--shadow-rgb), 0.12); transform: translateY(-1px); }
.cases-table tbody td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-inline-start: 1.1rem; }
.cases-table tbody td:first-child {
    border-inline-start: 1px solid var(--line);
    border-start-start-radius: 12px; border-end-start-radius: 12px;
    position: relative;
}
.cases-table tbody td:last-child { border-inline-end: 1px solid var(--line); border-start-end-radius: 12px; border-end-end-radius: 12px; }
/* Status accent — a thin colour bar on the row's leading edge, reusing the حالة palette below. Neutral (--line)
   when the row carries no known status class (e.g. الاستشارات, which has none). */
.cases-table tbody td:first-child::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0.3rem; bottom: 0.3rem; width: 4px;
    border-radius: 3px; background: var(--line);
}
.cases-table tr.st-litigation td:first-child::before   { background: #2F6B34; }
.cases-table tr.st-agreement td:first-child::before    { background: #1F7468; }
.cases-table tr.st-review td:first-child::before       { background: #52469B; }
.cases-table tr.st-adjourned td:first-child::before    { background: #916312; }
.cases-table tr.st-suspended td:first-child::before    { background: #B0531D; }
.cases-table tr.st-adjudicated td:first-child::before  { background: #245FA0; }
.cases-table tr.st-concluded td:first-child::before    { background: #48515B; }
.cases-table tr.st-unregistered td:first-child::before { background: #6B6F6A; }
.cases-table tr.st-disagreed td:first-child::before    { background: #A4553D; }
.cases-table tr.st-cancelled td:first-child::before    { background: #8A4B57; }
/* الاستشارات has its own two-state حالة (مكتملة/غير مكتملة, .cons-st-done/.cons-st-open above) — mirror those
   same hues on the row accent instead of the دعوى status palette. */
.cases-table tr.cons-row-done td:first-child::before { background: var(--accent-strong); }
.cases-table tr.cons-row-open td:first-child::before { background: #9A6608; }
.cases-table th,
.cases-table td { text-align: center; vertical-align: middle; }
/* Keep the actions cell a real table-cell (not display:flex) so it stretches to the row
   height and its icons stay vertically centered even when other cells wrap to many lines. */
.cases-table td.actions { display: table-cell; text-align: center; white-space: nowrap; }
.cases-table td.actions > * { vertical-align: middle; }
.cases-table td.actions > * + * { margin-inline-start: 0.3rem; }
/* Stacked party names (الموكل / الخصم) — one per line, hairline between. */
.stack-name { display: block; color: var(--ink); line-height: 1.5; }
.stack-name + .stack-name { margin-top: 0.15rem; padding-top: 0.15rem; border-top: 1px dashed var(--line); }
.stack-client { color: var(--accent-strong); font-weight: 600; }   /* الموكل — green */
.stack-opponent { color: var(--danger); font-weight: 600; }        /* الخصم — red */
.case-type { color: #c2711c; }                                     /* نوع الدعوى — orange */

/* حالة الدعوى badges — soft chip (bg + same-hue darker text), one colour per status. */
.st-badge {
    display: inline-block; margin-top: 0.2rem;
    padding: 0.12rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.st-litigation   { background: #E3F1E2; color: #2F6B34; }  /* قيد التداول — green */
.st-agreement    { background: #DCEFEA; color: #1F7468; }  /* قيد الإتفاق — teal */
.st-review       { background: #E7E4F7; color: #52469B; }  /* قيد الدراسة — indigo */
.st-adjourned    { background: #FAEFD5; color: #916312; }  /* مؤجلة للحكم — amber */
.st-suspended    { background: #FBE6D4; color: #B0531D; }  /* موقوفة مؤقتاً — orange */
.st-adjudicated  { background: #E0ECF9; color: #245FA0; }  /* مفصولة — blue */
.st-concluded    { background: #E9ECEF; color: #48515B; }  /* منتهية — slate */
.st-unregistered { background: #F0F0EE; color: #6B6F6A; }  /* غير مقيدة — neutral */
.st-disagreed    { background: #F6E0DB; color: #A4553D; }  /* غير متفق عليها — red */
.st-cancelled    { background: #F1E1E3; color: #8A4B57; }  /* ملغية — muted rose */
.st-default      { background: var(--surface-soft); color: var(--muted); }
/* No-opponent prompt. */
.need-opponent { color: var(--danger); font-size: 0.82rem; }
/* صفة chip beside a stacked الموكل/الخصم name (client 2026-08-22). */
.stack-cap {
    display: inline-block; margin-inline-start: 0.35rem;
    padding: 0.05rem 0.45rem; border-radius: 999px;
    background: var(--surface-soft); color: var(--muted);
    font-size: 0.7rem; font-weight: 600; vertical-align: middle;
}

/* Floating tooltip element (appended to <body>, positioned via JS so it escapes overflow clipping). */
.rz-tip {
    position: fixed; z-index: 3000; max-width: 22rem;
    background: var(--surface); border: 1px solid var(--accent);
    border-radius: 0.4rem; padding: 0.5rem 0.6rem;
    font-size: 0.8rem; line-height: 1.55; color: var(--ink);
    white-space: pre-wrap; text-align: right;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.12s ease;
}
.rz-tip.show { opacity: 1; visibility: visible; pointer-events: auto; }
/* A session report can run long — bound it so the floating card can still fit above or below its trigger. */
.rz-tip-text { white-space: pre-wrap; max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; }
.rz-tip-btn { margin-top: 0.6rem; }

/* Small helper note under a form field. */
.field-note { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; }

.empty { color: var(--muted); padding: 2rem 0; }
.lead { color: var(--muted); font-size: 1.05rem; }

/* ---------- Home: notice banner (Najiz alert) --------------------------- */
.dismiss-input { position: absolute; opacity: 0; pointer-events: none; }

.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.notice-ico { color: var(--accent); display: inline-flex; padding-top: 2px; }
.notice-ico svg { width: 22px; height: 22px; }
.notice-body { flex: 1; min-width: 0; }
.notice-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.15rem; color: var(--ink-heading); }
.notice-text { margin: 0; color: var(--muted); }
.notice-cta { align-self: center; white-space: nowrap; }

.notice-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}

.notice-x:hover { background: rgba(205, 189, 159, 0.12); color: var(--accent-strong); }
.notice-x svg { width: 15px; height: 15px; }
#notice-dismiss:checked ~ .notice { display: none; }

/* ---------- Home: card grid --------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (max-width: 860px) {
    .card-grid { grid-template-columns: 1fr; }
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--ink-heading); }
.card-link { font-size: 0.9rem; font-weight: 600; }

/* Empty-state block, centered */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--muted);
    padding: 1.5rem 0;
}

.empty-state svg { width: 34px; height: 34px; color: var(--line); }

/* Overview stats */
.stat-row { display: flex; flex-wrap: wrap; gap: 1rem; }

.stat {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    transition: border-color 0.15s;
}

.stat:hover { border-color: var(--accent); text-decoration: none; }
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 0.9rem; }

/* Icon-pill quick actions — white bg, gray border, green icon */
.icon-pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.icon-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color 0.15s, background-color 0.15s;
}

.icon-pill:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.icon-pill svg { width: 17px; height: 17px; color: var(--accent); }

/* Preference toggle (mock) */
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pref-label { font-weight: 600; color: var(--ink); }
.pref-help { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.85rem; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    position: absolute;
    inset: 0;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: background-color 0.15s, border-color 0.15s;
}
.switch .track::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    inset-inline-start: 2px;
    top: 2px;
    background: var(--muted);
    border-radius: 999px;
    transition: transform 0.15s, background-color 0.15s;
}
.switch input:checked + .track { background: var(--accent-soft); border-color: var(--accent); }
/* Same rule as .rz-switch: the knob is anchored inline-start, so the slide must flip with the direction
   (translateX is physical). 20px = the 42px inner width minus the 18px knob and its 2px insets. */
.switch input:checked + .track::before { background: var(--fill); transform: translateX(-20px); }
[dir="ltr"] .switch input:checked + .track::before { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 0.2rem var(--accent-ring); }

/* Pill tabs + service cards */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill-tab {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.pill-tab.active { background: var(--fill); border-color: var(--accent); color: var(--on-fill); }

.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
@media (max-width: 520px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.service-ico { position: absolute; top: 0.9rem; inset-inline-end: 1rem; color: var(--accent); }
.service-ico svg { width: 20px; height: 20px; }
.service-title { font-weight: 700; color: var(--ink-heading); margin: 0; padding-inline-end: 1.75rem; }
.service-desc {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service-go {
    align-self: flex-start;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---------- Consent bar + floating actions (mock/future) ---------------- */
.consent-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 25;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.consent-body { flex: 1; min-width: 0; }
.consent-title { font-weight: 700; margin: 0 0 0.15rem; color: var(--ink-heading); }
.consent-text { margin: 0; color: var(--muted); font-size: 0.9rem; }
.consent-text a { text-decoration: underline; }
.consent-action { flex: 0 0 auto; min-width: 200px; }
#consent-dismiss:checked ~ .consent-bar { display: none; }

.fab-stack {
    position: fixed;
    inset-inline-start: 1.5rem;
    bottom: 1.5rem;
    z-index: 26;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--fill);
    color: var(--on-fill);
    cursor: pointer;
    transition: background-color 0.15s;
}

.fab:hover { background: var(--fill-strong); border-color: var(--accent-strong); }
.fab svg { width: 22px; height: 22px; }

/* ---------- Dashboard tiles (legacy shared class, kept for reuse) ------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.25rem;
    color: var(--ink);
    transition: border-color 0.15s;
}

.tile:hover { border-color: var(--accent); }
.tile-ico { font-size: 1.6rem; color: var(--accent); }
.tile-value { font-size: 1.9rem; font-weight: 700; color: var(--accent); }
.tile-label { color: var(--muted); }
.tile-muted { opacity: 0.6; cursor: default; }
.tile-muted:hover { border-color: var(--line); }

/* ---------- Tables ------------------------------------------------------ */
/* Hairline row borders, light header, no zebra striping, no dark headers. */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-x: auto;
}

/* Cases-index live search box. */
.cases-toolbar { margin-bottom: 1rem; }
.cases-search { position: relative; max-width: 540px; }
.cases-search-ic {
    position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 0.85rem;
    display: inline-flex; color: var(--muted); pointer-events: none;
}
.cases-search-ic svg { width: 18px; height: 18px; }
.cases-search .form-control { padding-inline-start: 2.6rem; }

/* ===== Legal library (المكتبة القانونية) card grid ===== */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.lib-card {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic body" "act act";
    gap: 0.25rem 0.9rem; align-items: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.1rem; transition: box-shadow 0.15s, border-color 0.15s;
}
.lib-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.08); }
.lib-card-ic {
    grid-area: ic; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong);
}
.lib-card-ic svg { width: 22px; height: 22px; }
.lib-card-body { grid-area: body; min-width: 0; }
.lib-card-title {
    font-size: 1rem; font-weight: 700; color: var(--ink-heading); margin: 0 0 0.25rem;
    line-height: 1.35; word-break: break-word;
}
.lib-card-desc {
    color: var(--ink); font-size: 0.85rem; margin: 0 0 0.4rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-card-meta {
    color: var(--muted); font-size: 0.76rem; margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
}
.lib-card-meta .dot { color: var(--line); }
.lib-card-actions {
    grid-area: act; display: flex; gap: 0.35rem; justify-content: flex-end;
    margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line);
}
.field-hint { color: var(--muted); font-size: 0.78rem; margin: 0.35rem 0 0; }

/* ===== Powers of attorney (الوكالات) + client file ===== */
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.cell-link { color: var(--accent-strong); text-decoration: none; font-weight: 600; }
.cell-link:hover { text-decoration: underline; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem 1.2rem; }
.info-cell { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.info-label { color: var(--muted); font-size: 0.76rem; }
.info-value { color: var(--ink); font-size: 0.92rem; word-break: break-word; }
.poa-exp {
    display: inline-block; margin-inline-start: 0.4rem; padding: 0.08rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.poa-exp-active  { background: var(--ok-soft); color: var(--ok); }
.poa-exp-soon    { background: #fbeee0; color: #b7791f; }
.poa-exp-expired { background: var(--danger-soft); color: var(--danger); }
.poa-exp-none    { background: var(--surface-soft); color: var(--muted); }
/* الوكالات list — stacked client links (a توكيل can cover several) */
.poa-clients-cell { display: flex; flex-direction: column; gap: 0.15rem; align-items: center; }
/* «أنت وكيل هنا» / «غير وكيل هنا» (client 2026-08-16) — the viewer's OWN standing on each توكيل. Green when he is
   named on it, plain grey when he isn't: a row he has no part in should read as neutral, never as an error. */
.poa-agent { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
    border-radius: 999px; padding: 0.14rem 0.65rem; font-size: 0.78rem; font-weight: 700; }
.poa-agent svg { width: 0.85rem; height: 0.85rem; flex: none; }
.poa-agent-yes { background: var(--accent-soft); color: var(--accent-strong); }
.poa-agent-no { background: var(--surface-soft); color: var(--muted); font-weight: 600; }
/* Row-count line under a list table (عدد الوكالات). Follows the search filter — see initCasesSearch. */
.list-count { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.85rem; }
.list-count b { color: var(--ink-heading); font-weight: 700; }
/* أعمال الموكل — the per-family row count beside each sub-heading on the client file */
.works-count {
    display: inline-block; margin-inline-start: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
    background: var(--surface-soft); color: var(--muted); font-size: 0.72rem; font-weight: 700;
}
/* توكيل form — الإصدار + الانتهاء share one full-width row, split in two, so the pair always sits side by side
   whatever column count the surrounding .form-grid resolves to (3-up in a form-card, 2-up narrower). */
/* تاريخ الإصدار · مدة الوكالة · تاريخ الانتهاء read as one row (client 2026-07-30 added the duration between them). */
.poa-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; align-items: start; }
@media (max-width: 900px) { .poa-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .poa-dates { grid-template-columns: 1fr; } }
/* الوكالات dates — Umm al-Qura Hijri on top (the date on the deed), Gregorian small underneath */
.poa-date { display: inline-flex; flex-direction: column; gap: 0.05rem; line-height: 1.3; }
.poa-date-h { font-weight: 600; color: var(--ink); white-space: nowrap; }
.poa-date-g { font-style: normal; font-size: 0.76rem; color: var(--muted); }
/* Dashboard «وكالات تنتهي قريبًا» card — compact attention list, each row a link + expiry chip */
.poa-exp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.poa-exp-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.6rem 0.15rem; border-bottom: 1px solid var(--border-strong, #e2e8df); }
.poa-exp-item:last-child { border-bottom: 0; }
.poa-exp-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; text-decoration: none; }
.poa-exp-main:hover .poa-exp-clients { text-decoration: underline; }
.poa-exp-clients { font-weight: 600; color: var(--ink-heading); word-break: break-word; }
.poa-exp-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.8rem; color: var(--muted); }
/* صلاحية الأقسام — checkbox grid on the user-edit page */
.section-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem 1rem; }
.section-access-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.3rem 0.15rem; }
.section-access-item input { flex: none; width: 1rem; height: 1rem; accent-color: var(--accent-strong); }
.section-access-item span { color: var(--ink); }
/* الوكالات form — the multi-client picker rows */
.poa-clients .poa-client-row { max-width: 34rem; margin-bottom: 0.5rem; }
/* عرض الوكالة — الموكلون المشمولون بالتوكيل as ONE line under the page title (client 2026-08-16), not a card:
   it reads as the page's subtitle («whose توكيل is this?»), so it wraps inline instead of stacking. */
.poa-view-clients { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem;
    margin: -0.35rem 0 1.1rem; font-size: 1rem; }
.poa-view-clients-lbl { color: var(--muted); font-size: 0.86rem; font-weight: 600; }
.poa-view-clients .cell-link { font-weight: 700; }
.poa-view-clients-sep { color: var(--line); }

/* بيانات التوكيل — every value CENTRED under its own label and a step larger than the shared .info-grid
   (client 2026-08-16). Scoped to this card so no other info-grid in the app moves. */
.poa-info { gap: 1.15rem 1.2rem; }
.poa-info .info-cell { align-items: center; text-align: center; }
.poa-info .info-label { font-size: 0.85rem; font-weight: 600; }
.poa-info .info-value { font-size: 1.12rem; font-weight: 600; color: var(--ink-heading); }
.poa-info .info-value .poa-date-h { font-size: 1.06rem; }
.poa-info .info-value .poa-date-g { font-size: 0.9rem; }
.poa-info .poa-date { align-items: center; }

/* الوكلاء المضافين — its own card since 2026-08-16; one chip per name so many lawyers stay legible. */
.poa-lawyers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.poa-lawyer { display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.32rem 0.85rem; font-size: 0.95rem; font-weight: 600; color: var(--ink-heading); }
.poa-lawyer svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }

.poa-files { display: flex; flex-direction: column; gap: 0.5rem; }
.poa-file {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.8rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.poa-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.poa-file-meta { color: var(--muted); font-size: 0.78rem; flex: none; }
.poa-file-actions { display: flex; gap: 0.3rem; flex: none; }

/* ===== Global search overlay (top-nav magnifier) ===== */
body.gsearch-open { overflow: hidden; }
.gsearch { position: fixed; inset: 0; z-index: 1080; background: rgba(20, 28, 22, 0.38);
    display: flex; justify-content: center; align-items: flex-start; padding: 8vh 1rem 1rem;
    backdrop-filter: blur(2px); }
.gsearch-panel { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); overflow: hidden;
    display: flex; flex-direction: column; max-height: 78vh; }
.gsearch-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line); }
.gsearch-ic { display: inline-flex; color: var(--muted); flex: none; }
.gsearch-ic svg { width: 20px; height: 20px; }
.gsearch-input { flex: 1; border: none; outline: none; background: transparent; font: inherit;
    font-size: 1.05rem; color: var(--ink); padding: 0.2rem 0; }
.gsearch-close { flex: none; border: none; background: transparent; color: var(--muted); cursor: pointer;
    font-size: 1.5rem; line-height: 1; width: 2rem; height: 2rem; border-radius: 8px; }
.gsearch-close:hover { background: var(--surface-soft); color: var(--ink); }
.gsearch-results { overflow-y: auto; padding: 0.5rem; }
.gsearch-hint, .gsearch-empty { color: var(--muted); text-align: center; padding: 1.6rem 1rem; margin: 0; }
.gsearch-more { color: var(--muted); font-size: 0.8rem; text-align: center; padding: 0.6rem; margin: 0; }
.gsearch-group + .gsearch-group { margin-top: 0.35rem; }
.gsearch-group-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700;
    color: var(--muted); padding: 0.5rem 0.6rem 0.3rem; }
.gsearch-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem;
    height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--surface-soft); font-size: 0.72rem; }
.gsearch-hit { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 10px;
    text-decoration: none; color: var(--ink); }
.gsearch-hit:hover, .gsearch-hit:focus { background: var(--surface-soft); text-decoration: none; }
.gsearch-hit-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-inline: 0.2rem; }
.gsk-case { background: var(--mark); }   /* was sand #b9a47f — a near-white swatch reads as «no colour» here */
.gsk-execution { background: #d98324; }
.gsk-service { background: #52469b; }
.gsk-consultation { background: #2e5e9e; }
.gsk-client { background: #2e7d52; }
.gsk-opponent { background: #b23b3b; }
.gsk-session { background: #2e8b8b; }
.gsk-task { background: #a07a1e; }
.gsk-action { background: #7d5aa0; }
.gsk-user { background: #3f5fb0; }
.gsk-reference { background: #4f7d5e; }
.gsk-poa { background: #9c6b2e; }
.gsk-library { background: #4a6b8a; }
.gsk-systemvalue { background: #6b7280; }
.gsearch-hit-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gsearch-hit-title { font-weight: 600; color: var(--ink-heading); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
.gsearch-hit-sub { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }

.table {
    margin: 0;
    vertical-align: middle;
    color: var(--ink);
    font-size: 0.9rem;
    /* Compact rows — tight padding keeps long lists (e.g. system values) short. */
    --bs-table-cell-padding-y: 0.35rem;
    --bs-table-cell-padding-x: 0.75rem;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-color: var(--ink);
}

.table thead th {
    background: var(--surface-soft);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table td { border-color: var(--line); background: transparent; line-height: 1.35; }
.row-inactive { color: var(--muted); background: var(--surface-soft); }
.ltr-cell { direction: ltr; text-align: right; }

.actions { display: flex; gap: 0.3rem; align-items: center; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }

/* Small buttons inside tables sit tighter so action-heavy rows stay short. */
.table .btn-sm { --bs-btn-padding-y: 0.2rem; --bs-btn-padding-x: 0.55rem; font-size: 0.8rem; }

.badge-active { background: var(--ok-soft); color: var(--ok); }
.badge-inactive { background: var(--danger-soft); color: var(--danger); }
/* «بانتظار التحقق» — neither good news nor bad, so neither green nor red (نطاق الإرسال, 2026-09-21). */
.badge-muted { background: var(--surface-soft); color: var(--muted); }
.badge-active, .badge-inactive, .badge-muted { padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 600; font-size: 0.78rem; }

/* ---------- System Values: master–detail (قيم النظام) ------------------- */
/* Groups rail on the right (RTL), values render area in the middle. Each group is a plain
   link → Blazor enhanced navigation swaps the detail pane in place (no interactive circuit). */
.sv-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.sv-groups {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    /* The rail is ~44 groups across 8 sections — pin it so the detail pane scrolls past it rather than
       leaving a long column of dead space beside a short table. */
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

/* ── قيم النظام rail: filter + category accordion ───────────────────────────
   A flat list of 44 groups was a wall, so they sit in <details> sections with a search box on top. The accordion
   is native — no JS, so it survives Blazor's enhanced navigation; only the filter is enhanced. */
.sv-search { padding: 0.15rem 0.15rem 0.35rem; }
.sv-search .form-control { font-size: 0.86rem; padding-block: 0.4rem; }

.sv-noresults {
    margin: 0;
    padding: 0.6rem 0.7rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.sv-cat { border-radius: 8px; }
.sv-cat + .sv-cat { margin-top: 0.1rem; }

.sv-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;          /* Safari/Firefox default marker */
    user-select: none;
}
.sv-cat-head::-webkit-details-marker { display: none; }
.sv-cat-head:hover { background: var(--surface-soft); }

.sv-cat-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.01em;
}

/* The twisty. Points down when shut and rotates open — mirrored for RTL by pointing it at the inline start. */
.sv-cat-head::after {
    content: "";
    flex: none;
    width: 0.42rem;
    height: 0.42rem;
    border-inline-start: 1.5px solid var(--muted);
    border-block-end: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.sv-cat[open] > .sv-cat-head::after { transform: rotate(-45deg); }
.sv-cat[open] > .sv-cat-head .sv-cat-title { color: var(--ink-heading); }

.sv-cat-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.1rem 0 0.35rem;
}

.sv-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sv-group:hover { background: var(--surface-soft); text-decoration: none; }
.sv-group.active { background: var(--accent-soft); border-color: var(--accent); }
.sv-group.active .cell-title { color: var(--ink-heading); font-weight: 600; }

.sv-group-name { min-width: 0; }
.sv-group .cell-title,
.sv-group .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sv-group-count {
    flex: none;
    min-width: 1.9rem;
    padding: 0.05rem 0.45rem;
    text-align: center;
    background: var(--surface-soft);
    color: var(--muted);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sv-group.active .sv-group-count { background: #fff; color: var(--accent-strong); }

.sv-detail { min-width: 0; }
.sv-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.sv-detail-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--ink-heading); }

.sv-stats {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.65rem 0.95rem;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.sv-stat-label { color: var(--muted); font-size: 0.95rem; }
.sv-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.sv-stat-unit { color: var(--muted); font-size: 0.95rem; }
.sv-stats .badge-active, .sv-stats .badge-inactive { margin-inline-start: auto; align-self: center; }

/* Narrow screens: groups rail stacks above the detail pane. */
@media (max-width: 820px) {
    .sv-layout { grid-template-columns: 1fr; }
}

/* ---------- Forms ------------------------------------------------------- */
.form-card, .auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.5rem;
}
/* Each form card is a query container so the dense grid below counts columns by the CARD's width, not the
   viewport — a narrow card (a modal, a side-by-side session card) collapses to fewer columns instead of
   cramming/clipping. */
.form-card { container-type: inline-size; }

/* "Still to fill" card — tinted with the semantic success-soft green so the cards the user came back to
   complete read as a pair (used by الرأي القانوني + مُرفقات داعمة at the top of تعديل الاستشارة). Controls stay
   white against the tint; the notch <legend> has no background fill, so labels work on this surface unchanged. */
.form-card-todo { background: var(--ok-soft); border-color: #cbd9cb; }
.form-card-todo > .form-section { color: var(--ok); }
.form-card-todo .rz-attach-empty,
.form-card-todo .rz-attach-row { background: rgba(255, 255, 255, 0.72); }

.form-section {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-heading);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}

.form-section:first-of-type { margin-top: 0; }

/* A section heading carrying an inline action — the «بيانات السجل» إظهار/إخفاء toggle. The head takes over the
   heading's own margins so the button lines up with the title instead of floating above its rule. */
.section-toggle { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 0.75rem; }
.section-toggle > .form-section { flex: 1 1 auto; min-width: 0; margin: 0; }
.section-toggle > .btn { flex: none; }
.form-card .section-toggle { margin: 1.1rem 0 0.6rem; }
.form-card .section-toggle > .form-section { margin: 0; }

/* A lighter sub-heading inside a section (e.g. الموكّلون / الخصوم under أطراف الدعوى). */
.form-subhead {
    font-size: 0.9rem; font-weight: 700; color: var(--ink-heading);
    margin: 1.1rem 0 0.6rem;
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
/* Three-fields-per-row variant (case detail section). */
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A small "+ add" action under a select (e.g. الجهة المرجعية). */
.refentity-add-btn { margin-top: 0.3rem; padding: 0.1rem 0; font-size: 0.82rem; }
.form-check-cell { display: flex; align-items: center; padding-top: 1.75rem; }
.form-label { font-weight: 600; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.3rem; }

/* Inputs: white bg, thin gray border, green focus ring — no dark outlines,
   no default-browser dark select styling. */
.form-control, .form-select {
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 8px;
}

.form-control::placeholder { color: var(--muted); }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23223f73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-ring);
    color: var(--ink);
}

.form-check-input { border-color: var(--line); }
.form-check-input:checked { background-color: var(--fill); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-ring); }

@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Login (Najiz split-screen) ---------------------------------- */
.login-viewport { min-height: 100vh; display: flex; flex-direction: column; }
.login-footer { flex: none; }

.login-header {
    height: var(--navbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.login-split { flex: 1; display: flex; }

/* Left ~60% — full-bleed photo with a light green tint to stay on-palette */
.login-aside {
    flex: 0 0 58%;
    background: var(--surface-soft) url("/img/loginbg.png") center / cover no-repeat;
    order: 2; /* sits on the left in RTL */
    position: relative;
}

/* Green wash + fade into the white panel so the two halves merge (no hard seam) */
.login-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(232, 241, 230, 0.55) 0%,
        rgba(232, 241, 230, 0.58) 55%,
        rgba(255, 255, 255, 1) 100%
    );
}

/* Right ~40% — white form panel */
.login-panel {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: var(--surface);
    order: 1;
}

/* Fill the panel's content box so the panel padding is the only side margin —
   fields read wide and clear like Najiz, not a narrow centred column. */
.login-form-wrap { width: 100%; max-width: 620px; }

/* Taller, roomier fields to match the Najiz proportions */
.login-form-wrap .form-control {
    padding: 0.72rem 1rem;
    font-size: 1rem;
}

.login-form-wrap .btn {
    padding: 0.72rem 1rem;
    font-size: 1.05rem;
}

.login-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.login-back svg { width: 15px; height: 15px; }
.login-back:hover { text-decoration: none; color: var(--accent-strong); }

.login-intro h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--ink-heading); }
.login-intro p { margin: 0; color: var(--muted); }

.login-divider { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.promo-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-top: 2rem;
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
}

.promo-badge svg { width: 22px; height: 22px; }
.promo-text { margin: 0; color: var(--muted); font-size: 0.88rem; }

@media (max-width: 760px) {
    .login-aside { display: none; }
    .login-panel { padding: 2rem 1.25rem; }
}

/* ---------- Public landing: header ------------------------------------- */
.public-navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--navbar-h);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.public-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: auto;
}

.public-nav a {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.public-nav a:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }

.public-actions { display: flex; align-items: center; gap: 0.6rem; }

.public-login {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.92rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.public-login:hover { background: var(--fill); color: var(--on-fill); text-decoration: none; }
.public-login svg { width: 16px; height: 16px; }

@media (max-width: 780px) {
    .public-navbar { gap: 0.75rem; padding: 0 1rem; }
    .public-nav { display: none; } /* collapses on small screens; login stays reachable */
}

/* ---------- Public landing: layout helpers ----------------------------- */
.container-narrow { max-width: 1120px; margin-inline: auto; padding-inline: 1.75rem; }

.section { padding: 4rem 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.section-title { font-size: 1.9rem; font-weight: 800; margin: 0 0 0.6rem; color: var(--ink-heading); }
.section-sub { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* ---------- Public landing: سياسة الخصوصية / الشروط والأحكام (bilingual) ------------------ */
.policy-page { padding: 3rem 0 5rem; max-width: 860px; }
.policy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.policy-head h1 { margin: 0; font-size: 1.9rem; font-weight: 800; color: var(--ink-heading); }
.policy-updated { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 2rem; }
.policy-lang-toggle { display: inline-flex; gap: 0.4rem; flex: 0 0 auto; }
.policy-lang-toggle a {
    padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--line);
    text-decoration: none; font-weight: 700; font-size: 0.85rem; color: var(--ink);
}
.policy-lang-toggle a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.policy-body h2 { margin: 2rem 0 0.6rem; font-size: 1.15rem; font-weight: 800; color: var(--ink-heading); }
.policy-body p { margin: 0 0 0.9rem; line-height: 1.9; color: var(--ink); }
.policy-body ul { margin: 0.4rem 0 1rem; padding-inline-start: 1.4rem; }
.policy-body li { line-height: 1.9; color: var(--ink); margin-bottom: 0.35rem; }
.policy-en { direction: ltr; text-align: left; }
.policy-consent-check {
    display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.2rem 0 0;
    font-size: 0.95rem; color: var(--ink); cursor: pointer;
}
.policy-consent-check input[type="checkbox"] { margin-top: 0.2rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.policy-consent-check a { color: var(--accent); text-decoration: underline; }

/* ---------- Public landing: hero --------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background-color: var(--surface-soft);
    /* flat green dot texture — SVG tile, not a gradient */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%23b9a47f' fill-opacity='0.35'/%3E%3C/svg%3E");
    border-bottom: 1px solid var(--line);
    text-align: center;
    padding: 5.5rem 1.75rem 5rem;
}
/* soft ambient wash — a green halo at top-center + a faint gold hint, fading in on load. */
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(62% 55% at 50% -6%, color-mix(in srgb, var(--fill) 14%, transparent) 0%, transparent 60%),
        radial-gradient(38% 42% at 86% 8%, rgba(191, 160, 106, 0.12) 0%, transparent 55%);
    opacity: 0;
    animation: hero-amb 2.4s ease-out 0.15s forwards;
}
/* brand-lockup watermark filling the hero, behind the content. */
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: url("/img/hero-bg-logo.svg") no-repeat center;
    background-size: cover;
    opacity: 0.13;
}

.hero-inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }

/* Orchestrated entrance: logo pops in → eyebrow → headline → sub → CTAs cascade up (slide-fade). The
   `both` fill holds each element hidden through its delay, so the sequence reads as one deliberate reveal. */
.hero-logo {
    display: block; width: 152px; height: 152px; margin: 0 auto 1.6rem;
    animation: hero-logo-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-logo img {
    width: 100%; height: 100%; object-fit: contain;
    /* the brand's golden aura, settled beneath the mark; a gentle float gives it life after it lands. */
    filter: drop-shadow(0 12px 26px rgba(191, 160, 106, 0.32));
    animation: hero-float 6.5s ease-in-out 2s infinite;
}

.hero-eyebrow {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-strong);
    font-weight: 700;
    font-size: 0.85rem;
    animation: hero-rise 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

.hero h1 {
    font-size: 2.9rem; font-weight: 800; margin: 0 0 1rem; color: var(--ink-heading); line-height: 1.3;
    animation: hero-rise-blur 1.3s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}
.hero-sub {
    font-size: 1.2rem; color: var(--muted); margin: 0 auto 2rem; max-width: 620px;
    animation: hero-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.4s both;
}
.hero-cta {
    display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center;
    animation: hero-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.75s both;
}
.hero-cta .btn { padding: 0.72rem 1.6rem; font-size: 1.02rem; display: inline-flex; align-items: center; gap: 0.4rem; }

@keyframes hero-amb { to { opacity: 1; } }
@keyframes hero-logo-in {
    from { opacity: 0; transform: translateY(6px) scale(0.7); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-rise-blur {
    from { opacity: 0; transform: translateY(22px); filter: blur(7px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 640px) {
    .hero { padding: 3.5rem 1.25rem; }
    .hero-logo { width: 120px; height: 120px; }
    .hero h1 { font-size: 2.1rem; }
    .hero-sub { font-size: 1.05rem; }
}

/* On-scroll reveal for the sections below the hero (progressive enhancement — armed by initReveal only for
   elements below the fold, so nothing on screen ever flashes; content stays visible if JS/motion is off). */
.reveal-pending { opacity: 0; transform: translateY(26px); }
.reveal-show {
    opacity: 1; transform: none;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero-logo, .hero-logo img, .hero-eyebrow, .hero h1, .hero-sub, .hero-cta { animation: none; }
    .hero::before { opacity: 1; }
    .reveal-pending { opacity: 1; transform: none; }
}

/* ---------- Public landing: feature cards ------------------------------ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.15s;
}

.feature-card:hover { border-color: var(--accent); }

.feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 0.4rem;
}

.feature-ico svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--ink-heading); }
.feature-card p { margin: 0; color: var(--muted); }

/* ---------- Public landing: value band --------------------------------- */
.why { background: var(--surface-soft); border-block: 1px solid var(--line); }

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
}

.why-item { display: flex; flex-direction: column; gap: 0.5rem; }
.why-ico { color: var(--accent); }
.why-ico svg { width: 28px; height: 28px; }
.why-item h3 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--ink-heading); }
.why-item p { margin: 0; color: var(--muted); }

/* ---------- Public landing: contact ------------------------------------ */
.contact-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 2.25rem;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.contact-card h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--ink-heading); }
.contact-card p { color: var(--muted); margin: 0 auto 1.5rem; max-width: 520px; }

.contact-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.contact-method {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
    direction: ltr;
}

.contact-method:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; }
.contact-method svg { width: 17px; height: 17px; color: var(--accent); }

/* ---------- Public landing: footer ------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); }

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2rem;
    padding: 3rem 0 2rem;
}

.footer-brand .brand-mark { font-size: 1.5rem; }
.footer-brand p { color: var(--muted); margin: 0.75rem 0 0; max-width: 320px; }

.footer-col h4 { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: var(--ink-heading); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-col a:hover { color: var(--accent-strong); }
.footer-col a svg { width: 13px; height: 13px; opacity: 0.7; }

/* PDPL / NCA-ECC compliance line (client 2026-08-20) — shared wording with .app-footer below. */
.footer-compliance {
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--muted);
    text-align: center;
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.footer-bottom nav { display: flex; gap: 1.25rem; }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--accent-strong); }

@media (max-width: 780px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Auth cards (Error / NotFound) ------------------------------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 1.5rem;
}

.auth-card { width: 100%; max-width: 440px; border-top: 3px solid var(--accent); }

.auth-error {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.auth-ok {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* [data-otp] segmented code entry (Task 2.1) — phone-style OTP boxes; raseem-forms.js keeps the hidden field
   they feed in sync. LTR even on this RTL page since a digit sequence still reads left-to-right. */
.otp-boxes { display: flex; gap: 0.5rem; direction: ltr; }
.otp-box {
    width: 2.75rem;
    height: 3rem;
    text-align: center;
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}
.otp-box:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* MFA enrollment (Task 2.1) — the QR + manual key shown on /account/security while awaiting confirmation. */
.mfa-setup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}
.mfa-setup img { border-radius: 6px; background: #fff; padding: 0.5rem; }

/* ---------- Validation & error surfaces --------------------------------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); font-size: 0.85rem; }

.blazor-error-boundary {
    background: var(--danger-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--danger);
}

.blazor-error-boundary::after { content: "حدث خطأ."; }

#blazor-error-ui {
    color-scheme: light only;
    background: var(--surface-soft);
    border-top: 1px solid var(--line);
    color: var(--danger);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; left: 0.75rem; top: 0.5rem; }

/* ---------- Clients: contact rows + document upload --------------------- */
/* Each of the three contact slots is separated by a hairline so the form reads as distinct rows. */
.contact-row + .contact-row { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }

.doc-upload { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.doc-upload .form-control { max-width: 28rem; }

/* ---------- Cases (الدعاوى) --------------------------------------------- */
/* Neutral green status pill for the case list (statuses aren't a simple active/inactive pair). */
.badge-status {
    background: var(--accent-soft); color: var(--ink-heading);
    padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 600; font-size: 0.78rem; white-space: nowrap;
}

/* Searchable multi-select (المحامي المُكلَّف): chips + a search box + a dropdown, all JS-driven. */
/* The chips render BELOW the search box (order: 2), not above it — otherwise every added chip pushes the input
   down and the multiselect stops lining up with the plain <select> beside it (e.g. المحامي المُكلَّف vs
   المحامي المُترافع). DOM order is unchanged, so the JS that appends chips is untouched. */
.ms { position: relative; display: flex; flex-direction: column; }
.ms-selected { order: 2; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ms-selected:empty { display: none; }
.ms-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--accent-soft); color: var(--ink-heading);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.3rem 0.15rem 0.6rem;
    font-size: 0.85rem; font-weight: 600;
}
.ms-chip .ms-x {
    border: none; background: transparent; color: var(--accent-strong); cursor: pointer;
    font-size: 1.05rem; line-height: 1; padding: 0 0.15rem; border-radius: 999px;
}
.ms-chip .ms-x:hover { background: rgba(205, 189, 159, 0.18); }
.ms-dropdown {
    display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 20; margin-top: 0.25rem;
    max-height: 15rem; overflow-y: auto; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.ms.open .ms-dropdown { display: block; }
.ms-opt {
    display: block; width: 100%; text-align: start; border: none; background: transparent;
    padding: 0.5rem 0.75rem; font: inherit; color: var(--ink); cursor: pointer;
}
.ms-opt:hover { background: var(--accent-soft); color: var(--ink-heading); }
.ms-empty { padding: 0.5rem 0.75rem; color: var(--muted); font-size: 0.85rem; }

/* Hijri-aware datepicker (opens on click anywhere in the field). */
.dp { position: relative; }
.dp-display { cursor: pointer; background: var(--surface); }
/* Locked datepicker (value derived, e.g. PoA end date) — display-only, muted read-only look. */
.dp-locked .dp-display { cursor: default; background: var(--surface-soft); color: var(--muted); }
.dp-pop {
    position: absolute; inset-inline-start: 0; top: 100%; z-index: 25; margin-top: 0.3rem; width: 19rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem;
}
.dp-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.dp-title { flex: 1; text-align: center; line-height: 1.25; }
.dp-title b { display: block; color: var(--ink-heading); font-size: 0.95rem; }
.dp-title span { color: var(--muted); font-size: 0.76rem; }
.dp-nav {
    border: 1px solid var(--line); background: var(--surface); color: var(--accent);
    width: 2rem; height: 2rem; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.dp-nav:hover { background: var(--fill); color: var(--on-fill); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span { text-align: center; color: var(--muted); font-size: 0.72rem; padding: 0.2rem 0; }
/* Each day shows BOTH calendars (client 2026-07-28): Hijri large, Gregorian d/m small underneath. */
.dp-day {
    border: none; background: transparent; color: var(--ink); cursor: pointer;
    padding: 0.3rem 0 0.25rem; border-radius: 8px; font: inherit; font-size: 0.9rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1;
}
.dp-d-h { font-weight: inherit; }
.dp-d-g { font-style: normal; font-size: 0.62rem; color: var(--muted); letter-spacing: 0.01em; }
.dp-day.on .dp-d-g, .dp-day.dp-now .dp-d-g { color: inherit; opacity: 0.85; }
.dp-day:hover { background: var(--accent-soft); }
/* Today's date — a ring so it stands out even when no date is selected (inset shadow → no layout shift). */
.dp-day.dp-now { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-strong); font-weight: 700; }
.dp-day.on { background: var(--fill); color: var(--on-fill); font-weight: 700; }
.dp-day.dp-now.on { box-shadow: none; }
/* Out of range (data-dp-max — e.g. تاريخ التحديث can't be in the future): visible but unpickable. */
.dp-day.dp-off { color: var(--muted); opacity: 0.45; cursor: not-allowed; }
.dp-day.dp-off:hover { background: transparent; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.dp-today, .dp-clear {
    border: 1px solid var(--line); background: var(--surface); color: var(--accent);
    padding: 0.25rem 0.7rem; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.82rem;
}
.dp-today:hover, .dp-clear:hover { background: var(--fill); color: var(--on-fill); }

/* ---------- Custom time picker ([data-tp]) — 12-hour ص/م ---------------- */
.tp { position: relative; }
.tp-display { cursor: pointer; background: var(--surface); }
/* iOS-style wheels (client 2026-09-19, replacing the 2026-07-28 clock dial): three scroll-snapping columns
   under one fixed highlight band, then the actions. */
.tp-pop {
    position: absolute; inset-inline-start: 0; top: 100%; z-index: 25; margin-top: 0.3rem; width: 16.5rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem;
}
/* --tp-item (notch height) and --tp-h (window height) are set inline by the JS, which scrolls by the same
   numbers — they must agree, so neither is hard-coded twice. LTR: a time reads left-to-right even here. */
.tpw {
    position: relative; display: flex; align-items: stretch; justify-content: center; gap: 0.15rem;
    direction: ltr; height: var(--tp-h); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
/* The band is the control: whatever sits inside it IS the picked value. */
.tpw-band {
    position: absolute; left: 0; right: 0; top: 50%; height: var(--tp-item);
    transform: translateY(-50%); border-radius: 10px; background: var(--surface-soft);
    pointer-events: none;
}
.tpw-col {
    position: relative; z-index: 1; overflow-y: auto; scroll-snap-type: y mandatory;
    padding-block: var(--tp-pad); scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch; text-align: center;
}
.tpw-col::-webkit-scrollbar { display: none; }
.tpw-opt {
    height: var(--tp-item); line-height: var(--tp-item); scroll-snap-align: center; scroll-snap-stop: always;
    min-width: 2.6rem; padding-inline: 0.45rem; cursor: pointer; user-select: none;
    font-size: 1.05rem; color: var(--muted); opacity: 0.55;
    transition: color 0.12s ease, opacity 0.12s ease;
}
/* The notch in the band — the only one at full strength, exactly like the iOS wheel. */
.tpw-opt.on { color: var(--ink); opacity: 1; font-weight: 700; }
.tpw-colon {
    position: relative; z-index: 1; align-self: center; color: var(--muted); font-weight: 700;
    line-height: 1; padding-bottom: 0.1rem;
}
.tp-foot { display: flex; justify-content: space-between; gap: 0.4rem; margin-top: 0.6rem; }
.tp-now, .tp-clear, .tp-done {
    border: 1px solid var(--line); background: var(--surface); color: var(--accent);
    padding: 0.25rem 0.75rem; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.82rem;
}
.tp-now:hover, .tp-clear:hover, .tp-done:hover { background: var(--fill); color: var(--on-fill); }
.tp-done { background: var(--fill); border-color: var(--accent); color: var(--on-fill); }

/* ---------- Searchable single-select (JS-built: capacity, client) ------- */
.ss { position: relative; }
.ss-display { text-align: start; cursor: pointer; }
.ss-display.ss-ph { color: var(--muted); }
.ss-pop { position: absolute; inset-inline: 0; top: 100%; z-index: 20; margin-top: 0.25rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ss-pop .ss-search { border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.ss-list { max-height: 13rem; overflow-y: auto; }
.ss-opt { display: block; width: 100%; text-align: start; border: none; background: transparent;
    padding: 0.5rem 0.75rem; font: inherit; color: var(--ink); cursor: pointer; }
.ss-opt:hover { background: var(--accent-soft); color: var(--ink-heading); }
.ss-opt.ss-add { color: var(--accent-strong); font-weight: 600; border-bottom: 1px solid var(--line); }
.ss-none { padding: 0.5rem 0.75rem; color: var(--muted); font-size: 0.85rem; }
/* Enhanced native <select>: the real control stays in the form (posts its value) but is visually hidden. */
.ss-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; }

/* ---------- Floating labels (global · applied by raseem-forms.js) ------- */
/* Required marker. */
.req { color: var(--danger); margin-inline-start: 0.15rem; font-weight: 700; }

/* Each field is wrapped in .rz-field (by raseem-forms.js) as a NOTCHED-OUTLINE field: an absolutely-positioned
   `<fieldset.rz-outline>` overlay draws the control's border, and its `<legend>` cuts a REAL gap in that top
   border (native browser behaviour). So the label sits in the gap with **no background fill** of its own — the
   notch works on ANY surface (white card, faint-green page, login panel), not just white. The real `<label>` is
   kept but screen-reader-only; the control's own border is made transparent so the overlay is the only visible
   box, and focus/hover styling moves to the overlay. The control still shows a muted in-field placeholder hint. */
.rz-field { position: relative; margin-top: 0.95rem; }

/* Original <label> kept for a11y but visually hidden (the legend is the visible label). */
.rz-field > label.rz-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The outline overlay + its notch-cutting legend. */
.rz-field > .rz-outline {
    position: absolute; inset: 0; margin: 0; padding: 0; min-inline-size: 0;
    border: 1px solid var(--line); border-radius: 8px; pointer-events: none;
}
.rz-field > .rz-outline > legend {
    width: auto; max-width: calc(100% - 1.4rem);
    margin: 0; margin-inline-start: 0.55rem; padding: 0 0.35rem; float: none;
    /* line-height must clear Arabic descenders — `overflow:hidden` (for the ellipsis) clips anything below the
       line box, so a tight line-height:1 cut the tails off letters like ى/ق. 1.5 gives them room. */
    font-size: 0.8rem; font-weight: 600; line-height: 1.5; color: var(--ink-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Controls inside a notch hide their own border (the overlay is the visible box); size is preserved so the
   overlay's inset:0 lines up exactly. Focus/validation ring moves to the overlay via :focus-within. Extra
   top padding drops the value/placeholder clear of the label, which dips below the top border. */
.rz-field:not(.rz-field-plain) > .form-control,
.rz-field:not(.rz-field-plain) > .form-select,
.rz-field:not(.rz-field-plain) > textarea,
.rz-field:not(.rz-field-plain) > .ss > .ss-display,
.rz-field:not(.rz-field-plain) > .dp > .dp-display,
.rz-field:not(.rz-field-plain) > .fee-money > .form-control,
.rz-field:not(.rz-field-plain) > .tp > .tp-display { border-color: transparent; padding-top: 1rem; }
/* اسم الدخول: the username + «@domain» pair is one control in a notch too (2026-08-17). The group's own border
   goes transparent so the overlay is the only visible box, its rounding is kept so the grey suffix stays clipped
   inside the notch's corners, and both halves take the same top padding that drops the text clear of the label. */
.rz-field:not(.rz-field-plain) > .affix-group { border-color: transparent; background: transparent; border-radius: 8px; }
.rz-field:not(.rz-field-plain) > .affix-group > .form-control,
.rz-field:not(.rz-field-plain) > .affix-group > .affix-prefix,
.rz-field:not(.rz-field-plain) > .affix-group > .affix-suffix { padding-top: 1rem; }
.rz-field:not(.rz-field-plain) > .form-control:focus,
.rz-field:not(.rz-field-plain) > .form-select:focus,
.rz-field:not(.rz-field-plain) > textarea:focus,
.rz-field:not(.rz-field-plain) > .ss > .ss-display:focus,
.rz-field:not(.rz-field-plain) > .dp > .dp-display:focus,
.rz-field:not(.rz-field-plain) > .fee-money > .form-control:focus,
.rz-field:not(.rz-field-plain) > .tp > .tp-display:focus { border-color: transparent; box-shadow: none; }
.rz-field:focus-within > .rz-outline { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-ring); }

/* Multiselect fallback: no single bordered box → a plain label above (no notch). */
.rz-field-plain > label.form-label {
    display: block; margin: 0 0 0.3rem; padding: 0; text-align: start;
    font-size: 0.8rem; font-weight: 600; color: var(--ink-heading);
}

/* Placeholders are the in-field hint (e.g. "اختر الحالة…", "رقم الدعوى"), shown muted. */
.rz-field > .form-control::placeholder, .rz-field > textarea::placeholder,
.rz-field > .fee-money > .form-control::placeholder { color: var(--muted); }

/* Read-only (disabled) notch field, e.g. رقم الملف: grey the OUTLINE's fill (its background starts at the top
   border, so it respects the notch) rather than the input's own box — whose background bled above the border.
   The value sits above the fill via z-index so it stays readable. */
.rz-field > .form-control:disabled {
    background-color: transparent; color: var(--ink); opacity: 1; cursor: default;
    position: relative; z-index: 1;
}
.rz-field:has(> .form-control:disabled) > .rz-outline { background-color: var(--surface-soft); }

/* Browser autofill paints the INPUT's box (which extends above the notch's top border → a coloured strip bled
   over the border). We can't move that fill to the outline, so repaint it the surface colour via the inset
   box-shadow trick — the strip then blends into the white panel/card and the field looks like a normal notch.
   The 9999s transition defers Chrome's yellow autofill flash. */
.rz-field > .form-control:-webkit-autofill,
.rz-field > .form-control:-webkit-autofill:hover,
.rz-field > .form-control:-webkit-autofill:focus,
.rz-field > .form-control:autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Dense form layout (default for every .form-card) -------------------------------------------------
   Cuts visual scan time: shorter fields, smaller labels, tighter gutters, uniform row height, ≤3 per row.
   Column count responds to the CARD width via @container (set on .form-card above), so it's consistent
   site-wide and safe inside narrow modals/side-by-side cards. */
.form-card .form-section { margin: 0 0 0.6rem; font-size: 0.95rem; padding-bottom: 0.35rem; }
.form-card .form-section:first-of-type { margin-top: 0; }
/* Tighter gutters. Both the 2-col (.form-grid) and 3-col (.form-grid-3) variants become ≤3-per-row here, then
   collapse by the CARD's width (some cards use form-grid-3 without the form-grid class, so target both). */
.form-card .form-grid, .form-card .form-grid-3 { gap: 0.4rem 0.7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 720px) { .form-card .form-grid, .form-card .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 460px) { .form-card .form-grid, .form-card .form-grid-3 { grid-template-columns: 1fr; } }

/* Tighter row-to-row rhythm (the label lives in the notch, so this is the vertical gap between rows). */
.form-card .rz-field { margin-top: 0.35rem; }

/* Compact but comfortable fields — one uniform height per control type so a row scans horizontally. */
.form-card .rz-field:not(.rz-field-plain) > .form-control,
.form-card .rz-field:not(.rz-field-plain) > .form-select,
.form-card .rz-field:not(.rz-field-plain) > textarea,
.form-card .rz-field:not(.rz-field-plain) > .ss > .ss-display,
.form-card .rz-field:not(.rz-field-plain) > .dp > .dp-display,
.form-card .rz-field:not(.rz-field-plain) > .fee-money > .form-control,
.form-card .rz-field:not(.rz-field-plain) > .tp > .tp-display {
    padding-top: 0.92rem; padding-bottom: 0.48rem; font-size: 0.9rem; min-height: 0; line-height: 1.35;
}
/* textarea keeps room for multi-line entry. */
.form-card .rz-field:not(.rz-field-plain) > textarea { padding-top: 1rem; }
/* Notch label — slightly larger for legibility, still under the value for contrast. */
.form-card .rz-field > .rz-outline > legend { font-size: 0.78rem; line-height: 1.4; }
/* Plain-label variant (multiselect / المترافع select) — matched label size + height. */
.form-card .rz-field-plain > label.form-label { font-size: 0.78rem; margin-bottom: 0.18rem; }
.form-card .rz-field-plain > .form-select,
.form-card .rz-field-plain > .ss > .ss-display,
.form-card .rz-field-plain > .ms .ms-search { padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.9rem; }

/* ---------- Dispute-parties rows --------------------------------------- */
.pp-host { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }
.pp-host:empty { margin-bottom: 0; }
.pp-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.6rem; align-items: center; }
.pp-row .pp-name { padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-soft); color: var(--ink-heading); font-weight: 600; }
.pp-rm { border: 1px solid var(--line); background: var(--surface); color: var(--danger);
    width: 2.1rem; height: 2.1rem; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.pp-rm:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
@media (max-width: 640px) { .pp-row { grid-template-columns: 1fr; } }
/* Required صفة الموكل (meeting note 8): red outline on an empty capacity select + the inline error text. */
.pp-invalid .ss-display, .ss.pp-invalid .ss-display { border-color: var(--danger); box-shadow: 0 0 0 0.15rem var(--danger-soft); }
.pp-caperror { color: var(--danger); font-weight: 600; margin-top: 0.4rem; }

/* ---------- In-page modals (client / opponent registration) ------------ */
body.rz-modal-open { overflow: hidden; }
.rz-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
    padding: 3vh 1rem; background: rgba(65, 71, 63, 0.4); overflow-y: auto; }
.rz-modal-panel { width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); }
.rz-modal-head { display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.rz-modal-head h3 { margin: 0; font-size: 1.05rem; color: var(--ink-heading); }
.rz-modal-x { border: none; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.rz-modal-x:hover { color: var(--ink-heading); }
.rz-modal-body { padding: 1.25rem; }
.rz-modal-error { margin-bottom: 0.85rem; padding: 0.6rem 0.85rem; border-radius: var(--radius);
    background: var(--danger-soft); color: var(--danger); font-size: 0.9rem; }
.rz-modal-foot { display: flex; justify-content: flex-start; gap: 0.6rem;
    padding: 1rem 1.25rem; border-top: 1px solid var(--line); }

/* ===== عارض الملفات (client 2026-08-13) =====
   «عرض» opens the file inside the page. Wider + taller than an ordinary modal because the point is to READ the
   document, and the body is a fixed-height viewport so a long PDF scrolls inside the frame, not the page. */
.rz-fileview { padding: 1vh 0.75rem; }
.rz-fileview-panel { max-width: 1500px; width: 96vw; display: flex; flex-direction: column; max-height: 98vh; }
.rz-fileview-head-actions { display: flex; align-items: center; gap: 0.5rem; }
.rz-fileview-body {
    padding: 0.75rem; background: var(--surface-soft); border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius); flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center; overflow: auto;
}
.rz-fileview-frame { width: 100%; height: 88vh; border: 0; border-radius: 8px; background: #fff; }
.rz-fileview-img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.rz-fileview-media { max-width: 100%; max-height: 88vh; border-radius: 8px; background: #000; }
.rz-fileview-audio { width: 100%; max-width: 34rem; }
/* Word / Excel with no document server configured — say so instead of showing an empty frame. */
.rz-fileview-fallback { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.rz-fileview-fallback svg { width: 2.5rem; height: 2.5rem; color: var(--muted); }
.rz-fileview-fallback p { margin: 0.75rem 0 1rem; }

/* تحرير المستندات داخل المتصفح (client 2026-08-18) — the OnlyOffice editor is a full application, not a preview,
   so it takes the whole panel: the padding, the soft background and the centring that suit a PDF page would all
   just inset a toolbar.
   Two things about how DocsAPI mounts, both of which decide the height: it REPLACES the placeholder div with its
   own iframe (`replaceChild`), so a rule on the host div stops applying the moment the editor loads; and it sizes
   that iframe with a height="100%" ATTRIBUTE, which resolves to nothing unless an ancestor has a DEFINITE height.
   The panel is otherwise only `max-height`, so the editor collapsed to a toolbar-high strip. Hence: a real height
   on the panel, and the rule aimed at the iframe itself. */
.rz-fileview-office .rz-fileview-panel { height: 96vh; }
.rz-fileview-office .rz-fileview-body { padding: 0; background: #fff; display: block; overflow: hidden; }
.rz-fileview-office .rz-fileview-body > iframe,
.rz-fileview-office-host { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 640px) {
    .rz-fileview-frame, .rz-fileview-img, .rz-fileview-media { height: 62vh; max-height: 62vh; }
    .rz-fileview-office .rz-fileview-panel { height: 94vh; }
    .rz-fileview-head-actions { flex-wrap: wrap; }
}

/* Input with a trailing icon-button adornment (e.g. the عميل name fields' translate globe). Logical properties
   put the button on each field's trailing edge — left for the RTL Arabic field, right for the LTR English one
   (its .rz-adorn carries dir="ltr"); the input reserves room with matching inline-end padding. */
.rz-adorn { position: relative; }
.rz-adorn > .form-control { padding-inline-end: 2.5rem; }
.rz-adorn-btn { position: absolute; inset-inline-end: 0.3rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem;
    padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    color: var(--accent-strong); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.rz-adorn-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.rz-adorn-btn:disabled { opacity: 0.5; cursor: default; }
.rz-adorn-btn svg { width: 1.05rem; height: 1.05rem; }

/* Confirm dialog (destructive-action warning card). */
/* «إرسال تنبيه واتساب» recipient list (WhatsappAlertModal). Global rather than scoped: the modal is a shared
   component rendered by several pages, and Blazor CSS isolation would key the rules to whichever page's
   .razor.css they lived in. */
.wa-alert-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 14rem; overflow-y: auto;
    padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); }
.wa-alert-row { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 0.92rem; }
.wa-alert-row input { flex-shrink: 0; }
/* A lawyer with no reachable number stays VISIBLE and muted — hiding them turns a fixable data gap into an
   invisible delivery failure. */
.wa-alert-row input:disabled + span { color: var(--muted); }
.wa-alert-row input:disabled { cursor: not-allowed; }

/* «مشاركة الجلسة عبر واتساب» (client 2026-09-19) reuses the same list. Its rows carry a second line — the
   person's relationship to the file and the number on record — so the firm can tell two «محمد»s apart before
   it messages one of them. */
.wa-alert-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.wa-alert-all { margin: 0; font-size: 0.86rem; }
.wa-share-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.wa-share-who small { color: var(--muted); font-size: 0.8rem; }
.wa-alert-row input:disabled + .wa-share-who small { color: var(--muted); }

.rz-confirm { align-items: center; z-index: 80; }
.rz-confirm-panel { max-width: 440px; }
.rz-confirm-body { padding: 1.6rem 1.5rem 1.25rem; text-align: center; }
.rz-confirm-ic { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
    margin-bottom: 0.9rem; border-radius: 50%; background: var(--danger-soft); color: var(--danger); }
.rz-confirm-ic svg { width: 1.5rem; height: 1.5rem; }
.rz-confirm-title { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--ink-heading); }
.rz-confirm-msg { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.7; }
.rz-confirm-foot { display: flex; gap: 0.6rem; padding: 0 1.5rem 1.5rem; }
.rz-confirm-foot .btn { flex: 1; }

/* Solid destructive button (confirm-delete). */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8f4732;
    --bs-btn-hover-border-color: #8f4732;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8f4732;
    --bs-btn-active-border-color: #8f4732;
}
/* Opponent "هل تقصد …؟" suggestions under the name box. */
.oo-suggest { margin-top: 0.35rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.oo-item { display: block; width: 100%; text-align: start; border: none; background: var(--surface-soft);
    padding: 0.5rem 0.75rem; font: inherit; color: var(--ink-heading); cursor: pointer; }
.oo-item:hover { background: var(--accent-soft); }
.oo-item + .oo-item { border-top: 1px solid var(--line); }

/* Each party / link slot is separated by a hairline so the form reads as distinct rows. */
.party-row + .party-row, .link-row + .link-row {
    margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line);
}

/* الملفات المرتبطة tab (client 2026-08-12) — the last cell carries صفة الربط plus the row's «×». The button sits
   beside the input, bottom-aligned with it, so it lines up with the notched field rather than the label. */
.link-row-last { display: flex; align-items: flex-end; gap: 0.4rem; }
.link-row-last > .rz-field, .link-row-last > .form-control { flex: 1; min-width: 0; }
.link-row-x { flex: none; width: 2rem; height: 2.35rem; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.link-row-x:hover { border-color: var(--danger); color: var(--danger); }
.cd-links-foot { margin-top: 1.1rem; }

/* Possible-duplicate opponent notice — green-edged, informational (not an error). */
.dup-note { margin: 0.75rem 0 0; padding: 0.6rem 0.85rem; border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent); border-radius: var(--radius);
    background: var(--surface-soft); color: var(--ink); font-size: 0.85rem; }
.dup-note ul { margin: 0.4rem 0 0; padding-inline-start: 1.1rem; }

/* Subject translate action sits under the English field. */

/* ---------- Simple attachments (مرفقات) — folder-free list ------------- */
/* The lightweight alternative to the folder explorer (used by الإستشارات): an add button over a flat row list.
   Drag-drop highlights the whole widget. Tokens only, so it follows the theme like everything else. */
.rz-attach { border: 1px dashed transparent; border-radius: var(--radius); transition: border-color .15s, background .15s; }
.rz-attach.rz-attach-over { border-color: var(--accent); background: var(--surface-soft); }
.rz-attach-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.rz-attach-bar .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.rz-attach-bar .btn svg { width: 1rem; height: 1rem; }
.rz-attach-add { position: relative; margin: 0; cursor: pointer; }
.rz-attach-hint { margin: 0; }
/* The explorer's own size hint, under its toolbar. */
.docman-hint { margin: 0.35rem 0 0; }
/* «لم يُرفع N ملفات» — shown when the server turns a file away for being over its ceiling. */
.rz-attach-note { margin: 0.4rem 0 0; font-size: 0.76rem; font-weight: 600; color: var(--danger);
    background: #fdecec; border: 1px solid #f5c6c6; border-radius: 8px; padding: 0.3rem 0.6rem; }
.rz-attach-list { display: flex; flex-direction: column; gap: 0.4rem; }
.rz-attach-empty { margin: 0; padding: 1.1rem; text-align: center; color: var(--muted);
    background: var(--surface-soft); border-radius: var(--radius); font-size: 0.88rem; }
.rz-attach-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.rz-attach-ic { display: inline-flex; color: var(--accent); }
.rz-attach-ic svg { width: 1.15rem; height: 1.15rem; }
.rz-attach-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ink-heading); text-decoration: none; font-weight: 500; }
.rz-attach-name:hover { text-decoration: underline; }
.rz-attach-meta { flex: 0 0 auto; color: var(--muted); font-size: 0.8rem; }
.rz-attach-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
    padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted);
    cursor: pointer; }
.rz-attach-btn svg { width: 0.95rem; height: 0.95rem; }
.rz-attach-btn:hover { color: var(--accent); border-color: var(--accent); }
.rz-attach-del:hover { color: var(--danger); border-color: var(--danger); }
@media (max-width: 720px) { .rz-attach-meta { display: none; } }

/* ---------- Document manager (الملفات المُرفقة) ------------------------- */
/* JS-rendered folder explorer: full-width toolbar over a [tree | main] grid. Tokens only (green/white). */
.docman-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    flex-wrap: wrap; margin-bottom: 1rem; }
.docman-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.docman-toolbar .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.docman-toolbar .btn svg { width: 1rem; height: 1rem; }
.docman-upload { position: relative; margin: 0; cursor: pointer; }

/* No side-nav (client 2026-08-15) — the explorer is one full-width column opening straight on the folders. */
.docman-body { display: block; }

/* Linked-owner switcher — replaces the side-nav's grafted roots. Hidden unless a related owner exists. */
.docman-scopes { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.docman-scope-chip { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; cursor: pointer;
    padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface-soft); color: var(--ink-heading); }
.docman-scope-chip:hover { background: var(--accent-soft); }
.docman-scope-chip.active { background: var(--accent-soft); color: var(--accent-strong);
    border-color: var(--accent); font-weight: 600; }
.docman-scope-chip svg { width: 1rem; height: 1rem; }

/* Breadcrumb */
.docman-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.9rem;
    color: var(--muted); font-size: 0.9rem; }
.docman-crumb svg { width: 0.9rem; height: 0.9rem; vertical-align: middle; }
.docman-crumb-link { display: inline-flex; align-items: center; gap: 0.3rem; border: none; background: transparent;
    color: var(--accent); cursor: pointer; font: inherit; padding: 0.15rem 0.3rem; border-radius: 6px; }
.docman-crumb-link:hover { background: var(--accent-soft); }
.docman-crumb-cur { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-heading);
    font-weight: 600; padding: 0.15rem 0.3rem; }
.docman-crumb-sep { color: var(--line); display: inline-flex; }

/* Grid of tiles — sized up 2026-08-15 (client: «make the folders a bit bigger»). */
.docman-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 0.75rem; }
.docman-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: 1.15rem 0.6rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
    text-decoration: none; color: var(--ink); text-align: center; }
.docman-tile:hover { background: var(--surface-soft); border-color: var(--line); text-decoration: none; }
.docman-tile-ic { display: inline-flex; }
.docman-tile-ic svg { width: 3.4rem; height: 3.4rem; }
/* Folder face is an image now: open-folder.png when it holds files, folder.png when empty (client 2026-08-15). */
.docman-folder-img { width: 3.9rem; height: 3.9rem; object-fit: contain; display: block; }
.docman-lic .docman-folder-img { width: 1.4rem; height: 1.4rem; }
.docman-tile-file .docman-tile-ic { color: var(--muted); }

/* File thumbnails (image / video first-frame / pdf first-page). */
.docman-thumb-box { position: relative; width: 100%; height: 94px; border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden; background: var(--surface-soft);
    display: flex; align-items: center; justify-content: center; }
.docman-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.docman-thumb-pdf { width: auto; max-width: 100%; height: 100%; object-fit: contain; background: #fff; }
.docman-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(205, 189, 159, 0.55); color: var(--on-fill);
    display: flex; align-items: center; justify-content: center; font-size: 0.7rem; pointer-events: none; }
/* مقطع صوتي (client 2026-08-12) — no frame to preview, so the tile face is a note on the accent wash. */
.docman-thumb-audio { background: var(--accent-soft); border-color: var(--accent); }
.docman-audio-ic { font-size: 1.9rem; line-height: 1; color: var(--accent-strong); }
.docman-tile-name { font-size: 0.87rem; line-height: 1.35; color: var(--ink-heading);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word; }
/* Drag & drop upload targets — highlight the folder / area a file is being dragged over. */
.docman-view.docman-drop { outline: 2px dashed var(--accent); outline-offset: -6px;
    background: var(--accent-soft); border-radius: var(--radius); }
.docman-tile-folder.docman-drop { background: var(--accent-soft); border-color: var(--accent);
    outline: 2px dashed var(--accent); outline-offset: 2px; }
.docman-lrow-folder.docman-drop { background: var(--accent-soft); outline: 2px dashed var(--accent); }
/* Dragging an existing file onto a folder = a move (client 2026-08-15). */
.docman-tile-file { -webkit-user-drag: element; }
.docman-dragging { opacity: 0.45; }
.docman-crumb-link.docman-drop { background: var(--accent-soft); outline: 2px dashed var(--accent);
    outline-offset: 1px; }

/* File-count badge — top corner of a folder tile (opposite the delete ×), hidden when the folder is empty. */
.docman-badge { position: absolute; top: 0.3rem; inset-inline-start: 0.3rem; z-index: 1;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.32rem; border-radius: 999px;
    background: var(--fill); color: var(--on-fill); font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1; }
/* z-index keeps the ×/pencil above the thumbnail box (which is positioned + later in DOM, so it would
   otherwise paint over them — the "delete button is behind the file" bug). */
.docman-del { position: absolute; z-index: 3; top: 0.3rem; inset-inline-end: 0.3rem; width: 1.4rem; height: 1.4rem;
    display: none; align-items: center; justify-content: center; border: 1px solid var(--line);
    background: var(--surface); color: var(--danger); border-radius: 6px; cursor: pointer; padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.docman-del svg { width: 0.85rem; height: 0.85rem; }
.docman-tile:hover .docman-del { display: inline-flex; }
.docman-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* Approval-status pill — top-start corner of a file tile (opposite the ×): clock (pending) / check (approved)
   / × (rejected). Always visible when the file carries a request. */
/* Pending + approved are the supplied badge PNGs (their own shape + colour); rejected is a red × dot. */
.docman-appr-img { position: absolute; z-index: 2; top: -0.2rem; inset-inline-start: 0.2rem;
    width: 1.9rem; height: 1.9rem; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)); }
.docman-appr { position: absolute; z-index: 2; top: -0.1rem; inset-inline-start: 0.3rem;
    width: 1.55rem; height: 1.55rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.docman-appr svg { width: 1.25rem; height: 1.25rem; display: block; stroke-width: 2.4; }
.docman-appr-rejected { background: var(--danger); color: #fff; }
.docman-appr-rejected svg { stroke: #fff; }
/* Inline variants next to a file name in list view. */
.docman-list .docman-appr-img { position: static; width: 1.3rem; height: 1.3rem; vertical-align: middle;
    margin-inline-start: 0.35rem; }
.docman-list .docman-appr { position: static; width: 1.1rem; height: 1.1rem; vertical-align: middle;
    margin-inline-start: 0.35rem; box-shadow: none; }
.docman-list .docman-appr svg { width: 0.75rem; height: 0.75rem; }
/* Rename button (pencil) — sits beside the delete button on a folder tile; shown on hover (note 7). */
.docman-rename { position: absolute; z-index: 3; top: 0.3rem; inset-inline-end: 1.9rem; width: 1.4rem; height: 1.4rem;
    display: none; align-items: center; justify-content: center; border: 1px solid var(--line);
    background: var(--surface); color: var(--accent-strong); border-radius: 6px; cursor: pointer; padding: 0; }
.docman-rename svg { width: 0.82rem; height: 0.82rem; }
.docman-tile:hover .docman-rename { display: inline-flex; }
.docman-rename:hover { background: var(--fill); color: var(--on-fill); border-color: var(--accent); }

/* List view */
.docman-list .docman-lic { display: inline-flex; vertical-align: middle; margin-inline-end: 0.5rem; }
.docman-list .docman-lic svg { width: 1.1rem; height: 1.1rem; }
.docman-list .docman-lrow-folder { cursor: pointer; }
.docman-list .docman-lrow-folder .docman-lic { color: var(--accent); }
.docman-list .docman-lrow-folder .docman-lic svg { fill: var(--accent-soft); }
.docman-list .docman-lic { color: var(--muted); }

.docman-status { color: var(--muted); text-align: center; padding: 2rem 1rem; margin: 0; }
.docman-icons { display: none; }

/* ---------- Case details popup (تفاصيل الدعوى) ------------------------- */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.45rem; }
.btn-icon svg { width: 1.05rem; height: 1.05rem; }
/* ===== Case details screen (/cases/{id}/details) ===== */
.cd-head-titles { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.cd-head-num { color: var(--muted); font-weight: 600; }
/* Right-side nav (first child → right edge in RTL) + middle render area (client 2026-08-26, 3rd follow-up).
   .cd-screen is a bare layout box now — no shared background/border of its own, so the strip behind the tabs is
   just the page (transparent, .cd-sidenav carries none either). Only .cd-render looks like a "card"; only the
   individual .cd-navlink pills carry their own fill — nothing wraps the whole nav list any more. */
.cd-screen { display: flex; align-items: stretch; gap: 0; }
@media (max-width: 820px) { .cd-screen { flex-direction: column; } }
/* ZERO top padding (client 2026-08-26, 4th follow-up: the 1.75rem tried here previously matched .cd-render's
   INNER content, not its outer edge — the actual ask). .cd-sidenav and .cd-render are flex siblings starting at
   the same y already; the first tab's own border-box now starts flush with .cd-render's top border line, no gap. */
.cd-sidenav { flex: 0 0 232px; position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0 0.85rem 0.85rem; }
@media (max-width: 820px) { .cd-sidenav { position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
    padding: 0.85rem; } }
/* Unselected tabs are individually RECESSED — their own darker fill + the same carved-in shadow the top nav's
   track uses (--shadow-inset) — each a self-contained "pressed in" pill, fully rounded, floating on the plain
   page with no shared rail box behind them. The active tab turns the SAME white as .cd-render, drops rounding on
   its inline-end (content-facing) corners, and bridges the sidenav's own padding with a negative margin so it
   physically reaches the content boundary — one continuous shape, not a pill sitting near a separate panel.
   transform-origin sits on that same edge so the raised scale grows away from it, never re-opening a gap. */
.cd-navlink { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: 10px;
    border: none; background: var(--line); box-shadow: var(--shadow-inset); cursor: pointer; font: inherit;
    font-weight: 600; font-size: 0.95rem; color: var(--ink); text-align: start; position: relative; z-index: 1;
    transform-origin: left center;
    transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.1, 0.5, 1), margin-inline-end 0.25s ease, padding-inline-end 0.25s ease; }
.cd-navlink:hover { background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
/* A plain --shadow-raised spreads its blur equally in every direction, which would cast a faint line back onto
   .cd-render right along the fused edge — the very seam this whole rule exists to erase. Biased instead: each
   layer's offset ≥ its own blur radius, physical +x (rightward, away from content), so the blur's reach never
   crosses back past the tab's own left edge. Desktop only — .active on mobile just pops in place (see below). */
@media (min-width: 821px) {
    .cd-navlink.active, .cd-navlink.active:hover { background: var(--surface); color: var(--on-fill);
        border-start-end-radius: 0; border-end-end-radius: 0;
        margin-inline-end: -0.85rem; padding-inline-end: calc(0.7rem + 0.85rem);
        box-shadow: 2px 1px 2px rgba(var(--shadow-rgb), 0.16), 8px 3px 8px rgba(var(--shadow-rgb), 0.12);
        transform: scale(1.03); z-index: 2; }
}
@media (max-width: 820px) {
    .cd-navlink.active, .cd-navlink.active:hover { background: var(--surface); color: var(--on-fill);
        box-shadow: var(--shadow-raised); transform: scale(1.03); z-index: 2; }
}
.cd-navlink-ic { display: inline-flex; flex: 0 0 auto; }
.cd-navlink-ic svg { width: 18px; height: 18px; }
/* Count badge at the end of a nav link (الجلسات 4 …). Hidden when the count is 0. */
.cd-nav-count { margin-inline-start: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 0.4rem;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-strong); font-size: 0.76rem; font-weight: 700; }
.cd-navlink.active .cd-nav-count { background: rgba(26, 49, 87, 0.14); color: var(--on-fill); }
/* The persistent Document Manager pane also renders as the المرفقات section under the تفاصيل view — give it a
   little separation from the details content above it. */
.cd-render > [data-cd-files] { margin-top: 1.25rem; }
/* .cd-render is now the only bordered "card" in this screen — bordered on 3 sides, with NO border on the
   inline-start (right, nav-facing) side so the active tab's fuse has nothing to butt against. */
.cd-render { flex: 1 1 auto; min-width: 0; background: var(--surface);
    border: 1px solid var(--line); border-inline-start: none;
    border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); padding: 1.75rem 2rem; }
@media (max-width: 820px) { .cd-render { border-inline-start: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius); } }
/* Content-area entrance (client 2026-08-26) — a small fade + upward slide, replayed on every tab switch by
   removing/re-adding this class around a forced reflow (initCaseDetailsPage's setTab). Kept OFF .cd-render's own
   rule so it never fires on the persistent DocumentManager/CaseLinksEditor panes without a real tab change. */
@keyframes cd-render-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cd-render-anim { animation: cd-render-in 0.28s ease; }
/* The details view used to sit in a 900px reading column, which left a third of a wide screen empty while the
   fields themselves crowded together (client 2026-08-16: «use this empty space, why is everything crumbled»).
   It now fills the pane, and the field grid below reflows into as many columns as the width affords. */
.cd-details { max-width: none; }
.cd-details-wide { max-width: none; }
/* العملاء السنويون — ten columns; keep the count cells hairline-thin so the row fits without a side-swipe. */
.aw-clients-table { font-size: 0.85rem; }
.aw-clients-table th, .aw-clients-table td { padding-inline: 0.45rem; }
.aw-clients-table .ltr-cell { white-space: nowrap; width: 1%; }
.aw-clients-table .actions { white-space: nowrap; width: 1%; }
/* Details top row: بيانات/تفاصيل on the right (wide), المحامون المكلّفون on the left (client 2026-07-23). */
.cd-top-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 1rem 1.25rem; align-items: start; margin-bottom: 1.1rem; }
.cd-top-row > .cd-block { margin-bottom: 0; }
@media (max-width: 820px) { .cd-top-row { grid-template-columns: 1fr; } }
/* Sessions view: brief on top, then full-width cards stacked (new-session card first). */
/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   THE CARD SYSTEM (client 2026-08-06) — one definition, every card list in the app.
   Card lists used to float white-on-near-white (--surface #fff over --bg #faf8f3), so the gap between cards
   read as nothing and a list looked like one undifferentiated slab. Three parts fix it, and every family
   below opts in by name — add a new family to the :is() lists, never re-declare the look.

     1. TRAY   — the list sits in a recessed warm-grey well
     2. LIFT   — each card is white and raised off that well
     3. HEAD   — each card's header is a navy #1a3157 band with white content

   The tray grey is HARDCODED, not a token: it has to stay a step darker than --surface-soft so a card sitting
   in the tray still reads as lifted out of it, and it must not drift with whatever surface-soft is used for
   elsewhere. Cool grey since 2026-08-14 (was the warm #f0ede6) — it tracks the palette by hand, on purpose.
   ⚠ The navy head departs from CLAUDE.md / docs/DESIGN_SYSTEM.md, which say --accent navy is text/icons/
   borders and "never a background". Client asked for it directly (2026-08-06); that rule needs rewriting
   rather than being quietly contradicted here.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --card-head: #1a3157; --card-tray: #e6e9ee; }

/* ── 1. TRAY ─────────────────────────────────────────────────────────────────────────────────────────── */
.cd-sessions-grid,        /* الجلسات · تحديثات الدعوى/الملف · الأعمال القانونية (they share this container) */
.cd-tasks-grid,           /* تكاليف المحامي */
.appr-list,               /* طلبات الموافقة */
.fee-tray {               /* أتعاب المحاماة */
    display: flex; flex-direction: column; gap: 1rem;
    background: var(--card-tray); border: 1px solid var(--line); border-radius: 14px; padding: 1rem;
}
@media (max-width: 620px) {
    .cd-sessions-grid, .cd-tasks-grid, .appr-list, .fee-tray { padding: 0.6rem; border-radius: 12px; }
}

/* ── 2. LIFT — white cards raised off the tray. Dashed «إضافة» affordances are excluded: they are not
      records, and they keep their own hover shadow. ─────────────────────────────────────────────────── */
.cd-sessions-grid .cd-scard { margin-bottom: 0; width: 100%; }
.cd-sessions-grid > .cd-scard:not(.cd-scard-new),
.cd-tasks-grid > .cd-task-card,
.appr-list > .appr-card,
.fee-tray > .table-wrap {
    box-shadow: 0 1px 2px rgba(34, 63, 115, 0.06), 0 1px 3px rgba(34, 63, 115, 0.05);
}

/* ── 3. HEAD — the navy band ─────────────────────────────────────────────────────────────────────────
   Each card family declares its own horizontal padding as --cardpad; the band bleeds out by exactly that
   much to reach the card's edges. Only .cd-scard-top was already a real band — the others were plain flex
   rows sitting inside the card's padding, so they get the geometry here too. */
.cd-lacard { --cardpad: 1.15rem; }
.appr-card { --cardpad: 1rem; }
/* The band sits flush at the card's top, so the card's own top padding has to go. These need 0,2,0: each
   family's `padding:` SHORTHAND is declared later in this file and would otherwise reset padding-top. */
.cd-scard.cd-lacard { padding-top: 0; }
.appr-list > .appr-card { padding-top: 0; }

/* Colour — every family. `.cd-scard-top` was already a band, so it only needs the paint. */
.cd-scard > .cd-scard-top,
.cd-lacard > .cd-lacard-head,
.appr-card > .appr-card-head {
    background: var(--card-head); border-bottom-color: var(--card-head); color: #ffffff;
}
/* Geometry — only the families whose header was a plain flex row inside the card's padding. */
.cd-lacard > .cd-lacard-head,
.appr-card > .appr-card-head {
    margin: 0 calc(var(--cardpad, 1rem) * -1) 0.8rem; padding: 0.6rem var(--cardpad, 1rem);
    border-radius: 12px 12px 0 0;
}

/* Everything sitting ON a navy band. Grouped once so a new family only joins the list above.
   :is() takes its most specific argument, so these land at 0,3,0 and beat the families' own colours. */
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head) {
    /* Icons draw with stroke:currentColor — without this the glyphs vanish into the navy. */
    --ic-on-head: #ffffff;
}
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    :is(.cd-scard-type, .cd-lacard-type, .appr-file, .cd-scard-untyped) { color: #ffffff; }
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    :is(.cd-scard-ord, .appr-meta) { color: rgba(255, 255, 255, 0.72); }
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head) svg {
    color: #ffffff; stroke: #ffffff;
}
/* Buttons become outline-on-navy rather than white blocks punched into the band. */
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    :is(.cd-icon-btn, .cd-scard-edit, .cd-lacard-comment, .appr-open) {
    background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #ffffff;
}
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    :is(.cd-icon-btn, .cd-scard-edit, .cd-lacard-comment, .appr-open):hover {
    background: #ffffff; border-color: #ffffff; color: var(--card-head);
}
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    :is(.cd-icon-btn, .cd-scard-edit, .cd-lacard-comment, .appr-open):hover svg {
    color: var(--card-head); stroke: var(--card-head);
}
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    .cd-icon-danger:hover { background: transparent; border-color: #ffb3a7; color: #ffb3a7; }
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    .cd-icon-danger:hover svg { color: #ffb3a7; stroke: #ffb3a7; }
/* Sand-filled pills (حالة الإجراء · العميل السنوي) read fine as accents on navy — but the sand fill and the
   navy ground are too close in the pale range, so lift them to a translucent white chip. */
:is(.cd-scard > .cd-scard-top, .cd-lacard > .cd-lacard-head, .appr-card > .appr-card-head)
    :is(.cd-la-status, .aw-card-client, .cd-scard-degree) {
    background: rgba(255, 255, 255, 0.16); color: #ffffff;
}
/* The action cluster rides the band's top outer corner, compact, on every family. */
:is(.cd-scard-actions, .cd-lacard-actions) { align-self: flex-start; }
.cd-lacard > .cd-lacard-head > .cd-lacard-actions { margin-top: -0.1rem; margin-inline-end: -0.45rem; }

/* Action buttons on a card band. These were sized for a quiet PAIR in the top outer corner; a session card now
   carries FIVE (تفويض · واتساب · طباعة · تعديل · حذف) and 1.45rem/0.82rem was unhittable (client 2026-09-19,
   twice). Sized as real targets now. These selectors are what actually decide the size — they outrank the
   `.cd-scard-actions .cd-icon-btn` base below — so they are the ones to change.
   `.cd-scard-actions` is also rendered outside the trays, so the sizing stays scoped to them. */
:is(.cd-sessions-grid, .cd-tasks-grid) .cd-scard-actions {
    align-self: flex-start; margin-top: -0.15rem; margin-inline-end: -0.5rem; gap: 0.3rem;
}
:is(.cd-sessions-grid, .cd-tasks-grid, .appr-list) :is(.cd-scard-edit, .cd-lacard-comment) {
    height: 2rem; padding: 0 0.7rem; font-size: 0.8rem; line-height: 1; border-radius: 7px;
    display: inline-flex; align-items: center;
}
:is(.cd-sessions-grid, .cd-tasks-grid, .appr-list) :is(.cd-scard-actions, .cd-lacard-actions) .cd-icon-btn {
    width: 2rem; height: 2rem; border-radius: 7px;
}
:is(.cd-sessions-grid, .cd-tasks-grid, .appr-list) :is(.cd-scard-actions, .cd-lacard-actions) .cd-icon-btn svg {
    width: 1.1rem; height: 1.1rem;
}
:is(.cd-scard-actions, .cd-lacard-actions) > * { transition: border-color 0.15s, color 0.15s, background 0.15s; }
/* No resting fade on navy — it was half of what made the trash icon read as an empty box. */
:is(.cd-scard-actions, .cd-lacard-actions) > * { opacity: 1; }
/* «تفويض محامي» is also a .cd-scard-edit but carries its own dark-navy colour — invisible on the band. */
.cd-scard > .cd-scard-top .cd-scard-deleg { color: #ffffff; }

/* The «جلسات سابقة» card's edge stripe (border-inline-start = the RIGHT edge under RTL). It was whited out on
   2026-08-06 because a gold stripe under a NAVY header belonged to neither; now that the header is gold too
   (client 2026-08-13) the stripe reads as the same idea continued down the card, so it goes back to gold. */
.cd-sessions-grid .cd-scard.cd-scard-prev { border-inline-start-color: #8a6512; }

/* The running-position pill («2») rides over to join the action buttons instead of floating mid-header,
   and shrinks to match them. */
.cd-sessions-grid .cd-scard > .cd-scard-top > .cd-scard-seq {
    min-width: 1.7rem; height: 1.7rem; font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.16); color: #ffffff;
}
.cd-sessions-grid .cd-scard > .cd-scard-top > .cd-scard-actions { margin-inline-start: 0.4rem; }

/* ===== The two «إضافة» buttons: one compact row of their own =====
   They were full-width dashed slabs stacked above the records, reading heavier than the cards themselves.
   Now a small pair pinned to the row's outer (physical LEFT under RTL) edge. */
.cd-sessions-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.cd-sessions-grid .cd-sessions-actions .cd-scard-new {
    width: auto; padding: 0.34rem 0.8rem; font-size: 0.78rem; border-radius: 8px; border-width: 1px; gap: 0.35rem;
}
.cd-sessions-actions .cd-scard-plus { font-size: 0.95rem; }
@media (max-width: 520px) {
    .cd-sessions-actions { justify-content: stretch; }
    .cd-sessions-grid .cd-sessions-actions .cd-scard-new { flex: 1 1 auto; justify-content: center; }
}

/* Sessions column */
.cd-sessions-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    font-weight: 700; color: var(--ink-heading); font-size: 1rem; margin-bottom: 0.85rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.cd-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem;
    padding: 0 0.4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong);
    font-size: 0.78rem; font-weight: 700; }
.cd-sessions-empty { padding: 0.4rem 0; }

/* Session cards */
.cd-scard { display: block; width: 100%; text-align: start; background: var(--surface); border: 1px solid var(--border-strong, #d3ddd0);
    border-radius: 12px; padding: 0 0.95rem 0.9rem; margin-bottom: 0.75rem; overflow: hidden; }
.cd-scard-final { border-inline-start: 3px solid #7c6bd6; }
.cd-scard-new { display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer;
    padding: 0.9rem 0.95rem; border-style: dashed; border-color: var(--accent); color: var(--accent-strong);
    font: inherit; font-weight: 600; background: var(--accent-soft); transition: background 0.15s, box-shadow 0.15s; }
.cd-scard-new:hover { background: var(--surface); box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.08); }
.cd-scard-plus { font-size: 1.2rem; line-height: 1; }
.cd-scard-top { display: flex; align-items: center; gap: 0.5rem; margin: 0 -0.95rem 0.7rem; padding: 0.6rem 0.95rem;
    background: var(--surface-soft); border-bottom: 1px solid var(--border-strong, #d3ddd0); border-radius: 12px 12px 0 0; }
.cd-scard-type { font-weight: 700; color: var(--ink-heading); }
/* Model B: a follow-up sitting with no type yet + its درجة المحكمة chip (note 13). */
.cd-scard-untyped { font-weight: 700; color: #c0392b; }
.cd-scard-degree { font-size: 0.72rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-strong);
    border-radius: 999px; padding: 0.05rem 0.5rem; margin-inline-start: 0.35rem; }
.cd-scard-tag { font-size: 0.68rem; background: #E7E4F7; color: #52469B; border-radius: 999px; padding: 0.05rem 0.5rem; }
.cd-scard-tag-first { background: var(--accent-soft); color: var(--accent-strong); }
.cd-scard-first { border-inline-start: 3px solid var(--accent); }

/* «جلسات سابقة» (client 2026-07-28) — history the firm inherited, not one of its own sittings. Deliberately a
   different colour from every session card (warm sand vs the green/navy family) so it can't be mistaken for one.
   Hardcoded, not tokens: the neutral tokens carry a green cast (see GOTCHAS). */
.cd-scard-prev {
    border-color: #e3d5b8; border-inline-start: 3px solid #c9a227; background: #fdfaf3;
    /* Its header band is GOLD, not the shared navy (client 2026-08-13) — this card is history the firm
       inherited, so it should read as a different kind of thing at a glance. Overriding the one variable the
       card system paints with keeps everything else (the white text, the outline buttons and their hover,
       which flips to `--card-head`) correct without duplicating a single rule. */
    --card-head: #8a6512;
}
.cd-scard-tag-prev { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.cd-scard-new-prev { border-color: #c9a227; color: #7a5c12; background: #f8f0dd; }
.cd-scard-new-prev:hover { background: var(--surface); box-shadow: 0 4px 12px rgba(201, 162, 39, 0.14); }
/* تعديل + حذف grouped at the end of the card header. */
.cd-scard-actions { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.cd-scard-edit { border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
    padding: 0.15rem 0.8rem; font: inherit; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.cd-scard-edit:hover { border-color: var(--accent); color: var(--accent-strong); }
/* The card's action row: five controls now (تفويض · واتساب · طباعة · تعديل · حذف), so they are sized as
   real touch targets rather than the 1.75rem they shrank to when there were only two (client 2026-09-19: «الأزرار
   صغيره جدا»). The text button matches their height so the row reads as one strip. */
.cd-scard-actions .cd-icon-btn { width: 2.3rem; height: 2.3rem; }
.cd-scard-actions .cd-icon-btn svg { width: 1.2rem; height: 1.2rem; }
.cd-scard-edit { min-height: 2.3rem; display: inline-flex; align-items: center; }
/* Icon-led detail rows */
.cd-ic { width: 15px; height: 15px; flex: none; color: var(--accent-strong); margin-top: 0.12rem; }
/* `Icons.*` (the Razor helper) emits a BARE <svg viewBox="0 0 24 24"> — no width, no height, no class — so it
   only has a size when some rule gives it one. The JS-built cards tag theirs `.cd-ic` and are fine; a Razor card
   that drops an icon straight into one of these rows had nothing sizing it, and the SVG grew to fill the row.
   That is what blew the calendar up on الأعمال القانونية (client 2026-08-14). Sizing the ELEMENT, not just the
   class, means the next Razor card to reuse these rows can't hit it either. */
.cd-srow > svg, .cd-lacard-type > svg, .cd-sblock-h > svg {
    width: 15px; height: 15px; flex: none; color: var(--accent-strong);
}
.cd-srow > svg { margin-top: 0.12rem; }
.cd-srow { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.86rem; color: var(--ink);
    line-height: 1.55; margin-bottom: 0.2rem; }
.cd-srow-lbl { color: var(--muted); font-weight: 600; }
.cd-srow-val { overflow-wrap: anywhere; }
.cd-srow-muted { color: var(--muted); }
/* Titled block (decision / next sitting / requests) */
.cd-sblock { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.cd-sblock-h { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.84rem;
    color: var(--ink-heading); margin-bottom: 0.35rem; }
.cd-sblock-h .cd-ic { margin-top: 0; }
.cd-sblock-p { font-size: 0.86rem; color: var(--ink); line-height: 1.65; margin: 0 0 0.25rem;
    white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-sblock-p.cd-ltr { color: var(--muted); font-size: 0.82rem; }
.cd-sreq .cd-sblock-p { color: var(--accent-strong); }
/* تفويض حضور الجلسة (client 2026-07-28) — the delegated lawyer + their note, called out on the card. */
.cd-sdeleg { background: var(--accent-soft); border-radius: 10px; padding: 0.5rem 0.7rem; }
.cd-sdeleg .cd-sblock-h { color: var(--accent-strong); }
.cd-scard-deleg { color: var(--accent-strong); }
.cd-scard-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; padding-top: 0.6rem;
    border-top: 1px solid var(--line); }
.cd-scard-flag { font-size: 0.72rem; background: var(--surface-soft); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.1rem 0.55rem; color: var(--ink); }
/* created-by / last-edited-by footer on a session card. */
.cd-scard-meta { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px dashed var(--line); }
.cd-scard-metaline { color: var(--muted); font-size: 0.76rem; line-height: 1.7; }
/* "اخر تحديث …" line at the top of تفاصيل الدعوى. */
.cd-lastupdate { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.9rem; }

/* Attachments list (right column) */
.cd-files { display: flex; flex-direction: column; gap: 0.4rem; }
.cd-file { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.7rem;
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.7rem; }
.cd-file-name { font-size: 0.88rem; color: var(--ink-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-file-size { font-size: 0.75rem; color: var(--muted); }
.cd-file-act { font-size: 0.8rem; font-weight: 600; color: var(--accent-strong); text-decoration: none; white-space: nowrap; }
.cd-file-act:hover { text-decoration: underline; }
.cd-file-dl { color: var(--muted); }
.cd-status { color: var(--muted); text-align: center; padding: 2rem 1rem; margin: 0; }
/* Typography stepped up across the whole details view (client 2026-08-16) — it is the screen a lawyer reads a
   file from, so it gets its own scale and its own breathing room rather than the app's dense default. */
.cd-block { margin-bottom: 1.6rem; }
.cd-block:last-child { margin-bottom: 0; }
.cd-h { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--ink-heading);
    font-size: 1.08rem; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.cd-sparkle { width: 1rem; height: 1rem; color: var(--accent); flex: 0 0 auto; }
.cd-h-action { margin-inline-start: auto; font-weight: 400; font-size: 0.85rem; }
.cd-muted { color: var(--muted); }
.cd-para { margin: 0 0 0.45rem; color: var(--ink); font-size: 1.02rem; line-height: 1.75; white-space: pre-line; }
.cd-para:last-child { margin-bottom: 0; }
.cd-ltr { text-align: left; }

/* AI summary — subtly tinted so it reads as the highlight at the top. */
.cd-summary .cd-summary-body { background: var(--accent-soft); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 0.8rem 1rem; }

/* auto-fill, so the field grid takes as many columns as the pane can hold instead of a fixed three squeezed into
   a 900px column — three on a laptop, four or five on a wide screen, two on a phone. */
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1.1rem 1.75rem; }
@media (max-width: 620px) { .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1rem; } }
.cd-field { display: flex; flex-direction: column; gap: 0.2rem; }
.cd-flabel { font-size: 0.85rem; color: var(--muted); }
.cd-fvalue { color: var(--ink-heading); font-weight: 600; font-size: 1.05rem; line-height: 1.45; }

.cd-updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cd-updates li { display: flex; gap: 0.5rem; align-items: flex-start; }
.cd-up-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--fill); margin-top: 0.4rem; flex: 0 0 auto; }
.cd-up-text { color: var(--ink-heading); font-weight: 600; }
.cd-up-meta { color: var(--muted); font-size: 0.8rem; }
/* السجل: a session change is tappable → jumps to that session card. */
.cd-up-tap { cursor: pointer; border-radius: 8px; margin: -0.2rem -0.4rem; padding: 0.2rem 0.4rem; transition: background-color 0.15s; }
.cd-up-tap:hover, .cd-up-tap:focus-visible { background: var(--accent-soft); outline: none; }
.cd-up-go { color: var(--accent-strong); font-weight: 600; font-size: 0.8rem; margin-inline-start: 0.35rem; white-space: nowrap; }

/* سير العمل timeline — a connected vertical line of dots; session nodes carry a «عرض» button. */
.cd-wf { list-style: none; margin: 0; padding: 0; }
.cd-wf-item {
    position: relative; display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0 0.4rem 1.4rem 0; /* bottom gap for the connecting line */
}
.cd-wf-item:last-child { padding-bottom: 0.2rem; }
.cd-wf-dot {
    position: relative; z-index: 1; flex: 0 0 auto; width: 0.75rem; height: 0.75rem; margin-top: 0.2rem;
    border-radius: 50%; background: var(--fill); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Edit events sit on a hollow/amber dot so they read differently from additions. */
.cd-wf-dot-edit { background: #E9A23B; box-shadow: 0 0 0 3px #F7E6C9; }
/* Relative-day chip shown next to any date ([اليوم] / [قبل 3 أيام] / [بعد يوم]) — blue, from RelativeDate. */
.rel-day { color: #2563EB; font-weight: 600; font-size: 0.82em; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .rel-day { color: #60A5FA; } }
/* Connecting line between dots (drawn from each dot down to the next). */
.cd-wf-item:not(:last-child) .cd-wf-dot::after {
    content: ""; position: absolute; top: 1rem; right: calc(50% - 1px);
    width: 2px; height: calc(100% + 1.4rem); background: var(--line);
}
.cd-wf-c { flex: 1 1 auto; min-width: 0; }
.cd-wf-title { color: var(--ink-heading); font-weight: 700; font-size: 0.95rem; }
.cd-wf-meta { color: var(--accent-strong); font-size: 0.82rem; margin-top: 0.15rem; }
.cd-wf-sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.cd-wf-btn { flex: 0 0 auto; margin-top: 0.1rem; }

/* Flash-highlight a session card jumped to from سير العمل. */
.cd-scard-flash { animation: cd-flash 2.2s ease; }
@keyframes cd-flash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    12% { box-shadow: 0 0 0 3px var(--accent); }
    60% { box-shadow: 0 0 0 3px var(--accent-ring); }
}

.cd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cd-chip { display: inline-flex; align-items: center; background: var(--surface-soft); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; color: var(--ink-heading); }
.cd-chip-lead { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.cd-chip-opp { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); font-weight: 600; }  /* الخصوم — red */
/* «كُلِّف …» — تاريخ التكليف riding inside the lawyer chip (client 2026-08-13). */
.cd-chip-date { font-style: normal; font-size: 0.72rem; font-weight: 500; color: var(--muted);
    margin-inline-start: 0.4rem; padding-inline-start: 0.4rem; border-inline-start: 1px solid var(--line); }
.cd-chip-lead .cd-chip-date { color: var(--accent-strong); border-inline-start-color: var(--accent); }
.cd-sub { font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0.3rem; }
.cd-list { margin: 0; padding-inline-start: 1.1rem; color: var(--ink); }
.cd-list li { margin-bottom: 0.25rem; }
/* §2.5 linked files — a نوع الملف chip + a clickable title (deep-links to the file) */
.cd-links { list-style: none; padding-inline-start: 0; }
.cd-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; margin-bottom: 0.4rem; }
.cd-link-type { flex: none; font-size: 0.72rem; font-weight: 700; padding: 0.08rem 0.5rem; border-radius: 999px;
    background: var(--surface-soft); color: var(--accent-strong); }
.cd-link-a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--accent-strong); text-decoration: none; }
.cd-link-a:hover { text-decoration: underline; }
.cd-link-a svg { width: 0.85rem; height: 0.85rem; }
.cd-link-rel { color: var(--ink); }

/* ---------- Add/edit-session modal (إضافة/تعديل جلسة) ------------------- */
/* Wider two-column modal (قرار هذه الجلسة | الجلسة القادمة), then full-width toggle cards. */
.session-panel { max-width: 1280px; }
.session-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
/* Since 2026-07-28 the modal carries ONE «الجلسة» card, so the grid is a single full-width column. */
.session-grid-single { grid-template-columns: 1fr; }
.session-card { padding: 1.15rem; }
@media (max-width: 820px) { .session-grid { grid-template-columns: 1fr; } }

/* Body heading + نوع-gate bar */
.session-heading { font-family: var(--font-app-head); font-size: 1.3rem; font-weight: 800;
    color: var(--ink-heading); margin: 0 0 1.1rem; }
.session-typebar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.session-type-field { flex: 0 1 380px; min-width: 240px; }
/* أول جلسة is a نعم/لا radio pair since the 2026-07-27 rework (was a single checkbox, .session-first). */
.session-first-field { flex: none; }
.session-first-field .consult-radios { margin-top: 0.2rem; }
.session-first { flex: none; background: var(--accent-soft); border: 1px solid var(--line);
    border-radius: 8px; padding: 0.45rem 0.85rem; }
.session-fields { margin-top: 1.1rem; }
/* Hint shown in the قرار card while it's gated (before a نوع الجلسة is chosen). */
.session-gated-hint { color: var(--muted); font-size: 0.88rem; margin: 0.25rem 0 0; }
/* «نوع الجلسة لم يُحدَّد بعد» — Model B follow-up edited before its type is set (modal + global list). */
.session-type-unset, .session-untyped { color: #c0392b; font-size: 0.82rem; font-weight: 600; margin: 0.3rem 0 0; }
.session-untyped { display: inline-block; }
/* #11: hint under «قرار هذه الجلسة» while it's locked until the sitting's own day. */
.session-decision-lock { color: var(--muted); font-size: 0.8rem; margin: 0.3rem 0 0; }
.session-form textarea:disabled, .session-form .btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Left column stacks الجلسة القادمة + the two toggle cards */
.session-col-left { display: flex; flex-direction: column; gap: 1rem; }

/* Toggle cards (رابط حضور الجلسة · تذكير): a header row with a switch, then a revealed body. */
.session-toggle-card { padding: 1.15rem; }
.session-toggle-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    cursor: pointer; margin: 0; }
.session-toggle-body { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* iOS-style switch built on a hidden checkbox. */
.rz-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.rz-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rz-switch-track { position: relative; width: 40px; height: 22px; border-radius: 999px;
    background: var(--surface-soft); border: 1px solid var(--line); transition: background 0.15s, border-color 0.15s; flex: none; }
/* The knob rests on the track's INLINE-START edge and slides to the far edge when checked. `inset-inline-*` is
   direction-aware but `translateX` is NOT: anchoring at inline-END (as this once did) put the knob on the LEFT
   under RTL, and the negative translate then pushed it straight out of the pill. Anchor at inline-start (right,
   in the app's RTL) and slide by -18px; the [dir="ltr"] override mirrors it should a page ever render LTR.
   18px = the 38px inner width minus the 16px knob and its 2px insets. */
.rz-switch-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.15s; }
.rz-switch input:checked + .rz-switch-track { background: var(--fill); border-color: var(--accent); }
.rz-switch input:checked + .rz-switch-track::after { transform: translateX(-18px); }
[dir="ltr"] .rz-switch input:checked + .rz-switch-track::after { transform: translateX(18px); }
.rz-switch-label { font-size: 0.82rem; color: var(--muted); }

/* Inline checkbox + label (الجلسة النهائية · notification channels). */
.rz-check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; color: var(--ink); }
.rz-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

/* «إضافة إشعار» row inside a toggle body. */
.session-notify { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
.session-notify-title { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.6rem; }
.session-notify-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.session-notify-user { min-width: 220px; flex: 1 1 220px; }

/* "نهائية" tag on the sessions lists. */
.st-final { background: #E7E4F7; color: #52469B; margin-inline-start: 0.35rem; }

/* ======================= Dashboard (لوحة التحكم) ======================= */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1.25rem; }
/* الترحيب — the user's own picture beside the greeting. It lives INSIDE the top row (see .dash-welcome), is
   SQUARE rather than round, and is deliberately large (client 2026-08-16: «I want to see the img clearly») —
   this is the one place in the app that shows a face at portrait size, and it sets the row's height. */
.rz-ava.dash-hello-ava { width: 108px; height: 108px; border-radius: 16px; font-size: 2.6rem; --rz-ring-w: 3px;
    box-shadow: 0 0 0 var(--rz-ring-w) var(--rz-ring, var(--line)), 0 2px 10px rgba(var(--shadow-rgb), 0.18); }
.dash-hello-name { display: block; font-size: 1.15rem; font-weight: 700; color: var(--ink-heading); line-height: 1.35; }
.dash-hello-sub { display: block; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 620px) {
    .rz-ava.dash-hello-ava { width: 76px; height: 76px; border-radius: 14px; font-size: 1.9rem; }
    .dash-hello-name { font-size: 1rem; }
    .dash-hello-sub { font-size: 0.78rem; }
}

.dash-quick { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dash-quick .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.dash-quick .btn svg { width: 1rem; height: 1rem; }

/* KPI tiles */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 0.15rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 1.1rem 1.2rem; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.kpi:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.08); transform: translateY(-2px); }
.kpi-ico { position: absolute; inset-inline-end: 1rem; top: 1rem; color: var(--accent); opacity: 0.85; }
.kpi-ico svg { width: 1.35rem; height: 1.35rem; }
.kpi-value { font-family: var(--font-app-head); font-size: 2rem; font-weight: 800;
    color: var(--ink-heading); line-height: 1.1; }
.kpi-label { font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.kpi-sub { font-size: 0.78rem; color: var(--accent-strong); }
/* المهام والطلبات tile (client 2026-08-02): two numbers side by side — «N طلب | N مهمة» — instead of one. The
   parts sit on a baseline so the big serif figures line up with their small labels. */
/* Its corner indicator (client 2026-08-03), in the slot .kpi-ico normally occupies: a red count while anything is
   open, an «all clear» green disc + white check when nothing is. */
.kpi-flag { position: absolute; inset-inline-end: 1rem; top: 1rem;
    min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; line-height: 1; color: #fff; }
.kpi-flag-alert { background: var(--danger); }
.kpi-flag-ok { color: var(--on-fill); }
.kpi-flag-ok { background: var(--fill); padding: 0; }
.kpi-flag-ok svg { width: 0.8rem; height: 0.8rem; display: block; }
.kpi-split { display: flex; align-items: baseline; gap: 0.7rem; }
.kpi-split-part { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.kpi-split-l { font-size: 0.8rem; color: var(--ink); font-weight: 600; }
.kpi-split-sep { align-self: stretch; width: 1px; background: var(--line); margin-block: 0.25rem; }

/* Focus tiles — «what needs attention»: today/tomorrow sessions + available services/consultations.
   Each tile carries its own soft accent (--ft / --ft-soft) for a calm, colour-coded read. */
.focus-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.focus-tile { --ft: var(--accent); --ft-soft: var(--accent-soft);
    display: flex; align-items: center; gap: 0.85rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 0.95rem 1.1rem; text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.focus-tile:hover { border-color: var(--ft); transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ft) 18%, transparent); }
.focus-ico { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.7rem; height: 2.7rem; border-radius: 11px; background: var(--ft-soft); color: var(--ft); }
.focus-ico svg { width: 1.4rem; height: 1.4rem; }
.focus-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.focus-value { font-family: var(--font-app-head); font-size: 1.85rem;
    font-weight: 800; line-height: 1; color: var(--ft); }
.focus-label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.ft-today    { --ft: #223f73; --ft-soft: var(--accent-soft); }
.ft-tomorrow { --ft: #b7791f; --ft-soft: #faf3e0; }
.ft-services { --ft: #2f6f83; --ft-soft: #e4eff2; }
.ft-consult  { --ft: #7a5aa8; --ft-soft: #efeaf7; }
.ft-upcoming { --ft: #2f6f83; --ft-soft: #e4eff2; }
.focus-tile[data-focus-tip] { cursor: pointer; }
.focus-tile.is-empty { opacity: 0.7; }
.focus-tile.is-empty:hover { border-color: var(--line); transform: none; box-shadow: none; }
@media (max-width: 900px) { .focus-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .focus-row { grid-template-columns: 1fr; } }

/* Dashboard top row (client 2026-08-16) — the welcome card, two standalone KPIs, and the three الجلسات tiles
   inside one framed group. Four columns on one line: the greeting card is widest (it carries a portrait), the two
   KPIs are equal, and the session group was cut from 3fr to 2.4fr precisely so the whole row still fits without
   wrapping. `align-items: stretch` + `height:100%` on the group is what keeps every card the SAME height —
   the tallest (the portrait) sets it. */
.dash-top { display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 2.4fr);
    gap: 1rem; align-items: stretch; margin-bottom: 1.25rem; }
.dash-top > .kpi { justify-content: center; }

/* الترحيب — a portrait + the greeting, sitting in the row rather than above it (client 2026-08-16: «make it much
   bigger, I want to see the img clearly»). Not a link: nothing to open, so it doesn't take the .kpi hover lift. */
.kpi.dash-welcome { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.1rem; }
.kpi.dash-welcome:hover { border-color: var(--line); box-shadow: none; transform: none; }
.dash-hello-txt { min-width: 0; }
.sess-group { display: flex; flex-direction: column; gap: 0.6rem; height: 100%;
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.8rem; }
.sess-group-h { display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 700; color: var(--muted); letter-spacing: 0.01em; }
.sess-group-ic { display: inline-flex; color: var(--accent); }
.sess-group-ic svg { width: 1rem; height: 1rem; }
.sess-group-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; flex: 1 1 auto; }
.sess-group-tiles .focus-tile { height: 100%; padding: 0.6rem 0.7rem; gap: 0.5rem; }
.sess-group-tiles .focus-ico { width: 2rem; height: 2rem; border-radius: 10px; }
.sess-group-tiles .focus-ico svg { width: 1.05rem; height: 1.05rem; }
.sess-group-tiles .focus-value { font-size: 1.45rem; }
.sess-group-tiles .focus-label { font-size: 0.76rem; }
@media (max-width: 1280px) { .dash-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-welcome, .sess-group { grid-column: 1 / -1; } }
@media (max-width: 620px) { .dash-top { grid-template-columns: 1fr; }
    .sess-group-tiles { grid-template-columns: 1fr; } }

/* Focus-tile tap card — a body-level floating panel (initFocusTips) listing the records behind a tile,
   each with «عرض». Positioned via getBoundingClientRect so it escapes any ancestor clipping. */
.focus-tip { position: fixed; z-index: 1200; min-width: 258px; max-width: 360px;
    max-height: min(70vh, 520px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(31, 45, 31, 0.16); padding: 0.75rem;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s; }
.focus-tip.show { opacity: 1; visibility: visible; pointer-events: auto; }
.focus-tip-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem;
    font-weight: 700; font-size: 0.9rem; color: var(--ink-heading); }
.focus-tip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem;
    height: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--accent-soft);
    color: var(--accent-strong); font-size: 0.72rem; font-weight: 700; }
.focus-tip-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ft-item { border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.65rem;
    background: var(--surface-soft); }
.ft-item-title { font-weight: 700; font-size: 0.85rem; color: var(--ink-heading); margin-bottom: 0.35rem; }
.ft-rows { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.12rem 0.6rem; }
.ft-row { display: contents; }
.ft-rows dt { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.ft-rows dd { margin: 0; color: var(--ink); font-size: 0.8rem; font-weight: 600; }
.ft-view { display: block; text-align: center; margin-top: 0.5rem; }

/* Main grid: timeline (wide) + side column */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 1.25rem; }
/* Lower dashboard row — الدعاوى حسب الحالة + المحامون وأعباؤهم side by side (the agenda moved to the calendar strip). */
.dash-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr; } .dash-lower { grid-template-columns: 1fr; } }

/* ===== Session calendar (الجلسات) — horizontal day strip ===== */
.sess-cal-card { margin-bottom: 1.25rem; }
.sess-cal-ic { display: inline-flex; vertical-align: -0.15em; }
.sess-cal-ic svg { width: 1.15rem; height: 1.15rem; }
.sess-cal { display: flex; align-items: stretch; gap: 0.6rem; margin-top: 0.5rem; }
.sess-cal-nav { flex: none; width: 2.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    color: var(--accent-strong); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.sess-cal-nav:hover { background: var(--accent-soft); border-color: var(--accent); }
.sess-cal-nav svg { width: 1.2rem; height: 1.2rem; }
.sess-cal-track { flex: 1; display: flex; gap: 0.55rem; min-width: 0; }
.sess-cal-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0.7rem 0.35rem 0.8rem;
    font: inherit; cursor: pointer; text-align: center; transition: all 0.12s; }
.sess-cal-day:not(.is-empty):hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.1); transform: translateY(-2px); }
.sess-cal-day.is-empty { cursor: default; background: var(--surface-soft); opacity: 0.7; }
.sess-cal-day.is-today { border-color: var(--accent); border-top: 3px solid var(--accent); background: var(--accent-soft); }
.scd-name { font-weight: 800; font-size: 0.9rem; color: var(--ink-heading); }
.sess-cal-day.is-today .scd-name { color: var(--accent-strong); }
.scd-date { font-size: 0.72rem; color: var(--muted); }
/* أم القرى under the Gregorian date (client 2026-08-12) — a notch smaller so the day name + count still lead. */
.scd-hijri { font-size: 0.66rem; color: var(--muted); opacity: 0.85; }
.scd-count { font-family: var(--font-app-head); font-size: 1.7rem; font-weight: 800;
    line-height: 1.1; color: var(--ink-heading); margin-top: 0.15rem; }
.sess-cal-day.is-empty .scd-count { color: var(--muted); }
.sess-cal-day.is-today .scd-count { color: var(--accent-strong); }
.scd-unit { font-size: 0.72rem; color: var(--muted); }
.scd-conc { margin-top: 0.35rem; font-size: 0.68rem; font-weight: 700; color: var(--danger);
    background: #fdecec; border: 1px solid #f5c6c6; border-radius: 999px; padding: 0.12rem 0.5rem; line-height: 1.3; }
/* Which week the strip is on (client 2026-08-12 — one view = one whole week, «‹ ›» step a week at a time). */
.sess-cal-week { margin: 0.45rem 0 0; text-align: center; font-size: 0.74rem; color: var(--muted); }
.sess-cal-week b { color: var(--accent-strong); }
/* Seven tiles never shrink below legibility — on a narrow screen the week scrolls sideways instead. */
@media (max-width: 720px) {
    .sess-cal-track { overflow-x: auto; scrollbar-width: thin; }
    .sess-cal-day { flex: 0 0 7.2rem; }
}

/* Session-calendar day pop-up — reuses the case-details session cards (cd-scard / cd-sessions-grid). */
.daysess-panel { max-width: 900px; width: 94vw; }   /* it hosts the docket's own cards now (2026-09-21) */
.daysess-panel .rz-modal-body { max-height: 74vh; overflow-y: auto; }

/* تكبير — the «جدول الأعمال والمتابعة» expanded calendar (client 2026-08-20). Two full weeks as a 7-column grid,
   RTL so الأحد sits rightmost — same convention as the strip above (initSessionCalendar's own row order). */
.cal-expand-panel { max-width: 1280px; width: 96vw; }
.cal-expand-panel .rz-modal-body { max-height: 82vh; overflow-y: auto; }
.cal-expand-nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.cal-expand-label { margin: 0; font-size: 0.85rem; color: var(--muted); min-width: 14rem; text-align: center; }
.cal-expand-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.cal-cell { display: flex; flex-direction: column; gap: 0.4rem; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); padding: 0.55rem; min-height: 8rem; }
.cal-cell.is-today { border-color: var(--accent); border-top: 3px solid var(--accent); background: var(--accent-soft); }
.cal-cell.is-weekend { background: var(--surface-soft); }
.cal-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.3rem; }
.cal-cell-name { font-weight: 800; font-size: 0.78rem; color: var(--ink-heading); }
.cal-cell-date { font-size: 0.68rem; color: var(--muted); }
.cal-cell-items { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.cal-cell-empty { margin: 0; font-size: 0.72rem; color: var(--muted); text-align: center; padding-top: 0.5rem; }
.cal-item-card { display: block; font-size: 0.72rem; line-height: 1.3; padding: 0.3rem 0.45rem; border-radius: 8px;
    background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); text-decoration: none; }
.cal-item-card:hover { border-color: var(--accent); }
.cal-item-card.is-warning { background: #f7e3e1; color: #a33327; border-color: #f0bcbc; }
.cal-cell-add { align-self: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px dashed var(--line);
    background: transparent; color: var(--accent-strong); font-size: 1rem; line-height: 1; cursor: pointer; }
.cal-cell-add:hover { background: var(--accent-soft); border-color: var(--accent); }
@media (max-width: 900px) {
    .cal-expand-grid { grid-template-columns: repeat(2, 1fr); }
}
.cd-scard-conc { border-color: #e9a5a5; box-shadow: 0 0 0 1px #f0bcbc inset; }
.cd-scard-tag-conc { background: #fdecec; color: var(--danger); border-color: #f2c4c4; }
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } }

.card-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem;
    height: 1.6rem; padding: 0 0.5rem; border-radius: 999px; background: var(--accent-soft);
    color: var(--accent-strong); font-weight: 700; font-size: 0.85rem; }
.dash-muted { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Empty state inside a dash card */
.dash-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 1.75rem 1rem; color: var(--muted); text-align: center; }
.dash-empty-ico svg { width: 2rem; height: 2rem; opacity: 0.5; }
.dash-empty p { margin: 0; font-size: 0.9rem; }

/* ---- Agenda (الأحداث القادمة) — grouped by day; today's group is accent-highlighted, each row links out ---- */
.agenda { display: flex; flex-direction: column; gap: 0.9rem; }
.agenda-day { border: 1px solid #e4e4e6; border-radius: 12px; overflow: hidden; background: var(--surface); }
.agenda-today { border-color: var(--accent); border-inline-start: 3px solid var(--accent); }
.agenda-tomorrow { border-color: #e0a25e; border-inline-start: 3px solid #d98324; }
.agenda-day-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem;
    background: #f3f3f4; border-bottom: 1px solid #e6e6e7; }
.agenda-today .agenda-day-head { background: var(--accent-soft); border-bottom-color: #cfe3cd; }
.agenda-tomorrow .agenda-day-head { background: #fdf0e1; border-bottom-color: #f0d6b8; }
.ag-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.5rem; }
.ag-date-day { font-family: var(--font-app-head); font-size: 1.3rem; font-weight: 800;
    line-height: 1; color: var(--ink-heading); }
.ag-date-mon { font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; }
.agenda-today .ag-date-day { color: var(--accent-strong); }
.agenda-tomorrow .ag-date-day { color: #b0531d; }
.ag-day-meta { display: flex; flex-direction: column; gap: 0.05rem; margin-inline-end: auto; }
.ag-rel { font-weight: 700; font-size: 0.9rem; color: var(--ink-heading); }
.ag-rel-today { color: var(--accent-strong); }
.ag-rel-tomorrow { color: #b0531d; }
.ag-hijri { font-size: 0.72rem; color: var(--muted); }
.ag-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem;
    padding: 0 0.45rem; border-radius: 999px; background: var(--surface); border: 1px solid #dcdcde;
    color: #6b7280; font-size: 0.75rem; font-weight: 700; }
.agenda-today .ag-count { background: var(--fill); border-color: var(--accent); color: var(--on-fill); }
.agenda-tomorrow .ag-count { background: #d98324; border-color: #d98324; color: #fff; }
.ag-items { display: flex; flex-direction: column; }
.ag-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0.75rem; text-decoration: none;
    border-top: 1px solid #ececed; transition: background 0.12s; }
.ag-items .ag-item:first-child { border-top: none; }
.ag-item:hover { background: #f0f0f1; }
.agenda-today .ag-item:hover { background: #eef5ec; }
.agenda-tomorrow .ag-item:hover { background: #fbf1e4; }
.ag-time { flex: none; min-width: 3.7rem; text-align: center; direction: ltr; font-weight: 700; font-size: 0.8rem;
    color: var(--ink); background: #eff0f0; border-radius: 8px; padding: 0.32rem 0.4rem; }
.agenda-today .ag-time { color: var(--accent-strong); background: var(--accent-soft); }
.agenda-tomorrow .ag-time { color: #b0531d; background: #fdf0e1; }
.ag-time-dash { color: var(--muted); font-weight: 400; }
.ag-item-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.ag-type { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.88rem;
    color: var(--ink-heading); }
.ag-num { unicode-bidi: plaintext; }
.ag-kind { flex: none; font-size: 0.64rem; font-weight: 700; border-radius: 999px; padding: 0.08rem 0.5rem;
    background: var(--surface-soft); color: var(--muted); white-space: nowrap; }
.ag-kind-session { background: var(--accent-soft); color: var(--accent-strong); }
.ag-kind-legal-action { background: #eae7f7; color: #52469b; }
.ag-kind-consultation { background: #e3eefb; color: #2e5e9e; }
.ag-kind-file-open { background: #efeef0; color: #6b7280; }
.ag-details { display: flex; flex-direction: column; gap: 0.15rem; }
.ag-detail { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; font-size: 0.78rem; align-items: baseline; }
.ag-dl { color: var(--muted); font-weight: 600; white-space: nowrap; }
.ag-dv { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ag-tag { flex: none; font-size: 0.66rem; font-weight: 600; background: #eff0f0; color: #6b7280;
    border-radius: 999px; padding: 0.05rem 0.45rem; }
.agenda-today .ag-tag { background: var(--accent-soft); color: var(--accent-strong); }
.agenda-tomorrow .ag-tag { background: #fdf0e1; color: #b0531d; }
.ag-meta { font-size: 0.8rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
.ag-court { font-weight: 400; }
.ag-go { flex: none; color: var(--muted); display: inline-flex; }
.ag-go svg { width: 1.05rem; height: 1.05rem; }
.ag-item:hover .ag-go { color: var(--accent-strong); }

/* ---- Cases by status ---- */
.stat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.stat-item { display: grid; grid-template-columns: 0.7rem 1fr 5rem auto; align-items: center; gap: 0.6rem; }
.stat-clickable { cursor: pointer; border-radius: 8px; padding: 0.25rem 0.4rem; margin: -0.25rem -0.4rem;
    transition: background 0.12s; }
.stat-clickable:hover { background: var(--surface-soft); }
.stat-clickable:hover .stat-name { color: var(--accent-strong); }
.st-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.stat-name { font-size: 0.9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-track { height: 0.5rem; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.stat-track i { display: block; height: 100%; border-radius: 999px; background: var(--fill); }
.stat-count { font-weight: 700; color: var(--ink-heading); font-size: 0.95rem; text-align: end; }

/* ---- Lawyer workload ---- */
.lw-table { display: flex; flex-direction: column; }
.lw-head, .lw-row { display: grid; grid-template-columns: 1fr 3.5rem 4rem; align-items: center; gap: 0.5rem; }
.lw-head { font-size: 0.78rem; color: var(--muted); padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.lw-row { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.lw-row:last-child { border-bottom: none; }
.lw-name { display: flex; align-items: center; gap: 0.6rem; min-width: 0; text-decoration: none; border-radius: 8px;
    padding: 0.15rem; margin: -0.15rem; transition: background 0.12s; }
.lw-name:hover { background: var(--surface-soft); text-decoration: none; }
.lw-name:hover .lw-fullname { color: var(--accent-strong); }
.lw-avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent-strong); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.lw-fullname { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-role { display: block; font-size: 0.72rem; color: var(--muted); }
.lw-num { text-align: center; font-size: 0.95rem; }
.lw-num b { font-weight: 700; color: var(--muted); }
.lw-num b.lw-active { color: var(--accent-strong); }
.lw-active-cell { cursor: pointer; border-radius: 8px; padding: 0.1rem 0; transition: background 0.12s; }
.lw-active-cell:hover { background: var(--surface-soft); }
.lw-active-cell b.lw-active { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lw-total { color: var(--ink); }

/* ============== Legal actions (الإجراءات القانونية) — modal + cards ============== */
.la-panel { max-width: 680px; }
.field-opt { color: var(--muted); font-weight: 500; font-size: 0.82rem; }

/* Details block: label + AR/EN language tabs above a switching textarea. */
.la-details-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap; margin-bottom: 0.4rem; }
.la-lang-tabs { display: inline-flex; gap: 0.25rem; }
.la-lang { background: none; border: none; padding: 0.2rem 0.55rem; font-size: 0.82rem; color: var(--muted);
    cursor: pointer; border-radius: 6px; font-family: inherit; }
.la-lang:hover { color: var(--accent-strong); }
.la-lang.active { color: var(--accent-strong); font-weight: 700; background: var(--accent-soft); }

/* Follow-up/reminder toggle card. */
.la-toggle-title { display: inline-flex; align-items: center; gap: 0.5rem; }
.la-bell svg, .la-ch-ic svg { width: 1rem; height: 1rem; vertical-align: -0.15rem; }
.la-bell { color: var(--accent); display: inline-flex; }
.la-ch-ic { color: var(--muted); display: inline-flex; }
.la-reminder-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.25rem; align-items: start; }
.la-reminder-channels { display: flex; flex-direction: column; gap: 0.7rem; }
.la-reminder-date .la-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.la-chip { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.28rem 0.7rem; font-size: 0.78rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.la-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.la-chip.active { background: var(--fill); border-color: var(--accent); color: var(--on-fill); }
/* «عدد الأيام» — any span other than the 1…5 chips (client 2026-08-13). Sized to sit in the chip row. */
.la-chip-custom { display: inline-flex; }
.la-chip-custom .form-control {
    width: 7.5rem; height: auto; padding: 0.28rem 0.6rem; font-size: 0.78rem; border-radius: 999px;
}
@media (max-width: 620px) { .la-reminder-grid { grid-template-columns: 1fr; } }

/* ===== أتعاب المحاماة (client 2026-08-06) =====
   The fees tab + its two modals. Deliberately introduces NO new colours: the حالة chips reuse the st-* identity
   palette (CaseFeeStatus.Class picks which), and everything else is drawn from the theme tokens. */
/* ===== منطقة الخطر (client 2026-08-14) =====
   The factory reset at the bottom of الإدارة والإعدادات. Framed in danger red and kept visually apart from the
   three tool cards above it, so it can never be mistaken for one of them. */
.danger-zone {
    margin-top: 2rem; border: 1px solid var(--danger); border-radius: var(--radius);
    background: var(--danger-soft); padding: 1.25rem 1.35rem;
}
.danger-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1rem; }
.danger-ic { background: var(--danger); color: #ffffff; }
.danger-ic svg { color: #ffffff; stroke: #ffffff; }
.danger-title { color: var(--danger); }
.danger-sub { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--danger); font-weight: 700; }
.danger-text { margin: 0 0 0.85rem; color: var(--ink); font-size: 0.88rem; line-height: 1.7; }
.danger-keep-title { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-heading); }
.danger-keep { margin: 0 0 1.1rem; padding-inline-start: 1.2rem; color: var(--ink); font-size: 0.85rem; line-height: 1.9; }
/* A page-level outcome line for an action that redirects back to the page it ran from (the monthly WhatsApp
   report's «إرسال الآن»). Global because several pages need it — /notification-settings' own .fs-banner is
   scoped to that component by Blazor CSS isolation and does NOT apply anywhere else (docs/GOTCHAS.md). */
.page-flash { margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: var(--radius); font-size: 0.92rem; }
.page-flash.ok { background: var(--ok-soft); border: 1px solid var(--ok); color: var(--ok); }
.page-flash.err { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); }

.danger-err { margin: 0 0 0.85rem; padding: 0.6rem 0.85rem; border-radius: var(--radius);
    background: var(--danger); color: #ffffff; font-size: 0.88rem; line-height: 1.7; }
.danger-done { margin: 0 0 0.85rem; padding: 0.6rem 0.85rem; border-radius: var(--radius);
    background: var(--ok-soft); color: var(--ok); font-size: 0.88rem; font-weight: 600; }
[data-reset-modal] .form-control { font-family: inherit; letter-spacing: 0.08em; }

/* «محولة إلى القسم الفني» tab (client 2026-08-14) — the accent, so it reads as "in someone else's hands"
   rather than as a warning. */
.hub-tab-fwd.active { color: var(--accent-strong); }

/* «المتأخرة» tab (client 2026-08-13) — a red-leaning tab + the lawyer picker bar above its list. */
.hub-tab-late.active { color: var(--danger); }
.hub-tab-count-late { background: var(--danger-soft); color: var(--danger); }
.hub-late-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.75rem 1rem; margin-bottom: 0.85rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface); }
.hub-late-bar .form-label { margin: 0; }
.hub-late-bar .form-select { flex: 1 1 16rem; max-width: 26rem; }
.hub-late-bar .field-note { flex: 1 0 100%; margin: 0; }

/* جلسات سابقة per نوع الجلسة (client 2026-08-13) — one labelled number box per type, and the card's chips. */
.prevs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem 1rem; }
.prevs-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.prevs-name { font-size: 0.86rem; color: var(--ink); }
.prevs-num { width: 5rem; flex: none; text-align: center; }
.cd-prev-types { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.cd-prev-type { display: inline-flex; gap: 0.35rem; align-items: baseline; padding: 0.2rem 0.6rem;
    border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); font-size: 0.8rem; }

/* نسبة الأتعاب (client 2026-08-13) — the kind radios and the percentage line inside the amount cell. */
.fee-kind { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fee-kind-opt { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface-soft); font-size: 0.86rem; }
.fee-kind-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.fee-pct { display: block; font-size: 0.78rem; font-weight: 600; color: var(--accent-strong); }
.fee-pct-est { display: block; font-size: 0.74rem; color: var(--muted); }
/* «أتعابك: 7,500 ر.س (١٥٪ من 50,000 ر.س)» — the share the نسبة works out to, under النسبة box (client
   2026-08-14). Given the accent band so it reads as the answer, not another hint. */
.fee-result { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; border-radius: 8px; background: var(--accent-soft);
    color: var(--accent-strong); font-size: 0.82rem; font-weight: 600; }
.fee-result-of { font-weight: 500; color: var(--muted); }
.fee-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fee-add { display: inline-flex; align-items: center; gap: 0.4rem; }
.fee-add svg { width: 1.05rem; height: 1.05rem; }

/* The four totals. */
.fee-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.fee-tile { display: flex; flex-direction: column; gap: 0.2rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.95rem; }
.fee-tile-l { font-size: 0.78rem; color: var(--muted); }
.fee-tile-v { font-size: 1.15rem; font-weight: 700; color: var(--ink); direction: ltr; text-align: start; }
.fee-cur-sm { font-size: 0.72rem; font-style: normal; color: var(--muted); font-weight: 500; }
.fee-tile-ok  .fee-tile-v { color: #2F6B34; }
.fee-tile-due .fee-tile-v { color: #916312; }
.fee-tile-late .fee-tile-v { color: #A4553D; }
.fee-tile-late { border-color: #F6E0DB; }
.fee-vat-note { font-size: 0.8rem; color: var(--muted); margin: -0.5rem 0 0.9rem; }
@media (max-width: 900px) { .fee-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fee-tiles { grid-template-columns: 1fr; } }

/* The ledger table. Values are CENTRED under their headings — a number left-aligned inside an RTL-headed
   column reads as belonging to the wrong heading. البيان (the one prose column) and the actions cell keep
   their own alignment. */
.fee-table td, .fee-table th { vertical-align: middle; text-align: center; }
/* The ledger's heading row IS this family's card header — same navy band as every other card list. */
.fee-tray > .table-wrap { background: var(--surface); border-radius: 12px; overflow: hidden; }
.fee-table thead th {
    background: var(--card-head); color: #ffffff; border-bottom-color: var(--card-head); font-weight: 600;
}
.fee-table th:first-child, .fee-table td:first-child { text-align: start; }
/* direction:ltr keeps digits + thousands separators in the right order; the centring is the cell's, not the text's. */
.fee-num { direction: ltr; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-owing { color: #916312; font-weight: 600; }
.fee-row-late td { background: #FDF6F4; }
.fee-hijri { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.fee-vat { font-size: 0.68rem; color: var(--muted); }
.fee-toggle { background: none; border: 0; padding: 0; font: inherit; font-size: 0.75rem;
    color: var(--accent-strong); cursor: pointer; margin-inline-start: 0.35rem; }
.fee-actions { display: flex; align-items: center; gap: 0.3rem; justify-content: flex-end; }
.fee-pay-btn { padding: 0.2rem 0.65rem; font-size: 0.78rem; white-space: nowrap; }

/* A fee's سدادات, shown under its row (expanded by default). The sub-row opts out of the table's centring —
   it is a list, not a column. */
.fee-pays-row > td { text-align: start; }
.fee-pays { list-style: none; margin: 0; padding: 0.35rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fee-pay { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.8rem; }
.fee-pay-amt { font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.fee-pay-date { font-size: 0.82rem; color: var(--ink); }
.fee-pay-det { font-size: 0.82rem; color: var(--muted); flex: 1 1 12rem; text-align: start; }
/* «سداد جزئي من الدُفعة المُقررة …» — amber, the same colour the «مدفوعة جزئياً» badge already uses. */
.fee-pay-det-partial { color: #916312; font-weight: 600; }
.fee-pay-by { font-size: 0.75rem; color: var(--muted); }
.fee-pay-acts { display: inline-flex; gap: 0.25rem; }
.fee-receipt { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem;
    color: var(--accent-strong); text-decoration: none; }
.fee-receipt:hover { text-decoration: underline; }
.fee-receipt svg { width: 0.95rem; height: 0.95rem; }

/* The money boxes in both modals. `.fee-money` is registered as a widget wrapper in floatLabels (alongside
   .dp/.tp/.ss) so the field gets the same notched outline as the date beside it — without that the label
   renders plain-above and the two fields in a row sit at different heights.
   PHYSICAL properties here on purpose: the input is pinned `dir="ltr"` (it holds a number) inside an RTL page,
   so the two directions disagree. The digits start at the physical LEFT, so ر.س must sit at the physical
   RIGHT — a logical `inset-inline-end` resolves against the RTL parent and lands it straight on the number. */
.fee-money { position: relative; }
.fee-money > .form-control { padding-right: 3rem; text-align: left; }
.fee-cur {
    position: absolute; right: 0.85rem; bottom: 0.48rem;   /* bottom-aligned = on the value's baseline, since
                                                              the notch pushes the text down with padding-top */
    font-size: 0.8rem; line-height: 1.35; color: var(--muted); pointer-events: none;
}
.fee-quick { display: flex; gap: 0.4rem; margin-top: 0.45rem; }

/* The balance line at the top of «تسجيل سداد» — الأتعاب · المدفوع · المتبقي. */
.fee-balance { display: flex; gap: 1.5rem; flex-wrap: wrap; background: var(--surface-soft);
    border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 1rem; margin-bottom: 1rem; }
.fee-balance:empty { display: none; }
.fee-bal { display: flex; flex-direction: column; gap: 0.1rem; }
.fee-bal i { font-style: normal; font-size: 0.75rem; color: var(--muted); }
.fee-bal b { font-size: 1rem; direction: ltr; font-variant-numeric: tabular-nums; }
.fee-bal-due b { color: #916312; }
.fee-note-ok { color: #2F6B34; }
.fee-note-bad { color: var(--danger); }

/* Create-time attachment area (drop zone + folder target + staged file list). */
.la-attach-card { padding: 1.15rem; }
.la-drop { display: flex; align-items: center; gap: 0.85rem; border: 1.5px dashed var(--border-strong, #cdd6c9);
    border-radius: 10px; padding: 1rem 1.1rem; background: var(--surface-soft); }
.la-drop.la-dragover { border-color: var(--accent); background: var(--accent-soft); }
.la-drop-ic { color: var(--accent); display: inline-flex; }
.la-drop-ic svg { width: 1.5rem; height: 1.5rem; }
.la-drop-info { display: flex; flex-direction: column; gap: 0.15rem; margin-inline-end: auto; }
.la-drop-title { font-size: 0.88rem; font-weight: 600; color: var(--ink-heading); }
.la-drop-sub { font-size: 0.76rem; color: var(--muted); }
.la-attach-btn { flex: none; }
.la-folder-row { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.9rem; }
.la-folder-label { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem;
    color: var(--ink); font-weight: 600; }
.la-folder-row .form-select, .la-folder-row .ss { flex: 1 1 auto; }
.la-file-list { list-style: none; margin: 0.85rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.la-file { display: flex; align-items: center; gap: 0.6rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: 8px; padding: 0.45rem 0.7rem; }
.la-file-name { font-size: 0.85rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-file-size { margin-inline-start: auto; font-size: 0.76rem; color: var(--muted); }
.la-file-x { flex: none; border: none; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1;
    cursor: pointer; padding: 0 0.2rem; }
.la-file-x:hover { color: var(--danger); }

/* Legal-action cards in the case-details «الإجراءات القانونية» tab. */
.cd-lacard { padding: 1.15rem; }
.cd-lacard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.3rem; }
.cd-lacard-titles { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.cd-lacard-type { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--ink-heading); }
.cd-la-status { font-size: 0.72rem; background: var(--accent-soft); color: var(--accent-strong);
    border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 600; }
.cd-lacard-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.cd-inline-form { display: inline; margin: 0; }
.cd-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border: 1px solid var(--line); background: var(--surface); border-radius: 8px; color: var(--muted); cursor: pointer; }
.cd-icon-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.cd-icon-btn svg { width: 1rem; height: 1rem; }
.cd-icon-danger:hover { border-color: var(--danger); color: var(--danger); }
.cd-icon-ok:hover { border-color: var(--ok); color: var(--ok); }

/* Session card numbering + report (client 2026-07-27). The ordinal rides the type; the seq is a plain running
   position pinned to the card's right edge; a saved قرار الجلسة reads orange. */
.cd-scard-ord { color: var(--muted); font-weight: 600; font-size: 0.82rem; }
.cd-scard-seq { margin-inline-start: auto; min-width: 1.6rem; height: 1.6rem; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 999px; background: var(--surface-soft);
    color: var(--muted); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-sdecision { color: #b7791f; }
.cd-srep-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
/* «تم تحديد موعد الجلسة القادمة في: …» (client 2026-08-15) — closes a sitting whose successor is booked. Bold
   orange, same hue as the decision text, and tappable through to that sitting's card. */
.cd-snext-line { color: #b7791f; font-weight: 700; cursor: pointer; }
.cd-snext-line:hover { text-decoration: underline; }

/* التعليقات على تحديث الدعوى (client 2026-07-27) — «إضافة تعليق» in the card header, then the thread below the
   details with replies indented under their comment. */
.cd-lacard-comment { border: 1px solid var(--line); background: var(--surface); color: var(--accent);
    border-radius: 8px; padding: 0.28rem 0.6rem; font: inherit; font-size: 0.78rem; cursor: pointer; }
.cd-lacard-comment:hover { border-color: var(--accent); background: var(--accent-soft); }
.cd-lacm-wrap { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.cd-lacm-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 0.4rem; }
.cd-lacm { padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-soft); margin-bottom: 0.4rem; }
/* A reply sits indented under the comment it answers (logical inline-start → correct in RTL). */
.cd-lacm-reply { margin-inline-start: 1.25rem; background: var(--surface); }
.cd-lacm-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78rem; }
.cd-lacm-at { color: var(--muted); }
.cd-lacm-acts { margin-inline-start: auto; display: flex; align-items: center; gap: 0.3rem; }
.cd-lacm-btn { border: none; background: transparent; color: var(--accent); font: inherit; font-size: 0.76rem;
    cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 6px; }
.cd-lacm-btn:hover { background: var(--accent-soft); }
.cd-lacm-del { color: var(--danger); }
.cd-lacm-del:hover { background: var(--danger-soft); }
.cd-lacm-body { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--ink); white-space: pre-wrap; }
.cd-hijri { color: var(--muted); font-size: 0.8rem; }
.cd-lacard-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.cd-scard-foot { margin-top: 0.75rem; padding-top: 0.55rem; border-top: 1px dashed var(--line);
    display: flex; flex-direction: column; gap: 0.15rem; }
.cd-scard-foot span { color: var(--muted); font-size: 0.76rem; line-height: 1.7; }

/* ============== Functional tasks (المهام الوظيفية) — cards + reply thread ============== */
.cd-tasks-grid { display: flex; flex-direction: column; gap: 1.1rem; container-type: inline-size; }
.cd-task-newbar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
    padding: 0.9rem; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--surface-soft);
    color: var(--accent-strong); font: inherit; font-weight: 700; cursor: pointer; transition: all 0.12s; }
.cd-task-newbar:hover { background: var(--surface); border-color: var(--accent); box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.08); }
.cd-task-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--line);
    border-radius: 14px; overflow: hidden; background: var(--surface); }
.cd-task-flash { animation: cd-flash 2.2s ease; }
.cd-task-main { padding: 1.15rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.cd-task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.cd-task-who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.cd-task-avatar { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent-strong); display: flex; align-items: center; justify-content: center; }
.cd-task-avatar .cd-ic { width: 18px; height: 18px; margin: 0; }
.cd-task-who-txt { min-width: 0; }
.cd-task-creator { font-weight: 700; color: var(--ink-heading); font-size: 0.9rem; }
.cd-task-when { color: var(--muted); font-size: 0.76rem; }
.cd-task-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.cd-task-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cd-task-due { font-size: 0.8rem; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line);
    border-radius: 8px; padding: 0.25rem 0.6rem; }
.cd-task-due b { color: var(--accent-strong); font-weight: 700; }
.cd-task-badge { font-size: 0.74rem; font-weight: 700; border-radius: 999px; padding: 0.22rem 0.7rem; white-space: nowrap; }
.cd-task-prio-urgent { background: #fbe7e7; color: #b23b3b; }
.cd-task-prio-normal { background: var(--surface-soft); color: var(--muted); }
/* Overdue chip (red) — «متأخرة N». Frozen at the completion day once the task is done. */
.cd-task-late { font-size: 0.74rem; font-weight: 800; border-radius: 999px; padding: 0.22rem 0.7rem;
    white-space: nowrap; background: var(--danger); color: #fff; }
.cd-task-type { background: #eae7f7; color: #52469b; }
/* منتهي/متوقف status (client 2026-08-26) — replaces the check/x buttons once the تكليف carries one. */
.cd-task-status-done { background: var(--ok-soft); color: var(--ok); }
.cd-task-status-stopped { background: var(--danger-soft); color: var(--danger); }
.cd-task-title { font-family: var(--font-app-head); font-size: 1.15rem; font-weight: 800;
    color: var(--ink-heading); line-height: 1.4; overflow-wrap: anywhere; }
.cd-task-desc { color: var(--ink); font-size: 0.9rem; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.cd-task-assignees-line { font-size: 0.8rem; color: var(--muted); }
.cd-task-foot { color: var(--muted); font-size: 0.76rem; padding-top: 0.55rem; border-top: 1px dashed var(--line); }
/* Reply thread (left column) */
.cd-task-replies { padding: 1.15rem; border-inline-start: 1px solid var(--line); background: var(--surface-soft);
    display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.cd-task-replies-h { text-align: center; font-weight: 700; color: var(--ink-heading); font-size: 0.9rem; }
.cd-task-reply-list { display: flex; flex-direction: column; gap: 0.6rem; }
.cd-task-noreplies { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.2rem 0.5rem;
    background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; }
.cd-task-addreply { align-self: center; display: inline-flex; align-items: center; gap: 0.4rem; }
.cd-task-addreply .cd-ic { width: 15px; height: 15px; margin: 0; color: currentColor; }
.cd-task-reply { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; }
.cd-task-reply-top { display: flex; align-items: center; gap: 0.5rem; }
.cd-task-reply-type { flex: none; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.55rem; }
.cd-trt-inprogress { background: #e3eefb; color: #2e5e9e; }
.cd-trt-done { background: var(--accent-soft); color: var(--accent-strong); }
.cd-trt-stopped { background: #fbe7e7; color: #b23b3b; }
.cd-trt-comment { background: var(--surface-soft); color: var(--muted); }
.cd-task-reply-meta { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.cd-task-reply-user { font-weight: 700; color: var(--ink-heading); font-size: 0.82rem; }
.cd-task-reply-when { color: var(--muted); font-size: 0.72rem; }
.cd-task-reply-del { width: 1.7rem; height: 1.7rem; flex: none; }
.cd-task-reply-body { margin-top: 0.4rem; color: var(--ink); font-size: 0.86rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.cd-task-reply-pct { margin-top: 0.35rem; font-size: 0.74rem; color: var(--accent-strong); font-weight: 600; }
@container (max-width: 620px) { .cd-task-card { grid-template-columns: 1fr; }
    .cd-task-replies { border-inline-start: none; border-top: 1px solid var(--line); } }

/* Task modal — assignee checkbox grid, notify note, completion slider */
.task-panel, .task-reply-panel { max-width: 640px; }
.task-assignee-head { display: flex; align-items: center; justify-content: space-between; }
.task-selectall { border: none; background: transparent; color: var(--accent-strong); font: inherit;
    font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0; }
.task-selectall:hover { text-decoration: underline; }
.task-assignees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 1rem; max-height: 11rem;
    overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; }
.task-assignee { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--ink); cursor: pointer; }
.task-assignee input { width: 1rem; height: 1rem; accent-color: var(--accent); }
.task-no-lawyers { color: var(--danger); }
.task-notify-note { margin-top: 1rem; background: #e3eefb; color: #2e5e9e; border-radius: 10px;
    padding: 0.7rem 0.9rem; font-size: 0.82rem; text-align: center; }
/* Red SLA hint under الموعد النهائي: «نوع هذه المهمة يتطلب N أيام عمل». */
.task-sla-note { margin-top: 0.35rem; color: var(--danger); font-size: 0.8rem; font-weight: 700; }

/* ===== Daily tasks (المهام اليومية) — dashboard card + modal extras ===== */
.daily-card { margin-bottom: 1.25rem; }
.daily-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; }
.daily-item { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem 1rem; align-items: center;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0.9rem 1.05rem; }
.daily-item.daily-done { opacity: 0.72; background: var(--surface-soft); }
.daily-item-main { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.daily-item-top { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.daily-details { font-weight: 700; color: var(--ink); }
.daily-done .daily-details { text-decoration: line-through; }
.daily-type { font-size: 0.75rem; font-weight: 700; color: var(--accent-strong);
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.6rem; }
.daily-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.82rem; color: var(--muted); }
.daily-meta-i b { color: var(--ink); font-weight: 700; }
.daily-meta-people { gap: 0.4rem 0.6rem; }
.daily-tag { font-size: 0.78rem; color: var(--ink); background: var(--surface-soft);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.6rem; }
.daily-files { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.daily-file { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; max-width: 16rem;
    color: var(--accent-strong); text-decoration: none; background: var(--surface-soft);
    border: 1px solid var(--line); border-radius: 8px; padding: 0.2rem 0.55rem; }
.daily-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-file:hover { border-color: var(--accent); }
.daily-file svg { width: 0.9rem; height: 0.9rem; flex: none; }
.daily-item-side { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.daily-badge { font-size: 0.78rem; font-weight: 700; color: var(--muted);
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.7rem; }
.daily-badge-done { color: #1f7a34; background: #e7f6ea; border-color: #bfe6c8; }
.daily-by { font-size: 0.72rem; color: var(--muted); }

/* Modal: attachment drop zone + channels */
.daily-drop { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
    border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-soft);
    padding: 0.9rem; color: var(--muted); font-size: 0.85rem; transition: all 0.12s; }
.daily-drop.daily-dragover { border-color: var(--accent); background: rgba(205, 189, 159, 0.08); color: var(--accent-strong); }
.daily-file-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.daily-file-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem;
    border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.6rem; background: var(--surface); }
.daily-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-file-size { color: var(--muted); font-size: 0.75rem; }
.daily-file-x { border: none; background: transparent; color: var(--danger); font-size: 1.1rem;
    line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.daily-channels { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; }
.daily-channels-lbl { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.daily-inline-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem;
    color: var(--ink); cursor: pointer; margin-top: 0.4rem; }
.daily-inline-check input { width: 1rem; height: 1rem; accent-color: var(--accent); }

/* ============== Dispute-parties table (تفاصيل أطراف النزاع) ============== */
.cd-parties-wrap { overflow-x: auto; }
.cd-parties { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.cd-parties thead th { text-align: center; font-size: 0.86rem; font-weight: 600; color: var(--muted);
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cd-parties tbody td { text-align: center; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--line);
    color: var(--ink); vertical-align: middle; }
.cd-parties tbody tr:last-child td { border-bottom: none; }
.cd-pt-namear { font-weight: 600; color: var(--ink-heading); }
.cd-pt-nameen { color: var(--ink); }
.cd-pt-role { font-weight: 700; }
.cd-pt-client { color: var(--accent-strong); }
.cd-pt-opp { color: var(--danger); }
/* Legal-capacity badge (الصفة القانونية) — client = tan, opponent = red. */
.cd-pt-cap { display: inline-block; background: #fbf3e0; color: #9a7b2e; border-radius: 6px;
    padding: 0.16rem 0.7rem; font-size: 0.86rem; font-weight: 600; }
.cd-pt-cap-opp { background: var(--danger-soft); color: var(--danger); }
/* ===== Consultations (استشارة) ============================================ */
.form-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
/* Consultation form top row: تفاصيل العميل (a touch wider) beside المسؤوليات؛ الإعدادات + المرفقات stack full-width below. */
.consult-top-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 720px) { .consult-top-row { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 0.6rem; align-items: center; }

/* Floating save (client 2026-08-16) — a fixed dock that appears while the form's real save button is scrolled
   out of sight, on every create/edit page. `pointer-events: none` on the strip keeps the fade from swallowing
   clicks meant for the form under it; only the button itself is clickable. It sits BELOW the modal layer (60)
   and hides outright while a modal is open, so it can never compete with a dialog's own save. */
.rz-save-dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
    display: flex; justify-content: center; pointer-events: none;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--surface) 55%, transparent); }
.rz-save-dock[hidden] { display: none; }
.rz-save-dock-btn { pointer-events: auto; min-width: 240px; max-width: min(92vw, 420px);
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.24); }
body.rz-modal-open .rz-save-dock { display: none; }
@media (max-width: 480px) { .rz-save-dock-btn { min-width: 0; width: 100%; } }
.rz-radio { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.consult-radios { display: flex; gap: 1.4rem; margin: 0.4rem 0; }
.consult-client-row { display: flex; gap: 0.5rem; align-items: center; }
/* Let both the native select AND its JS-enhanced .ss wrapper grow to fill the row so long client names are readable. */
.consult-client-row select, .consult-client-row .ss { flex: 1 1 auto; min-width: 0; }
.consult-duration { margin: 0.7rem 0; }
.consult-duration-row { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.consult-duration-row .rz-field { flex: 0 0 auto; width: 6.5rem; }
.consult-bilingual { border-top: 1px solid var(--line); padding-top: 0.9rem; margin-top: 0.9rem; }
.consult-bilingual:first-of-type { border-top: none; padding-top: 0.3rem; margin-top: 0.3rem; }
.consult-bl-title { font-weight: 700; color: var(--accent-strong); margin: 0 0 0.5rem; font-size: 1rem; }
/* عربي/إنجليزي language toggle — a compact segmented pill; the active language's pane is shown, the other hidden. */
.bl-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 0.3rem; }
.bl-lang { border: none; background: transparent; padding: 0.28rem 0.95rem; font: inherit; font-size: 0.82rem;
    font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.bl-lang:hover { color: var(--ink-heading); }
.bl-lang.is-active { background: var(--fill); color: var(--on-fill); }
/* consultation status pill — two states */
.cons-st { display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.08rem 0.5rem; margin-top: 0.2rem; }
.cons-st-open { background: #FCE9C9; color: #9A6608; }
.cons-st-done { background: var(--accent-soft); color: var(--accent-strong); }
@media (prefers-color-scheme: dark) { .cons-st-open { background: #4A3410; color: #F0C674; } }

/* ---- Role-routed approval chain (client note 2026-07-27) ----
   The document is uploaded inside the tab, routed by role, and the chain shows where it is. */
.appr-new { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
    padding: 0.9rem 1rem; margin-bottom: 1rem; border: 1px dashed var(--line);
    border-radius: var(--radius); background: var(--surface-soft); }
.appr-new-head { flex: 1 0 100%; font-weight: 700; font-size: 0.9rem; color: var(--ink-heading); }
.appr-pick { margin: 0; cursor: pointer; }
.appr-fname { font-size: 0.82rem; color: var(--muted); }
.appr-newnote { flex: 1 1 14rem; }
.appr-linkchk { flex: 1 0 100%; font-size: 0.85rem; }
.appr-tasksel { flex: 1 0 100%; }
.appr-new-actions { flex: 1 0 100%; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.appr-new [data-appr-newnotice] { flex: 1 0 100%; margin: 0; }

.appr-route { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.appr-linked { font-size: 0.82rem; color: var(--ink); margin-top: 0.35rem; }
.appr-chain { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.appr-step { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* The stage the request is actually waiting on. */
.appr-step-now { border-color: var(--accent); background: var(--accent-soft); }
.appr-step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
    border-radius: 999px; background: var(--surface-soft); color: var(--muted);
    font-size: 0.75rem; font-weight: 700; }
.appr-step-role { font-weight: 600; font-size: 0.86rem; }
.appr-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-top: 0.35rem; padding: 0.6rem; border: 1px solid var(--accent); border-radius: 10px;
    background: var(--surface); }
.appr-decide .form-select, .appr-decide .form-control { flex: 1 1 12rem; }
.appr-decide .field-note { flex: 1 0 100%; margin: 0; color: var(--danger); }
/* The ملاحظة is a real textarea now (client 2026-08-13) — it owns its own row, and the buttons theirs. */
.appr-decide .appr-dnote { flex: 1 0 100%; min-height: 4.5rem; resize: vertical; }
.appr-decide-actions { flex: 1 0 100%; display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* المسؤول acting ahead of القسم الفني — say so before either button is pressed. */
.appr-override-note {
    flex: 1 0 100%; margin: 0 0 0.15rem; font-size: 0.82rem; font-weight: 600; color: #b7791f;
    background: #fbeee0; border-radius: 8px; padding: 0.4rem 0.6rem;
}
/* Two new step outcomes: «حُوِّل إلى القسم الفني» and «تم التجاوز». */
.appr-badge.appr-forwarded { background: var(--accent-soft); color: var(--accent-strong); }
.appr-badge.appr-skipped { background: var(--surface-soft); color: var(--muted); }
/* The approved-document note on a تكليف card. */
.cd-task-approved { margin-top: 0.35rem; font-size: 0.82rem; color: var(--ok); }

/* ===== Document approvals (طلبات الموافقة) + notifications ===================================== */

/* Right-click file menu (فتح · طلب موافقة · حذف) — a fixed body-level menu positioned at the cursor. */
.ctx-menu { position: fixed; z-index: 80; min-width: 150px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; padding: 0.3rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.ctx-menu button { display: block; width: 100%; text-align: start; border: none; background: transparent; font: inherit;
    font-size: 0.9rem; color: var(--ink); padding: 0.5rem 0.7rem; border-radius: 7px; cursor: pointer; }
.ctx-menu button:hover { background: var(--accent-soft); color: var(--ink-heading); }
.ctx-menu .ctx-danger:hover { background: var(--danger-soft); color: var(--danger); }

/* «طلب الموافقة على المستندات» modal bits. */
.ap-file { display: flex; flex-direction: column; gap: 0.15rem; background: var(--accent-soft); border-radius: 9px;
    padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; }
.ap-file-lbl { font-size: 0.78rem; color: var(--muted); }
.ap-file-name { font-weight: 700; color: var(--ink-heading); word-break: break-word; }
.ap-users { max-height: 15rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; padding: 0.35rem; }
.ap-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 7px; cursor: pointer; }
.ap-user:hover { background: var(--accent-soft); }
.ap-user input { width: 1rem; height: 1rem; accent-color: var(--accent); }
/* «ربط بملف آخر»'s target list reuses .ap-user on a <button> instead of a checkbox <label> — reset the native
   button chrome (the grey background/border a bare <button> gets by default) so it matches the checkbox rows. */
button.ap-user { width: 100%; background: none; border: none; text-align: right; font: inherit; color: inherit; }
.ap-users-loading { color: var(--muted); text-align: center; margin: 0; padding: 0.6rem; font-size: 0.9rem; }

/* ===== Brand loader (شعار رسيم) — the pulsing logo mark over a golden glow. Replaces every «جارٍ التحميل»
   placeholder across the app. JS-rendered loaders call window.rzLoader() → identical markup + these classes;
   server-rendered ones use the <RzLoader /> shared component. Keep the two in sync. ===== */
@keyframes rz-pulse {
    /* scale 0.94 → 1.03, opacity 0.85 → 1, over 1.8s ease-in-out (client-specified). */
    0%, 100% { transform: scale(0.94); opacity: 0.85; }
    50%      { transform: scale(1.03); opacity: 1; }
}
@keyframes rz-aura {
    /* golden aura that HUGS the رسيم wordmark itself — drop-shadow follows the PNG's alpha (the glyph shape),
       not a box/circle. Breathes in sync with the pulse (same 1.8s, peaks together at 50%). */
    0%, 100% { filter: drop-shadow(0 0 3px rgba(191, 160, 106, 0.45)) drop-shadow(0 0 9px rgba(191, 160, 106, 0.28)); }
    50%      { filter: drop-shadow(0 0 8px rgba(191, 160, 106, 0.88)) drop-shadow(0 0 18px rgba(191, 160, 106, 0.55)); }
}
.rz-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.8rem; padding: 2rem 1rem; text-align: center;
}
.rz-loading-inline { flex-direction: row; padding: 0.35rem 0; gap: 0.55rem; }
.rz-loader {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; flex: 0 0 auto;
}
.rz-loader-sm { width: 32px; height: 32px; }
.rz-loader-lg { width: 96px; height: 96px; }
.rz-loader-mark {
    width: 100%; height: 100%; object-fit: contain;
    /* two synced animations: rz-pulse drives scale/opacity, rz-aura drives the gold glow (filter). */
    animation: rz-pulse 1.8s ease-in-out infinite, rz-aura 1.8s ease-in-out infinite;
    will-change: transform, opacity, filter;
}
.rz-loading-text { color: var(--muted); font-size: 0.9rem; letter-spacing: 0.01em; }
/* Respect reduced-motion: keep a gentle, slow breath rather than a 1.8s pulse. */
@media (prefers-reduced-motion: reduce) {
    .rz-loader-mark { animation-duration: 3.4s; }
}

/* الخدمات → «طباعة تقرير شهري» wizard. */
.rep-panel { max-width: 540px; }
.rep-choices { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rep-choice { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
    font-weight: 600; color: var(--ink); background: var(--surface);
    transition: border-color .15s, background .15s, color .15s; }
.rep-choice:hover { border-color: var(--accent); }
.rep-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rep-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.rep-empty { color: var(--muted); font-size: 0.85rem; margin: 0.4rem 0 0; }
/* «طباعة تقرير محامي» — the حالة الدعوى multi-select header row (label + تحديد الكل). */
.rep-status-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }

/* Notification bell dropdown. */
.notif-menu { width: 340px; max-width: 92vw; padding: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink-heading); }
.notif-readall { border: 1px solid var(--line); background: var(--surface); color: var(--accent-strong); font: inherit;
    font-size: 0.74rem; font-weight: 700; cursor: pointer; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.notif-readall:hover { background: var(--accent-soft); border-color: var(--accent); }
.notif-list { max-height: 26rem; overflow-y: auto; }
.notif-item { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--accent-soft); }
.notif-unread { background: rgba(205, 189, 159, .06); }
.notif-title { font-weight: 600; color: var(--ink-heading); font-size: 0.9rem; }
.notif-body { color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; word-break: break-word; }
.notif-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.notif-reject-box { display: flex; gap: 0.4rem; width: 100%; margin-top: 0.35rem; }
.notif-reject-box .form-control { flex: 1 1 auto; min-width: 0; }

/* طلبات الموافقة tab cards. */
.appr-list { display: flex; flex-direction: column; gap: 0.9rem; }
.appr-card { border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; background: var(--surface); }
.appr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.appr-file { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--ink-heading); word-break: break-word; }
.appr-file svg { width: 1.05rem; height: 1.05rem; }
.appr-meta { color: var(--muted); font-size: 0.8rem; }
.appr-note { margin-top: 0.5rem; color: var(--ink); background: var(--accent-soft); border-radius: 8px; padding: 0.45rem 0.65rem; font-size: 0.88rem; }
.appr-recips { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.7rem; }
.appr-recip { border-top: 1px solid var(--line); padding-top: 0.5rem; }
.appr-recip:first-child { border-top: none; padding-top: 0; }
.appr-recip-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.appr-uname { font-weight: 600; color: var(--ink); }
.appr-badge { font-size: 0.75rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.appr-pending { background: #FCE9C9; color: #9A6608; }
.appr-approved { background: var(--accent-soft); color: var(--accent-strong); }
.appr-rejected { background: var(--danger-soft); color: var(--danger); }
.appr-rnote { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }
.appr-resp { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.appr-reject-box { display: flex; gap: 0.4rem; width: 100%; margin-top: 0.35rem; }
.appr-reject-box .form-control { flex: 1 1 auto; min-width: 0; }
/* Right side of an approval card head: requester+date, plus the «عرض الملف» open button. */
.appr-head-side { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.appr-open { display: inline-flex; align-items: center; gap: 0.3rem; }
.appr-open svg { width: 0.9rem; height: 0.9rem; }
/* Flash a request card when arrived-at via a notification deep-link (?approval=…). */
.appr-flash { animation: appr-flash 2.2s ease-out; }
@keyframes appr-flash {
    0%, 30% { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); }
    100% { box-shadow: none; }
}

/* الطلبات page (/requests) — two full-width columns: «الموجهة إليّ» (inbox) + «المرسلة من قِبلي» (outbox). */
.req-status { color: var(--muted); }
.req-meta { margin-top: 0.3rem; }
.req-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.req-actions .appr-open svg, .req-actions .btn svg { width: 0.9rem; height: 0.9rem; }

/* ===== المهام والطلبات hub (/requests) ================================================================
   ONE page for four different work-item families. What keeps it readable is a single card grammar —
   colour rail + type chip + title + meta — where ONLY the rail/chip colour changes per family, so the eye
   sorts by colour before it reads a word. Section order encodes urgency (إجراء → قيد التنفيذ → أُغلقت).   */

/* Family colours. Deliberately low-saturation and distinct in hue, not just in lightness (the four must be
   told apart at a glance, including by most colour-blind users: navy / gold / green / plum). */
.hub-page {
    --k-approval: var(--accent);       --k-approval-soft: var(--accent-soft);
    --k-task: #9A6608;                 --k-task-soft: #FCE9C9;
    --k-daily: #3F7A63;                --k-daily-soft: #E6F1EB;
    --k-delegation: #7A5470;           --k-delegation-soft: #F3E9F1;
}
.hub-k-approval { --k: var(--k-approval); --k-soft: var(--k-approval-soft); }
.hub-k-task { --k: var(--k-task); --k-soft: var(--k-task-soft); }
.hub-k-daily { --k: var(--k-daily); --k-soft: var(--k-daily-soft); }
.hub-k-delegation { --k: var(--k-delegation); --k-soft: var(--k-delegation-soft); }

/* Demo toolbar (/requests?demo=1 only) — deliberately loud so it can never be mistaken for real content. */
.hub-demo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 0.8rem 1rem; margin-bottom: 1.1rem; border: 1px dashed var(--k-task, #9A6608); border-radius: 12px;
    background: #FCE9C9; color: #6b4a06; }
.hub-demo b { display: block; font-size: 0.95rem; }
.hub-demo span { font-size: 0.84rem; }
.hub-demo-ok { display: block; margin-top: 0.25rem; font-weight: 700; }
.hub-demo-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hub-demo-actions form { margin: 0; }

/* --- stat strip: the three numbers that decide what to do next (each tile is also a shortcut) --- */
.hub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.1rem; }
.hub-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.85rem 1rem;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer;
    font-family: inherit; text-align: start; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.hub-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised); }
.hub-stat-n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--ink-heading); }
.hub-stat-l { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.hub-stat-action { border-inline-start: 4px solid var(--accent); }
.hub-stat-action .hub-stat-n { color: var(--accent); }
.hub-stat-wait { border-inline-start: 4px solid var(--muted); }
.hub-stat-late { border-inline-start: 4px solid var(--danger); }
.hub-stat-late .hub-stat-n { color: var(--danger); }
.hub-stat-late.active { background: var(--danger-soft); border-color: var(--danger); }
@media (max-width: 760px) { .hub-stats { grid-template-columns: 1fr; } }

/* --- tabs + search --- */
.hub-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 0.85rem; }
.hub-tabs { display: inline-flex; gap: 0.15rem; padding: 0.25rem;
    background: var(--surface-soft); border-radius: 999px; box-shadow: var(--shadow-inset); }
.hub-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem; border: none;
    background: transparent; color: var(--muted); font-family: inherit; font-size: 0.95rem; font-weight: 700;
    border-radius: 999px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.hub-tab:hover { color: var(--ink); }
.hub-tab.active { background: var(--fill); color: var(--on-fill); box-shadow: var(--shadow-raised); }
.hub-tab-ic { display: inline-flex; }
.hub-tab-ic svg { width: 1.05rem; height: 1.05rem; }
.hub-tab-count { min-width: 1.15rem; height: 1.15rem; padding: 0 0.35rem; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
.hub-tab-count-mute { background: var(--line); color: var(--ink); }
.hub-tab.active .hub-tab-count-mute { background: rgba(26, 49, 87, 0.14); color: var(--on-fill); }
.hub-search { position: relative; flex: 0 1 22rem; min-width: 12rem; }
.hub-search svg { position: absolute; inset-inline-start: 0.7rem; inset-block-start: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; color: var(--muted); pointer-events: none; }
.hub-search .form-control { padding-inline-start: 2.2rem; border-radius: 999px; }

/* --- type filters: the legend AND the filter, so colours are learned in one place --- */
.hub-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.hub-filter { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.hub-filter i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--k, var(--fill)); }
.hub-filter:hover { border-color: var(--k, var(--accent)); }
.hub-filter.active { background: var(--k-soft, var(--accent-soft)); border-color: var(--k, var(--accent));
    color: var(--k, var(--accent-strong)); }
.hub-filter-n { min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: var(--surface-soft);
    color: var(--muted); font-size: 0.74rem; text-align: center; }
.hub-filter.active .hub-filter-n { background: rgba(255, 255, 255, 0.75); color: inherit; }
/* قيد التنفيذ / المتأخر (client 2026-08-15) — status narrowings, so they borrow the semantic hues rather than a
   family colour: the open one neutral-accent, the late one the same red the late tab and overdue rows use. */
.hub-f-open { --k: var(--accent); --k-soft: var(--accent-soft); }
.hub-f-late { --k: var(--danger, #c0392b); --k-soft: rgba(192, 57, 43, 0.12); }

/* «الكل» doubles as the lawyer picker (client 2026-08-15). */
.hub-who { position: relative; display: inline-flex; }
.hub-who-caret { font-size: 0.7rem; line-height: 1; opacity: 0.75; }
.hub-who.hub-who-on .hub-filter { border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent-strong); }
.hub-who-menu { position: absolute; top: calc(100% + 0.35rem); inset-inline-start: 0; z-index: 30;
    min-width: 14rem; max-height: 18rem; overflow: auto; padding: 0.3rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 30, 60, 0.16); }
.hub-who-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%;
    padding: 0.42rem 0.6rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
    font: inherit; font-size: 0.86rem; text-align: start; cursor: pointer; }
.hub-who-item:hover { background: var(--surface-soft); }
.hub-who-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.hub-who-n { min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: var(--surface-soft);
    color: var(--muted); font-size: 0.74rem; text-align: center; }

/* --- sections --- */
.hub-sec { margin-bottom: 1.8rem; }
.hub-sec-head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--line); }
.hub-sec-title { font-family: var(--font-app-head); font-size: 1.15rem; font-weight: 800;
    color: var(--ink-heading); margin: 0; }
.hub-sec-n { min-width: 1.5rem; height: 1.5rem; padding: 0 0.45rem; border-radius: 999px; background: var(--surface-soft);
    color: var(--ink); font-size: 0.78rem; font-weight: 700; line-height: 1.5rem; text-align: center; }
.hub-sec-intro { color: var(--muted); font-size: 0.85rem; margin: 0.45rem 0 0.85rem; }
.hub-sec-recent .hub-sec-head { border-bottom-color: var(--ok); }
.hub-empty { color: var(--muted); text-align: center; padding: 2.5rem 1rem; background: var(--surface-soft);
    border-radius: 14px; }

/* --- the card --- */
.hub-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 0.85rem; align-items: start; }
@media (max-width: 620px) { .hub-list { grid-template-columns: 1fr; } }
.hub-card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
    overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.hub-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised); border-color: var(--k, var(--line)); }
.hub-rail { position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--k, var(--fill)); }
.hub-card-in { padding: 0.85rem 1rem 0.9rem; padding-inline-start: 1.25rem; }
/* Needs my action: the rail widens and the card tints — visible even when the section header is off-screen. */
.hub-card-act { border-color: var(--k, var(--accent)); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.08); }
.hub-card-act .hub-rail { width: 7px; }
.hub-card-closed { background: var(--surface-soft); }
.hub-card-closed .hub-card-title, .hub-card-closed .hub-kind { color: var(--muted); }
.hub-card-closed .hub-rail { opacity: 0.45; }

.hub-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.hub-kind { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px;
    background: var(--k-soft, var(--accent-soft)); color: var(--k, var(--accent-strong));
    font-size: 0.75rem; font-weight: 800; }
.hub-kind svg { width: 0.85rem; height: 0.85rem; }
.hub-card-title { margin: 0.5rem 0 0; font-size: 1rem; font-weight: 700; color: var(--ink-heading);
    line-height: 1.45; word-break: break-word; }
.hub-card-meta { margin-top: 0.3rem; color: var(--muted); font-size: 0.8rem; line-height: 1.7; }
.hub-meta-strong { color: var(--ink); font-weight: 600; }
.hub-meta-closed { color: var(--ok); font-weight: 600; }
.hub-dot { opacity: 0.5; }
.hub-card .appr-note { font-size: 0.85rem; background: var(--surface-soft); }
.hub-card .appr-chain { margin-top: 0.7rem; }
.hub-chip-route { background: var(--k-soft, var(--accent-soft)); color: var(--k, var(--accent-strong)); }
.hub-due-late { color: var(--danger); font-weight: 700; }

/* Shared bits kept from the previous hub (chips · progress bar · due line) — also used by other pages. */
.hub-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.hub-chip { font-size: 0.74rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-strong); }
.hub-chip-pri { background: #FCE9C9; color: #9A6608; }
/* «متأخر» on a card with no deadline row of its own — a طلب موافقة unanswered for over a day (client 2026-08-15). */
.hub-chip-late { background: rgba(192, 57, 43, 0.12); color: var(--danger, #c0392b); }
.hub-bar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.hub-bar-track { flex: 1 1 auto; height: 7px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.hub-bar-track i { display: block; height: 100%; border-radius: 999px; background: var(--fill);
    transition: width 0.4s ease; }
.hub-bar-val { font-size: 0.8rem; font-weight: 700; color: var(--accent-strong); min-width: 2.4rem; text-align: end; }
.hub-due { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem;
    color: var(--muted); font-size: 0.82rem; }
.hub-due svg { width: 0.9rem; height: 0.9rem; }
/* Inside a hub card the progress bar takes the card's family colour, so a تكليف's bar isn't navy-by-default. */
.hub-card .hub-bar-track { background: var(--k-soft, var(--accent-soft)); }
.hub-card .hub-bar-track i { background: var(--k, var(--fill)); }
.hub-card .hub-bar-val { color: var(--k, var(--accent-strong)); }

/* Nav corner indicator: an «all clear» green dot + white check when the pending count is 0. */
.nav-req-badge.nav-req-ok { background: var(--fill); padding: 0; display: inline-flex;
    align-items: center; justify-content: center; }
.nav-req-badge.nav-req-ok svg { width: 11px; height: 11px; display: block; }

/* One-shot success animation overlay (Lottie) — shown after an approval is sent / answered, then fades out. */
.rz-anim-back { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    background: rgba(20, 25, 20, 0.18); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.rz-anim-back.show { opacity: 1; }
.rz-anim-card { background: var(--surface); border-radius: 20px; padding: 1.6rem 2rem 1.4rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; align-items: center;
    max-width: 90vw; transform: scale(0.96); transition: transform 0.4s ease; }
.rz-anim-back.show .rz-anim-card { transform: scale(1); }
.rz-anim-slot { width: 240px; height: 240px; }                       /* approve/reject (no text): larger */
.rz-anim-withtext .rz-anim-slot { width: 190px; height: 190px; }     /* send (with label): a bit bigger */
.rz-anim-slot svg { display: block; width: 100%; height: 100%; }
.rz-anim-text { margin-top: 0.4rem; font-family: var(--font-app-head);
    font-size: 1.35rem; font-weight: 700; color: var(--ink-heading); text-align: center; }
.rz-anim-fallback { color: var(--accent); }
.rz-anim-fallback svg { width: 110px; height: 110px; stroke-width: 2.4; }

/* ===== AI assistant (مساعد رسيم الذكي) — floating chat =============================================== */
.rz-asst-fab {
    position: fixed; left: 22px; right: auto; inset-block-end: 22px; z-index: 1200;
    width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: var(--fill); color: var(--on-fill); display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(var(--shadow-rgb), 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rz-asst-fab:hover { transform: translateY(-2px); background: var(--fill-strong); box-shadow: 0 10px 26px rgba(var(--shadow-rgb), 0.34); }
/* The mark keeps its OWN colours (navy + gold). It used to be inverted to white, which was invisible from the
   moment the fill became a light plate (client 2026-08-17: «its white and the bg white») — and per this palette a
   filled surface carries navy ink, never white. The box is wide because the mark is a 2:1 wordmark, not a square. */
.rz-asst-fab-logo { width: 40px; height: 26px; object-fit: contain; animation: rzAsstPulse 2.4s ease-in-out infinite; }
@keyframes rzAsstPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
body.rz-asst-active .rz-asst-fab { display: none; }

.rz-asst { position: fixed; left: 22px; right: auto; inset-block-end: 22px; z-index: 1201; }
.rz-asst[hidden] { display: none; }
.rz-asst-panel {
    width: min(440px, calc(100vw - 32px)); height: min(640px, calc(100vh - 110px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.22);
    animation: rzAsstIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rzAsstIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.rz-asst-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--fill); color: var(--on-fill); }
.rz-asst-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.98rem; }
/* Same reasoning in the panel's head band (also a light fill): show the real mark, not a black silhouette. */
.rz-asst-head-logo { width: 30px; height: 18px; object-fit: contain; }
.rz-asst-close { background: none; border: none; color: var(--on-fill); font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0.85; padding: 0 4px; }
.rz-asst-close:hover { opacity: 1; }
.rz-asst-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-soft); }
.rz-asst-msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; }
.rz-asst-bot { align-self: flex-start; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-start-start-radius: 4px; }
.rz-asst-text { white-space: pre-wrap; word-wrap: break-word; }
.rz-asst-user { align-self: flex-end; background: var(--fill); color: var(--on-fill); border-start-end-radius: 4px; }
.rz-asst-soft { color: var(--muted); }
.rz-asst-loading { padding: 6px 10px; }
.rz-asst-foot { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.rz-asst-input {
    flex: 1; resize: none; max-height: 120px; border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 12px; font: inherit; font-size: 0.9rem; background: var(--surface); color: var(--ink);
}
.rz-asst-input:focus { outline: none; border-color: var(--accent); }
.rz-asst-send { flex: none; width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--fill); color: var(--on-fill); cursor: pointer; display: grid; place-items: center; }
.rz-asst-send:hover { background: var(--fill-strong); }
.rz-asst-send svg { width: 18px; height: 18px; }
.rz-asst-disclaimer { margin: 0; padding: 6px 12px 10px; font-size: 0.7rem; color: var(--muted); text-align: center; background: var(--surface); }
/* Empty-state suggestion chips */
.rz-asst-suggests { display: flex; flex-wrap: wrap; gap: 6px; }
.rz-asst-chip { border: 1px solid var(--accent-soft); background: var(--surface); color: var(--accent); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 0.8rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.rz-asst-chip:hover { background: var(--fill); color: var(--on-fill); border-color: var(--accent); }
/* Deep-link source chips + copy button under a bot answer */
.rz-asst-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.rz-asst-src { max-width: 100%; border: 1px solid var(--line); background: var(--surface-soft); color: var(--accent); border-radius: 8px; padding: 3px 9px; font-size: 0.78rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-asst-src:hover { background: var(--accent-soft); }
.rz-asst-copy { align-self: flex-end; border: none; background: none; color: var(--muted); font-size: 0.72rem; cursor: pointer; padding: 0; }
.rz-asst-copy:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 480px) {
    .rz-asst, .rz-asst-fab { left: 14px; right: auto; inset-block-end: 14px; }
    .rz-asst-panel { width: calc(100vw - 24px); height: calc(100vh - 90px); }
}
@media (prefers-reduced-motion: reduce) {
    .rz-asst-fab-logo { animation: none; }
    .rz-asst-panel { animation: none; }
}

/* ==========================================================================
   الدردشة الداخلية (client 2026-08-24) — the internal firm chat. Mirrors the AI assistant's FAB/panel chrome
   (.rz-asst-*) on the OPPOSITE corner, and its own-message-goes-left / other-message-goes-right convention
   (.rz-asst-user/.rz-asst-bot) — align-self/justify-content "flex-end" already means the INLINE-END side, which
   this RTL app's direction makes the visual LEFT.
   ========================================================================== */

.rz-chat-fab {
    position: fixed; right: 22px; left: auto; inset-block-end: 22px; z-index: 1200;
    width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: var(--fill); color: var(--on-fill); display: grid; place-items: center;
    box-shadow: inset 0 0 0 1px var(--fill-line), 0 6px 20px rgba(var(--shadow-rgb), 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rz-chat-fab:hover { transform: translateY(-2px); background: var(--fill-strong); box-shadow: inset 0 0 0 1px var(--fill-line), 0 10px 26px rgba(var(--shadow-rgb), 0.34); }
.rz-chat-fab svg { width: 24px; height: 24px; }

/* Small presence dot, top-RIGHT of the FAB (client 2026-08-24) — green when at least one colleague is online,
   red when nobody is. The unread-message badge moves to the opposite corner so the two never collide. */
.rz-chat-fab-presence {
    position: absolute; top: -2px; inset-inline-start: -2px; width: 14px; height: 14px;
    border-radius: 50%; box-shadow: 0 0 0 2px var(--surface);
}
.rz-chat-fab-presence.online { background: #2E7D5B; }
.rz-chat-fab-presence.offline { background: #C0392B; }
.rz-chat-fab-badge {
    position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: #C0392B; color: #fff; font-size: 0.7rem; font-weight: 700;
    display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface);
}

.rz-chat { position: fixed; right: 22px; left: auto; inset-block-end: 22px; z-index: 1201; }
.rz-chat-panel {
    width: min(680px, calc(100vw - 32px)); height: min(600px, calc(100vh - 110px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.22);
    animation: rzAsstIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.rz-chat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px;
    background: var(--fill); color: var(--on-fill); border-bottom: 1px solid var(--fill-line);
}
.rz-chat-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.98rem; }
.rz-chat-title svg { width: 18px; height: 18px; }
.rz-chat-close { background: none; border: none; color: var(--on-fill); font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0.85; padding: 0 4px; }
.rz-chat-close:hover { opacity: 1; }
.rz-chat-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.rz-chat-loading { align-items: center; justify-content: center; }
.rz-chat-error { padding: 8px 14px; font-size: 0.82rem; color: #C0392B; background: var(--surface-soft); border-top: 1px solid var(--line); }
.rz-chat-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* User list — first in the DOM, so it sits on the visual RIGHT in this RTL app. */
.rz-chat-users {
    width: 220px; flex: none; display: flex; flex-direction: column;
    border-inline-end: 1px solid var(--line); background: var(--surface-soft);
}
.rz-chat-users-search { padding: 10px; border-bottom: 1px solid var(--line); }
.rz-chat-search-input {
    width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
    font: inherit; font-size: 0.85rem; background: var(--surface); color: var(--ink);
}
.rz-chat-search-input:focus { outline: none; border-color: var(--accent); }
.rz-chat-users-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.rz-chat-user {
    display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; cursor: pointer;
    padding: 7px 8px; border-radius: 10px; text-align: start; color: var(--ink); transition: background 0.12s ease;
}
.rz-chat-user:hover { background: var(--surface); }
.rz-chat-user.active { background: var(--accent-soft); }
.rz-chat-user-ava { position: relative; flex: none; width: 34px; height: 34px; }
.rz-chat-user-ava img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.rz-chat-dot {
    position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 10px; height: 10px;
    border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-soft);
}
.rz-chat-dot.online { background: #2E7D5B; }
.rz-chat-dot.offline { background: #9AA4B2; }
.rz-chat-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rz-chat-user-name { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-chat-user-role { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-chat-user-badge {
    flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #C0392B; color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center;
}

/* Thread — second in the DOM, so it sits on the visual LEFT. */
.rz-chat-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rz-chat-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.rz-chat-thread-empty svg { width: 32px; height: 32px; opacity: 0.6; }
.rz-chat-thread-empty p { margin: 0; font-size: 0.85rem; }
.rz-chat-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.rz-chat-thread-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.rz-chat-thread-name { font-size: 0.9rem; font-weight: 700; }
.rz-chat-thread-status { font-size: 0.72rem; color: var(--muted); }
.rz-chat-thread-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-soft); }
.rz-chat-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.rz-chat-msg.mine { justify-content: flex-end; }
.rz-chat-msg.theirs { justify-content: flex-start; }
.rz-chat-msg-ava { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.rz-chat-bubble {
    max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 0.87rem; line-height: 1.6;
    white-space: pre-wrap; word-wrap: break-word; display: flex; flex-direction: column; gap: 3px;
}
.rz-chat-msg.mine .rz-chat-bubble { background: var(--fill); color: var(--on-fill); border-start-end-radius: 4px; }
.rz-chat-msg.theirs .rz-chat-bubble { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-start-start-radius: 4px; }
.rz-chat-bubble-time { font-size: 0.68rem; opacity: 0.75; align-self: flex-end; }
.rz-chat-thread-foot { display: flex; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.rz-chat-thread-input {
    flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
    font: inherit; font-size: 0.9rem; background: var(--surface); color: var(--ink);
}
.rz-chat-thread-input:focus { outline: none; border-color: var(--accent); }
.rz-chat-thread-input:disabled { opacity: 0.6; }
.rz-chat-thread-send {
    flex: none; width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--fill);
    color: var(--on-fill); cursor: pointer; display: grid; place-items: center;
}
.rz-chat-thread-send:hover:not(:disabled) { background: var(--fill-strong); }
.rz-chat-thread-send:disabled { opacity: 0.5; cursor: default; }
.rz-chat-thread-send svg { width: 18px; height: 18px; }
@media (max-width: 480px) {
    .rz-chat, .rz-chat-fab { right: 14px; left: auto; inset-block-end: 14px; }
    .rz-chat-panel { width: calc(100vw - 24px); height: calc(100vh - 90px); }
    .rz-chat-users { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    .rz-chat-panel { animation: none; }
}

/* ==========================================================================
   العملاء السنويون (عميل سنوي) — the annual-retainer client list + its one-screen
   file (client 2026-07-30). The file reuses the case-details shell (.cd-screen /
   .cd-sidenav / .cd-render); everything here is the extra chrome on top of it.
   ========================================================================== */

/* «عميل سنوي» badge beside the client name, on both the موكل file and the annual file. */
.ac-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem;
    border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong);
    font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.ac-badge svg { width: 14px; height: 14px; }
/* الأعمال حسب العقد (client 2026-08-15) — one small table per retainer term. */
.ac-contract-works { margin-top: 1rem; }
.ac-contract-works .cd-sblock-h { margin-bottom: 0.45rem; }
.ac-contract-works .table { font-size: 0.86rem; }

/* «منتهي» — an ended retainer keeps its row in العملاء السنويين, flagged red (client 2026-08-15). */
.ac-ended { display: inline-flex; align-items: center; margin-inline-start: 0.4rem; padding: 0.1rem 0.55rem;
    border-radius: 999px; background: rgba(192, 57, 43, 0.12); color: var(--danger, #c0392b);
    font-size: 0.74rem; font-weight: 700; white-space: nowrap; }

/* List: the per-family work counts in one cell. */
.ac-counts { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.ac-count-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.08rem 0.5rem;
    border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line);
    color: var(--ink); font-size: 0.74rem; }
.ac-count-chip b { color: var(--accent-strong); }

/* Side-nav: one COLLAPSED dropdown per family (client 2026-08-14), holding a button per work file. The heading is
   a real <button>, so it needs the full reset; the caret flips when its group is open. */
.ac-navg { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.7rem; }
@media (max-width: 820px) { .ac-navg { width: 100%; } }
.ac-nav-group { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.5rem 0.6rem;
    border: none; border-radius: 10px; background: transparent; cursor: pointer; font: inherit;
    font-size: 0.78rem; font-weight: 700; color: var(--muted); text-align: start;
    transition: background-color 0.15s, color 0.15s; }
.ac-nav-group:hover { background: var(--accent-soft); color: var(--accent-strong); }
.ac-navg.open > .ac-nav-group { color: var(--accent-strong); }
.ac-navg-t { flex: 1; min-width: 0; }
.ac-navg-caret { display: inline-flex; }
.ac-navg-caret > svg { width: 14px; height: 14px; flex: none; transition: transform 0.18s; }
.ac-navg.open .ac-navg-caret > svg { transform: rotate(180deg); }
.ac-navg-items { display: flex; flex-direction: column; gap: 0.15rem; }
.ac-nav-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem;
    height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--accent-soft);
    color: var(--accent-strong); font-size: 0.72rem; font-weight: 700; }
.ac-nav-empty { margin: 0.5rem 0.35rem 0; color: var(--muted); font-size: 0.82rem; }
.ac-worklink { align-items: flex-start; }
.ac-worklink .cd-navlink-ic { margin-top: 0.15rem; }
.ac-worklink-c { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ac-worklink-t { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Same muted colour active or not — .cd-navlink.active is plain white now (2026-08-26), not the dark fill this
   near-white override was written for; it would be unreadable here. */
.ac-worklink-s { font-size: 0.72rem; font-weight: 600; color: var(--muted); }

/* نظرة عامة: one tile per family — count + the newest few titles. */
.ac-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.ac-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 0.9rem;
    background: var(--surface-soft); display: flex; flex-direction: column; gap: 0.2rem; }
.ac-tile-empty { opacity: 0.6; }
.ac-tile-h { font-weight: 700; color: var(--ink-heading); font-size: 0.88rem; }
.ac-tile-n { font-size: 1.45rem; font-weight: 700; color: var(--accent-strong); line-height: 1.1; }
.ac-tile-list { margin: 0.25rem 0 0; padding-inline-start: 1rem; color: var(--ink); font-size: 0.8rem; }
.ac-tile-list li { margin-bottom: 0.15rem; }

/* Render pane: the picked work file's head + its loading state. */
.ac-work-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    padding-bottom: 0.7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ac-work-head-t { min-width: 0; }
.ac-work-head h2 { margin: 0.15rem 0 0; font-size: 1.1rem; color: var(--ink-heading); }
.ac-work-kind { font-size: 0.74rem; font-weight: 700; color: var(--accent-strong); }
.ac-work-head .btn svg { width: 14px; height: 14px; }
.ac-work-loading { padding: 2rem 1rem; text-align: center; }

/* Read-only attachment rows (open / download only — no upload or delete on this surface). */
.ac-files { display: flex; flex-direction: column; gap: 0.4rem; }
.ac-file { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ac-file-ic { display: inline-flex; flex: none; color: var(--accent); }
.ac-file-ic svg { width: 18px; height: 18px; }
.ac-file-name { flex: 1 1 auto; min-width: 0; color: var(--ink); font-weight: 600; font-size: 0.86rem;
    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-file-name:hover { color: var(--accent-strong); text-decoration: underline; }
.ac-file-meta { flex: none; color: var(--muted); font-size: 0.74rem; }
.ac-file-btn { flex: none; display: inline-flex; color: var(--muted); }
.ac-file-btn:hover { color: var(--accent-strong); }
.ac-file-btn svg { width: 16px; height: 16px; }
@media (max-width: 620px) { .ac-file-meta { display: none; } }

/* تحديثات الدعوى, read-only. */
.ac-actions { list-style: none; padding-inline-start: 0; }
.ac-actions > li { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.65rem 0.8rem;
    margin-bottom: 0.5rem; background: var(--surface-soft); }
.ac-action-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; }
.ac-badge-link { text-decoration: none; margin-inline-start: 0.4rem; vertical-align: middle; }
.ac-badge-link:hover { background: var(--fill); color: var(--on-fill); }

/* الخصوم → الدعاوى: the count is tappable and floats the same record list the dashboard's counts use
   (initFocusTips + <FocusTipSrc>), client 2026-07-30. A خصم with no cases stays inert. */
.opp-cases-on { cursor: pointer; }
.opp-cases-on .opp-cases-n { display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: 0.85rem;
    transition: background-color 0.12s, color 0.12s; }
.opp-cases-on:hover .opp-cases-n { background: var(--fill); color: var(--on-fill); }

/* ---- الأعمال القانونية للعميل السنوي (client 2026-08-05) ------------------
   The cards reuse تحديثات الدعوى wholesale (.cd-scard/.cd-lacard/.cd-lacm), so there is almost nothing here.
   The only additions are for the BOARD's read-only mode, where each card also names the client it belongs to. */
.cd-lacard-titles .aw-card-client { flex-basis: 100%; text-decoration: none; }
.cd-lacard-titles a.aw-card-client:hover { text-decoration: underline; }
/* The عمل قانوني list is a column of cards, so let them use the full width like the الجلسات cards do. */
.cd-sessions-grid .cd-lacard { width: 100%; }

/* ---- العملاء السنويين board (/annual-work) — the cross-client work cards (client 2026-07-30) ---- */
.aw-tile-sub { font-size: 0.74rem; color: var(--muted); }
.aw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.85rem; }
.aw-card { display: flex; flex-direction: column; gap: 0.6rem; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--surface); }
/* A closed file reads back a step without disappearing — it still sorts to the end of its tab. */
.aw-card-done { background: var(--surface-soft); }
.aw-card-done .aw-card-title { color: var(--muted); }
.aw-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.aw-card-titles { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.aw-card-client { display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start;
    padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong);
    font-size: 0.75rem; font-weight: 700; max-width: 100%; }
.aw-card-client > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-card-client svg { width: 13px; height: 13px; flex: none; }
.aw-card-title { margin: 0; font-size: 0.98rem; line-height: 1.45; color: var(--ink-heading);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aw-card-status { flex: none; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.73rem; font-weight: 700;
    white-space: nowrap; }
.aw-st-open { background: var(--accent-soft); color: var(--accent-strong); }
.aw-st-done { background: #e4e4e6; color: #6b7280; }
.aw-card-rows { display: flex; flex-direction: column; gap: 0.2rem; }
.aw-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.aw-row-l { font-size: 0.78rem; color: var(--muted); }
.aw-row-v { font-size: 0.84rem; color: var(--ink); overflow-wrap: anywhere; }
.aw-card-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.aw-card-foot .btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.aw-card-foot .btn svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .aw-row { grid-template-columns: 1fr; gap: 0; } }

/* ==========================================================================
   Dashboard density + charts (client 2026-07-30). The ask: shrink the cards so
   most of the picture fits without scrolling, turn «الدعاوى حسب الحالة» into a
   donut, collapse الوكالات and the finished daily tasks, and add whatever charts
   help the manager scan fast. These rules come AFTER the originals, so they
   tighten the existing dashboard blocks rather than replacing them.
   ========================================================================== */

/* ---- Density: the shell + the tiles ---- */
.dash-head { margin-bottom: 0.85rem; }

.kpi-row, .focus-row { gap: 0.7rem; margin-bottom: 0.8rem; }
.kpi { padding: 0.7rem 0.85rem; gap: 0.05rem; border-radius: 10px; }
.kpi-ico { inset-inline-end: 0.7rem; top: 0.7rem; }
.kpi-ico svg { width: 1.1rem; height: 1.1rem; }
.kpi-value { font-size: 1.5rem; }
.kpi-label { font-size: 0.8rem; }
.kpi-sub { font-size: 0.72rem; }
.kpi-split { gap: 0.55rem; }
.kpi-split-l { font-size: 0.72rem; }
.kpi-flag { inset-inline-end: 0.7rem; top: 0.7rem; min-width: 1.15rem; height: 1.15rem; font-size: 0.7rem; }
.kpi-flag-ok svg { width: 0.72rem; height: 0.72rem; }

.focus-tile { padding: 0.6rem 0.75rem; gap: 0.6rem; border-radius: 10px; }
.focus-ico { width: 2.1rem; height: 2.1rem; border-radius: 9px; }
.focus-ico svg { width: 1.1rem; height: 1.1rem; }
.focus-value { font-size: 1.4rem; }
.focus-label { font-size: 0.78rem; }

/* Cards: less padding, tighter internal gap, smaller titles. */
.dash-charts .card, .dash-lower .card, .sess-cal-card, .poa-exp-card, .daily-card {
    padding: 0.8rem 0.95rem; gap: 0.6rem; border-radius: 10px; }
.dash-charts .card-title, .dash-lower .card-title, .sess-cal-card .card-title, .poa-exp-card .card-title {
    font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.sess-cal-card, .daily-card { margin-bottom: 0.8rem; }
.dash-lower { gap: 0.8rem; margin-top: 0; }

/* A colour-coded icon chip on every card title — the fastest way to find a card by eye. */
.card-ic { display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 7px; flex: none; }
.card-ic svg { width: 0.95rem; height: 0.95rem; }
.card-ic-cases   { background: #e7f0e7; color: #2F6B34; }
.card-ic-kinds   { background: #e4eff2; color: #2f6f83; }
.card-ic-trend   { background: #efeaf7; color: #7a5aa8; }
.card-ic-tasks   { background: #faf3e0; color: #b7791f; }
.card-ic-lawyers { background: var(--accent-soft); color: #223f73; }
.card-ic-poa     { background: #f6e6e2; color: #a4553d; }

/* Right-hand cluster in a card head (counters + a toggle button). */
.card-head-side { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.card-head-side .btn { padding: 0.2rem 0.6rem; font-size: 0.78rem; }

/* Attention pills — the numbers a collapsed card still has to show. */
.dash-pill { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.73rem; font-weight: 700; white-space: nowrap; }
.dash-pill-danger { background: #f7e3e1; color: #a33327; }
.dash-pill-warn { background: #faf0d9; color: #8a5c10; }

/* ---- Charts row ---- */
.dash-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem;
    align-items: start; }
@media (max-width: 1100px) { .dash-charts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .dash-charts { grid-template-columns: 1fr; } }
.dash-chart-card { min-height: 0; }

/* Donut + legend side by side. */
.dash-donut-row { display: flex; align-items: center; gap: 0.9rem; }
.rz-donut-wrap { position: relative; flex: none; width: 108px; height: 108px; }
.rz-donut { width: 100%; height: 100%; transform: rotate(0deg); }
.rz-donut-track { stroke: var(--surface-soft); }
.rz-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none; }
.rz-donut-value { font-family: var(--font-app-head); font-size: 1.35rem; font-weight: 800;
    line-height: 1; color: var(--ink-heading); }
.rz-donut-label { font-size: 0.68rem; color: var(--muted); }

.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 0.05rem; max-height: 132px; overflow-y: auto; }
.donut-leg { display: grid; grid-template-columns: 0.55rem minmax(0, 1fr) auto auto; align-items: center;
    gap: 0.4rem; padding: 0.15rem 0.25rem; border-radius: 6px; font-size: 0.78rem; }
.donut-leg-on { cursor: pointer; }
.donut-leg-on:hover { background: var(--surface-soft); }
.donut-leg-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.donut-leg-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-leg-link { text-decoration: none; font-weight: 600; }
.donut-leg-link:hover { color: var(--accent-strong); text-decoration: underline; }
.donut-leg-n { font-weight: 700; color: var(--ink-heading); }
.donut-leg-pct { color: var(--muted); font-size: 0.72rem; min-width: 2.4rem; text-align: end; }
.donut-leg-open { color: var(--accent-strong); min-width: 4.2rem; }

/* الأعمال حسب القسم as the dashboard's entry point (client 2026-08-16): it sits above the calendar, full width,
   and every قسم opens its own «حسب الحالة» chart in a modal. The donut is bigger here than in the squeezed
   three-up row it came from, and its slices are tappable. */
.dash-charts-solo { grid-template-columns: minmax(0, 1fr); }
/* الأعمال حسب القسم shares its row with المهام اليومية (client 2026-08-16) — the donut card is the narrower of
   the two, since the task list needs the room. Both stack on a narrow screen. */
.dash-kinds-lane { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 0.8rem; align-items: stretch; margin-bottom: 0.8rem; }
/* Both cards run to the SAME height (client 2026-08-16) — the two carry unrelated content, so left to itself the
   grid gave each its own, and an empty المهام اليومية ended up a third the height of the donut beside it. The
   cards stretch, and each one's BODY takes the slack so the extra room is shared, not left as a gap under it. */
.dash-kinds-lane > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.dash-kinds-lane .dash-donut-row,
.dash-kinds-lane .dash-empty,
.dash-kinds-lane .daily-list:not([data-collapse-body]) { flex: 1 1 auto; }
.dash-kinds-lane .dash-empty { justify-content: center; }
.dash-kinds-lane .dash-all-clear { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
/* The list GROWS into the row's height instead of stopping at a fixed 300px — but it still caps, or a long task
   list would drag the donut card up to its own height. min-height:0 is what lets a growable flex item scroll
   rather than push its parent taller. */
.dash-kinds-lane .daily-scroll { max-height: 360px; min-height: 0; overflow-y: auto; }
/* Stacked: each card is on its own again, so nothing needs to stretch and the original cap is back. */
@media (max-width: 1000px) {
    .dash-kinds-lane { grid-template-columns: 1fr; }
    .dash-kinds-lane .daily-scroll { max-height: 300px; }
    .dash-kinds-lane .dash-empty { justify-content: flex-start; }
}
.dash-kinds-card { margin-bottom: 0.8rem; }
.dash-kinds-row { gap: 1.4rem; }
.dash-kinds-row .rz-donut-wrap { width: 138px; height: 138px; }
.dash-kinds-row .donut-legend { max-height: none; gap: 0.15rem; }
/* Bigger figures (client 2026-08-16): the قسم name, its count and «N قائمة» all step up, and the donut's own
   centre number with them — this card is the dashboard's headline, so its numbers read from across a desk. */
.dash-kinds-row .donut-leg { font-size: 0.95rem; padding: 0.34rem 0.45rem;
    grid-template-columns: 0.6rem minmax(0, 1fr) auto auto; gap: 0.5rem; }
.dash-kinds-row .donut-leg-dot { width: 0.6rem; height: 0.6rem; }
.dash-kinds-row .donut-leg-name { font-weight: 600; }
.dash-kinds-row .donut-leg-n { font-family: var(--font-app-head); font-size: 1.3rem; font-weight: 800;
    line-height: 1.1; min-width: 1.6rem; text-align: end; }
.dash-kinds-row .donut-leg-open { font-size: 0.82rem; min-width: 4.6rem; }
.dash-kinds-row .rz-donut-value { font-size: 1.8rem; }
.dash-kinds-row .rz-donut-label { font-size: 0.76rem; }
.dash-kinds-hint { margin: 0.6rem 0 0; }
.rz-donut-seg { cursor: pointer; transition: stroke-width 0.12s; }
.rz-donut-seg:hover { stroke-width: 7; }

/* «{القسم} حسب الحالة» pop-up. Sized like the day-sessions pop-up so the dashboard's two modals match; the
   status legend is the same widget as the card's, just given room to breathe. */
.kind-panel { max-width: 620px; width: 94vw; }
.kind-panel .dash-donut-row { gap: 1.4rem; padding: 0.2rem 0 0.4rem; }
.kind-panel .rz-donut-wrap { width: 148px; height: 148px; }
.kind-panel .donut-legend { max-height: min(46vh, 340px); gap: 0.15rem; }
.kind-panel .donut-leg { font-size: 0.88rem; padding: 0.32rem 0.4rem; }
.kind-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.kind-modal-open { font-size: 0.82rem; color: var(--accent-strong); font-weight: 600; }
@media (max-width: 620px) {
    .dash-kinds-row, .kind-panel .dash-donut-row { flex-direction: column; align-items: stretch; gap: 0.9rem; }
    .dash-kinds-row .rz-donut-wrap, .kind-panel .rz-donut-wrap { align-self: center; }
}

/* ---- الملفات الجديدة: six stacked bars ---- */
.dash-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; align-items: end;
    height: 118px; }
.dash-bar-col { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; height: 100%; }
.dash-bar-n { font-size: 0.7rem; font-weight: 700; color: var(--ink-heading); line-height: 1; height: 0.8rem; }
.dash-bar-track { flex: 1 1 auto; width: 100%; max-width: 26px; display: flex; flex-direction: column;
    justify-content: flex-end; background: var(--surface-soft); border-radius: 5px; overflow: hidden; }
.dash-bar-track i { display: block; width: 100%; }
.dash-bar-matter { background: #2F6B34; }
.dash-bar-consult { background: #7a5aa8; }
.dash-bar-lbl { font-size: 0.68rem; color: var(--muted); line-height: 1; }
.dash-bars-key { display: flex; gap: 0.8rem; font-size: 0.7rem; color: var(--muted); }
.dash-bars-key span { display: inline-flex; align-items: center; gap: 0.3rem; }
.dash-key { width: 0.6rem; height: 0.6rem; border-radius: 3px; display: inline-block; }

/* ---- Height caps so no single card can own the page ---- */
.daily-scroll { max-height: 300px; overflow-y: auto; padding-inline-end: 0.2rem; }
.lw-scroll { max-height: 300px; overflow-y: auto; padding-inline-end: 0.2rem; }
.daily-list { gap: 0.45rem; margin-top: 0.1rem; }
.daily-item { padding: 0.55rem 0.7rem; border-radius: 10px; gap: 0.5rem 0.7rem; }
.daily-item-main { gap: 0.25rem; }
.daily-details { font-size: 0.88rem; }
.sess-cal { margin-top: 0.2rem; }

/* «المهام المنجزة» disclosure strip — the collapsed body is its next sibling (initSectionToggle). */
.daily-done-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding-top: 0.5rem; border-top: 1px solid var(--line); }
.daily-done-lbl { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.daily-done-lbl svg { width: 0.85rem; height: 0.85rem; color: #2F6B34; }
.daily-done-lbl b { color: var(--ink-heading); }
.dash-all-clear { display: inline-flex; align-items: center; gap: 0.4rem; }
.dash-all-clear svg { width: 1rem; height: 1rem; color: #2F6B34; }

/* الوكالات is collapsed by default now — keep its list from growing unbounded when opened. */
.poa-exp-card .poa-exp-list { max-height: 320px; overflow-y: auto; }

/* ---- Session-calendar day colouring (client 2026-07-30) --------------------
   A traffic light across the strip: a day WITH sittings is light red (it needs
   attention), a free day is light green, and الجمعة/السبت are always grey — the
   weekend, busy or not. Declared in that order so `.is-weekend` wins at equal
   specificity, and after the earlier `.is-today` rule so the state colour shows
   through while today keeps its accent border.                             */
.sess-cal-day.is-busy,
.sess-cal-day.is-busy.is-today { background: #fdeceb; border-color: #f0c4c1; }
.sess-cal-day.is-busy .scd-count { color: #a33327; }
.sess-cal-day.is-busy:hover { border-color: #d9756b; box-shadow: 0 4px 14px rgba(163, 51, 39, 0.12); }

.sess-cal-day.is-empty,
.sess-cal-day.is-empty.is-today { background: #eaf5e9; border-color: #cfe3cd; opacity: 1; }
.sess-cal-day.is-empty .scd-count { color: #2F6B34; }

/* الجمعة + السبت — grey regardless of what's scheduled. Last, so it overrides both above. */
.sess-cal-day.is-weekend,
.sess-cal-day.is-weekend.is-busy,
.sess-cal-day.is-weekend.is-empty,
.sess-cal-day.is-weekend.is-today { background: #f0f0f1; border-color: #dcdcde; }
.sess-cal-day.is-weekend .scd-name,
.sess-cal-day.is-weekend .scd-count { color: #6b7280; }
.sess-cal-day.is-weekend.is-busy:hover { border-color: #b9bbbf; box-shadow: 0 4px 14px rgba(107, 114, 128, 0.14); }

/* ==========================================================================
   الإدارة والإعدادات (/manage) — client 2026-08-02. إدارة المكتب · الإعدادات ·
   الخدمات left the nav bar and became three cards on one screen, opened by the
   gear beside the search icon. Reuses .card + .card-ic; the links are their own
   tiles (bigger tap targets than the old dropdown rows).
   ========================================================================== */
.mng-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem; align-items: start; }
/* إدارة الملفات (client 2026-08-22) — DocumentFolderTemplates.razor */
.dft-info { margin: 0.6rem 0 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius);
    background: #eef2f8; border: 1px solid #d7e0ee; color: var(--ink); font-size: 0.85rem; line-height: 1.7; }
.dft-list { display: flex; flex-direction: column; gap: 0.4rem; }
.dft-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dft-name-group { flex: 1 0 auto; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dft-name { font-size: 0.9rem; color: var(--ink-heading); }
.dft-file-count { flex: 0 0 auto; font-size: 0.76rem; color: var(--muted); background: var(--fill);
    padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.dft-access { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.dft-access-all { background: var(--fill); color: var(--muted); }
.dft-access-some { background: #fbe9df; color: var(--danger); }
.dft-access-choice { display: flex; gap: 1.2rem; margin-top: 0.35rem; }
.dft-access-choice label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; cursor: pointer; }
.dft-impact-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.dft-impact-row:last-child { border-bottom: none; }

.mng-card { display: flex; flex-direction: column; gap: 0.85rem; }
.mng-card-head { display: flex; align-items: flex-start; gap: 0.6rem; }
.mng-card-head .card-title { margin: 0; }
.mng-card-sub { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.mng-group + .mng-group { margin-top: 0.7rem; }
.mng-group-title { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 700; color: var(--muted);
    letter-spacing: 0.02em; }
.mng-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.4rem; }
.mng-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem;
    border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
    color: var(--ink); font-weight: 600; font-size: 0.88rem; font-family: inherit;
    text-align: start; text-decoration: none; cursor: pointer; width: 100%;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; }
.mng-link:hover { background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent-strong); text-decoration: none; transform: translateY(-1px); }
.mng-link-ic { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.mng-link-ic svg { width: 1rem; height: 1rem; }
.card-ic-office   { background: var(--accent-soft); color: #223f73; }
.card-ic-settings { background: #eceaf5; color: #5b4b96; }
.card-ic-reports  { background: #e4eff2; color: #2f6f83; }

/* ==========================================================================
   سجل النشاط (activity log) — a narrated, day-grouped feed
   The rows arrive as full Arabic sentences from ActivityLogService; this is
   only the shell: filter pills, a per-day heading, one line per event with a
   colour-coded action badge, and a collapsed before/after table on edits.
   Badge colours are their OWN palette (like st-*), deliberately not the sand
   theme: إنشاء/تعديل/حذف must be told apart at a glance.
   ========================================================================== */
.al-pills { margin-bottom: 0.6rem; }
.al-n { display: inline-block; min-width: 1.25rem; padding: 0 0.3rem; margin-inline-start: 0.3rem;
    border-radius: 999px; background: var(--surface-soft); color: var(--muted);
    font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.pill-tab.active .al-n { background: var(--surface); color: var(--accent-strong); }

.al-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
    padding: 0.85rem 1rem; margin: 0.9rem 0 1.1rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface); }
.al-filter { display: flex; flex-direction: column; gap: 0.25rem; min-width: 11rem; }
.al-filter label { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.al-filter-actions { display: flex; gap: 0.5rem; margin-inline-start: auto; }
.al-total { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.al-total b { color: var(--ink-heading); font-variant-numeric: tabular-nums; }

.al-day + .al-day { margin-top: 1.4rem; }
.al-day-head { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.6rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.al-day-name { font-size: 1rem; font-weight: 700; color: var(--ink-heading); }
.al-day-date { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.al-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.al-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.85rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s; }
.al-item:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(90, 70, 40, 0.07); }
.al-body { min-width: 0; flex: 1; }
.al-text { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--ink); }
.al-text a { color: var(--ink); text-decoration: none; }
.al-text a:hover { color: var(--accent-strong); text-decoration: underline; }
.al-meta { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); }
.al-who { font-weight: 700; color: var(--ink); }
.al-dot { margin: 0 0.35rem; }

/* Action badge — fixed width so the sentences all start on the same line. */
.al-badge { flex: 0 0 auto; min-width: 4.6rem; padding: 0.22rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; text-align: center; white-space: nowrap; }
.al-create { background: #E3F1E2; color: #2F6B34; }   /* إنشاء — green */
.al-update { background: #E0ECF9; color: #245FA0; }   /* تعديل — blue */
.al-delete { background: #F6E0DB; color: #A4553D; }   /* حذف — red */
.al-auth   { background: #E9ECEF; color: #48515B; }   /* دخول/خروج — slate */
.al-index  { background: #EDE4F7; color: #6B3FA0; }   /* فهرسة — purple */
.al-warn   { background: #FBE6D4; color: #9C5A17; }   /* محاولة دخول فاشلة — amber */
.al-view   { background: #E9ECEF; color: #5A6472; }   /* مشاهدة — neutral grey, deliberately quiet */

/* «ما الذي تغيّر» — the before/after table, collapsed by default. */
.al-changes { margin-top: 0.45rem; }
.al-changes > summary { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
    background: var(--surface-soft); color: var(--accent); font-size: 0.75rem; font-weight: 700;
    cursor: pointer; list-style: none; }
.al-changes > summary::-webkit-details-marker { display: none; }
.al-changes > summary:hover { background: var(--accent-soft); }
.al-changes[open] > summary { margin-bottom: 0.45rem; }
.al-diff { font-size: 0.82rem; margin: 0; }
.al-diff th, .al-diff td { padding: 0.35rem 0.55rem; }
.al-field { font-weight: 700; color: var(--ink-heading); white-space: nowrap; }
.al-old { color: var(--muted); text-decoration: line-through; }
.al-new { color: #2F6B34; font-weight: 600; }

.al-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.4rem; }
.al-page-of { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .al-filter { min-width: 100%; }
    .al-filter-actions { margin-inline-start: 0; width: 100%; }
    .al-item { flex-direction: column; gap: 0.4rem; }
}

/* ==========================================================================
   الجلسات (session docket, /sessions)
   Three standing tiles → scope pills → date/type/lawyer filters → day-grouped
   cards. Each card is [time rail | body | «؟»]; the body stacks type · case ·
   parties · venue/lawyer so the eye scans down one column, not across a table.
   The whole card is the open affordance (client 2026-09-21) — it carries no
   action buttons, only the «؟» that floats تقرير الجلسة.
   ========================================================================== */
.sb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.6rem; margin: 0.2rem 0 1rem; }
.sb-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.9rem;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    color: var(--ink); text-decoration: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.sb-stat:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(90, 70, 40, 0.08); }
.sb-stat.active { border-color: var(--accent); background: var(--accent-soft); }
.sb-stat-n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--ink-heading);
    font-variant-numeric: tabular-nums; }
.sb-stat-l { font-size: 0.82rem; color: var(--muted); }
/* Today in both calendars, under the two date tiles (client 2026-09-21). */
.sb-stat-d { font-size: 0.7rem; color: var(--muted); line-height: 1.5; font-variant-numeric: tabular-nums; }

/* نطاق الإرسال (إعدادات الإشعارات) — the firm's own domain, its status, and the DNS records to publish. */
.fs-domain-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.75rem; }
.fs-domain-name { font-weight: 700; color: var(--ink-heading); font-size: 1.02rem; }
.fs-dns-table { font-size: 0.82rem; }
/* A DKIM value is one long unbreakable token — let it wrap rather than stretch the table off the card. */
.fs-dns-v { max-width: 22rem; overflow-wrap: anywhere; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* The calendar card's title doubles as the way into this week's docket. */
.sess-cal-title { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; }
.sess-cal-title:hover { color: var(--accent-strong); text-decoration: underline; }
/* The day pop-up hosts the docket's own <SessionCard>s, so it only has to give them room. */
.daysess-list .sb-list { gap: 0.5rem; }

.sb-pills { margin-bottom: 0.6rem; align-items: center; }
/* The search box shares the pills' row, pushed to its far end (client 2026-09-21). */
.sb-search { margin-inline-start: auto; flex: 0 1 26rem; min-width: 14rem; }
.sb-search .form-control { height: 2.15rem; padding-block: 0.25rem; font-size: 0.85rem; }
.sb-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
    padding: 0.85rem 1rem; margin: 0 0 1.1rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface); }
.sb-filter { display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; }
.sb-filter label { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
/* «جلسات بلا تقرير» — a checkbox sits on the controls' baseline, not above it like a labelled field. */
.sb-filter-check { min-width: auto; justify-content: flex-end; padding-bottom: 0.5rem; }
.sb-filter-check label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem;
    color: var(--ink); cursor: pointer; }
.sb-filter-check input { margin: 0; cursor: pointer; }
.sb-filter-actions { display: flex; gap: 0.5rem; margin-inline-start: auto; }
.sb-count { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.sb-count b { color: var(--ink-heading); font-variant-numeric: tabular-nums; }

.sb-day + .sb-day { margin-top: 1.4rem; }
.sb-day-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.sb-day-name { font-size: 1rem; font-weight: 700; color: var(--ink-heading); }
.sb-day-date { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The Umm al-Qura twin of the day's Gregorian date — every date on this screen carries one. */
.sb-day-hijri { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sb-day-n { margin-inline-start: auto; font-size: 0.78rem; color: var(--muted); }

.sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.sb-item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.8rem 0.9rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s; }
.sb-item:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(90, 70, 40, 0.07); }
.sb-item-final { border-inline-start: 3px solid #52469B; }
/* The whole card opens the sitting on its case screen — initCasesRowClick delegates to the [data-row-open]
   link inside it, so the pointer has to say so across the card, not just over that link. */
.sb-item-tap { cursor: pointer; }

/* The time rail spans the card's full height (the card itself top-aligns its columns) so the time can sit
   centred against the body beside it, not pinned to the first line (client 2026-09-21). */
.sb-when { flex: 0 0 4.6rem; align-self: stretch; display: flex; align-items: center; justify-content: center;
    padding-inline-end: 0.7rem; border-inline-end: 1px solid var(--line); }
.sb-time { font-size: 1rem; font-weight: 700; color: var(--ink-heading); font-variant-numeric: tabular-nums; }

.sb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.sb-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.sb-type { font-weight: 700; color: var(--ink-heading); font-size: 0.95rem; }
.sb-degree { font-size: 0.75rem; color: var(--muted); }
.sb-case { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600;
    color: var(--accent); text-decoration: none; }
.sb-case:hover { color: var(--accent-strong); text-decoration: underline; }
.sb-kind { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 5px;
    background: var(--surface-soft); color: var(--muted); }
/* Every value on the card wears its own label (client 2026-09-21). The key is the quiet half of the pair —
   it names the value without competing with it. */
.sb-f { display: inline-flex; align-items: baseline; gap: 0.25rem; min-width: 0; }
.sb-f-k { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* الأطراف — one labelled line per side, each name followed by its .stack-cap صفة chip. */
.sb-parties { font-size: 0.82rem; gap: 0.3rem; }
.sb-party { display: inline-flex; align-items: center; }
.sb-party + .sb-party { margin-inline-start: 0.1rem; }
.sb-party + .sb-party::before { content: "،"; margin-inline-end: 0.3rem; color: var(--muted); }
.sb-party-c { color: var(--accent-strong); font-weight: 600; }   /* الموكل — green, as on الدعاوى */
.sb-party-o { color: var(--danger); font-weight: 600; }          /* الخصم — red */
.sb-vs { color: var(--muted); font-size: 0.75rem; font-weight: 700; margin-inline: 0.15rem; }
.sb-meta { font-size: 0.78rem; color: var(--muted); gap: 0.9rem; }
.sb-meta-i { display: inline-flex; align-items: center; gap: 0.3rem; }
.sb-meta-i svg { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; }
.sb-meta-warn { color: #A4553D; }
.sb-deleg { margin-inline-start: 0.25rem; font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.3rem;
    border-radius: 5px; background: #E7E4F7; color: #52469B; }

/* Report state — its own two-colour palette, like the st-* status badges. */
.sb-rep { font-size: 0.7rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px; }
.sb-rep-done { background: #E3F1E2; color: #2F6B34; }
.sb-rep-due { background: #FAEFD5; color: #916312; }

.sb-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35rem; }
/* The card's single control: a round «؟» that floats تقرير الجلسة via the shared [data-tip] card. Sized as a
   real target, like the case card's action row (client 2026-09-19). */
.sb-q { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; display: inline-flex; align-items: center;
    justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface-soft); color: var(--muted); font-size: 1.05rem; font-weight: 700;
    line-height: 1; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.sb-q:hover, .sb-q:focus-visible { border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent-strong); }

@media (max-width: 820px) {
    .sb-search { flex-basis: 100%; margin-inline-start: 0; }
    .sb-item { flex-wrap: wrap; }
    .sb-when { flex-basis: 100%; align-self: auto; justify-content: flex-start; align-items: baseline;
        border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 0 0 0.35rem; }
    .sb-actions { flex-basis: 100%; justify-content: flex-end; }
    .sb-filter { min-width: 100%; }
    .sb-filter-actions { margin-inline-start: 0; width: 100%; }
}

/* ==========================================================================
   Light fill — the two consequences (client 2026-08-14)
   --------------------------------------------------------------------------
   The fill used to be sand (#cdbd9f): dark enough to hold its own shape on a white card and to read as a solid
   mark on a light track. A near-white fill is not, so two families of rule have to be restated ONCE, here,
   rather than hunted through 4,000 lines:

     1. MARKS → navy. A dot, a progress fill, a rail, a clock hand, a switch knob — a shape with no text on it.
        These sit on --surface-soft / --accent-soft tracks that are themselves near-white, so a near-white mark
        is an invisible mark. They take --mark (navy), which is what «keep the navy blue» means in practice.

     2. FILLED SURFACES → the fill + a navy hairline. Anything the user is meant to read as «this one is selected»
        needs an edge now that the fill alone is nearly the page colour. The hairline is an INSET shadow, never
        a border, so it can be added to elements that were laid out without one and nothing reflows. Rules that
        ALREADY carry `border-color: var(--accent)` (.pill-tab.active · .la-chip.active ·
        .agenda-today .ag-count · .icon-btn:hover · .fab · .form-check-input:checked) are absent below — they
        are already edged.

   Kept deliberately as one late block: every selector here is a straight override of a rule defined earlier,
   and seeing the whole consequence of the palette change in one place is worth the repetition.
   ========================================================================== */

/* ── 1. Marks stay navy ─────────────────────────────────────────────────── */
/* The two switches are opposite shapes, so they take opposite halves. .switch has a COLOURED knob on a light
   track → the knob goes navy. .rz-switch has a WHITE knob → the TRACK goes navy, or the knob vanishes. */
.switch input:checked + .track::before { background: var(--mark); }
.rz-switch input:checked + .rz-switch-track { background: var(--mark); border-color: var(--mark); }
.cd-up-dot, .cd-wf-dot { background: var(--mark); }
.stat-track i, .hub-bar-track i { background: var(--mark); }
.hub-filter i { background: var(--k, var(--mark)); }
.hub-rail { background: var(--k, var(--mark)); }

/* NOT in this list: .nav-glider. It is a SURFACE — the active nav link's navy text rides on top of it — and it
   already has the affordance a near-white fill costs it, because .nav-pill-core.active carries --shadow-raised that lifts
   it out of the recessed track. It takes the hairline below instead. */

/* «All clear» indicators: a filled disc with a tick. The disc is navy and the tick white — a near-white disc
   with a white tick would be two invisible things stacked. */
.kpi-flag-ok, .nav-req-badge.nav-req-ok { background: var(--mark); color: #ffffff; }

/* ── 2. Filled surfaces take a navy hairline ────────────────────────────── */
/* NOT in this list: .cd-navlink.active. It isn't a --fill surface any more (client 2026-08-26 follow-up) — it's
   plain --surface, the same white as .cd-render, deliberately with NO outline on the edge where the two fuse. A
   hairline here would redraw the exact seam the fuse is meant to erase. */
.nav-glider,
.user-chip,
.settings-link.active,
.bl-lang.is-active,
.hub-tab.active,
.dp-day.on,
.docman-badge,
.rz-asst-user,
.rz-asst-send,
.rz-asst-fab {
    box-shadow: inset 0 0 0 1px var(--fill-line);
}
/* The FAB keeps its drop shadow — append the hairline rather than replace it. */
.rz-asst-fab { box-shadow: inset 0 0 0 1px var(--fill-line), 0 6px 20px rgba(var(--shadow-rgb), 0.28); }
/* The hub tab keeps its raised shadow for the same reason. */
.hub-tab.active { box-shadow: inset 0 0 0 1px var(--fill-line), var(--shadow-raised); }
/* The assistant's head band sits against a white panel — an underline is enough, a full ring would box it in. */
.rz-asst-head { border-bottom: 1px solid var(--fill-line); }

/* Bootstrap paints the checkbox tick and the radio dot WHITE, which was already faint on sand and is invisible
   on a near-white fill. Repaint both in navy; the box keeps the fill + accent border set further up. */
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a3157' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231a3157'/%3e%3c/svg%3e");
}

/* ============== الصورة الشخصية (user avatars, client 2026-08-16) ==============
   One circular face used everywhere a user's name appears — <UserAvatar> server-side, rzAvatar() in
   raseem-forms.js for the browser-rendered surfaces. With no photo on file the same circle carries the
   name's first letter, so a list of faces never changes shape when one user has a picture and another
   doesn't. Sizes are fixed (never flex-shrunk) for the same reason. */
.rz-ava {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    /* The ROLE ring (client 2026-08-17). An outer box-shadow rather than a border, so the picture keeps the full
       circle and every size can pick its own ring width without touching the layout box. */
    box-shadow: 0 0 0 var(--rz-ring-w, 2px) var(--rz-ring, var(--line));
}
.rz-ava-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The «no photo» figure (client 2026-08-17) — a navy outline on the soft fill. It is CONTAINED and inset a little
   so the drawing never crowds the role ring, unlike a real photo which fills the whole circle. */
.rz-ava-ph { width: 62%; height: 62%; object-fit: contain; margin-top: 6%; }

.rz-ava-xs { width: 18px; height: 18px; font-size: 0.6rem; }
.rz-ava-sm { width: 26px; height: 26px; font-size: 0.78rem; }
.rz-ava-md { width: 34px; height: 34px; font-size: 0.92rem; }
.rz-ava-lg { width: 56px; height: 56px; font-size: 1.35rem; }
.rz-ava-xl { width: 96px; height: 96px; font-size: 2.2rem; }

/* Ring colour per role — keyed on the STABLE English role code, never the Arabic display name (a firm may rename
   its roles; `AppRole.Name` is what survives). المسؤول is red by the client's instruction; the rest are picked to
   stay distinguishable side by side and to match how each role reads elsewhere in the app.
   Anyone with no role — or from a firm that added one — keeps the neutral grey ring above. */
.rz-ava-r-Supervisor   { --rz-ring: #C0392B; }   /* المسؤول — red (client 2026-08-17) */
.rz-ava-r-CaseManager  { --rz-ring: #6D28D9; }   /* مدير إدارة قضايا — purple */
.rz-ava-r-Admin        { --rz-ring: #1A3157; }   /* إداري — the brand navy */
.rz-ava-r-FollowUp     { --rz-ring: #C2711C; }   /* متابعة — amber, the app's «نوع» accent */
.rz-ava-r-Lawyer       { --rz-ring: #2E7D5B; }   /* محامي — the app's green */
.rz-ava-r-Accountant   { --rz-ring: #0E7490; }   /* محاسب — teal, money-adjacent without being the green */
.rz-ava-r-DataReader   { --rz-ring: #6B7280; }   /* قارئ بيانات — grey, a read-only role */
.rz-ava-r-PlatformOwner{ --rz-ring: #B8860B; }   /* مالك المنصة — gold */
.rz-ava-r-Developer    { --rz-ring: #334155; }   /* المطوّر — slate */

/* Ring width by size: a hairline on the tiny in-line faces, a real band on the dashboard portrait. */
.rz-ava-xs { --rz-ring-w: 1.5px; }
.rz-ava-lg { --rz-ring-w: 2.5px; }
.rz-ava-xl { --rz-ring-w: 3px; }


/* A face + its name on one baseline — the standard pairing inside table cells and chips. */
.rz-who { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.rz-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* المستخدمون — the signed-in admin's own quick-link card above the table. */
.self-account-card { margin-bottom: 1.5rem; }
.self-account-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ملف المستخدم — الصورة الشخصية card: the current picture beside its two buttons. */
.up-photo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.up-photo-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.up-photo-hint { font-size: 0.8rem; color: var(--muted); }

/* Call-site spacing for the faces that ride inside existing chips/rows. */
.cd-chip .rz-ava { margin-inline-end: 0.35rem; }
.stack-name.rz-who { display: inline-flex; }
.rz-whos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.55rem; }