/* Wayforce theme tokens. Colours come from the legacy WPF app (see CLAUDE.md, "Theme and branding").
   Light is the standard; dark (Appearance in the account menu, or the computer's setting) redefines the colour tokens
   below. .wf-paper keeps printed and printable pages (invoices, job sheets, report prints) on white paper in either. */
:root,
.wf-paper {
    color-scheme: light;

    --wf-primary: #3E87C4;
    --wf-primary-strong: #1470B7;
    --wf-primary-light: #5BABE0;
    --wf-primary-tint: #EAF3FA;

    /* Behind white text (primary buttons): #1470B7 keeps small white text at WCAG AA. */
    --wf-primary-fill: #1470B7;
    --wf-primary-fill-hover: #105C97;
    --wf-on-primary: #FFFFFF;

    /* Delete / Deactivate buttons: white text on a red that keeps WCAG AA. Field edges: 3:1 against the page (WCAG 1.4.11). */
    --wf-danger-fill: #B3243F;
    --wf-danger-fill-hover: #962035;
    --wf-field-border: #8C8C8C;

    --wf-text: #373736;
    --wf-text-muted: #6B6B6A;
    --wf-surface: #FFFFFF;
    --wf-surface-alt: #F5F5F5;
    --wf-page: #F7F9FB;
    --wf-border: #DADADA;

    --wf-success: #62C4AD;
    --wf-success-text: #1E7A62;
    --wf-success-soft: #E8F6F2;
    --wf-error-soft: #FCEEF1;
    --wf-error: #D94065;
    --wf-error-text: #B3243F;
    --wf-info: #5CACE0;
    --wf-warning: #F6914A;
    --wf-warning-text: #8A4A10;
    --wf-warning-soft: #FEF3EA;
    --wf-neutral: #767676;

    /* Structure: header rows, soft row lines, row hover, loading shimmer, the purple badge. */
    --wf-surface-head: #FAFBFC;
    --wf-border-soft: #EEEEEE;
    --wf-row-hover: #F7FAFD;
    --wf-skeleton: #EEF1F4;
    --wf-skeleton-shine: #F7F9FB;
    --wf-purple-soft: #F1ECFB;
    --wf-purple-text: #5B3C99;
    /* Diary timeline: hour lines, admin-only stripes, other bookings, diary entries (holiday…). */
    --wf-tl-grid: #EEF1F4;
    --wf-tl-admin-stripe: #FCE3CC;
    --wf-tl-booking: #B9C4CE;
    --wf-tl-entry: #E3C9CF;
    --wf-tl-entry-stripe: #D7B4BC;

    --wf-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(20, 60, 100, 0.10);
    --wf-focus-ring: 0 0 0 3px rgba(62, 135, 196, 0.35);
}

:root {
    --wf-brand-gradient: linear-gradient(135deg, #1470B7 0%, #5BABE0 100%);

    --wf-font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --wf-radius: 8px;
    --wf-radius-sm: 6px;
}

/* Dark: the same roles on dark surfaces. The blues are lifted so links and accents stay readable; buttons keep a
   deeper blue behind white text. Shown when chosen, or when the computer is set to dark and Light wasn't chosen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --wf-primary: #5BA6E2;
        --wf-primary-strong: #7DB9EA;
        --wf-primary-light: #8CC6F0;
        --wf-primary-tint: #1D3247;
        --wf-primary-fill: #1F6FB0;
        --wf-primary-fill-hover: #2A7FC4;
        --wf-on-primary: #FFFFFF;
        --wf-danger-fill: #B8304F;
        --wf-danger-fill-hover: #A82947;
        --wf-field-border: #6F7884;

        --wf-text: #E6E8EB;
        --wf-text-muted: #A3AAB3;
        --wf-surface: #1C2128;
        --wf-surface-alt: #262C34;
        --wf-page: #14181D;
        --wf-border: #3A424D;

        --wf-success: #62C4AD;
        --wf-success-text: #7FD6C0;
        --wf-success-soft: #173A33;
        --wf-error-soft: #3D1C25;
        --wf-error: #E3577A;
        --wf-error-text: #F28FA7;
        --wf-info: #5CACE0;
        --wf-warning: #F6914A;
        --wf-warning-text: #F7B27E;
        --wf-warning-soft: #3B2817;
        --wf-neutral: #9AA0A6;

        --wf-surface-head: #20262E;
        --wf-border-soft: #2C333C;
        --wf-row-hover: #232A33;
        --wf-skeleton: #262C34;
        --wf-skeleton-shine: #2F3640;
        --wf-purple-soft: #2E2442;
        --wf-purple-text: #C3AEF0;
        --wf-tl-grid: #2A3139;
        --wf-tl-admin-stripe: #4A3220;
        --wf-tl-booking: #4A5562;
        --wf-tl-entry: #4D3038;
        --wf-tl-entry-stripe: #5C3A44;

        --wf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
        --wf-focus-ring: 0 0 0 3px rgba(91, 166, 226, 0.5);
    }
}

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

    --wf-primary: #5BA6E2;
    --wf-primary-strong: #7DB9EA;
    --wf-primary-light: #8CC6F0;
    --wf-primary-tint: #1D3247;
    --wf-primary-fill: #1F6FB0;
    --wf-primary-fill-hover: #2A7FC4;
    --wf-on-primary: #FFFFFF;
    --wf-danger-fill: #B8304F;
    --wf-danger-fill-hover: #A82947;
    --wf-field-border: #6F7884;

    --wf-text: #E6E8EB;
    --wf-text-muted: #A3AAB3;
    --wf-surface: #1C2128;
    --wf-surface-alt: #262C34;
    --wf-page: #14181D;
    --wf-border: #3A424D;

    --wf-success: #62C4AD;
    --wf-success-text: #7FD6C0;
    --wf-success-soft: #173A33;
    --wf-error-soft: #3D1C25;
    --wf-error: #E3577A;
    --wf-error-text: #F28FA7;
    --wf-info: #5CACE0;
    --wf-warning: #F6914A;
    --wf-warning-text: #F7B27E;
    --wf-warning-soft: #3B2817;
    --wf-neutral: #9AA0A6;

    --wf-surface-head: #20262E;
    --wf-border-soft: #2C333C;
    --wf-row-hover: #232A33;
    --wf-skeleton: #262C34;
    --wf-skeleton-shine: #2F3640;
    --wf-purple-soft: #2E2442;
    --wf-purple-text: #C3AEF0;
    --wf-tl-grid: #2A3139;
    --wf-tl-admin-stripe: #4A3220;
    --wf-tl-booking: #4A5562;
    --wf-tl-entry: #4D3038;
    --wf-tl-entry-stripe: #5C3A44;

    --wf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    --wf-focus-ring: 0 0 0 3px rgba(91, 166, 226, 0.5);
}

.wf-paper {
    background: var(--wf-surface);
    color: var(--wf-text);
}

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

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--wf-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--wf-text);
    background: var(--wf-page);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--wf-primary-strong);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--wf-success);
}

.invalid {
    outline: 1px solid var(--wf-error);
}

.validation-message {
    color: var(--wf-error-text);
    font-size: 0.875rem;
}

.blazor-error-boundary {
    background: var(--wf-error);
    padding: 1rem;
    color: var(--wf-on-primary);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }