/* ============================================================
   Maktab — Shared Components (`.mkt-*` canonical namespace)
   ============================================================
   The .mkt-* prefix replaces the ~14 page-scoped namespaces in
   the live codebase (.expiry-dashboard, .rc-page, .lv-*, .tr-*,
   .fo-*, .tp-*, .mh-*, .pv-*, .mv-*, .mo-*, .mnt-*, .fb-*,
   .wd-*, .ch-*, .el-*). Bootstrap collision is defeated because
   Frappe never wrote .mkt-* selectors.

   Migration order is described in STAGE2_MIGRATION.md.
   This file is the source of truth.
*/

/* --surface-inverse: declared here (not in tokens.css) so this file
   is self-contained and resolves without a token-block migration.
   Light = brown-deep; dark = a darker tinted surface to keep the
   sidebar legible against the dimmed page background. */
:root               { --surface-inverse: var(--brown-deep); }
[data-theme="dark"] { --surface-inverse: #1F1A14; }

/* ── Layout: app shell (sidebar + main) ─────────────────── */
.mkt-app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
  background: var(--beige);
}
.mkt-app__main {
  padding: var(--s-6) var(--s-8);
  min-width: 0;
  overflow-y: auto;
  max-height: 100vh;
}

/* ── Sidebar (lifted from wasi-rent-dashboard) ──────────── */
.mkt-sb {
  background: var(--surface-inverse);
  color: #D4C5A0;
  display: flex; flex-direction: column;
  min-height: 100vh;
  font-size: 13px;
  border-left: 1px solid rgba(212,197,160,.08);
}
.mkt-sb__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;
}
.mkt-sb__brand:hover { background: rgba(212,197,160,.04); }
.mkt-sb__brand img { width: 22px; height: 22px; opacity: .9; }
.mkt-sb__brand-text {
  font-family: var(--font-ar); font-weight: 700;
  font-size: 14px; color: #F5F0E6; letter-spacing: .01em;
}
.mkt-sb__nav-area { flex: 1; overflow-y: auto; padding: 6px 0 12px; }
.mkt-sb__sect {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 14px 6px;
  font-size: 12px; color: rgba(212,197,160,.62);
  font-weight: 600; cursor: pointer; user-select: none;
}
.mkt-sb__sect:hover { color: rgba(212,197,160,.9); }
.mkt-sb__sect.is-static { cursor: default; padding-top: 14px; }
.mkt-sb__sect.is-static:hover { color: rgba(212,197,160,.62); }
.mkt-sb__caret { width: 14px; height: 14px; opacity: .55; transition: transform .2s; }
.mkt-sb__sect.is-collapsed .mkt-sb__caret { transform: rotate(-90deg); }
.mkt-sb__sect.is-static .mkt-sb__caret { display: none; }
.mkt-sb__nav { list-style: none; margin: 0; padding: 2px 0; transition: max-height .25s var(--ease); max-height: 600px; }
.mkt-sb__sect.is-collapsed + .mkt-sb__nav { max-height: 0; overflow: hidden; padding: 0; }
.mkt-sb__item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; font-size: 14px; color: #D4C5A0;
  cursor: pointer; border-right: 3px solid transparent;
  line-height: 1.2; outline: none;
}
.mkt-sb__item:hover { background: rgba(212,197,160,.06); color: #F5F0E6; }
.mkt-sb__item:focus-visible { background: rgba(212,197,160,.08); outline: 1px solid rgba(212,197,160,.4); outline-offset: -1px; }
.mkt-sb__item.is-active { background: rgba(212,197,160,.1); color: #F5F0E6; border-right-color: var(--sand); }
.mkt-sb__ico { width: 18px; height: 18px; flex-shrink: 0; }
.mkt-sb__label { flex: 1; }
.mkt-sb__badge {
  background: var(--crit); color: var(--cream);
  font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; font-family: var(--font-num); min-width: 18px; text-align: center;
}
.mkt-sb__badge.is-muted {
  background: transparent; color: var(--sand);
  border: 1px solid rgba(194,173,126,.45); padding: 0 5px; font-weight: 600;
}
.mkt-sb__user-area { border-top: 1px solid rgba(212,197,160,.15); padding: 12px 14px; }
.mkt-sb__user-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mkt-sb__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sand); color: var(--brown-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.mkt-sb__user-name { font-size: 13px; color: #F5F0E6; flex: 1; }
.mkt-sb__user-tools { display: flex; gap: 4px; justify-content: space-between; }
.mkt-sb__user-tools button {
  background: none; border: none; padding: 6px;
  color: rgba(212,197,160,.5); cursor: pointer;
  border-radius: 4px; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.mkt-sb__user-tools button:hover { color: #F5F0E6; background: rgba(212,197,160,.06); }
.mkt-sb__user-tools .ico { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════
   .mkt-pg-head — page header
   ════════════════════════════════════════════════════════
   Three variants via [data-variant]:
     list   — title + count + primary action
     report — title + period selector + secondary toolbar
     detail — title + status pill + actions menu
   Entity color spine via [data-entity-class]:
     charitable | passthrough | personal | operational
   Renders as a left-edge (start-edge) 3px vertical stripe in
   the entity color. Symmetric in RTL/LTR via border-inline-start.
*/
.mkt-pg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding: var(--s-2) 0 var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--border);
  /* §6.4: no entity-color spine on page heads — identity reads via the
     .mkt-pg-head__entity-tag chip, not a border-inline-start stripe. */
  padding-inline-start: var(--s-4);
  position: relative;
}

.mkt-pg-head__main { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; flex: 1; }
.mkt-pg-head h1 { font-size: var(--text-3xl); line-height: 1.2; }
.mkt-pg-head__count {
  font-family: var(--font-num); color: var(--ink-muted);
  font-size: var(--text-lg); font-weight: 500;
}
.mkt-pg-head__sub {
  display: block; font-size: var(--text-sm); color: var(--ink-muted);
  margin-top: var(--s-1);
}
.mkt-pg-head__actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.mkt-pg-head__toolbar {
  display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0;
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--border);
}
/* Detail-view head (promoted from the old shared maintenance-view.css layer →
   now canonical for every *-view detail page). foundation-v2: no entity spine,
   __main column-stacks the breadcrumb / id-row / title. */
.mkt-pg-head[data-variant="detail"] { border-inline-start: 0; padding-inline-start: 0; }
.mkt-pg-head[data-variant="detail"] .mkt-pg-head__main {
  flex-direction: column; align-items: flex-start; gap: var(--s-1);
}
/* Inline-editable detail subject that sits below the id-row (used by the
   detail views). No h1 — the id-row carries the record identity. */
.mkt-pg-head__title {
  font-size: var(--text-lg); font-weight: 600;
  color: var(--ink); margin-top: 4px;
}

/* New v2 sub-elements (PR 1). Entity identity now carried by a chip near
   the title (§6 rule 4) instead of the 4px spine; breadcrumb + id-row +
   id promoted from the legacy .mv-head detail header. */
.mkt-pg-head__entity-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  background: var(--straw);
  color: var(--brown);
  margin-inline-end: var(--s-1);
  vertical-align: middle;
}
.mkt-pg-head[data-entity-class="charitable"]  .mkt-pg-head__entity-tag { background: var(--entity-charitable-bg); color: var(--entity-charitable); }
.mkt-pg-head[data-entity-class="passthrough"] .mkt-pg-head__entity-tag { background: var(--entity-passthrough-bg); color: var(--entity-passthrough); }
.mkt-pg-head[data-entity-class="personal"]    .mkt-pg-head__entity-tag { background: var(--entity-personal-bg); color: var(--entity-personal); }
.mkt-pg-head[data-entity-class="operational"] .mkt-pg-head__entity-tag { background: rgba(107,90,72,.12); color: var(--entity-operational); }
.mkt-pg-head__breadcrumb {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-muted); font-size: var(--text-sm);
  margin-bottom: var(--s-2);
}
.mkt-pg-head__breadcrumb a { color: var(--brown); text-decoration: none; }
.mkt-pg-head__breadcrumb a:hover { color: var(--brown-deep); }
.mkt-pg-head__breadcrumb__sep { opacity: .45; }
.mkt-pg-head__id-row {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-top: var(--s-1);
}
.mkt-pg-head__id {
  font-family: var(--font-num);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  letter-spacing: .01em;
}
.mkt-pg-head[data-variant="detail"] h1 {
  display: inline-flex; align-items: center; gap: var(--s-2);
}

/* ════════════════════════════════════════════════════════
   .mkt-card — surface
   ════════════════════════════════════════════════════════ */
.mkt-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* §6.3 / foundation-v2: card padding is var(--s-4) (16px). Cards carry no
     margin — inter-card spacing comes from the container (.mkt-card-stack gap
     or a page grid gap), never from the card itself. */
  padding: var(--s-4);
}
.mkt-card--inset { padding: var(--s-4); }
.mkt-card--quiet { background: transparent; border-color: var(--border-soft); }
/* Flush surface: tables / full-bleed list rows reach the card's rounded border;
   the table supplies its own per-cell padding. `.eh-pad-0` is the legacy alias
   (kept for back-compat). overflow:hidden clips the table corners to --r-md. */
