/* ../../../shared/ui/palette.css */
/*
 * The one color palette of the customer client, the admin, and the shared components (repository AGENTS.md, "Light
 * and dark colors"). Every color has its light value in :root and its dark value in :root[data-theme="dark"], which
 * ThemeToggle.js sets; styles take their colors only from these properties. Each app bundles this file first. The
 * --native-* properties are the shared components' names for the palette; a component may override one locally.
 * The dark theme uses the neutral near-black greys of FullCalendar's classic dark theme (the admin's schedule), with
 * blue as the accent, so the calendar and the pages around it read as one surface.
 */
:root {
    --background: #f3f6fa;
    --paper: #fff;
    --ink: #182d43;
    --muted: #5e6f82;
    --muted-strong: #4a5d70;
    --border: #d6e1ec;
    --outline: #6b7f93;
    --soft: #eaf1f8;
    /* Every other body row of a data table, in both apps: between the paper and the hover and heading fills. */
    --row-alt: #eff4f9;
    --primary: #013d71;
    --primary-hover: #07528f;
    --on-primary: #fff;
    --link: #013d71;
    --focus: #2683d8;
    --field: #fff;
    --field-border: #9fb2c6;
    --error: #a12f29;
    --error-bg: #fff1ed;
    --error-border: #f0c4ba;
    --danger: #a12f29;
    --danger-hover: #862520;
    --danger-soft: #fbeceb;
    --danger-border: #e3b6b3;
    --success: #17663a;
    --success-bg: #eaf7ef;
    --success-border: #a9d8ba;
    /* Shadows are rgba(var(--shadow-rgb), alpha). */
    --shadow-rgb: 24, 45, 67;
    /* Behind a school's uploaded logo in the customer portal's header, which is drawn for a white page. */
    --logo-plate: #fff;

    /* The customer portal's own look (client README, Sprint 30). styles.css remaps the shared names above onto these,
       so the admin keeps its colors. Green marks progress and paid; the road is the progress bar's asphalt and lane. */
    --portal-page: #f6f7f9;
    --portal-paper: #fff;
    --portal-ink: #101828;
    --portal-muted: #5b6676;
    --portal-border: #e4e7ec;
    --portal-outline: #78859a;
    --portal-field: #fff;
    --portal-soft: #eaf0fd;
    /* Blue as text and lines (--portal-blue), and as a fill under white text (--portal-blue-fill). */
    --portal-blue: #2f5fd0;
    --portal-blue-fill: #2f5fd0;
    --portal-blue-hover: #2450b5;
    --portal-on-blue: #fff;
    --portal-accent: #0f9f77;
    --portal-accent-soft: #dff5ed;
    --portal-accent-text: #0a6b50;
    --portal-road: #2c3648;
    --portal-lane: #8d9ab0;

    /* The admin's legacy screens. */
    --admin-text: #000;
    --admin-text-soft: #333;
    --admin-hint: #444;
    --admin-text-muted: #666;
    --admin-alert: #c00;
    --admin-alert-fill: #c00;
    --admin-required: #c8261a;
    --admin-positive: #008000;
    --admin-approved: #006400;
    --admin-approved-bg: #c7ff91;
    --admin-link: #00f;
    --admin-focus: #4d90fe;
    --admin-line: #d3d3d3;
    --admin-line-hover: #999;
    --admin-line-disabled: #a9a9a9;
    --admin-line-strong: #888;
    --admin-line-table: #aaa;
    --admin-field-border: #e5e5e5;
    --admin-field-tint: #eeeefc;
    --admin-subtle: #eee;
    --admin-row-active: #e5e5e5;
    --admin-disabled-bg: #ddd;
    /* A table's heading row: the soft fill with ink text in the light theme, near-black with teal text in the dark. */
    --admin-table-head: #eaf1f8;
    --admin-table-head-text: #182d43;
    --admin-table-filter: #d6e1ec;
    /* The magnifier in a table's filter fields, drawn in --muted. */
    --admin-filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235e6f82' stroke-width='2'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='M10 10l4.5 4.5'/%3E%3C/svg%3E");
    --admin-cell-primary: #f0f8ff;
    /* Black fills under white text: the header's band and the instructor schedule tooltip's title. */
    --admin-dark-fill: #000;
    --admin-on-dark-fill: #fff;
    --admin-header-link: #add8e6;
    /* Behind an uploaded school logo, which is drawn for a white page. */
    --admin-logo-plate: #fff;
    --admin-toolbar-start: #fff;
    --admin-toolbar-end: #5cbde3;
    --admin-sms-sent: #01579b;
    --admin-sms-received: #dcdcdc;
    /* Schedule events keep their service colours in both themes: dark text on a light fill. */
    --admin-event-text: #1d1d1d;
    --admin-event-text-muted: #333;
    --admin-event-road-test: #ff7070;
    --admin-event-five-hour-class: #0f0;
    --admin-event-car-road-test: #ff0;
    --admin-event-defensive-driving: #ffa500;
    --admin-event-driving-lesson: #aed3e4;
    --admin-event-driving-lesson-cdl: #b6e026;
    --admin-event-road-test-cdl: #c9a5c0;
    --admin-event-completed: #d9d8d8;
    /* An event's edge: on the light page the light fills need a dark edge to stand out (7:1); on the dark page they
       stand out themselves (6.6:1 or more), so the edge is the page's paper. */
    --admin-event-border: #595959;
    /* Time off and closed days on the schedule: unavailable time, one slate family (time off lighter, a closed day
       darker) under darker diagonal stripes with a solid slate bar down the left edge, always with their label text.
       Slate stays apart from the service colours, and its tint, stripes, and bar from the plain completed grey. */
    --admin-event-time-off: #e3e8ef;
    --admin-event-time-off-stripe: #c9d2de;
    --admin-event-closed-day: #d3dae4;
    --admin-event-closed-day-stripe: #aeb9c9;
    --admin-event-unavailable-bar: #475569;
    /* The staff login's panel is one picture in both themes: a white-to-black title band over a silver-to-black
       panel with light fields, under the black car logo. The backdrop is the narrow-screen page in both themes and
       the dark theme's page at every width. The panel's edge is light in the dark theme, where black would vanish. */
    --admin-login-title: #696969;
    --admin-login-light: #fff;
    --admin-login-silver: #c0c0c0;
    --admin-login-dark: #000;
    --admin-login-field-border: #aaa;
    --admin-login-backdrop-start: #697079;
    --admin-login-backdrop-middle: #505356;
    --admin-login-backdrop-end: #1b1f21;
    --admin-login-shadow: #888;
    --admin-login-edge: #000;
    --admin-login-error: #a12f29;

    --native-background: var(--background);
    --native-paper: var(--paper);
    --native-ink: var(--ink);
    --native-muted: var(--muted);
    --native-border: var(--border);
    --native-outline: var(--outline);
    --native-soft: var(--soft);
    --native-row-alt: var(--row-alt);
    --native-primary: var(--primary);
    --native-primary-hover: var(--primary-hover);
    /* Text in the primary color: the dark theme's primary is a fill, too dark for text. */
    --native-link: var(--link);
    --native-on-primary: var(--on-primary);
    --native-focus: var(--focus);
    --native-danger: var(--danger);
    --native-danger-hover: var(--danger-hover);
    --native-danger-soft: var(--danger-soft);
    --native-success: var(--success);
    --native-success-soft: var(--success-bg);
}

