/* Components.css must @import FIRST per CSS Cascade spec
   (w3.org/TR/css-cascade-4/#at-import). Anything before this
   except @charset/@layer is also a style rule and would silently
   invalidate the import. Do not move below the @font-face blocks. */
@import url('components.css');

/* ── Cairo (self-hosted variable font) ──
   3 woff2 files in public/fonts/cairo/ cover Arabic + Latin + Latin Ext.
   Unicode-range tells the browser to only fetch the subset(s) it needs.
   font-weight: 300 800 declares the variable axis range, so a single file
   serves every weight instead of one per weight.
   font-display: swap renders fallback text immediately, then swaps when
   Cairo loads — avoids invisible-text flash. */
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('/assets/maktab_bouholaigah/fonts/cairo/cairo-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-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('/assets/maktab_bouholaigah/fonts/cairo/cairo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('/assets/maktab_bouholaigah/fonts/cairo/cairo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FIX 12 (FIX_PLAN.md item 12): LTR-isolate embedded record IDs so they
   don't pollute Arabic sentence flow. The bidi algorithm otherwise drags
   surrounding punctuation/dashes into the wrong run when codes like
   FB-2026-00302, LEASE-00002, MTX-26-00040 appear mid-AR-sentence in
   activity feeds, detail panels, and admin activity.

   - direction: ltr keeps the digits + dashes in left-to-right order.
   - unicode-bidi: isolate makes the bidi algorithm treat the code as an
     atomic LTR run (won't bleed into neighbouring AR text).
   - display: inline-block prevents the wrapper from breaking lines
     awkwardly mid-word in justify scenarios.

   Use via maktab.ltr_code(name) in JS or maktab.api.utils.ltr_code(name)
   in Python wherever a record ID is rendered inline with prose copy. */
.ltr-code {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* ── Entity-class chrome (FIX 5 — religious-legal classification) ──
   Drives row + pill chrome on E1 (entity-ledger), E2 (reconciliation-report),
   E3 (thilth-report), C5 (expenses-list). CLAUDE.md flags entity-boundary
   confusion (Family heir misreading Khums as Thilth) as a P0 failure mode.
   Tokens defined in the :root block below; classes auto-flip in dark mode
   via the underlying --success/--info/--warn/--ink-muted tokens.
   API: maktab.entity_class(name) → 'charitable'|'passthrough'|'personal'|'operational'
        maktab.entity_pill(name)  → '<span class="entity-pill entity-pill-<cls>">...'
   For rows, apply class `entity-row entity-row-<cls>` on the <tr> or row card. */
.entity-row {
	border-inline-start: 4px solid transparent;
}
.entity-row > td:first-child,
.entity-row > th:first-child {
	/* push first-cell content away from the colored stripe so the border
	   reads as a stripe, not as squished text */
	padding-inline-start: 12px;
}
.entity-row-charitable  { border-inline-start-color: var(--entity-charitable); }
.entity-row-passthrough { border-inline-start-color: var(--entity-passthrough); }
.entity-row-personal    { border-inline-start-color: var(--entity-personal); }
.entity-row-operational { border-inline-start-color: var(--entity-operational); }

/* Outer banner-stripe variant — for single-entity reports (E3 Thilth) where
   per-row chrome is meaningless. Apply to the report wrapper. */
.entity-banner {
	border-top: 4px solid transparent;
	padding-top: var(--s-3);
}
.entity-banner-charitable  { border-top-color: var(--entity-charitable); }
.entity-banner-passthrough { border-top-color: var(--entity-passthrough); }
.entity-banner-personal    { border-top-color: var(--entity-personal); }
.entity-banner-operational { border-top-color: var(--entity-operational); }

/* Brand-text column — wraps Arabic wordmark + sandbox tag vertically.
   Parent .brand is flex-row; .brand-text is flex-column so the tag
   sits on its own line below the wordmark without crowding it. */
.maktab-sidebar .brand .brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.1;
}
/* Sandbox tag — only renders when hostname starts with "sandbox".
   Visual cue to never confuse it for prod. */
.maktab-sidebar .brand .sandbox-tag {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-top: 2px;
	line-height: 1;
}

/* Inline pill — small badge next to a company name.
   Hidden 2026-05-21 per Ahmad — the .entity-row-* / .mkt-pg-head color
   spine carries the same information; the verbal class label next to
   every company was noise. The class survives in DOM (rendered by ~5
   callers + maktab.entity_pill helper) so tooling that reads it still
   works. To re-enable, change display back to inline-block. */
.entity-pill {
	display: none;
	padding: 2px 9px;
	border-radius: var(--r-pill);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	border: 1px solid transparent;
	vertical-align: middle;
	white-space: nowrap;
}
.entity-pill-charitable {
	background: var(--entity-charitable-bg);
	color: var(--entity-charitable);
	border-color: var(--entity-charitable);
}
.entity-pill-passthrough {
	background: var(--entity-passthrough-bg);
	color: var(--entity-passthrough);
	border-color: var(--entity-passthrough);
}
.entity-pill-personal {
	background: var(--entity-personal-bg);
	color: var(--warn-text);
	border-color: var(--entity-personal);
}
.entity-pill-operational {
	background: var(--entity-operational-bg);
	color: var(--ink);
	border-color: var(--entity-operational);
}

/* Screen-reader-only utility (WCAG standard) — visually hides content while keeping it available to assistive tech */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ── Page loading placeholder (palm tree logo) ── */
.maktab-page-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	opacity: 0.5;
}
.maktab-page-loading img {
	width: 48px;
	height: 48px;
	animation: maktab-pulse 1.8s ease-in-out infinite;
}
@keyframes maktab-pulse {
	0%, 100% { opacity: 0.3; transform: scale(0.95); }
	50% { opacity: 0.6; transform: scale(1); }
}

/*
 * Maktab Bouholaigah — Hasawi Palm Tree Palette
 *
 * Straw:      #D4C5A0  (light backgrounds, cards)
 * Beige:      #F5F0E6  (page background)
 * Sand:       #C2AD7E  (borders, subtle accents)
 * Brown:      #6B4F36  (headings, primary text)
 * Dark Brown: #4A3728  (navbar, strong accents)
 * Palm Green: #5E7D5E  (success, positive indicators)
 * Leaf Green: #7A9E7A  (secondary green)
 * Sky Blue:   #8FB8D4  (links, info accents)
 * Light Blue: #D4E6F1  (info backgrounds)
 * Cream:      #FAF8F2  (card backgrounds)
 * Red/Warm:   #C0735E  (warnings, alerts — earthy terracotta)
 * Orange:     #D4A05A  (caution — amber/date color)
 */

/* ── CSS Custom Properties ── */
:root {
	/* Legacy --maktab-* palette — bridged to v2 tokens (Phase RS Pass A).
	   Light + dark values come from the v2 :root + [data-theme="dark"] blocks
	   below, so dark mode auto-flips without duplicate overrides. */
	--maktab-beige: var(--beige);
	--maktab-cream: var(--cream);
	--maktab-straw: var(--straw);
	--maktab-sand: var(--sand);
	--maktab-brown: var(--brown);
	--maktab-dark-brown: var(--brown-deep);
	--maktab-green: var(--success);
	--maktab-leaf: #7A9E7A;
	--maktab-sky: #8FB8D4;
	--maktab-sky-hover: #6A9BBF;
	/* Link color — warm brand brown, NOT blue. The historical mapping to
	   var(--info) ("sky-link" in the handoff) leaked Frappe-style blue
	   anchors into every list/detail/panel surface (FB-2026-00222/227/228).
	   Pointing to var(--brown) auto-flips for dark mode via the [data-theme]
	   block above (--brown becomes #C2AD7E sand in dark). All consumers of
	   --maktab-link (.rc-link, .lv-phone, .lv-map-link, .fb-attach-btn,
	   .lv-invoice-link, .ul-tenant-link, plain <a>) now render brand-warm. */
	--maktab-link: var(--brown);
	--maktab-light-blue: #D4E6F1;
	--maktab-terracotta: var(--crit);
	--maktab-amber: var(--warn);
	--maktab-white: #FFFFFF;
	--maktab-text: var(--ink);
	--maktab-text-muted: var(--ink-muted);
	--maktab-border: var(--border);
	--maktab-radius: var(--r-sq);
	--maktab-shadow: none;
	--maktab-shadow-hover: none;
	/* Bridges for page-specific CSS that was authored before the v2 token
	   system landed. Without these, var(--maktab-card-bg, #fff) etc. falls
	   back to the hardcoded Tailwind-style hex, fighting the foundation. */
	--maktab-card-bg: var(--cream);
	--maktab-bg: var(--beige);
	--maktab-surface: var(--cream);
	--maktab-dark-bg: var(--brown-night);
	--maktab-border-light: var(--border-soft);
	--maktab-red: var(--crit);
	--maktab-orange: var(--warn);
	--maktab-amber-dark: var(--sand-deep);
	--maktab-blue: var(--info);
	--maktab-sky-blue: var(--info);
	/* Frappe core variables — bridged to v2 tokens. */
	--bg-color: var(--beige);
	--fg-color: var(--cream);
	--text-color: var(--ink);
	--text-muted: var(--ink-muted);
	--border-color: var(--border);
	--card-bg: var(--cream);
	--subtle-fg: var(--straw);
	--control-bg: #FFFFFF;
}

/* ── v2 Redesign Tokens (post-handoff, semantic naming) ──
   These coexist with --maktab-* during phased migration. Pages migrate to
   var(--success / --warn / --crit / --overdue / --info / --basil-* / --beige
   / --cream / --ink / etc.) as they're rewritten. Old --maktab-* tokens stay
   live until phase 6 cleanup. tokens.css in design_handoff_maktab_redesign
   is canonical — if anything here disagrees, that file wins. */
:root {
	/* Surface palette */
	--beige: #F5F0E6;       /* PAGE background */
	--cream: #FAF8F2;       /* CARD background */
	--straw: #D4C5A0;       /* light surface, dividers, hover */
	--sand:  #C2AD7E;       /* borders, gold accents */
	--sand-deep: #8B6914;   /* darker gold (warn text) */
	--brown: #6B4F36;       /* secondary headings */
	--brown-deep: #4A3728;  /* sidebar, navbar, primary button */
	--brown-night: #2A2018; /* darkest */
	--ink: #3D2E22;         /* body text */
	--ink-muted: #6B5A48;   /* secondary text (WCAG AA on --beige) */
	--border: #E0D8CA;
	--border-soft: rgba(212,197,160,0.4);

	/* Status — semantic. Use these everywhere, never palette names. */
	--success: #5E7D5E;
	--success-bg: #E8EFE6;
	--info: #3D6D8F;
	--info-bg: #E2EEF6;
	--warn: #D4A05A;
	--warn-bg: #F5E8CC;
	--warn-text: #8B6914;
	--crit: #C0735E;
	--crit-bg: #F4DDD2;
	--overdue: #8B3A25;
	--overdue-bg: #EFCFC4;

	/* Hasawi basil (الريحان الحساوي) — secondary accent system for
	   cultural/charitable/community surfaces, heir comms, impersonation. */
	--basil-leaf:      #4A6B3A;
	--basil-leaf-bg:   #E1E9D6;
	--basil-stem:      #7A8B5C;
	--basil-flower:    #6B4576;
	--basil-flower-bg: #E8DCEE;
	--basil-bud:       #B197C2;
	--basil-pink:      #C9719B;
	--basil-pink-bg:   #F2DDE8;

	/* Entity-class palette (FIX 5) — religious-legal classification of the
	   eight asset pools. CLAUDE.md flags entity-boundary confusion (Family
	   heir misreading Khums as Thilth) as P0. These four tokens REUSE the
	   existing semantic palette above — no new hex values — and drive
	   per-row border-inline-start + .entity-pill chrome on E1/E2/E3/C5.
	     charitable  = --success (green)        Thilth, Majlis (mosque)
	     passthrough = --info (blue)            Khums (held in trust)
	     personal    = --warn (amber)           Dr. Issam, Family Home, Grandma's
	     operational = --ink-muted (neutral)    Maktab office, Wood Pallet Factory
	   Tied to maktab_bouholaigah.utils.entity_class (Python + JS mirror). */
	--entity-charitable:     var(--success);
	--entity-charitable-bg:  var(--success-bg);
	--entity-passthrough:    var(--info);
	--entity-passthrough-bg: var(--info-bg);
	--entity-personal:       var(--warn);
	--entity-personal-bg:    var(--warn-bg);
	--entity-operational:    var(--ink-muted);
	--entity-operational-bg: var(--straw);

	/* Type — Cairo single-family for both Arabic and Latin. tnum is enabled
	   site-wide on body so financial table digits align vertically. */
	--font-ar:  'Cairo', system-ui, sans-serif;
	--font-en:  'Cairo', system-ui, sans-serif;
	--font-num: 'Cairo', system-ui, sans-serif;

	/* Type scale — canonical, matches mockups. */
	--text-xs:   11px;
	--text-sm:   12px;
	--text-base: 14px;
	--text-md:   15px;
	--text-lg:   17px;
	--text-xl:   20px;
	--text-2xl:  24px;
	--text-3xl:  30px;
	--text-4xl:  38px;

	/* Spacing — 4px grid */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-8: 32px;
	--s-10: 40px;
	--s-12: 48px;
	--s-16: 64px;

	/* Radii — document-aesthetic, small throughout. --r-sq for filter pills
	   (toggleable, paper-tab feel). --r-pill only for status chips, avatars. */
	--r-sq: 2px;
	--r-sm: 3px;
	--r-md: 6px;
	--r-lg: 10px;
	--r-pill: 999px;

	/* Shadows — paper-on-sand. Avoid heavier values. */
	--shadow-sm: 0 1px 2px rgba(74,55,40,0.04);
	--shadow-md: 0 2px 6px rgba(74,55,40,0.06), 0 1px 2px rgba(74,55,40,0.04);
	--shadow-lg: 0 8px 24px rgba(74,55,40,0.10), 0 2px 6px rgba(74,55,40,0.06);
	--shadow-modal: 0 20px 60px rgba(74,55,40,0.20);

	/* Motion */
	--ease: cubic-bezier(.32,.72,.4,1);
	--dur-fast: .12s;
	--dur-base: .18s;
	--dur-slow: .28s;

	/* Latin caption helper tracking */
	--caption-tracking: 0.08em;
	--caption-tracking-loose: 0.12em;
}

/* v2 dark mode — every status, basil, surface, shadow has a dark partner.
   Warm-black, not blue-black. Sidebar darker than page bg. */
[data-theme="dark"] {
	--beige: #18130D;
	--cream: #221C14;
	--straw: #3D3428;
	--sand:  #5A4F3C;
	--sand-deep: #8B6914;
	--brown: #C2AD7E;
	--brown-deep: #1F1A12;
	--brown-night: #0F0C08;
	--ink: #E8E0D4;
	--ink-muted: #A89A82;
	--border: #3D3428;
	--border-soft: rgba(194,173,126,0.18);

	--success: #8FB082;
	--success-bg: #1F2A1F;
	--info: #7BA8C4;
	--info-bg: #18242E;
	--warn: #E5BB7A;
	--warn-bg: #2A2218;
	--warn-text: #E5BB7A;
	--crit: #D89884;
	--crit-bg: rgba(216,152,132,0.18);
	/* FB-2026-00255 round 9: prior revision wrote
	   `--overdue: var(--overdue)` / `--overdue-bg: var(--overdue-bg)` here,
	   a custom-property self-cycle which resolves to the initial (empty)
	   value. That silently broke EVERY consumer of var(--overdue) in dark
	   mode: rent collection "overdue" chips, negative-amount columns on
	   entity-ledger / account-detail / reconciliation, destructive
	   buttons, danger menu items, text-red helpers — all rendered as
	   cream/transparent. Now uses a slightly-more-saturated rust to
	   distinguish from --crit (soft salmon), consistent with the
	   light-mode pairing (--crit:#C0735E vs --overdue:#8B3A25). */
	--overdue: #E27A5E;
	--overdue-bg: rgba(226,122,94,0.18);

	/* Dark variants. Earlier revisions used `var(--basil-flower)` here
	   intending to inherit from :root — but a custom-property self-cycle
	   resolves to the initial (empty) value, so every basil-tinted surface
	   (notes pill, entity chip, etc.) lost its color in dark. FB-2026-00235
	   surfaced the lavender notes case; fixing the family while here. */
	--basil-leaf:      #A8C896;
	--basil-leaf-bg:   rgba(168,200,150,.16);
	--basil-stem:      #9CAA82;
	--basil-flower:    #C9A4D4;
	--basil-flower-bg: rgba(169,133,182,.18);
	--basil-bud:       #C5ADD3;
	--basil-pink:      #E59ABA;
	--basil-pink-bg:   rgba(229,154,186,.16);

	--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
	--shadow-md: 0 2px 8px rgba(0,0,0,0.5);
	--shadow-lg: 0 8px 28px rgba(0,0,0,0.55);
	--shadow-modal: 0 24px 72px rgba(0,0,0,0.7);
}

/* Latin caption helper — small uppercase, letter-spaced.
   Use .caption (0.08em tracking) by default, .caption--loose (0.12em) for
   status pills + section heads. See README §2.8 caption matrix. */
.caption {
	font-family: var(--font-en);
	font-size: var(--text-xs);
	letter-spacing: var(--caption-tracking);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink-muted);
}
.caption--loose { letter-spacing: var(--caption-tracking-loose); }

/* ── v2 Redesign Components (scoped per-page during migration) ──
   Unprefixed BEM names (.btn, .pill, .tbl, .stat, .f-pill) collide with
   Frappe's Bootstrap classes if applied globally. During the phased
   migration each surface scopes the new components inside its wrapper
   class — phase 2.5 uses .expiry-dashboard. Phase 2 (sidebar rebuild)
   will generalize to a body-level scope (likely .maktab-v2) once we
   have site-wide chrome to anchor it. */

/* ── Buttons ── */
.expiry-dashboard .btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	font-family: var(--font-ar); font-size: var(--text-base); font-weight: 500;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
	white-space: nowrap;
	background: var(--cream); color: var(--ink);
	line-height: 1.2;
}
.expiry-dashboard .btn--primary { background: var(--brown-deep); color: var(--cream); border-color: transparent; }
.expiry-dashboard .btn--primary:hover { background: #5a4332; }
.expiry-dashboard .btn--secondary { background: var(--cream); color: var(--ink); border-color: var(--border); }
.expiry-dashboard .btn--secondary:hover { background: var(--straw); border-color: var(--sand); }
.expiry-dashboard .btn--ghost { background: transparent; color: var(--brown-deep); }
.expiry-dashboard .btn--ghost:hover { background: rgba(212,197,160,.25); }
.expiry-dashboard .btn--destructive { background: var(--overdue); color: var(--cream); }
.expiry-dashboard .btn--destructive:hover { background: #6e2d1e; }
.expiry-dashboard .btn--sm { padding: 5px 10px; font-size: var(--text-sm); }
.expiry-dashboard .btn--xs { padding: 3px 8px; font-size: var(--text-xs); }

/* ── Pills (status badges) ── */
.expiry-dashboard .pill {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 9px;
	font-size: var(--text-xs); font-weight: 600;
	border-radius: var(--r-pill);
	background: var(--straw); color: var(--brown-deep);
	white-space: nowrap;
	border: 1px solid transparent;
	line-height: 1.6;
}
.expiry-dashboard .pill::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; opacity: .7;
}
.expiry-dashboard .pill--success { background: var(--success-bg); color: var(--success); }
.expiry-dashboard .pill--info { background: var(--info-bg); color: var(--info); }
.expiry-dashboard .pill--warn { background: var(--warn-bg); color: var(--warn-text); }
.expiry-dashboard .pill--crit { background: var(--crit-bg); color: var(--crit); }
.expiry-dashboard .pill--overdue { background: var(--overdue-bg); color: var(--overdue); }
.expiry-dashboard .pill--neutral { background: var(--straw); color: var(--brown); }

/* ── Filter pills (toggleable, square 2px) ── */
.expiry-dashboard .f-pills { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.expiry-dashboard .f-pill {
	padding: 5px 12px;
	font-size: var(--text-sm);
	border-radius: var(--r-sq);
	background: var(--cream); color: var(--ink);
	border: 1px solid var(--border);
	cursor: pointer;
	font-family: var(--font-ar);
	transition: all var(--dur-fast);
	line-height: 1.4;
}
.expiry-dashboard .f-pill:hover { border-color: var(--sand); }
.expiry-dashboard .f-pill.is-active { background: var(--brown-deep); color: var(--cream); border-color: var(--brown-deep); }
.expiry-dashboard .f-pill .count { opacity: .7; margin-inline-start: 4px; font-family: var(--font-en); }

/* ── Stat cards (KPI row) ── */
.expiry-dashboard .stat-row {
	display: grid; gap: var(--s-3);
	grid-template-columns: repeat(6, 1fr);
	margin-bottom: var(--s-6);
}
.expiry-dashboard .stat {
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: var(--s-4) var(--s-5);
	cursor: pointer;
	transition: border-color var(--dur-fast), background var(--dur-fast);
}
.expiry-dashboard .stat:hover { border-color: var(--sand); }
.expiry-dashboard .stat.is-active {
	border-color: var(--brown-deep); background: var(--straw);
}
.expiry-dashboard .stat__label {
	font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--s-2);
}
.expiry-dashboard .stat__value {
	font-size: var(--text-3xl); font-weight: 600;
	font-family: var(--font-num); color: var(--brown-deep);
	line-height: 1.1;
}
.expiry-dashboard .stat--crit { background: var(--crit-bg); border-color: rgba(192,115,94,.25); }
.expiry-dashboard .stat--crit .stat__value { color: var(--overdue); }
.expiry-dashboard .stat--warn { background: var(--warn-bg); border-color: rgba(212,160,90,.3); }
.expiry-dashboard .stat--warn .stat__value { color: var(--warn-text); }
.expiry-dashboard .stat--success { background: var(--success-bg); border-color: rgba(94,125,94,.25); }
.expiry-dashboard .stat--success .stat__value { color: var(--success); }
.expiry-dashboard .stat--info { background: var(--info-bg); border-color: rgba(61,109,143,.2); }
.expiry-dashboard .stat--info .stat__value { color: var(--info); }

/* Stat row collapses to 2 columns on tablet, 1 on mobile */
@media (max-width: 1024px) {
	.expiry-dashboard .stat-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.expiry-dashboard .stat-row { grid-template-columns: repeat(2, 1fr); }
	.expiry-dashboard .stat { padding: var(--s-3); }
	.expiry-dashboard .stat__value { font-size: var(--text-2xl); }
}

/* ── Expiry table — canonical .lv-table chrome (matches properties-list etc.) ──
   The bespoke .tbl / .tbl--expiry / .col-* chrome was retired (FB-2026-00202)
   in favor of the site-wide canonical pattern. Per-page tweaks below are
   purely additive: sticky filters/thead, a muted Company column, and the
   numeric font for the Days cell.

   Width handling — table-layout:fixed with PERCENTAGE widths.
   - Percentages let the browser shrink every column proportionally as the
     viewport narrows (FB-2026-00213) instead of keeping fixed-px columns
     at full size and collapsing the auto-sized Holder column to zero.
   - table-layout:fixed makes column widths a function of the header rule,
     not the row content, so widths stay stable across filter clicks
     (FB-2026-00202) — every filter shows the same column geometry.
   The percentages roughly map the original px allocation at ~880px table
   width (the canonical wrap inside .main-section at 1259x796 with sidebar):
     Status 110/880=12.5%  Type 140/880=16%   Holder auto≈14%
     Expiry 120/880=13.5%  Days 90/880=10%    Company 200/880=23%
     Action 120/880=14%   ─ totals 103% but with table-layout:fixed
   the browser normalises to the available width, so >100% is fine. */
.expiry-dashboard .lv-table.maktab-list-table {
	table-layout: fixed;
}
.expiry-dashboard .lv-table.maktab-list-table th:nth-child(1),
.expiry-dashboard .lv-table.maktab-list-table td:nth-child(1) { width: 11%; }   /* Status */
.expiry-dashboard .lv-table.maktab-list-table th:nth-child(2),
.expiry-dashboard .lv-table.maktab-list-table td:nth-child(2) { width: 14%; }   /* Type */
.expiry-dashboard .lv-table.maktab-list-table th:nth-child(3),
.expiry-dashboard .lv-table.maktab-list-table td:nth-child(3) { width: 22%; }   /* Holder (text) */
.expiry-dashboard .lv-table.maktab-list-table th:nth-child(4),
.expiry-dashboard .lv-table.maktab-list-table td:nth-child(4) { width: 13%; }   /* Expiry Date */
.expiry-dashboard .lv-table.maktab-list-table th:nth-child(5),
.expiry-dashboard .lv-table.maktab-list-table td:nth-child(5) { width:  9%; }   /* Days */
.expiry-dashboard .lv-table.maktab-list-table th:nth-child(6),
.expiry-dashboard .lv-table.maktab-list-table td:nth-child(6) { width: 19%; }   /* Company */
.expiry-dashboard .lv-table.maktab-list-table th:nth-child(7),
.expiry-dashboard .lv-table.maktab-list-table td:nth-child(7) { width: 12%; }   /* Action */

/* ── Sticky filter pills + thead (FB-2026-00203) ──
   Scroll ancestor is .main-section (overflow:auto on desktop). Summary cards
   scroll out — they're context, not always-needed. Filter pills stick at the
   top of .main-section; thead sticks just below them. Backgrounds are required
   so scrolled rows are occluded behind the sticky chrome.

   Reopen note: gaps between filter row and thead row were transparent,
   letting scrolling rows show through. Fix:
   1. Filter row: zero margin-bottom + extra padding-bottom so the opaque
      block runs flush down to exactly the thead sticky `top` (no
      transparent gap in between).
   2. Thead element + tr also painted opaque (was transparent — only
      th cells had bg, letting sub-pixel gaps leak rows behind). */
.expiry-dashboard .expiry-filters {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--maktab-beige);
	padding: var(--s-2) 0 12px;
	margin: 0;
}
.expiry-dashboard .lv-table.maktab-list-table thead,
.expiry-dashboard .lv-table.maktab-list-table thead tr {
	background: var(--maktab-beige);
}
.expiry-dashboard .lv-table.maktab-list-table thead th {
	position: sticky;
	/* Matches filter row total height (8 pad-top + ~28 content + 12 pad-bottom = 48). */
	top: 48px;
	z-index: 4;
	background: var(--maktab-beige);
	/* Round-3 fix: with border-collapse:collapse the th's border-bottom is
	   painted on the cell grid line — it does NOT ride with the sticky cell,
	   so the divider "drops away" once the table scrolls. Replace the
	   border-bottom with an inset box-shadow, which paints inside the cell box
	   and therefore stays at the sticky-positioned bottom edge unconditionally. */
	border-bottom: 0;
	box-shadow: inset 0 -2px 0 var(--maktab-border);
}

/* Days cell — numeric font + late-state color. */
.expiry-dashboard .lv-table.maktab-list-table .days-cell { font-family: var(--font-num); font-weight: 600; }
.expiry-dashboard .lv-table.maktab-list-table .days-cell--late { color: var(--overdue); }

/* Company column muted on desktop, hidden on mobile (low priority). */
.expiry-dashboard .lv-table.maktab-list-table .expiry-company-cell { color: var(--ink-muted); }
@media (max-width: 768px) {
	.expiry-dashboard .lv-table.maktab-list-table th:nth-child(6),
	.expiry-dashboard .lv-table.maktab-list-table td:nth-child(6) {
		display: none;
	}
}

/* ── Empty state inside expiry-dashboard ── */
.expiry-dashboard .empty {
	text-align: center; padding: var(--s-12) var(--s-6);
	color: var(--ink-muted);
}

/* ── Utilities ── */
.expiry-dashboard .muted { color: var(--ink-muted); }

/* ── Dark-mode component overrides ──
   --brown-deep flips to sidebar-bg in dark mode and --cream flips to
   card-bg, so any "dark button with cream text" pattern goes dark-on-dark.
   Use --ink (light text in dark mode) for surfaces that need high contrast
   against a brown-deep background, and use --ink for unmodified .stat__value
   so the neutral "Total" card stays readable. */
[data-theme="dark"] .expiry-dashboard .btn--primary,
[data-theme="dark"] .expiry-dashboard .btn--destructive,
[data-theme="dark"] .expiry-dashboard .f-pill.is-active {
	color: var(--ink);
}
[data-theme="dark"] .expiry-dashboard .stat__value {
	color: var(--ink);
}
/* Status-modifier .stat__value colors win via specificity; no override needed. */

/* ── Global Typography ──
   Cairo single-family for both Arabic and Latin (set in --font-ar/en/num).
   font-feature-settings: "tnum" enables tabular figures so all numerals
   share the same advance width — financial tables align vertically.
   "lnum" forces lining (uppercase-height) figures over old-style. */
body,
.frappe-control,
.page-container,
.modal-dialog,
.body-sidebar,
.frappe-list,
input, select, textarea, button,
.btn, .alert, .badge {
	font-family: var(--font-ar) !important;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── Color Scheme ── */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Splash screen handled at end of file — see @media prefers-color-scheme */

/* ── Page Background ──
   html bg controls overscroll bounce color on iOS Safari.
   Set both a raw fallback AND the variable for dark mode. */
html {
	/* Raw color, NOT the CSS variable. The variable gets temporarily
	   overridden to dark by prefers-color-scheme:dark media query before
	   Frappe sets data-theme, which makes Safari cache a dark overscroll. */
	background-color: #F5F0E6 !important;
	overscroll-behavior-x: none !important;
}
/* When modal is open, darken html/body to match the overlay tint.
   Prevents solid beige showing behind iOS address bar. */
html:has(body.modal-open) {
	background-color: #C2BCB3 !important;
	transition: background-color 0.25s ease !important;
}
html[data-theme="dark"] {
	background-color: #18130D !important;
}
html[data-theme="dark"]:has(body.modal-open) {
	background-color: #0F0C09 !important;
}
body {
	background-color: var(--maktab-beige) !important;
	color: var(--maktab-text) !important;
	overflow-x: hidden !important;
	overscroll-behavior-x: none !important;
}
/* FB-2026-00210: only apply the body bg transition AFTER the initial page
   paint has settled. Frappe's desk.html ships with `data-theme="light"` even
   when the user has dark mode preferred via our localStorage flag, so the
   IIFE in maktab.js flips data-theme→dark slightly after first paint. With
   an unconditional `transition: background-color 0.25s` the body then
   animates light→dark over 250ms, while the sidebar/splash with hard-set
   dark backgrounds snap instantly — which the user sees as a "darker block"
   behind the palm tree. Gating the transition on `.maktab-theme-ready`
   (added at first rAF) makes the initial flip instantaneous, while
   subsequent toggle clicks still animate smoothly. */
html.maktab-theme-ready body {
	transition: background-color 0.25s ease !important;
}

/* Language-switch overlay. Toggle handler injects a fixed-position palm-tree
   loading splash that covers everything before reload. Frappe shows its own
   .splash with our palm during boot (see maktab.fix_splash), so the palm
   stays visible across the reload boundary — to the user it looks like the
   page is loading, not blanking out. Pointer-events locked so a stray
   double-click can't fire two reloads. */
.maktab-lang-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	background: var(--maktab-beige) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: all !important;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.maktab-lang-overlay.is-shown {
	opacity: 1;
}
.maktab-lang-overlay img {
	width: 64px;
	height: 64px;
	animation: maktab-pulse 1.8s ease-in-out infinite;
}
[data-theme="dark"] .maktab-lang-overlay {
	background: var(--maktab-beige) !important;
}
body.modal-open {
	background-color: #C2BCB3 !important;
}
[data-theme="dark"] body.modal-open {
	background-color: #0F0C09 !important;
}

/* Scroll lock when slide panel is open (iOS needs position:fixed) */
body.maktab-panel-open {
	position: fixed !important;
	width: 100% !important;
	overflow: hidden !important;
}

/* FB-2026-00177/180: scroll lock when the sidebar drawer is open.
   Two earlier attempts both broke things:
   - `html { overflow: hidden }` reset document.scrollingElement.scrollTop
     on WebKit (visible scroll-jump-to-top on open).
   - `body { position: fixed; top: -scrollY }` preserved position but the
     unpin at close-time forced a layout reflow that iOS used to skip the
     drawer's transform animation paint frames (drawer "just disappears").
   Body-only overflow:hidden + touch-action:none preserves scrollY without
   shifting the body, so the close transition can paint cleanly. */
body.maktab-modal-scroll-lock {
	overflow: hidden !important;
	touch-action: none !important;
	overscroll-behavior: none !important;
}

/* ── Dark Mode — Palm garden at dusk ──
   Bridged --maktab-* and Frappe core tokens auto-flip via the v2 dark block
   above. Only non-bridgeable legacy tokens (--maktab-leaf, --maktab-sky,
   --maktab-sky-hover, --maktab-light-blue, --maktab-white, --maktab-shadow*)
   plus --control-bg need explicit dark values here. */
[data-theme="dark"] {
	--maktab-leaf: #8FB88F;
	--maktab-sky: #9AC4E0;
	--maktab-sky-hover: #B0D4F0;
	--maktab-light-blue: #1A2A3A;
	--maktab-white: var(--ink);
	--maktab-shadow: none;
	--maktab-shadow-hover: none;
	/* Frappe control bg — slightly lighter than card bg for input contrast */
	--control-bg: #2E2820;
}

/* ── Detail slide panel ── */
/* Grey backdrop — separate element, sits behind the panel.
   Element is created/destroyed in JS so iOS Safari fully repaints
   when it's removed from the DOM (CSS-only hides leave painted pixels
   in the address bar area on iOS). */
.maktab-detail-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Warm-brown wash, matches dialog backdrop. Pass E retoken: was a beige
	   tint (rgba(237,229,212,0.55)); now matches the brown-deep semantic. */
	background: rgba(74, 55, 40, 0.32);
	z-index: 1049;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.maktab-detail-backdrop.open {
	opacity: 1;
	pointer-events: auto;
}
[data-theme="dark"] .maktab-detail-backdrop {
	background: rgba(0, 0, 0, 0.45);
}
.maktab-detail-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(480px, 92vw);
	/* Pass E: --cream (cards) instead of --beige (page) so the panel
	   reads as a lifted surface, not a continuation of the page. */
	background: var(--cream);
	z-index: 1050;
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform 0.2s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.maktab-detail-panel.open {
	transform: translateX(0);
}
/* FB-2026-00183: Arabic / RTL — slide in from the visual LEFT edge so
   the panel matches reading direction. Anchor flips, slide-out vector
   flips with it (-100% instead of +100%). */
[dir="rtl"] .maktab-detail-panel {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}
[dir="rtl"] .maktab-detail-panel.open {
	transform: translateX(0);
}
/* FB-2026-00196: on mobile, narrow the panel so the page behind shows
   ~80px strip — comfortable thumb-tap area to dismiss. Desktop max
   (480px) is unchanged. At 393px viewport → 314px panel (79px visible);
   at 768px → 614px capped to 480. */
@media (max-width: 768px) {
	.maktab-detail-panel {
		width: min(480px, 80vw);
	}
}
.maktab-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--maktab-border);
	flex-shrink: 0;
}
.maktab-detail-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--maktab-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}
.maktab-detail-back {
	background: none;
	border: none;
	font-size: 22px;
	color: var(--maktab-text-muted);
	cursor: pointer;
	padding: 0 8px 0 0;
	line-height: 1;
	flex-shrink: 0;
}
.maktab-detail-back:hover {
	color: var(--maktab-text);
}
.maktab-detail-close {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--maktab-text-muted);
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	flex-shrink: 0;
	margin-inline-start: 12px;
}
.maktab-detail-close:hover {
	color: var(--maktab-text);
}
.maktab-detail-body {
	flex: 1;
	overflow-y: auto;
	/* FB-2026-00216: belt-and-suspenders — even if some descendant has a
	   long unbroken token, the panel itself never grows a horizontal
	   scrollbar. Specific overflow defenses on .fb-panel-ua handle the
	   actual wrap; this is the safety net. */
	overflow-x: hidden;
	padding: 16px 20px 40px;
}
@media (max-width: 768px) {
	.maktab-detail-body { padding: 16px 12px 40px; }
}
/* Reuse lv-card styles in the panel */
.maktab-detail-body .lv-card {
	padding: 16px;
	border-bottom: 1px solid var(--maktab-border);
}
[data-theme="dark"] .maktab-detail-panel {
	/* Use --maktab-cream (slightly lighter than body) so the panel edge
	   stays visible against the dark page background. Thin left border
	   for definition; the backdrop overlay provides the rest of the
	   separation. No shadow per project convention. */
	background: var(--maktab-cream);
	border-inline-start: 1px solid var(--maktab-border);
}
[data-theme="dark"] .maktab-detail-title {
	color: var(--maktab-text);
}

/* ── Navbar ── */
.navbar {
	background-color: var(--maktab-dark-brown) !important;
	border-bottom: 3px solid var(--maktab-sand) !important;
	box-shadow: none !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand img + span,
.navbar .dropdown-toggle {
	color: var(--maktab-straw) !important;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
	color: var(--maktab-white) !important;
}

.navbar .navbar-brand {
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	letter-spacing: 0.5px;
}

/* ── Page Head / Titles ── */
.page-head,
.page-head .page-title .title-text {
	color: var(--maktab-text) !important;
}

.page-head {
	background-color: var(--maktab-cream) !important;
	border-bottom: 1px solid var(--maktab-border) !important;
}

.section-head {
	color: var(--maktab-brown) !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	border-bottom: 2px solid var(--maktab-sand) !important;
	padding-bottom: 8px !important;
	margin-bottom: 16px !important;
	margin-top: 24px !important;
}

/* ── Cards (reusable component) ── */
.maktab-card,
.frappe-card,
.widget.widget-shadow,
.wasi-dashboard-container .card,
.thilth-report .col-md-2 > div,
.family-overview .card {
	background: var(--maktab-cream) !important;
	border: 1px solid var(--maktab-border) !important;
	border-radius: var(--maktab-radius) !important;
	box-shadow: var(--maktab-shadow) !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.maktab-card:hover,
.widget.widget-shadow:hover,
.wasi-dashboard-container .card:hover,
.thilth-report .col-md-2 > div:hover {
	box-shadow: var(--maktab-shadow-hover) !important;
	transform: translateY(-1px);
}

.wasi-dashboard-container .card h5 {
	color: var(--maktab-text) !important;
	font-weight: 600;
}

/* ── Buttons ── */
.btn-primary,
.btn-primary-dark {
	background-color: var(--maktab-brown) !important;
	border-color: var(--maktab-brown) !important;
	color: var(--maktab-white) !important;
	border-radius: var(--r-md) !important;
	font-weight: 600 !important;
	transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary-dark:hover {
	background-color: var(--maktab-dark-brown) !important;
	border-color: var(--maktab-dark-brown) !important;
	transform: translateY(-1px);
	box-shadow: var(--maktab-shadow) !important;
}

.btn-secondary,
.btn-default {
	background-color: var(--maktab-cream) !important;
	border-color: var(--maktab-sand) !important;
	color: var(--maktab-brown) !important;
	border-radius: var(--r-md) !important;
	font-weight: 500 !important;
}

.btn-secondary:hover,
.btn-default:hover {
	background-color: var(--maktab-straw) !important;
	border-color: var(--maktab-brown) !important;
}

/* ── Links ──
   Plain rule wins by cascade order over Frappe's a{color:$text-color}; no
   !important needed. Color comes from --maktab-link (now warm brown — see
   token definition for context). Hover deepens one shade and underlines —
   no blue anywhere in the link state machine. */
a {
	color: var(--maktab-link);
}

a:hover {
	color: var(--brown-deep);
	text-decoration: underline;
}

[data-theme="dark"] a:hover {
	/* Dark-mode --brown-deep is near-black sidebar bg; use --brown (sand) instead. */
	color: var(--sand);
}

/* Defensive: kill any Frappe-injected link-color/text-blue tokens at body scope
   so legacy widgets we haven't retoken'd don't suddenly render Frappe-blue.
   Bridged to --maktab-link so dark-mode flip cascades automatically. */
body {
	--link-color: var(--maktab-link);
	--text-blue: var(--maktab-link);
}

/* Keep button text colors correct */
.btn-primary a, .btn a {
	color: inherit !important;
}

/* ── Tables ── */
.table,
.frappe-list .list-row,
.report-wrapper .dt-scrollable table {
	background-color: var(--maktab-cream) !important;
}

.table th {
	background-color: var(--maktab-straw) !important;
	color: var(--maktab-text) !important;
	font-weight: 600 !important;
	border-bottom: 2px solid var(--maktab-sand) !important;
}

.table td {
	border-color: var(--maktab-border) !important;
	color: var(--maktab-text) !important;
}

.table-bordered {
	border-color: var(--maktab-border) !important;
}

.table tr:hover td {
	background-color: rgba(212, 197, 160, 0.15) !important;
}

/* ── List View ── */
.frappe-list .list-row {
	border-bottom: 1px solid var(--maktab-border) !important;
}

.frappe-list .list-row:hover {
	background-color: rgba(212, 197, 160, 0.1) !important;
}

.frappe-list .list-row-head {
	background-color: var(--maktab-straw) !important;
}

/* ── Form View ── */
.form-section,
.section-body {
	border-color: var(--maktab-border) !important;
}

.frappe-control .control-label,
.form-group label {
	color: var(--maktab-brown) !important;
	font-weight: 500 !important;
}

.form-control,
.frappe-control input,
.frappe-control select,
.frappe-control textarea {
	border-color: var(--maktab-sand) !important;
	border-radius: var(--r-md) !important;
	background-color: var(--maktab-white) !important;
}

.form-control:focus,
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus {
	border-color: var(--maktab-link) !important;
	box-shadow: none !important;
}

/* ── Alerts ── */
.alert-warning {
	background-color: rgba(212, 160, 90, 0.12) !important;
	border: 1px solid var(--maktab-amber) !important;
	color: var(--text-on-orange) !important;
	border-radius: var(--r-md) !important;
}

.alert-danger,
.alert-error {
	background-color: rgba(192, 115, 94, 0.12) !important;
	border: 1px solid var(--maktab-terracotta) !important;
	color: var(--text-on-red) !important;
	border-radius: var(--r-md) !important;
}

.alert-success {
	background-color: rgba(94, 125, 94, 0.12) !important;
	border: 1px solid var(--maktab-green) !important;
	color: var(--text-on-green) !important;
	border-radius: var(--r-md) !important;
}

.alert-info {
	background-color: rgba(143, 184, 212, 0.12) !important;
	border: 1px solid var(--maktab-sky) !important;
	color: var(--text-on-blue) !important;
	border-radius: var(--r-md) !important;
}

/* ── Indicator Pills ── */
/* Light mode: tinted backgrounds with dark text */
:root,
[data-theme="light"] {
	--bg-green: rgba(94, 125, 94, 0.15);
	--text-on-green: #3A5A3A;
	--bg-orange: rgba(184, 134, 11, 0.15);
	--text-on-orange: #8B6508;
	--bg-red: rgba(192, 115, 94, 0.15);
	--text-on-red: #7A3B2A;
	--bg-blue: rgba(74, 127, 160, 0.15);
	--text-on-blue: #2D6080;
	--bg-grey: rgba(140, 122, 107, 0.18);
	--text-on-grey: #5A4A3C;
	--bg-gray: rgba(140, 122, 107, 0.18);
	--text-on-gray: #5A4A3C;
	--bg-cyan: rgba(91, 158, 166, 0.15);
	--text-on-cyan: #3A7A82;
	--bg-pink: rgba(176, 122, 138, 0.15);
	--text-on-pink: #7A4A5A;
	--bg-yellow: rgba(184, 150, 11, 0.15);
	--text-on-yellow: #8B7208;
	--bg-purple: rgba(122, 107, 158, 0.15);
	--text-on-purple: #4A3D6A;
	--bg-darkgrey: rgba(107, 94, 82, 0.18);
	--text-on-darkgrey: #4A3D32;
	--bg-light-blue: rgba(106, 155, 191, 0.15);
	--text-on-light-blue: #3A6A8A;
}
/* Dark mode: brighter tints on dark background */
[data-theme="dark"] {
	--bg-green: rgba(107, 143, 107, 0.25);
	--text-on-green: #8FB88F;
	--bg-orange: rgba(224, 176, 106, 0.2);
	--text-on-orange: #E0B06A;
	--bg-red: rgba(212, 138, 116, 0.2);
	--text-on-red: #D48A74;
	--bg-blue: rgba(154, 196, 224, 0.2);
	--text-on-blue: #9AC4E0;
	--bg-grey: rgba(154, 138, 122, 0.2);
	--text-on-grey: #B0A090;
	--bg-gray: rgba(154, 138, 122, 0.2);
	--text-on-gray: #B0A090;
	--bg-cyan: rgba(107, 170, 178, 0.2);
	--text-on-cyan: #8FC8D0;
	--bg-pink: rgba(188, 138, 154, 0.2);
	--text-on-pink: #C8A0B0;
	--bg-yellow: rgba(196, 162, 26, 0.2);
	--text-on-yellow: #E0C860;
	--bg-purple: rgba(138, 122, 170, 0.2);
	--text-on-purple: #B0A0D0;
	--bg-darkgrey: rgba(122, 110, 96, 0.2);
	--text-on-darkgrey: #A09080;
	--bg-light-blue: rgba(122, 168, 204, 0.2);
	--text-on-light-blue: #9AC4E0;
}

.indicator-pill,
.indicator-pill-right {
	font-weight: 700 !important;
	font-size: 0.72rem !important;
	padding: 3px 10px !important;
	border-radius: var(--r-lg) !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	height: auto !important;
}

/* Hide the colored dot before pill text */
.indicator-pill::before,
.indicator-pill-right::after {
	display: none !important;
	content: none !important;
}

/* Inner spans inherit pill color */
.indicator-pill span,
.indicator-pill .ellipsis {
	color: inherit !important;
	background: transparent !important;
}

/* Fix white rectangle: .level-right has white background by default */
.frappe-list .level-right {
	background: transparent !important;
}

/* Hide activity items that create artifacts at end of rows on mobile */
.list-row-activity {
	display: none !important;
}

/* ── Hide Frappe workspace chrome on custom pages ──
   Frappe injects a workspace-container above our page content,
   pushing it ~600px below the fold. Hide it on maktab. */
.page-container[data-page-container="maktab"] .workspace-container,
.page-container[data-page-container="maktab"] .codex-editor,
body[data-route="maktab"] .workspace-container,
body[data-route="maktab"] .codex-editor {
	display: none !important;
}

.badge-success { background-color: var(--bg-green) !important; color: var(--text-on-green) !important; }
.badge-danger { background-color: var(--bg-red) !important; color: var(--text-on-red) !important; }
.badge-warning { background-color: var(--bg-orange) !important; color: var(--text-on-orange) !important; }
.badge-info { background-color: var(--bg-blue) !important; color: var(--text-on-blue) !important; }


/* ── Mobile navbar ── */
@media (max-width: 768px) {
	/* On mobile, the page-head already has the hamburger menu,
	   title, search, and action buttons. The separate navbar
	   is redundant and wastes vertical space. Hide it. */
	.navbar {
		display: none !important;
	}
}

/* Hide Frappe's sidebar-toggle burger at every viewport.
   Our sidebar (v4) is decoupled from Frappe — `<aside class="maktab-sidebar">`
   is a direct body child, and `.body-sidebar-container { display: none }`.
   Frappe's burger toggles its own (hidden) sidebar, so it does nothing
   useful for our users — pure dead UX. Mobile users get the bottom nav
   Menu tab; desktop/tablet users see our maktab-sidebar directly.
   Must hide both the button AND the sidebar-toggle-placeholder SVG
   that Frappe renders independently. */
.page-head .sidebar-toggle-btn,
.page-head .sidebar-toggle-placeholder {
	display: none !important;
}

/* ── Consistent background on all containers ── */
.main-section,
.desk-page,
.page-container,
.page-body,
.layout-main-section,
.layout-main-section-wrapper,
.page-head {
	background-color: var(--maktab-beige) !important;
}

/* ── Minor layout tweaks (all screen sizes) ── */
.codex-editor {
	min-height: auto !important;
}
.page-body {
	padding-bottom: 0 !important;
	border: none !important;
}
.frappe-list,
.frappe-list .result,
.frappe-list .result-container,
.frappe-list .list-row-container,
.layout-side-section {
	border-left: none !important;
	border-right: none !important;
}
/* Remove sticky overlay on right side of list rows and collapse the
   empty .level-right area so data columns can use the full row width.
   Frappe makes .level-right sticky with a background, which creates a
   beige box that clips content. */
.list-row .level-right,
.list-row-head .level-right {
	position: static !important;
	background-color: transparent !important;
	border-left: none !important;
	box-shadow: none !important;
	flex: 0 0 auto !important;
	min-width: 0 !important;
	padding: 0 4px 0 0 !important;
}
/* Let level-left use full row width (Frappe defaults to flex:4 = 80%).
   Since .level-right is collapsed, data columns should fill the row. */
.list-row .level-left,
.list-row-head .level-left {
	min-width: 0 !important;
	flex: 1 1 100% !important;
}
/* Let list columns shrink to fit viewport instead of forcing horizontal scroll.
   Frappe sets min-width:150px + width:fit-content which overflows on narrow screens. */
.frappe-list .result .list-row-container {
	width: 100% !important;
}
.list-row .level-left .list-row-col,
.list-row-head .level-left .list-row-col {
	min-width: 0 !important;
	margin-right: 6px !important;
	flex-shrink: 1 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.page-head {
	border-bottom: 1px solid var(--maktab-border) !important;
}
/* Wasi Dashboard side padding */
.wasi-dashboard-container {
	padding: 0 15px;
}

/* ── Mobile layout fix ──
   On mobile, Frappe's .main-section { overflow: scroll } breaks
   position:sticky for the page-head. Fix by switching scroll root
   to body on mobile only. Desktop keeps Frappe's original layout. */
@media (max-width: 768px) {
	/* Page-head is now hidden via .maktab-no-titlebar — sticky toolbars
	   anchor at top: 0, so scroll-padding-top is also 0. */
	html {
		scroll-padding-top: 0;
	}
	.main-section {
		height: auto !important;
		min-height: 100vh !important;
		overflow: visible !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
		flex: 1 !important;
		overscroll-behavior-x: none !important;
	}
	/* FB-073/148: prevent iOS rubber-band from propagating up the document
	   and dislodging the fixed bottom-nav. Containment on the actual scroll
	   container (.main-section is where Round 6c found scrollTop > 0). */
	.main-section,
	.layout-main-section {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	/* FB-2026-00163: previously locked overscroll-behavior-y on html/body to
	   prevent the iOS rubber-band from dislodging the fixed bottom-nav (FB-073/
	   148 round 6i.4). Side effect: every page lost its bounce-back, which Ahmad
	   found made the app feel rigid. He explicitly preferred a small amount of
	   nav drift on overscroll over the rigid feel. The .main-section containment
	   above still protects against intra-content overscroll. */
	.page-container,
	.layout-main-section,
	.layout-main-section-wrapper {
		min-height: auto !important;
	}
	.frappe-list .result,
	.frappe-list .result-container {
		min-height: auto !important;
		height: auto !important;
	}
	.desk-page,
	.page-container,
	.page-body,
	.page-wrapper,
	.page-content {
		flex: none !important;
		flex-grow: 0 !important;
	}
	/* Form main section must fill the width on mobile.
	   The form sidebar becomes an overlay, so the wrapper should be 100%. */
	.layout-main-section-wrapper {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Hide form sidebar from flex flow on mobile (it's an overlay) */
	.layout-side-section {
		display: none !important;
	}
	.page-head {
		position: sticky !important;
		top: 0;
		z-index: 1010;
	}
	/* Dropdown menu must appear above the sticky page-head */
	.page-head .dropdown-menu {
		z-index: 1020 !important;
	}
	/* Minimize page-actions so it doesn't create a gap when empty.
	   The .col class gives it flex-grow:1 which fills remaining space.
	   Override to auto-size based on content only. */
	.page-head .page-actions {
		flex-grow: 0 !important;
		flex-basis: auto !important;
		padding: 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}
	/* Hide empty filter/action containers inside page-actions */
	.page-head .page-actions > .filters:empty,
	.page-head .page-actions > .custom-actions,
	.page-head .page-actions > .custom-mobile-actions:empty {
		display: none !important;
	}
}

/* ── Mobile cleanup ── */
@media (max-width: 768px) {
	/* Force form columns to stack vertically on mobile.
	   Bootstrap's base .col-sm-6 { flex: 0 0 50% } applies at all sizes
	   (not scoped to a media query), so we must override with exact classes. */
	.section-body > .form-column.col-sm-6,
	.section-body > .form-column.col-sm-4,
	.section-body > .form-column.col-sm-3,
	.section-body > .form-column.col-sm-20 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Hide sort selector, ID filter, page-form */
	.sort-selector,
	.mobile-id-filter,
	.page-form {
		display: none !important;
	}
	/* Hide list/kanban toggle */
	.page-head .page-actions .custom-btn-group {
		display: none !important;
	}

	/* ── Page header layout ── */
	.page-head .container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.page-head .page-head-content {
		gap: 4px !important;
		max-width: 100% !important;
		overflow: hidden !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
	.page-head .page-title {
		flex: 1 !important;
		min-width: 0 !important;
		overflow: hidden !important;
	}
	.page-head .title-text {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		font-size: 0.9rem !important;
	}
	/* Allow page title to wrap on maktab detail pages */
	.maktab-page-head .page-title {
		overflow: visible !important;
	}
	.maktab-page-head .navbar-breadcrumbs {
		max-width: calc(100vw - 60px) !important;
		overflow: visible !important;
	}
	.maktab-page-head .maktab-page-title {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}
	.maktab-page-head .maktab-page-title a {
		white-space: normal !important;
	}
	/* Right-align the buttons section, no extra spacing */
	.page-head .standard-items-section {
		margin-left: auto !important;
		margin-right: 0 !important;
		padding-right: 0 !important;
		flex-shrink: 0 !important;
		gap: 4px !important;
	}
	.page-head .page-actions {
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 4px !important;
		flex-shrink: 0 !important;
	}

	/* ── CRITICAL: Any button with .hide must stay hidden ──
	   Bootstrap .hide uses display:none!important. Our btn rules below
	   also use !important. We MUST re-enforce .hide AFTER the btn rules. */

	/* ── Visible icon-only buttons — 32x32 squares ──
	   Exclude .primary-action so Save/Submit buttons keep their text. */
	.page-head .standard-actions .btn:not(.hide):not(:empty):not(.primary-action),
	.page-head .page-actions .btn:not(.hide):not(:empty):not(.primary-action) {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
		max-width: 32px !important;
		max-height: 32px !important;
		padding: 0 !important;
		flex-shrink: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: 0 !important;
		line-height: 0 !important;
		border-radius: var(--r-md) !important;
		box-sizing: border-box !important;
	}
	/* Content inside icon-only buttons — centered */
	.page-head .standard-actions .btn:not(.hide):not(.primary-action) > *,
	.page-head .page-actions .btn:not(.hide):not(.primary-action) > * {
		font-size: 14px !important;
		line-height: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.page-head .btn:not(.hide):not(.primary-action) .icon,
	.page-head .btn:not(.hide):not(.primary-action) svg {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* ── Primary action button — compact text button on mobile ──
	   On list views this is "+ Add X", on form views it's "Save". */
	.page-head .primary-action:not(.hide):not(:empty) {
		height: 32px !important;
		min-height: 32px !important;
		padding: 0 10px !important;
		flex-shrink: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: var(--r-md) !important;
		font-size: 13px !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		gap: 4px !important;
	}
	/* Hide the long "Add Household Staff" text, keep only icon on list pages */
	.page-head .primary-action .hidden-xs {
		display: none !important;
	}

	/* ── Hide indicator pill on mobile to save header space ── */
	.page-head .indicator-pill {
		display: none !important;
	}

	/* ── Force-hide all buttons that have .hide or are empty ── */
	.page-head .btn.hide,
	.page-head .btn:empty,
	.page-head .standard-actions .btn.hide,
	.page-head .standard-actions .btn:empty,
	.page-head .primary-action.hide,
	.page-head .primary-action:empty,
	.page-head .btn-secondary.hide,
	.page-head .btn-secondary:empty {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
	}

	/* ── Hide search icon on mobile — our list pages have inline search ── */
	.page-head .search-bar {
		display: none !important;
	}
	/* ── Suppress tooltips and keyboard shortcut hints on mobile ── */
	.tooltip {
		display: none !important;
	}
	/* Hide keyboard shortcut badges and navigation hints on mobile */
	.modal .keyboard-shortcut,
	.modal .shortcut-key,
	.modal kbd,
	.command-palette .shortcut,
	.command-palette kbd,
	.dropdown-menu kbd,
	.dropdown-menu .shortcut,
	.dropdown-menu .shortcut-key,
	.awesomebar-modal-footer,
	.modal-footer kbd,
	.modal .footer-description {
		display: none !important;
	}

	/* ── Content padding ── */
	.container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.page-body {
		padding-top: 8px !important;
		border: none !important;
	}

	/* ── Kill bottom dead space on mobile ── */
	.layout-main-section,
	.frappe-list,
	.layout-main-section-wrapper,
	.page-container,
	.codex-editor,
	.page-body,
	.desk-page {
		min-height: auto !important;
		padding-bottom: 0 !important;
	}
	.frappe-list .result,
	.frappe-list .result-container {
		min-height: 0 !important;
		height: auto !important;
	}
	.list-paging-area {
		padding: 8px 0 !important;
		margin-bottom: 0 !important;
	}
	.page-head + .layout-main-section-wrapper {
		margin-bottom: 0 !important;
	}
}

/* ── Thilth Report card top borders ── */
.thilth-report .col-md-2 > div[style*="border-top: 3px solid var(--blue)"] {
	border-top-color: var(--maktab-link) !important;
}

.thilth-report .col-md-2 > div[style*="border-top: 3px solid var(--green)"] {
	border-top-color: var(--maktab-green) !important;
}

.thilth-report .col-md-2 > div[style*="border-top: 3px solid var(--orange)"] {
	border-top-color: var(--maktab-amber) !important;
}

.thilth-report .col-md-2 > div[style*="border-top: 3px solid var(--red)"] {
	border-top-color: var(--maktab-terracotta) !important;
}

/* ── Modals / Dialogs ──
   Full restyle to match Maktab's warm, clean aesthetic. Every Frappe dialog
   (New record, Edit, Upload, Confirm, Message) gets this treatment. */

/* Backdrop — warm brown tint */
/* FB-2026-00162: dropped from 0.85 → 0.55 so content shows through more. */
/* Backdrop — warm brown wash (was beige tint).
   The 0.45 alpha lets the page behind read as faint context, matching
   the dialogs handoff. */
.modal-backdrop { background-color: rgba(74, 55, 40, 0.45) !important; }
.modal-backdrop.show { opacity: 1 !important; }

/* Dialog container — constrained width, centered */
.modal-dialog {
	margin: 2rem auto !important;
	max-width: 460px !important;
}
.modal-dialog.modal-lg { max-width: 580px !important; }
.modal-dialog.modal-sm { max-width: 380px !important; }

/* Outer card — small radius (document aesthetic) + shadow-modal for lift */
.modal-content {
	background-color: var(--maktab-cream) !important;
	border: none !important;
	border-radius: var(--r-sm) !important;
	box-shadow: var(--shadow-modal) !important;
	overflow: hidden !important;
}

/* ── Header — sand-gold bar ── */
.modal-header {
	background: var(--sand) !important;
	border-bottom: 1px solid var(--maktab-sand) !important;
	border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
	padding: 10px 16px !important;
	align-items: center !important;
	min-height: 44px !important;
}
.modal-header .modal-title,
.modal-header .title-section h4,
.modal-header h4.modal-title {
	color: var(--maktab-dark-brown) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.1px !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}
.modal-header .title-section .indicator.hidden { display: none !important; }

/* Close button — clean X, no circle */
.modal-header .btn-modal-close {
	background: transparent !important;
	border: none !important;
	border-radius: var(--r-sm) !important;
	color: var(--maktab-brown) !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s !important;
}
.modal-header .btn-modal-close:hover {
	background: rgba(42, 32, 24, 0.08) !important;
	color: var(--maktab-dark-brown) !important;
}
.modal-header .btn-modal-close svg {
	width: 16px !important;
	height: 16px !important;
}

/* ── Body ── */
.modal-body {
	background-color: var(--maktab-cream) !important;
	padding: 16px !important;
	color: var(--maktab-text) !important;
}

/* ── Footer — clean action bar ── */
.modal-footer,
.modal .standard-actions {
	background-color: var(--maktab-beige) !important;
	border-top: 1px solid var(--maktab-border) !important;
	border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
	padding: 10px 16px !important;
	gap: 10px !important;
	display: flex !important;
	justify-content: flex-end !important;
}
/* Frappe toggles .hide on the footer when the dialog has no visible
   action buttons (e.g. msgprint with close-in-header). The display:flex
   rule above was silencing that, producing a stranded tan band below
   the message. Respect .hide. */
.modal-footer.hide {
	display: none !important;
}

/* ── Form controls inside dialogs ── */
.modal-body .frappe-control .control-label,
.modal-body label.control-label {
	color: var(--maktab-text-muted) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 4px !important;
}
.modal-body .form-control,
.modal-body input.input-with-feedback,
.modal-body select.input-with-feedback,
.modal-body textarea.input-with-feedback,
.modal-body .like-disabled-input {
	background-color: #FFFFFF !important;
	border: 1.5px solid var(--maktab-border) !important;
	border-radius: var(--r-md) !important;
	color: var(--maktab-text) !important;
	font-size: 13px !important;
	padding: 7px 10px !important;
	min-height: 36px !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
}
.modal-body .form-control:focus,
.modal-body input.input-with-feedback:focus,
.modal-body select.input-with-feedback:focus,
.modal-body textarea.input-with-feedback:focus {
	border-color: var(--maktab-brown) !important;
	box-shadow: none !important;
	outline: none !important;
}
.modal-body .form-group { margin-bottom: 12px !important; }
.modal-body .help-box,
.modal-body .help-text { color: var(--maktab-text-muted) !important; font-size: 12px !important; }

/* Checkboxes */
.modal-body .checkbox label,
.modal-body .checkbox .label-area {
	color: var(--maktab-text) !important;
	font-weight: 500 !important;
}

/* ── Footer buttons — polished pill-shaped actions ── */
.modal-footer .btn,
.modal .standard-actions .btn {
	border-radius: var(--r-md) !important;
	padding: 7px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	min-height: 34px !important;
	border: none !important;
	transition: all 0.15s ease !important;
}
.modal-footer .btn-primary,
.modal .standard-actions .btn-primary {
	background: var(--maktab-brown) !important;
	color: var(--cream) !important;
	box-shadow: none !important;
}
.modal-footer .btn-primary:hover,
.modal .standard-actions .btn-primary:hover {
	background: var(--maktab-dark-brown) !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
}
.modal-footer .btn-secondary,
.modal-footer .btn-default,
.modal .standard-actions .btn-secondary,
.modal .standard-actions .btn-default {
	background: var(--maktab-cream) !important;
	color: var(--maktab-text) !important;
	border: 1.5px solid var(--maktab-border) !important;
}
.modal-footer .btn-secondary:hover,
.modal-footer .btn-default:hover {
	background: var(--maktab-straw) !important;
	border-color: var(--maktab-sand) !important;
}

/* ── Mobile bottom-sheet (≤ 768px) ──
   Phones AND tablets get bottom-sheet dialogs. align-items sits on .modal
   (the full-viewport overlay), NOT .modal-dialog — that's what makes the
   sheet hug the bottom edge regardless of content height. .modal-content
   uses flex-column so the footer (Cancel/Confirm) is always visible at the
   bottom of the sheet, even when the body would otherwise overflow — body
   scrolls inside its own container, footer stays anchored.

   IMPORTANT: every layout-rule here is scoped to `.modal[style*="block"]`,
   matching Bootstrap's inline `display: block` set during show. Bootstrap's
   close sequence is: (1) remove `.show`, (2) fade out via opacity, (3) set
   inline `display: none`. Scoping to `.show` would un-apply our layout in
   step 1 and the dialog would flash to the default centered desktop layout
   during the fade. Scoping to `[style*="block"]` keeps the bottom-sheet
   layout in place through the fade, then drops it cleanly when Bootstrap
   sets `display: none` (which falls outside the `block` substring match,
   so default Bootstrap `.modal { display: none }` wins). This also kills
   the original ghost-modal bug — a closed modal with `display: none`
   inline style doesn't match. */
@media (max-width: 768px) {
	.modal[style*="block"] {
		display: flex !important;
		align-items: flex-end !important;
		padding: 0 !important;
	}
	.modal[style*="block"] .modal-dialog,
	.modal[style*="block"] .modal-dialog.modal-lg,
	.modal[style*="block"] .modal-dialog.modal-sm {
		margin: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	.modal[style*="block"] .modal-content {
		width: 100% !important;
		max-height: 90vh !important;
		max-height: 90dvh !important;
		display: flex !important;
		flex-direction: column !important;
		border-radius: var(--r-md) var(--r-md) 0 0 !important;
		animation: maktab-sheet-up var(--dur-slow) var(--ease) !important;
	}
	.modal-header {
		border-radius: 0 !important;
		flex-shrink: 0 !important;
	}
	/* Body scrolls if content exceeds available height; footer stays put.
	   touch-action:pan-y + overscroll-behavior:contain stop iOS Safari from
	   routing the swipe to the (locked) body — without these, the inner scroll
	   appears stuck because the gesture leaks to the page.
	   Selector matches `.modal .modal-body { overflow: visible !important }` at
	   line ~1800 (desktop dropdown-escape rule) so we win on equal specificity
	   via source order. */
	.modal .modal-body {
		flex: 1 1 auto !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		min-height: 0 !important;
		touch-action: pan-y !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch !important;
	}
	.modal-footer,
	.modal .standard-actions {
		border-radius: 0 !important;
		flex-shrink: 0 !important;
	}
}
@keyframes maktab-sheet-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

/* File uploader */
.modal-body .file-upload,
.modal-body .file-uploader {
	background: #FFFFFF !important;
	border: 2px dashed var(--maktab-border) !important;
	border-radius: var(--r-lg) !important;
	padding: 20px !important;
	text-align: center !important;
}
.modal-body .file-upload .btn-file-upload,
.modal-body .file-uploader .btn-file-upload { color: var(--maktab-text) !important; }
.modal-body .file-upload .uploaded-filename,
.modal-body .file-uploader .uploaded-filename { color: var(--maktab-text) !important; }
.modal-body .file-upload-area,
.modal-body .file-uploader .upload-area {
	border: 2px dashed var(--maktab-sand) !important;
	border-radius: var(--r-lg) !important;
	padding: 24px !important;
	background: var(--maktab-beige) !important;
	text-align: center !important;
}
.modal-body .file-uploader .upload-area:hover {
	border-color: var(--maktab-brown) !important;
	background: rgba(212, 197, 160, 0.15) !important;
}

/* File uploader — dark mode (FB-2026-00118: kill the giant white wrapper) */
[data-theme="dark"] .modal-body .file-upload,
[data-theme="dark"] .modal-body .file-uploader {
	background: var(--maktab-cream) !important;
	border-color: var(--maktab-border) !important;
	color: var(--maktab-text) !important;
}
[data-theme="dark"] .modal-body .file-upload .btn-file-upload,
[data-theme="dark"] .modal-body .file-uploader .btn-file-upload {
	color: var(--maktab-text) !important;
}
[data-theme="dark"] .modal-body .file-upload .uploaded-filename,
[data-theme="dark"] .modal-body .file-uploader .uploaded-filename {
	color: var(--maktab-text) !important;
}
[data-theme="dark"] .modal-body .file-upload-area,
[data-theme="dark"] .modal-body .file-uploader .upload-area,
[data-theme="dark"] .modal-body .file-uploader .file-upload-area {
	background: var(--maktab-beige) !important;
	border-color: var(--maktab-sand) !important;
	color: var(--maktab-text) !important;
}
[data-theme="dark"] .modal-body .file-uploader .upload-area:hover,
[data-theme="dark"] .modal-body .file-uploader .file-upload-area:hover {
	border-color: var(--maktab-brown) !important;
	background: rgba(61, 54, 40, 0.4) !important;
}

/* Legacy top-slide-down mobile modal block deleted — replaced by the
   bottom-sheet rule above. The minimize-button hide and form-group
   margin tweaks are folded into ../mobile-bottom-sheet rule above. */

/* ── Dark mode ── */
/* FB-2026-00162: dropped from 0.65 → 0.55 for consistency with the other backdrops. */
[data-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.55) !important; }
[data-theme="dark"] .modal-content {
	background-color: var(--maktab-cream) !important;
	box-shadow: none !important;
}
[data-theme="dark"] .modal-header {
	background: var(--maktab-straw) !important;
	border-bottom-color: var(--maktab-sand) !important;
}
[data-theme="dark"] .modal-header .modal-title,
[data-theme="dark"] .modal-header .title-section h4,
[data-theme="dark"] .modal-header h4.modal-title {
	color: var(--maktab-white) !important;
}
[data-theme="dark"] .modal-body .form-control,
[data-theme="dark"] .modal-body input.input-with-feedback,
[data-theme="dark"] .modal-body select.input-with-feedback,
[data-theme="dark"] .modal-body textarea.input-with-feedback {
	background-color: #2A2418 !important;
	border-color: var(--straw) !important;
	color: var(--maktab-text) !important;
}
[data-theme="dark"] .modal-body .form-control:focus,
[data-theme="dark"] .modal-body input.input-with-feedback:focus {
	border-color: var(--maktab-sand) !important;
	box-shadow: none !important;
}
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .modal .standard-actions {
	background-color: var(--maktab-cream) !important;
	border-top-color: var(--maktab-border) !important;
}
[data-theme="dark"] .modal-footer .btn-secondary,
[data-theme="dark"] .modal-footer .btn-default {
	background: #2A2418 !important;
	color: var(--maktab-text) !important;
}

/* ── Dialog component-level overrides ── */

/* Hide developer-facing noise */
.modal .tooltip-content,
.modal .help-box:empty,
.modal .help:empty { display: none !important; }
.modal .btn-modal-minimize { display: none !important; }

/* Clean form layout */
.modal .form-group.horizontal { border: none !important; margin-bottom: 16px !important; padding: 0 !important; }
.modal .form-group.horizontal .clearfix { margin-bottom: 6px !important; }

/* Remove spurious border lines above buttons */
.modal .standard-actions { border-top: none !important; }
.modal .modal-footer::before { display: none !important; }
.modal .form-group .clearfix { border: none !important; }
.modal .btn { border-top: none !important; }

/* Allow dropdowns to overflow on desktop. Mobile scopes overflow:auto on
   .modal-body inside the bottom-sheet block above so dialogs are scrollable
   when content overflows the 90vh sheet. */
@media (min-width: 769px) {
	.modal .modal-body { overflow: visible !important; }
}
.modal .form-layout,
.modal .form-page,
.modal .form-section,
.modal .section-body,
.modal .form-column { overflow: visible !important; }

/* Select dropdown — custom styled arrow */
.modal select.input-with-feedback {
	text-overflow: unset !important;
	white-space: normal !important;
	padding-right: 36px !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5A48' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
}
[dir="rtl"] .modal select.input-with-feedback {
	padding-right: 14px !important;
	padding-left: 36px !important;
	background-position: left 12px center !important;
}
.modal .select-icon { display: none !important; }

/* Checkbox inside modal body — keep it 18×18 even when it's a bare
   input.input-with-feedback (no .checkbox wrapper, e.g. Record Payment
   dialog's "Invoice already issued"). Frappe's default form control
   styling stretches it to 24×18 otherwise. */
.modal .modal-body input[type="checkbox"],
.modal .modal-body input[type="checkbox"].input-with-feedback {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	padding: 0 !important;
	border-radius: var(--r-sm) !important;
}

/* Tighten modal footer on desktop — Frappe's .standard-actions adds
   its own 10px vertical padding on top of the .modal-footer's 10px,
   which made the Refresh / Yes-No buttons look stranded in a tall
   empty band. Zeroing the inner padding keeps the button's own height
   and the footer's outer padding intact. */
.modal .modal-footer .standard-actions,
.modal .modal-footer .custom-actions {
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide an empty footer entirely (e.g. msgprint / warn dialogs whose
   close button lives in the header — no primary action needed). Prevents
   the solid tan band that appeared below the message. */
.modal .modal-footer:not(:has(button)) {
	display: none !important;
}

/* Delete-confirm primary action: red (terracotta) button to signal a
   destructive action. Applied by JS to frappe.confirm dialogs whose
   body mentions "delete" — see mobile_fixes / shown.bs.modal handler.
   Selector prefixes (.modal .modal-footer, .modal-header) added so this
   beats the default brown styling on both desktop footer and mobile
   header buttons. */
.modal .modal-footer .maktab-delete-btn {
	background: var(--maktab-terracotta) !important;
	border-color: var(--maktab-terracotta) !important;
	color: #fff !important;
}
.modal .modal-footer .maktab-delete-btn:hover {
	background: #A85A45 !important;
	border-color: #A85A45 !important;
}

/* Custom checkbox */
.modal .checkbox label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	padding: 4px 0 !important;
	color: var(--maktab-text) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
}
.modal .checkbox input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	border: 2px solid var(--maktab-border) !important;
	border-radius: var(--r-sm) !important;
	background: #fff !important;
	cursor: pointer !important;
	position: relative !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	transition: all 0.15s !important;
	display: inline-block !important;
	vertical-align: middle !important;
}
.modal .checkbox input[type="checkbox"]:checked {
	background: var(--maktab-brown, #5C4A3A) !important;
	border-color: var(--maktab-brown, #5C4A3A) !important;
}
.modal .checkbox input[type="checkbox"]:checked::after {
	content: '' !important;
	position: absolute !important;
	left: 4px !important;
	top: 1px !important;
	width: 6px !important;
	height: 10px !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}
.modal .checkbox .disp-area { display: none !important; }

/* ── Global checkbox styling (outside modals too) ── */
.checkbox input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	border: 2px solid var(--maktab-border) !important;
	border-radius: var(--r-sm) !important;
	background: #fff !important;
	cursor: pointer !important;
	position: relative !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	transition: all 0.15s !important;
}
.checkbox input[type="checkbox"]:checked {
	background: var(--maktab-brown) !important;
	border-color: var(--maktab-brown) !important;
}
.checkbox input[type="checkbox"]:checked::after {
	content: '' !important;
	position: absolute !important;
	left: 4px !important;
	top: 1px !important;
	width: 6px !important;
	height: 10px !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

/* No visual section breaks */
.modal .form-section { border: none !important; padding: 0 !important; margin: 0 !important; }
.modal .section-body { padding: 0 !important; }

/* Required asterisk */
.modal .control-label.reqd::after { color: var(--maktab-terracotta) !important; }

/* Let inputs fill width */
.modal .frappe-control.input-max-width { max-width: 100% !important; }

/* Message/confirm dialogs */
.modal .msgprint {
	color: var(--maktab-text) !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	padding: 4px 0 !important;
}
.modal .modal-footer .btn-danger,
.modal .modal-footer .btn-primary-dark {
	background: var(--maktab-terracotta) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--r-md) !important;
}
.modal .modal-footer .btn-danger:hover { background: #A85A45 !important; }


/* Mobile dialog form-control sizing — keep iOS-zoom-prevention font sizes
   and select chrome separate from the bottom-sheet layout rule above so
   each concern lives in its own block. */
@media (max-width: 768px) {
	/* Larger inputs on mobile — 16px prevents iOS auto-zoom */
	.modal.show .modal-body .form-control,
	.modal.show .modal-body select,
	.modal.show .modal-body textarea,
	.modal.show .modal-body .input-with-feedback:not([type="checkbox"]),
	.modal.show .modal-body .like-disabled-input {
		font-size: 16px !important;
		min-height: 40px !important;
		padding: 10px 12px !important;
		line-height: 1.25 !important;
	}
	/* Checkbox: keep square shape, don't stretch */
	.modal.show .modal-body input[type="checkbox"].input-with-feedback,
	.modal.show .modal-body input[type="checkbox"] {
		width: 20px !important;
		height: 20px !important;
		min-height: 20px !important;
		min-width: 20px !important;
		max-width: 20px !important;
		max-height: 20px !important;
		padding: 0 !important;
		border-radius: var(--r-sm) !important;
	}
	/* Select is a replaced element on WebKit: its text is clamped to the
	   content box, so content-box height must be >= line-box height. */
	.modal.show .modal-body select,
	.modal.show .modal-body select.input-with-feedback,
	.modal.show .modal-body .frappe-control[data-fieldtype="Select"] select {
		min-height: 44px !important;
		padding: 10px 36px 10px 10px !important;
		line-height: 1.4 !important;
	}
	/* Form-group margin / body padding tightening */
	.modal.show .modal-body .frappe-control:last-child .form-group,
	.modal.show .modal-body > .form-group:last-child {
		margin-bottom: 0 !important;
	}
	/* Hide drag-and-drop text on mobile (can't drag on touch) */
	.modal .file-uploader .upload-area .text-muted,
	.modal .file-uploader .upload-area > p,
	.modal .file-upload-area .text-muted,
	.modal .file-upload-area > p:first-child {
		display: none !important;
	}
	/* Hide Frappe minimize button on mobile (no use case) */
	.modal-header .btn-modal-minimize { display: none !important; }
}

/* ── Mobile — small/confirm dialogs stay as bottom sheet ── */
@media (max-width: 768px) {
	.modal.show .modal-dialog.modal-sm,
	.modal.show .modal-dialog.msgprint-dialog {
		top: auto !important;
		bottom: 0 !important;
		height: auto !important;
		min-height: auto !important;
		align-items: flex-end !important;
		margin: 0 !important;
		flex-direction: row !important;
		transform: translateY(100%) !important;
	}
	.modal.show .modal-dialog.modal-sm,
	.modal.show .modal-dialog.msgprint-dialog {
		transform: translateY(0) !important;
	}
	.modal.show .modal-dialog.modal-sm .modal-content,
	.modal.show .modal-dialog.msgprint-dialog .modal-content {
		height: auto !important;
		flex: none !important;
		border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
		max-height: 70vh !important;
	}
	.modal.show .modal-dialog.modal-sm .modal-header,
	.modal.show .modal-dialog.msgprint-dialog .modal-header {
		border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
	}
	/* Small dialogs keep their footer visible */
	.modal.show .modal-dialog.modal-sm .modal-footer,
	.modal.show .modal-dialog.msgprint-dialog .modal-footer {
		display: flex !important;
		border-radius: 0 !important;
		padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
	}
}

/* ── Dropdowns ── */
.dropdown-menu {
	background-color: var(--maktab-cream) !important;
	border: 1px solid var(--maktab-border) !important;
	border-radius: var(--r-md) !important;
	box-shadow: var(--maktab-shadow-hover) !important;
}

.dropdown-item:hover {
	background-color: var(--maktab-straw) !important;
	color: var(--maktab-text) !important;
}

/* ── Workspace / Modules page ── */
.module-links .module-link {
	border: 1px solid var(--maktab-border) !important;
	border-radius: var(--maktab-radius) !important;
	background-color: var(--maktab-cream) !important;
}

.module-links .module-link:hover {
	background-color: var(--maktab-straw) !important;
}

/* ── Login Page Overrides ── */
.page-card {
	background: var(--maktab-cream) !important;
	border: 1px solid var(--maktab-border) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: none !important;
}

.page-card .page-card-head {
	background: transparent !important;
	border-bottom: 1px solid var(--maktab-border) !important;
}

.page-card .page-card-head .page-card-title {
	display: none !important;
}

/* Login page body */
/* Login page — fit to viewport, extend into Safari safe areas */
html[data-path="login"],
html:has(body[data-path="login"]) {
	background: var(--maktab-beige, var(--beige)) !important;
}

body[data-path="login"] {
	overflow-x: hidden !important;
	background: var(--maktab-beige, var(--beige)) !important;
}

body[data-path="login"] #page-login {
	min-height: 100vh !important;
	min-height: 100dvh !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 0 !important;
	margin: 0 !important;
}

body[data-path="login"] #page-login .page-content-wrapper {
	width: 100% !important;
	max-width: 100vw !important;
	padding: 0 !important;
	margin: 0 !important;
}

body[data-path="login"] #page-login .container {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 20px !important;
	margin: 0 !important;
}

body[data-path="login"] #page-login .page_content {
	width: 100% !important;
}

/* Hide everything outside the login form */
body[data-path="login"] .navbar,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .for-signup,
body[data-path="login"] .for-forgot,
body[data-path="login"] footer {
	display: none !important;
}

/* Hide default "Login to ..." title */
.for-login > .page-card-head h4 {
	display: none !important;
}

/* Hide "or" divider and "Login with Email Link" */
.login-divider,
.login-with-email-link {
	display: none !important;
}

/* Hide "Powered by" footer and signup message */
.page-card .login-footer,
.page-card-body .or-section,
footer .pull-right,
.login-content .sign-up-message {
	display: none !important;
}

/* Login card */
body[data-path="login"] .login-content.page-card {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Login branding — brand name injected by maktab_login.js */
.maktab-login-brand {
	text-align: center;
	font-family: 'Cairo', sans-serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--maktab-text);
	padding: 8px 0 16px;
	letter-spacing: 0.5px;
}

/* Center the logo on login */
.for-login > .page-card-head {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	padding-top: 20px !important;
	border-bottom: none !important;
}

.for-login > .page-card-head .app-logo {
	width: 80px !important;
	height: auto !important;
}

/* ── Scrollbars ── */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--maktab-beige);
}

::-webkit-scrollbar-thumb {
	background: var(--maktab-sand);
	border-radius: var(--r-sm);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--maktab-brown);
}

/* ── Awesomebar (search) ── */
.search-bar .awesomebar {
	background-color: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(212, 197, 160, 0.3) !important;
	border-radius: var(--r-md) !important;
	color: var(--maktab-straw) !important;
}
/* Hide Frappe search bar on mobile (use per-page search instead) */
@media (max-width: 768px) {
	.navbar .search-bar,
	.navbar #navbar-search { display: none !important; }
}

.search-bar .awesomebar:focus {
	background-color: rgba(255, 255, 255, 0.25) !important;
	border-color: var(--maktab-sand) !important;
}

.search-bar .awesomebar::placeholder {
	color: rgba(212, 197, 160, 0.6) !important;
}

/* ── Frappe-specific overrides ── */
.frappe-control .like-disabled-input {
	background-color: var(--maktab-beige) !important;
}

.comment-box .ql-editor {
	background-color: var(--maktab-white) !important;
}

/* Timeline */
.timeline-item {
	border-color: var(--maktab-border) !important;
}

/* ── Print-friendly ── */
@media print {
	body {
		background: white !important;
		color: black !important;
	}

	.navbar, .body-sidebar, .page-head .page-actions {
		display: none !important;
	}

	.table th {
		background-color: #f0f0f0 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
	.wasi-dashboard-container .card,
	.maktab-card {
		margin-bottom: 12px;
	}

	.thilth-report .col-md-2 {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 8px;
	}

	.section-head {
		font-size: 0.95rem !important;
	}

	/* Bigger touch targets for form/modal buttons only.
	   Exclude .icon-btn — icon buttons are 28×28 and 16px horizontal padding
	   squeezes their svg to 0 width (close X disappeared on mobile dialogs). */
	.form-section .btn:not(.icon-btn),
	.modal-content .btn:not(.icon-btn),
	.maktab-wrapper .btn:not(.icon-btn) {
		min-height: 44px;
		padding: 8px 16px !important;
	}

	/* 16px minimum on ALL inputs prevents iOS auto-zoom on focus */
	.frappe-control input,
	.frappe-control select,
	.frappe-control textarea,
	.maktab-list-search-input,
	.lv-search-input,
	input[type="search"],
	input[type="text"],
	input[type="number"],
	input[type="date"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		min-height: 44px;
		font-size: 16px !important;
	}
}

/* ── Home Page Wrapper ── */
.maktab-wrapper {
	padding: 20px;
}
@media (max-width: 768px) {
	.maktab-wrapper {
		padding: 8px 12px 30px;
	}
}

.maktab-header {
	margin-bottom: 24px;
}

.maktab-header h2 {
	color: var(--maktab-text);
	font-weight: 700;
	margin-bottom: 4px;
}

.maktab-header .maktab-subtitle {
	color: var(--maktab-text-muted);
	font-size: 0.9rem;
	margin: 0;
}

/* ── Home page action cards ── */
.maktab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	padding: 16px 0;
	/* CLS reserve removed — forced min-height caused unnecessary vertical scroll */
	min-height: auto;
}

/* Reserve space on the parent .main-section so the root container doesn't
   grow as our custom home/list pages fill in their content. Fixes CLS. */
body.no-breadcrumbs .main-section,
.main-section {
	min-height: auto;
}

/* CLS reserve removed — forced min-height caused unnecessary vertical scroll */
.maktab-wrapper {
	min-height: auto;
}

.maktab-action-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: #F5EDE0;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none !important;
	min-height: 140px;
}

.maktab-action-card:hover {
	box-shadow: none;
	transform: translateY(-2px);
}

.maktab-action-card .card-icon {
	font-size: 2rem;
	margin-bottom: 12px;
	color: var(--maktab-brown);
}

.maktab-action-card .card-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--maktab-text);
	margin-bottom: 4px;
	text-align: center;
}

.maktab-action-card .card-subtitle {
	font-size: 0.8rem;
	color: var(--maktab-text-muted);
	text-align: center;
}

.maktab-action-card .card-badge {
	margin-top: 8px;
	padding: 2px 10px;
	border-radius: var(--r-lg);
	font-size: 0.75rem;
	font-weight: 600;
}

.card-badge.badge-alert {
	/* WCAG AA: #8C3E28 on #F7E0D7 ≈ 5.3:1 */
	background-color: #F7E0D7;
	color: #8C3E28;
}

.card-badge.badge-ok {
	/* #2D5234 on #E0EAD9 ≈ 6.1:1 */
	background-color: #E0EAD9;
	color: #2D5234;
}

.card-badge.badge-info {
	/* #1F4A6B on #D8E7F1 ≈ 6.3:1 */
	background-color: #D8E7F1;
	color: #1F4A6B;
}

/* ── Home page dark mode ── */
[data-theme="dark"] .maktab-action-card {
	background: #2A2418;
	border-color: var(--straw);
}
[data-theme="dark"] .maktab-action-card:hover {
	background: #3A3020;
	border-color: var(--maktab-brown);
}
[data-theme="dark"] .maktab-action-card .card-title {
	color: #F5E6D3;
}
[data-theme="dark"] .maktab-action-card .card-icon {
	color: var(--maktab-brown);
}
[data-theme="dark"] .maktab-action-card .card-subtitle {
	color: var(--maktab-text-muted);
}
[data-theme="dark"] .maktab-wrapper h2,
[data-theme="dark"] .maktab-wrapper .maktab-subtitle {
	color: var(--maktab-text);
}

/* ── System Dark Mode splash screen ──
   Only applies before Frappe sets data-theme. Once data-theme is set,
   the [data-theme="dark"] rules above take over.
   IMPORTANT: do NOT override body/html background here — it would
   conflict with light mode when the system is dark but app is light. */
@media (prefers-color-scheme: dark) {
	/* Splash screen matches light theme — the app is light by default.
	   Don't show a dark splash just because the system is in dark mode. */
	.splash {
		background: var(--beige) !important;
	}
}

/* FB-106 / FB-2026-00210: user-selected dark theme splash — match the page
   bg (--beige in dark = #18130D) NOT --brown-night (#0F0C08, which is the
   sidebar bg). Using --brown-night made the splash render as a noticeably
   darker block than the body during the brief refresh-time window where
   data-theme=dark has been applied but the user hasn't fully painted yet.
   Tracking --beige means splash, body, and html all share one bg color. */
[data-theme="dark"] .splash,
[data-theme-mode="dark"] .splash {
	background: var(--beige) !important;
	background-image: none !important;
}

/* ═══════════════════════════════════════════════
   Expiry Dashboard (v2 — phase 2.5 migrated)
   Component styles live in the v2 components section near the top of
   this file, scoped to .expiry-dashboard. This block keeps only the
   wrapper rules and the mobile stacked-card behavior.
   ═══════════════════════════════════════════════ */

.expiry-dashboard {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--s-2) var(--s-5) var(--s-10);
}

/* Mobile: page padding only — table card-stacking is handled centrally
   by the canonical .maktab-list-table @media (max-width:768px) rules
   defined alongside .ll-table / .pl-table / .lv-table near line 4579. */
@media (max-width: 768px) {
	.expiry-dashboard {
		padding: var(--s-2) var(--s-3) var(--s-8);
	}
	/* On mobile, table-layout:fixed + percentage widths conflict with the
	   stacked-card display:block — undo them so cells stack edge-to-edge. */
	.expiry-dashboard .lv-table.maktab-list-table {
		table-layout: auto;
	}
	.expiry-dashboard .lv-table.maktab-list-table th:nth-child(n),
	.expiry-dashboard .lv-table.maktab-list-table td:nth-child(n) {
		width: auto;
	}
	/* Sticky thead is meaningless once thead is hidden — release it. */
	.expiry-dashboard .lv-table.maktab-list-table thead th {
		position: static;
	}
}

/* ══════════════════════════════════════════════
   RECONCILIATION REPORT
   ══════════════════════════════════════════════
   Canonical chrome — page is wrapped in `.maktab-list` (matches
   properties-list/tenants-list); summary cards use `.maktab-list-card`,
   tables use `.lv-table.maktab-list-table`, section dividers use
   `.section-head`. Only the recon-specific row/cell modifiers
   (.recon-period for the small period label, .recon-discrepancy for
   the warning row tint, .recon-total-row for the totals row tint)
   live here. Everything else is shared site-wide.
*/

.text-green { color: var(--success) !important; }
.text-red   { color: var(--overdue) !important; }
.text-amber { color: var(--warn) !important; }

/* Period label (small muted line above the summary cards). */
.recon-period {
	font-size: var(--text-sm);
	color: var(--ink-muted);
	margin-bottom: var(--s-3);
	font-variant-numeric: tabular-nums;
}
.recon-period-value {
	font-weight: 600;
	color: var(--ink);
}

/* Reconciliation row/cell modifiers — chrome (header/borders/font-size)
   comes from the canonical .lv-table / .maktab-list-table styles. */
.recon-discrepancy { background: var(--crit-bg) !important; }
.recon-discrepancy-val {
	color: var(--crit);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.recon-total-row td { background: var(--beige); }

/* ── Reconciliation dark mode ── */
[data-theme="dark"] .recon-period-value { color: var(--straw); }
[data-theme="dark"] .recon-discrepancy { background: rgba(192, 115, 94, 0.18) !important; }
[data-theme="dark"] .recon-total-row td { background: #1A1510; }

/* ══════════════════════════════════════════════
   MAKTAB LIST — Config-driven shared list page
   ══════════════════════════════════════════════ */

.maktab-list-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 20px 40px;
}

/* ── Filters ── */
.maktab-filter-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 10px 14px;
	background: var(--maktab-cream);
	border-radius: var(--maktab-radius);
	border: 1px solid var(--maktab-border);
}
.maktab-filter-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 140px;
	flex: 1;
}
.maktab-filter-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--maktab-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.maktab-filter-select,
.maktab-filter-input {
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	padding: 6px 10px;
	font-size: 13px;
	background: var(--control-bg);
	color: var(--maktab-text);
	font-family: inherit;
}
.maktab-filter-select:focus,
.maktab-filter-input:focus {
	outline: none;
	border-color: var(--maktab-brown);
	box-shadow: none;
}

/* ── Hide monitor/desk icon from breadcrumbs (pure CSS, no flash) ── */
.navbar-breadcrumbs li:has(> a[href="/desk"]) {
	display: none !important;
}
.navbar-breadcrumbs li:has(> a[href="/desk"]) + li a:before {
	content: none !important;
}
/* Page title injected by maktab.set_page_title */
.navbar-breadcrumbs li.maktab-page-title a {
	font-weight: 600;
	color: var(--maktab-dark-brown);
}
.navbar-breadcrumbs li.maktab-page-title a:before {
	content: none !important;
}

/* ── Table ── */
.maktab-table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	overflow: hidden;
}
.maktab-table thead th {
	background: var(--maktab-beige);
	color: var(--maktab-brown);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	padding: 10px 12px;
	border-bottom: 2px solid var(--maktab-sand);
	text-align: left;
	white-space: nowrap;
}
.maktab-table tbody td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--maktab-border);
	font-size: 13px;
	vertical-align: middle;
	color: var(--maktab-text);
}
.maktab-table tbody tr:last-child td {
	border-bottom: none;
}

/* Row hover */
.maktab-row {
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.maktab-row:hover {
	background: rgba(107, 79, 54, 0.06) !important;
}

/* Alternating row stripe — subtle */
.maktab-table tbody tr:nth-child(even) {
	background: var(--maktab-beige);
}

/* Row tinting — earthy terracotta/amber from Hasawi palette */
.maktab-row-critical {
	background: var(--bg-red) !important;
}
.maktab-row-warning {
	background: var(--bg-orange) !important;
}

/* ── Links ── */
.maktab-link {
	color: var(--maktab-brown);
	font-weight: 600;
	text-decoration: none;
}
.maktab-link:hover {
	color: var(--brown-deep);
	text-decoration: underline;
}
[data-theme="dark"] .maktab-link:hover { color: var(--sand); }

/* ── Pills (reuse Hasawi palette) ── */
.maktab-pill {
	display: inline-block;
	font-weight: 700;
	font-size: 0.72rem;
	padding: 3px 10px;
	border-radius: var(--r-lg);
	line-height: 1.4;
	white-space: nowrap;
}
.maktab-pill-green  { background: var(--bg-green);  color: var(--text-on-green); }
.maktab-pill-orange { background: var(--bg-orange); color: var(--text-on-orange); }
.maktab-pill-red    { background: var(--bg-red);    color: var(--text-on-red); }
.maktab-pill-grey   { background: var(--bg-grey);   color: var(--text-on-grey); }
.maktab-pill-blue   { background: var(--bg-blue);   color: var(--text-on-blue); }

/* ── Number highlights ── */
.maktab-num-critical { color: var(--text-on-red); }
.maktab-num-warning  { color: var(--text-on-orange); }
.maktab-num-ok       { color: var(--text-on-green); }

/* ── Currency ── */
.maktab-currency {
	font-weight: 600;
	white-space: nowrap;
}

/* ── Pagination ── */
.maktab-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
}
.maktab-pagination-info {
	font-size: 13px;
	color: var(--maktab-text-muted);
	padding: 12px 0;
}
.maktab-pagination-buttons {
	display: flex;
	gap: 8px;
}
.maktab-pagination-btn {
	background: var(--maktab-cream);
	color: var(--maktab-brown);
	border: 1px solid var(--maktab-sand);
	border-radius: var(--r-md);
	padding: 6px 16px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}
.maktab-pagination-btn:hover {
	background: var(--maktab-beige);
	border-color: var(--maktab-brown);
}

/* ── Column priority — responsive hiding ── */
/* Priority 3: desktop only */
@media (max-width: 1200px) {
	.maktab-col-p3 { display: none; }
}

/* ── Mobile: card layout ── */
@media (max-width: 768px) {
	.maktab-list-page {
		padding: 10px;
	}
	.maktab-filter-row {
		flex-direction: column;
		gap: 8px;
	}
	.maktab-filter-item {
		min-width: 0;
	}

	/* Hide table header */
	.maktab-table thead {
		display: none;
	}
	.maktab-table,
	.maktab-table tbody,
	.maktab-table tr,
	.maktab-table td {
		display: block;
		width: 100%;
	}
	.maktab-table {
		background: transparent !important;
		border: none;
	}
	.maktab-table tbody tr {
		margin-bottom: 10px;
		border-radius: var(--maktab-radius);
		border: 1px solid var(--maktab-border);
		overflow: hidden;
		background: var(--maktab-cream);
		box-shadow: var(--maktab-shadow);
	}
	.maktab-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 14px;
		border-bottom: 1px solid var(--maktab-border);
		font-size: 13px;
		min-height: 44px; /* Touch target */
	}
	.maktab-table tbody td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--maktab-text-muted);
		font-size: 12px;
		margin-right: 12px;
		flex-shrink: 0;
	}
	.maktab-table tbody td:last-child {
		border-bottom: none;
	}
	/* Add button right padding on mobile */
	.page-container[data-page-container="maktab-list"] .page-head .page-actions {
		padding-right: 10px;
	}
	/* Priority 2: hidden on mobile, shown when expanded */
	.maktab-col-p2 {
		display: none;
	}
	.maktab-expanded .maktab-col-p2 {
		display: flex;
	}
	/* Add expand indicator on first cell */
	.maktab-table tbody tr td:first-child::after {
		content: '▸';
		color: var(--maktab-text-muted);
		font-size: 14px;
		margin-left: 8px;
		transition: transform 0.2s ease;
	}
	.maktab-expanded td:first-child::after {
		content: '▾';
	}
	/* Pagination */
	.maktab-pagination {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
}

/* ── Dark mode ── */
[data-theme="dark"] .maktab-table {
	background: var(--maktab-cream);
	border-color: var(--maktab-border);
}
[data-theme="dark"] .maktab-table thead th {
	background: var(--maktab-dark-brown);
	color: var(--maktab-straw);
	border-color: var(--maktab-sand);
}
[data-theme="dark"] .maktab-table tbody td {
	border-color: var(--maktab-border);
}
[data-theme="dark"] .maktab-row:hover {
	background: rgba(212, 197, 160, 0.08) !important;
}
[data-theme="dark"] .maktab-link {
	color: var(--maktab-straw);
}
[data-theme="dark"] .maktab-row-critical {
	background: rgba(212, 138, 116, 0.15) !important;
}
[data-theme="dark"] .maktab-row-warning {
	background: rgba(224, 176, 106, 0.12) !important;
}
[data-theme="dark"] .maktab-filter-row {
	background: var(--maktab-cream);
	border-color: var(--maktab-border);
}
[data-theme="dark"] .maktab-filter-select,
[data-theme="dark"] .maktab-filter-input {
	background: var(--control-bg);
	border-color: var(--maktab-border);
	color: var(--maktab-text);
}
[data-theme="dark"] .maktab-pagination-btn {
	background: var(--maktab-cream);
	color: var(--maktab-straw);
	border-color: var(--maktab-sand);
}
@media (max-width: 768px) {
	[data-theme="dark"] .maktab-table tbody tr {
		background: var(--maktab-cream);
		border-color: var(--maktab-border);
	}
}

/* ===== Utility helpers ========================================
   Tiny single-purpose classes safe to use anywhere.
   - .f-text-muted: secondary text colour token
   - .f-italic: italic emphasis (used for "absence" labels like "No role")
*/
.f-text-muted { color: var(--ink-muted); }
.f-italic { font-style: italic; }

/* ===== Rent Collection v2 (Phase 3) ===========================
   Clean rewrite. Scoped under .rc-page so we don't collide with
   Frappe's bootstrap component classes (.btn, .pill, etc.). The
   legacy .rc-* rules were stripped — do not re-introduce them.
   tokens come from the v2 :root block (--cream / --beige / --sand /
   --brown-deep / --overdue / --warn / --success / --basil-flower-bg).
   ============================================================== */

.rc-page {
	font-family: var(--font-ar);
	color: var(--ink);
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--s-4) var(--s-5) var(--s-10);
}

/* ── Page head ── */
.rc-page__head {
	display: flex; justify-content: space-between; align-items: flex-end;
	border-bottom: 2px solid var(--sand);
	padding-bottom: var(--s-3);
	margin-bottom: var(--s-5);
	flex-wrap: wrap; gap: var(--s-3);
}
.rc-page__title {
	font-size: var(--text-3xl);
	font-weight: 600;
	color: var(--brown-deep);
	margin: 0;
	line-height: 1.2;
}
/* Dark mode: --brown-deep flips to sidebar-bg (very dark) which makes
   the title invisible on the cream page bg. Use --ink instead so the
   title stays readable in both themes. */
[data-theme="dark"] .rc-page__title {
	color: var(--ink);
}
[data-theme="dark"] .rc-page__actions .rc-btn {
	color: var(--ink);
	background: var(--brown-deep);
}

/* Hide Frappe's default page-head/breadcrumb chrome on the rent-collection
   page — our custom .rc-page__head replaces it. Same pattern as
   FB-2026-00050 for the home page. */
body[data-route^="rent-collection"] .page-head,
body[data-route^="rent-collection"] .page-title {
	display: none !important;
}
.rc-page__sub {
	display: block;
	font-size: var(--text-sm);
	color: var(--ink-muted);
	margin-top: 6px;
	font-family: var(--font-en);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.rc-page__actions {
	display: flex; gap: 8px; align-items: center;
}
.rc-page__actions .rc-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	font-family: var(--font-ar); font-size: var(--text-base); font-weight: 500;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	cursor: pointer;
	background: var(--brown-deep); color: var(--cream);
	line-height: 1.2;
	transition: background var(--dur-fast);
}
.rc-page__actions .rc-btn:hover { background: #5a4332; }

/* ── Stat row (4 boxes) ── */
.rc-stat-row {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3);
	margin-bottom: var(--s-6);
}
/* FIX 20: rc-stat-row--3 modifier is a no-op marker; the base row is now
   3-col after the Annual Total tile was dropped. Kept for any future variant. */
.rc-stat-row.rc-stat-row--3 { grid-template-columns: repeat(3, 1fr); }
.rc-stat {
	padding: 14px 16px;
	border-radius: var(--r-md);
	border: 1px solid transparent;
}
.rc-stat__label {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--caption-tracking);
	text-transform: uppercase;
	font-family: var(--font-en);
	margin-bottom: 6px;
	opacity: .85;
}
.rc-stat__value {
	font-size: var(--text-3xl);
	font-weight: 600;
	line-height: 1.1;
	font-family: var(--font-num);
}
.rc-stat__sub {
	font-size: var(--text-xs);
	margin-top: 4px;
	opacity: .8;
}
.rc-stat--annual { background: var(--info-bg); color: var(--info); }
.rc-stat--collected { background: var(--success-bg); color: var(--success); }
.rc-stat--due-soon { background: var(--warn-bg); color: var(--warn-text); }
.rc-stat--overdue { background: var(--crit-bg); color: var(--crit); }

/* ── Filter pills ── */
.rc-filters {
	display: flex; gap: 8px;
	margin-bottom: var(--s-5);
	flex-wrap: wrap;
}
.rc-filter {
	cursor: pointer;
	background: var(--cream); color: var(--ink);
	border: 1px solid var(--border);
	padding: 5px 12px;
	font-size: var(--text-sm);
	border-radius: var(--r-sq);
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-ar);
	transition: all var(--dur-fast);
	line-height: 1.4;
}
.rc-filter:hover { border-color: var(--sand); }
.rc-filter.is-active {
	background: var(--brown-deep);
	color: var(--cream);
	border-color: var(--brown-deep);
}
/* Dark mode: --cream flips to card-bg (dark) so the active filter text
   would be dark-on-dark. Use --ink instead. */
[data-theme="dark"] .rc-filter.is-active { color: var(--ink); }
.rc-filter__count {
	font-family: var(--font-en);
	opacity: .7;
	margin-inline-start: 4px;
}
.rc-filter.is-active .rc-filter__count { opacity: .9; }

/* ── Property header ── */
.rc-prop-section { margin-bottom: var(--s-6); }
.rc-prop-head {
	margin: var(--s-6) 0 var(--s-3);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--straw);
}
.rc-prop-head__row {
	display: flex; align-items: baseline;
	justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.rc-prop-head__name {
	margin: 0;
	font-size: var(--text-2xl);
	color: var(--brown-deep);
	font-weight: 600;
	line-height: 1.2;
}
.rc-prop-head__name a,
.rc-prop-head__name a:visited {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast);
}
.rc-prop-head__name a:hover { color: var(--maktab-link); }
/* FB-2026-00175: --brown-deep flips to sidebar-bg in dark mode (near-black)
   which makes the property title nearly invisible on the dark page bg. */
[data-theme="dark"] .rc-prop-head__name { color: var(--ink); }
.rc-prop-head__entity {
	font-size: 10px; font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--r-sm);
	background: var(--basil-flower-bg);
	color: var(--basil-flower);
	text-transform: uppercase;
	letter-spacing: var(--caption-tracking);
	font-family: var(--font-en);
	margin-inline-start: 6px;
	vertical-align: middle;
}
[data-theme="dark"] .rc-prop-head__entity { background: rgba(169,133,182,.18); color: var(--basil-flower); }
.rc-prop-head__meta {
	display: flex; gap: 12px;
	font-size: var(--text-sm);
	color: var(--ink-muted);
	margin-top: 4px;
	align-items: center;
	flex-wrap: wrap;
}
.rc-prop-head__sep { opacity: .4; }
.rc-page .rc-prop-head__map,
.rc-page .rc-prop-head__map:visited {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast);
}
.rc-page .rc-prop-head__map:hover { color: var(--maktab-link); text-decoration: underline; }

/* ── Card grid (2-up masonry packing) ──
   FB-2026-00191 + FB-2026-00198: we need BOTH (a) column tops aligned
   AND (b) tight packing within each column (no whitespace below short
   cards next to tall ones). CSS Grid solved (a) but broke (b); CSS
   multi-column solved (b) but broke (a) due to column-fill: balance
   nudging column-2 down. Solution: JS-driven masonry. The grid is a
   flex container of two equal-width column wrappers; pack_cards_into_columns
   in rent_collection.js distributes cards by always appending to the
   currently shorter column. Both columns share top:0 and cards stack
   tightly. On <=1024px we collapse to a single column. */
.rc-card-grid {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
}
.rc-card-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-width: 0;
}
@media (max-width: 1024px) {
	.rc-card-grid { display: block; }
	.rc-card-col { width: 100%; }
	.rc-card-col + .rc-card-col { margin-top: var(--s-3); }
}

/* ── Tenant card ── */
.rc-card {
	display: block;
	width: 100%;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--r-sq);
	padding: 14px;
	position: relative;
}
/* Side urgency line: left in EN, right in AR (border-inline-start). */
.rc-card--overdue { border-inline-start: 5px solid var(--crit); }
.rc-card--due-soon { border-inline-start: 5px solid var(--warn); }
.rc-card--upcoming { border-inline-start: 5px solid var(--success); }

.rc-card__head {
	display: flex; justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
	gap: 10px;
}
.rc-card__tenant {
	min-width: 0; flex: 1;
}
.rc-card__tenant-name {
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--brown-deep);
	margin: 0 0 2px;
	line-height: 1.25;
}
[data-theme="dark"] .rc-card__tenant-name { color: var(--ink); }
.rc-page .rc-card__tenant-name a,
.rc-page .rc-card__tenant-name a:visited {
	color: inherit; text-decoration: none;
	transition: color var(--dur-fast);
}
.rc-page .rc-card__tenant-name a:hover { color: var(--maktab-link); }
.rc-card__cross-prop {
	display: inline-block;
	font-size: var(--text-xs);
	color: var(--maktab-link);
	margin-top: 2px;
	cursor: pointer;
	text-decoration: none;
}
.rc-card__cross-prop:hover { text-decoration: underline; }

/* Step 3 — per-tenant credit badges (rent collection) */
.rc-card__credits {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
}
.rc-card__credit {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 3px 8px;
	border-radius: var(--r-sm);
	background: rgba(16,128,80,.12);
	color: var(--success);
	border: 1px solid rgba(16,128,80,.25);
	line-height: 1.3;
}
[data-theme="dark"] .rc-card__credit {
	background: rgba(80,200,140,.18);
	border-color: rgba(80,200,140,.35);
}

/* Phone row */
.rc-card__phone {
	background: rgba(212,197,160,.25);
	padding: 6px 9px;
	border-radius: var(--r-sm);
	font-size: var(--text-sm);
	margin-bottom: 8px;
	color: var(--brown-deep);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}
.rc-card__phone-left,
.rc-card__phone-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
[data-theme="dark"] .rc-card__phone { background: rgba(212,197,160,.10); color: var(--ink); }
.rc-page .rc-card__phone-link,
.rc-page .rc-card__phone-link:visited {
	font-family: var(--font-num);
	font-weight: 500;
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast);
}
.rc-page .rc-card__phone-link:hover { color: var(--maktab-link); text-decoration: underline; }
.rc-card__phone-sep { opacity: .35; }
.rc-card__phone-extra { color: var(--ink-muted); font-size: var(--text-xs); }
.rc-card__phone-name { font-weight: 500; color: inherit; }
.rc-card__phone-role {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--r-sm);
	font-size: 11px;
	font-weight: 500;
	background: var(--maktab-cream, rgba(212,197,160,.35));
	color: var(--ink-muted, var(--brown-deep));
	border: 1px solid rgba(0,0,0,.06);
	white-space: nowrap;
}
.rc-card__phone-role--primary {
	background: rgba(143,176,130,.22);
	color: var(--success, var(--brown-deep));
	border-color: rgba(143,176,130,.35);
}
[data-theme="dark"] .rc-card__phone-role {
	background: rgba(212,197,160,.14);
	color: var(--ink);
	border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .rc-card__phone-role--primary {
	background: rgba(143,176,130,.18);
	color: var(--success);
	border-color: rgba(143,176,130,.30);
}
.rc-card .rc-card__phone + .rc-card__phone { margin-top: -4px; }

/* ── Per-lease unit row ── */
.rc-card__leases { display: flex; flex-direction: column; gap: 10px; }
.rc-card__leases > .rc-unit + .rc-unit {
	border-top: 1px dashed var(--border);
	padding-top: 10px;
	margin-top: 0;
}

.rc-unit__head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.rc-unit__title {
	font-size: var(--text-base); font-weight: 600; color: var(--ink);
}
.rc-page .rc-unit__title a,
.rc-page .rc-unit__title a:visited {
	color: inherit; text-decoration: none;
	transition: color var(--dur-fast);
}
.rc-page .rc-unit__title a:hover { color: var(--maktab-link); }
.rc-unit__type {
	font-size: var(--text-xs); color: var(--ink-muted);
}

.rc-unit__meta {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 6px 14px;
	font-size: 12.5px;
}
.rc-unit__meta-cell { min-width: 0; }
.rc-unit__meta-key {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	margin-bottom: 1px;
}
.rc-unit__meta-val {
	color: var(--ink); font-weight: 600;
	font-family: var(--font-num);
}
.rc-unit__meta-val--crit { color: var(--crit); }
.rc-unit__meta-val--warn { color: var(--warn-text); }
[data-theme="dark"] .rc-unit__meta-val--warn { color: var(--warn); }
.rc-unit__vat-note {
	font-size: var(--text-xs);
	color: var(--ink-muted);
	font-weight: normal;
	font-family: inherit;
}

/* Arrears row */
.rc-unit__arrears {
	background: var(--crit-bg);
	border: 1px solid rgba(192,115,94,.4);
	padding: 6px 9px;
	border-radius: var(--r-sm);
	font-size: 12.5px;
	color: #7A4E2D;
	margin-top: 8px;
	display: flex; flex-direction: column; gap: 2px;
}
.rc-unit__arrears-row {
	display: flex; justify-content: space-between;
	align-items: center; gap: 8px;
}
.rc-unit__arrears-num {
	font-weight: 700;
	font-family: var(--font-num);
}
.rc-unit__arrears-detail {
	font-size: var(--text-xs);
	opacity: .85;
}
[data-theme="dark"] .rc-unit__arrears { background: var(--crit-bg); color: var(--crit); border-color: rgba(216,152,132,.35); }

/* Notes — violet sticky */
.rc-unit__notes {
	background: var(--basil-flower-bg);
	border-inline-start: 3px solid var(--basil-flower);
	padding: 6px 9px;
	font-size: var(--text-sm);
	color: var(--basil-flower);
	margin-top: 8px;
	border-radius: var(--r-sm);
}

/* Expiry banner */
.rc-unit__expiry {
	margin-top: 8px;
	padding: 6px 9px;
	border-radius: var(--r-sm);
	font-size: var(--text-sm);
	font-weight: 500;
}
.rc-unit__expiry--expired { background: var(--crit-bg); color: #7A4E2D; }
.rc-unit__expiry--ending-soon { background: var(--warn-bg); color: var(--warn-text); }
[data-theme="dark"] .rc-unit__expiry--expired { color: var(--crit); }
[data-theme="dark"] .rc-unit__expiry--ending-soon { color: var(--warn); }

/* Recent payments collapsible — full-width toggle to match the
   inset elements above it (notes, arrears, expiry banner) which all
   span the unit-row's content area. */
.rc-unit__history { margin-top: 8px; }
.rc-history-toggle {
	background: rgba(0,0,0,0.03);
	border: none;
	padding: 6px 9px;
	font-size: var(--text-sm);
	color: var(--ink-muted);
	cursor: pointer;
	border-radius: var(--r-sm);
	display: flex; align-items: center; gap: 5px;
	width: 100%;
	font-family: inherit;
	text-align: start;
}
.rc-history-toggle:hover { background: rgba(0,0,0,0.06); }
[data-theme="dark"] .rc-history-toggle { background: rgba(255,255,255,0.04); color: var(--ink-muted); }
[data-theme="dark"] .rc-history-toggle:hover { background: rgba(255,255,255,0.08); }
.rc-history-chevron { font-size: 10px; }
.rc-history-table-wrap { margin-top: 6px; overflow-x: auto; }
.rc-history-table {
	width: 100%; border-collapse: collapse;
	font-size: var(--text-sm);
}
.rc-history-table th {
	text-align: start; padding: 4px 8px;
	font-weight: 600;
	color: var(--ink-muted);
	background: var(--beige);
	border-bottom: 1px solid var(--border);
}
.rc-history-table td {
	padding: 4px 8px;
	border-bottom: 1px solid var(--border);
	color: var(--ink);
}
.rc-history-table tr:last-child td { border-bottom: none; }
.rc-page .rc-history-receipt,
.rc-page .rc-history-receipt:visited {
	color: inherit; text-decoration: none;
	transition: color var(--dur-fast);
}
.rc-page .rc-history-receipt:hover { color: var(--maktab-link); text-decoration: underline; }

/* Empty state — foundation .empty pattern (icon + title + sub + CTA) */
.rc-empty {
	text-align: center;
	padding: var(--s-12) var(--s-6);
	color: var(--ink-muted);
}
.rc-empty__ico {
	width: 56px; height: 56px;
	margin: 0 auto var(--s-3);
	color: var(--sand);
}
.rc-empty__ico svg { width: 100%; height: 100%; }
.rc-empty__title {
	font-size: var(--text-lg);
	color: var(--brown);
	margin-bottom: var(--s-2);
	font-weight: 600;
}
[data-theme="dark"] .rc-empty__title { color: var(--ink); }
.rc-empty__sub {
	font-size: var(--text-sm);
	margin-bottom: var(--s-4);
	max-width: 360px;
	margin-inline: auto;
	line-height: 1.55;
}
.rc-empty__cta {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px;
	font-family: var(--font-ar);
	font-size: var(--text-sm); font-weight: 500;
	background: var(--cream); color: var(--ink);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background var(--dur-fast), border-color var(--dur-fast);
}
.rc-empty__cta:hover { background: var(--straw); border-color: var(--sand); }

/* ── Payment dialog (preserved from legacy, just renamed) ── */
.rc-pay-header { margin-bottom: 8px; }
.rc-pay-who { font-size: var(--text-lg); font-weight: 700; color: var(--brown-deep); }
.rc-pay-where { font-size: var(--text-sm); color: var(--ink-muted); }
.rc-pay-success { text-align: center; padding: 10px 0; }
.rc-pay-success-icon { font-size: 40px; color: var(--success); }
.rc-pay-success-title { font-size: var(--text-lg); font-weight: 700; color: var(--brown-deep); margin: 4px 0; }
.rc-pay-success-detail { font-size: var(--text-base); color: var(--ink-muted); }
.rc-pay-success-amount { font-size: var(--text-2xl); font-weight: 700; color: var(--brown-deep); margin: 8px 0; }
.rc-pay-invoice-link {
	display: inline-block; margin-top: 8px;
	color: var(--maktab-link); font-weight: 600;
	font-size: var(--text-base); text-decoration: none;
}
.rc-pay-invoice-link:hover { text-decoration: underline; }

[data-theme="dark"] .rc-pay-who,
[data-theme="dark"] .rc-pay-success-title,
[data-theme="dark"] .rc-pay-success-amount { color: var(--ink); }
[data-theme="dark"] .rc-pay-where,
[data-theme="dark"] .rc-pay-success-detail { color: var(--ink-muted); }

/* ── Responsive ── */
@media (max-width: 1024px) {
	.rc-card-grid { grid-template-columns: 1fr; }
	.rc-stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.rc-page { padding: var(--s-3) var(--s-3) var(--s-8); }
	.rc-stat-row { gap: 6px; }
	.rc-stat { padding: 10px 12px; }
	.rc-stat__value { font-size: var(--text-xl); }
	.rc-card { padding: 12px; }
	.rc-unit__meta { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
	.rc-card__head { flex-direction: column; }
}
@media (max-width: 480px) {
	.rc-unit__meta { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Loading skeleton (shape-matched to real layout) ──
   Mirrors rc-page__head / rc-stat / rc-filters / rc-prop-head /
   rc-card-grid so skeleton → loaded transition has no layout jump.
   Uses .skel from foundation (warm straw-tinted gradient). */
.skel {
	background: linear-gradient(
		90deg,
		var(--straw) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		var(--straw) 100%
	);
	background-size: 200% 100%;
	animation: skel-shimmer 1.4s linear infinite;
	border-radius: var(--r-sm);
	height: 14px;
}
[data-theme="dark"] .skel {
	background: linear-gradient(
		90deg,
		rgba(212, 197, 160, 0.18) 0%,
		rgba(212, 197, 160, 0.45) 50%,
		rgba(212, 197, 160, 0.18) 100%
	);
}
@keyframes skel-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.rc-skel .rc-stat { background: transparent; border-color: var(--border); }
.rc-skel .rc-page__head > div:first-child { flex: 1 1 auto; min-width: 0; }
.rc-skel__title    { display: block; height: 36px; width: 240px; max-width: 60%; border-radius: var(--r-sm); margin-bottom: 10px; }
.rc-skel__sub      { display: block; height: 14px; width: 180px; max-width: 40%; border-radius: var(--r-sm); }
.rc-skel__btn      { display: inline-block; height: 36px; width: 140px; border-radius: var(--r-sm); }
.rc-skel__stat     { padding: 14px 16px; }
.rc-skel__stat-label { display: block; height: 10px; width: 60%; border-radius: var(--r-sm); margin-bottom: 10px; }
.rc-skel__stat-value { display: block; height: 28px; width: 50%; border-radius: var(--r-sm); margin-bottom: 8px; }
.rc-skel__stat-sub   { display: block; height: 10px; width: 40%; border-radius: var(--r-sm); }
.rc-skel__pill       { display: inline-block; height: 28px; border-radius: var(--r-sq); }
.rc-skel__prop-name  { display: inline-block; height: 18px; width: 220px; border-radius: var(--r-sm); }
.rc-skel__prop-meta  { display: inline-block; height: 12px; width: 280px; border-radius: var(--r-sm); }
.rc-skel__card       { padding: 16px; }
.rc-skel__tenant     { display: block; height: 16px; width: 50%; border-radius: var(--r-sm); margin-bottom: 8px; }
.rc-skel__phone      { display: block; height: 12px; width: 70%; border-radius: var(--r-sm); margin-bottom: 16px; }
.rc-skel__unit-head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rc-skel__unit-title { display: inline-block; height: 16px; width: 90px; border-radius: var(--r-sm); }
.rc-skel__unit-type  { display: inline-block; height: 10px; width: 70px; border-radius: var(--r-sm); }
.rc-skel__meta       {
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	gap: var(--s-3) var(--s-4);
}
.rc-skel__meta-cell  { min-width: 0; }
.rc-skel__meta-lbl   { display: block; height: 10px; width: 60%; border-radius: var(--r-sm); margin-bottom: 6px; }
.rc-skel__meta-val   { display: block; height: 14px; width: 80%; border-radius: var(--r-sm); }

@media (max-width: 768px) {
	.rc-skel__meta { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
}
@media (max-width: 480px) {
	.rc-skel__meta { grid-template-columns: 1fr; gap: 4px; }
}


/* ═══════════════════════════════════════════
   Lease View — Custom lease detail page
   ═══════════════════════════════════════════ */

.lease-view-container, .tenant-view-container, .property-view-container,
.payment-view-container, .payments-list-container,
.unit-view-container, .maintenance-view-container,
.leases-list-container, .properties-list-container, .tenants-list-container,
.units-list-container,
.collectors-list-container, .collector-view-container,
.households-list-container, .staff-list-container, .vehicles-list-container,
.expenses-list-container,
.doc-view-container {
	max-width: 1100px; margin: 0 auto; padding: 16px 20px 40px;
	container-type: inline-size;
}
@media (max-width: 768px) {
	.lease-view-container, .tenant-view-container, .property-view-container,
	.payment-view-container, .payments-list-container,
	.unit-view-container, .maintenance-view-container,
	.leases-list-container, .properties-list-container, .tenants-list-container,
	.units-list-container,
	.collectors-list-container, .collector-view-container,
	.households-list-container, .staff-list-container, .vehicles-list-container,
	.expenses-list-container,
	.doc-view-container { padding: 8px 12px 30px; }
}

/* Status bar */
/* Edit toolbar */
.lv-toolbar {
	display: flex;
	gap: 8px;
	padding: 4px 16px;
	margin-bottom: 4px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.lv-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	background: transparent;
	color: var(--maktab-text);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s;
}
.lv-toolbar-btn:hover { background: rgba(139,125,107,0.08); }
.lv-toolbar-btn svg { opacity: 0.7; }
.lv-delete-btn { color: var(--overdue); border-color: var(--overdue); }
.lv-delete-btn:hover { background: rgba(139,58,37,0.08); }
.lv-archive-active { color: var(--sand-deep); border-color: var(--sand-deep); }
.lv-archive-active:hover { background: rgba(139,105,20,0.08); }
.lv-cancel-btn { color: var(--sand-deep); border-color: var(--sand-deep); }
.lv-cancel-btn:hover { background: rgba(139,105,20,0.08); }
.lv-amend-btn { color: #6B8F71; border-color: #6B8F71; }
.lv-amend-btn:hover { background: rgba(107,143,113,0.08); }
[data-theme="dark"] .lv-cancel-btn { color: #E0B06A; border-color: #E0B06A; }
[data-theme="dark"] .lv-amend-btn { color: #A8D4A0; border-color: #A8D4A0; }

/* Per-page list search */
/* List-page toolbar row: + New button sits beside the search wrapper. When
   both are rendered on the same page (via attach_new_button + attach_list_search)
   they appear side-by-side on desktop and stack on narrow screens. */
.lv-new-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	height: 38px;
	background: var(--maktab-brown);
	color: #fff;
	border: 1px solid var(--maktab-brown);
	border-radius: var(--r-md);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	margin: 0 0 16px 0;
	transition: background 0.15s;
	white-space: nowrap;
}
.lv-new-btn:hover { background: var(--brown-deep); }
.lv-new-btn:focus-visible { outline: 2px solid var(--maktab-amber); outline-offset: 2px; }
.lv-new-btn svg { flex-shrink: 0; }
/* Tenant detail view: + Add contact button inside the Contacts card header */
.tv-contacts-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.tv-add-contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: transparent;
	color: var(--maktab-brown);
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.tv-add-contact-btn:hover {
	background: var(--maktab-beige);
	border-color: var(--maktab-brown);
}
.tv-add-contact-btn:focus-visible { outline: 2px solid var(--maktab-amber); outline-offset: 2px; }
[data-theme="dark"] .tv-add-contact-btn {
	color: var(--maktab-straw);
	border-color: var(--maktab-border);
}
[data-theme="dark"] .tv-add-contact-btn:hover {
	background: rgba(212, 197, 160, 0.08);
	border-color: var(--maktab-straw);
}
/* When the + New button is immediately followed by a search wrap, pair them
   into a toolbar row on desktop. */
.lv-new-btn + .lv-search-wrap {
	flex: 1;
	min-width: 0;
}
.lv-new-btn + .lv-search-wrap,
.lv-search-wrap:has(+ .lv-new-btn) {
	display: inline-flex;
}
/* Toolbar row wrapper — created by JS when we have both buttons + search */
.lv-list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px 0;
}
.lv-list-toolbar .lv-new-btn,
.lv-list-toolbar .lv-search-wrap {
	margin: 0;
}
.lv-list-toolbar .lv-search-wrap {
	flex: 1;
	min-width: 240px;
}
[data-theme="dark"] .lv-new-btn {
	background: var(--maktab-brown);
	color: var(--maktab-cream);
}
[data-theme="dark"] .lv-new-btn:hover {
	background: #8B6F4C;
}

.lv-search-wrap {
	position: relative;
	margin: 0 0 16px 0;
	display: flex;
	align-items: center;
}
.lv-search-icon {
	position: absolute;
	inset-inline-start: 12px;
	color: var(--maktab-text-muted);
	pointer-events: none;
}
.lv-search-input {
	width: 100%;
	height: 38px;
	padding: 0 14px 0 38px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	background: var(--card-bg, #fff);
	color: var(--maktab-text);
	font-size: 13px;
	transition: border-color 0.15s;
}
[dir="rtl"] .lv-search-input { padding: 10px 38px 10px 14px; }
.lv-search-input:focus {
	outline: none;
	border-color: var(--maktab-brown);
}
.lv-search-input::placeholder { color: var(--maktab-text-muted); }
.lv-search-clear {
	position: absolute;
	inset-inline-end: 10px;
	background: none;
	border: none;
	font-size: 20px;
	color: var(--maktab-text-muted);
	cursor: pointer;
	line-height: 1;
	padding: 0 6px;
}
.lv-search-clear:hover { color: var(--maktab-text); }

/* Documents card header (title + actions on same row) */
.lv-doc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lv-doc-header .lv-card-title { margin-bottom: 0; }
.lv-doc-header-actions { display: flex; gap: 6px; }
.lv-doc-header-actions .lv-toolbar-btn { padding: 4px 10px; font-size: 12px; }
.lv-show-archived-btn { padding: 4px 8px !important; }
.lv-show-archived-btn.lv-archive-active { background: rgba(139,105,20,0.15); color: var(--sand-deep); border-color: var(--sand-deep); }

.lv-attachment-row { position: relative; }
.lv-doc-menu-btn {
	background: transparent;
	border: none;
	color: var(--ink-muted);
	font-size: 18px;
	cursor: pointer;
	padding: 0 6px;
	margin-inline-start: 4px;
	line-height: 1;
}
.lv-doc-menu-btn:hover { color: var(--maktab-text); }
.lv-doc-archived { opacity: 0.55; font-style: italic; }
.lv-doc-archived .lv-file-link::after { content: ' (' attr(data-archived-label) ')'; font-size: 10px; color: var(--sand-deep); }

/* Primary receipt — small inline badge after filename. The row gets a subtle
   left border (in LTR) / right border (in RTL) to reinforce that this
   attachment is the canonical receipt for the MTX. */
.lv-receipt-badge {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(139,105,20,0.14);
	color: var(--sand-deep);
	border-radius: 4px;
	vertical-align: middle;
}
/* FB-2026-00296: the inline-start accent border on a primary receipt
   document looked like a stray vertical line on the left of the
   payment-view DOCUMENTS section. The "RECEIPT" badge next to the
   filename is the canonical indicator — drop the redundant chrome. */
.lv-doc-primary-receipt { /* receipt status indicated by .lv-receipt-badge */ }

.lv-doc-menu {
	background: #fff;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	box-shadow: none;
	min-width: 140px;
	padding: 4px 0;
}
.lv-doc-menu-item {
	display: block;
	width: 100%;
	background: none;
	border: none;
	text-align: start;
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
	color: var(--maktab-text);
}
.lv-doc-menu-item:hover { background: rgba(139,125,107,0.08); }
.lv-doc-menu-danger { color: var(--crit); }
[data-theme="dark"] .lv-doc-menu { background: #2A2418; border-color: var(--straw); box-shadow: none; }
[data-theme="dark"] .lv-doc-menu-item { color: var(--straw); }
[data-theme="dark"] .lv-doc-menu-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .lv-doc-menu-danger { color: #D48A74; }
[data-theme="dark"] .lv-doc-menu-btn { color: #9A8A7A; }
[data-theme="dark"] .lv-doc-menu-btn:hover { color: var(--straw); }

/* Collapsible sections (W3-W5) */
.lv-collapsible-title {
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
}
.lv-collapsible-title > span:first-child {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 12px;
	color: var(--maktab-text-muted);
}
.lv-meta-summary {
	font-size: 12px;
	font-weight: 500;
	color: var(--maktab-text-muted);
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
	letter-spacing: 0;
}
/* Hide the header summary when the card is expanded — user doesn't need
   "X changes · 2 days ago" next to "Activity" when the full list is visible. */
.lv-card.lv-expanded .lv-meta-summary { display: none; }

.lv-meta-inline { font-weight: 400; font-size: 12px; color: var(--maktab-text-muted); }

/* Bigger, more visible collapse arrow. Rotates on expand instead of swapping
   between ▸ and ▾ so it's smoother. Text is still ▸/▾ for fallback. */
.lv-collapse-icon {
	font-size: 22px;
	line-height: 1;
	color: var(--maktab-text-muted);
	margin-inline-start: auto;
	transition: transform 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	cursor: pointer;
}
[dir="rtl"] .lv-collapse-icon {
	margin-inline-start: auto;
}
[data-theme="dark"] .lv-meta-summary,
[data-theme="dark"] .lv-meta-inline { color: var(--maktab-text-muted); }

/* Icon-only buttons used in Documents card header (Upload, Show archived) */
.lv-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	color: var(--maktab-text-muted);
	cursor: pointer;
}
.lv-icon-btn:hover {
	background: rgba(212, 197, 160, 0.10);
	color: var(--maktab-text);
	border-color: var(--maktab-sand);
}
.lv-icon-btn.lv-archive-active {
	background: rgba(139, 105, 20, 0.15);
	color: var(--sand-deep);
	border-color: var(--sand-deep);
}
.lv-icon-btn:focus-visible { outline: 2px solid var(--maktab-amber); outline-offset: 2px; }
[data-theme="dark"] .lv-icon-btn {
	border-color: var(--maktab-sand);
	color: var(--maktab-text);
}
[data-theme="dark"] .lv-icon-btn:hover {
	background: rgba(212, 197, 160, 0.08);
	border-color: var(--maktab-sand);
}
.lv-doc-header-actions {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-inline-start: auto;
	flex-shrink: 0;
}
.lv-collapsible-title:has(.lv-doc-header-actions) .lv-collapse-icon {
	margin-inline-start: 0;
}

/* ── Row-level 3-dot menu button (shared: documents, comments, contacts) */
.lv-row-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--r-md);
	color: var(--maktab-text-muted);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	font-weight: bold;
	flex-shrink: 0;
}
.lv-row-menu-btn:hover {
	background: rgba(212, 197, 160, 0.15);
	color: var(--maktab-text);
}
.lv-row-menu-btn:focus-visible { outline: 2px solid var(--maktab-amber); outline-offset: 2px; }
[data-theme="dark"] .lv-row-menu-btn { color: var(--maktab-straw); }
[data-theme="dark"] .lv-row-menu-btn:hover { background: rgba(212, 197, 160, 0.10); }

/* Floating row menu (used by show_row_menu helper) */
.maktab-row-menu {
	position: fixed;
	background: #fff;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	box-shadow: none;
	min-width: 140px;
	padding: 4px;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.maktab-row-menu-item {
	display: block;
	width: 100%;
	padding: 8px 14px;
	background: transparent;
	border: none;
	border-radius: var(--r-sm);
	text-align: start;
	font-size: 13px;
	color: var(--maktab-text);
	cursor: pointer;
	font-family: inherit;
}
.maktab-row-menu-item:hover {
	background: rgba(212, 197, 160, 0.20);
}
.maktab-row-menu-item.maktab-row-menu-danger { color: var(--overdue); }
.maktab-row-menu-item.maktab-row-menu-danger:hover { background: rgba(139, 58, 37, 0.10); }
.maktab-row-menu-item.maktab-row-menu-disabled {
	color: var(--maktab-text-muted);
	cursor: not-allowed;
	opacity: 0.5;
}
[data-theme="dark"] .maktab-row-menu {
	background: #24201A;
	border-color: var(--maktab-border);
}
[data-theme="dark"] .maktab-row-menu-item { color: var(--maktab-text); }
[data-theme="dark"] .maktab-row-menu-item:hover { background: rgba(212, 197, 160, 0.12); }
[data-theme="dark"] .maktab-row-menu-item.maktab-row-menu-danger { color: #E8A890; }
[data-theme="dark"] .maktab-row-menu-item.maktab-row-menu-danger:hover { background: rgba(212, 138, 116, 0.18); }

/* Contact row (tenant view) — with 3-dot menu on the right */
.tv-contact-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(139, 125, 107, 0.08);
}
.tv-contact-row:last-child { border-bottom: none; }
.tv-contact-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}
.tv-contact-info .lv-phone {
	font-size: 13px;
	font-weight: 600;
	color: var(--maktab-link);
	text-decoration: none;
}
.tv-contact-info .lv-contact-name {
	font-size: 12px;
	color: var(--maktab-text-muted);
}
.tv-primary-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: var(--r-sm);
	background: rgba(94, 125, 94, 0.15);
	color: #2E5C2E;
	margin-inline-start: 6px;
}
[data-theme="dark"] .tv-primary-badge {
	background: rgba(143, 184, 143, 0.18);
	color: #9ED29E;
}

/* Document attachment row — 3-dot menu on the right, file name left, meta middle */
.lv-attachment-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	/* FB-117: removed border-bottom — padding alone provides separation */
}
.lv-attachment-row .lv-file-link {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--maktab-link);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	/* FB-2026-00246: kill stray underline inherited from the stacked-list
	   .lv-file-link rule (line ~4468). Attachment rows have their own
	   spacing via flex; no per-row border needed. */
	border-bottom: none;
}
.lv-attachment-row .lv-file-link:hover { text-decoration: underline; }
.lv-attachment-row .lv-attachment-meta {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--ink-muted);
	white-space: nowrap;
}
/* The 3-dot button in the attachment row — same class as elsewhere */
.lv-attachment-row .lv-doc-menu-btn {
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--r-md);
	color: var(--maktab-text-muted);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	font-weight: bold;
	flex-shrink: 0;
}
.lv-attachment-row .lv-doc-menu-btn:hover {
	background: rgba(212, 197, 160, 0.15);
	color: var(--maktab-text);
}

/* Comment row — 3-dot menu in the header */
.lv-comment { position: relative; }
.lv-comment-header {
	display: flex;
	align-items: center;
	gap: 8px;
}
.lv-comment-header .lv-comment-author { flex: 1 1 auto; min-width: 0; }
.lv-comment-header .lv-comment-time { margin-inline-start: auto; }
.lv-comment-header .lv-row-menu-btn { margin-inline-start: 6px; }

/* Space below the Activity card so it's not cramped against the next element */
.lv-side > .lv-card:last-child,
.lv-main > .lv-card:last-child {
	margin-bottom: 20px;
}
.lv-activity-card:last-child { padding-bottom: 20px; }

/* Detail view two-column layout: both columns should be independent.
   The left column is the main content (title, info, lease list). The right
   column is the sidebar (notes, contacts, documents, comments, activity).
   Use align-items:flex-start so each column takes its natural height. */
.lv-columns {
	display: grid;
	/* Side column is a fixed 380px track — it never shrinks in 2-col
	   mode. Main column absorbs all the flexibility (minmax 280px…1fr).
	   When main can no longer fit ≥280px next to the 380px side, the
	   JS ResizeObserver swaps the grid to a single 1fr column. */
	grid-template-columns: minmax(280px, 1fr) 380px;
	gap: 20px;
	align-items: start;
	padding: 16px 20px 28px;
	max-width: 900px;
	margin: 0 auto;
}
.lv-main, .lv-side { min-width: 0; }

/* Stack when .lv-columns itself gets narrow. A JS ResizeObserver
   (maktab.watch_detail_columns) toggles .lv-stacked on every resize,
   which is more reliable than Safari's viewport media queries or
   container queries — it fires on the exact element we care about,
   including when the content area reflows without a viewport change. */
.lv-columns.lv-stacked {
	grid-template-columns: 1fr;
	padding: 14px 16px 24px;
	max-width: none;
}
.lv-columns.lv-stacked .lv-main,
.lv-columns.lv-stacked .lv-side { max-width: none; }

/* First-paint guard: on mobile viewports the JS toggler hasn't added
   .lv-stacked yet, so the browser would briefly render the 660px-minimum
   2-col grid and flash a wrong layout. Force single-column via media
   query so the first paint is already correct. JS still runs and keeps
   behaviour consistent on resize. */
@media (max-width: 768px) {
	.lv-columns {
		grid-template-columns: 1fr;
		padding: 14px 16px 24px;
		max-width: none;
	}
	.lv-columns .lv-main,
	.lv-columns .lv-side { max-width: none; }
}

/* Prevent currency values like "30,000.00 ر.س / year" from wrapping
   the unit suffix to a second line. The real problem is that
   frappe.format() wraps currency in a <div> (block) — even with
   white-space:nowrap on the parent, a block child forces line breaks.
   Flattening the div to inline lets the whole value stay on one line. */
.lv-row .lv-value { white-space: nowrap; }
.lv-row .lv-value > div { display: inline; }
/* FB-117: keep file name, meta, and 3-dot menu on a single row even on mobile.
   The duplicate .lv-attachment-row + mobile column-flex rules that used to
   live here have been removed — the canonical rules at ~line 4457 already
   handle layout correctly with flex-row + ellipsis. */
.lv-attachment-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.lv-attachment-info .lv-file-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-comment { padding: 10px 0; border-bottom: 1px solid rgba(139,125,107,0.08); }
.lv-comment:last-child { border-bottom: none; }
.lv-comment-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.lv-comment-author { font-weight: 600; font-size: 13px; color: var(--maktab-text); }
.lv-comment-time { font-size: 11px; color: #A09080; }
.lv-comment-content { font-size: 13px; color: var(--maktab-text); white-space: pre-line; }
.lv-comment-input-wrap { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lv-comment-input { width: 100%; box-sizing: border-box; border: 1px solid var(--maktab-border); border-radius: var(--r-md); padding: 6px 10px; font-size: 13px; resize: vertical; background: transparent; color: var(--maktab-text); }
.lv-comment-post-btn { width: 100%; padding: 8px 12px; border-radius: var(--r-md); background: var(--maktab-brown); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
.lv-activity-entry { padding: 8px 0; border-bottom: 1px solid rgba(139,125,107,0.08); }
.lv-activity-entry:last-child { border-bottom: none; }
.lv-activity-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.lv-activity-change { font-size: 12px; color: var(--ink-muted); padding: 2px 0; }
.lv-activity-field { font-weight: 600; }
.lv-activity-old { text-decoration: line-through; color: var(--crit); }
.lv-activity-new { color: #6B8F71; }

.lv-status-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-radius: 0;
	margin-bottom: 16px;
	font-size: 14px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.lv-status-label { font-weight: 700; }
.lv-status-detail { color: inherit; opacity: 1; }
.lv-status-active { background: #E5EFE0; color: #3A5F3A; }
.lv-status-expired { background: #F5E0D0; color: #7A4E2D; }
.lv-status-terminated { background: #F0E6F6; color: #6B3FA0; }
.lv-status-pending { background: #F8F0E0; color: #5C4510; }
.lv-status-thilth { background: #E5EFE0; color: #3A5F3A; }
.lv-status-khums { background: #F0E6F6; color: #6B3FA0; }
.lv-unit-occupied { color: #3A5F3A; font-weight: 600; }
.lv-unit-vacant { color: var(--ink-muted); }
.lv-text-muted { color: var(--ink-muted); }
.lv-empty { text-align: center; padding: 20px; color: var(--ink-muted); }

/* (Two-column layout rules are defined at ~line 3451 — single source of truth) */

/* Cards */
.lv-card {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--maktab-border);
	padding: 16px;
	margin-bottom: 0;
}
.lv-card:last-child { border-bottom: none; }

/* Summary cards on list pages — filled backgrounds, no outlines */
.ll-summary-card.lv-card, .prl-summary-card.lv-card, .tl-summary-card.lv-card,
.ul-summary-card.lv-card, .pl-summary-card.lv-card, .mnt-summary-card.lv-card {
	background: #F5EDE0;
	border: none;
	border-bottom: none;
	border-radius: 0;
	padding: 16px;
}
/* Table wrapper card — no outline */
.ll-table-card.lv-card, .prl-table-card.lv-card, .tl-table-card.lv-card,
.ul-table-card.lv-card, .pl-table-card.lv-card, .mnt-table-card.lv-card {
	padding: 0;
	border: none;
	border-bottom: none;
}
.lv-card-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	font-weight: 700;
	color: var(--maktab-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}

/* Inline add button (e.g. "+" next to a card title) */
.lv-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--maktab-border);
	border-radius: 50%;
	background: transparent;
	color: var(--maktab-text-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background 120ms, color 120ms, border-color 120ms;
}
.lv-add-btn:hover {
	background: var(--subtle-fg, rgba(0,0,0,0.04));
	color: var(--maktab-text);
	border-color: var(--maktab-text-muted);
}

/* Rows */
.lv-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	column-gap: 12px;
	padding: 4px 0;
	font-size: 14px;
}
/* Stacked variant — label on top, value below (used for long-text fields
   like Notes where multi-line content would collide with an inline label) */
.lv-row.lv-row-stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
}
.lv-row.lv-row-stacked .lv-value { text-align: start; white-space: normal; }
.lv-row.lv-row-stacked .lv-value > div { display: block; }
.lv-label { color: var(--maktab-text-muted); }
.lv-value { color: var(--maktab-text); font-weight: 500; }
.lv-money { font-variant-numeric: tabular-nums; }
.lv-row-total { border-top: 1px solid var(--maktab-border); padding-top: 6px; margin-top: 4px; }
.lv-row-total .lv-value { font-weight: 700; color: var(--maktab-dark-brown); }
.lv-text-warn { color: var(--maktab-terracotta); }
.lv-text-caution {
    color: var(--maktab-orange, var(--warn)) !important;
}
.lv-inline-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}
.lv-inline-badge.lv-status-active { background: rgba(94, 125, 94, 0.15); color: var(--maktab-green, var(--success)); }
.lv-inline-badge.lv-status-pending { background: rgba(212, 160, 90, 0.15); color: var(--maktab-orange, var(--warn)); }
.lv-inline-badge.lv-status-terminated { background: rgba(192, 115, 94, 0.15); color: var(--maktab-red, var(--crit)); }

/* Tenant sidebar */
.lv-tenant-name { font-size: 16px; font-weight: 700; color: var(--maktab-text); margin-bottom: 2px; }
.lv-tenant-name-ar { font-size: 14px; color: var(--maktab-text-muted); margin-bottom: 8px; }
.lv-contact { margin-bottom: 4px; }
.lv-phone { color: var(--maktab-link); text-decoration: none; font-size: 14px; font-weight: 500; }
.lv-phone:hover { text-decoration: underline; }
.lv-contact-name { color: var(--maktab-text-muted); font-size: 12px; margin-inline-start: 6px; }
.lv-ejar-contact { font-size: 12px; color: var(--maktab-text-muted); margin-top: 6px; font-style: italic; }

/* Contact cards — stacked layout for slide panels */
.lv-contact-card {
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	border-bottom: 1px solid var(--maktab-border-light, rgba(107, 90, 72, 0.08));
	gap: 2px;
}
.lv-contact-card:last-child { border-bottom: none; }
.lv-contact-card-name {
	font-size: 13px;
	color: var(--maktab-text);
	word-break: break-word;
	overflow-wrap: break-word;
}
.lv-contact-card-phone {
	font-size: 14px;
	font-weight: 500;
	color: var(--maktab-link);
	text-decoration: none;
	direction: ltr;
	unicode-bidi: isolate;
}
.lv-contact-card-phone:hover { text-decoration: underline; }
[data-theme="dark"] .lv-contact-card { border-bottom-color: var(--maktab-border); }

/* Notes */
.lv-notes-input {
	width: 100%;
	min-height: 80px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	color: var(--maktab-text);
	background: var(--maktab-white);
	resize: vertical;
}
.lv-notes-input:focus { outline: none; border-color: var(--maktab-sand); }
.lv-save-notes {
	margin-top: 8px;
	background: var(--maktab-dark-brown);
	color: var(--maktab-cream);
	border: none;
	border-radius: var(--r-md);
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
}
.lv-save-notes:hover { background: var(--maktab-brown); }

/* Documents */
.lv-file-link {
	display: block;
	padding: 6px 0;
	color: var(--maktab-text);
	text-decoration: none;
	font-size: 13px;
	border-bottom: 1px solid var(--maktab-border);
}
.lv-file-link:last-child { border-bottom: none; }
.lv-file-link:hover { color: var(--maktab-link); }
.lv-file-icon { margin-inline-end: 4px; }
/* FB-2026-00120 round 3: keep filename + extension as one LTR run inside an
   RTL row. <bdi> handles isolation by spec, but CSS belt-and-suspenders
   prevents Chromium from splitting "صك ... 3.pdf" across the row. */
.lv-file-link, .lv-file-link bdi {
	unicode-bidi: isolate;
}

/* Payment history table */
.lv-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.lv-table th {
	text-align: start;
	font-weight: 600;
	color: var(--maktab-text-muted);
	padding: 6px 8px;
	border-bottom: 2px solid var(--maktab-border);
	font-size: 12px;
}
.lv-table td {
	padding: 8px;
	border-bottom: 1px solid var(--maktab-border);
	color: var(--maktab-text);
}
.lv-table tr:last-child td { border-bottom: none; }
.lv-invoice-link { color: var(--maktab-link); text-decoration: none; font-weight: 500; white-space: nowrap; }
.lv-invoice-link:hover { text-decoration: underline; }
.lv-map-link { color: var(--maktab-link); text-decoration: none; font-size: 12px; }

/* Tenant view lease list */
.tv-lease-row { padding: 10px 0; border-bottom: 1px solid var(--maktab-border); }
.tv-lease-row:last-child { border-bottom: none; }
.tv-lease-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.tv-lease-details { font-size: 13px; color: var(--maktab-text-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.tv-lease-details .lv-label { font-weight: 600; color: var(--maktab-text-muted); }
.tv-lease-details .lv-value { color: var(--maktab-text); }

/* Dark mode */
[data-theme="dark"] .lv-status-active { background: rgba(125,155,118,0.15); color: #A8D4A0; }
[data-theme="dark"] .lv-status-expired { background: rgba(196,149,106,0.15); color: #E8C9A0; }
[data-theme="dark"] .lv-status-pending { background: rgba(139,105,20,0.15); color: #D4B96A; }
[data-theme="dark"] .lv-status-thilth { background: rgba(125,155,118,0.15); color: #A8D4A0; }
[data-theme="dark"] .lv-status-khums { background: rgba(107,63,160,0.15); color: #C4A8E8; }

/* Mobile responsive */
@media (max-width: 768px) {
	/* ── Detail view mobile fixes ── */
	/* Toolbar: buttons fill width, original size */
	.lv-toolbar {
		flex-wrap: wrap !important;
		padding: 4px 0 !important;
		gap: 6px !important;
	}
	.lv-toolbar-btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		justify-content: center !important;
		padding: 5px 6px !important;
		gap: 3px !important;
	}
	/* Extra buttons (Send Portal Invite, etc.) get full width on their own row */
	.lv-toolbar-btn.lv-extra-btn {
		flex: 1 1 100% !important;
	}
	/* Comment Post button is in a column flex container — take full width */
	.lv-comment-post-btn {
		flex: none !important;
		width: 100% !important;
	}
	/* Reduce gap between status bar and first card */
	.lv-status-bar {
		padding: 6px 12px !important;
		margin-bottom: 0 !important;
	}
	/* Detail column wrapper: remove horizontal padding so cards align with toolbar.
	   Reduce gap from 20px to 8px — on mobile lv-main and lv-side stack vertically
	   and the gap (plus lv-main last-child margin) created a large blank band. */
	.lv-columns {
		padding: 4px 0 24px !important;
		gap: 8px !important;
	}
	/* Remove the extra bottom margin on last card in lv-main — the gap above handles spacing */
	.lv-main > .lv-card:last-child {
		margin-bottom: 0 !important;
	}
	/* Detail cards: vertical padding only — rows align flush with toolbar edge */
	.lv-columns .lv-card {
		padding: 12px 0 !important;
	}
	/* List/summary cards keep inset padding */
	.lv-card {
		padding: 12px !important;
	}
	/* Detail rows: long values wrap gracefully on mobile.
	   No flex-wrap — label stays left, value stays right and word-breaks.
	   For very long values, the flex-shrink on value handles it. */
	.lv-row {
		flex-wrap: nowrap;
		gap: 8px;
	}
	.lv-label {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.lv-value {
		flex: 1 1 0;
		text-align: right;
		word-break: break-word;
		overflow-wrap: break-word;
		min-width: 0;
	}
	/* Ensure detail view content stays within viewport */
	.lv-columns,
	.lv-card {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* Reset flex-basis so stacked columns get natural height,
	   and constrain width so content doesn't overflow parent */
	.lv-main, .lv-side {
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		overflow-wrap: break-word;
	}
}
@media (max-width: 768px) {
	/* ── Stacked card layout for all list tables on mobile ──
	   Targets both the legacy per-page table classes (.tl-table etc.) and
	   the shared renderer's class (.maktab-list-table). */
	.ll-table thead, .prl-table thead, .tl-table thead,
	.ul-table thead, .pl-table thead,
	.maktab-list-table thead, .lv-table thead {
		display: none;
	}
	.ll-table, .prl-table, .tl-table, .ul-table, .pl-table, .maktab-list-table, .lv-table,
	.ll-table tbody, .prl-table tbody, .tl-table tbody,
	.ul-table tbody, .pl-table tbody, .maktab-list-table tbody, .lv-table tbody,
	.ll-table tr, .prl-table tr, .tl-table tr,
	.ul-table tr, .pl-table tr, .maktab-list-table tr, .lv-table tr,
	.ll-table td, .prl-table td, .tl-table td,
	.ul-table td, .pl-table td, .maktab-list-table td, .lv-table td {
		display: block;
		width: 100%;
	}
	.ll-table, .prl-table, .tl-table, .ul-table, .pl-table, .maktab-list-table, .lv-table {
		background: transparent !important;
		border: none;
	}
	.ll-table tbody tr, .prl-table tbody tr, .tl-table tbody tr,
	.ul-table tbody tr, .pl-table tbody tr,
	.maktab-list-table tbody tr.maktab-list-row, .lv-table tbody tr {
		margin-bottom: 10px;
		border-radius: var(--r-lg);
		padding: 12px 14px;
		border: 1px solid var(--maktab-border);
		background: var(--maktab-cream);
		box-shadow: none;
		cursor: pointer;
	}
	.maktab-list-table tbody tr.maktab-list-empty,
	.maktab-list-table tbody tr.maktab-list-loading,
	.maktab-list-table tbody tr.maktab-list-error {
		background: transparent;
		border: none;
		padding: 20px 0;
	}
	.maktab-list-table tbody tr.maktab-list-row:hover {
		border-color: var(--maktab-sand);
	}
	.ll-table tbody td, .prl-table tbody td, .tl-table tbody td,
	.ul-table tbody td, .pl-table tbody td,
	.maktab-list-table tbody td, .lv-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
		border-bottom: none;
		font-size: 13px;
		text-align: end;
		gap: 12px;
	}
	/* First cell in each mobile card = title row (bigger, borderless) */
	.maktab-list-table tbody td:first-child {
		padding-top: 0;
		padding-bottom: 6px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--maktab-border);
		font-size: 15px;
	}
	.maktab-list-table tbody td:first-child::before {
		display: none;  /* Don't show the label for the title row */
	}
	.ll-table tbody td::before, .prl-table tbody td::before,
	.tl-table tbody td::before, .ul-table tbody td::before,
	.pl-table tbody td::before,
	.maktab-list-table tbody td::before, .lv-table tbody td::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 11px;
		color: var(--maktab-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		flex-shrink: 0;
		text-align: start;
	}
	.ll-num, .prl-num, .tl-num, .ul-num, .pl-num,
	.maktab-list-num {
		text-align: end;
	}
	.pl-row-cancelled { opacity: 0.5; }
	.pl-row-cancelled td { text-decoration: line-through; }
	/* lv-table cards: first cell is card title (unit number) */
	.lv-table tbody td:first-child {
		padding-top: 0;
		padding-bottom: 6px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--maktab-border);
		font-size: 15px;
		font-weight: 600;
	}
	.lv-table tbody td:first-child::before {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════
   Maintenance View (mnt-*)
   ═══════════════════════════════════════════════════════ */

/* Top bar */
.mnt-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 10px;
}
.mnt-new-btn {
	background: var(--maktab-brown) !important;
	border-color: var(--maktab-brown) !important;
	color: var(--maktab-white) !important;
	border-radius: var(--r-md);
	font-weight: 600;
	padding: 6px 16px;
}
.mnt-new-btn:hover {
	background: var(--maktab-dark-brown) !important;
	border-color: var(--maktab-dark-brown) !important;
}
.mnt-filters {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.mnt-filter-btn {
	background: var(--maktab-cream);
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--maktab-text-muted);
	cursor: pointer;
	transition: all 0.15s;
}
.mnt-filter-btn:hover {
	background: var(--maktab-straw);
	color: var(--maktab-dark-brown);
}
.mnt-filter-btn.mnt-filter-active {
	background: var(--maktab-brown);
	color: var(--maktab-white);
	border-color: var(--maktab-brown);
}

/* Summary cards */
.mnt-summary {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}
.mnt-summary-card {
	text-align: center;
	padding: 14px 10px;
}
.mnt-summary-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--maktab-dark-brown);
	line-height: 1.2;
}
.mnt-summary-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--maktab-text-muted);
	letter-spacing: 0.5px;
	margin-top: 2px;
}
.mnt-sc-open { border-top: 3px solid var(--maktab-terracotta); }
.mnt-sc-progress { border-top: 3px solid var(--maktab-amber); }
.mnt-sc-done { border-top: 3px solid var(--maktab-green); }

/* Table */
.mnt-table-card { padding: 0; overflow: hidden; }
.mnt-table-wrap { overflow-x: auto; }
.mnt-table { font-size: 13px; }
.mnt-num { text-align: end; }

/* Priority badges */
.mnt-priority {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--r-lg);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.mnt-pri-urgent { background: rgba(192,115,94,0.15); color: var(--maktab-terracotta); }
.mnt-pri-high { background: rgba(212,160,90,0.15); color: #B8860B; }
.mnt-pri-medium { background: rgba(143,184,212,0.15); color: var(--maktab-sky-hover); }
.mnt-pri-low { background: rgba(94,125,94,0.15); color: var(--maktab-green); }

/* Status badges */
.mnt-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--r-lg);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.mnt-badge-open { background: rgba(192,115,94,0.15); color: var(--maktab-terracotta); }
.mnt-badge-inprogress { background: rgba(212,160,90,0.15); color: #B8860B; }
.mnt-badge-completed { background: rgba(94,125,94,0.15); color: var(--maktab-green); }
.mnt-badge-cancelled { background: rgba(140,122,107,0.15); color: var(--maktab-text-muted); }

/* Status bar colors */
.mnt-status-open { background: #FDF2F0; color: #7A4E2D; }
.mnt-status-progress { background: #FDF8EE; color: #5C4510; }
.mnt-status-complete { background: #E5EFE0; color: #3A5F3A; }
.mnt-status-cancelled { background: #F0ECE6; color: var(--maktab-text-muted); }

/* Action buttons in detail view */
.mnt-action-btn {
	border-radius: var(--r-md);
	font-weight: 600;
	margin-bottom: 8px;
}
.mnt-action-btn.btn-primary {
	background: var(--maktab-brown);
	border-color: var(--maktab-brown);
}
.mnt-action-btn.btn-primary:hover {
	background: var(--maktab-dark-brown);
	border-color: var(--maktab-dark-brown);
}
.mnt-action-btn.btn-success {
	background: var(--maktab-green);
	border-color: var(--maktab-green);
	color: #fff;
}
.mnt-action-btn.btn-success:hover {
	background: #4A6B4A;
	border-color: #4A6B4A;
}
.mnt-action-btn.btn-default {
	background: var(--maktab-cream);
	border-color: var(--maktab-border);
	color: var(--maktab-text);
}
.mnt-action-btn.btn-default:hover {
	background: var(--maktab-straw);
	border-color: var(--maktab-sand);
}

/* Receipt image */
.mnt-receipt-img img {
	max-width: 100%;
	border-radius: var(--r-md);
	border: 1px solid var(--maktab-border);
}

/* Description full text */
.mnt-desc-full { white-space: pre-line; }

/* Empty state */
.mnt-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--maktab-text-muted);
}
.mnt-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.mnt-empty h3 { color: var(--maktab-text); margin-bottom: 8px; }

/* Mobile */
@media (max-width: 768px) {
	.mnt-summary { grid-template-columns: repeat(2, 1fr); }
	.mnt-topbar { flex-direction: column; align-items: stretch; }
	.mnt-filters { justify-content: center; }
}

/* Dark mode */
[data-theme="dark"] .mnt-filter-btn { background: var(--card-bg); border-color: var(--straw); color: #8C7A6B; }
[data-theme="dark"] .mnt-filter-btn:hover { background: var(--straw); color: var(--straw); }
[data-theme="dark"] .mnt-filter-btn.mnt-filter-active { background: var(--maktab-brown); color: #fff; }
[data-theme="dark"] .mnt-summary-value { color: var(--straw); }
[data-theme="dark"] .mnt-status-open { background: rgba(192,115,94,0.15); color: #E8C9A0; }
[data-theme="dark"] .mnt-status-progress { background: rgba(212,160,90,0.15); color: #D4B96A; }
[data-theme="dark"] .mnt-status-complete { background: rgba(94,125,94,0.15); color: #A8D4A0; }
[data-theme="dark"] .mnt-action-btn.btn-default { background: var(--card-bg); border-color: var(--straw); color: var(--straw); }

/* ═══════════════════════════════════════════════════════
   Wasi Dashboard (wd-*)
   ═══════════════════════════════════════════════════════ */
.wd-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 20px 40px;
}

.wd-subtitle {
	text-align: center;
	color: var(--maktab-text-muted);
	font-size: 13px;
	margin-bottom: 18px;
}
.wd-backup-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	margin-inline-start: 4px;
}
.wd-backup-pill.wd-backup-ok {
	color: var(--maktab-green, var(--success));
}
.wd-backup-pill.wd-backup-stale {
	color: var(--maktab-terracotta, var(--crit));
}
[data-theme="dark"] .wd-backup-pill.wd-backup-ok {
	color: #6ee7b7;
}
[data-theme="dark"] .wd-backup-pill.wd-backup-stale {
	color: #fca5a5;
}

/* ── Summary row: 4 cards ── */
.wd-summary-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

.wd-summary-card {
	background: #F5EDE0;
	border: none;
	border-radius: 0;
	padding: 16px 14px 12px;
	text-align: center;
	transition: box-shadow 0.2s;
}

.wd-summary-card:hover { box-shadow: none; }

.wd-summary-alert {
	background: #FDF2F0;
	border-inline-start: 4px solid var(--maktab-terracotta);
}

.wd-summary-icon { font-size: 22px; margin-bottom: 4px; }

.wd-summary-number {
	font-size: 28px;
	font-weight: 700;
	color: var(--maktab-dark-brown);
	line-height: 1.2;
}

.wd-summary-sar { font-size: 20px; }

.wd-summary-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--maktab-text-muted);
	letter-spacing: 0.5px;
	margin-top: 2px;
}

.wd-summary-sub {
	font-size: 12px;
	color: var(--maktab-text-muted);
	margin-top: 4px;
}

/* ── Rent mini-bar ── */
.wd-rent-bar {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding: 10px 0;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--maktab-border);
}

.wd-rent-stat-num {
	font-weight: 700;
	color: var(--maktab-dark-brown);
}

.wd-rent-stat-label {
	color: var(--maktab-text-muted);
	font-size: 13px;
}

/* ── Sections ── */
.wd-section {
	margin-bottom: 24px;
}

.wd-section-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--maktab-dark-brown);
	margin-bottom: 12px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--maktab-straw);
}

/* ── Alerts ── */
.wd-all-clear {
	padding: 16px;
	text-align: center;
	color: var(--maktab-green);
	font-size: 15px;
	font-weight: 600;
	background: #E8F5E8;
	border-radius: var(--maktab-radius);
}

.wd-all-clear-icon { font-size: 18px; }

.wd-alerts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.wd-alert-card {
	display: block;
	padding: 12px 14px;
	border-radius: var(--maktab-radius);
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.15s;
	cursor: pointer;
}

.wd-alert-card:hover {
	box-shadow: none;
	transform: translateY(-1px);
	text-decoration: none;
}

.wd-alert-red {
	background: #FDF2F0;
	border-left: 4px solid var(--crit);
	color: #5C2F1A;
}

.wd-alert-orange {
	background: #FFF8EC;
	border-left: 4px solid var(--warn);
	color: #4A3508;
}

.wd-alert-yellow {
	background: #FEFCE8;
	border-left: 4px solid var(--sand);
	color: #3E2E06;
}

.wd-alert-type {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}

.wd-alert-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

.wd-alert-days {
	font-size: 12px;
	font-weight: 500;
}

/* ── Quick Actions ── */
.wd-actions-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.wd-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 14px;
	border-radius: var(--maktab-radius);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: box-shadow 0.2s, transform 0.15s;
	cursor: pointer;
	min-height: 90px;
}

.wd-action-btn:hover {
	box-shadow: none;
	transform: translateY(-2px);
	text-decoration: none;
}

.wd-action-icon {
	font-size: 28px;
	margin-bottom: 6px;
}

.wd-action-label {
	font-size: 14px;
}

.wd-action-rent {
	background: #2E5C2E;
	color: #ffffff !important;
}
.wd-action-rent:hover { color: #0B220B !important; }

.wd-action-maint {
	background: var(--maktab-sky);
	color: #15354F !important;
}
.wd-action-maint:hover { color: #0F2940 !important; }

.wd-action-report {
	background: var(--maktab-amber);
	color: #3C2A00 !important;
}
.wd-action-report:hover { color: #2C1E00 !important; }

/* ── Two columns ── */
.wd-columns {
	display: flex;
	gap: 16px;
}

.wd-col {
	flex: 1;
	min-width: 0;
}

.wd-table-sub {
	font-size: 11px;
	color: var(--maktab-text-muted);
}

.wd-empty {
	padding: 20px;
	text-align: center;
	color: var(--maktab-text-muted);
	font-size: 13px;
}

/* ── Status badges ── */
.wd-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--r-lg);
	font-size: 11px;
	font-weight: 600;
}

.wd-status-open {
	background: #FDF2F0;
	color: #7A3A2A;
}

.wd-status-progress {
	background: #FFF8EC;
	color: #6B4F20;
}

.wd-status-done {
	background: #E8F5E8;
	color: #3A5F3A;
}

/* ── Helper colors ── */
.wd-text-red { color: var(--overdue); }
.wd-text-green { color: var(--maktab-green); }

/* ── Dark mode ── */
[data-theme="dark"] .wd-summary-alert { background: rgba(192,115,94,0.15); }
[data-theme="dark"] .wd-summary-card { background: #2A2418; }
[data-theme="dark"] .wd-all-clear { background: rgba(125,155,118,0.15); color: #A8D4A0; }
[data-theme="dark"] .wd-alert-red { background: rgba(192,115,94,0.12); color: #E8A890; }
[data-theme="dark"] .wd-alert-orange { background: rgba(212,160,90,0.12); color: #E0C080; }
[data-theme="dark"] .wd-alert-yellow { background: rgba(194,173,126,0.12); color: var(--straw); }
[data-theme="dark"] .wd-status-open { background: rgba(192,115,94,0.15); color: #E8A890; }
[data-theme="dark"] .wd-status-progress { background: rgba(212,160,90,0.15); color: #E0C080; }
[data-theme="dark"] .wd-status-done { background: rgba(125,155,118,0.15); color: #A8D4A0; }

/* ── Mobile ── */
@media (max-width: 768px) {
	.wd-container { padding: 8px 12px 30px; }
	.wd-summary-row { grid-template-columns: repeat(2, 1fr); }
	.wd-summary-number { font-size: 22px; }
	.wd-summary-sar { font-size: 17px; }
	.wd-actions-row { grid-template-columns: 1fr; gap: 8px; }
	.wd-action-btn { min-height: 60px; flex-direction: row; gap: 10px; padding: 14px; }
	.wd-action-icon { font-size: 22px; margin-bottom: 0; }
	.wd-columns { flex-direction: column; }
	.wd-alerts-grid { grid-template-columns: 1fr; }
	.wd-rent-bar { flex-direction: column; gap: 6px; align-items: center; }
}

/* ── iPad / tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
	.wd-summary-row { gap: 8px; }
	.wd-summary-number { font-size: 24px; }
	.wd-action-btn { padding: 16px 10px; min-height: 80px; }
}

/* ═══════════════════════════════════════════════════════════
   Thilth Report (tr-*) — waqf financial summary
   ═══════════════════════════════════════════════════════════ */

.tr-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 20px 40px;
}

.tr-loading {
	text-align: center;
	padding: 60px;
	color: var(--ink-muted);
}

/* ── Inline toolbar (Print button) ──
   Replaces page.add_inner_button which renders inside .page-head and is
   hidden by .maktab-no-titlebar. FB-2026-00250. */
.tr-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.tr-print-btn {
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--r-sq);
	padding: 6px 16px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tr-print-btn:hover {
	background: var(--beige);
	border-color: var(--sand);
}

[data-theme="dark"] .tr-print-btn {
	background: var(--cream);
	color: var(--ink);
	border-color: var(--border);
}

/* ── Year selector bar ── (foundation `.tab` paper-pill feel) */
.tr-year-bar {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.tr-year-btn {
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--r-sq);
	padding: 8px 20px;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tr-year-btn:hover {
	background: var(--beige);
	border-color: var(--sand);
}

.tr-year-active {
	background: var(--brown-deep);
	color: var(--cream);
	border-color: var(--brown-deep);
}

.tr-year-active:hover {
	background: var(--brown-night);
	color: var(--cream);
	border-color: var(--brown-night);
}

/* ── Summary cards (4-column grid) ── */
/* FIX 5: entity-header pill row sitting just inside the entity-banner top
   stripe.
   FIX 6: now also hosts the AR-primary report title (Thilth Report — Year YYYY).
   Title takes the inline-start side; pill stays on the inline-end side. */
.tr-entity-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-3);
}

.tr-report-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--brown-deep);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .tr-report-title { color: var(--ink); }

/* FIX 6 — basmala (AR only, rendered before the entity-header).
   Centered, slightly larger, traditional kufic-friendly weight. */
.tr-basmala {
	text-align: center;
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--brown-deep);
	letter-spacing: 0.02em;
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .tr-basmala { color: var(--ink); }

/* FIX 6 — section blocks (Charitable / Operational / Properties /
   Beneficiaries / YoY). The Charitable + Operational variants carry a
   colored accent stripe so the religious-vs-running-costs split reads at
   a glance. */
.tr-block {
	margin-top: var(--s-5);
	margin-bottom: var(--s-4);
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: var(--s-4);
}

.tr-block-charitable {
	border-inline-start: 4px solid var(--entity-charitable);
}

.tr-block-operational {
	border-inline-start: 4px solid var(--entity-operational);
}

[data-theme="dark"] .tr-block {
	background: var(--brown-night);
	border-color: var(--straw);
}

.tr-block-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid var(--border);
}

.tr-block-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--brown-deep);
}

[data-theme="dark"] .tr-block-title { color: var(--ink); }

.tr-block-total {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

[dir="rtl"] .tr-block-total { align-items: flex-start; }

.tr-block-total-label {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-muted);
}

.tr-block-total-amount {
	font-size: 24px;
	font-weight: 700;
	color: var(--brown-deep);
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

[data-theme="dark"] .tr-block-total-amount { color: var(--ink); }

/* FIX 6 — KPI footer demotes the legacy summary cards to secondary info
   at the bottom of the page. Smaller heading, same card grid below. */
.tr-kpi-footer {
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: 1px solid var(--border);
}

.tr-kpi-footer-title {
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-muted);
	margin-bottom: var(--s-3);
	text-align: center;
}

.tr-summary-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 8px;
}

.tr-summary-card {
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: 16px 14px 12px;
	text-align: center;
}

.tr-summary-card:hover { box-shadow: none; }

.tr-card-label {
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ink-muted);
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.tr-card-value {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--brown-deep);
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

/* ── Net surplus/deficit banner ── */
.tr-net-banner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	border-radius: var(--r-md);
	margin-bottom: 20px;
	font-weight: 700;
}

.tr-net-surplus {
	background: var(--success-bg);
	color: var(--success);
}

.tr-net-deficit {
	background: var(--crit-bg);
	color: var(--overdue);
}

.tr-net-label {
	font-size: var(--text-base);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tr-net-amount {
	font-size: 22px;
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
}

/* ── Chart ── */
.tr-chart-wrap {
	margin-bottom: 8px;
}

/* Hide frappe.Chart's built-in legend — its labels are positioned with
   a fixed LTR x-offset and collide when Arabic text expands leftward
   from anchor. We render our own HTML .tr-chart-legend below the chart
   instead (FB-2026-00237 / FB-2026-00243). */
.tr-chart-wrap .chart-legend,
.tr-chart-wrap .legend-dataset-label,
.tr-chart-wrap g.legend,
.tr-chart-wrap [class^="legend"] {
	display: none !important;
}

.tr-css-chart {
	padding: 12px;
}

.tr-chart-legend {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--ink-muted);
}

.tr-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tr-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: var(--r-sq);
	display: inline-block;
}

.tr-bars-container {
	display: flex;
	justify-content: center;
	gap: 32px;
	align-items: flex-end;
	height: 200px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0;
}

.tr-bar-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
}

.tr-bar-year {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
	margin-top: 8px;
}

.tr-bar-set {
	display: flex;
	gap: 4px;
	align-items: flex-end;
	height: 180px;
}

.tr-bar {
	width: 28px;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	min-height: 4px;
	transition: height 0.4s ease;
	cursor: default;
}

.tr-bar-rent { background: var(--success); }
.tr-bar-exp { background: var(--crit); }
.tr-bar-dis { background: var(--warn); }

/* ── Tables ── */
.tr-link {
	/* --maktab-link auto-adapts: medium brown on light, light tan on dark
	   (FB-2026-00236). The previous --brown-deep dropped to near-black in
	   dark mode and property names became unreadable. */
	color: var(--maktab-link);
	text-decoration: none;
	font-weight: 500;
}
.tr-link:hover { text-decoration: underline; }

.tr-total-row {
	border-top: 2px solid var(--sand);
}
.tr-total-row td {
	padding-top: 8px;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .tr-summary-card { background: var(--brown-night); border-color: var(--straw); }
/* --straw (#3D3428) on dark bg was unreadable for inactive year buttons;
   --ink-muted (#A89A82) gives 4.5+:1 contrast. FB-2026-00236. */
[data-theme="dark"] .tr-year-btn { background: var(--brown-night); color: var(--ink-muted); }
[data-theme="dark"] .tr-year-active { background: var(--brown-deep); color: var(--ink); border-color: var(--brown); }
[data-theme="dark"] .tr-net-surplus { background: rgba(94,125,94,0.18); color: #A8D4A0; }
[data-theme="dark"] .tr-net-deficit { background: rgba(192,115,94,0.18); color: #E8A890; }
/* --cream is the dark CARD bg (#221C14), not a foreground colour — using it
   as text colour left the summary card values nearly invisible. --ink
   (#E8E0D4) is the canonical dark-mode body text. FB-2026-00236. */
[data-theme="dark"] .tr-card-value { color: var(--ink); }

/* ── Mobile ── */
@media (max-width: 768px) {
	.tr-container { padding: 8px 12px 30px; }
	.tr-summary-row { grid-template-columns: repeat(2, 1fr); }
	.tr-card-value { font-size: 16px; }
	.tr-net-amount { font-size: 18px; }
	.tr-bars-container { gap: 16px; height: 160px; }
	.tr-bar-set { height: 140px; }
	.tr-bar { width: 20px; }
	/* FIX 6 — let the section-block header stack vertically on mobile so
	   the big section total isn't squeezed next to the title. */
	.tr-block { padding: var(--s-3); }
	.tr-block-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-2);
	}
	[dir="rtl"] .tr-block-header { align-items: flex-end; }
	.tr-block-total {
		align-items: flex-start;
		flex-direction: row;
		gap: var(--s-2);
	}
	[dir="rtl"] .tr-block-total { align-items: flex-end; }
	.tr-block-total-amount { font-size: 20px; }
	.tr-basmala { font-size: 16px; }
	.tr-report-title { font-size: 16px; }
}

/* ── Print styles ── */
@media print {
	.page-head, .navbar, .sidebar, .tr-year-bar, .tr-toolbar,
	.page-container > .page-sidebar, .standard-actions,
	.footer, [data-page-container-footer] { display: none; }
	.tr-container { max-width: 100%; padding: 0; }
	.tr-summary-card { box-shadow: none; border: 1px solid #ccc; }
	.lv-card { box-shadow: none; }
	.tr-link { color: inherit; text-decoration: none; }
	.wd-columns { flex-direction: column; }
	.wd-col { flex: none; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   Family Overview (fo-*) — read-only dashboard for family
   ═══════════════════════════════════════════════════════════ */

.fo-container {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px 20px 40px;
}

.fo-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ── Welcome header ── */
.fo-welcome {
	text-align: center;
	padding: 24px 16px 8px;
}

.fo-welcome-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--maktab-brown);
	letter-spacing: 0.5px;
}

.fo-welcome-date {
	font-size: 16px;
	color: var(--maktab-text-muted);
	margin-top: 4px;
}

/* ── 3-card summary row ── */
.fo-cards-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.fo-card {
	background: #F5EDE0;
	border: none;
	border-radius: 0;
	padding: 20px;
	transition: box-shadow 0.2s;
}

.fo-card:hover {
	box-shadow: none;
}

.fo-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--maktab-border);
}

.fo-card-icon {
	font-size: 24px;
}

.fo-card-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--maktab-brown);
}

.fo-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fo-stat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.fo-stat-label {
	font-size: 15px;
	color: var(--maktab-text-muted);
}

.fo-stat-value {
	font-size: 17px;
	font-weight: 600;
	color: var(--maktab-text);
	white-space: nowrap;
}

.fo-stat-count {
	font-size: 22px;
	font-weight: 700;
	color: var(--maktab-brown);
}

.fo-stat-footer {
	margin-top: 4px;
	font-size: 13px;
	color: var(--maktab-text-muted);
	text-align: center;
	padding-top: 8px;
	border-top: 1px dashed var(--maktab-border);
}

.fo-positive { color: #2E5C2E !important; }
.fo-negative { color: var(--maktab-terracotta) !important; }

/* ── Next Occasion card ── */
.fo-occasion {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--maktab-cream);
	border: 1px solid var(--maktab-border);
	border-radius: var(--maktab-radius);
	box-shadow: none;
	padding: 20px 24px;
}

.fo-occasion-icon {
	font-size: 32px;
	flex-shrink: 0;
}

.fo-occasion-body {
	flex: 1;
}

.fo-occasion-label {
	font-size: 13px;
	color: var(--maktab-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}

.fo-occasion-name {
	font-size: 19px;
	font-weight: 600;
	color: var(--maktab-text);
}

.fo-occasion-date {
	font-size: 15px;
	color: var(--maktab-text-muted);
	margin-top: 2px;
}

.fo-occasion-countdown {
	font-size: 15px;
	font-weight: 600;
	color: var(--maktab-green);
	margin-top: 4px;
}

/* ── Sections (alerts, disbursements) ── */
.fo-section {
	margin-top: 4px;
}

.fo-section-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--maktab-dark-brown);
	margin-bottom: 12px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--maktab-straw);
}

/* ── Thilth card progress bar ── */
.fo-progress {
	margin: 12px 0 8px;
}
.fo-progress-track {
	height: 8px;
	background: var(--maktab-cream);
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.fo-progress-fill {
	height: 100%;
	background: var(--maktab-green);
	transition: width 0.3s ease;
}
.fo-progress-label {
	text-align: center;
	margin-top: 6px;
	font-size: 12px;
	color: var(--maktab-text-muted);
}

/* ── Thilth card cross-link ── */
.fo-card-link {
	text-align: center;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--maktab-border);
}
.fo-card-link a {
	color: var(--maktab-dark-brown);
	font-size: 13px;
	text-decoration: none;
	font-weight: 500;
}
.fo-card-link a:hover {
	color: var(--maktab-brown);
	text-decoration: underline;
}

/* ── Alerts ── */
.fo-alerts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fo-alert-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: var(--r-md);
	font-size: 15px;
}

.fo-alert-doc-type {
	font-weight: 600;
	min-width: 120px;
}

.fo-alert-holder {
	flex: 1;
	color: var(--maktab-text);
}

.fo-alert-days {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.fo-alert-red {
	background: rgba(192, 115, 94, 0.10);
	border-left: 4px solid var(--maktab-terracotta);
	color: #7A2D1A;
}

.fo-alert-orange {
	background: rgba(212, 160, 90, 0.10);
	border-left: 4px solid var(--maktab-amber);
	color: #5C3E08;
}

.fo-alert-yellow {
	background: rgba(194, 173, 126, 0.10);
	border-left: 4px solid var(--maktab-sand);
	color: var(--maktab-text);
}

/* RTL: flip alert border side */
[lang="ar"] .fo-alert-item,
html[dir="rtl"] .fo-alert-item {
	border-left: none;
}
[lang="ar"] .fo-alert-red,
html[dir="rtl"] .fo-alert-red {
	border-right: 4px solid var(--maktab-terracotta);
}
[lang="ar"] .fo-alert-orange,
html[dir="rtl"] .fo-alert-orange {
	border-right: 4px solid var(--maktab-amber);
}
[lang="ar"] .fo-alert-yellow,
html[dir="rtl"] .fo-alert-yellow {
	border-right: 4px solid var(--maktab-sand);
}

/* ── Recent Disbursements ── */
.fo-disb-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fo-disb-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: var(--maktab-cream);
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
}

.fo-disb-left {
	flex: 1;
	min-width: 0;
}

.fo-disb-recipient {
	font-size: 16px;
	font-weight: 500;
	color: var(--maktab-text);
}

.fo-disb-meta {
	font-size: 13px;
	color: var(--maktab-text-muted);
	margin-top: 2px;
}

.fo-disb-amount {
	font-size: 17px;
	font-weight: 600;
	color: var(--maktab-green);
	white-space: nowrap;
	margin-left: 16px;
}

[lang="ar"] .fo-disb-amount,
html[dir="rtl"] .fo-disb-amount {
	margin-left: 0;
	margin-right: 16px;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .fo-card { background: #2A2418; }
[data-theme="dark"] .fo-occasion { background: var(--card-bg); }
[data-theme="dark"] .fo-disb-item { background: var(--card-bg); }
[data-theme="dark"] .fo-welcome-title { color: var(--maktab-brown); }
[data-theme="dark"] .fo-alert-red { background: rgba(192,115,94,0.12); color: #E8A890; }
[data-theme="dark"] .fo-alert-orange { background: rgba(212,160,90,0.12); color: #E0C080; }
[data-theme="dark"] .fo-alert-yellow { background: rgba(194,173,126,0.12); color: var(--straw); }

/* ── Mobile (phone) ── */
@media (max-width: 768px) {
	.fo-container { padding: 8px 12px 30px; }
	.fo-cards-row { grid-template-columns: 1fr; gap: 10px; }
	.fo-welcome-title { font-size: 24px; }
	.fo-occasion { flex-direction: column; text-align: center; gap: 10px; padding: 16px; }
	.fo-alert-item { flex-direction: column; align-items: flex-start; gap: 4px; }
	.fo-alert-doc-type { min-width: unset; }
	.fo-disb-item { flex-direction: column; align-items: flex-start; gap: 6px; }
	.fo-disb-amount { margin-left: 0; }
}

/* ── iPad / tablet — 2-col cards, touch-friendly ── */
@media (min-width: 769px) and (max-width: 1024px) {
	.fo-cards-row { grid-template-columns: repeat(2, 1fr); }
	.fo-card { padding: 18px; }
	.fo-stat-value { font-size: 18px; }
	.fo-alert-item { padding: 14px 18px; }
	.fo-disb-item { padding: 14px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TENANT PORTAL — Public-facing pages for tenants
   ═══════════════════════════════════════════════════════════════════════════ */

.tenant-portal-page {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: #F5F0E8;
	min-height: 100vh;
	padding: 0;
}
.tp-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px 16px 40px;
}
.tp-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0 20px;
	border-bottom: 1px solid #E0D5C5;
	margin-bottom: 20px;
}
.tp-page-title {
	flex: 1;
	font-size: 18px;
	font-weight: 700;
	color: #5a4a3b;
	margin: 0;
}
.tp-logout {
	font-size: 13px;
	color: var(--crit);
}
.tp-welcome {
	margin-bottom: 20px;
}
.tp-welcome-name {
	font-size: 16px;
	font-weight: 600;
	color: #5a4a3b;
}

/* Cards */
.tp-card {
	background: #fff;
	border-radius: var(--r-lg);
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: none;
}
.tp-card-title {
	font-size: 16px;
	font-weight: 700;
	color: #5a4a3b;
	margin-bottom: 12px;
}
.tp-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

/* Info grid */
.tp-info-grid { margin-bottom: 12px; }
.tp-info-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid rgba(139,125,107,0.08);
	font-size: 14px;
}
.tp-info-row:last-child { border-bottom: none; }
.tp-info-label { color: var(--ink-muted); }
.tp-info-value { font-weight: 600; color: #5a4a3b; }

/* Outstanding balance */
.tp-outstanding {
	background: #FDF2E9;
	border: 1px solid #E8C9A0;
	border-radius: var(--r-md);
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 12px 0;
}
.tp-outstanding-label { font-weight: 600; color: var(--sand-deep); font-size: 14px; }
.tp-outstanding-amount { font-weight: 700; color: var(--crit); font-size: 18px; }

/* Section title */
.tp-section-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-muted);
	margin: 16px 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Tables */
.tp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.tp-table th {
	text-align: right;
	padding: 8px 10px;
	color: var(--ink-muted);
	font-weight: 600;
	border-bottom: 2px solid #E0D5C5;
	font-size: 12px;
}
.tp-table td {
	padding: 8px 10px;
	border-bottom: 1px solid rgba(139,125,107,0.08);
	color: #5a4a3b;
}

/* Badges */
.tp-badge {
	display: inline-block;
	font-size: 11px;
	padding: 2px 10px;
	border-radius: var(--r-lg);
	font-weight: 600;
}
.tp-badge-active, .tp-badge-received { background: #E8F5E9; color: #2E7D32; }
.tp-badge-expired { background: #FCE4EC; color: #C62828; }
.tp-badge-pending, .tp-badge-partial, .tp-badge-open { background: #FFF3E0; color: #E65100; }

/* Buttons */
.tp-btn {
	display: inline-block;
	padding: 10px 24px;
	border: none;
	border-radius: var(--r-md);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.tp-btn-primary {
	background: var(--ink-muted);
	color: #fff;
	width: 100%;
}
.tp-btn-primary:hover { background: #7A6A5B; }
.tp-btn-small {
	padding: 6px 14px;
	font-size: 12px;
	background: var(--ink-muted);
	color: #fff;
	border-radius: var(--r-md);
}
.tp-btn-small:hover { background: #7A6A5B; }

/* Signup page */
.tp-signup-container {
	max-width: 400px;
	margin: 60px auto;
	padding: 30px 24px;
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: none;
}
.tp-logo { text-align: center; margin-bottom: 20px; }
.tp-title {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: #5a4a3b;
	margin-bottom: 8px;
}
.tp-subtitle {
	text-align: center;
	color: var(--ink-muted);
	font-size: 14px;
	margin-bottom: 20px;
}
.tp-field {
	margin-bottom: 16px;
}
.tp-field label {
	display: block;
	font-size: 13px;
	color: var(--ink-muted);
	margin-bottom: 4px;
	font-weight: 600;
}
.tp-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #E0D5C5;
	border-radius: var(--r-md);
	font-size: 14px;
	background: #FAFAF7;
	color: #5a4a3b;
}
.tp-field input:focus {
	outline: none;
	border-color: var(--ink-muted);
}
.tp-disclosure {
	font-size: 11px;
	color: var(--ink-muted);
	background: rgba(139,125,107,0.06);
	padding: 10px 12px;
	border-radius: var(--r-md);
	margin: 12px 0;
	line-height: 1.5;
	text-align: center;
}
[data-theme="dark"] .tp-disclosure { background: rgba(255,255,255,0.04); color: var(--maktab-text-muted); }

/* Dark mode */
[data-theme="dark"] .tenant-portal-page { background: #1A1510; }
[data-theme="dark"] .tp-card { background: #24201A; box-shadow: none; }
[data-theme="dark"] .tp-page-title, [data-theme="dark"] .tp-card-title,
[data-theme="dark"] .tp-info-value, [data-theme="dark"] .tp-welcome-name { color: #E8DCC8; }
[data-theme="dark"] .tp-table td { color: #E8DCC8; }
[data-theme="dark"] .tp-field input { background: #2A2418; color: #E8DCC8; border-color: #3A3428; }
[data-theme="dark"] .tp-signup-container { background: #24201A; }
[data-theme="dark"] .tp-outstanding { background: rgba(139,105,20,0.15); border-color: rgba(139,105,20,0.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Comprehensive overrides (Phase X)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── LV toolbar, collapsible, attachments, comments, activity ── */
[data-theme="dark"] .lv-toolbar-btn { border-color: var(--maktab-border); color: var(--maktab-text); }
[data-theme="dark"] .lv-toolbar-btn:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .lv-add-btn { border-color: var(--maktab-border); color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-add-btn:hover { background: rgba(255,255,255,0.06); color: var(--maktab-text); border-color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-delete-btn { color: #D48A74; border-color: #D48A74; }
[data-theme="dark"] .lv-delete-btn:hover { background: rgba(212,138,116,0.1); }
[data-theme="dark"] .lv-collapse-icon { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-attachment-row { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .lv-attachment-meta { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-comment { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .lv-comment-author { color: var(--maktab-text); }
[data-theme="dark"] .lv-comment-time { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-comment-content { color: var(--maktab-text); }
[data-theme="dark"] .lv-comment-input { background: var(--control-bg); color: var(--maktab-text); border-color: var(--maktab-border); }
[data-theme="dark"] .lv-comment-post-btn { background: var(--maktab-dark-brown); color: var(--maktab-text); }
[data-theme="dark"] .lv-activity-entry { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .lv-activity-change { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-activity-field { color: var(--maktab-text); }
[data-theme="dark"] .lv-activity-old { color: #D48A74; }
[data-theme="dark"] .lv-activity-new { color: #A8D4A0; }

/* ── LV status bars (terminated was missing) ── */
[data-theme="dark"] .lv-status-terminated { background: rgba(107,63,160,0.15); color: #C4A8E8; }

/* ── LV cards, rows, labels, values ── */
[data-theme="dark"] .lv-card { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .lv-card-title { color: var(--maktab-text); }
[data-theme="dark"] .lv-label { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-value { color: var(--maktab-text); }
[data-theme="dark"] .lv-text-muted { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-text-warn { color: #E0B06A; }
[data-theme="dark"] .lv-empty { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-tenant-name-ar { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-ejar-contact { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-phone { color: var(--maktab-link); }
[data-theme="dark"] .lv-contact-name { color: var(--maktab-text-muted); }
[data-theme="dark"] .lv-file-link { color: var(--maktab-link); }
[data-theme="dark"] .lv-map-link { color: var(--maktab-link); }
[data-theme="dark"] .lv-notes-input { background: var(--control-bg); color: var(--maktab-text); border-color: var(--maktab-border); }
[data-theme="dark"] .lv-save-notes { background: var(--maktab-brown); color: #fff; border-color: var(--maktab-brown); }
[data-theme="dark"] .lv-row { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .lv-row-total { border-top-color: var(--maktab-border); }
[data-theme="dark"] .lv-table th { color: var(--maktab-text-muted); border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .lv-table td { color: var(--maktab-text); border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .lv-invoice-link { color: var(--maktab-link); }

/* ── LV summary cards (list pages) ── */
[data-theme="dark"] .lv-summary-card,
[data-theme="dark"] .ll-summary-card,
[data-theme="dark"] .prl-summary-card,
[data-theme="dark"] .ul-summary-card,
[data-theme="dark"] .tl-summary-card { background: var(--card-bg); }
[data-theme="dark"] .lv-summary-value,
[data-theme="dark"] .ll-summary-value,
[data-theme="dark"] .prl-summary-value,
[data-theme="dark"] .ul-summary-value,
[data-theme="dark"] .tl-summary-value { color: var(--maktab-text); }
[data-theme="dark"] .lv-summary-label,
[data-theme="dark"] .ll-summary-label,
[data-theme="dark"] .prl-summary-label,
[data-theme="dark"] .ul-summary-label,
[data-theme="dark"] .tl-summary-label { color: var(--maktab-text-muted); }

/* ── List page rows ── */
[data-theme="dark"] .ll-row,
[data-theme="dark"] .prl-row,
[data-theme="dark"] .ul-row,
[data-theme="dark"] .tl-row { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .ll-row:hover,
[data-theme="dark"] .prl-row:hover,
[data-theme="dark"] .ul-row:hover,
[data-theme="dark"] .tl-row:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .ll-tenant-link,
[data-theme="dark"] .ul-tenant-link { color: var(--maktab-link); }

/* ── PL (Payments List) ── */
[data-theme="dark"] .pl-summary-card { background: var(--card-bg); }
[data-theme="dark"] .pl-summary-value { color: var(--maktab-text); }
[data-theme="dark"] .pl-summary-label { color: var(--maktab-text-muted); }
[data-theme="dark"] .pl-table th { color: var(--maktab-text-muted); border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .pl-table td { color: var(--maktab-text); border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .pl-table-card { background: var(--card-bg); }
[data-theme="dark"] .pl-clickable-row:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .pl-cancelled-badge { background: rgba(192,115,94,0.15); color: #D48A74; }

/* ── MNT (Maintenance) extras ── */
[data-theme="dark"] .mnt-priority-low { color: #A8D4A0; }
[data-theme="dark"] .mnt-priority-medium { color: #D4B96A; }
[data-theme="dark"] .mnt-priority-high { color: #E8C9A0; }
[data-theme="dark"] .mnt-priority-urgent { color: #D48A74; }

/* ── WD (Wasi Dashboard) extras ── */
[data-theme="dark"] .wd-action-card { background: var(--card-bg); }
[data-theme="dark"] .wd-action-card:hover { background: var(--subtle-fg); }
[data-theme="dark"] .wd-stat-value { color: var(--maktab-text); }
[data-theme="dark"] .wd-stat-label { color: var(--maktab-text-muted); }

/* ── TP (Tenant Portal) — full coverage ── */
[data-theme="dark"] .tenant-portal-page { background: #1A1510; }
[data-theme="dark"] .tp-header { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .tp-logout { color: #D48A74; }
[data-theme="dark"] .tp-info-label { color: var(--maktab-text-muted); }
[data-theme="dark"] .tp-info-row { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .tp-section-title { color: var(--maktab-text-muted); }
[data-theme="dark"] .tp-table th { color: var(--maktab-text-muted); border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .tp-table td { border-bottom-color: var(--maktab-border); }
[data-theme="dark"] .tp-outstanding-label { color: #D4B96A; }
[data-theme="dark"] .tp-outstanding-amount { color: #D48A74; }
[data-theme="dark"] .tp-badge-active, [data-theme="dark"] .tp-badge-received { background: rgba(125,155,118,0.2); color: #A8D4A0; }
[data-theme="dark"] .tp-badge-expired { background: rgba(192,115,94,0.2); color: #D48A74; }
[data-theme="dark"] .tp-badge-pending, [data-theme="dark"] .tp-badge-partial,
[data-theme="dark"] .tp-badge-open { background: rgba(139,105,20,0.2); color: #D4B96A; }
[data-theme="dark"] .tp-btn-primary { background: var(--maktab-brown); color: #fff; }
[data-theme="dark"] .tp-btn-primary:hover { background: #A08A6A; }
[data-theme="dark"] .tp-btn-small { background: var(--maktab-brown); color: #fff; }
[data-theme="dark"] .tp-btn-small:hover { background: #A08A6A; }
[data-theme="dark"] .tp-title { color: #E8DCC8; }
[data-theme="dark"] .tp-subtitle { color: var(--maktab-text-muted); }
[data-theme="dark"] .tp-field label { color: var(--maktab-text-muted); }
[data-theme="dark"] .tp-field input:focus { border-color: var(--maktab-brown); }
[data-theme="dark"] .tp-logo img { filter: brightness(0.9); }

/* ── Not-linked (show_not_tenant) branded recovery state ─────────────── */
.tp-not-linked { max-width: 540px; margin: 0 auto; }
.tp-not-linked-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
}
.tp-not-linked-brand img { display: block; }
.tp-not-linked-brandline {
	font-size: 18px;
	font-weight: 600;
	color: #5a4a3b;
	letter-spacing: 0.5px;
}
.tp-not-linked-brandline .tp-brand-sep {
	color: #B8A898;
	margin: 0 6px;
}
.tp-not-linked-title {
	color: #C0735E;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
}
.tp-not-linked-copy {
	color: #6F5F4F;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 auto 18px;
	max-width: 460px;
}
.tp-not-linked-contact {
	list-style: none;
	padding: 16px 20px;
	margin: 0 auto 24px;
	max-width: 380px;
	background: #fff;
	border-radius: var(--r-md, 8px);
	border: 1px solid #E0D5C5;
	text-align: left;
}
.tp-not-linked-contact li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
}
.tp-not-linked-contact li + li {
	border-top: 1px solid rgba(139,125,107,0.10);
}
.tp-contact-label {
	color: #8C7A6B;
	font-weight: 600;
	min-width: 60px;
}
.tp-contact-value {
	color: #5a4a3b;
	text-decoration: none;
}
.tp-contact-value:hover { text-decoration: underline; }
.tp-not-linked-logout {
	margin-top: 28px;
	font-size: 13px;
}
.tp-not-linked-logout a {
	color: var(--crit, #C0735E);
	text-decoration: none;
}
[data-theme="dark"] .tp-not-linked-brandline { color: #E8DCC8; }
[data-theme="dark"] .tp-not-linked-copy { color: #C8BCAB; }
[data-theme="dark"] .tp-not-linked-contact {
	background: #24201A;
	border-color: var(--maktab-border, #3a3329);
}
[data-theme="dark"] .tp-contact-value { color: #E8DCC8; }

/* Mobile */
@media (max-width: 768px) {
	.tp-container { padding: 12px 10px 30px; }
	.tp-card { padding: 14px; }
	.tp-table { font-size: 12px; }
	.tp-table th, .tp-table td { padding: 6px 6px; }
	.tp-outstanding { flex-direction: column; gap: 4px; text-align: center; }
	.tp-not-linked { padding: 40px 16px; }
	.tp-not-linked-title { font-size: 20px; }
	.tp-not-linked-contact { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE CARDS — Convert list page tables to card layout on mobile
   Tables with data-label="X" attributes on each <td> become stacked cards.
   Applied to: hh-table, hs-table, vh-table, he-table, ll-table, etc.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.hh-table, .hs-table, .vh-table, .he-table {
		display: block;
	}
	.hh-table thead, .hs-table thead, .vh-table thead, .he-table thead {
		display: none;
	}
	.hh-table tbody, .hs-table tbody, .vh-table tbody, .he-table tbody {
		display: block;
	}
	.hh-table tr, .hs-table tr, .vh-table tr, .he-table tr {
		display: block;
		background: var(--card-bg, #fff);
		border: 1px solid var(--maktab-border);
		border-radius: var(--r-md);
		padding: 12px 14px;
		margin-bottom: 10px;
		box-shadow: none;
	}
	.hh-table td, .hs-table td, .vh-table td, .he-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 0;
		border: none;
		border-bottom: 1px solid rgba(139,125,107,0.08);
		font-size: 13px;
	}
	.hh-table td:last-child, .hs-table td:last-child,
	.vh-table td:last-child, .he-table td:last-child {
		border-bottom: none;
	}
	.hh-table td::before, .hs-table td::before,
	.vh-table td::before, .he-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--maktab-text-muted);
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		margin-inline-end: 12px;
	}
	/* First cell becomes the card title */
	.hh-table td:first-child, .hs-table td:first-child,
	.vh-table td:first-child, .he-table td:first-child {
		font-size: 15px;
		font-weight: 700;
		color: var(--maktab-text);
		padding-bottom: 8px;
		margin-bottom: 4px;
		border-bottom: 1px solid rgba(139,125,107,0.15);
	}
	.hh-table td:first-child::before, .hs-table td:first-child::before,
	.vh-table td:first-child::before, .he-table td:first-child::before {
		display: none;
	}
}

/* Expenses: cards by default, list toggle. Hidden on desktop. */
.he-view-toggle { display: none; }
@media (max-width: 768px) {
	.he-view-toggle {
		display: inline-flex;
		gap: 4px;
		padding: 4px;
		background: rgba(139,125,107,0.08);
		border-radius: var(--r-md);
		margin-bottom: 12px;
	}
	.he-view-toggle button {
		padding: 4px 12px;
		border: none;
		background: transparent;
		color: var(--maktab-text-muted);
		font-size: 12px;
		cursor: pointer;
		border-radius: var(--r-sm);
	}
	.he-view-toggle button.active {
		background: var(--card-bg);
		color: var(--maktab-text);
		box-shadow: none;
	}
	/* When in list mode, override the card display */
	.he-table.he-list-mode { display: table; }
	.he-table.he-list-mode thead { display: table-header-group; }
	.he-table.he-list-mode tbody { display: table-row-group; }
	.he-table.he-list-mode tr { display: table-row; background: transparent; border: none; padding: 0; margin: 0; box-shadow: none; }
	.he-table.he-list-mode td { display: table-cell; padding: 8px 6px; border-bottom: 1px solid var(--maktab-border); font-size: 12px; }
	.he-table.he-list-mode td::before { display: none; }
	.he-table.he-list-mode td:first-child { font-size: 12px; font-weight: 400; padding: 8px 6px; margin: 0; border-bottom: 1px solid var(--maktab-border); }
}

/* Primary action buttons in dark mode: force dark-brown bg + cream text.
   Covers maintenance + generic .btn.btn-primary variants. */
[data-theme="dark"] .mnt-new-btn,
[data-theme="dark"] .btn.btn-primary.mnt-new-btn,
[data-theme="dark"] button.btn-primary.mnt-new-btn {
	background: var(--brown-night) !important;
	border-color: var(--brown-night) !important;
	color: var(--ink) !important;
}
[data-theme="dark"] .mnt-new-btn:hover {
	background: #1A1510 !important;
	border-color: #1A1510 !important;
	color: #FFFFFF !important;
}
[data-theme="dark"] .mnt-filter-btn.mnt-filter-active {
	background: var(--brown-night) !important;
	border-color: var(--brown-night) !important;
	color: var(--ink) !important;
}
/* Maintenance summary cards — force dark bg so text-muted labels pass */
[data-theme="dark"] .mnt-summary-card,
[data-theme="dark"] .mnt-summary {
	background: transparent;
}
[data-theme="dark"] .mnt-summary-card {
	background: #24201A !important;
	border: 1px solid var(--maktab-border);
}
[data-theme="dark"] .mnt-summary-value {
	color: var(--ink) !important;
}
[data-theme="dark"] .mnt-summary-label {
	color: #B8A890 !important;
}


/* Wasi dashboard: section title contrast + tone down the quick-action
   buttons per user feedback (they stand out too hard in dark mode). */
[data-theme="dark"] .wd-section-title,
[data-theme="dark"] .wd-summary-label,
[data-theme="dark"] .wd-alert-days {
	color: #B8A890 !important;
}
[data-theme="dark"] .wd-action-rent {
	background: #1E3A1E !important;
	color: var(--ink) !important;
}
[data-theme="dark"] .wd-action-rent:hover {
	background: #15281D !important;
	color: #FFFFFF !important;
}
[data-theme="dark"] .wd-action-maint {
	background: #1E3A55 !important;
	color: var(--ink) !important;
}
[data-theme="dark"] .wd-action-maint:hover {
	background: #15283F !important;
	color: #FFFFFF !important;
}
[data-theme="dark"] .wd-action-report {
	background: #4A3A00 !important;
	color: var(--ink) !important;
}
[data-theme="dark"] .wd-action-report:hover {
	background: #3A2A00 !important;
	color: #FFFFFF !important;
}

/* Family-overview positive/negative amounts */
[data-theme="dark"] .fo-positive { color: #9ED29E !important; }
[data-theme="dark"] .fo-alert-red { color: #E8A890 !important; }
[data-theme="dark"] .fo-alert-orange { color: #E8C88A !important; }
[data-theme="dark"] .fo-alert-yellow { color: #E8D48A !important; }

/* Home page action cards — make sure titles + subtitles pass contrast */
[data-theme="dark"] .maktab-action-card .card-title,
[data-theme="dark"] .maktab-action-card .card-subtitle {
	color: var(--straw) !important;
}


/* Maintenance filter buttons — explicit dark mode variant */
[data-theme="dark"] .mnt-filter-btn {
	background: #24201A !important;
	color: var(--straw) !important;
	border-color: var(--maktab-border) !important;
}
[data-theme="dark"] .mnt-filter-btn:hover {
	background: var(--straw) !important;
	color: #FFFFFF !important;
}

/* Generic Frappe buttons in dark mode — force tan → dark */
[data-theme="dark"] .btn.btn-primary,
[data-theme="dark"] button.btn-primary {
	background: var(--brown-night) !important;
	border-color: var(--brown-night) !important;
	color: var(--ink) !important;
}
[data-theme="dark"] .btn.btn-primary:hover,
[data-theme="dark"] button.btn-primary:hover {
	background: #1A1510 !important;
	color: #FFFFFF !important;
}
[data-theme="dark"] .btn.btn-secondary,
[data-theme="dark"] button.btn-secondary {
	background: #24201A !important;
	border-color: var(--maktab-border) !important;
	color: var(--straw) !important;
}

/* Dialog form inputs — Frappe's .form-control needs a dark-mode bg */
[data-theme="dark"] .form-control,
[data-theme="dark"] .modal .form-control {
	background: #1A1510 !important;
	color: var(--ink) !important;
	border-color: var(--maktab-border) !important;
}
[data-theme="dark"] .form-control::placeholder {
	color: #8A7A6A !important;
}

/* Remaining individual one-offs from the final sweep */
[data-theme="dark"] .wd-summary-number,
[data-theme="dark"] .wd-summary-sar {
	color: var(--ink) !important;
}
[data-theme="dark"] .wd-summary-sub.wd-text-red {
	color: #E8A890 !important;
}
[data-theme="dark"] .tr-year-btn.tr-year-active {
	background: var(--brown-night) !important;
	color: #FFFFFF !important;
	border-color: var(--brown-night) !important;
}
[data-theme="dark"] .tr-year-btn {
	background: #24201A !important;
	color: var(--straw) !important;
	border-color: var(--maktab-border) !important;
}

/* Audit fix R2: tenant-view delete button + attachment metadata were
   below WCAG AA in both modes — tenant-view wasn't in the sprint
   sweep baseline so the violations slipped through. */
[data-theme="dark"] .lv-delete-btn { color: #E8A890 !important; border-color: #E8A890 !important; }
[data-theme="dark"] .lv-attachment-meta { color: #B8A890 !important; }

/* Audit fix R3: reconciliation-report page uses plain Bootstrap
   `<small class="text-muted">` inside table cells. Frappe's dark-mode
   text-muted is #9a8a7a which fails against the dark row background. */
[data-theme="dark"] .reconciliation-report small.text-muted,
[data-theme="dark"] .reconciliation-report .text-muted,
[data-theme="dark"] small.text-muted {
	color: #B8A890 !important;
}

/* Audit second-pass: detail views (tenant-view, property-view,
   lease-view, unit-view, payment-view) had contrast issues in both
   modes because the shared .lv-* classes used muted colors that
   hadn't been dark-mode-audited. Fix them once here. */

/* .lv-save-notes — button uses --maktab-brown bg (which is the tan
   #C4A882 in dark mode) with white text = 2.26. Force dark bg. */
.lv-save-notes {
	background: var(--brown-night) !important;
	color: #FFFFFF !important;
	border-color: var(--brown-night) !important;
}
.lv-save-notes:hover {
	background: #1A1510 !important;
	color: #FFFFFF !important;
}

/* .tv-lease-details — muted text on dark bg fails in dark mode */
[data-theme="dark"] .tv-lease-details,
[data-theme="dark"] .tv-lease-details .lv-label,
[data-theme="dark"] .tv-lease-details .lv-value {
	color: #B8A890 !important;
}

/* .tv-add-contact-btn — in dark mode the brown text token lands at
   #3D3628, which fails on the dark bg. Force light. */
[data-theme="dark"] .tv-add-contact-btn {
	color: var(--straw) !important;
	border-color: var(--maktab-border) !important;
}
[data-theme="dark"] .tv-add-contact-btn:hover {
	background: rgba(212, 197, 160, 0.10) !important;
	border-color: var(--straw) !important;
}

/* .lv-status-detail — was #5c7c5b on a light green bg = 3.95 (barely
   fails). Darken the text. */
.lv-status-detail { color: #2E5C2E !important; }
[data-theme="dark"] .lv-status-detail { color: #9ED29E !important; }

/* .lv-unit-occupied — same pattern, dark green on dark bg in dark mode */
.lv-unit-occupied,
.lv-unit-vacant {
	color: #2E5C2E !important;
}
[data-theme="dark"] .lv-unit-occupied,
[data-theme="dark"] .lv-unit-vacant {
	color: #9ED29E !important;
}

/* .lv-cancel-btn — the cancel action in the edit toolbar used amber
   var(--sand-deep) on cream which is 4.47 (fails 4.5 strict). Darken slightly. */
.lv-cancel-btn {
	color: #7A5510 !important;
	border-color: #7A5510 !important;
}
.lv-cancel-btn:hover { background: rgba(122, 85, 16, 0.08) !important; }
[data-theme="dark"] .lv-cancel-btn {
	color: #E8C88A !important;
	border-color: #E8C88A !important;
}
[data-theme="dark"] .lv-cancel-btn:hover { background: rgba(232, 200, 138, 0.10) !important; }

/* Light-mode lease view: inline `<div style="text-align:right">` for
   money values was inheriting var(--crit) from a parent — target the
   class `lv-money` directly for the money color. */
.lv-money { color: var(--brown-night) !important; }
[data-theme="dark"] .lv-money { color: var(--ink) !important; }

/* Shared empty-state text for list/comment/activity sections — replaces
   hardcoded inline #B8A898 which was failing WCAG AA in light mode. */
.lv-empty-inline {
	color: var(--ink-muted);
	font-size: 13px;
	font-style: italic;
}
[data-theme="dark"] .lv-empty-inline { color: #B8A890; }

/* ──────────────────────────────────────────────────────────────────────
   Shared list renderer (maktab.render_rich_list)
   Uses the proven .lv-table class for the table itself — this block only
   styles the wrapper, summary cards, toolbar, and pills. Mobile card
   transformation is done via the .lv-table media query below.
   ────────────────────────────────────────────────────────────────────── */
.maktab-list {
	padding: 16px 20px 32px;
	max-width: 100%;
}
.maktab-list-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
@media (max-width: 600px) {
	.maktab-list-summary {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 8px;
	}
}
.maktab-list-summary[data-loading] {
	min-height: 80px;
}
.maktab-list-summary:not([data-loading]) {
	animation: maktab-fade-in 0.2s ease;
}
@keyframes maktab-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.maktab-list-card {
	padding: 18px 20px;
	text-align: center;
	border: none !important;
	border-bottom: none !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.maktab-list-card-value {
	font-size: clamp(16px, 2.2vw, 26px);
	font-weight: 700;
	color: var(--maktab-text);
	line-height: 1.3;
	white-space: nowrap;
}
.maktab-list-card-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--maktab-text-muted);
	margin-top: 6px;
}
.maktab-list-card-sub {
	font-size: 11px;
	color: var(--maktab-text-muted);
	margin-top: 4px;
}
.maktab-list-card-positive .maktab-list-card-value { color: #2E5C2E; }
.maktab-list-card-warning  .maktab-list-card-value { color: #7A5510; }
.maktab-list-card-danger   .maktab-list-card-value { color: var(--overdue); }
.maktab-list-card-info     .maktab-list-card-value { color: var(--info); }

/* ── New-record button — standalone base styles (no parent dependency) ──
   Applies wherever .maktab-new-btn is used: list toolbars, pv-units-toolbar,
   hv-staff-toolbar, mv-events-toolbar, etc. */
.maktab-new-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	min-width: 40px;
	min-height: 40px;
	background: var(--maktab-brown);
	color: #fff;
	border: none;
	border-radius: var(--r-md);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
}
.maktab-new-btn:hover { background: var(--brown-deep); }
.maktab-new-btn svg { flex-shrink: 0; }
.maktab-new-btn:focus-visible { outline: 2px solid var(--maktab-amber); outline-offset: 2px; }

/* Toolbar — one row: [+ New] [pills] [search]. Wraps on narrow screens. */
.maktab-list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--maktab-beige);
	padding: 8px 0;
}

/* When the toolbar lives inside a .pv-tab-body (property-view,
   household-view, majlis-view), only the .pv-tab-strip (~38px) sits
   above it now — the page-head is hidden — so stack at 38px. */
.pv-tab-body .maktab-list-toolbar {
	top: 38px;
}
/* .maktab-list-toolbar .maktab-new-btn — no additional overrides needed;
   base styles above handle it fully. */

.maktab-list-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 0 1 auto;
}
.maktab-list-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	height: 38px;
	background: transparent;
	color: var(--maktab-text);
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	white-space: nowrap;
}
.maktab-list-pill:hover {
	background: var(--maktab-beige);
	border-color: var(--maktab-sand);
}
.maktab-list-pill.active {
	background: var(--maktab-brown);
	color: #fff;
	border-color: var(--maktab-brown);
}

/* ── Active filter pill: always-light text ──
   var(--cream) flips to dark cocoa in dark mode, which loses contrast
   against the always-dark --brown-deep active bg. Lock active-pill text
   to the light cream hex regardless of theme. Same trick the sidebar
   uses for "brand chrome that doesn't theme-flip". */
.aa-action-pill.active,
.mo-pill.active,
.au-filter-pill.active,
.f-pill.is-active,
.tr-year-tab.is-active,
.tr-year-tab.active {
	color: #F5F0E6 !important;
}

/* ── FB-2026-00205 (round 2): entity-ledger source pills retoken'd to canonical
   .f-pill foundation — see .el-container .f-pill block below. Round 1's
   bespoke .el-source-pill rules (JS-injected base + CSS overrides here) were
   replaced wholesale: the canonical .f-pill rule already provides hover,
   focus-visible, .is-active flip, and dark-mode contrast. */

/* ── Entity Ledger filter pills — canonical .f-pill, page-scoped ──
   Mirrors .expiry-dashboard .f-pill (line 342). Same chrome, sizing,
   transitions, light/dark contrast. The income/expense color dot prefix
   is added on top — chrome itself is canonical. */
.el-container .f-pills,
.el-container .el-source-pills {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
	align-items: center;
}
.el-container .f-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: var(--text-sm);
	font-weight: 500;
	border-radius: var(--r-sq);
	background: var(--cream);
	color: var(--ink);
	border: 1px solid var(--border);
	cursor: pointer;
	font-family: var(--font-ar);
	transition: background-color var(--dur-fast) ease,
	            color var(--dur-fast) ease,
	            border-color var(--dur-fast) ease;
	line-height: 1.4;
}
.el-container .f-pill:hover { border-color: var(--sand); }
.el-container .f-pill.is-active {
	background: var(--brown-deep);
	color: var(--cream);
	border-color: var(--brown-deep);
}
.el-container .f-pill:focus-visible {
	outline: 2px solid var(--maktab-amber);
	outline-offset: 2px;
}
/* Dark-mode: --brown-deep and --cream both flip toward dark-on-dark; promote
   active state to --sand bg for distinct contrast against inactive --cream. */
[data-theme="dark"] .el-container .f-pill.is-active {
	background: var(--sand);
	border-color: var(--sand);
	color: var(--ink) !important;
}
[data-theme="dark"] .el-container .f-pill:not(.is-active) {
	background: transparent;
	border-color: var(--border);
}

.maktab-list-pill.active:hover {
	background: var(--brown-deep);
	border-color: var(--brown-deep);
	color: #fff;
}
.maktab-list-pill-count {
	margin-inline-start: 4px;
	opacity: 0.75;
	font-weight: 500;
	font-size: 12px;
}
.maktab-list-pill:focus-visible { outline: 2px solid var(--maktab-amber); outline-offset: 2px; }

/* Search — grows to fill remaining row on desktop, full-width on mobile */
.maktab-list-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 220px;
	min-width: 180px;
	height: 40px;
}
.maktab-list-search-icon {
	position: absolute;
	inset-inline-start: 12px;
	color: var(--maktab-text-muted);
	pointer-events: none;
}
.maktab-list-search-input {
	width: 100%;
	height: 40px;
	padding: 0 14px 0 38px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	background: var(--card-bg, #fff);
	color: var(--maktab-text);
	font-size: 14px;
	font-family: inherit;
}
[dir="rtl"] .maktab-list-search-input { padding: 0 38px 0 14px; }
.maktab-list-search-input:focus { outline: none; border-color: var(--maktab-brown); }
.maktab-list-search-input::placeholder { color: var(--maktab-text-muted); }
.maktab-list-search-clear {
	position: absolute;
	inset-inline-end: 10px;
	background: none;
	border: none;
	font-size: 20px;
	color: var(--maktab-text-muted);
	cursor: pointer;
	line-height: 1;
	padding: 0 6px;
}

/* Table wrapper — keep the proven .lv-table styles doing the heavy lifting */
.maktab-list-table-wrap {
	padding: 16px 18px;
}
.maktab-list-table-wrap .lv-table.maktab-list-table {
	margin: 0;
}
.maktab-list-table.lv-table {
	table-layout: auto;
	width: 100%;
}
.maktab-list-table thead th {
	white-space: nowrap;
}
.maktab-list-table tbody tr.maktab-list-row {
	transition: background 0.1s;
}
.maktab-list-table tbody tr.maktab-list-row:hover td {
	background: rgba(212, 197, 160, 0.08);
}
.maktab-list-table tr.maktab-list-loading td,
.maktab-list-table tr.maktab-list-empty td,
.maktab-list-table tr.maktab-list-error td {
	padding: 40px 20px;
	text-align: center;
	color: var(--maktab-text-muted);
	font-style: italic;
}
.maktab-list-table tr.maktab-list-error td { color: var(--overdue); }
/* FB-2026-00299: header cells in numeric columns also need text-align:end —
   without this the column header is left-aligned while the values float to
   the right (bidi-driven for SAR currency formatted "ر.س 4,400.00"), so
   the title visibly drifts away from the column contents. */
.maktab-list-table td.maktab-list-num,
.maktab-list-table th.maktab-list-num { text-align: end; }
.maktab-list-table td,
.maktab-list-table th {
	padding: 10px 12px;
}

/* Mobile layout: toolbar stacks, summary cards go 2-wide. TABLES become
   cards via the lv-table mobile media query extension below. */
@media (max-width: 768px) {
	.maktab-list {
		padding: 12px 0 24px;
	}
	.maktab-list-summary {
		grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
		gap: 8px;
		margin-bottom: 16px;
	}
	.maktab-list-summary > .maktab-list-card:only-child {
		grid-column: 1 / -1;
	}
	.maktab-list-card { padding: 12px; min-width: 0; }
	.maktab-list-card-value { font-size: clamp(14px, 4vw, 22px); }
	/* Mobile toolbar: [+ New] and pills on first row, search on second row.
	   Explicit grid layout prevents any overlap/jumbling. */
	.maktab-list-toolbar {
		display: grid !important;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: 8px !important;
		align-items: center;
	}
	.maktab-list-toolbar .maktab-new-btn {
		grid-column: 1;
		grid-row: 1;
		width: 40px;
		height: 40px;
		padding: 0;
		justify-content: center;
		flex: none;
	}
	.maktab-list-toolbar .maktab-new-btn .maktab-new-btn-label { display: none; }
	.maktab-list-pills {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 6px;
		min-width: 0;
	}
	.maktab-list-pills::-webkit-scrollbar { display: none; }
	.maktab-list-pill {
		padding: 6px 10px !important;
		height: 36px !important;
		font-size: 12px !important;
	}
	.maktab-list-search {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.maktab-list-table-wrap {
		padding: 0;
		background: transparent !important;
		border: none;
		box-shadow: none;
	}
}

/* Dark mode */
[data-theme="dark"] .maktab-new-btn { background: var(--brown-deep); color: #F5F0E8; }
[data-theme="dark"] .maktab-new-btn:hover { background: #5A4738; }
[data-theme="dark"] .maktab-list-pill-count { opacity: 1; }
[data-theme="dark"] .maktab-list-card-positive .maktab-list-card-value { color: #9ED29E; }
[data-theme="dark"] .maktab-list-card-warning  .maktab-list-card-value { color: #E8C88A; }
[data-theme="dark"] .maktab-list-card-danger   .maktab-list-card-value { color: #E8A890; }
[data-theme="dark"] .maktab-list-card-info     .maktab-list-card-value { color: #9AC4E0; }
[data-theme="dark"] .maktab-list-pill {
	background: #1A1510;
	color: var(--maktab-text);
	border-color: var(--maktab-border);
}
[data-theme="dark"] .maktab-list-pill:hover {
	background: #24201A;
	border-color: var(--maktab-sand);
}
[data-theme="dark"] .maktab-list-pill.active {
	background: var(--maktab-brown);
	color: var(--maktab-cream);
	border-color: var(--maktab-brown);
}
[data-theme="dark"] .maktab-list-search-input {
	background: #1A1510;
	color: var(--maktab-text);
	border-color: var(--maktab-border);
}
[data-theme="dark"] .maktab-list-search-input::placeholder { color: var(--maktab-text-muted); }
[data-theme="dark"] .maktab-list-table tbody tr.maktab-list-row:hover td {
	background: rgba(212, 197, 160, 0.05);
}

/* Helper classes — kept under the old .rich-list-* names because per-page
   render functions still output them. Safe to leave alone. */
.rich-list-name-cell { font-weight: 600; color: var(--maktab-text); }
.rich-list-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--r-lg);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
}
.rich-list-badge-thilth   { background: #e3f2fd; color: #0d47a1; }
.rich-list-badge-khums    { background: #f3e5f5; color: #4a148c; }
.rich-list-badge-personal { background: #fff3e0; color: #7a3f00; }
.rich-list-badge-active,
.rich-list-badge-occupied,
.rich-list-badge-scheduled { background: #e8f5e8; color: #1b5e20; }
.rich-list-badge-expired,
.rich-list-badge-overdue,
.rich-list-badge-cancelled { background: #ffebee; color: #8b1a1a; }
.rich-list-badge-pending,
.rich-list-badge-draft,
.rich-list-badge-requested,
.rich-list-badge-expiring-soon,
.rich-list-badge-on-leave { background: #fff8e1; color: #7a4f00; }
.rich-list-badge-vacant,
.rich-list-badge-inactive,
.rich-list-badge-completed { background: #f5f5f5; color: #616161; }
/* FIX 2 redo 2: distinct Terminated badge — purple, matches the existing
   .lv-status-terminated panel-bar color (#F0E6F6 / #6B3FA0). Reused tokens,
   no new hex values introduced. */
.rich-list-badge-terminated { background: #F0E6F6; color: #6B3FA0; }
.rich-list-badge-confirmed { background: #e1f5fe; color: #01579b; }
.rich-list-badge-distributed,
.rich-list-badge-approved { background: #f1f8e9; color: #33691e; }
.rich-list-badge-neutral { background: var(--beige); color: #5a4a3b; }
[data-theme="dark"] .rich-list-badge-thilth   { background: rgba(144, 202, 249, 0.16); color: #90caf9; }
[data-theme="dark"] .rich-list-badge-khums    { background: rgba(206, 147, 216, 0.16); color: #ce93d8; }
[data-theme="dark"] .rich-list-badge-personal { background: rgba(255, 167, 38, 0.16); color: #ffb74d; }
[data-theme="dark"] .rich-list-badge-active,
[data-theme="dark"] .rich-list-badge-occupied,
[data-theme="dark"] .rich-list-badge-scheduled { background: rgba(143, 184, 143, 0.18); color: #9ed29e; }
[data-theme="dark"] .rich-list-badge-expired,
[data-theme="dark"] .rich-list-badge-overdue,
[data-theme="dark"] .rich-list-badge-cancelled { background: rgba(212, 138, 116, 0.18); color: #e8a890; }
[data-theme="dark"] .rich-list-badge-pending,
[data-theme="dark"] .rich-list-badge-draft,
[data-theme="dark"] .rich-list-badge-requested,
[data-theme="dark"] .rich-list-badge-expiring-soon,
[data-theme="dark"] .rich-list-badge-on-leave { background: rgba(224, 176, 106, 0.18); color: #e8c88a; }
[data-theme="dark"] .rich-list-badge-vacant,
[data-theme="dark"] .rich-list-badge-inactive,
[data-theme="dark"] .rich-list-badge-completed { background: rgba(212, 197, 160, 0.12); color: #b8a890; }
[data-theme="dark"] .rich-list-badge-terminated { background: rgba(107,63,160,0.18); color: #C4A8E8; }
[data-theme="dark"] .rich-list-badge-confirmed { background: rgba(129, 212, 250, 0.18); color: #81d4fa; }
[data-theme="dark"] .rich-list-badge-distributed,
[data-theme="dark"] .rich-list-badge-approved { background: rgba(170, 214, 107, 0.18); color: #aad66b; }
[data-theme="dark"] .rich-list-badge-neutral { background: rgba(212,197,160,0.10); color: var(--straw); }

/* FB-92 — Theme 7. FB-93: side padding aligned with peer pages.
   FB-2026-00195 (re-opened): removed `container-type: inline-size` — it
   established CSS containment that froze the sticky `.fb-filter-row`
   layout context across viewport-breakpoint crossings (sidebar collapse
   animation changing the container's inline-size left the sticky
   descendant's containing block stale until a hover triggered a recalc).
   No `@container` queries depend on this anchor (verified via grep on
   maktab.css), so the property was dormant — safe to remove. */
.feedback-list-container {
	/* 760px keeps the 6 summary cards in a clean 4+2 wrap instead of an
	   awkward 5+1 (FB-2026-00234). Below 4-per-row the auto-fit grid still
	   collapses gracefully. */
	max-width: 760px; margin: 0 auto; padding: 0 16px;
}
/* end FB-92 */

@media (max-width: 768px) {
	.feedback-list-container {
		padding: 8px 12px 30px;
	}
	/* WebKit UA sheet adds overflow:hidden to <select appearance:none>,
	   which clips descenders (g, y, p) at the bottom of the text box.
	   Desktop Chromium doesn't do this — reset to match. */
	select {
		overflow: visible !important;
	}
}

/* ═══ Feedback list cards ═══ */
/* FB-2026-00209: card bg differentiated from page bg via --cream (canonical
   card surface) — page is --beige. 1px border in --border defines the edge.
   Dark mode auto-flips via the token (cream=#221C14 over beige=#18130D). */
.fb-card {
	margin-bottom: 16px;
	padding: 16px;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
}
/* FB-2026-00219: use border-inline-start so the 4px status stripe flips
   sides automatically in RTL (Arabic) — the stripe was stuck on the left
   in both LTR and RTL before. */
.fb-border-new      { border-inline-start: 4px solid var(--maktab-terracotta) !important; }
.fb-border-pending  { border-inline-start: 4px solid var(--maktab-amber) !important; }
.fb-border-testing  { border-inline-start: 4px solid var(--maktab-sky) !important; }
.fb-border-fixed    { border-inline-start: 4px solid var(--maktab-green) !important; }
.fb-border-wont_fix { border-inline-start: 4px solid var(--maktab-text-muted) !important; }

.fb-card .rc-card-header { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fb-left-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-right-meta  { display: flex; gap: 10px; font-size: 12px; color: var(--maktab-text-muted); flex-wrap: wrap; align-items: center; }
.fb-meta        { color: var(--maktab-text-muted); }
/* FB-2026-00211: surface the Feedback name (FB-YYYY-NNNNN) on every card so
   the user can copy it when reporting. Monospace, muted, selectable, no bg. */
.fb-card-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	color: var(--maktab-text-muted);
	letter-spacing: 0.2px;
	user-select: text;
	-webkit-user-select: text;
}

.fb-description {
	white-space: pre-wrap;
	word-wrap: break-word;
	margin: 12px 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--maktab-text);
}

.fb-context {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0;
}
.fb-context-chip {
	font-size: 11px;
	padding: 3px 8px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-lg);
	color: var(--maktab-text-muted);
	background: var(--maktab-cream);
}

.fb-attachment { margin: 12px 0; }
.fb-attach-btn { padding: 6px 14px !important; font-size: 13px !important; }

/* Feedback list filter row — sticky + scrollable on mobile */
.fb-filter-row {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--maktab-beige);
	padding: 8px 0;
	margin-bottom: 16px;
	/* allow internal horizontal scroll without pushing the page wider */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex-wrap: nowrap;
}
.fb-filter-row::-webkit-scrollbar { display: none; }
/* Keep pills on one line so horizontal scroll is meaningful */
.fb-filter-row .maktab-list-pill { flex: 0 0 auto; white-space: nowrap; }
/* Dark mode: use a solid surface so rows scrolling behind remain legible */
[data-theme="dark"] .fb-filter-row { background: var(--maktab-bg); }

.fb-status-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--maktab-border);
}
.fb-status-btn {
	padding: 6px 12px;
	font-size: 13px;
	border: 1px solid var(--maktab-border);
	background: var(--maktab-cream);
	color: var(--maktab-text);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background 0.15s ease;
}
.fb-status-btn:hover:not(.is-current):not(:disabled) { background: var(--maktab-straw); }
.fb-status-btn.is-current {
	background: var(--maktab-brown);
	color: var(--maktab-white);
	border-color: var(--maktab-brown);
	cursor: default;
}
.fb-status-btn:disabled:not(.is-current) { opacity: 0.5; cursor: wait; }

[data-theme="dark"] .fb-context-chip { background: var(--maktab-straw); }
[data-theme="dark"] .fb-status-btn   { background: var(--maktab-straw); }
[data-theme="dark"] .fb-status-btn.is-current { background: var(--maktab-brown); color: var(--maktab-white); border-color: var(--maktab-brown); }

@media (max-width: 768px) {
	.fb-card { padding: 14px; }
	.fb-status-actions { gap: 8px; }
	.fb-status-btn { flex: 1 1 calc(50% - 8px); min-height: 36px; }
}

/* ── FB-2026-00212: feedback card → opens slide-panel detail view ────── */
.fb-card { cursor: pointer; }
.fb-card:hover { border-color: var(--maktab-brown); }
[data-theme="dark"] .fb-card:hover { border-color: var(--maktab-tan); }
/* Status buttons / attachment links inside the card stay non-pointer for
   the card-click handler (they handle their own clicks via stopPropagation
   via the closest('button,a') check in feedback_list.js). */

/* ── Feedback slide-panel — header card, description, context, comments ─ */
.fb-panel-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}
.fb-panel-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-panel-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--maktab-text-muted);
	text-align: end;
}
.fb-panel-description {
	font-size: 14px;
	line-height: 1.55;
	color: var(--maktab-text);
	white-space: pre-wrap;
	word-break: break-word;
}
.fb-panel-ua {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: var(--maktab-text-muted);
	/* FB-2026-00216: user agent strings are one long unbroken token.
	   `.lv-row .lv-value { white-space: nowrap }` (line 4207) wins by
	   specificity, so we re-allow wrap here AND force the long token to
	   break anywhere. overflow-wrap: anywhere covers the modern path. */
	white-space: normal;
	word-break: break-all;
	overflow-wrap: anywhere;
	min-width: 0;
}
/* FB-2026-00216: when the UA value lives inside .lv-row, the row's
   baseline alignment + flex layout can let a long unbroken token push the
   row wider than the panel. Re-allow wrap on the .lv-value when it wraps
   .fb-panel-ua, and switch row alignment so the wrapped lines look clean.
   FB-2026-00224: ALSO force the label to a single line and add a gap so the
   "User agent" / "متصفح المستخدم" label doesn't wrap into two lines that sit
   flush against the value (regression from the FB-216 fix above). */
.lv-row:has(> .lv-value > .fb-panel-ua) { align-items: flex-start; gap: 12px; }
.lv-row:has(> .lv-value > .fb-panel-ua) > .lv-label { white-space: nowrap; flex: 0 0 auto; }
.lv-row > .lv-value:has(> .fb-panel-ua) { white-space: normal; min-width: 0; text-align: end; flex: 1 1 auto; }
.fb-panel-attach-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fb-panel-attach-link {
	color: var(--maktab-sky);
	font-size: 13px;
	text-decoration: none;
}
.fb-panel-attach-link:hover { text-decoration: underline; }

/* Comments thread inside slide-panel */
.fb-comments-card { display: flex; flex-direction: column; gap: 12px; }
.fb-comments-count {
	font-size: 12px;
	font-weight: 500;
	color: var(--maktab-text-muted);
	margin-inline-start: 4px;
}
.fb-comments-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fb-comments-empty {
	font-size: 13px;
	color: var(--maktab-text-muted);
	padding: 12px 0;
	font-style: italic;
}
.fb-comment {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.fb-comment-avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--maktab-straw);
	color: var(--maktab-brown);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
.fb-comment.is-claude .fb-comment-avatar {
	background: var(--maktab-brown);
	color: var(--maktab-white);
}
.fb-comment-body {
	flex: 1;
	min-width: 0;
}
.fb-comment-head {
	display: flex;
	gap: 8px;
	align-items: baseline;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.fb-comment-author {
	font-size: 13px;
	font-weight: 600;
	color: var(--maktab-text);
}
.fb-comment-when {
	font-size: 11px;
	color: var(--maktab-text-muted);
}
.fb-comment-content {
	font-size: 13px;
	line-height: 1.5;
	color: var(--maktab-text);
	word-break: break-word;
}
.fb-comment-content p { margin: 0 0 6px; }
.fb-comment-content p:last-child { margin-bottom: 0; }

.fb-comment-input-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--maktab-border);
	padding-top: 12px;
}
.fb-comment-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--maktab-border);
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	line-height: 1.5;
	color: var(--maktab-text);
	background: var(--maktab-white);
	resize: vertical;
	min-height: 64px;
}
.fb-comment-textarea:focus {
	outline: none;
	border-color: var(--maktab-brown);
}
.fb-comment-input-actions {
	display: flex;
	justify-content: flex-end;
}
.fb-comment-post-btn {
	padding: 6px 16px;
	border: 1px solid var(--maktab-brown);
	background: var(--maktab-brown);
	color: var(--maktab-white);
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	cursor: pointer;
	min-height: 32px;
}
.fb-comment-post-btn:hover:not(:disabled) { background: var(--maktab-brown-dark, var(--maktab-brown)); }
.fb-comment-post-btn:disabled { opacity: 0.5; cursor: not-allowed; }

[data-theme="dark"] .fb-comment-avatar { background: var(--maktab-straw); }
[data-theme="dark"] .fb-comment.is-claude .fb-comment-avatar {
	background: var(--maktab-tan);
	color: var(--maktab-cream);
}
[data-theme="dark"] .fb-comment-textarea {
	background: var(--maktab-cream);
	color: var(--maktab-text);
}

@media (max-width: 768px) {
	.fb-panel-header { flex-direction: column; align-items: stretch; }
	.fb-panel-meta { text-align: start; flex-direction: row; gap: 12px; }
}

/* Native file upload button in feedback dialog */
.maktab-fb-upload {
	padding: 8px 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.maktab-fb-upload .btn,
.maktab-fb-upload .btn.btn-default,
.maktab-fb-upload .btn.btn-sm {
	min-height: 32px;
	padding: 6px 14px !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	background: var(--maktab-cream);
	color: var(--maktab-text);
	border: 1px solid var(--maktab-brown) !important;
	border-top: 1px solid var(--maktab-brown) !important;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.maktab-fb-upload .btn:hover:not(:disabled) {
	background: var(--maktab-brown);
	color: var(--maktab-white);
}
.maktab-fb-upload .btn:disabled {
	opacity: 0.55;
	cursor: wait;
}
/* Give the "file chosen" label a little breathing room on its own line if needed */
.maktab-fb-upload #maktab-fb-file-name {
	margin-inline-start: 0;
}
[data-theme="dark"] .maktab-fb-upload .btn {
	background: var(--maktab-straw);
	border: 1px solid var(--maktab-sand) !important;
	border-top: 1px solid var(--maktab-sand) !important;
}
[data-theme="dark"] .maktab-fb-upload .btn:hover:not(:disabled) {
	background: var(--maktab-brown);
	color: var(--maktab-white);
	border-color: var(--maktab-brown);
}


/* ── My Account page ── */
/* Scoped under .maktab-my-account so these rules cannot bleed to other pages */
.maktab-my-account {
	max-width: 560px;
	margin: 0 auto;
	padding: 20px 16px;
	/* FB-59 retry (Round 3 T-C6): the container was transparent (rgba(0,0,0,0)),
	   so the body bg (#1A1510 in dark mode) bled through the 14px gap at the
	   bottom of the element. Set background to match the page surface — same
	   variable used on .page-body and .page-container above. In dark mode
	   --card-bg resolves to the dark surface color via [data-theme="dark"],
	   making the sliver invisible in both themes. */
	background: var(--card-bg);
	/* FB-2026-00159: do NOT set min-height here — the calc(100vh - 60px) base
	   value caused desktop overflow because the page-head + padding + this
	   container together exceeded 100vh, producing a phantom scroll bar on a
	   page that visually fits the screen. The mobile rule below still pins
	   min-height: 100vh inside the iOS-only locked scroll container so no bare
	   page-body strip is exposed under the card. */
}

/* FB-44: my-account is a short page — body scrolling triggers iOS Safari's
   URL-bar-shrink heuristic, and the bar can get stuck opaque. Instead of
   padding the page to force scroll range, we stop the body from scrolling at
   all: page-container fills the viewport and scrolls internally. URL bar never
   shrinks because document scroll never happens.

   Body lock is gated on `body.maktab-lock-scroll`, which JS adds only while
   my-account is the active route. Frappe keeps cached pages in the DOM with
   inline display:none, so a naive `:has([data-page-route="my-account"])` rule
   would lock scroll on EVERY page after the first my-account visit.

   Card-bg on container + page-head + page-body keeps the surface visually
   continuous (no harsh beige strips between the card and page chrome). */
html.maktab-lock-scroll,
body.maktab-lock-scroll {
	overflow: hidden !important;
	height: 100vh !important;
	background: var(--card-bg) !important;
}
.page-container[data-page-route="my-account"] {
	background: var(--card-bg) !important;
}
@media (max-width: 768px) {
	.page-container[data-page-route="my-account"] {
		height: 100vh !important;
		min-height: 0 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}
.page-container[data-page-route="my-account"] .page-head,
.page-container[data-page-route="my-account"] .page-body {
	background: var(--card-bg) !important;
}

/* maktab.set_page_title hides the Frappe titlebar by adding this class.
   The visible page name comes from the .maktab-page-h1 inline title below. */
.page-container.maktab-no-titlebar .page-head {
	display: none !important;
}

/* ── Inline title H1 ──
   set_page_title prepends <h1.maktab-page-h1> to .page-body. Sits above
   .page-main, so it survives any render that does page.main.html(...).
   Match the rent-collection inline-head visual: 30px Cairo brown-deep,
   sand bottom border, matching padding to the page chrome. */
.page-body > .maktab-page-h1 {
	font-family: var(--font-ar);
	font-size: var(--text-3xl);
	font-weight: 600;
	color: var(--brown-deep);
	margin: 0;
	padding: var(--s-4) var(--s-5) var(--s-3);
	border-bottom: 2px solid var(--sand);
	line-height: 1.2;
}
[data-theme="dark"] .page-body > .maktab-page-h1 {
	color: var(--ink);
}
/* Hide auto-H1 on pages that render their own visible head: home greeting
   card and rent-collection's .rc-page__head sit inside page.main and supply
   their own title. Showing the auto-H1 above them creates duplicates. */
body[data-route="maktab"] .page-body > .maktab-page-h1,
body[data-route^="rent-collection"] .page-body > .maktab-page-h1 {
	display: none !important;
}
/* Mobile: tighter padding on the inline head */
@media (max-width: 768px) {
	.page-body > .maktab-page-h1 {
		font-size: var(--text-2xl);
		padding: var(--s-3) var(--s-4) var(--s-2);
	}
}

/* Card: uses our theme variables instead of Bootstrap's .card (which hardcodes white) */
.maktab-ma-card {
	background: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: var(--r-md);
	padding: 24px 28px;
}

/* Avatar row */
.maktab-ma-avatar-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.maktab-ma-avatar-btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Avatar image — circular, themed border */
.maktab-ma-avatar-img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--border-color);
	display: block;
}

/* Avatar initials placeholder — picks up card-bg/text from theme */
.maktab-ma-avatar-placeholder {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--subtle-fg);
	border: 2px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 600;
	color: var(--text-muted);
}

/* Form inputs — explicit theme vars so they work in both light and dark */
.maktab-my-account .maktab-ma-input {
	background: var(--control-bg) !important;
	color: var(--text-color) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: var(--r-md);
}
.maktab-my-account .maktab-ma-input:focus {
	border-color: var(--primary) !important;
	outline: none;
	box-shadow: none !important;
}
.maktab-my-account .maktab-ma-readonly {
	background: var(--subtle-fg) !important;
	color: var(--text-muted) !important;
	cursor: not-allowed;
	opacity: 0.8;
}

/* Radio groups */
.maktab-ma-radio-group {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-top: 6px;
}
.maktab-ma-radio-label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-weight: 400;
	color: var(--text-color);
}

/* Help text */
.maktab-ma-help {
	margin-top: 4px;
	font-size: 12px;
}

/* Action buttons row */
.maktab-ma-actions {
	margin-top: 24px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

/* ── Security / 2FA card ───────────────────────────────────────────── */
.maktab-ma-security-card { margin-top: 16px; }
.maktab-ma-section-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--text-color, #2c2920);
}
.maktab-ma-2fa-status {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.maktab-ma-2fa-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.maktab-ma-2fa-pill-on       { background: rgba(76,156,76,0.15);  color: #2e6b2e; }
.maktab-ma-2fa-pill-required { background: rgba(212,138,71,0.15); color: #8a4a18; }
.maktab-ma-2fa-pill-off      { background: rgba(120,120,120,0.12); color: var(--text-muted, #6e6e6e); }
.maktab-ma-2fa-method {
	font-size: 12px;
	color: var(--text-muted, #6e6e6e);
}
.maktab-ma-2fa-desc { margin: 4px 0 16px; }
.maktab-ma-2fa-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
/* Modal QR + secret presentation */
.maktab-ma-2fa-modal { text-align: center; padding: 8px 0; }
.maktab-ma-2fa-qr {
	display: inline-block;
	padding: 12px;
	background: #fff;
	border-radius: 6px;
	border: 1px solid var(--border-color, #e3dccb);
	margin-bottom: 16px;
}
.maktab-ma-2fa-qr svg { display: block; }
.maktab-ma-2fa-secret {
	margin: 8px 0 16px;
	font-family: monospace;
	background: var(--subtle-fg, #f5f0e6);
	padding: 8px 12px;
	border-radius: 4px;
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.05em;
}
.maktab-ma-2fa-modal-note {
	margin-top: 16px;
	padding: 10px 14px;
	background: rgba(212,138,71,0.08);
	border-left: 3px solid var(--accent-warm, #d48a47);
	border-radius: 3px;
	font-size: 13px;
	text-align: start;
}
[data-theme="dark"] .maktab-ma-2fa-pill-on       { background: rgba(76,156,76,0.2);  color: #8fc98f; }
[data-theme="dark"] .maktab-ma-2fa-pill-required { background: rgba(212,138,71,0.2); color: #e0a878; }
[data-theme="dark"] .maktab-ma-2fa-pill-off      { background: rgba(255,255,255,0.06); color: var(--text-muted); }
[data-theme="dark"] .maktab-ma-2fa-qr { background: #fff; }  /* keep light bg so QR scans */

/* Dark mode — ensure card and controls track the dark palette */
[data-theme="dark"] .maktab-ma-card {
	background: var(--card-bg);
	color: var(--text-color);
	border-color: var(--border-color);
}
[data-theme="dark"] .maktab-my-account .maktab-ma-input {
	background: var(--control-bg) !important;
	color: var(--text-color) !important;
	border-color: var(--border-color) !important;
}
[data-theme="dark"] .maktab-my-account .maktab-ma-readonly {
	background: var(--subtle-fg) !important;
	color: var(--text-muted) !important;
}
[data-theme="dark"] .maktab-ma-avatar-placeholder {
	background: var(--subtle-fg);
	color: var(--text-muted);
	border-color: var(--border-color);
}

/* ── FB-75: my-account save button reachable on mobile ──
   The page scrolls inside .page-container (overflow-y: auto). Adding
   padding-bottom here ensures the .maktab-ma-actions save row clears the
   fixed 72px bottom nav. calc() stacks: 72px nav + safe-area + 16px gap.
   FB-90/105: min-height: 100vh fills the scroll container completely so no
   bare page-body strip is exposed at the bottom.
   FB-2026-00090 (Round 6b): bump base from 88px (72+16) to 96px so the last
   form field clears the mobile bottom-nav comfortably. With safe-area on iOS
   this stacks to ~130px which clears the home-bar too.
   FB-2026-00090 (Round 6i.4): Ahmad reports last form field still slightly
   covered by the bottom-nav. Bump base from 96px to 120px so the save row
   has clear breathing room above the nav on all iOS devices. */
@media (max-width: 768px) {
	.maktab-my-account {
		padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
		min-height: 100vh;
	}
}

/* FB-2026-00105/00141 (Round 6b): the previous Round 5 attempt only patched
   .page-body, but the Scout's DOM probe showed the darker rgb(26,21,16) bg
   was on .layout-main-section — outside .page-body. Result: a darker band
   wrapped the lighter .maktab-my-account "card". Match BOTH the layout
   section AND page-body to --card-bg on the my-account route only.
   Prefix selector [data-route^="my-account"] catches sub-routes too.

   FB-105/141 refit: a 10px residual edge strip of rgb(26,21,16) still
   showed at the page edge (left in RTL, right in LTR) because the
   page-container has a 10px offset and the body / .main-section bg
   bled through. Extend the selector to body and .main-section too. */
body[data-route^="my-account"],
body[data-route^="my-account"] .main-section,
body[data-route^="my-account"] .layout-main-section,
body[data-route^="my-account"] .page-body {
	background-color: var(--card-bg) !important;
	min-height: 100%;
}

/* ── FB-2026-00044 — Safari iOS URL bar transparency ──────────────────────
   Frappe's show_alert() creates #dialog-container > #alert-container in the
   DOM once and leaves them there permanently (individual toasts are removed
   after fade, but the wrappers stay). #alert-container is position:fixed at
   bottom:0 — Safari's compositor sees a fixed-bottom element and switches the
   URL bar to opaque mode. Force #alert-container transparent so Safari sees
   through it. pointer-events:none prevents the empty wrapper intercepting taps.
   Individual .desk-alert toasts keep their own background-color from
   var(--toast-bg) — only the wrapper is affected.

   Round 2 — lift the container off bottom:0 by env(safe-area-inset-bottom)
   so the safe-area strip is never occupied by a fixed element.

   Round 3 (P3.3) — mobile media query at end of file raises the container
   to clear the 72px bottom nav (see P3.3 Toast redesign section below).

   NOTE: Do NOT add pointer-events:none to #dialog-container. Frappe v15 mounts
   ALL modal dialogs (frappe.ui.Dialog) inside #dialog-container. Setting
   pointer-events:none on the container cascades into modals and makes their
   interactive elements (buttons, inputs, textareas) unresponsive to touch —
   causing FB-2026-00046 (dialog dismisses on upload tap) and FB-2026-00048
   (dead zones in feedback dialog). The toast wrapper transparency is achieved
   via #alert-container alone; #dialog-container does NOT host toast alerts. */
#alert-container {
	background: transparent !important;
	pointer-events: none;
	/* 24px fallback ensures we lift off bottom even when env() resolves to 0px
	   (headless / non-notch devices). On notch devices the inset (typically
	   34px on iPhone 14) wins; on flat-bottom devices we still stay 24px up
	   so the container never sits flush against the URL bar zone. */
	bottom: env(safe-area-inset-bottom, 24px) !important;
}
/* Re-enable pointer events on actual toast children so they stay clickable */
#alert-container .desk-alert {
	pointer-events: auto;
}

/* ── Impersonation banner (Phase 5e) ── */
#maktab-impersonation-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #dc2626;
	color: #fff;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 600;
	z-index: 9999;
	border-bottom: 2px solid #991b1b;
}
#maktab-impersonation-banner button {
	background: #fff;
	color: #dc2626;
	border: none;
	padding: 6px 14px;
	border-radius: var(--r-sm);
	font-weight: 600;
	cursor: pointer;
}
#maktab-impersonation-banner button:hover {
	background: #fee2e2;
}
body.maktab-impersonating {
	padding-top: 44px;
}

/* ── Mobile bottom navigation (Variant D dark) ─────────────────────────────
   5 tabs: Menu (hamburger, sidebar toggle) / Home / Properties / Rent / Households
   Light mode: dark-brown bar, straw inactive, full straw active + top stripe
   Dark mode:  cream bar (slightly lighter than bg), muted inactive, brown active
   iOS: env(safe-area-inset-bottom) guards against notch/home-indicator overlap
   Desktop: hidden via min-width: 769px
   ────────────────────────────────────────────────────────────────────────── */
.maktab-bottom-nav {
	display: none; /* hidden by default; shown only on mobile (see @media below) */
}

@media (max-width: 768px) {
	/* FB-73: bottom nav is position:fixed. Add will-change:transform + transform:translateZ(0)
	   to promote to compositing layer — prevents iOS rubber-band scroll from moving the bar. */
	.maktab-bottom-nav {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--maktab-dark-brown);
		border-top: none;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		z-index: 1010;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		will-change: transform;
		/* Ensure it sits above page content but below the mobile sidebar (1050)
		   and its backdrop (1049) */
	}

	[data-theme="dark"] .maktab-bottom-nav {
		background: var(--maktab-cream); /* slightly lighter than page bg (#1A1510) */
		border-top: 1px solid var(--maktab-border);
	}

	/* Shared tab styles.
	   Frappe's global stylesheet applies `color: var(--primary)` to all <a>
	   elements with high specificity. The destination tabs are <a> tags, so we
	   need !important on color here to win the cascade. This is intentional and
	   scoped tightly to .maktab-bottom-nav — it does not affect anything else. */
	.maktab-bn-tab {
		flex: 1;
		padding: 10px 4px 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		color: rgba(212, 197, 160, 0.6) !important; /* straw at 60% — inactive */
		text-decoration: none !important;
		font-size: 10px;
		font-weight: 600;
		font-family: inherit;
		background: none;
		border: none;
		cursor: pointer;
		position: relative;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
	}

	[data-theme="dark"] .maktab-bn-tab {
		color: var(--maktab-text-muted) !important; /* inactive in dark mode */
	}

	/* Active tab — straw color + top stripe */
	.maktab-bn-tab.active {
		color: var(--maktab-straw) !important;
	}

	[data-theme="dark"] .maktab-bn-tab.active {
		color: var(--maktab-brown) !important; /* #C4A882 tan in dark mode */
	}

	/* 2px straw stripe at top, centered to 60% width */
	.maktab-bn-tab.active::before {
		content: '';
		position: absolute;
		top: 0;
		left: 20%;
		right: 20%;
		height: 2px;
		background: var(--maktab-straw);
		border-radius: 0 0 var(--r-sq) var(--r-sq);
	}

	[data-theme="dark"] .maktab-bn-tab.active::before {
		background: var(--maktab-brown);
	}

	/* SVG icons inside tabs */
	.maktab-bn-tab svg {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
	}

	/* Menu tab — full-strength color, right separator (LTR).
	   Override the rgba(…, 0.6) inactive rule set on .maktab-bn-tab above. */
	.maktab-bn-menu {
		color: var(--maktab-straw) !important; /* full-strength, always visible */
		border-right: 1px solid rgba(212, 197, 160, 0.18);
	}

	[data-theme="dark"] .maktab-bn-menu {
		color: var(--maktab-text) !important; /* full-strength text in dark mode */
		border-right: 1px solid var(--maktab-border);
	}

	/* RTL: keep flex-direction: row.
	   FB-152: With dir="rtl" on the container, the browser already places
	   first-child (Menu) at the visual right. Adding row-reverse double-flips
	   it back to the left, which is wrong for Arabic — Menu should sit on
	   the right where the user's thumb expects the primary tab. Forcing row
	   here defeats any cascading row-reverse and matches Arabic reading
	   order: Menu | Home | Properties | Rent | Households (right → left). */
	html[dir="rtl"] .maktab-bottom-nav,
	[dir="rtl"] .maktab-bottom-nav {
		flex-direction: row;
	}

	/* RTL: Menu separator stays on the side adjacent to Home tab.
	   With Menu now on the visual right (default RTL flow), the separator
	   that divides Menu from the rest moves to its left edge. */
	html[dir="rtl"] .maktab-bn-menu,
	[dir="rtl"] .maktab-bn-menu {
		border-right: none;
		border-left: 1px solid rgba(212, 197, 160, 0.18);
	}

	[data-theme="dark"] html[dir="rtl"] .maktab-bn-menu,
	html[dir="rtl"] [data-theme="dark"] .maktab-bn-menu,
	[dir="rtl"] [data-theme="dark"] .maktab-bn-menu {
		border-left: 1px solid var(--maktab-border);
		border-right: none;
	}

	/* Push page body up so content isn't hidden behind the nav bar.
	   72px = approx tab height (10+22+3+8+3 padding) + safe area buffer.
	   body is the scroll root on mobile (overflow:visible on .main-section),
	   so padding-bottom here is what actually matters. .main-section is included
	   as a belt-and-suspenders guard for Frappe pages that scroll .main-section. */
	/* FB-2026-00177: was `body:has(.maktab-bottom-nav)`. The bottom nav is
	   always injected on mobile, so a media-query rule is equivalent and
	   doesn't force a `:has()` re-evaluation on every class mutation in
	   body — which was adding ~140ms of style-recalc delay before the
	   sidebar's close transition could paint its first frame. */
	body, body .main-section {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	/* FB-2026-00179: keep the bottom nav visible when sidebar is open.
	   z-index 1010 sits below sidebar (1050) and backdrop (1049), so the
	   nav is naturally tinted by the backdrop on the side that isn't
	   covered by the sidebar — no layout shift, no apparent disappearance. */
}

/* ════════════════════════════════════════════════════════
   Home V2 — role-aware home page (P2.2)
   ════════════════════════════════════════════════════════ */

.maktab-home-v2 {
	padding: 16px 16px 32px;
}

/* ── Greeting + date ── */
.mh-greeting {
	font-size: 22px;
	font-weight: 700;
	color: var(--maktab-text);
	margin-bottom: 4px;
	line-height: 1.2;
}

.mh-date {
	font-size: 13px;
	color: var(--maktab-text-muted);
	margin-bottom: 18px;
}

/* ── Alert chip strip ── */
.mh-alert-strip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin: 0 -16px 20px;
	padding-left: 16px;
	padding-right: 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mh-alert-strip::-webkit-scrollbar {
	display: none;
}

/* Outlined "attention" chips — non-interactive-looking informational pills.
   The Quick Action buttons below are filled (CTA); these are outlined so
   users can distinguish at-a-glance which row is clickable.
   (Chips are still <a> tags so they remain clickable, but they read as
   status indicators rather than primary actions.) */
.mh-alert-chip {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: transparent;
	color: #8C3E28;
	border: 1px solid #D9A691;
	border-radius: var(--r-lg);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.mh-alert-chip:hover {
	background: rgba(247, 224, 215, 0.4);
	text-decoration: none;
	color: #8C3E28;
}
.mh-alert-chip .mh-chip-num {
	font-size: 16px;
	font-weight: 700;
}
.mh-alert-chip.mh-chip-amber {
	background: transparent;
	color: #6B4A1F;
	border-color: #D6BC85;
}
.mh-alert-chip.mh-chip-amber:hover {
	background: rgba(245, 229, 197, 0.45);
	color: #6B4A1F;
}
.mh-alert-chip.mh-chip-info {
	background: transparent;
	color: #1F4A6B;
	border-color: #9EBED6;
}
.mh-alert-chip.mh-chip-info:hover {
	background: rgba(216, 231, 241, 0.45);
	color: #1F4A6B;
}

/* ── Section title ── */
.mh-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--maktab-text-muted);
	margin-bottom: 8px;
}

/* ── KPI grid ── */
.mh-kpi-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 20px;
}

@media (min-width: 769px) {
	.mh-kpi-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mh-kpi {
	background: #F0E4D0;
	padding: 14px;
	border: none;
	text-decoration: none;
	display: block;
	color: inherit;
	cursor: default;
}
a.mh-kpi {
	cursor: pointer;
}
a.mh-kpi:hover {
	background: #E8D8C0;
	text-decoration: none;
	color: inherit;
}

.mh-kpi-label {
	font-size: 11px;
	color: var(--maktab-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.mh-kpi-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--maktab-text);
	line-height: 1.2;
}
.mh-kpi-sub {
	font-size: 11px;
	color: var(--maktab-text-muted);
	margin-top: 2px;
}

/* ── Quick action pills ── */
.mh-quick-actions {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: 0 -16px 20px;
	padding: 0 16px 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mh-quick-actions::-webkit-scrollbar {
	display: none;
}

/* Filled CTA buttons — visually distinct from the outlined attention
   chips above. Larger vertical padding, heavier weight, slight letter
   tracking, and a less-rounded (medium-radius) shape mark these as
   primary actions rather than informational pills. */
.mh-quick-btn {
	flex-shrink: 0;
	padding: 11px 18px;
	background: var(--maktab-dark-brown);
	color: var(--straw);
	border: 1px solid var(--maktab-dark-brown);
	border-radius: var(--r-md);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: inherit;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.mh-quick-btn:hover {
	background: var(--brown-night);
	border-color: var(--brown-night);
	text-decoration: none;
	color: var(--straw);
}
.mh-quick-btn:active {
	transform: translateY(1px);
}

/* ── Recent activity feed ── */
.mh-activity-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mh-activity-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--maktab-border);
	text-decoration: none;
	color: inherit;
}
.mh-activity-item:last-child {
	border-bottom: none;
}
a.mh-activity-item:hover {
	text-decoration: none;
	color: inherit;
}
a.mh-activity-item:hover .mh-activity-text {
	color: var(--maktab-brown);
}

.mh-activity-dot {
	width: 6px;
	height: 6px;
	background: var(--maktab-brown);
	border-radius: 50%;
	margin-top: 5px;
	flex-shrink: 0;
}
.mh-activity-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.mh-activity-text {
	font-size: 13px;
	color: var(--maktab-text);
	line-height: 1.4;
	word-break: break-word;
	display: block;
}
.mh-activity-time {
	font-size: 11px;
	color: var(--maktab-text-muted);
	margin-top: 2px;
	display: block;
}

/* ── Empty state ── */
.mh-empty {
	font-size: 13px;
	color: var(--maktab-text-muted);
	padding: 12px 0;
}

/* ── Skeleton placeholder ── */
.mh-skeleton {
	background: linear-gradient(
		90deg,
		var(--maktab-border) 25%,
		var(--maktab-straw) 50%,
		var(--maktab-border) 75%
	);
	background-size: 200% 100%;
	animation: mh-shimmer 1.4s ease infinite;
	border-radius: var(--r-sm);
	display: inline-block;
}
@keyframes mh-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Dark mode ── */
[data-theme="dark"] .mh-kpi {
	background: var(--maktab-cream);
	border: 1px solid var(--maktab-border);
}
[data-theme="dark"] a.mh-kpi:hover {
	background: #2E2820;
}
[data-theme="dark"] .mh-kpi-value {
	color: var(--maktab-text);
}
[data-theme="dark"] .mh-alert-chip {
	background: transparent;
	color: #E8B0A0;
	border-color: #6B3A30;
}
[data-theme="dark"] .mh-alert-chip:hover {
	background: rgba(58, 37, 32, 0.4);
	color: #E8B0A0;
}
[data-theme="dark"] .mh-alert-chip.mh-chip-amber {
	background: transparent;
	color: #E0B06A;
	border-color: #6B5230;
}
[data-theme="dark"] .mh-alert-chip.mh-chip-amber:hover {
	background: rgba(58, 48, 31, 0.4);
	color: #E0B06A;
}
[data-theme="dark"] .mh-alert-chip.mh-chip-info {
	background: transparent;
	color: #9AC4E0;
	border-color: #2F4A66;
}
[data-theme="dark"] .mh-alert-chip.mh-chip-info:hover {
	background: rgba(26, 42, 58, 0.45);
	color: #9AC4E0;
}
[data-theme="dark"] .mh-quick-btn {
	background: var(--maktab-cream);
	color: var(--maktab-text);
	border: 1px solid var(--maktab-cream);
}
[data-theme="dark"] .mh-quick-btn:hover {
	background: #3D3428;
	border-color: #3D3428;
	color: var(--maktab-text);
}
[data-theme="dark"] .mh-activity-dot {
	background: var(--maktab-brown);
}
[data-theme="dark"] .mh-greeting {
	color: var(--maktab-text);
}
[data-theme="dark"] .mh-skeleton {
	background: linear-gradient(
		90deg,
		var(--maktab-border) 25%,
		var(--maktab-sand) 50%,
		var(--maktab-border) 75%
	);
	background-size: 200% 100%;
	animation: mh-shimmer 1.4s ease infinite;
}

/* ── RTL overrides ── */
[dir="rtl"] .mh-alert-strip {
	padding-left: 16px;
	padding-right: 16px;
}
[dir="rtl"] .mh-quick-actions {
	padding-left: 16px;
	padding-right: 16px;
}

/* Desktop padding */
@media (min-width: 769px) {
	.maktab-home-v2 {
		padding: 20px 24px 40px;
		max-width: 900px;
	}
	.mh-kpi-grid {
		gap: 12px;
	}
	.mh-alert-strip {
		margin: 0 0 20px;
		padding-left: 0;
		padding-right: 0;
	}
	.mh-quick-actions {
		margin: 0 0 20px;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   P3.3 — Toast redesign: no shadow, 1px border, 4px colored left stripe
   Frappe's HTML: <div class="alert desk-alert green" role="alert">
                    <div class="alert-message-container">
                      <span class="indicator-pill green">…</span>
                      <div class="alert-message">…text…</div>
                    </div>
                  </div>
   Colors by indicator class:
     .green          → forest green  (#2D5234 light / #8FB88F dark)
     .red/.orange/.yellow → terracotta (#8C3E28 light / #D48A74 dark)
     .blue/.info     → navy          (#1F4A6B light / #9AC4E0 dark)
   Desktop: max-width 360px (Frappe positions bottom-right by default).
   Mobile:  full-width minus 32px; container lifted above the 72px bottom nav.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Light mode base ──
   Toasts are overlay surfaces (per shadow-policy option-c), so they get
   --shadow-md for soft lift off the page. Border-left stripe color is
   set per status class below. */
.desk-alert {
	background: var(--maktab-cream) !important;
	box-shadow: var(--shadow-md) !important;
	border: 1px solid var(--maktab-border) !important;
	border-left: 4px solid #2D5234 !important; /* default = green */
	border-radius: var(--r-md) !important;
	/* FB-51/64: flex container so close button is vertically centred with message */
	padding: 6px 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	color: var(--maktab-text) !important;
	max-width: 360px;
}

/* ── Inner container / message: strip any default margin/padding ── */
.desk-alert .alert-message-container {
	flex: 1 1 auto;
	min-width: 0; /* allow text to shrink and wrap */
	margin: 0 !important;
	padding: 0 !important;
}
.desk-alert .alert-title-container {
	display: flex;
	align-items: center;
	gap: 8px;
}
.desk-alert .alert-message {
	margin: 0 !important;
	padding: 0 !important;
}

/* ── FB-51/64: close button — static so flexbox centres it vertically ──
   Frappe default: position:absolute top-right. On multi-line toasts this
   creates apparent "more space below" because the close floats to the top
   corner while the message runs down. Static + flex-shrink:0 keeps it
   vertically centred at the trailing edge of the flex row. */
.desk-alert .close {
	position: static !important;
	flex-shrink: 0;
	margin: 0 !important;
	align-self: center;
}
html[dir="rtl"] .desk-alert .close,
[dir="rtl"] .desk-alert .close {
	margin-left: 0;
	margin-right: 0;
}

/* ── Light mode — stripe color per indicator class ── */
.desk-alert.green  { border-left-color: #2D5234 !important; }
.desk-alert.red,
.desk-alert.orange,
.desk-alert.yellow { border-left-color: #8C3E28 !important; }
.desk-alert.blue,
.desk-alert.info   { border-left-color: #1F4A6B !important; }

/* ── Light mode — indicator-pill dot matches the stripe ── */
.desk-alert.green .indicator-pill,
.desk-alert.green .indicator-pill::before {
	background: #2D5234 !important;
}
.desk-alert.red .indicator-pill,
.desk-alert.red .indicator-pill::before,
.desk-alert.orange .indicator-pill,
.desk-alert.orange .indicator-pill::before,
.desk-alert.yellow .indicator-pill,
.desk-alert.yellow .indicator-pill::before {
	background: #8C3E28 !important;
}
.desk-alert.blue .indicator-pill,
.desk-alert.blue .indicator-pill::before,
.desk-alert.info .indicator-pill,
.desk-alert.info .indicator-pill::before {
	background: #1F4A6B !important;
}

/* ── Light mode — message text ── */
.desk-alert .alert-message {
	color: var(--maktab-text) !important;
}

/* ── Dark mode ── */
[data-theme="dark"] .desk-alert {
	background: var(--maktab-cream) !important; /* dark-token: #24201A */
	border-color: var(--maktab-border) !important;
	border-left-color: #8FB88F !important; /* default = green */
}
[data-theme="dark"] .desk-alert.green  { border-left-color: #8FB88F !important; }
[data-theme="dark"] .desk-alert.red,
[data-theme="dark"] .desk-alert.orange,
[data-theme="dark"] .desk-alert.yellow { border-left-color: #D48A74 !important; }
[data-theme="dark"] .desk-alert.blue,
[data-theme="dark"] .desk-alert.info   { border-left-color: #9AC4E0 !important; }

[data-theme="dark"] .desk-alert.green .indicator-pill,
[data-theme="dark"] .desk-alert.green .indicator-pill::before {
	background: #8FB88F !important;
}
[data-theme="dark"] .desk-alert.red .indicator-pill,
[data-theme="dark"] .desk-alert.red .indicator-pill::before,
[data-theme="dark"] .desk-alert.orange .indicator-pill,
[data-theme="dark"] .desk-alert.orange .indicator-pill::before,
[data-theme="dark"] .desk-alert.yellow .indicator-pill,
[data-theme="dark"] .desk-alert.yellow .indicator-pill::before {
	background: #D48A74 !important;
}
[data-theme="dark"] .desk-alert.blue .indicator-pill,
[data-theme="dark"] .desk-alert.blue .indicator-pill::before,
[data-theme="dark"] .desk-alert.info .indicator-pill,
[data-theme="dark"] .desk-alert.info .indicator-pill::before {
	background: #9AC4E0 !important;
}

[data-theme="dark"] .desk-alert .alert-message {
	color: var(--maktab-text) !important;
}

/* ── FB-79 mobile toast — iOS-style slide-down from top ──────────────────────
   FB-79: toasts slide down from above viewport on mobile, matching iOS
   notification behaviour. FB-77 (toast above bottom bar) is superseded —
   toasts are now at the TOP, clear of the bottom nav entirely.

   Container layout:
   - Fixed at top, centered, 16px each side, flex-column so multiple toasts
     stack downward with a gap.
   - top uses safe-area-inset-top so the first toast clears the notch/status
     bar on notched iPhones.
   - bottom/right/left from the global #alert-container rule are overridden.

   Toast appearance:
   - Rounded pill corners (14px).
   - backdrop-filter blur (20px) with translucent background — looks like an
     iOS live-activity / notification tile.
   - border-left stripe kept for colour coding but radius matches the pill.

   Animation:
   - On entry: @keyframes maktab-toast-in slides from translateY(-120%)
     to translateY(0) with an iOS cubic-bezier ease (spring feel).
   - On swipe-up dismiss: JS in maktab.js adds .maktab-dismissing which plays
     maktab-toast-out (slides back up + fades).
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes maktab-toast-in {
	from { transform: translateY(-120%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

@keyframes maktab-toast-out {
	from { transform: translateY(0);     opacity: 1; }
	to   { transform: translateY(-120%); opacity: 0; }
}

@media (max-width: 768px) {
	/* FB-79: move container to the top of the viewport */
	#alert-container {
		/* Override global bottom positioning */
		bottom: auto !important;
		/* Sit just below the notch / status bar */
		top: env(safe-area-inset-top, 0px) !important;
		/* Centered, 16px inset each side */
		left: 16px !important;
		right: 16px !important;
		/* Stack multiple toasts downward */
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		align-items: center !important;
		/* Transparent wrapper — individual toasts have their own bg */
		background: transparent !important;
		pointer-events: none !important;
	}

	/* FB-79: iOS-style pill toast */
	#alert-container .desk-alert {
		pointer-events: auto !important;
		/* Full container width (container already inset 16px each side) */
		max-width: 100%;
		width: 100%;
		/* Pill corners */
		border-radius: var(--r-lg) !important;
		/* Generous vertical padding */
		padding: 12px 16px !important;
		/* Slide-in animation */
		animation: maktab-toast-in 0.35s cubic-bezier(0.32, 0.72, 0, 1) both;
		/* Position: the container is already centered; keep translateX(-50%) in the
		   JS dismiss path so the out-animation anchors correctly. We don't use
		   position:absolute here — the flex column handles stacking. */
		/* Translucent iOS-style backdrop */
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
	}

	/* Light mode: translucent cream with slight opacity */
	#alert-container .desk-alert {
		background: rgba(245, 238, 220, 0.88) !important; /* --maktab-cream at 88% */
	}

	/* Dark mode: translucent dark with slight opacity */
	[data-theme="dark"] #alert-container .desk-alert {
		background: rgba(36, 32, 26, 0.88) !important; /* dark cream token at 88% */
	}

	/* Dismiss animation class added by maktab.js swipe-up handler */
	#alert-container .desk-alert.maktab-dismissing {
		animation: maktab-toast-out 0.25s cubic-bezier(0.32, 0.72, 0, 1) both !important;
	}
}

/* ════════════════════════════════════════════════════════
   Property View — /app/property/<name>  (P4.1 skeleton)
   ════════════════════════════════════════════════════════ */

/* ── Outer shell ── */
.pv-shell {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 0 32px;
}

/* ── Header meta row (subtitle + type badge + edit button) ── */
.pv-header-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 20px 10px;
	border-bottom: 1px solid var(--maktab-border);
	min-height: 36px;
}

.pv-subtitle {
	font-size: 13px;
	color: var(--maktab-text-muted);
	flex: 1 1 auto;
}

.pv-type-badge {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--r-lg);
	letter-spacing: 0.02em;
	flex-shrink: 0;
}
.pv-badge-thilth {
	background: rgba(107, 79, 54, 0.12);
	color: var(--maktab-brown);
	border: 1px solid rgba(107, 79, 54, 0.2);
}
.pv-badge-khums {
	background: rgba(94, 125, 94, 0.12);
	color: var(--maktab-green);
	border: 1px solid rgba(94, 125, 94, 0.25);
}
.pv-badge-personal {
	background: rgba(143, 184, 212, 0.15);
	color: var(--maktab-link);
	border: 1px solid rgba(143, 184, 212, 0.3);
}

.pv-edit-btn {
	font-size: 12px !important;
	padding: 4px 12px !important;
	flex-shrink: 0;
	color: var(--maktab-brown) !important;
	border-color: var(--maktab-sand) !important;
	background: transparent !important;
	text-decoration: none !important;
}
.pv-edit-btn:hover {
	background: rgba(107, 79, 54, 0.08) !important;
}

/* FB-67 tab strip — Theme 3 */
/* ── Tab strip ── */
.pv-tab-strip {
	display: flex;
	flex-direction: row;
	gap: 0;
	border-bottom: 2px solid var(--maktab-border);
	padding: 0 20px;
	background: var(--maktab-beige);
	overflow-x: auto;
	/* FB-67: overflow-x:auto coerces overflow-y to auto (CSS spec), creating a
	   2px internal vertical scroll (scrollHeight 43 > clientHeight 41, caused by
	   the tabs' margin-bottom:-2px). Fix: explicit overflow-y:hidden stops it. */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* IE/Edge */
	/* Keep tabs visible while scrolling the tab body. Page-head is hidden,
	   so the tab strip sticks at the very top of the viewport. */
	position: sticky;
	top: 0;
	z-index: 10;
}
.pv-tab-strip::-webkit-scrollbar { display: none; } /* WebKit */

.pv-tab {
	flex-shrink: 0;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	color: var(--maktab-text-muted);
	background: none;
	border: none;
	/* FB-67: Replaced border-bottom + margin-bottom:-2px (which caused the 2px overflow)
	   with inset box-shadow for the active underline. Inset shadows live inside the
	   border-box and are never counted in scrollHeight — no overflow possible. */
	box-shadow: none;
	margin-bottom: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, box-shadow 0.15s;
	-webkit-tap-highlight-color: transparent;
	position: relative;
}
.pv-tab:hover {
	color: var(--maktab-brown);
}
.pv-tab:focus-visible {
	outline: 2px solid var(--maktab-amber);
	outline-offset: -2px;
}
.pv-tab.pv-tab-active {
	color: var(--maktab-brown);
	font-weight: 600;
	/* 3px inset bottom shadow = active-tab underline; overlaps the strip's 2px border */
	box-shadow: inset 0 -3px 0 var(--maktab-brown);
}
/* end FB-67 */

/* ── Tab body ── */
.pv-tab-body {
	padding: 20px;
	min-height: 200px;
}

/* ── Placeholder content (P4.1 only) ── */
.pv-placeholder {
	padding: 40px 0;
	text-align: center;
	color: var(--maktab-text-muted);
}
.pv-placeholder h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--maktab-text);
	margin-bottom: 8px;
}
.pv-placeholder p {
	font-size: 13px;
	margin: 0;
}

/* ── Access denied / error states ── */
.pv-access-denied {
	padding: 60px 20px;
	text-align: center;
	color: var(--maktab-text-muted);
	font-size: 14px;
}
.pv-back-link {
	display: inline-block;
	margin-top: 12px;
	color: var(--maktab-link);
	text-decoration: none;
	font-size: 13px;
}
.pv-back-link:hover { text-decoration: underline; }

/* ── Dark mode ── */
[data-theme="dark"] .pv-tab-strip {
	background: var(--maktab-beige);
	border-bottom-color: var(--maktab-border);
}
[data-theme="dark"] .pv-tab {
	color: var(--maktab-text-muted);
}
[data-theme="dark"] .pv-tab:hover {
	color: var(--maktab-text);
}
[data-theme="dark"] .pv-tab.pv-tab-active {
	color: var(--maktab-brown); /* #C4A882 tan in dark mode */
	box-shadow: inset 0 -3px 0 var(--maktab-brown);
}
[data-theme="dark"] .pv-header-row {
	border-bottom-color: var(--maktab-border);
}
[data-theme="dark"] .pv-badge-thilth {
	background: rgba(196, 168, 130, 0.12);
	color: var(--maktab-brown);
	border-color: rgba(196, 168, 130, 0.2);
}
[data-theme="dark"] .pv-badge-khums {
	background: rgba(107, 143, 107, 0.15);
	color: var(--maktab-leaf);
	border-color: rgba(107, 143, 107, 0.25);
}
[data-theme="dark"] .pv-badge-personal {
	background: rgba(154, 196, 224, 0.12);
	color: var(--maktab-link);
	border-color: rgba(154, 196, 224, 0.25);
}
[data-theme="dark"] .pv-edit-btn {
	color: var(--maktab-brown) !important;
	border-color: var(--maktab-border) !important;
}
[data-theme="dark"] .pv-placeholder h3 {
	color: var(--maktab-text);
}

/* ── RTL ── */
[dir="rtl"] .pv-header-row {
	flex-direction: row-reverse;
}
[dir="rtl"] .pv-tab-strip {
	padding: 0 20px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
	.pv-header-row {
		padding: 6px 12px 10px;
	}
	.pv-tab-strip {
		padding: 0 8px;
	}
	.pv-tab {
		padding: 10px 10px;
		font-size: 12px;
	}
	.pv-tab-body {
		padding: 12px;
	}
	.pv-shell {
		padding: 0 0 80px; /* extra space above bottom-nav */
	}
}

/* ═══════════════════════════════════════════════════════════════
   P4.2 — Units & Leases tab components
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared toolbar: filter pills + new button ── */
.pv-units-toolbar,
.pv-leases-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

/* ── Filter pills ── */
.pv-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 auto;
}
.pv-filter-pill {
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	border-radius: var(--r-lg);
	border: 1px solid var(--maktab-border);
	background: transparent;
	color: var(--maktab-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
	-webkit-tap-highlight-color: transparent;
}
.pv-filter-pill:hover {
	color: var(--maktab-brown);
	border-color: var(--maktab-brown);
}
.pv-filter-pill.active {
	background: var(--maktab-brown);
	color: #fff;
	border-color: var(--maktab-brown);
}

/* ── Empty state ── */
.pv-empty-state {
	padding: 48px 20px;
	text-align: center;
	color: var(--maktab-text-muted);
}
.pv-empty-icon {
	font-size: 28px;
	margin-bottom: 10px;
	opacity: 0.5;
}
.pv-empty-msg {
	font-size: 14px;
	margin-bottom: 14px;
}

/* ── Unit status badges ── */
.pv-unit-status-occupied {
	color: var(--maktab-green);
	font-weight: 600;
}
.pv-unit-status-vacant {
	color: var(--maktab-text-muted);
}

/* ── Lease status badges (dynamic class names) ── */
.pv-lease-status-active {
	color: var(--maktab-green);
	font-weight: 600;
}
.pv-lease-status-pending-renewal {
	color: var(--maktab-amber);
	font-weight: 600;
}
.pv-lease-status-expired {
	color: var(--maktab-text-muted);
}
.pv-lease-status-terminated {
	color: var(--maktab-red, #c0392b);
}

/* ── Lease period + arrow ── */
.pv-lease-period {
	font-size: 12px;
	white-space: nowrap;
}
.pv-lease-arrow {
	color: var(--maktab-text-muted);
	margin: 0 2px;
}

/* ── Lease number chip ── */
.pv-lease-num {
	font-size: 11px;
	font-family: var(--font-stack-mono, monospace);
	color: var(--maktab-text-muted);
	letter-spacing: 0.02em;
}

/* ── Expiry badges ── */
.pv-expiry-badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: var(--r-lg);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.pv-expiry-red {
	background: rgba(192, 57, 43, 0.10);
	color: var(--maktab-red, #c0392b);
	border: 1px solid rgba(192, 57, 43, 0.18);
}
.pv-expiry-amber {
	background: rgba(213, 152, 29, 0.12);
	color: var(--maktab-amber);
	border: 1px solid rgba(213, 152, 29, 0.20);
}
.pv-expiry-amber-light {
	background: rgba(213, 152, 29, 0.07);
}
.pv-expiry-green {
	background: rgba(94, 125, 94, 0.10);
	color: var(--maktab-green);
	border: 1px solid rgba(94, 125, 94, 0.18);
}

/* ── Dark mode ── */
[data-theme="dark"] .pv-filter-pill {
	border-color: var(--maktab-border);
	color: var(--maktab-text-muted);
}
[data-theme="dark"] .pv-filter-pill:hover {
	color: var(--maktab-brown);
	border-color: var(--maktab-brown);
}
[data-theme="dark"] .pv-filter-pill.active {
	background: var(--maktab-brown);
	color: #fff;
	border-color: var(--maktab-brown);
}
[data-theme="dark"] .pv-expiry-red {
	background: rgba(192, 57, 43, 0.15);
}
[data-theme="dark"] .pv-expiry-amber {
	background: rgba(213, 152, 29, 0.15);
}
[data-theme="dark"] .pv-expiry-green {
	background: rgba(94, 125, 94, 0.15);
}
[data-theme="dark"] .pv-lease-status-terminated {
	color: #e57368;
}

/* ── RTL ── */
[dir="rtl"] .pv-units-toolbar,
[dir="rtl"] .pv-leases-toolbar {
	flex-direction: row-reverse;
}
[dir="rtl"] .pv-lease-arrow {
	display: inline-block;
	transform: scaleX(-1);
}

/* ── Mobile ── */
@media (max-width: 768px) {
	.pv-units-toolbar,
	.pv-leases-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.pv-filter-pills {
		justify-content: flex-start;
	}
	.pv-lease-period {
		white-space: normal;
	}
}

/* ═══════════════════════════════════════════════════════════════
   P4.3 — Tenants / Maintenance / Financials tabs
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared toolbar (mirrors pv-units-toolbar) ── */
.pv-tenants-toolbar,
.pv-maintenance-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0 10px;
	flex-wrap: wrap;
}

/* ── Tenant status chip ── */
.pv-tenant-status-active {
	color: var(--maktab-green, var(--success));
	font-weight: 600;
}

/* ── Maintenance description cell: allow wrapping on narrow screens ── */
.pv-maint-desc {
	max-width: 260px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Maintenance status chips ── */
.pv-maint-status-open        { color: var(--maktab-amber); font-weight: 600; }
.pv-maint-status-in-progress { color: #5578a0; font-weight: 600; }
.pv-maint-status-completed   { color: var(--maktab-green, var(--success)); font-weight: 600; }
.pv-maint-status-cancelled   { color: var(--maktab-text-muted); text-decoration: line-through; }

/* ── Priority chips ── */
.pv-priority-urgent { color: #c0392b; font-weight: 700; }
.pv-priority-high   { color: #c0392b; font-weight: 600; }
.pv-priority-medium { color: var(--maktab-amber); font-weight: 600; }
.pv-priority-low    { color: var(--maktab-text-muted); }

/* ── Financials tab ── */
.pv-fin-shell {
	padding-top: 4px;
}
.pv-fin-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0 12px;
	flex-wrap: wrap;
}
/* FB-95: keep "Year" label inline with the select on every viewport */
.pv-fin-year-group {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-shrink: 0;
}
.pv-fin-year-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--maktab-text);
	white-space: nowrap;
	flex-shrink: 0;
	/* FB-95/FB-136: select renders ~4px below label due to native form-control
	   baseline offset; nudge label down to match its visual center. */
	margin-top: 4px;
}
.pv-fin-year-select {
	padding: 5px 10px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	font-size: 13px;
	background: var(--maktab-surface, #fff);
	color: var(--maktab-text);
	cursor: pointer;
	flex-shrink: 0;
}
.pv-fin-year-select:focus {
	outline: 2px solid var(--maktab-amber);
	outline-offset: 2px;
}

/* FB-146: New Expense button — proper text+icon button, not a 30×30 icon-only.
   Replaces the old .lv-icon-btn class which clipped the label. */
.pv-new-expense-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	height: 30px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	background: transparent;
	color: var(--maktab-text);
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
}
.pv-new-expense-btn:hover {
	background: rgba(212, 197, 160, 0.10);
	border-color: var(--maktab-sand);
}
.pv-new-expense-btn:focus-visible {
	outline: 2px solid var(--maktab-amber);
	outline-offset: 2px;
}
.pv-new-expense-plus {
	font-size: 15px;
	line-height: 1;
	color: var(--maktab-amber, var(--maktab-text));
}
[data-theme="dark"] .pv-new-expense-btn {
	border-color: var(--maktab-sand);
	color: var(--maktab-text);
}
[data-theme="dark"] .pv-new-expense-btn:hover {
	background: rgba(212, 197, 160, 0.08);
}

/* ── Property-view unified ledger (Round 5f / FB-114) ── */
.pv-ledger-section { margin-top: 32px; }
.pv-ledger-section .lv-section-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.pv-ledger-toolbar {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.pv-ledger-toolbar select {
	min-width: 140px;
	padding: 6px 10px;
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	background: var(--card-bg) !important;
	color: var(--maktab-text) !important;
	font-size: 13px;
}
/* FB-145: --maktab-surface fell through to #fff in dark mode causing
   bright white selects. Anchor to --card-bg and force dropdown options
   to inherit the dark surface (native <select> options are styled by
   the OS/browser; we override per-theme). */
[data-theme="dark"] .pv-ledger-type,
[data-theme="dark"] .pv-ledger-category,
[data-theme="dark"] .pv-ledger-type option,
[data-theme="dark"] .pv-ledger-category option {
	background-color: var(--card-bg) !important;
	color: var(--maktab-text) !important;
}
.pv-ledger-table { width: 100%; border-collapse: collapse; }
.pv-ledger-table th {
	text-align: start;
	padding: 8px 10px;
	font-weight: 600;
	color: var(--maktab-text-muted, var(--maktab-text));
	border-bottom: 1px solid var(--maktab-border);
}
.pv-ledger-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--maktab-border);
	color: var(--maktab-text);
}
.pv-ledger-table .pv-ledger-amt {
	text-align: end;
	font-variant-numeric: tabular-nums;
}
.pv-ledger-row:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .pv-ledger-row:hover { background: rgba(255,255,255,0.04); }
.pv-ledger-amt.lv-positive { color: #4f9d6e; }
.pv-ledger-amt.lv-negative { color: #c87a6c; }
.pv-fin-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.pv-fin-summary-card .lv-row {
	align-items: center;
}
/* Inline collection-rate bar */
.pv-fin-rate-row .lv-value {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pv-fin-rate-num {
	font-weight: 700;
	min-width: 44px;
	text-align: end;
}
.pv-fin-bar-track {
	flex: 1 1 80px;
	max-width: 120px;
	height: 6px;
	border-radius: var(--r-sm);
	background: rgba(139,125,107,0.12);
	overflow: hidden;
}
.pv-fin-bar-fill {
	display: block;
	height: 100%;
	border-radius: var(--r-sm);
	transition: width 0.4s ease;
}
.pv-fin-bar-green { background: var(--maktab-green, var(--success)); }
.pv-fin-bar-amber { background: var(--maktab-amber, #d5981d); }
.pv-fin-bar-red   { background: var(--maktab-red, #c0392b); }

/* Net row highlight */
.pv-fin-net-row { border-top: 1px solid var(--maktab-border); padding-top: 8px; margin-top: 4px; }
.pv-fin-net-positive { color: var(--maktab-green, var(--success)); font-weight: 700; }
.pv-fin-net-negative { color: var(--maktab-red, #c0392b); font-weight: 700; }

/* ── Monthly bar chart ── */
.pv-fin-chart-card { margin-top: 0; }
.pv-fin-bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 120px;
	padding-top: 8px;
}
.pv-fin-month-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
}
.pv-fin-month-bar-wrap {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.pv-fin-month-bar {
	width: 100%;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	min-height: 2px;
	transition: height 0.4s ease;
}
.pv-fin-month-bar-filled {
	background: var(--maktab-brown, #5c4033);
	opacity: 0.75;
}
.pv-fin-month-bar-empty {
	background: rgba(139,125,107,0.10);
}
.pv-fin-month-label {
	font-size: 10px;
	color: var(--maktab-text-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ── Dark mode ── */
[data-theme="dark"] .pv-fin-year-select {
	background: #2A2418;
	border-color: var(--maktab-border);
	color: var(--maktab-text);
}
[data-theme="dark"] .pv-maint-status-in-progress { color: #7a9fc0; }
[data-theme="dark"] .pv-fin-bar-track {
	background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pv-fin-month-bar-empty {
	background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .pv-fin-month-bar-filled {
	background: var(--maktab-straw, var(--straw));
	opacity: 0.65;
}

/* ── RTL ── */
[dir="rtl"] .pv-tenants-toolbar,
[dir="rtl"] .pv-maintenance-toolbar,
[dir="rtl"] .pv-fin-toolbar {
	flex-direction: row-reverse;
}

/* ── Mobile ── */
@media (max-width: 768px) {
	.pv-tenants-toolbar,
	.pv-maintenance-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.pv-maint-desc {
		max-width: 160px;
	}
	.pv-fin-bars {
		height: 90px;
	}
	.pv-fin-month-label {
		font-size: 9px;
	}
}

/* ══════════════════════════════════════════════════════════════
   Household View  (P5.1) — .hv-* classes
   Reuses .pv-*, .lv-*, .maktab-* from property-view.
   ══════════════════════════════════════════════════════════════ */

/* ── Header meta: same structure as property-view ── */
.hv-header-meta {
	padding: 0 var(--maktab-page-x, 20px) 6px;
}

/* ── Quick-stat numbers in overview sidebar ── */
.hv-stat-num {
	font-weight: 600;
	color: var(--maktab-text);
}

/* ── Staff status badges ── */
.hv-staff-status-active     { color: var(--maktab-green); font-weight: 600; }
.hv-staff-status-leave      { color: var(--maktab-amber, #c8933b); font-weight: 600; }
.hv-staff-status-terminated { color: var(--maktab-text-muted); }

/* ── Vehicle status badges ── */
.hv-veh-status-active  { color: var(--maktab-green); font-weight: 600; }
.hv-veh-status-maint   { color: var(--maktab-amber, #c8933b); font-weight: 600; }
.hv-veh-status-sold    { color: var(--maktab-text-muted); }

/* ── Days chip inside iqama cell ── */
.hv-days-chip {
	display: inline-block;
	margin-inline-start: 4px;
	font-size: 11px;
	padding: 1px 5px;
	border-radius: var(--r-md);
	vertical-align: middle;
}

/* ── Expense chart card ── */
.hv-exp-chart-card {
	margin-bottom: 0;
}

/* ── Toolbar flex — same pattern as pv toolbars ── */
.hv-staff-toolbar,
.hv-vehicles-toolbar,
.hv-expenses-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px var(--maktab-page-x, 20px) 8px;
	flex-wrap: wrap;
}

/* ── Dark theme ── */
[data-theme="dark"] .hv-stat-num    { color: var(--maktab-text); }

/* ── RTL ── */
[dir="rtl"] .hv-staff-toolbar,
[dir="rtl"] .hv-vehicles-toolbar,
[dir="rtl"] .hv-expenses-toolbar {
	flex-direction: row-reverse;
}

/* ── Mobile ── */
@media (max-width: 768px) {
	.hv-staff-toolbar,
	.hv-vehicles-toolbar,
	.hv-expenses-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
}


/* ════════════════════════════════════════════════════════════════
   MAJLIS VIEW — /app/majlis-view
   P6.1: single-instance Majlis dashboard
   ════════════════════════════════════════════════════════════════ */

/* ── Summary stat cards ── */
.mv-summary-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.mv-stat-card {
	flex: 1 1 120px;
	min-width: 100px;
	background: var(--maktab-card-bg);
	border: 1px solid var(--maktab-border);
	border-radius: var(--r-md);
	padding: 14px 16px;
	text-align: center;
}

.mv-stat-value {
	font-size: 22px;
	font-weight: 600;
	color: var(--maktab-text);
	line-height: 1.2;
}

.mv-stat-label {
	font-size: 11px;
	color: var(--maktab-text-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Accent colours for specific stat cards */
.mv-stat-upcoming .mv-stat-value  { color: var(--maktab-amber); }
.mv-stat-completed .mv-stat-value { color: var(--maktab-green); }
.mv-stat-expense .mv-stat-value   { font-size: 16px; }

/* ── Toolbars ── */
.mv-events-toolbar,
.mv-expenses-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

/* ── Status badges ── */
.mv-status-scheduled {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--r-sm);
	font-size: 11px;
	background: rgba(139,105,20,0.12);
	color: var(--sand-deep);
	font-weight: 500;
}
.mv-status-completed {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--r-sm);
	font-size: 11px;
	background: rgba(107,143,113,0.15);
	color: #3D7A54;
	font-weight: 500;
}
.mv-status-cancelled {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--r-sm);
	font-size: 11px;
	background: rgba(139,58,37,0.10);
	color: var(--overdue);
	font-weight: 500;
}

/* ── Placeholder note under empty state ── */
.mv-placeholder-note {
	font-size: 13px;
	color: var(--maktab-text-muted);
	max-width: 480px;
	margin: 10px auto 0;
	text-align: center;
	line-height: 1.5;
}

/* ── Event link ── */
.mv-event-link {
	color: var(--maktab-amber);
	text-decoration: none;
}
.mv-event-link:hover { text-decoration: underline; }

/* ── Date-cell nowrap (lv-table defaults to white-space: normal — FB-252) ── */
.mv-nowrap { white-space: nowrap; }

/* ── Header meta area ── */
.mv-header-meta {
	margin-bottom: 4px;
}

/* ── Dark theme ── */
[data-theme="dark"] .mv-stat-card {
	background: var(--maktab-card-bg);
	border-color: var(--maktab-border);
}
[data-theme="dark"] .mv-stat-upcoming .mv-stat-value  { color: var(--maktab-amber-dark, #E0B06A); }
[data-theme="dark"] .mv-stat-completed .mv-stat-value { color: #A8D4A0; }
[data-theme="dark"] .mv-status-scheduled { background: rgba(224,176,106,0.15); color: #E0B06A; }
[data-theme="dark"] .mv-status-completed { background: rgba(168,212,160,0.15); color: #A8D4A0; }
[data-theme="dark"] .mv-status-cancelled { background: rgba(212,138,116,0.15); color: #D48A74; }

/* ── RTL ── */
[dir="rtl"] .mv-events-toolbar,
[dir="rtl"] .mv-expenses-toolbar {
	flex-direction: row-reverse;
}

/* ── Mobile ── */
@media (max-width: 768px) {
	.mv-events-toolbar,
	.mv-expenses-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.mv-summary-row {
		gap: 8px;
	}
	.mv-stat-card {
		padding: 10px 12px;
	}
	.mv-stat-value {
		font-size: 18px;
	}
}

/* ── Overview tabs (Sprint 3.6) ─────────────────────────────────────────────
   Class prefix: mo- (maktab overview).
   Layout:
     [ KPI row: 4 equal tiles, full width ]
     [ Attention, ~2/3 ] [ Recent, ~1/3 ]
   Skeleton: grey pulse tiles until data arrives.
─────────────────────────────────────────────────────────────────────────── */

.pv-overview-shell {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pv-overview-content {
	flex: 1;
}

/* ── KPI row ── */
.mo-overview-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 4px 0 8px;
}

.mo-kpi-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.mo-kpi-tile {
	background: var(--maktab-card-bg, #fff);
	border: 1px solid var(--maktab-border, #e5e7eb);
	border-radius: var(--r-md);
	padding: 16px 18px 14px;
	min-height: 88px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	transition: border-color 0.15s;
}

.mo-kpi-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--maktab-text, #111827);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.mo-kpi-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--maktab-text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mo-kpi-sub {
	font-size: 11px;
	color: var(--maktab-text-muted, #6b7280);
	margin-top: 2px;
}

/* Severity modifiers for KPI tiles */
.mo-kpi-tile.severity-alert {
	border-color: var(--maktab-red, #dc2626);
	background: color-mix(in srgb, var(--maktab-red, #dc2626) 6%, var(--maktab-card-bg, #fff));
}
.mo-kpi-tile.severity-alert .mo-kpi-value {
	color: var(--maktab-red, #dc2626);
}

.mo-kpi-tile.severity-warn {
	border-color: var(--maktab-amber, #d97706);
	background: color-mix(in srgb, var(--maktab-amber, #d97706) 6%, var(--maktab-card-bg, #fff));
}
.mo-kpi-tile.severity-warn .mo-kpi-value {
	color: var(--maktab-amber, #d97706);
}

.mo-kpi-tile.severity-ok {
	border-color: var(--maktab-green, #16a34a);
}
.mo-kpi-tile.severity-ok .mo-kpi-value {
	color: var(--maktab-green, #16a34a);
}

/* ── Sections row ── */
.mo-sections-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
	align-items: start;
}

.mo-sections-left,
.mo-sections-right {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mo-section {
	background: var(--maktab-card-bg, #fff);
	border: 1px solid var(--maktab-border, #e5e7eb);
	border-radius: var(--r-md);
	padding: 14px 16px;
}

.mo-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.mo-section-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--maktab-text, #111827);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mo-see-all {
	font-size: 12px;
	color: var(--maktab-blue, #2563eb);
	text-decoration: none;
	white-space: nowrap;
}
.mo-see-all:hover {
	text-decoration: underline;
}

.mo-item-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mo-item {
	font-size: 13px;
	padding: 6px 10px 6px 12px;
	border-radius: var(--r-sm);
	border-left: 3px solid transparent;
	line-height: 1.4;
}

.mo-item-link {
	color: var(--maktab-text, #111827);
	text-decoration: none;
	display: block;
}
.mo-item-link:hover {
	text-decoration: underline;
	color: var(--maktab-blue, #2563eb);
}

/* Item severity left-border colors */
.mo-item-alert {
	border-left-color: var(--maktab-red, #dc2626);
	background: color-mix(in srgb, var(--maktab-red, #dc2626) 5%, transparent);
}
.mo-item-warn {
	border-left-color: var(--maktab-amber, #d97706);
	background: color-mix(in srgb, var(--maktab-amber, #d97706) 5%, transparent);
}
.mo-item-ok {
	border-left-color: var(--maktab-green, #16a34a);
}
.mo-item-info,
.mo-item-neutral {
	border-left-color: var(--maktab-border, #e5e7eb);
	background: transparent;
}

.mo-section-empty {
	font-size: 12px;
	color: var(--maktab-text-muted, #6b7280);
	padding: 4px 0;
}

.mo-section-all-clear .mo-section-title {
	color: var(--maktab-green, #16a34a);
}

.mo-load-error {
	font-size: 13px;
	color: var(--maktab-text-muted, #6b7280);
	padding: 16px 0;
	text-align: center;
}

/* ── Skeleton shimmer ── */
.mo-skeleton {
	pointer-events: none;
}

.mo-skeleton-line {
	border-radius: var(--r-sm);
	background: linear-gradient(
		90deg,
		var(--maktab-border, #e5e7eb) 25%,
		color-mix(in srgb, var(--maktab-border, #e5e7eb) 60%, var(--maktab-card-bg, #fff)) 50%,
		var(--maktab-border, #e5e7eb) 75%
	);
	background-size: 200% 100%;
	animation: mo-shimmer 1.4s infinite;
}

@keyframes mo-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.mo-skeleton-val  { width: 60%;  height: 22px; margin-bottom: 6px; }
.mo-skeleton-lbl  { width: 40%;  height: 11px; }
.mo-skeleton-title { width: 50%; height: 12px; margin-bottom: 10px; }
.mo-skeleton-item  { width: 90%; height: 10px; margin-bottom: 5px; }

/* Dark mode overrides */
[data-theme="dark"] .mo-kpi-tile {
	background: var(--maktab-card-bg);
	border-color: var(--maktab-border);
}
[data-theme="dark"] .mo-kpi-value { color: var(--maktab-text, #f3f4f6); }
[data-theme="dark"] .mo-section   { background: var(--maktab-card-bg); border-color: var(--maktab-border); }
[data-theme="dark"] .mo-item-link { color: var(--maktab-text, #f3f4f6); }
[data-theme="dark"] .mo-kpi-tile.severity-alert { background: rgba(220,38,38,0.12); }
[data-theme="dark"] .mo-kpi-tile.severity-warn  { background: rgba(217,119,6,0.12); }
[data-theme="dark"] .mo-item-alert { background: rgba(220,38,38,0.08); }
[data-theme="dark"] .mo-item-warn  { background: rgba(217,119,6,0.08); }

/* RTL */
[dir="rtl"] .mo-item {
	border-left: none;
	border-right: 3px solid transparent;
}
[dir="rtl"] .mo-item-alert { border-right-color: var(--maktab-red, #dc2626); }
[dir="rtl"] .mo-item-warn  { border-right-color: var(--maktab-amber, #d97706); }
[dir="rtl"] .mo-item-ok    { border-right-color: var(--maktab-green, #16a34a); }
[dir="rtl"] .mo-item-info,
[dir="rtl"] .mo-item-neutral { border-right-color: var(--maktab-border, #e5e7eb); }

/* Mobile: stack to single column */
@media (max-width: 768px) {
	.mo-kpi-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.mo-sections-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.mo-kpi-row {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.mo-kpi-tile {
		padding: 12px 14px 10px;
		min-height: 72px;
	}
	.mo-kpi-value {
		font-size: 18px;
	}
}

/* ── FB-80 / FB-81: Date input overflow fix on mobile ──────────────────────
   Native <input type="date"> elements in admin-activity and entity-ledger
   filter bars overflow their containers on mobile. The per-page JS already
   sets flex-direction:column + width:100% at max-width:640px, but the
   base min-width:120px on those rules can still cause subtle overflow when
   the page padding is counted. Belt-and-suspenders: globally clamp all
   filter-row date inputs to the viewport on mobile. */
@media (max-width: 768px) {
	/* FB-80: admin-activity date inputs */
	.aa-filter-bar,
	.aa-filter-row {
		box-sizing: border-box;
		max-width: 100%;
	}
	.aa-filter-row input[type="date"] {
		box-sizing: border-box;
		max-width: 100%;
		min-width: 0 !important;
	}
	/* FB-81: entity-ledger date inputs */
	.el-filter-bar,
	.el-filter-row {
		box-sizing: border-box;
		max-width: 100%;
	}
	.el-filter-row input[type="date"] {
		box-sizing: border-box;
		max-width: 100%;
		min-width: 0 !important;
	}
	/* Shared: prevent any custom filter bar from overflowing viewport */
	.aa-container,
	.el-container {
		max-width: 100vw;
		overflow-x: hidden;
	}
}

/* FB-104 / FB-151 / FB-157 (Round 6i.4): at narrow viewports the entity-ledger
   AND admin-activity date pickers were getting cropped because the row didn't
   wrap and the inputs had a min-width. Force wrap + full-width inputs so each
   picker gets its own row. */
@media (max-width: 480px) {
	.el-filter-bar,
	.el-filter-row,
	.aa-filter-bar,
	.aa-filter-row {
		flex-wrap: wrap;
	}
	.el-filter-row .el-filter-start,
	.el-filter-row .el-filter-end,
	.aa-filter-row .aa-filter-start,
	.aa-filter-row .aa-filter-end {
		width: 100%;
		min-width: 0;
	}
}

/* FB-104 / FB-147 / FB-151 / FB-157 (Round 6i.4): iOS Safari renders date-input
   chrome larger than the input box on Ahmad's hardware (headless WebKit can't
   reproduce). Defensive fix covering three hypotheses, applied to BOTH
   entity-ledger (.el-filter-*) and admin-activity (.aa-filter-*):
     (1) iOS native date-picker UI overflowing input bounds → kill native
         appearance + supply our own calendar glyph.
     (2) Invisible borders in dark theme → force a 1px visible border.
     (3) Picker popup overflow from parent row → clip parent.
*/
@media (max-width: 768px) {
	.el-filter-bar .el-filter-row,
	.aa-filter-bar .aa-filter-row {
		/* Catch any iOS date-picker UI that bleeds outside the input */
		overflow: hidden;
	}
	.el-filter-bar input.el-filter-start,
	.el-filter-bar input.el-filter-end,
	.aa-filter-bar input.aa-filter-start,
	.aa-filter-bar input.aa-filter-end,
	/* FB-2026-00215 round 2: include the company <select> so it picks up the
	   exact same height/padding/font-size as the date inputs on mobile. Without
	   this, the select renders shorter than the date inputs (iOS native select
	   chrome adds variable padding). */
	.el-filter-bar select.el-filter-company,
	.aa-filter-bar select[class*="aa-filter"] {
		/* Disable iOS native date-picker chrome that can overflow input bounds. */
		-webkit-appearance: none !important;
		appearance: none !important;
		/* Box constraints */
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		height: 44px !important;
		min-height: 44px !important;
		/* FB-2026-00226: tight line-height (was 1.2) inside narrow content area
		   clipped descenders (g/j/p/q/y) in the company select on mobile.
		   Bumped to 1.4 and dropped padding to 8px so the line-box (14×1.4≈19.6)
		   fits comfortably inside the content area (44 − 2 border − 16 padding
		   = 26px). */
		line-height: 1.4 !important;
		/* Visible border so user can see input boundaries (was invisible in dark) */
		border: 1px solid var(--border-color, rgba(212,197,160,0.25)) !important;
		border-radius: var(--r-md) !important;
		padding: 8px 12px !important;
		background-color: var(--card-bg) !important;
		color: var(--maktab-text) !important;
		font-size: 14px !important;
		vertical-align: middle !important;
		margin: 0 !important;
		/* iOS date-picker icon doesn't show with appearance:none — add a small
		   calendar glyph as background so user knows it's a date input. */
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D4C5A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
		background-repeat: no-repeat !important;
		background-position: right 10px center !important;
		padding-right: 36px !important;
	}
	/* Replace the date-input calendar glyph with a chevron for the select */
	.el-filter-bar select.el-filter-company,
	.aa-filter-bar select[class*="aa-filter"] {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D4C5A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
	}
	/* RTL: icon goes on the left */
	[dir="rtl"] .el-filter-bar input.el-filter-start,
	[dir="rtl"] .el-filter-bar input.el-filter-end,
	[dir="rtl"] .aa-filter-bar input.aa-filter-start,
	[dir="rtl"] .aa-filter-bar input.aa-filter-end,
	/* FB-2026-00215 round 2: same RTL flip for the company select */
	[dir="rtl"] .el-filter-bar select.el-filter-company,
	[dir="rtl"] .aa-filter-bar select[class*="aa-filter"] {
		background-position: left 10px center !important;
		padding-right: 12px !important;
		padding-left: 36px !important;
	}
	/* iOS: when the date input is empty/unfocused, hide the placeholder
	   'date' UI which can render larger than the input on some iOS versions */
	.el-filter-bar input[type="date"]::-webkit-date-and-time-value,
	.aa-filter-bar input[type="date"]::-webkit-date-and-time-value {
		text-align: start;
	}
	.el-filter-bar input[type="date"]::-webkit-calendar-picker-indicator,
	.aa-filter-bar input[type="date"]::-webkit-calendar-picker-indicator {
		opacity: 0;
		position: absolute;
		right: 0;
		width: 36px;
		height: 100%;
		cursor: pointer;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Sidebar v3 — clean rewrite (phase 2, third attempt)
   Markup: <aside class="sidebar"> injected as a direct child of .body-sidebar
   by maktab.setup_sidebar(). All Frappe-native body-sidebar children are
   hidden — we own the sidebar surface end-to-end.
   Visual reference: design_handoff_maktab_redesign/handoff_notes/sidebar/
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hide Frappe's sidebar wrapper entirely. We render aside.maktab-sidebar
   directly under <body>, so Frappe's container is dead weight in DOM and
   doesn't need any of its lifecycle (expand_sidebar / set_height /
   prevent_scroll) reaching anything we draw. */
.body-sidebar-container,
.body-sidebar-placeholder {
	display: none !important;
}

/* Frappe's #freeze overlay flashes on every page navigation — kill it. */
#freeze { display: none !important; }

/* ── FB-2026-00193: suppress sidebar transitions during initial paint ──
   maktab.js adds `is-loading` to <html> synchronously and removes it on
   double-rAF. Killing transitions while that class is present prevents
   the .main-section margin-inline-start animation (and the mobile drawer
   transform) from running on every page refresh — the steady state
   commits in the first paint without animation. Once the class is gone,
   `.is-collapsed` and `.is-open` toggles animate normally. */
html.is-loading aside.maktab-sidebar,
html.is-loading aside.maktab-sidebar ~ .main-section,
html.is-loading .maktab-sidebar-backdrop {
	transition: none !important;
}

/* ── aside.maktab-sidebar — the canonical (only) sidebar element ──
   Direct child of <body>, sibling of .main-section. State classes:
   .is-open      — mobile drawer visible
   .is-collapsed — desktop narrow rail (56px instead of 182px)
*/
aside.maktab-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	max-height: 100vh;
	width: 182px;
	background: var(--brown-deep);
	color: var(--straw);
	border-left: 3px solid var(--sand);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 1010;
	font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
	transition: width 0.2s ease;
}
[dir="rtl"] aside.maktab-sidebar {
	left: auto;
	right: 0;
}

/* ── Desktop: fixed rail; .main-section offsets to clear it ── */
@media (min-width: 769px) {
	aside.maktab-sidebar.is-collapsed {
		width: 56px;
	}
	aside.maktab-sidebar ~ .main-section {
		margin-inline-start: 182px !important;
		width: calc(100% - 182px) !important;
		transition: margin-inline-start 0.2s ease, width 0.2s ease !important;
	}
	aside.maktab-sidebar.is-collapsed ~ .main-section {
		margin-inline-start: 56px !important;
		width: calc(100% - 56px) !important;
	}
	/* Hide Frappe's hamburger between 769..991px (Frappe thinks sidebar is collapsed) */
	.page-head .sidebar-toggle-btn,
	.page-head .sidebar-toggle-placeholder {
		display: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   The .sidebar component itself — adapted near-verbatim from
   design_handoff_maktab_redesign/handoff_notes/sidebar/sidebar.css
   ════════════════════════════════════════════════════════════════════════ */

/* Sidebar appearance does NOT flip in dark mode — sidebar is brand chrome.
   The bg switches to brown-night for cohesion with the page bg, but every
   accent/text token gets re-locked to its LIGHT value inside the sidebar
   so contrast stays high (otherwise --straw → #3D3428 = dark gray text on
   #0F0C08 near-black bg = invisible). Scoping these vars on the sidebar
   element propagates to all descendants via CSS custom-property inheritance. */
[data-theme="dark"] aside.maktab-sidebar {
	background: var(--brown-night);
	--beige: #F5F0E6;
	--cream: #FAF8F2;
	--straw: #D4C5A0;
	--sand: #C2AD7E;
	--brown: #6B4F36;
}

/* ── Brand mark ── */
aside.maktab-sidebar .brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 14px 14px;
	border-bottom: 1px solid rgba(212,197,160,.15);
	cursor: pointer;
	transition: background .15s;
	outline: none;
}
aside.maktab-sidebar .brand:hover {
	background: rgba(212,197,160,.04);
}
aside.maktab-sidebar .brand:hover .ar { color: #FFF8EA; }
aside.maktab-sidebar .brand:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(212,197,160,.5);
}
aside.maktab-sidebar .brand .palm-mark {
	width: 26px;
	height: 30px;
	flex-shrink: 0;
}
aside.maktab-sidebar .brand .ar {
	font-size: 14px;
	font-weight: 700;
	color: var(--beige);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Scrollable nav area ── */
aside.maktab-sidebar .nav-area {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
	scrollbar-width: thin;
}
aside.maktab-sidebar .nav-area::-webkit-scrollbar { width: 6px; }
aside.maktab-sidebar .nav-area::-webkit-scrollbar-track { background: transparent; }
aside.maktab-sidebar .nav-area::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--r-sm); }
aside.maktab-sidebar .nav-area:hover::-webkit-scrollbar-thumb { background: rgba(212,197,160,.18); }

/* ── Section header (collapsible) ── */
aside.maktab-sidebar .nav-sect {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 4px;
	font-size: 12px;
	color: rgba(212,197,160,.62);
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}
/* First section header sits flush to the brand divider; no leading air. */
aside.maktab-sidebar .nav-area > .nav-sect:first-child {
	padding-top: 6px;
}
aside.maktab-sidebar .nav-sect:hover { color: rgba(212,197,160,.9); }
aside.maktab-sidebar .nav-sect .caret {
	width: 11px;
	height: 11px;
	opacity: .6;
	transition: transform .25s ease;
	flex-shrink: 0;
}
aside.maktab-sidebar .nav-sect.collapsed .caret { transform: rotate(-90deg); }

/* ── Nav list ── */
aside.maktab-sidebar .nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
}
/* Items are stacked vertically. The parent .body-sidebar has flex display
   from Frappe's CSS, which would normally cascade flex behavior to .nav
   children — but display: block on .nav makes its <li>s normal block
   elements stacking top-to-bottom (1 per row, even at 56px collapsed). */
aside.maktab-sidebar .nav li {
	display: flex;
	width: 100%;
}
aside.maktab-sidebar .nav-sect + .nav {
	overflow: hidden;
	max-height: 500px;
	transition: max-height .28s ease;
}
aside.maktab-sidebar .nav-sect.collapsed + .nav { max-height: 0; }

aside.maktab-sidebar .nav li {
	display: flex;
	align-items: center;
	gap: 9px;
	/* padding-inline 20px keeps the 16px icon's left edge at the rail-center
	   x-coord (56px wide → (56-16)/2 = 20px). When the sidebar collapses
	   from 182px to 56px the icon stays put; only the label clips. */
	padding: 8px 20px;
	font-size: 14px;
	color: var(--straw);
	cursor: pointer;
	border-right: 3px solid transparent;
	line-height: 1.2;
	outline: none;
	background: transparent;
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
}
aside.maktab-sidebar .nav li:hover {
	background: rgba(212,197,160,.06);
	color: var(--beige);
}
aside.maktab-sidebar .nav li:focus-visible {
	background: rgba(212,197,160,.08);
	box-shadow: inset 0 0 0 1px rgba(212,197,160,.4);
}
aside.maktab-sidebar .nav li.active {
	background: rgba(212,197,160,.1);
	color: var(--beige);
	border-right-color: var(--sand);
}

aside.maktab-sidebar .nav li .ico {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--sand);
	opacity: .8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
aside.maktab-sidebar .nav li .ico svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
}
aside.maktab-sidebar .nav li:hover .ico,
aside.maktab-sidebar .nav li.active .ico { opacity: 1; }

aside.maktab-sidebar .nav li .label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

aside.maktab-sidebar .nav li .badge {
	background: #C2735E;
	color: var(--beige);
	font-size: 10.5px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: var(--r-lg);
	font-family: 'Cairo', system-ui, sans-serif;
	min-width: 18px;
	text-align: center;
}
aside.maktab-sidebar .nav li .badge[hidden] { display: none; }
aside.maktab-sidebar .nav li .badge.muted {
	background: transparent;
	color: var(--sand);
	border: 1px solid rgba(194,173,126,.45);
	padding: 0 5px;
	font-weight: 600;
}

/* ── User area (footer) ── */
aside.maktab-sidebar .user-area {
	border-top: 1px solid rgba(212,197,160,.15);
	/* No top padding — the divider sits flush above the user-row. */
	padding: 0 14px 6px;
	flex-shrink: 0;
}
aside.maktab-sidebar .user-row {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 4px;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	/* 8px vertical padding lives inside the hover area so it highlights
	   on mouseover (FB-189). The button's top edge still touches the
	   .user-area divider (user-area has padding-top: 0). Negate the
	   .user-area horizontal padding (14px) so the hover bg spans the
	   full sidebar width — same visual treatment as the nav items above. */
	padding: 8px 14px;
	margin-inline: -14px;
	border-radius: 0;
	transition: background .15s;
}
aside.maktab-sidebar .user-row:hover {
	background: rgba(212,197,160,.06);
	text-decoration: none;
	color: inherit;
}
aside.maktab-sidebar .user-row:focus-visible {
	outline: none;
	background: rgba(212,197,160,.08);
	box-shadow: inset 0 0 0 1px rgba(212,197,160,.4);
}
aside.maktab-sidebar .user-row .avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--brown-deep);
	flex-shrink: 0;
}
/* FB-2026-00217: <img> variant of the sidebar avatar — cover the circle,
   no inherited text-flex layout, keep the same 26px footprint. */
aside.maktab-sidebar .user-row .avatar.avatar-img {
	display: block;
	object-fit: cover;
	background: transparent;
}
aside.maktab-sidebar .user-row .name {
	font-size: 13.5px;
	color: var(--beige);
	font-weight: 600;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── User tools — 5 footer buttons ──
   Source order: logout, language, theme, feedback, panel-toggle.
   In RTL row state the last child renders on the LEFT edge.
   In column (collapsed) state the last child renders at the BOTTOM.
   No flex-direction: row-reverse / order:* tricks. */
aside.maktab-sidebar .user-tools {
	display: flex;
	justify-content: space-between;
}
aside.maktab-sidebar .user-tools button {
	background: transparent;
	border: 0;
	color: var(--sand);
	width: 28px;
	height: 28px;
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: .75;
	padding: 0;
}
aside.maktab-sidebar .user-tools button:hover {
	background: rgba(212,197,160,.08);
	opacity: 1;
	color: var(--beige);
}
aside.maktab-sidebar .user-tools .ico {
	width: 15px;
	height: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── Collapsed state (56px) ── */
aside.maktab-sidebar.is-collapsed { width: 56px; }
aside.maktab-sidebar.is-collapsed .brand { justify-content: center; padding: 14px 0; }
aside.maktab-sidebar.is-collapsed .brand .ar { display: none; }
aside.maktab-sidebar.is-collapsed .nav-sect { display: none; }
/* Only the current/open section's items show in the collapsed rail.
   Sections marked .collapsed (everything except the active one) keep
   their max-height: 0 from the base rule and stay hidden. Top-level
   items (no preceding .nav-sect) always show. */
aside.maktab-sidebar.is-collapsed .nav-sect:not(.collapsed) + .nav { max-height: none !important; }
aside.maktab-sidebar.is-collapsed .nav li {
	/* No justify-content swap — padding-inline (20px from the base rule)
	   already centers the icon in the 56px rail. Vertical padding only. */
	padding: 10px 20px;
	position: relative;
}
aside.maktab-sidebar.is-collapsed .nav li .label { display: none; }
aside.maktab-sidebar.is-collapsed .nav li .badge {
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 9px;
	padding: 0 4px;
	min-width: 14px;
}

/* ── Panel-toggle chevron orientation ──
   Default SVG draws a left-pointing chevron — correct for LTR-expanded
   ("hide" pushes the sidebar back left). Flips on collapsed state and
   on RTL; both flips cancel for RTL-collapsed. */
aside.maktab-sidebar #maktab-panel-toggle .ico {
	transition: transform .2s ease;
}
aside.maktab-sidebar.is-collapsed #maktab-panel-toggle .ico {
	transform: scaleX(-1);
}
[dir="rtl"] aside.maktab-sidebar #maktab-panel-toggle .ico {
	transform: scaleX(-1);
}
[dir="rtl"] aside.maktab-sidebar.is-collapsed #maktab-panel-toggle .ico {
	transform: scaleX(1);
}
aside.maktab-sidebar.is-collapsed .user-row .name { display: none; }
aside.maktab-sidebar.is-collapsed .user-row { justify-content: center; margin-bottom: 6px; }
aside.maktab-sidebar.is-collapsed .user-tools {
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
aside.maktab-sidebar.is-collapsed .user-area { padding: 10px 4px; }

/* Tooltip when collapsed — uses position:fixed + --tip-y so it can escape
   the body-sidebar's overflow:hidden context (set by JS on hover). */
aside.maktab-sidebar.is-collapsed .nav li[data-tip]:hover::after {
	content: attr(data-tip);
	position: fixed;
	left: calc(56px + 8px);
	top: var(--tip-y, 50%);
	transform: translateY(-50%);
	background: #2A1F15;
	color: var(--beige);
	padding: 5px 10px;
	border-radius: var(--r-sm);
	font-size: 12px;
	white-space: nowrap;
	z-index: 10000;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[dir="rtl"] aside.maktab-sidebar.is-collapsed .nav li[data-tip]:hover::after {
	left: auto;
	right: calc(56px + 8px);
}

/* ── Mobile drawer (≤768px) ──
   aside.maktab-sidebar IS the drawer — slides in from the inline-start edge
   when .is-open is added. No Frappe wrapper involved. */
@media (max-width: 768px) {
	aside.maktab-sidebar {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 280px !important;
		max-width: 85% !important;
		height: 100% !important;
		z-index: 1050 !important;
		transform: translate3d(-100%, 0, 0) !important;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
		will-change: transform;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		padding-top: env(safe-area-inset-top, 0px) !important;
	}
	html[dir="rtl"] aside.maktab-sidebar {
		left: auto !important;
		right: 0 !important;
		transform: translate3d(100%, 0, 0) !important;
	}
	aside.maktab-sidebar.is-open,
	html[dir="rtl"] aside.maktab-sidebar.is-open {
		transform: translate3d(0, 0, 0) !important;
	}
	/* Mobile drawer is full width of its 280px box — .is-collapsed (desktop
	   rail state) is irrelevant here, but if it lingers from a viewport
	   crossover, ensure inner content stays readable. */
	aside.maktab-sidebar.is-collapsed .brand .ar,
	aside.maktab-sidebar.is-collapsed .nav li .label,
	aside.maktab-sidebar.is-collapsed .user-row .name {
		display: block;
	}
	aside.maktab-sidebar.is-collapsed .nav-sect { display: flex; }
	aside.maktab-sidebar.is-collapsed .nav li { justify-content: flex-start; padding: 8px 14px; }
	aside.maktab-sidebar.is-collapsed .user-tools { flex-direction: row; gap: 0; }
	/* Hide panel-toggle in mobile drawer — the bottom-nav menu tab opens/closes the drawer. */
	aside.maktab-sidebar #maktab-panel-toggle {
		display: none;
	}
	/* Enlarge the remaining 4 footer buttons so they fill the drawer's width. */
	aside.maktab-sidebar .user-tools button {
		flex: 1;
		min-width: 40px;
		min-height: 40px;
		width: auto;
		height: auto;
	}
	aside.maktab-sidebar .user-tools .ico {
		width: 18px;
		height: 18px;
	}

	/* Sidebar backdrop (fades in/out alongside the drawer).
	   FB-2026-00177: keep `display: block` constant on mobile and toggle
	   only opacity/pointer-events. Toggling `display` is not animatable, so
	   the previous `display: none` on close made the scrim vanish instantly
	   and made the entire close feel un-animated even though the sidebar's
	   transform IS interpolating. */
	.maktab-sidebar-backdrop {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(237, 229, 212, 0.55);
		z-index: 1049;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}
	[data-theme="dark"] .maktab-sidebar-backdrop {
		background: rgba(26, 21, 16, 0.55);
	}
	aside.maktab-sidebar.is-open ~ .maktab-sidebar-backdrop {
		opacity: 1;
		pointer-events: auto;
	}
	/* Frappe's built-in grey overlay inside its (hidden) container — keep
	   the suppression rule for safety, in case the cascade ever revives. */
	.body-sidebar-container .overlay {
		display: none !important;
	}
	/* FB-2026-00177/180: do NOT add overflow:hidden on <html> here — WebKit
	   zeroes scrollY on that. Do NOT recolor <html> either; any flip in html
	   bg becomes visible during the close transition. */
}
/* Desktop: no backdrop. The @media (max-width:768px) rules above set
   display: block on mobile so the opacity transition can run on close;
   without scoping THIS rule to desktop only, it would otherwise re-hide
   the backdrop on mobile (same specificity, later in source = wins). */
@media (min-width: 769px) {
	.maktab-sidebar-backdrop {
		display: none;
	}
}

/* Suppress sidebar transitions while the window is actively resizing
   (prevents a slide animation when crossing the 768px boundary). */
body.maktab-resizing aside.maktab-sidebar,
body.maktab-resizing .maktab-sidebar-backdrop {
	transition: none !important;
}

/* ── Print: hide the sidebar entirely. ── */
@media print {
	aside.maktab-sidebar,
	.maktab-sidebar-backdrop { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   End sidebar v4
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   Counterparty History page (.ch-*) — F2 surface
   ════════════════════════════════════════════════════════════════════════ */
.ch-container .ch-header {
	margin: 4px 0 12px;
}
.ch-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.ch-title {
	margin: 0;
	font-size: var(--text-xl);
	color: var(--brown-deep);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.ch-doctype-chip {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--info-bg, rgba(122, 145, 122, 0.18));
	color: var(--success);
	border: 1px solid var(--success);
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.ch-chip-muted {
	color: var(--ink-muted);
	border-color: var(--border);
	background: var(--cream);
}
.ch-open-link {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--maktab-link);
	text-decoration: none;
}
.ch-open-link:hover { text-decoration: underline; }

.ch-filters {
	margin: 4px 0 16px;
}
.ch-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}
.ch-filter-group {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.ch-filter-group label {
	font-size: var(--text-sm);
	color: var(--ink-muted);
	font-weight: 600;
	margin: 0;
}
.ch-year-btn {
	padding: 4px 10px;
	font-size: var(--text-sm);
}
.ch-cat-select {
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--cream);
	color: var(--ink);
	font-size: var(--text-sm);
}

.ch-count-pill {
	display: inline-block;
	background: var(--brown-deep);
	color: var(--cream);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 0 8px;
	border-radius: 999px;
	margin-inline-start: 6px;
	min-width: 28px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ch-mtx-row {
	cursor: pointer;
}
.ch-mtx-row:hover {
	background: var(--info-bg, rgba(122, 145, 122, 0.08));
}
.ch-col-notes {
	max-width: 320px;
	color: var(--ink-muted);
	font-size: var(--text-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ch-type-chip {
	display: inline-block;
	font-size: var(--text-xs, 11px);
	font-weight: 700;
	padding: 1px 8px;
	border-radius: 999px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.ch-type-income, .ch-type-refund {
	background: rgba(94, 125, 94, 0.16);
	color: var(--success);
}
.ch-type-expense, .ch-type-settlement {
	background: rgba(192, 115, 94, 0.16);
	color: var(--crit);
}
.ch-type-transfer {
	background: rgba(212, 160, 90, 0.16);
	color: var(--warn);
}
.ch-amt-paid { color: var(--crit); }
.ch-amt-received { color: var(--success); }
.ch-net-pos { color: var(--success); font-weight: 600; }
.ch-net-neg { color: var(--crit); font-weight: 600; }

[data-theme="dark"] .ch-doctype-chip {
	background: rgba(94, 125, 94, 0.20);
	color: #A8D4A0;
	border-color: #5E7D5E;
}
[data-theme="dark"] .ch-chip-muted {
	background: var(--brown-night);
	color: var(--ink-muted);
	border-color: var(--straw);
}
[data-theme="dark"] .ch-cat-select {
	background: var(--brown-night);
	color: var(--ink);
	border-color: var(--straw);
}
[data-theme="dark"] .ch-mtx-row:hover {
	background: rgba(94, 125, 94, 0.12);
}
[data-theme="dark"] .ch-type-income,
[data-theme="dark"] .ch-type-refund {
	background: rgba(94, 125, 94, 0.22);
	color: #A8D4A0;
}
[data-theme="dark"] .ch-type-expense,
[data-theme="dark"] .ch-type-settlement {
	background: rgba(192, 115, 94, 0.22);
	color: #E8A890;
}
[data-theme="dark"] .ch-type-transfer {
	background: rgba(212, 160, 90, 0.22);
	color: #E8C57A;
}
[data-theme="dark"] .ch-amt-paid { color: #E8A890; }
[data-theme="dark"] .ch-amt-received { color: #A8D4A0; }
[data-theme="dark"] .ch-net-pos { color: #A8D4A0; }
[data-theme="dark"] .ch-net-neg { color: #E8A890; }

@media (max-width: 768px) {
	.ch-title-row { flex-direction: column; align-items: flex-start; }
	.ch-title { font-size: var(--text-lg, 16px); }
	.ch-filter-row { flex-direction: column; align-items: stretch; gap: 8px; }
	.ch-filter-group { width: 100%; }
	.ch-cat-select { width: 100%; }
	.ch-col-notes { display: none; }
}

/* ── Hijri-primary date pairing ──────────────────────────────────────────
   Output of maktab.fmt_date() in AR mode:
     <span class="date-hijri">١٥ شعبان ١٤٤٧</span>
     <span class="date-greg">2026-04-15</span>
   Hijri stays inline; ISO drops to a small dim line below. Wrap the
   container in `.date-inline` for single-line contexts (toolbars, table
   cells) to suppress the ISO secondary. */
.date-hijri { display: inline; }
.date-greg {
	display: block;
	font-size: 0.75em;
	opacity: 0.55;
	margin-top: 2px;
}
.date-inline .date-greg { display: none; }

/* ── RTL arrow flip ────────────────────────────────────────────────
   Arrows used as directional indicators ("view more", "open record",
   "back") should point in the reading direction. In RTL that means
   right-to-left, so the → glyph after Arabic text must be mirrored.
   We use transform: scaleX(-1) — safer than character substitution
   because it covers ASCII fallbacks and works on any glyph (→, ←,
   &rsaquo;, etc.).

   Scope is restricted to classes that explicitly mark directional
   navigation arrows. Arrows that convey non-directional semantics
   (e.g. activity-log "old → new" state transitions, date ranges
   "start → end", "matched to" relationships) are NOT flipped — they
   keep LTR direction because their meaning is "source → target",
   not "go forward in reading direction". */
[dir="rtl"] .lv-arrow,
[dir="rtl"] .f-arrow,
[dir="rtl"] .maktab-arrow,
[dir="rtl"] .maktab-detail-back {
	display: inline-block;
	transform: scaleX(-1);
}