/* Display settings for the whole app (Settings › Profile › Display; app/display_settings.py).
 * base.html puts the person's choice on <html> when it renders, so nothing flashes:
 *   tt-text-lg / tt-text-xl  Large / Extra large text
 *   tt-cb                    color-blind friendly colors
 *   tt-hc                    high contrast
 * Set up TruTec's own rules (and its light look) are in takeoff_setup_theme.css.
 */

/* ─── Text size ──────────────────────────────────────────────────────────
 * The app sets its text in px (24k declarations; root-relative rem is rare), so a bigger root
 * font size alone moves almost nothing. Instead the text-heavy surfaces zoom as a whole — text,
 * icons, spacing and click targets together, the way browser zoom does — and their boxes stay
 * where they were. A surface whose layout uses vh can't zoom wholesale (100vh × zoom runs off
 * the screen), so only these do: the Dashboard, Settings, the Catalog, the app menu, the takeoff
 * side panels and Set up TruTec (takeoff_setup_theme.css). To grow another page, add its root
 * here and divide any vh it uses by var(--tt-zoom). */
html.tt-text-lg { --tt-zoom: 1.125; }
html.tt-text-xl { --tt-zoom: 1.25; }

html:is(.tt-text-lg, .tt-text-xl) :is(.dashboard-page, .settings-main, .ep-shell.ep-catalog),
html:is(.tt-text-lg, .tt-text-xl) .app-nav-sidebar .sidebar-nav {
    zoom: var(--tt-zoom);
}
/* Catalog: the sticky group list and its dialogs are sized by the screen height. */
html:is(.tt-text-lg, .tt-text-xl) .ep-catalog .epc-group-nav { max-height: calc((100vh - 24px) / var(--tt-zoom)); }
html:is(.tt-text-lg, .tt-text-xl) .ep-catalog .epc-modal__panel { max-height: calc(90vh / var(--tt-zoom)); }

/* Takeoff (New UI): the left and right panels grow with their text; the map keeps the rest. */
@media (min-width: 761px) {
    html.takeoff-workspace:is(.tt-text-lg, .tt-text-xl) .tw-workspace.app-container {
        grid-template-columns: calc(var(--tw-left) * var(--tt-zoom)) minmax(0, 1fr) calc(var(--tw-right) * var(--tt-zoom));
    }
    html.takeoff-workspace:is(.tt-text-lg, .tt-text-xl) .tw-workspace > :is(.tw-left, .tw-right) { zoom: var(--tt-zoom); }
}

/* ─── Color-blind friendly ───────────────────────────────────────────────
 * Okabe-Ito: blue for good / done / on, orange for warnings, vermillion for errors (told apart
 * with every kind of color blindness, unlike green and red). Customers' own item colors on maps
 * and in the catalog never change. On / off switches also say On or Off. */
html.tt-cb {
    --success: #0072b2;
    --warning: #e69f00;
    --danger: #d55e00;
}
html.tt-cb[data-theme="dark"] {
    --success: #56b4e9;
    --warning: #f0b44a;
    --danger: #ff8f5a;
}
/* Settings' status colors (settings/layout.html) and the Estimating Pro shell's */
html.tt-cb :is(.settings-shell, .settings-layout, main, body) {
    --st-good: #0a62a3; --st-good-bg: #e6f1fa;
    --st-warn: #8a5300; --st-warn-bg: #fdf1dc; --st-warn-bd: #f2d39a;
    --st-bad: #b8460a; --st-bad-bd: #f6c9ad;
}
html.tt-cb[data-theme="dark"] :is(.settings-shell, .settings-layout, main, body) {
    --st-good: #7cc4f0; --st-good-bg: rgba(86, 180, 233, .16);
    --st-warn: #f0b44a; --st-warn-bg: rgba(240, 180, 74, .14); --st-warn-bd: rgba(240, 180, 74, .35);
    --st-bad: #ffa477; --st-bad-bd: rgba(255, 164, 119, .35);
}
html.tt-cb .ep-shell { --ep-good: #0a62a3; --ep-good-soft: #e3f0fa; --ep-warn: #8a5300; --ep-warn-soft: #fdf1dc; --ep-bad: #b8460a; --ep-bad-soft: #fde8dc; }
html.tt-cb[data-theme="dark"] .ep-shell { --ep-good: #7cc4f0; --ep-good-soft: rgba(86, 180, 233, .16); --ep-warn: #f0b44a; --ep-warn-soft: rgba(240, 180, 74, .16); --ep-bad: #ffa477; --ep-bad-soft: rgba(255, 164, 119, .16); }

/* Flash messages (base.html): the edge follows the tokens; the icon (check / warning) too. */
html.tt-cb .flash.success > i { color: var(--success); }
html.tt-cb .flash.error > i { color: var(--danger); }

/* Settings › Profile switches say On / Off */
html.tt-cb .switch-track { width: 58px; }
html.tt-cb .switch-track::before {
    content: 'Off'; position: absolute; top: 0; right: 8px; font: 700 10px/26px Inter, system-ui, sans-serif;
    letter-spacing: .03em; text-transform: uppercase; color: var(--text); pointer-events: none;
}
html.tt-cb .switch-input:checked + .switch-track::before { content: 'On'; right: auto; left: 9px; color: #fff; }
html.tt-cb .switch-input:checked + .switch-track::after { transform: translateX(32px); }

/* ─── High contrast ──────────────────────────────────────────────────────
 * Darker secondary text and borders you can see. */
html.tt-hc {
    --border: #a1a1aa;
    --border-subtle: #d4d4d8;
    --text-secondary: #3f3f46;
    --text-tertiary: #52525b;
}
html.tt-hc[data-theme="dark"] {
    --border: #52525b;
    --border-subtle: #3f3f46;
    --text-secondary: #d4d4d8;
    --text-tertiary: #a1a1aa;
}
html.tt-hc :is(.settings-shell, .settings-layout, main, body) { --st-ink2: #27272a; --st-mut: #3f3f46; --st-bd: #a1a1aa; }
html.tt-hc[data-theme="dark"] :is(.settings-shell, .settings-layout, main, body) { --st-ink2: #e4e4e7; --st-mut: #d4d4d8; --st-bd: #52525b; }
html.tt-hc .ep-shell { --ep-mut: #3f3f46; --ep-faint: #52525b; --ep-bd: #a1a1aa; }
html.tt-hc[data-theme="dark"] .ep-shell { --ep-mut: #d4d4d8; --ep-faint: #a1a1aa; --ep-bd: #52525b; }