.mkt-card--flush { padding: 0; overflow: hidden; }
/* Vertical card stack — spacing via gap, replacing the per-card margin the old
   maintenance-view.css leak used to supply. */
.mkt-card-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.mkt-card__title {
  /* §6.3 / foundation-v2: heavier, brown, no uppercase tracking. */
  font-size: var(--text-md); font-weight: 700; color: var(--brown-deep);
  letter-spacing: 0; text-transform: none;
  margin-bottom: var(--s-3);
}
.mkt-card__head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: none; padding-bottom: 0;
  margin-bottom: var(--s-3);
}
.mkt-card__head h3 { font-size: var(--text-lg); }

/* Inline empty line inside a card (§5.4 card-level empty state). */
.mkt-card__empty {
  padding: var(--s-3) 0 var(--s-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-style: italic;
}
[lang="ar"] .mkt-card__empty { font-style: normal; }

/* The "+ Add" button in a card head. */
.mkt-card__head__add {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--brown);
  padding: 3px 8px 3px 6px;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.mkt-card__head__add:hover { background: var(--straw); color: var(--brown-deep); }
.mkt-card__head__add svg { width: 13px; height: 13px; stroke-width: 1.8; }

/* Inline-edit empty state (§5.5).
   Applies to scalar inline-editable spans when they're showing the
   placeholder ('—' or a custom data-placeholder). Muted + italic in
   English; non-italic in Arabic. Hover un-mutes to advertise editability. */
[data-inline-edit][data-empty] { color: var(--ink-muted); font-style: italic; }
[data-inline-edit][data-empty]:hover { color: var(--brown); font-style: normal; }
[lang="ar"] [data-inline-edit][data-empty] { font-style: normal; }

/* ════════════════════════════════════════════════════════
   .mkt-kpi — canonical KPI strip
   ════════════════════════════════════════════════════════
   Three variants:
     (none)     — Compact: number on top, label below, no chrome.
                  Default. Used everywhere by default.
     --card     — wraps in .mkt-card chrome. Entity homes.
     --select   — adds hover + active states (filters list below).
                  Used on Expiry Center.
   Empty state via .is-empty modifier:
     light copy + optional inline CTA. "No upcoming events. + Add event."
*/
.mkt-kpi-row {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: var(--s-6);
}
.mkt-kpi {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  position: relative;
}
.mkt-kpi__label {
  font-size: var(--text-sm); color: var(--ink-muted);
  letter-spacing: .02em;
}
.mkt-kpi__value {
  font-size: var(--text-3xl); font-weight: 600;
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--brown-deep);
  line-height: 1.1;
}
.mkt-kpi__value .unit {
  font-size: var(--text-md); color: var(--ink-muted);
  margin-inline-start: 4px; font-family: var(--font-ar); font-weight: 400;
}
.mkt-kpi__sub {
  font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--s-1);
}

