/* ============================================================================================
   HMS themes — Light and Dark.

   app.css declares every design token with its NATIVE value (the original look, untouched).
   This file redefines the same tokens for the two other appearances, selected by the
   data-theme attribute on <html>, which the head script in layout.ejs sets before first paint:

     native  — the original "Ocean" theme, as it always was (tokens in app.css)
     light   — cream white, dark grey and black type, dark yellow / deep orange accents, blue
               only where something must read as "primary" (buttons, links, focus)
     dark    — the light theme with its whites turned to blacks; the yellow / orange / blue
               accents stay, except that blue is lifted a step so text keeps a 4.5:1 contrast
               on a near-black ground (the dark blue that works on cream fails on black)

   "system" is a PREFERENCE, not a theme — the head script resolves it to light or dark from
   prefers-color-scheme, so this file never needs a media query.

   Rules that are not plain token swaps (icon weight, the logo plate, paper surfaces, glass)
   live at the bottom, each scoped to the theme that needs it.
   ============================================================================================ */

/* ---- Light ---------------------------------------------------------------------------------- */
html[data-theme="light"] {
  color-scheme: light;
  --theme-color: #f6f5f0;

  --bg: #f6f5f0;             /* cream white */
  --panel: #ffffff;
  --surface-2: #f1efe8;
  --surface-3: #e7e4db;
  --hover: #f3f1eb;
  --active-bg: #fdeedd;      /* warm tint under a selected row */
  --ink: #1a1a1a;
  --ink-2: #3d3d3d;          /* icons, secondary text: dark grey */
  --muted: #6b6b6b;
  --on-brand: #ffffff;
  --line: #e3e0d7;
  --line-2: #cfcabd;
  --focus: #bcd3f5;
  --scrollbar: #d8d4ca;
  --brand: #262626;          /* black fills: room pills, mobile top bar */
  --brand-2: #1f6fd0;        /* blue — primary buttons, links, focus; nowhere else */
  --brand-2-hover: #185cb0;
  --link: #1d5fc2;
  --accent: #b8860b;         /* dark yellow */
  --ok: #2e7d4f;             /* success keeps its green: a payroll status must not read as a warning */
  --ok-bg: #e6f2ea;
  --warn: #9a6b00;           /* dark yellow, darkened for text */
  --warn-bg: #fff4d6;
  --danger: #d9480f;         /* deep orange */
  --danger-bg: #fdeae0;
  --info: #1f6fd0;
  --info-bg: #e7effc;
  --paper: #ffffff;
  --paper-ink: #1a1a1a;
  --input-bg: #ffffff;
  --tooltip-bg: #1f1f1f;
  --tooltip-ink: #ffffff;
  --backdrop: rgba(20,18,10,.45);
  --shadow: 0 1px 2px rgba(20,18,10,.06), 0 1px 3px rgba(20,18,10,.04);
  --shadow-2: 0 4px 14px rgba(20,18,10,.10);

  --side-bg: #fbfaf6;
  --side-ink: #3d3d3d;
  --side-hover: #f1efe8;
  --side-active-bg: #fdeedd;
  --side-active-ink: #d9480f;
  --topbar-bg: #1f1f1f;
  --topbar-ink: #ffffff;
  --logo-plate: transparent;

  --toast-ok-bg: #e6f2ea; --toast-ok-ink: #1f5a38; --toast-ok-line: #b9dcc6;
  --toast-bad-bg: #fdeae0; --toast-bad-ink: #8a2e0a; --toast-bad-line: #f3c4ad;

  /* highlight palette, warmed to sit on cream */
  --hl-name: #ffe3c2; --hl-source: #ffd9d4; --hl-booking: #d6f1d9; --hl-arrival: #d9eaff;
  --hl-departure: #e8dffb; --hl-amount: #fff3bf; --hl-gray: #ebe8e0;

  /* enhance.css */
  --panel-glow: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  --glass-bg: rgba(255,255,255,.78);
  --glass-line: rgba(255,255,255,.7);
  --fx-shadow-sm: 0 1px 2px rgba(20,18,10,.05), 0 2px 6px rgba(20,18,10,.06);
  --fx-shadow-md: 0 2px 6px rgba(20,18,10,.06), 0 10px 24px rgba(20,18,10,.08);
  --fx-shadow-lg: 0 8px 20px rgba(20,18,10,.10), 0 24px 60px rgba(20,18,10,.12);
}

/* ---- Dark ----------------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-color: #121212;

  --bg: #121212;
  --panel: #1b1b1d;
  --surface-2: #252528;
  --surface-3: #303034;
  --hover: #232326;
  --active-bg: #3a2314;      /* the orange tint, darkened */
  --ink: #ececec;
  --ink-2: #c6c6c6;
  --muted: #9b9b9b;
  --on-brand: #ffffff;
  --line: #2d2d31;
  --line-2: #3d3d42;
  --focus: #2b4f80;
  --scrollbar: #3a3a3f;
  --brand: #2a2a2e;
  --brand-2: #3d8af7;        /* blue lifted one step for the black ground */
  --brand-2-hover: #2f78dd;
  --link: #6ea8f7;
  --accent: #e0a526;         /* dark yellow — the same hue, brightened a touch for black */
  --ok: #4fbf7f;
  --ok-bg: #163523;
  --warn: #e3a812;
  --warn-bg: #3a2d08;
  --danger: #ff7a45;         /* deep orange */
  --danger-bg: #3b1a0d;
  --info: #6ea8f7;
  --info-bg: #172a45;
  --paper: #ffffff;          /* email bodies / PDF / print previews stay white — they were designed for it */
  --paper-ink: #1a1a1a;
  --input-bg: #161618;
  --tooltip-bg: #f2f2f2;
  --tooltip-ink: #111111;
  --backdrop: rgba(0,0,0,.6);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,.5);

  --side-bg: #161618;
  --side-ink: #c6c6c6;
  --side-hover: #232326;
  --side-active-bg: #3a2314;
  --side-active-ink: #ff8a4c;
  --topbar-bg: #1b1b1d;
  --topbar-ink: #f2f2f2;
  --logo-plate: #ffffff;     /* a tenant logo drawn for white paper keeps a small white plate */

  --toast-ok-bg: #163523; --toast-ok-ink: #a5e6c0; --toast-ok-line: #2a6a44;
  --toast-bad-bg: #3b1a0d; --toast-bad-ink: #ffc2a6; --toast-bad-line: #7a3a1e;

  --hl-name: #5a3a14; --hl-source: #5a2222; --hl-booking: #1d4a2a; --hl-arrival: #1b3a55;
  --hl-departure: #3a2d5a; --hl-amount: #5a4d12; --hl-gray: #2b2b2f;

  --panel-glow: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%);
  --glass-bg: rgba(27,27,29,.82);
  --glass-line: rgba(255,255,255,.08);
  --fx-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --fx-shadow-md: 0 2px 6px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.5);
  --fx-shadow-lg: 0 8px 20px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.6);
}

/* ---- Rules that are more than a token swap -------------------------------------------------- */

/* Crisper rail icons on the two new themes: a heavier stroke and a fainter duotone fill, so the
   glyph reads as one clean line on the slim rail (the native theme keeps its softer duotone). */
html[data-theme="light"] .side-ico svg, html[data-theme="dark"] .side-ico svg {
  stroke-width: 1.9; shape-rendering: geometricPrecision;
}
html[data-theme="light"] .side-ico svg [fill-opacity], html[data-theme="dark"] .side-ico svg [fill-opacity] { fill-opacity: .08; }
html[data-theme="light"] .side-nav a.active .side-ico svg [fill-opacity],
html[data-theme="dark"] .side-nav a.active .side-ico svg [fill-opacity] { fill-opacity: .18; }
/* a left accent bar marks the selected module, as on a slim desktop rail */
html[data-theme="light"] .side-nav a.active::before, html[data-theme="dark"] .side-nav a.active::before {
  content: ""; position: absolute; left: -8px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-active-ink);
}
html[data-theme="light"] .side-brand-name, html[data-theme="dark"] .side-brand-name { color: var(--ink-2); }
html[data-theme="light"] .side-nav a:hover, html[data-theme="dark"] .side-nav a:hover { color: var(--ink); }

/* Tenant logos are drawn for white paper; give them a plate on the dark theme. */
html[data-theme="dark"] .side-logo img, html[data-theme="dark"] .login-card > img {
  background: var(--logo-plate); border-radius: 8px; padding: 3px;
}

/* Surfaces that must stay paper-white in every theme: rendered email, PDF and print previews,
   the payslip twin. A dark page around a white document is how every mail client does it. */
.paper, html[data-theme="dark"] .mv-viewer-card iframe, html[data-theme="dark"] .mail-html, html[data-theme="dark"] .pdf-preview {
  background: var(--paper); color: var(--paper-ink);
}

/* Native form controls and scrollbars follow color-scheme; chips drawn with a hard white keep legible. */
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=url],
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: var(--input-bg); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] ::placeholder { color: var(--muted); }
html[data-theme="dark"] hr { border-color: var(--line); }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] img.inv, html[data-theme="dark"] .invert-dark { filter: invert(1) hue-rotate(180deg); }

/* The Microsoft sign-in button is a brand asset: it stays near-black on light and gets a light
   face on dark so it does not vanish into the page. */
html[data-theme="dark"] .ms-btn { background: #f2f2f2; color: #1a1a1a; }
html[data-theme="dark"] .ms-btn:hover { background: #ffffff; }

/* Light theme: headings in true black, the rail a shade warmer than the panels. */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] .page-title { color: #111111; }

/* Selection colour should not stay the browser default blue on the warm themes. */
html[data-theme="light"] ::selection { background: #fde2c4; }
html[data-theme="dark"] ::selection { background: #5a3a14; }