/* Printing keeps the light colors: paper is white and backgrounds are usually left out. */
@media not print {
    :root[data-theme="dark"] {
        color-scheme: dark;
        --background: #030712;
        --paper: #111827;
        --ink: #f3f4f6;
        --muted: #9ca3af;
        --muted-strong: #d1d5db;
        --border: #374151;
        --outline: #6b7280;
        --soft: #1f2937;
        --row-alt: #1a2433;
        --primary: #2563eb;
        --primary-hover: #1d4ed8;
        --on-primary: #fff;
        --link: #93c5fd;
        --focus: #93c5fd;
        --field: #030712;
        --field-border: #6b7280;
        --error: #ffb4a8;
        --error-bg: #3d2226;
        --error-border: #8a4038;
        --danger: #b8352e;
        --danger-hover: #9c2b25;
        --danger-soft: #3d2226;
        --danger-border: #8a4038;
        --success: #9ee6b8;
        --success-bg: #173d2a;
        --success-border: #32734c;
        --shadow-rgb: 0, 0, 0;
        --logo-plate: #f3f4f6;

        --portal-page: #0f1217;
        --portal-paper: #171b22;
        --portal-ink: #eef1f6;
        --portal-muted: #9aa5b5;
        --portal-border: #2a303a;
        --portal-outline: #7a8598;
        --portal-field: #0f1217;
        --portal-soft: #1c2740;
        --portal-blue: #7aa2ff;
        --portal-blue-fill: #3a68e0;
        --portal-blue-hover: #2f58c8;
        --portal-on-blue: #fff;
        --portal-accent: #3dd6a8;
        --portal-accent-soft: #12342b;
        --portal-accent-text: #7ee8c6;
        --portal-road: #06080c;
        --portal-lane: #6b778a;

        --admin-text: #f3f4f6;
        --admin-text-soft: #e5e7eb;
        --admin-hint: #d1d5db;
        --admin-text-muted: #9ca3af;
        --admin-alert: #ff8a80;
        --admin-alert-fill: #b8352e;
        --admin-required: #ff8a80;
        --admin-positive: #9ee6b8;
        --admin-approved: #c7f5a8;
        --admin-approved-bg: #24401a;
        --admin-link: #93c5fd;
        --admin-focus: #93c5fd;
        --admin-line: #4b5563;
        --admin-line-hover: #9ca3af;
        --admin-line-disabled: #374151;
        --admin-line-strong: #6b7280;
        --admin-line-table: #4b5563;
        --admin-field-border: #6b7280;
        --admin-field-tint: #111827;
        --admin-subtle: #1f2937;
        --admin-row-active: #374151;
        --admin-disabled-bg: #1f2937;
        --admin-table-head: #030712;
        --admin-table-head-text: #79c6d8;
        --admin-table-filter: #1e3a8a;
        --admin-filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='M10 10l4.5 4.5'/%3E%3C/svg%3E");
        --admin-cell-primary: #1e293b;
        --admin-dark-fill: #000;
        --admin-on-dark-fill: #fff;
        --admin-header-link: #add8e6;
        --admin-logo-plate: #f3f4f6;
        --admin-toolbar-start: #111827;
        --admin-toolbar-end: #1e40af;
        --admin-sms-sent: #1d4ed8;
        --admin-sms-received: #374151;
        --admin-event-border: #111827;
        --admin-login-shadow: #000;
        --admin-login-edge: #9ca3af;
        /* Lighter than --error so the login message reads on the grey backdrop without a box. */
        --admin-login-error: #ffd6cf;
    }
}

/* ../../../shared/ui/theme-toggle.css */
/*
 * Styles of the shared sun/moon theme button (ThemeToggle.js), used by the customer client and the admin: a 44px round
 * target showing the moon in the light theme and the sun in the dark one, the theme a click switches to. Its colors are
 * the --native-* custom properties; an app overrides them on .theme-toggle where it sits on its own background.
 */
.theme-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 0;
    border-radius: 50%;
    color: var(--native-muted);
    background: transparent;
    cursor: pointer;
}

.theme-toggle:hover {
    background: var(--native-soft);
    color: var(--native-ink);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .theme-sun,
:root[data-theme="dark"] .theme-toggle .theme-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-sun {
    display: block;
}

/* ../../../shared/ui/password-toggle.css */
/*
 * Styles of the shared show-password button (PasswordToggle.js), used by the customer client and the admin: a 44px
 * target at the inside end of the password input, showing the eye while the password is hidden and the crossed-out eye
 * while it shows. Its colors are the --native-* custom properties; an app overrides them where the field sits on its
 * own background.
 */
.password-input {
    position: relative;
}

/* A block, so the wrapper is exactly the field's height and the button centres on it. */
.password-input input {
    display: block;
    padding-inline-end: 56px;
}

/* The browser's own reveal button would sit beside this one. */
.password-input input::-ms-reveal {
    display: none;
}

.password-toggle {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 11px;
    border: 0;
    border-radius: 8px;
    color: var(--native-muted);
    background: transparent;
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--native-ink);
    background: var(--native-soft);
}

.password-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle .password-eye-off,
.password-input input[type="text"] + .password-toggle .password-eye {
    display: none;
}

.password-input input[type="text"] + .password-toggle .password-eye-off {
    display: block;
}

/* login.css */
:root {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--paper);
}

/* The dark theme's flat page swallowed the panel's black edge and shadow; the backdrop sets the panel off. */
:root[data-theme="dark"] body {
    background: linear-gradient(to right, var(--admin-login-backdrop-start) 0%,
        var(--admin-login-backdrop-middle) 36%, var(--admin-login-backdrop-end) 100%);
}