.mkt-kpi--card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.mkt-kpi--card.mkt-kpi--crit    { background: var(--crit-bg); border-color: rgba(192,115,94,.25); }
.mkt-kpi--card.mkt-kpi--warn    { background: var(--warn-bg); border-color: rgba(212,160,90,.3); }
.mkt-kpi--card.mkt-kpi--success { background: var(--success-bg); border-color: rgba(94,125,94,.25); }
.mkt-kpi--card.mkt-kpi--info    { background: var(--info-bg); border-color: rgba(61,109,143,.2); }
.mkt-kpi--crit .mkt-kpi__value { color: var(--overdue); }
.mkt-kpi--warn .mkt-kpi__value { color: var(--sand-deep); }
.mkt-kpi--success .mkt-kpi__value { color: var(--success); }
.mkt-kpi--info .mkt-kpi__value { color: var(--info); }

.mkt-kpi--select {
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.mkt-kpi--select:hover { border-color: var(--sand); }
.mkt-kpi--select.is-active {
  border-color: var(--brown-deep); background: var(--straw);
}

/* Empty state — "intentional zero" treatment.
   The KPI still renders (per §3.8 decision: zeros are information);
   it just visually de-emphasizes and can host an inline CTA. */
.mkt-kpi.is-empty .mkt-kpi__value { color: var(--ink-muted); font-weight: 400; }
.mkt-kpi.is-empty .mkt-kpi__label { color: var(--ink-muted); }
.mkt-kpi__cta {
  margin-top: var(--s-2); font-size: var(--text-sm);
  color: var(--brown); background: none; border: none; padding: 0; cursor: pointer;
}
.mkt-kpi__cta:hover { text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 3px; }

/* --countdown — large-number-with-days renewal hero (§5.6).
   Plain bg; .is-warn / .is-crit colors the number. */
.mkt-kpi--countdown { padding: var(--s-4) var(--s-5); }
.mkt-kpi--countdown .mkt-kpi__value {
  font-size: var(--text-3xl);
  line-height: 1.05;
  font-weight: 600;
  color: var(--brown-deep);
}
.mkt-kpi--countdown .mkt-kpi__sub {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: var(--s-1);
}
.mkt-kpi--countdown.is-crit .mkt-kpi__value { color: var(--crit); }
.mkt-kpi--countdown.is-warn .mkt-kpi__value { color: var(--sand-deep); }

/* ════════════════════════════════════════════════════════
   .mkt-btn — buttons
   ════════════════════════════════════════════════════════ */
.mkt-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); border-color: var(--border);
}
.mkt-btn:hover { background: var(--straw); border-color: var(--sand); }
.mkt-btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.mkt-btn--primary { background: var(--brown-deep); color: var(--cream); border-color: transparent; }
.mkt-btn--primary:hover { background: #5a4332; }
.mkt-btn--ghost { background: transparent; color: var(--brown-deep); border-color: transparent; }
.mkt-btn--ghost:hover { background: rgba(212,197,160,.25); border-color: transparent; }
.mkt-btn--destructive { background: var(--overdue); color: var(--cream); border-color: transparent; }
.mkt-btn--destructive:hover { background: #6e2d1e; }
.mkt-btn--sm { padding: 5px 10px; font-size: var(--text-sm); }
.mkt-btn--xs { padding: 3px 8px; font-size: var(--text-xs); }
.mkt-btn .ico { width: 14px; height: 14px; }

/* In dark mode, --brown-deep flips to a warm cream so it works as a
   foreground color. But .mkt-btn--primary uses brown-deep as bg with
   cream as text — in dark that becomes cream-on-cream and vanishes.
   Repaint the primary button explicitly in dark mode: dark surface
   with the warm-cream foreground reading as the text. */
[data-theme="dark"] .mkt-btn--primary {
  background: var(--surface-inverse);
  color: var(--brown-deep);
  border-color: var(--brown-deep);
}
[data-theme="dark"] .mkt-btn--primary:hover { background: var(--brown-night, #14100B); }

/* Same fix for the active filter pill (brown-deep bg + cream text). */
[data-theme="dark"] .mkt-f-pill.is-active,
[data-theme="dark"] .mkt-period-select__chip.is-active {
  background: var(--surface-inverse);
  color: var(--brown-deep);
  border-color: var(--brown-deep);
}

/* The dialog head bar uses --sand as bg + brown-deep as text — in dark
   --sand stays mid-tone (#5A4F3C) and --brown-deep is light, which
   already reads. No override needed there. */
.mkt-pill {
  display: inline-flex; align-items: center; gap: 0;
  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;
}
/* Dense cell-scale pill (replaces .mkt-badge from Phase 4). §5.1 */
.mkt-pill--sm {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.mkt-pill--success { background: var(--success-bg); color: var(--success); }
.mkt-pill--info { background: var(--info-bg); color: var(--info); }
.mkt-pill--warn { background: var(--warn-bg); color: var(--sand-deep); }
.mkt-pill--crit { background: var(--crit-bg); color: var(--crit); }
.mkt-pill--overdue { background: var(--overdue-bg); color: var(--overdue); }
.mkt-pill--neutral { background: var(--straw); color: var(--brown); }
.mkt-pill--ghost { background: transparent; border-color: currentColor; }
.mkt-pill--ghost::before { display: none; }

/* Filter pills (toggleable) */
.mkt-f-pills { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.mkt-f-pill {
  padding: 5px 12px;
  font-size: var(--text-sm);
  border-radius: var(--r-pill);
  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;
}
.mkt-f-pill:hover { border-color: var(--sand); }
.mkt-f-pill.is-active { background: var(--brown-deep); color: var(--cream); border-color: var(--brown-deep); }
.mkt-f-pill .count { opacity: .7; margin-inline-start: 4px; font-family: var(--font-num); }

/* ════════════════════════════════════════════════════════
   .mkt-tabs — underline tabs
   ════════════════════════════════════════════════════════ */
.mkt-tabs {
  display: flex; gap: var(--s-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-6);
}
.mkt-tab {
  padding: var(--s-3) 0;
  font-size: var(--text-base); color: var(--ink-muted);
  border: none;                              /* kill the UA <button> chrome — */
  border-bottom: 2px solid transparent;      /* underline is the only border */
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  font-weight: 500;
  background: none;
}
.mkt-tab:hover { color: var(--brown-deep); }
.mkt-tab.is-active { color: var(--brown-deep); border-bottom-color: var(--brown-deep); font-weight: 600; }

/* ════════════════════════════════════════════════════════
   .mkt-tbl — tables
   ════════════════════════════════════════════════════════ */
.mkt-tbl {
  width: 100%; border-collapse: collapse;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.mkt-tbl th {
  text-align: right; padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-muted);
  background: var(--beige);
  border-bottom: 1px solid var(--border);
}
[dir="ltr"] .mkt-tbl th { text-align: left; }
.mkt-tbl td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
}
.mkt-tbl tbody tr:last-child td { border-bottom: none; }
.mkt-tbl tbody tr:hover { background: rgba(212,197,160,.08); }
.mkt-tbl .num,
.mkt-tbl td.num { font-family: var(--font-num); font-feature-settings: "tnum" 1, "lnum" 1; }

/* ════════════════════════════════════════════════════════
   .mkt-prop — label-value display row (§5.3)
   ════════════════════════════════════════════════════════
   Read-only / inline-editable detail-view info row. NOT a form
   input wrapper — that's .mkt-field below. */
.mkt-prop {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s-3);
  padding: 6px 0;
  align-items: baseline;
  font-size: var(--text-sm);
}
.mkt-prop + .mkt-prop { border-top: 1px solid var(--border-soft); }
.mkt-prop__label { color: var(--ink-muted); }
.mkt-prop__value { color: var(--ink); }
/* Links inside a prop value (promoted from tenant-view.css + maintenance-view.css,
   which had independently converged on this). */
.mkt-prop__value a { color: var(--brown); text-decoration: none; }
.mkt-prop__value a:hover { color: var(--brown-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ════════════════════════════════════════════════════════
   .mkt-field / .mkt-input / .mkt-select / .mkt-textarea
   ════════════════════════════════════════════════════════ */
.mkt-field { display: block; margin-bottom: var(--s-4); }
.mkt-field__label {
  display: block;
  font-size: var(--text-sm); color: var(--brown);
  margin-bottom: var(--s-1);
  font-weight: 500;
}
.mkt-field__label .req { color: var(--crit); margin-inline-start: 2px; }
.mkt-field__hint { font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--s-1); }
.mkt-input, .mkt-select, .mkt-textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-ar); font-size: var(--text-base);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--dur-fast), outline-color var(--dur-fast);
}
.mkt-input:focus, .mkt-select:focus, .mkt-textarea:focus {
  border-color: var(--sand); outline: 3px solid rgba(194,173,126,.18); outline-offset: 0;
}
.mkt-input[readonly], .mkt-input[disabled],
.mkt-select[disabled], .mkt-textarea[readonly], .mkt-textarea[disabled] {
  background: var(--beige); color: var(--ink-muted); cursor: not-allowed;
}
.mkt-textarea { resize: vertical; min-height: 100px; }
.mkt-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A48' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center;
  background-size: 14px; padding-left: 32px; appearance: none;
}
[dir="ltr"] .mkt-select { background-position: right 12px center; padding-left: 12px; padding-right: 32px; }

/* RETIRED (dialog refresh Batch 6): .mkt-dlg / .mkt-dlg-bg / .mkt-dlg__* and
   .mkt-confirm were the legacy bespoke modal atoms. Every consumer now uses the
   canonical openEditDialog / openConfirmDialog primitive (.pd-overlay/.pd-modal,
   components/edit-pattern.js). The Action Queue's aq-dlg__subject / aq-dlg__todo
   CONTENT classes are NOT part of this shell and remain (styled in maktab.css). */

/* ════════════════════════════════════════════════════════
   .mkt-banner — persistent page notice
   ════════════════════════════════════════════════════════
   Sticky on page-head, dismissable, start-edge stripe in status color.
   Different from .mkt-toast (transient): banners express ongoing state.
*/
.mkt-banner {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  margin-bottom: var(--s-4);
}
.mkt-banner--success { background: var(--success-bg); }
.mkt-banner--info    { background: var(--info-bg); }
.mkt-banner--warn    { background: var(--warn-bg); }
.mkt-banner--crit    { background: var(--crit-bg); }
.mkt-banner--overdue { background: var(--overdue-bg); }
.mkt-banner__ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.mkt-banner__body { flex: 1; min-width: 0; }
.mkt-banner__title { font-weight: 600; color: var(--brown-deep); margin-bottom: 2px; }
.mkt-banner__text { font-size: var(--text-sm); color: var(--ink); }
.mkt-banner__dismiss {
  background: none; border: none; cursor: pointer;
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); border-radius: var(--r-sm); flex-shrink: 0;
}
.mkt-banner__dismiss:hover { color: var(--brown-deep); background: rgba(0,0,0,.04); }

/* ════════════════════════════════════════════════════════
   .mkt-toast — transient confirmation
   ════════════════════════════════════════════════════════ */
.mkt-toast {
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--text-base);
  align-self: flex-start;  /* don't stretch in flex columns */
}
.mkt-toast--success { background: var(--success-bg); }
.mkt-toast--info { background: var(--info-bg); }
.mkt-toast--warn { background: var(--warn-bg); }
.mkt-toast--crit { background: var(--crit-bg); }
.mkt-toast .ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════
   .mkt-panel — slide-in detail panel
   ════════════════════════════════════════════════════════
   Replaces .maktab-detail-panel (live code maktab.css:812-905).
   Anchors to the start-edge (RTL → right, LTR → left), slides
   in via transform. Backdrop is rgba(74,55,40,0.20) light,
   rgba(0,0,0,0.45) dark.

   STATE CLASS: `.open` (NOT `.is-open`).
   The live codebase already uses `.open` for `.maktab-detail-panel`
   and `.maktab-detail-backdrop` (maktab.js :2041, :2095-2096, :2197,
   :5876, :5886). Matching that convention means the JS migration
   becomes a class-name rename only — no state-class semantic change.

   Variants:
     --quiet — header + scrolling stack of .mkt-card data blocks
     --rich  — header + sticky toolbar + tabs in body
*/
.mkt-panel-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(74,55,40, .20);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.mkt-panel-backdrop.open { opacity: 1; pointer-events: auto; }
[data-theme="dark"] .mkt-panel-backdrop { background: rgba(0,0,0,.45); }

.mkt-panel {
  position: fixed; top: 0; bottom: 0;
  inset-inline-end: 0;
  width: min(480px, 92vw);
  background: var(--cream);
  z-index: 1050;
  border-inline-start: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  display: flex; flex-direction: column;
  overflow: hidden;
}
[dir="rtl"] .mkt-panel { transform: translateX(-100%); }
.mkt-panel.open { transform: translateX(0); }
@media (max-width: 768px) { .mkt-panel { width: min(480px, 80vw); } }

[data-theme="dark"] .mkt-panel {
  background: var(--cream);
  border-inline-start: 1px solid var(--border);
}

.mkt-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mkt-panel__title {
  font-size: var(--text-lg); font-weight: 600; color: var(--brown-deep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.mkt-panel__close {
  background: none; border: none;
  font-size: 22px; color: var(--ink-muted); cursor: pointer;
  padding: 0 4px; line-height: 1; flex-shrink: 0; margin-inline-start: 12px;
}
.mkt-panel__close:hover { color: var(--brown-deep); }

/* Back arrow — used when the panel drills down to a sub-record
   (e.g. counterparty history opened from a payment detail panel).
   Mirrors .maktab-detail-back in the live code, including the
   [dir="rtl"] scaleX(-1) flip from maktab.css :11083 so the arrow
   points reading-forward in both directions. */
.mkt-panel__back {
  background: none; border: none;
  font-size: 22px; color: var(--ink-muted); cursor: pointer;
  padding: 0; line-height: 1; flex-shrink: 0;
  margin-inline-end: 8px;
}
.mkt-panel__back:hover { color: var(--brown-deep); }
[dir="rtl"] .mkt-panel__back { display: inline-block; transform: scaleX(-1); }

.mkt-panel__toolbar {
  display: flex; gap: var(--s-2); align-items: center;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  flex-shrink: 0;
}
/* Inside the toolbar, buttons need stronger chrome — cream-on-cream
   would otherwise vanish, especially with sharp corners + compact
   density. Bump the border to --sand so the affordance stays
   readable in every tweak combination. */
.mkt-panel__toolbar .mkt-btn {
  border-color: var(--sand);
  background: var(--beige);
}
.mkt-panel__toolbar .mkt-btn:hover { background: var(--straw); border-color: var(--brown); }
.mkt-panel__body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 20px 40px;
}
.mkt-panel--quiet .mkt-panel__body { padding: 16px 20px 40px; }
.mkt-panel--quiet .mkt-panel__body .mkt-card {
  padding: 16px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.mkt-panel--rich .mkt-panel__body { padding: 0; }
.mkt-panel--rich .mkt-tabs { padding: 0 20px; margin: 0; position: sticky; top: 0; background: var(--cream); z-index: 1; }
@media (max-width: 768px) { .mkt-panel__body { padding-inline: 12px; } }

/* ════════════════════════════════════════════════════════
   .mkt-thread — comment / notes thread
   ════════════════════════════════════════════════════════
   Reused for tenant notes, vendor notes, maintenance updates,
   feedback comments. One spec; was bespoke per page before.
*/
.mkt-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.mkt-thread__item { display: flex; gap: var(--s-3); align-items: flex-start; }
.mkt-thread__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--straw); color: var(--brown-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.mkt-thread__avatar--basil { background: var(--basil-flower-bg); color: var(--basil-flower); }
.mkt-thread__avatar--palm  { background: var(--success-bg); color: var(--success); }
.mkt-thread__body { flex: 1; min-width: 0; }
.mkt-thread__head {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-bottom: 2px;
}
.mkt-thread__name { font-weight: 600; color: var(--brown-deep); font-size: var(--text-base); }
.mkt-thread__time { font-size: var(--text-xs); color: var(--ink-muted); }
.mkt-thread__role {
  font-size: var(--text-xs); color: var(--brown);
  letter-spacing: .04em; text-transform: uppercase;
}
.mkt-thread__text { font-size: var(--text-base); color: var(--ink); line-height: 1.5; }
.mkt-thread__attach {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--s-2); padding: 4px 8px;
  background: var(--beige); border-radius: var(--r-sm);
  font-size: var(--text-xs); color: var(--brown);
}
.mkt-thread__reply {
  margin-top: var(--s-2); display: flex; gap: var(--s-2); align-items: center;
}
.mkt-thread__reply .mkt-input { font-size: var(--text-sm); padding: 6px 10px; }
.mkt-thread__item--basil .mkt-thread__body {
  background: var(--basil-flower-bg); border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
}
.mkt-thread__item--basil .mkt-thread__role { color: var(--basil-flower); }

/* ════════════════════════════════════════════════════════
   .mkt-period-select — year / date-range chip selector
   ════════════════════════════════════════════════════════
   Replaces the Thilth Report one-off and similar.
*/
.mkt-period-select { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mkt-period-select__label {
  font-size: var(--text-sm); color: var(--ink-muted); letter-spacing: .02em;
}
.mkt-period-select__chip {
  padding: 4px 12px; font-size: var(--text-sm);
  font-family: var(--font-num); font-feature-settings: "tnum" 1, "lnum" 1;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.mkt-period-select__chip:hover { border-color: var(--sand); }
.mkt-period-select__chip.is-active {
  background: var(--brown-deep); color: var(--cream); border-color: var(--brown-deep);
}
.mkt-period-select__more {
  padding: 4px 10px; font-size: var(--text-sm);
  background: transparent; border: none;
  color: var(--brown); cursor: pointer;
}
.mkt-period-select__more:hover { text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 3px; }

/* ════════════════════════════════════════════════════════
   .mkt-doc-tile / .mkt-doc-row — document presentation
   ════════════════════════════════════════════════════════
   Tile = grid card. Row = list row. Same content model.
*/
.mkt-doc-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mkt-doc-tile {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast);
}
.mkt-doc-tile:hover { border-color: var(--sand); }
.mkt-doc-tile__head { display: flex; align-items: center; gap: var(--s-2); }
.mkt-doc-tile__ico {
  width: 32px; height: 32px;
  background: var(--beige); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--brown); flex-shrink: 0;
}
.mkt-doc-tile__name {
  font-weight: 600; color: var(--brown-deep); font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.mkt-doc-tile__meta { display: flex; gap: var(--s-2); align-items: center; font-size: var(--text-xs); color: var(--ink-muted); }
.mkt-doc-tile__meta .num { font-family: var(--font-num); }
.mkt-doc-tile__expiry { margin-top: var(--s-1); }

.mkt-doc-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--r-md); overflow: hidden; }
.mkt-doc-row {
  display: grid; grid-template-columns: 32px 1fr auto auto;
  gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--cream);
  font-size: var(--text-base);
}
.mkt-doc-row:hover { background: rgba(212,197,160,.08); }
.mkt-doc-row__ico { width: 24px; height: 24px; color: var(--brown); }
.mkt-doc-row__name { font-weight: 500; color: var(--brown-deep); overflow: hidden; text-overflow: ellipsis; }
.mkt-doc-row__size { font-family: var(--font-num); font-size: var(--text-sm); color: var(--ink-muted); }
.mkt-doc-row__action { color: var(--ink-muted); padding: 4px; background: none; border: none; cursor: pointer; }
.mkt-doc-row__action:hover { color: var(--brown-deep); }

/* ════════════════════════════════════════════════════════
   .mkt-distbar — stacked distribution mini-bar (§5.7)
   ════════════════════════════════════════════════════════
   6px summary of "what's the spread?" across tones. Was
   .mkt-bulkbar in Phase 4, promoted into core. */
.mkt-distbar {
  display: flex;
  width: 100%;
  min-width: 80px;
  max-width: 160px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--beige);
}
.mkt-distbar__seg { height: 100%; display: block; }
.mkt-distbar__seg--success { background: var(--success); }
.mkt-distbar__seg--warn    { background: var(--warn); }
.mkt-distbar__seg--crit    { background: var(--overdue); }
.mkt-distbar__seg--neutral { background: var(--ink-muted); }

/* ════════════════════════════════════════════════════════
   .mkt-date-pair — dual Hijri + Gregorian date pill
   ════════════════════════════════════════════════════════
   Hijri primary, Gregorian secondary. On mobile, stacks.
*/
.mkt-date-pair {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--font-ar);
}
.mkt-date-pair__hijri {
  font-weight: 500; color: var(--brown-deep);
  font-feature-settings: "tnum" 1;
}
.mkt-date-pair__greg {
  font-size: var(--text-xs); color: var(--ink-muted);
  font-family: var(--font-num); font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: .01em;
}
/* Stack on narrow widths — inside side panels or on mobile. */
.mkt-date-pair--stacked { flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 480px) {
  .mkt-date-pair { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ════════════════════════════════════════════════════════
   .mkt-empty — empty state (page / section level)
   ════════════════════════════════════════════════════════ */
.mkt-empty {
  text-align: center; padding: var(--s-12) var(--s-6);
  color: var(--ink-muted);
}
.mkt-empty__ico {
  width: 56px; height: 56px; margin: 0 auto var(--s-3);
  color: var(--sand);
}
.mkt-empty__title { font-size: var(--text-lg); color: var(--brown); margin-bottom: var(--s-2); font-weight: 600; }
.mkt-empty__sub { font-size: var(--text-sm); margin-bottom: var(--s-4); }

/* ════════════════════════════════════════════════════════
   .mkt-skel — skeleton loader (per-section async)
   ════════════════════════════════════════════════════════
   Use this for ALL per-section async loads. The palm-pulse
   animation (in maktab.css) is reserved for full-page /
   initial-route loads only. Size variants:
     --row    14px  default
     --kpi    44px  KPI value placeholder
     --avatar 32px  round avatar placeholder
     --card   80px  card body placeholder
*/
.mkt-skel {
  background: linear-gradient(90deg, var(--straw) 0%, rgba(212,197,160,.4) 50%, var(--straw) 100%);
  background-size: 200% 100%;
  animation: mkt-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  height: 14px;
}
.mkt-skel--row    { height: 14px; }
.mkt-skel--kpi    { height: 44px; }
.mkt-skel--avatar { width: 32px; height: 32px; border-radius: 50%; }
.mkt-skel--card   { height: 80px; border-radius: var(--r-md); }
@keyframes mkt-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════
   Utilities
   ════════════════════════════════════════════════════════
   All utility classes are .mkt-* to avoid colliding with
   Frappe / Bootstrap 3 globals. Notably:
   - .row collides with Bootstrap's .row (grid gutter, margin: -15px)
   - .section-head collides with live maktab.css :963 which has 6
     !important declarations; the live version wins anyway.
   .mkt-* is collision-free with everything in the live codebase.
*/
.mkt-row { display: flex; align-items: center; gap: var(--s-3); }
.mkt-row--between { justify-content: space-between; }
.mkt-col { display: flex; flex-direction: column; gap: var(--s-3); }
.mkt-muted { color: var(--ink-muted); }
.mkt-divider { height: 1px; background: var(--border); margin: var(--s-4) 0; }
.mkt-section-head {
  font-size: var(--text-sm); color: var(--ink-muted);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding-bottom: var(--s-2); margin: var(--s-6) 0 var(--s-3);
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   Entity-home shared atoms — `.eh-*` namespace
   ───────────────────────────────────────────────────────────
   Shared by /app/thilth-report, /app/majlis-view,
   /app/maktab-operations and any future entity-home page.
   Phase 2B Step 6 — consolidated here from two duplicate blocks
   that lived in maktab.css (one from Step 3 Thilth, one from
   Step 4 Majlis). Source mockup:
   stage2-handoff/phase2b-handoff/mockups/entity-home-shared.css
   Page-scoped atoms (`.th-*`, `.mj-*`, `.mh-*`, `.mo-*`) stay
   alongside their owning page CSS in maktab.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Generic block + section heading ─────────────────────── */
.eh-block { display: flex; flex-direction: column; gap: var(--s-3); }
.eh-sect-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding-bottom: var(--s-1);
}
.eh-sect-head__title {
  font-size: var(--text-xl); font-weight: 600;
  color: var(--brown-deep); margin: 0;
}
.eh-sect-head__hint { font-size: var(--text-sm); color: var(--ink-muted); }
.eh-sect-head__action {
  margin-inline-start: auto;
  font-size: var(--text-sm); color: var(--brown);
  cursor: pointer;
}

/* ── Two-column layout used by every entity-home ─────────── */
.eh-two-col {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.eh-block--col { min-width: 0; }
.eh-pad-0 { padding: 0; overflow: hidden; }

.eh-muted { color: var(--ink-muted); }
.eh-success { color: var(--success); }
.eh-warn { color: var(--sand-deep); font-weight: 600; }
.eh-link { color: var(--brown); text-decoration: none; }
.eh-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--sand);
  text-underline-offset: 3px;
}

/* ── Page-head — entity-class gradient wash + basmala + title row (§6 rules 4-5: no spine) ── */
.eh-pg-head {
  position: relative;
  padding: var(--s-2) var(--s-5) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, transparent 70%);
}
.eh-pg-head[data-entity-class="charitable"]  { background: linear-gradient(180deg, var(--entity-charitable-bg) 0%, transparent 70%); }
.eh-pg-head[data-entity-class="operational"] { background: linear-gradient(180deg, rgba(107,90,72,.06) 0%, transparent 70%); }
.eh-pg-head[data-entity-class="personal"]    { background: linear-gradient(180deg, var(--entity-personal-bg) 0%, transparent 70%); opacity: .98; }
.eh-pg-head[data-entity-class="passthrough"] { background: linear-gradient(180deg, var(--entity-passthrough-bg) 0%, transparent 70%); }

