/* ==========================================================================
   quickTAMS — Base
   Layer 2 of 4. Reset, typography, form primitives, and the bridge that
   feeds our tokens into Bootstrap's own CSS variables so that the ~27
   existing pages inherit the new theme without markup changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bootstrap variable bridge
   Setting these at :root retints every stock Bootstrap utility and component
   (.btn-primary, .bg-primary, .text-primary, .table, .form-control, links…).
   -------------------------------------------------------------------------- */
:root {
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-base);
    --bs-body-font-weight: var(--fw-normal);
    --bs-body-line-height: var(--lh-normal);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--canvas);

    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-color: var(--text-subtle);
    --bs-tertiary-bg: var(--surface-2);

    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);

    --bs-primary: var(--accent);
    --bs-primary-rgb: 15, 118, 110;
    --bs-secondary-rgb: 113, 113, 122;
    --bs-success-rgb: 5, 150, 105;
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning-rgb: 217, 119, 6;
    --bs-info-rgb: 2, 132, 199;
    --bs-light-rgb: 244, 244, 245;
    --bs-dark-rgb: 24, 24, 27;

    --bs-link-color: var(--accent-text);
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: var(--accent-hover);
    --bs-link-decoration: none;
    --bs-link-hover-decoration: none;

    --bs-heading-color: var(--text);
    --bs-code-color: var(--accent-text);
    --bs-highlight-bg: var(--warn-soft);
}

:root[data-theme="dark"] {
    --bs-primary-rgb: 20, 184, 166;
    --bs-secondary-rgb: 161, 161, 170;
    --bs-success-rgb: 16, 185, 129;
    --bs-danger-rgb: 244, 63, 94;
    --bs-warning-rgb: 245, 158, 11;
    --bs-info-rgb: 56, 189, 248;
    --bs-light-rgb: 39, 39, 42;
    --bs-dark-rgb: 250, 250, 250;
    --bs-link-color-rgb: 94, 234, 212;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* Keeps the theme flip from flashing when the toggle is used. */
    transition: background-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}

/* Respect the user's motion preference across the whole app. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-2);
    color: var(--text);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4, h5, h6 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--accent-hover); }

small, .small { font-size: var(--fs-sm); }

hr {
    margin: var(--space-4) 0;
    border: 0;
    border-top: 1px solid var(--border);
    opacity: 1;
}

/* Every digit the user reads in this app is money, a count, or a date, so
   tabular figures are the default rather than an opt-in. */
.tabular,
.table,
.stat-tile__value,
.money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.money { white-space: nowrap; }
.money__currency {
    color: var(--text-subtle);
    font-size: 0.86em;
    font-weight: var(--fw-normal);
    margin-inline-start: 0.25em;
}

.text-muted { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle) !important; }

.eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Focus — one consistent ring everywhere, keyboard-only
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.form-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    letter-spacing: 0;
}

.form-label.required::after,
.required-mark::after {
    content: "*";
    color: var(--danger);
    margin-inline-start: 2px;
}

.form-control,
.form-select {
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-base);
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.form-control::placeholder { color: var(--text-subtle); }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--zinc-400);
}

.form-control:focus,
.form-select:focus {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
    box-shadow: none;
    cursor: not-allowed;
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
}

.form-control-lg,
.form-select-lg {
    min-height: 48px;
    font-size: var(--fs-md);
    border-radius: var(--r-lg);
}

textarea.form-control { min-height: 88px; resize: vertical; }

.form-select {
    /* Re-draw the caret so it follows the text colour in dark mode. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2352525B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 16px;
    padding-inline-end: var(--space-8);
}

[dir="rtl"] .form-select {
    background-position: left var(--space-3) center;
}

:root[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A1A1AA' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* Native date/time pickers ship a dark-on-dark icon otherwise. */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.65);
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.form-check-label {
    font-size: var(--fs-base);
    color: var(--text);
    cursor: pointer;
}

.form-text {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.input-group-text {
    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: var(--fs-base);
    border-radius: var(--r-md);
}

.invalid-feedback { font-size: var(--fs-xs); color: var(--danger-text); }
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: var(--danger); }

/* --------------------------------------------------------------------------
   Scrollbars — thin and neutral so they don't fight the chrome
   -------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: var(--r-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--zinc-400); }

/* --------------------------------------------------------------------------
   Utility: hide visually but keep for screen readers
   -------------------------------------------------------------------------- */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}