button,
input,
select {
    font: inherit;
}

:focus-visible {
    outline: 3px solid var(--admin-focus);
    outline-offset: 2px;
}

.login-container {
    width: 346px;
    margin: 10vh auto 0;
}

.login-container.embedded {
    margin: 0;
}

.schedule-logo {
    min-height: 48px;
}

.embedded .schedule-logo {
    display: none;
}

/* The panel looks the same in both themes (palette.css, --admin-login-*), its fields and button included. */
.login {
    border: 1px solid var(--admin-login-edge);
    box-shadow: 10px 10px 5px var(--admin-login-shadow);
    color-scheme: light;
}

.embedded .login {
    box-shadow: none;
}

.header {
    height: 36px;
    margin: 0;
    padding: 5px 0 10px;
    color: var(--admin-login-title);
    background: linear-gradient(to right, var(--admin-login-light) 0%, var(--admin-login-light) 40%,
        var(--admin-login-dark) 100%);
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-align: left;
    text-indent: 18px;
}

.content {
    position: relative;
    height: 113px;
    min-height: 0;
    padding: 10px 0 0;
    overflow: visible;
    background: linear-gradient(to right, var(--admin-login-silver) 0%, var(--admin-login-dark) 100%);
}

.login.expanded .content {
    height: 193px;
}

.credentials {
    display: flex;
}

.field.half {
    width: 50%;
}

.field input,
.field select {
    width: calc(100% - 40px);
    min-height: 30px;
    margin: 0 20px 10px;
    padding: 5px 24px 5px 7px;
    border: 1px solid var(--admin-login-field-border);
    border-radius: 2px;
    color: var(--admin-login-dark);
    background-color: var(--admin-login-light);
}

.field.half:first-child input {
    width: calc(100% - 24px);
    margin-right: 4px;
}

.field.half:last-child input {
    width: calc(100% - 24px);
    margin-left: 4px;
}

#userName {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1klEQVQ4T6XTMUoDQRTG8d9WHiBFCEjKNFaxSqdgriAEQckBcgIbRcgBPIFFImlyA0FJZZEijaWVEAuL9FbKygibYTcZ2Clnvu//vvcek6l5spp+uwAHOOVP84LvsmJVgAYWOAqmN5xgE0OqAGNcR+I73KQCHnERiSe4SgUM8RCJLzFNBeSt3WIUhniPvIWfVEDydsuGmN+doY92IH3gCc9xihjQwQzHFRGWYbjv/+9FQAsrNPfk/0QXX7muCBiE6in9n2MeAw7RS3HjFesYkOjdltX+jb9lKRwRYAYj9AAAAABJRU5ErkJggg==");
}

#companyName {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGpJREFUOI1jYBhs4AUDA8N/AvgJsgZGNAP+E2HJXwYGBhYYhwmHIkYkw/9C2azYFLJgE2RgYFiDxGaC8tFdC7cJGVDNC0SDERAGuQwMDIVEGIriAmTMALUNWewPsgZ0FzwlwpLHpLiI9gAAcNAfOepoS7sAAAAASUVORK5CYII=");
}

#userName,
#companyName {
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) 50%;
}

/* The password field shows the shared eye button (password-toggle.css) where the other fields show their icon: its
   wrapper takes the field's margins and width, and the button spans the field's height in the panel's own colours. */
.field .password-input {
    margin: 0 20px 10px 4px;
}

.field .password-input #password {
    width: 100%;
    margin: 0;
    padding-right: 48px;
}

.login .password-toggle {
    top: 0;
    height: 100%;
    padding: 0 11px;
    transform: none;
    color: var(--admin-login-dark);
}

.login .password-toggle:hover {
    color: var(--admin-login-dark);
    background: var(--admin-login-silver);
}

.more {
    position: absolute;
    top: 48px;
    left: 20px;
    z-index: 2;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--admin-login-dark);
    background: transparent;
    line-height: 14px;
    text-decoration: none;
    cursor: pointer;
}

.more:hover,
.more:focus-visible {
    text-decoration: underline;
}

.login.expanded .more {
    top: 128px;
}

