/*
 * HappyIntra's light theme (user, 29 Oct 2026: "keep the current theme but a sun icon to change to light
 * theme, do not break any UI or color of the current theme").
 *
 * Every rule here is under [data-theme="light"], which assets/js/theme.js sets only when the person
 * chose light. Without it — the default — nothing in this file applies and the dark theme is exactly
 * as it was. The palette re-points the shared colour tokens (assets/css/style.css, and the same names
 * in apps/bi), so everything built on them follows; the few colours written as fixed dark values are
 * put right one by one below.
 */

:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f2f5fa;
  --surface:   #ffffff;
  --panel:     #ffffff;
  --panel-2:   #eaf0f8;
  --line:      #d5deeb;

  --ink:       #0f1b2d;
  --muted:     #475a76;
  --faint:     #7d8ca5;

  /* Darker than the dark theme's, so text and lines in these colours read on white. */
  --accent:    #0891b2;
  --accent-2:  #4f46e5;
  --ok:        #059669;
  --warn:      #b45309;
  --danger:    #db2777;
  --red:       #dc2626;

  /* Buttons keep the bright gradient: their dark text was chosen for it. */
  --grad-accent: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
  --glow:        0 0 0 1px rgba(8,145,178,.35), 0 6px 22px -8px rgba(8,145,178,.35);
  --shadow-card: 0 1px 2px rgba(15,27,45,.05), 0 8px 24px -14px rgba(15,27,45,.18);

  /* HappyBI's own map colours */
  --atoll:     #7c3aed;
  --resort:    #db2777;
  --airport:   #059669;
  --island:    #b45309;
}

/* The page behind everything (login.html sets it on <html> itself). */
html[data-theme="light"] { background: #f2f5fa; }

/* The portal's moving field stays (user, 29 Oct 2026) — backdrop.js paints it in the light palette. */

/* Pop-up shadows were tuned for navy; on white they would look smudged. */
:root[data-theme="light"] dialog { box-shadow: 0 24px 60px -24px rgba(15,27,45,.35); }
:root[data-theme="light"] dialog::backdrop { background: rgba(15,27,45,.35); }

/* Opened rows' inner panels — a dark tint in the dark theme, a faint grey here. */
:root[data-theme="light"] .it-table tr.it-detail > td,
:root[data-theme="light"] .rq tr.detail > td,
:root[data-theme="light"] .list-table tr.adj-detail > td { background: rgba(15,27,45,.035); }

/* Operations: amber and red text written for navy, darker on white. */
:root[data-theme="light"] .dl-details .dd-text { color: #b45309; }
:root[data-theme="light"] .dl-details .dd-cp { color: #c2410c; }
:root[data-theme="light"] .dl-cxl-chip, :root[data-theme="light"] .dl-rem-why, :root[data-theme="light"] .dl-cxl-btn.warn { color: #dc2626; }
:root[data-theme="light"] tr:not(.dl-cxl) .dl-rem-why { color: var(--muted); }
:root[data-theme="light"] .dl-table tr.dl-cxl td { background: rgba(220,38,38,.08); }

/* Mart: the label template's checkerboard. */
:root[data-theme="light"] .tpl-canvas { background: repeating-conic-gradient(#e7ecf4 0 25%, #f4f7fb 0 50%) 0 0 / 18px 18px; }
:root[data-theme="light"] .tpl-scale .lbl { box-shadow: 0 0 0 calc(1px / var(--k)) rgba(15,27,45,.12), 0 20px 50px -10px rgba(15,27,45,.25); }

/* HappyBI */
:root[data-theme="light"] input:hover:not(:disabled),
:root[data-theme="light"] select:hover:not(:disabled),
:root[data-theme="light"] textarea:hover:not(:disabled),
:root[data-theme="light"] .sdrop-btn:hover:not(:disabled) { border-color: #a9b8cf; }
/* HappyBI's top bar: a light pill, its controls outlined in grey instead of white. */
:root[data-theme="light"] .topnav {
  background: rgba(255,255,255,.88); border-color: rgba(15,27,45,.10);
  box-shadow: 0 18px 40px -22px rgba(15,27,45,.35), 0 2px 8px -4px rgba(15,27,45,.12);
}
:root[data-theme="light"] .tn-links a:hover { background: rgba(15,27,45,.06); }
:root[data-theme="light"] .tn-burger,
:root[data-theme="light"] .topnav .legend-fixed,
:root[data-theme="light"] .topnav .sb-link { background-color: rgba(15,27,45,.04); border-color: rgba(15,27,45,.14); }
:root[data-theme="light"] .tn-burger:hover,
:root[data-theme="light"] .topnav .sb-link:hover { background-color: rgba(15,27,45,.08); border-color: rgba(15,27,45,.24); }
/* The links folded into a card on narrow screens. */
@media (max-width: 1260px) {
  :root[data-theme="light"] .tn-links { background: var(--panel); border-color: var(--line); box-shadow: 0 20px 44px -22px rgba(15,27,45,.35); }
}
:root[data-theme="light"] .cmp-child { background: rgba(15,27,45,.04); }
:root[data-theme="light"] .br-abs { background: rgba(15,27,45,.12); }
:root[data-theme="light"] .co-dot { stroke: #ffffff; }
:root[data-theme="light"] * { scrollbar-color: rgba(8,145,178,.45) rgba(15,27,45,.06); }
:root[data-theme="light"] *::-webkit-scrollbar-track,
:root[data-theme="light"] *::-webkit-scrollbar-track:horizontal { background: rgba(15,27,45,.05); box-shadow: inset 0 0 0 1px rgba(15,27,45,.06); }

/* The switch itself (assets/js/theme.js): a round button in the top bar. */
.hi-theme {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; transition: color var(--speed, .18s), border-color var(--speed, .18s), background var(--speed, .18s);
}
.hi-theme:hover { color: var(--ink); border-color: var(--accent); background: var(--panel-2); }
.hi-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hi-theme svg { width: 17px; height: 17px; }
/* Where a page has no top bar (sign-in): the corner. */
.hi-theme.corner { position: fixed; top: 14px; right: 14px; z-index: 50; background: var(--surface); }
/* HappyBI: its top bar is full already, so the switch floats bottom-right. */
.hi-theme.corner.low { top: auto; bottom: 22px; right: 18px; z-index: 1200; box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }