/* ============================================================================
   AL-MANARA — one theme system for the whole connected app
   ----------------------------------------------------------------------------
   Load this FIRST in every surface (shell + every module iframe + the portal),
   before styles-compiled.css / light-mode.css / any inline <style>.

   THE SYSTEM  (agreed with Manar, from the Doctor-Registry reference)
   - Neutrals: clean cool grey — light from the reference mock, dark from its
     dark variant. This is the ground everything sits on.
   - BLUE  = the interface colour: links, active nav / tab, selected row,
     focus ring, "info", secondary actions.  ("this does a job")
   - GOLD  = Al-Manara the brand: the ONE primary button per screen, the
     wordmark / logo, a hero KPI, the active rail marker.  ("this is us")
   - Status colours (green / amber / red) are for status ONLY.

   HOW THE SWITCH WORKS
   - Tokens live on `body`, so a body-level `.light-mode` class flips the whole
     set. `.light-mode` is the existing mechanism the shell already propagates
     to every iframe — kept on purpose.
   - theme.js resolves the user's choice (auto / light / dark) and toggles
     `body.light-mode` + `html.mn-light`; no CSS media query here, so the theme
     is one deterministic source of truth across every iframe.

   USING THE TOKENS  (never write a hex in a component again)
     background: var(--surface);
     color: var(--ink-dim);
     border: 1px solid var(--rule);
     primary button ....... background: var(--gold);  color: var(--on-gold);
     link / active / info .. color: var(--blue);
   ============================================================================ */

/* ---- DARK (the app's primary skin — deep, calm navy; not a glowing blue) - */
body {
  --bg:          #0f131b;   /* app ground — very dark, a whisper of navy */
  --bg-2:        #0b0e15;   /* deeper wells, page edges, the nav rail */
  --frame:       #0b0e15;   /* the title bar, the side rail and the ground the content panel rests on (desktop shell). Dark: the same as --bg-2. */
  --hairline:    color-mix(in srgb, var(--ink) 18%, var(--bg));   /* a quiet but VISIBLE line on the page colour (--rule is a divider for cards, about 1.06:1 on --bg: invisible there). Derived, so it is declared in each theme block. */
  --surface:     #171c26;   /* cards, panels, header, modals — muted blue-charcoal */
  --surface-2:   #1f2530;   /* inset fields, table head, hover rows, avatars */
  --rule:        #2a3140;   /* borders, dividers */
  --btn-border:  color-mix(in srgb, var(--ink) 52%, var(--surface));   /* the border of a SECONDARY button: 3:1 or more on the surface in both themes (--rule is a hairline for dividers, about 1.3:1, and left buttons looking borderless) */
  --overlay:     rgba(4,6,10,.66);   /* modal scrim */

  --ink:         #e7eaf0;   /* primary text + headings */
  --ink-dim:     #98a1b2;   /* body copy, secondary */
  --ink-faint:   #69717f;   /* captions, uppercase table heads, placeholders */
  --on-gold:     #1c1403;   /* text on a gold fill */
  --on-blue:     #ffffff;   /* text on a blue fill */

  --blue:        #5b90e6;   /* INTERFACE: links, active nav/tab, selected row, focus, info */
  --blue-strong: #7aa6ee;   /* hover on a blue link */
  --blue-wash:   rgba(91,144,230,.14);   /* info fill, selected row, pill bg */

  --gold:        #daa520;   /* BRAND: the one primary button, wordmark, hero KPI, active rail */
  --gold-soft:   #e8c56a;   /* gradient top / hover lift */
  --gold-deep:   #b8860b;   /* gradient base / pressed */
  --gold-ink:    #e2b64a;   /* gold used AS TEXT on a dark surface */
  --gold-wash:   rgba(218,165,32,.13);   /* brand highlight fill, glow */

  --purple:      #a78bfa;   /* the house / practice tag (from the mock) */
  --purple-wash: rgba(139,92,246,.16);

  --green:       #45c47d;   /* enabled / paid / active */
  --green-wash:  rgba(69,196,125,.15);
  --amber:       #e0a53a;   /* on hold / needs attention */
  --amber-wash:  rgba(224,165,58,.15);
  --red:         #ec6a5f;   /* overdue / delete / error */
  --red-wash:    rgba(236,106,95,.15);

  /* CHARTS (one source for every module): the SAME six hues in both themes, each stepped for its own surface and checked with the dataviz validator
     (lightness band, chroma floor, colour-blind separation, contrast >= 3:1). Fixed order, never cycled; a 7th group is folded into "Other".
     Axis text, grid lines and tooltips come from the theme too, so a chart never carries a colour of the other theme. */
  --chart-1:     #B98712;   /* gold (brand) */
  --chart-2:     #5B90E6;   /* blue */
  --chart-3:     #5E9A3C;   /* green */
  --chart-4:     #9F75CF;   /* violet */
  --chart-5:     #DE5D44;   /* red-orange */
  --chart-6:     #1F9F8E;   /* teal */
  --chart-other: #6b7280;
  --chart-text:  #98a1b2;
  --chart-grid:  rgba(255,255,255,.06);
  --gold-icon:   var(--gold-ink);   /* a gold ICON (a graphic needs only 3:1; text keeps --gold-ink): in the dark theme the same bright gold */

  --shadow-sm:   0 1px 2px rgba(2,6,18,.5);
  --shadow:      0 1px 2px rgba(2,6,18,.45), 0 16px 40px -22px rgba(2,6,18,.75);
  --shadow-lg:   0 24px 70px -20px rgba(2,6,18,.78);

  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   18px;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
}

/* ---- LIGHT  (from the reference mock — clean cool grey) -----------------
   Two selectors on purpose:
   - `html.mn-light body`  — set synchronously by the tiny <head> snippet, so
     tokens are right on the very first paint (no flash).
   - `body.light-mode`     — the class the shell toggles on itself and on every
     iframe; also what light-mode.css's existing overrides key off.
   theme.js keeps the two in sync.                                          */
html.mn-light body,
body.light-mode {
  --bg:          #e8ecf3;   /* the cool, airy ground — a touch deeper so white cards lift off it */
  --bg-2:        #dde3ee;
  --hairline:    color-mix(in srgb, var(--ink) 18%, var(--bg));   /* a quiet but VISIBLE line on the page colour (--rule is a divider for cards, about 1.06:1 on --bg: invisible there). Derived, so it is declared in each theme block. */
  --frame:       #d3dbe8;   /* a step DARKER than --bg-2: the panel (--bg #e8ecf3) now stands out from the title bar and the rail by tone alone (1.18:1, was 1.09:1), no shadow, no line. Only the shell frame uses it: --bg-2 serves wells and cards in every section. */
  --surface:     #ffffff;   /* cards, table, search, header */
  --surface-2:   #eef1f7;   /* inset fields, table head, hover rows, avatars */
  --rule:        #dfe4ec;   /* borders, row dividers */
  --logo-tile:   #0c2132;   /* the logo's own ground (the navy of the dark start-up screen and of the phone icon). The gold logo is made for a dark ground: on the Light ground it measures 2:1 (the word AL-MANARA 1.9:1), on this tile about 8:1. */
  --btn-border:  color-mix(in srgb, var(--ink) 52%, var(--surface));   /* the border of a SECONDARY button: 3:1 or more on the surface in both themes (--rule is a hairline for dividers, about 1.3:1, and left buttons looking borderless) */
  --overlay:     rgba(20,25,35,.4);

  --ink:         #1c2534;   /* headings — slate near-black */
  --ink-dim:     #64748b;   /* body / secondary — slate-500 */
  --ink-faint:   #94a3b8;   /* uppercase table heads, placeholders — slate-400 */
  --on-gold:     #1c1403;
  --on-blue:     #ffffff;

  --blue:        #2563eb;   /* the mock's blue — links, active, info */
  --blue-strong: #1d4ed8;
  --blue-wash:   #e9f0fe;

  --gold:        #c8901a;   /* BRAND primary-button fill on light — vivid, dark text on top */
  --gold-soft:   #e0ad3c;
  --gold-deep:   #a0700f;
  --gold-ink:    #8a5e0c;   /* gold as TEXT on light — deep, ~5:1 */
  --gold-wash:   rgba(200,144,26,.12);

  --purple:      #6d28d9;
  --purple-wash: #ede9fe;

  --green:       #15803d;
  --green-wash:  #dcfce7;
  --amber:       #b07914;
  --amber-wash:  #fef1d6;
  --red:         #c0453a;
  --red-wash:    #fde8e6;

  /* charts, light theme: the same six hues in their CLEAR, vivid form. Manar saw that the colour a slice takes under the pointer (Chart.js saturates and darkens it) looked right while the resting colour looked dull and muddy, so the hovered shades ARE the resting shades now (validated: lightness, chroma, colour-blind separation 15.2 and normal-vision floor 30 pass; contrast on white 3:1 or more for four hues, gold 2.2 and teal 2.4 are WARN: relief = the legend names and the tooltips). Cool slate text and grid. */
  --chart-1:     #EF9D04;   /* gold */
  --chart-2:     #1388FD;   /* blue */
  --chart-3:     #61A13B;   /* green */
  --chart-4:     #A550DE;   /* violet */
  --chart-5:     #FF431D;   /* red-orange */
  --chart-6:     #25BDA6;   /* teal */
  --chart-other: #8b95a5;
  --chart-text:  #55647a;
  --chart-grid:  rgba(28,37,52,.08);
  --gold-icon:   #CD7E00;   /* light theme: a gold icon in the CLEAR gold of the charts, not the muddy brown of --gold-ink (3.2:1, enough for a graphic) */
  --kpi-num:     #CD7E00;   /* the big figure of a statistic card: a CLEAR gold of the donut gold family (large text, 3.2:1); the old muddy #BD871C looked dull next to the chart; small gold text keeps --gold-ink */

  --shadow-sm:   0 1px 2px rgba(20,25,35,.05), 0 1px 3px rgba(20,25,35,.09);
  --shadow:      0 1px 2px rgba(20,25,35,.05), 0 14px 34px -20px rgba(20,25,35,.18);
  --shadow-lg:   0 24px 60px -18px rgba(20,25,35,.22);
}

