/* ==========================================================================
   Evri Manifest — app styles (single source of truth).

   THEMING
   -------
   Every colour is a token defined on :root below. A theme is just a token
   override block keyed on the root's data-theme attribute, e.g.

       :root[data-theme="solarized"] { --bg:#002b36; --panel:#073642; ... }

   The theme toggle in the layout sets data-theme; add a value here and the
   whole UI re-skins. Components never hard-code colours — only tokens — so a
   new theme needs no component edits.
   ========================================================================== */

/* ---- Theme tokens: dark (default) ---- */
:root {
    --bg:#0b0f14; --panel:#141b24; --panel2:#1b2531; --line:#26313f;
    --text:#e7eef6; --muted:#8ea0b5; --accent:#38bdf8; --accent2:#0ea5e9;
    --green:#22c55e; --amber:#f59e0b; --red:#ef4444;
    --radius:14px;
    --input-radius:10px;
    --focus-ring:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    --on-accent:#04121b;   /* text/ink on an accent-filled surface */
}

/* ---- Theme tokens: light ---- */
:root[data-theme="light"] {
    --bg:#f4f6f9; --panel:#ffffff; --panel2:#eef2f7; --line:#d9e0ea;
    --text:#101720; --muted:#5a6b7e; --accent:#0284c7; --accent2:#0369a1;
}

/* ---- Base ---- */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
    background:var(--bg); color:var(--text);
    font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-text-size-adjust:100%; padding-bottom:env(safe-area-inset-bottom);
}
.wrap { max-width:1200px; margin:0 auto; padding:12px 12px 48px; }
.wrap.wide { max-width:1200px; }   /* opt-in wide column for data-heavy pages */

/* ---- App bar / nav ---- */
header.appbar {
    position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px;
    background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
    padding:10px 12px; border-bottom:1px solid var(--line);
}
header.appbar h1 { font-size:16px; margin:0; letter-spacing:.2px; }
header.appbar .spacer { flex:1; }
.theme-btn {
    background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:10px; padding:6px 10px; font-size:13px; cursor:pointer;
}
.theme-btn:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }

/* ---- Panels ---- */
.panel {
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px; margin:12px 0;
}
.panel h2 {
    font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
    margin:0 0 10px; font-weight:600;
}

/* ==========================================================================
   Forms — the canonical text-field style. This ONE rule is the template for
   every text input (the password box included), so they are always identical.
   Add a new text-like type to the list and it inherits the whole treatment.
   ========================================================================== */
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 6px; font-weight:600; }

select, textarea,
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], input[type=tel], input[type=url] {
    width:100%; background:var(--panel2); color:var(--text);
    border:1px solid var(--line); border-radius:var(--input-radius);
    padding:12px 14px; font-size:15px; font-family:inherit; line-height:1.3;
    appearance:none; -webkit-appearance:none; outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
select:hover, textarea:hover,
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=search]:hover,
input[type=number]:hover, input[type=date]:hover, input[type=tel]:hover, input[type=url]:hover {
    border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
}
select:focus, textarea:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus,
input[type=number]:focus, input[type=date]:focus, input[type=tel]:focus, input[type=url]:focus {
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
    background:var(--panel);
}
::placeholder { color:var(--muted); opacity:.75; }

select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238ea0b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.6); cursor:pointer; }
textarea {
    min-height:220px; resize:vertical; font-size:13px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.row { display:flex; gap:10px; }
.row > * { flex:1; }

/* ---- Buttons ---- */
button.primary {
    width:100%; margin-top:14px; background:linear-gradient(180deg,var(--accent),var(--accent2));
    color:var(--on-accent); border:0; border-radius:12px; padding:14px; font-size:16px; font-weight:700;
    cursor:pointer;
}
.runpill {
    display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px;
    background:var(--panel2); border:1px solid var(--line); color:var(--accent);
}

/* ==========================================================================
   Custom date picker (matches the text-field style).
   ========================================================================== */
.dp { position:relative; }
.dp-field {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:var(--input-radius);
    padding:12px 14px; font-size:15px; font-family:inherit; cursor:pointer; text-align:left;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.dp-field:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dp-field[aria-expanded="true"] { border-color:var(--accent); box-shadow:var(--focus-ring); }
.dp-field svg { color:var(--muted); flex:0 0 auto; }
.dp-pop {
    position:absolute; z-index:30; top:calc(100% + 6px); left:0;
    width:308px; max-width:calc(100vw - 32px);
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px;
    box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dp-title { font-size:14px; }
.dp-nav {
    width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:18px; line-height:1;
    background:var(--panel2); color:var(--text); border:1px solid var(--line);
}
.dp-nav:hover { border-color:var(--accent); color:var(--accent); }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-dow span { text-align:center; font-size:11px; color:var(--muted); padding:4px 0; font-weight:700; }
.dp-day {
    height:36px; border:0; background:transparent; color:var(--text); border-radius:9px;
    cursor:pointer; font-size:14px; position:relative; font-family:inherit;
}
.dp-day.dp-empty { visibility:hidden; cursor:default; }
.dp-day:hover:not(.dp-empty):not(.sel) { background:var(--panel2); }
.dp-day.today { outline:1px solid var(--muted); outline-offset:-1px; }
.dp-day.has { font-weight:800; color:var(--accent); }
.dp-day.has::after {
    content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.dp-day.sel { background:var(--accent); color:var(--on-accent); font-weight:800; }
.dp-day.sel::after { background:var(--on-accent); }
.dp-foot {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
    font-size:12px; color:var(--muted);
}
.dp-today {
    background:var(--panel2); color:var(--accent); border:1px solid var(--line);
    border-radius:8px; padding:6px 10px; cursor:pointer; font-weight:700; font-family:inherit;
}
.dp-today:hover { border-color:var(--accent); }
.dp-legend { display:inline-flex; align-items:center; gap:6px; }
.dp-legend .dp-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ==========================================================================
   Alerts — first two lines, high visibility.
   ========================================================================== */
.alerts { border-radius:var(--radius); overflow:hidden; margin:12px 0; }
.alert { display:flex; gap:8px; padding:10px 12px; font-size:14px; border-bottom:1px solid rgba(0,0,0,.2); }
.alert:last-child { border-bottom:0; }
.alert .tag { font-weight:800; min-width:82px; }
.alert.hazard   { background:#3b0d0d; color:#ffd7d7; }
.alert.watch    { background:#3a2a06; color:#ffe9b8; }
.alert.cycling  { background:#0d2a3b; color:#cdeeff; }
.alert.missing  { background:#2a133b; color:#efd7ff; }
.alert.escalate { outline:2px solid var(--red); outline-offset:-2px; }
.alert.ok       { background:#0c2a17; color:#c9f7d8; }
:root[data-theme="light"] .alert.hazard { background:#fde4e4; color:#7a1010; }
:root[data-theme="light"] .alert.watch  { background:#fdefcf; color:#7a5500; }
:root[data-theme="light"] .alert.cycling{ background:#dcf0fb; color:#08415c; }
:root[data-theme="light"] .alert.missing{ background:#efe1fb; color:#4a1170; }
:root[data-theme="light"] .alert.ok     { background:#d7f5e2; color:#0a5a2c; }

/* ---- Stat tiles ---- */
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tile { background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px; }
.tile .k { font-size:12px; color:var(--muted); }
.tile .v { font-size:22px; font-weight:800; margin-top:2px; }
.tile .v small { font-size:13px; font-weight:600; color:var(--muted); }

/* ---- Tables (all cells left-aligned) ---- */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); }
thead th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
tfoot td { font-weight:800; border-top:2px solid var(--line); }
.subtle td { color:var(--muted); }

/* ---- EHR / badges / progress / misc ---- */
.ehr { font-weight:900; }
.ehr.green { color:var(--green); }
.ehr.amber { color:var(--amber); }
.ehr.red   { color:var(--red); }
.badge { font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px; }
.badge.green  { background:rgba(34,197,94,.18);  color:var(--green); }
.badge.amber  { background:rgba(245,158,11,.18); color:var(--amber); }
.badge.red    { background:rgba(239,68,68,.18);  color:var(--red); }
.badge.unknown{ background:var(--panel2);        color:var(--muted); }
.muted { color:var(--muted); }
.warn { color:var(--amber); font-size:13px; }
.unknown-val { color:var(--muted); font-style:italic; }
.progress { height:12px; background:var(--panel2); border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.progress > span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--green)); }
a.back { color:var(--accent); text-decoration:none; font-size:14px; }
.overflow { overflow-x:auto; }

/* ==========================================================================
   Bulk-editable tables (holidays): tick rows, edit a rate in place, or apply
   one rate to everything ticked. `input.rate-input` deliberately matches the
   specificity of the generic `input[type=number]` rule above and sits later in
   the file, so the compact treatment wins.
   ========================================================================== */
.bulkbar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 12px; margin-bottom:12px;
    background:var(--panel2); border:1px solid var(--line); border-radius:var(--input-radius);
}
.bulkbar .spacer { flex:1 1 auto; }
.bulkbar button[disabled] { opacity:.45; cursor:not-allowed; }
input.rate-input {
    width:auto; max-width:110px; padding:7px 10px; font-size:14px; text-align:right;
}
input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }
tr.sel-row > td { background:color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---- Global money hide/show: blur every amount at once (scales with font) ---- */
.money { transition:filter .12s ease; }
:root[data-hide-money] .money {
    filter:blur(0.5em); user-select:none; -webkit-user-select:none; cursor:default;
}
/* Editable amounts blur too, but clear on focus so they stay usable. */
:root[data-hide-money] input.rate-input { filter:blur(0.4em); transition:filter .12s ease; }
:root[data-hide-money] input.rate-input:focus { filter:none; }
#moneyToggle.active { color:var(--accent); border-color:var(--accent); }