.submit-button {
    position: absolute;
    right: 24px;
    bottom: 19px;
    min-width: 100px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--admin-login-dark);
    border-radius: 3px;
    cursor: pointer;
}

.submit-button:hover,
.submit-button:focus-visible {
    border-width: 2px;
    font-weight: bold;
}

.submit-button:disabled {
    cursor: wait;
    opacity: .75;
}

.brand-logo {
    position: absolute;
    bottom: -12px;
    left: 20px;
    z-index: 1;
    width: 150px;
    height: 60px;
    margin: 0;
    background: url("../../images/bugatti-black-small-trans-wout-shadow.png") no-repeat;
    pointer-events: none;
}

.message {
    min-height: 20px;
    padding: 0 2px 5px;
    font-weight: bold;
}

.message:empty {
    visibility: hidden;
}

.embedded .message:empty {
    min-height: 0;
    padding: 0;
}

.error {
    color: var(--admin-login-error);
}

/* Top right of the page; the admin's own header has the button when the login is embedded. */
.theme-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
}

.embedded .theme-toggle {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {
    body {
        background: linear-gradient(to right, var(--admin-login-backdrop-start) 0%,
            var(--admin-login-backdrop-middle) 36%, var(--admin-login-backdrop-end) 100%);
    }

    .login-container > .theme-toggle {
        position: static;
        margin: 0 0 8px auto;
        color: var(--admin-login-light);
    }

    .login-container > .theme-toggle:hover {
        color: var(--admin-login-light);
        background: var(--admin-login-backdrop-end);
    }

    /* The backdrop is too dark for the error color alone. */
    .message:not(:empty) {
        padding: 4px 6px;
        background: var(--error-bg);
    }

    .login-container {
        width: 100%;
        margin: 0;
        padding: 12px;
    }

    .schedule-logo,
    .header {
        display: none;
    }

    .login {
        border: 0;
        box-shadow: none;
    }

    .credentials {
        display: block;
    }

    .field.half {
        width: 100%;
    }

    .field input,
    .field select,
    .field.half:first-child input,
    .field.half:last-child input {
        width: calc(100% - 10px);
        min-height: 44px;
        margin: 0 5px 10px;
    }

    .field .password-input {
        margin: 0 5px 10px;
    }

    /* In the flow below the stacked fields, rather than over them. */
    .more {
        position: static;
        display: block;
        min-height: 44px;
        margin: -10px 0 0 5px;
    }

    .submit-button {
        position: static;
        float: none;
        min-height: 44px;
        margin-left: 5px;
    }

    .content,
    .login.expanded .content {
        height: auto;
        padding-bottom: 12px;
    }

    .brand-logo {
        position: static;
        margin: 15px 0 0 20px;
    }

    .login-container.embedded {
        width: 346px;
        padding: 0;
    }

    .embedded .header {
        display: block;
    }

    .embedded .login {
        border: 1px solid var(--admin-login-dark);
    }

    .embedded .credentials {
        display: flex;
    }

    .embedded .field.half {
        width: 50%;
    }

    .embedded .field input,
    .embedded .field select {
        width: calc(100% - 40px);
        min-height: 30px;
        margin: 0 20px 10px;
    }

    /* The two half-width fields keep the wide layout's size: the stacked layout's rules above are more specific than
       .embedded .field input, so their height and left margin are set here too. */
    .embedded .field.half:first-child input {
        width: calc(100% - 24px);
        min-height: 30px;
        margin: 0 4px 10px 20px;
    }

    .embedded .field.half:last-child input {
        width: calc(100% - 24px);
        min-height: 30px;
        margin-left: 4px;
    }

    .embedded .field .password-input {
        margin: 0 20px 10px 4px;
    }

    .embedded .content {
        height: 113px;
        padding: 10px 0 0;
    }

    .embedded.login-container .expanded .content {
        height: 193px;
    }

    .embedded .more {
        position: absolute;
        min-height: 0;
        margin: 0;
    }

    .embedded .submit-button {
        position: absolute;
        right: 24px;
        bottom: 19px;
        min-height: 30px;
        margin: 0;
    }

    .embedded .brand-logo {
        position: absolute;
        margin: 0;
    }
}

/* Embedded (?iframe=true): the page that holds the frame shows through, in either theme and at any width, so the
   narrow-screen backdrop never turns a small frame dark. */
html body:has(> .login-container.embedded) {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/*# sourceMappingURL=login.css.map */