/* ---- cross-fade on switch (added to <html> for ~380ms by theme.js) ------- */
/* THE SWITCH IS INSTANT AND ATOMIC (2026-10-12): a smooth 0.34 s fade made it look half-switched, because the shell, every module frame and every element with its own
   transition (Tailwind transition-colors etc.) did not start at the same moment. While the classes flip, ALL transitions are off (`theme-switching`), then they come back. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
html.theme-anim,
html.theme-anim body,
html.theme-anim body * {
  transition: none !important;   /* old fade, kept as a no-op for pages that still add the class */
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim body, html.theme-anim body * { transition: none !important; }
}

/* ---- a couple of primitives every surface can lean on ------------------- */
.mn-focus:focus-visible,
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--blue-wash); color: var(--ink); }

/* PRIMARY ACTION colour (2026-10-08, Manar: one accent logic for the whole system): the interface blue, slightly deeper so white text
   passes 4.5:1 on it in dark and light. Gold stays for brand accents and for buttons that POST to the ledger on purpose. */
body { --primary: color-mix(in srgb, var(--blue) 80%, black); --primary-hover: color-mix(in srgb, var(--blue) 90%, black); --on-primary: #ffffff; }

/* DESIGNED EMPTY STATE (2026-10-08): never a blank area or one grey sentence - a soft icon, a title and one line on what will appear / how to start.
   Built by window.mnEmpty(icon, title, text) in theme.js; same look as the portal and Doctors empty states. */
.mn-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; text-align: center; }
.mn-empty-ico { width: 52px; height: 52px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-faint); font-size: 21px; border: 1px solid var(--rule); }
.mn-empty-title { font-size: var(--fs-value); font-weight: 600; color: var(--ink); }
.mn-empty-text { font-size: var(--fs-caption); color: var(--ink-dim); max-width: 46ch; line-height: 1.5; }
body.light-mode .mn-empty-title { color: var(--ink) !important; } body.light-mode .mn-empty-text { color: var(--ink-dim) !important; }
/* the same empty state inside a fixed-height panel (a 160-180 px chart or list): less padding, so the 52 px icon, the title and two lines of text fit without overflowing */
.mn-empty-tight .mn-empty, .mn-chart-empty .mn-empty { padding: 6px 12px; }
.mn-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ADD PANEL (2026-10-08, Manar): a permanent entry form above a table wastes the best part of the screen. The form keeps its markup, ids and
   handlers; it is hidden until a "+ New ..." trigger opens it as a centred card (theme.js: window.mnAddPanel). */
.mn-addpanel { display: none !important; }
.mn-addpanel.mn-open { display: flex !important; position: fixed; z-index: 200; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(620px, 92vw); max-height: 86vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 56px 20px 20px; box-shadow: var(--shadow); margin: 0 !important; }
.mn-addpanel-head { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; border-bottom: 1px solid var(--rule); font-size: var(--fs-title); font-weight: 700; color: var(--ink); }
.mn-addpanel-head button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--btn-border, var(--rule)); background: var(--surface-2); color: var(--ink-dim); cursor: pointer; line-height: 1; }
.mn-addpanel-head button:hover { color: var(--ink); border-color: var(--ink-faint); }
.mn-addbackdrop { position: fixed; inset: 0; z-index: 190; background: rgba(8, 12, 20, .55); display: none; }
.mn-addbackdrop.on { display: block; }
/* the trigger: same look as "Add Expense" / "Add Doctor" */
.mn-add-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px; font-size: var(--fs-value); font-weight: 600; background: var(--primary); color: var(--on-primary); border: 0; cursor: pointer; white-space: nowrap; }
.mn-add-trigger:hover { background: var(--primary-hover); }

/* TOUCH TARGETS IN DIALOGS (2026-10-09, phone pass at 320 px): every dialog of every module is a `.fixed.inset-0` overlay; its buttons, selects and
   fields were 22-33 px high (close buttons 22 px, "Add Item" 14 px). On a phone / touch screen they are at least 40 px. Desktop untouched. */
@media (max-width: 767px), (pointer: coarse) {
  .fixed.inset-0 :is(button, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"])) { min-height: 40px; }
  .fixed.inset-0 :is([id^="close-"], [onclick*="close" i]) { min-width: 40px; }
}
/* a text field or select used as a flex item (`flex-1`) must be allowed to shrink below its default width, otherwise a "[field] [Add]" row is wider than the
   dialog and the whole form scrolls sideways (HR Edit Employee, 2026-10-09, 320 px). Safe on every screen size. */
.fixed.inset-0 :is(input, select, textarea) { min-width: 0; }

/* Android Chrome draws its own grey-blue rectangle around whatever is tapped (found on the doctor portal 2026-10-24, same cause here: no rule anywhere in the app). Off for every control; the pressed / hover / focus styles of each component stay as they are. */
button, a, summary, select, [role="button"], [onclick] { -webkit-tap-highlight-color: transparent; }

/* THE LOGO ON LIGHT (2026-10-27, Manar: the logo's colours do not suit the Light theme; recolouring the mark was rejected, a tile behind it was chosen).
   Light theme only: every place that shows the transparent gold logo puts it on the logo tile. The dark theme needs nothing (the ground is already dark). */
html.mn-light .lg-mark { background: var(--logo-tile); border-color: transparent; }
html.mn-light .lg-mark img { content: url('assets/logo-mark.png'); box-sizing: border-box; padding: 4px; }   /* in a small tile only the lighthouse and the M (assets/logo-mark.png, 192 px, sharp up to a 3x screen): the word AL-MANARA is too small to read at 44 px and is written beside it anyway */
html.mn-light img[src*="logo-transparent"]:not(.lg-mark img) { content: url('assets/logo-mark.png'); box-sizing: border-box; width: 44px; height: 44px; padding: 4px; object-fit: contain; flex: none; background: var(--logo-tile); border-radius: 10px; }   /* ONE size in every section (44 px, the word AL-MANARA is written beside it anyway); the first try added padding on top of each section's own size: 68 px patches, one spilling out of its header */
html.mn-light #dm-head img[src*="logo-transparent"] { width: 44px !important; height: 44px !important; }   /* Dentomate sets its own 40 / 56 px (with !important) for its header logo; on the tile every section uses the same 44 px */
html.mn-light #login-card img[alt="Al-Manara Logo"] { mix-blend-mode: normal; border-radius: 16px; }

/* THE TOP LINE OF A SECTION (2026-10-27): the shell now draws the one line around the content panel (index.html, `.panel`), so a section's own header must not add a second one at the top.
   Accounting (#acct-head), Doctors (#dr-head), Storex (#global-header) and Dentify (nav.glass-panel) used to. Not on a phone: there the section starts under the shell's top bar and keeps its line. */
html:not(.mn-nav-menu) #acct-head, html:not(.mn-nav-menu) #dr-head, html:not(.mn-nav-menu) #global-header, html:not(.mn-nav-menu) nav.glass-panel, html:not(.mn-nav-menu) #dm-head { border-top-width: 0 !important; }
/* Dentomate's header band was painted in the ground colour (--bg-2), which hid the rounded corner of the panel. It must be the PANEL colour (--bg), SOLID: the header stays at the top while the page scrolls under it, and a transparent one (the first version of this rule) let the cards and the table show through it (found by Manar on build #23). */
html:not(.mn-nav-menu) body #dm-head { background: var(--bg) !important; }   /* `body` raises it above dentomate/app.html's own `body.light-mode #dm-head { background: var(--bg-2) !important }` */

/* THE HEADER BAND OF A SECTION (2026-10-27, round 4): in Dark the headers of Accounting, Doctors and Storex were painted in the ground colour (rgb 11,14,21), so the top of the panel had no edge at all, while Calendar and Scan (rgb 23,28,38) were fine.
   On the desktop every one of them is --surface, in both themes (in Light that is the white they already were). Storex's gradient is switched off with it. */
html:not(.mn-nav-menu) body #acct-head, html:not(.mn-nav-menu) body #dr-head, html:not(.mn-nav-menu) body #global-header, html:not(.mn-nav-menu) body nav.glass-panel { background: var(--surface) !important; background-image: none !important; }

/* THE LINES OF DENTOMATE'S HEADER (2026-10-27): the header is now the panel colour, so its bottom line and the divider beside the logo, both --rule, almost vanished (Manar: 'they are no longer clear'). They use --hairline. */
html:not(.mn-nav-menu) body #dm-head { border-bottom-color: var(--hairline) !important; }
html:not(.mn-nav-menu) body #dm-head .border-l { border-color: var(--hairline) !important; }