.eh-basmala {
  text-align: center;
  font-size: var(--text-xl);
  color: var(--brown-deep);
  letter-spacing: .02em;
  padding: var(--s-3) 0 var(--s-4);
  line-height: 1.4;
  direction: rtl;
}
.eh-pg-head__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-4);
}
.eh-pg-head__main { min-width: 0; flex: 1; }
.eh-pg-head__title-row {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.eh-pg-head__title {
  font-size: var(--text-4xl); font-weight: 700;
  color: var(--brown-deep); line-height: 1;
  margin: 0;
}
.eh-pg-head__pill {
  font-size: var(--text-sm);
  padding: 4px 12px;
}
.eh-pg-head__pill svg { width: 12px; height: 12px; }
.eh-pg-head__pill::before { display: none; }
.eh-pg-head__date {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--text-md); color: var(--ink-muted);
}
.eh-pg-head__year { color: var(--brown); font-weight: 600; }
.eh-pg-head__sep { opacity: .5; }
.eh-pg-head__cutoff { font-size: var(--text-sm); }
.eh-pg-head__blurb {
  margin: var(--s-3) 0 0;
  max-width: 60ch;
  font-size: var(--text-sm); color: var(--ink-muted);
  line-height: 1.55;
}
.eh-pg-head__actions {
  display: flex; gap: var(--s-2); flex-shrink: 0;
  align-items: center;
}

/* ── Expense split bar ────────────────────────────────────── */
.eh-split {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.eh-split__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3);
}
.eh-split__title {
  margin: 0;
  font-size: var(--text-xl); font-weight: 600;
  color: var(--brown-deep);
}
.eh-split__total {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--text-sm); color: var(--ink-muted);
}
.eh-split__total-amt {
  font-size: var(--text-xl); font-weight: 700; color: var(--brown-deep);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.eh-split__total-amt .unit {
  font-size: var(--text-xs); color: var(--ink-muted);
  margin-inline-start: 4px; font-weight: 400;
}
.eh-split__bar {
  display: flex;
  height: 48px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.eh-split__seg {
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  font-weight: 600;
  transition: filter var(--dur-fast);
  background: var(--ink-muted);
  min-width: 0;
}
.eh-split__seg:hover { filter: brightness(1.08); }
.eh-split__seg--charitable   { background: var(--entity-charitable); }
.eh-split__seg--operational  { background: var(--sand-deep); }
.eh-split__seg--hospitality  { background: var(--basil-flower); }
.eh-split__seg--recurring    { background: var(--info); }
.eh-split__seg-pct {
  font-size: var(--text-sm);
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.eh-split__legend {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.eh-split__legend-item {
  display: flex; align-items: center; gap: var(--s-3);
}
.eh-split__dot {
  width: 12px; height: 12px; border-radius: 3px;
  flex-shrink: 0;
  background: var(--ink-muted);
}
.eh-split__dot--charitable  { background: var(--entity-charitable); }
.eh-split__dot--operational { background: var(--sand-deep); }
.eh-split__dot--hospitality { background: var(--basil-flower); }
.eh-split__dot--recurring   { background: var(--info); }
.eh-split__legend-lbl { font-size: var(--text-sm); color: var(--ink-muted); }
.eh-split__legend-amt {
  font-size: var(--text-lg); font-weight: 700; color: var(--brown-deep);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.eh-split__legend-amt .unit {
  font-size: var(--text-xs); color: var(--ink-muted);
  margin-inline-start: 4px; font-weight: 400;
}

/* ── KPI strip ────────────────────────────────────────────── */
.eh-kpi-row {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(4, 1fr);
}
.eh-kpi { padding: var(--s-4); position: relative; }
.eh-kpi .mkt-kpi__label { font-size: var(--text-sm); margin-bottom: var(--s-1); }
.eh-kpi .mkt-kpi__value { font-size: var(--text-2xl); }
.eh-kpi .mkt-kpi__value .unit { font-size: var(--text-sm); }
.eh-kpi__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-3); gap: var(--s-2);
}
.eh-kpi__foot .mkt-kpi__sub { font-size: var(--text-xs); margin-top: 0; }
.eh-spark { flex-shrink: 0; }
/* Neutral KPI tone — components.css doesn't ship this variant by default. */
.mkt-kpi--neutral { background: var(--cream); border-color: var(--border); }

/* ── Tables ──────────────────────────────────────────────── */
.eh-tbl { border: none; border-radius: 0; width: 100%; border-collapse: collapse; }
.eh-tbl th, .eh-tbl td {
  padding: var(--s-3);
  text-align: start;
  border-bottom: 1px solid var(--border-soft);
}
.eh-tbl th {
  font-weight: 600;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.eh-tbl th.num, .eh-tbl td.num {
  text-align: end;
  font-family: var(--font-num);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.eh-tbl__total td {
  font-weight: 600;
  background: var(--beige);
  border-top: 1px solid var(--border);
  border-bottom: none;
}

/* ── YoY chart ─────────────────────────────────────────── */
.eh-yoy { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.eh-yoy__bars {
  display: flex; justify-content: space-around; align-items: flex-end;
  gap: var(--s-4);
  height: 200px;
  padding: 0 var(--s-2);
}
.eh-yoy__group { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.eh-yoy__cluster {
  display: flex; align-items: flex-end; gap: 4px;
  width: 80px;
}
.eh-yoy__bar {
  flex: 1; border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: opacity var(--dur-fast);
}
.eh-yoy__bar:hover { opacity: .85; }
.eh-yoy__label {
  font-size: var(--text-sm); color: var(--ink-muted);
  font-feature-settings: "tnum" 1;
}
.eh-yoy__legend {
  display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--ink-muted);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
}
.eh-yoy__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.eh-yoy__legend-dot { width: 10px; height: 10px; border-radius: 2px; }

/* ── Recent transactions ──────────────────────────────── */
.eh-recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.eh-recent__row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm);
}
.eh-recent__row:last-child { border-bottom: none; }
.eh-recent__row:hover { background: var(--beige); }
.eh-recent__ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.eh-recent__row--income .eh-recent__ico { background: var(--success-bg); color: var(--success); }
.eh-recent__row--expense .eh-recent__ico { background: var(--crit-bg); color: var(--overdue); }
.eh-recent__ico svg { width: 14px; height: 14px; }
.eh-recent__date {
  width: 110px; flex-shrink: 0;
  color: var(--ink-muted); font-size: var(--text-xs);
}
.eh-recent__party {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--brown-deep);
}
.eh-recent__amt {
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}

/* ── Documents ───────────────────────────────────────── */
.eh-docs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.eh-docs__row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}
.eh-docs__row:last-child { border-bottom: none; }
.eh-docs__row--pinned { background: rgba(192,115,94,.06); }
.eh-docs__ico {
  width: 32px; height: 32px;
  background: var(--beige); color: var(--brown);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.eh-docs__ico svg { width: 16px; height: 16px; }
.eh-docs__body { flex: 1; min-width: 0; }
.eh-docs__name {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--brown-deep);
  display: flex; align-items: center; gap: 6px;
}
.eh-docs__pin { width: 14px; height: 14px; color: var(--overdue); flex-shrink: 0; }
.eh-docs__meta { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }

/* ── Mobile defaults for entity-home atoms ────────────── */
@media (max-width: 640px) {
  .eh-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .eh-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .eh-pg-head { padding: var(--s-2) var(--s-3) var(--s-4); }
  .eh-pg-head__row { flex-direction: column; align-items: flex-start; }
  .eh-pg-head__actions { flex-wrap: wrap; }
  .eh-pg-head__title { font-size: var(--text-3xl); }
  .eh-split__legend { grid-template-columns: 1fr; }
  .eh-split__head { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
}
@media (max-width: 640px) {
  /* Detail-view page-head: stack so the title gets full width and the actions
     wrap below it (no top navbar on mobile — the Frappe navbar hides at 768 —
     so the sticky tab strip below needs no offset). */
  .mkt-pg-head[data-variant="detail"] { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .mkt-pg-head[data-variant="detail"] .mkt-pg-head__actions { flex-wrap: wrap; }
  .mkt-pg-head[data-variant="detail"] .mkt-pg-head__actions .mkt-btn { flex: 1 1 140px; justify-content: center; min-height: 40px; }
  /* Display rows: tighter label column on a phone. */
  .mkt-prop { grid-template-columns: 104px 1fr; gap: var(--s-2); }
}

/* ── Dark-mode overrides (generic, page-agnostic) ─────────
   Live `--brown-deep` flips to a near-black surface tone in
   dark mode (it's the sidebar / navbar surface in this app,
   NOT the heading-text token the mockup assumed). Any heading
   styled `color: var(--brown-deep)` would render invisible
   against the dark beige BG, so we override to `--ink`
   (which DOES flip to a warm cream in dark mode). */
[data-theme="dark"] .eh-pg-head__title,
[data-theme="dark"] .eh-basmala,
[data-theme="dark"] .eh-sect-head__title,
[data-theme="dark"] .eh-split__title,
[data-theme="dark"] .eh-split__total-amt,
[data-theme="dark"] .eh-split__legend-amt,
[data-theme="dark"] .eh-recent__party,
[data-theme="dark"] .eh-docs__name,
[data-theme="dark"] .eh-kpi .mkt-kpi__value,
[data-theme="dark"] .eh-tbl__total td {
  color: var(--ink);
}