/* ==========================================================================
CrewSheet styles: components.css
==========================================================================
Shared building blocks used on many pages: buttons, cards, tables, forms, badges, page banner, number boxes, trade picker, phone-stacking tables.

Part of the CrewSheet stylesheet set, loaded in this order by Views/Shared/_Layout.cshtml:
  base.css > components.css > pages/home.css > pages/jobs.css > pages/zones.css > pages/documents.css > pages/worklist.css > pages/reports.css > pages/settings.css
Section numbers are the same as in the old single site.css, so view comments like
"components.css 23" still point at the right place. New sections: next free number, in the file for that area.

SECTIONS IN THIS FILE
  6         BUTTONS & ACTION CONTROLS
  7         CARDS & TABLES
  8         FORMS, ALERTS & DROPDOWNS
  9         BADGES & STATUS COLORS
  11        SECTION CARDS (Zones / Quotes / Invoices)
  14        UI TILES
  18        DIALOGS & FORM HELPERS
  22        CLICKABLE ROWS
  23        PAGE BANNER
  38        NUMBER BOXES + LABOR RATE NOTES
  41        LABOR RATE "LOOKS LIKE AN HOURLY WAGE" WARNING (site.js, inputs with data-rate-check)
  49        HOME "WORKING IN" TRADE BOX (Views/Home/_Snapshot, Services/CurrentTrade)
  50a       FIELD SCREENS: STACKING TABLES ON PHONES + WORK LIST (Views/WorkList/Index)
  busy      BUSY BUTTONS (no double saves)
  53        HELP: ? BUTTONS + SLIDE-IN HELP PANEL (_Layout, site.js "Help panel", Views/Help/Topics)
  55        ACCOUNT MENU + ACCOUNT PAGES (_LoginPartial, Areas/Identity/Pages/_Layout)
  59        INFO POP-OVERS: THE ⓘ BESIDE A BOX'S NAME (<cs-info>)
  60        LOG IN + CREATE ACCOUNT (Areas/Identity/Pages/Account/Login + Register)
  64        TOASTS (page messages floating over the page; Views/Shared/_Toasts)
========================================================================== */

/* ==========================================================================
6. BUTTONS & ACTION CONTROLS
========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    border-radius: 0.3rem;
    text-decoration: none !important;
    line-height: 1.5;
    transition: all var(--cs-transition);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

/* ---------- Primary ---------- */
.btn-primary {
    background-color: var(--cs-navy) !important;
    border-color: var(--cs-navy) !important;
    color: var(--cs-on-dark) !important;
    font-weight: 600;
}

    .btn-primary:hover {
        background-color: var(--cs-navy-deep) !important;
        border-color: var(--cs-gold) !important;
        color: var(--cs-on-dark) !important;
    }

/* ---------- Outline variants ---------- */
.btn-outline-primary {
    color: var(--cs-heading) !important;
    border-color: var(--cs-navy) !important;
    background: var(--cs-surface) !important;
}

    .btn-outline-primary:hover {
        background: var(--cs-navy) !important;
        color: var(--cs-on-dark) !important;
    }

.btn-outline-secondary {
    color: var(--cs-text) !important;
    border-color: var(--cs-border) !important;
    background: var(--cs-surface) !important;
}

    .btn-outline-secondary:hover {
        background: var(--cs-bg) !important;
    }

.btn-outline-danger {
    color: var(--cs-danger) !important;
    border-color: var(--cs-danger) !important;
    background: var(--cs-surface) !important;
}

/* ---------- Row / card actions ---------- */
.btn-action {
    color: var(--cs-heading) !important;
    background: var(--cs-surface) !important;
    border: 1px solid var(--cs-navy) !important;
    font-weight: 500;
}

    .btn-action:hover:not(:disabled) {
        background: var(--cs-navy) !important;
        color: var(--cs-on-dark) !important;
        border-color: var(--cs-navy) !important;
    }

    .btn-action:disabled,
    .btn-action.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        color: var(--cs-muted) !important;
        border-color: var(--cs-border) !important;
        background: var(--cs-disabled-bg) !important;
    }

.btn-action-danger {
    color: var(--cs-danger) !important;
    background: var(--cs-surface) !important;
    border: 1px solid var(--cs-danger) !important;
    font-weight: 500;
}

    .btn-action-danger:hover {
        background: var(--cs-danger) !important;
        color: var(--cs-on-dark) !important;
        border-color: var(--cs-danger) !important;
    }

/* ---------- Responsive action wrappers (buttons on desktop, select on mobile) ---------- */
.cs-actions-wide {
    display: none;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

.cs-actions-narrow {
    display: block;
    min-width: 8.5rem;
    max-width: 11rem;
    margin-left: auto;
}

.cs-action-select {
    border: 1px solid var(--cs-navy) !important;
    color: var(--cs-heading);
    font-weight: 500;
    background: var(--cs-surface);
}

@media (min-width: 992px) {
    .cs-actions-wide {
        display: flex !important;
    }

    .cs-actions-narrow {
        display: none !important;
    }
}



/* ==========================================================================
7. CARDS & TABLES
========================================================================== */

/* ---------- Card ---------- */
.card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
    box-shadow: var(--cs-shadow-sm);
}

.cs-section-card {
    margin-bottom: 1.5rem !important;
    box-shadow: var(--cs-shadow-sm);
}

    .cs-section-card .card-body {
        padding: 0;
    }

    .cs-section-card .empty-state-text {
        padding: 1.25rem !important;
    }

    /* Card hugs its inner table width, gold borders left & right */
    .cs-section-card.cs-section-fit {
        width: fit-content;
        max-width: 100%;
        border-left: 3px solid var(--cs-gold);
        border-right: 2px solid var(--cs-gold);
        overflow: hidden;
    }

.cs-table-wrap {
    border-left: 3px solid var(--cs-gold);
}

.cs-table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* ---------- Section header bar (title + inline actions) ---------- */
.cs-table-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 34px;
    padding: 0.45rem 1rem !important;
    background: transparent;
    border-bottom: none;
}

.cs-section-fit .cs-table-header-bar {
    width: 100%;
    box-sizing: border-box;
}

.cs-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    font-style: italic;
    color: var(--cs-heading);
}

/* ---------- Standard table ---------- */
.table {
    width: 100%;
    background: var(--cs-surface);
    border-collapse: collapse;
}

    .table th,
    .table td {
        padding: 0.65rem 0.75rem;
        border-bottom: 1px solid var(--cs-border);
        vertical-align: middle;
    }

    .table thead th {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--cs-heading);
        font-weight: 700;
        background: var(--cs-blue-100) !important;
        border-bottom: 2px solid var(--cs-gold);
        white-space: nowrap;
    }

.table-hover tbody tr:hover {
    background: var(--cs-blue-50);
}

/* Every other row a faint blue: add cs-striped to the table (Quotes / Invoices lists). Bootstrap paints
   each cell from --bs-table-bg, so the tint is set there too. The Jobs Dashboard does the same with
   jobs.js (jobs.css 45c) because its search hides rows. */
.table.cs-striped > tbody > tr:nth-child(even) {
    --bs-table-bg: var(--cs-blue-50);
    background: var(--cs-blue-50);
}

    .table.cs-striped.table-hover > tbody > tr:nth-child(even):hover {
        --bs-table-bg: var(--cs-blue-100);
        background: var(--cs-blue-100);
    }

.table.cs-table-fit {
    width: auto !important;
    table-layout: auto;
    max-width: 100%;
}

.cs-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
}

/* ---------- Accounting table (first column left, rest right-aligned) ---------- */
.table.cs-accounting-table {
    font-size: 0.8rem;
}

    .table.cs-accounting-table th,
    .table.cs-accounting-table td {
        padding: 0.35rem 0.6rem !important;
    }

.cs-accounting-table thead th {
    border-top: 2px solid var(--cs-gold) !important;
    border-bottom: 2px solid var(--cs-gold) !important;
    background: var(--cs-blue-100) !important;
    color: var(--cs-heading);
    font-weight: 700;
}

.cs-accounting-table th:first-child,
.cs-accounting-table td:first-child {
    text-align: left !important;
    padding-left: 1rem !important;
}

.cs-accounting-table th:not(:first-child),
.cs-accounting-table td:not(:first-child) {
    text-align: right !important;
}

.cs-accounting-table th:last-child,
.cs-accounting-table td:last-child {
    padding-right: 1rem !important;
}

.cs-accounting-table th:nth-child(n + 6),
.cs-accounting-table td:nth-child(n + 6) {
    max-width: 6rem;
}

.cs-accounting-table tfoot {
    border-top: 3px double var(--cs-navy) !important;
}

    .cs-accounting-table tfoot tr,
    .cs-totals-row {
        border-bottom: 2px solid var(--cs-gold) !important;
        background: var(--cs-blue-100) !important;
        font-weight: 700;
        color: var(--cs-heading);
    }

        .cs-accounting-table tfoot td,
        .cs-totals-row td {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }

.cs-accounting-table:not(:has(tfoot)) tbody tr:last-child td {
    border-bottom: 2px solid var(--cs-gold) !important;
}

@media (max-width: 767.98px) {
    .table.cs-accounting-table {
        font-size: 0.72rem;
    }

        .table.cs-accounting-table th,
        .table.cs-accounting-table td {
            padding: 0.3rem 0.4rem !important;
        }
}

/* ---------- Quotes / Invoices tables: shrink-to-fit ---------- */
.cs-quote-invoice-table {
    width: auto;
    table-layout: auto;
}

    .cs-quote-invoice-table th,
    .cs-quote-invoice-table td {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }

    .cs-quote-invoice-table .cs-col-num {
        width: 140px;
    }

    .cs-quote-invoice-table .cs-col-status {
        width: 120px;
        text-align: center;
    }

    .cs-quote-invoice-table .cs-col-total {
        width: 120px;
        text-align: right;
    }

    .cs-quote-invoice-table .cs-col-action {
        width: 90px;
        text-align: right;
    }

/* ---------- Shared table link & money styles ---------- */
.cs-client-link {
    font-weight: 700;
    color: var(--cs-heading) !important;
    text-decoration: none !important;
}

    .cs-client-link:hover {
        text-decoration: underline !important;
    }

.cs-money-quote {
    color: var(--cs-heading);
    font-weight: 600;
}

.cs-money-supply {
    color: var(--cs-muted);
}



/* ==========================================================================
8. FORMS, ALERTS & DROPDOWNS
========================================================================== */
/* Entry boxes: faint tint + firmer border so they stand out from the page (colors: base.css 1c, --cs-input-*).
   The box turns white while you type in it; read-only/disabled boxes go gray. */
.form-control,
.form-select {
    width: 100%;
    padding: 0.4rem 0.65rem;
    background-color: var(--cs-input-bg);
    border: 1px solid var(--cs-input-border);
    border-radius: var(--cs-radius);
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--cs-surface);
        border-color: var(--cs-gold);
        outline: 0;
        box-shadow: var(--cs-focus-ring);
    }

    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled {
        background-color: var(--cs-disabled-bg);
        border-color: var(--cs-border);
    }

.alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--cs-radius-md);
    border-left: 4px solid var(--cs-gold);
}

.alert-success {
    background: var(--cs-success-bg);
}

.alert-warning {
    background: var(--cs-warning-alert-bg);
}

.dropdown-menu {
    border: 1px solid var(--cs-border);
    border-top: 2px solid var(--cs-gold);
    box-shadow: var(--cs-shadow-lg);
}

.dropdown-item:hover {
    background: var(--cs-blue-100);
    color: var(--cs-heading);
}

.dropdown-item.disabled {
    opacity: 0.45;
    pointer-events: none;
}




/* ==========================================================================
9. BADGES & STATUS COLORS
========================================================================== */

/* ---------- Base status badge ---------- */
.cs-status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--cs-radius-pill);
    border: 1px solid var(--cs-gold);
    background: var(--cs-blue-100);
    color: var(--cs-heading);
}

/* ---------- Status colors (class is built in Razor: "cs-status-" + status, lowercased, no spaces) ---------- */
/* Job statuses (Services/JobStatus): New grey, Ready to Quote + Quoted navy, Active blue, Completed green */
.cs-status-draft,
.cs-status-new {
    background: var(--cs-neutral-bg);
    color: var(--cs-muted);
    border-color: var(--cs-neutral-border);
}

.cs-status-sent,
.cs-status-generatingzones,
.cs-status-active {
    background: var(--cs-info-bg);
    color: var(--cs-info);
    border-color: var(--cs-info-border);
}

.cs-status-quoted,
.cs-status-readytoquote {
    background: var(--cs-blue-100);
    color: var(--cs-heading);
    border-color: var(--cs-blue-300);
}

.cs-status-inprogress {
    background: var(--cs-warning-bg);
    color: var(--cs-warning);
    border-color: var(--cs-gold);
}

.cs-status-accepted,
.cs-status-paid,
.cs-status-completed {
    background: var(--cs-success-bg);
    color: var(--cs-success);
    border-color: var(--cs-success-border);
}

.cs-status-declined,
.cs-status-void {
    background: var(--cs-danger-bg);
    color: var(--cs-danger);
    border-color: var(--cs-danger-border);
}
/* Canceled / superseded documents: muted and struck through */
.cs-status-canceled {
    background: var(--cs-neutral-bg);
    color: var(--cs-neutral);
    border-color: var(--cs-neutral-border);
    text-decoration: line-through;
}

/* Active work list */
.cs-status-active {
    background: var(--cs-success-bg);
    color: var(--cs-success);
    border-color: var(--cs-success-border);
}

/* ---------- Count & trade badges ---------- */
.cs-count-badge {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    border-radius: var(--cs-radius-pill);
    background: var(--cs-navy);
    color: var(--cs-on-dark);
}

.cs-trade-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--cs-radius-sm);
    background: var(--cs-blue-100);
    color: var(--cs-heading);
}

/* ---------- Phase dots ---------- */
.cs-phase-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--cs-muted);
}

.cs-phase-draft {
    background: var(--cs-neutral);
}

.cs-phase-generating {
    background: var(--cs-info-dot);
}

.cs-phase-quoted {
    background: var(--cs-navy);
}

.cs-phase-progress {
    background: var(--cs-gold);
}

.cs-phase-completed {
    background: var(--cs-success);
}



/* ==========================================================================
11. SECTION CARDS (Zones / Quotes / Invoices)
Base .cs-section-card / .cs-section-fit / .cs-table-header-bar /
.cs-section-title rules live in section 7 (Cards & Tables).
========================================================================== */

/* ---------- 12. CPM / Gantt ---------- */
/* (Section 11 continued) */

.cs-cpm-chart {
    padding: 0 0.75rem 0.75rem;
}

    /* Normal bars: brand navy. Critical path bars: red. Add --cs-danger to :root to theme it. */
    .cs-cpm-chart .gantt .bar-wrapper.cs-cpm-normal .bar {
        fill: var(--cs-navy);
        stroke: var(--cs-navy-deep);
    }

    .cs-cpm-chart .gantt .bar-wrapper.cs-cpm-critical .bar {
        fill: var(--cs-danger, #b02a37);
        stroke: var(--cs-danger, #b02a37);
    }

    /* Progress isn't used: hide its bar and drag handle. */
    .cs-cpm-chart .gantt .bar-progress,
    .cs-cpm-chart .gantt .handle.progress {
        display: none;
    }

    /* Task names: the library draws them "lighter"; make them solid. Inside a bar: white. Beside it: dark. */
    .cs-cpm-chart .gantt .bar-label {
        font-size: 12px;
        font-weight: 600;
        fill: #ffffff;
    }

        .cs-cpm-chart .gantt .bar-label.big {
            fill: var(--cs-text);
        }

    /* Dates across the top */
    .cs-cpm-chart .gantt .lower-text {
        fill: var(--cs-text);
        font-weight: 500;
    }

    /* Month / year names: start at their first day (cpm.js sets the x) */
    .cs-cpm-chart .gantt .upper-text {
        fill: var(--cs-heading);
        font-weight: 700;
        text-anchor: start;
    }

    /* A bar's pop-up: a white card with dark text (the library's is near-black, and our text was dark on it) */
    .cs-cpm-chart .gantt-container .popup-wrapper {
        background: var(--cs-surface);
        color: var(--cs-text);
        border: 1px solid var(--cs-border);
        border-left: 4px solid var(--cs-gold);
        border-radius: var(--cs-radius-md);
        box-shadow: var(--cs-shadow-lg);
    }

        .cs-cpm-chart .gantt-container .popup-wrapper .pointer {
            display: none;
        }

    /* Saturdays and Sundays lightly shaded (Day view; cpm.js) */
    .cs-cpm-chart .gantt .cs-cpm-weekend {
        fill: var(--cs-gray-300);
        opacity: 0.35;
    }

    /* Today: a gold line down the chart (cpm.js) */
    .cs-cpm-chart .gantt .cs-cpm-today {
        stroke: var(--cs-gold);
        stroke-width: 2;
    }

    .cs-cpm-chart .gantt .cs-cpm-today-label {
        font-size: 10px;
        font-weight: 700;
        fill: var(--cs-warning);
    }

    /* Done tasks: green bars (cpm.js custom_class) */
    .cs-cpm-chart .gantt .bar-wrapper.cs-cpm-done .bar {
        fill: var(--cs-success);
        stroke: var(--cs-success);
    }

/* "Work days only (skip weekends)" check box beside the start date */
.cs-cpm-workdays {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cs-heading);
    cursor: pointer;
}

    .cs-cpm-workdays .form-check-input {
        margin: 0;
    }

/* "3 of 5 done": a small pill, green when everything's done */
.cs-cpm-progress:not(:empty) {
    padding: 0.15rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cs-heading);
    background: var(--cs-blue-100);
    border-radius: 999px;
}

    .cs-cpm-progress.is-complete {
        color: #ffffff;
        background: var(--cs-success);
    }

/* Task table: narrow Done column, bigger tick box; a done row's text is faded */
.cs-cpm-done-col {
    width: 3.5rem;
    text-align: center;
}

.cs-cpm-done {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.cs-cpm-row-done .cs-cpm-name {
    color: var(--cs-muted);
    text-decoration: line-through;
}

/* A save that didn't go through: a red note you can't miss (cpm.js setStatus) */
.cs-cpm-status-error {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem !important;
    font-weight: 700;
    color: #ffffff !important;
    background: var(--cs-danger);
    border-radius: 999px;
}

.cs-cpm-popup {
    min-width: 10rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--cs-text);
}

/* Task table controls (these must come after .form-control, which sets width: 100%) */
.cs-cpm-date {
    width: auto;
}

.cs-cpm-name {
    min-width: 10rem;
}

.cs-cpm-days {
    width: 5rem;
}

.cs-cpm-add {
    width: auto;
    max-width: 11rem;
}

.cs-cpm-unlink {
    padding: 0 0 0 0.3rem;
    border: 0;
    background: transparent;
    color: var(--cs-muted);
    line-height: 1;
    cursor: pointer;
}

    .cs-cpm-unlink:hover {
        color: var(--cs-text);
    }



/* ==========================================================================
14. UI TILES
========================================================================== */
.cs-tile {
    display: block;
    height: 100%;
    padding: 1.2rem 1.35rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-left: 4px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
    text-decoration: none !important;
    color: var(--cs-text) !important;
    transition: box-shadow var(--cs-transition), transform var(--cs-transition);
}

    .cs-tile:hover {
        box-shadow: var(--cs-shadow-lg);
        transform: translateY(-2px);
        color: var(--cs-text) !important;
    }

.cs-tile-title {
    margin-bottom: 0.3rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cs-heading);
}

.cs-tile-desc {
    margin: 0;
    font-size: 0.9rem;
    color: var(--cs-muted);
}



/* ==========================================================================
18. DIALOGS & FORM HELPERS
========================================================================== */

/* ---------- Popup window (native <dialog>) ---------- */
.cs-dialog {
    width: min(36rem, 94vw);
    padding: 0;
    border: 1px solid var(--cs-border);
    border-top: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-lg);
    background: var(--cs-surface);
    color: var(--cs-text);
    box-shadow: var(--cs-shadow-lg);
}

    /* Dims the page behind the popup */
    .cs-dialog::backdrop {
        background: rgba(var(--cs-navy-rgb), 0.45);
    }

.cs-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--cs-blue-100);
    border-bottom: 1px solid var(--cs-blue-200);
}

.cs-dialog-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-dialog-close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cs-muted);
    cursor: pointer;
}

    .cs-dialog-close:hover {
        color: var(--cs-text);
    }

.cs-dialog-body {
    padding: 1rem;
    max-height: 75vh;
    overflow-y: auto;
}

/* Save / Cancel row at the bottom of a popup */
.cs-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ---------- Dropdown with a button beside it ---------- */
.cs-input-action {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

    .cs-input-action .form-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

/* ---------- Two-column form grid that collapses on narrow screens ---------- */
.cs-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.85rem 1rem;
}


/* ==========================================================================
22. CLICKABLE ROWS
Pairs with the "clickable rows" script at the end of site.js.
========================================================================== */
.cs-home .table tbody tr,
.cs-row-link tbody tr {
    cursor: pointer;
}



/* ==========================================================================
23. PAGE BANNER
Shared header for the main pages, built from the Home header (sections 20-21).
Markup: Views/Shared/Components/PageBanner/Default.cshtml
Layout: logo | company + page title | optional stats card (wraps on small screens)
========================================================================== */

/* ---------- 23a. Tokens (change the logo size for every banner here) ---------- */
:root {
    --cs-banner-logo-height: 96px; /* a step above the Home header's 88px */
    --cs-banner-logo-width: 200px;
}

/* ---------- 23b. Bar: same tint, border and shadow as the Home header ---------- */
.cs-page-banner {
    display: flex;
    flex-direction: row; /* Bootstrap's .card stacks children in a column; the banner is a row */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: var(--cs-gap); /* inside .cs-projects the flex gap takes over (12a) */
    padding: 0.8rem 1.25rem;
    background: var(--cs-home-header-bg);
    border: 1px solid var(--cs-blue-300);
    border-bottom: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-md);
}

.cs-banner-logo {
    display: block;
    max-height: 56px;
    max-width: 120px;
    object-fit: contain;
    padding: 0.25rem;
    background: var(--cs-surface);
    border: 2px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
}

/* ---------- 23c. Letterhead: logo with company name and address beside it ---------- */
.cs-banner-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 1 auto;
    min-width: 0;
}

.cs-banner-company {
    min-width: 0;
}

.cs-banner-company-name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cs-heading);
}

.cs-banner-address {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--cs-muted);
}

/* ---------- 23c-2. Page title: centered in the space between the letterhead and the stats ---------- */
.cs-banner-titles {
    flex: 1 1 100%; /* phones: own row under the letterhead */
    min-width: 0;
    text-align: center;
}

.cs-banner-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cs-heading);
}

.cs-banner-sub {
    margin-top: 0.2rem;
    font-size: 0.95rem;
    color: var(--cs-muted);
}

/* ---------- 23d. Stats card: same look as the Home Year to Date card ---------- */
.cs-banner-stats {
    flex: 1 1 100%; /* phones: own row, full width */
    padding: 0.6rem 1rem 0.7rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-blue-200);
    border-left: 4px solid var(--cs-gold);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
}

.cs-banner-stats-title {
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--cs-muted);
    border-bottom: 1px solid var(--cs-blue-100);
}

.cs-banner-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* phones: 2 x 2 */
    gap: 0.5rem 1.25rem;
}

.cs-banner-stat {
    display: block;
    min-width: 0;
    padding: 0.2rem 0;
    text-align: center;
    color: inherit;
    border-radius: var(--cs-radius-md);
}

.cs-banner-stat-link {
    text-decoration: none !important;
    transition: background var(--cs-transition);
}

    .cs-banner-stat-link:hover {
        background: var(--cs-blue-50);
    }

.cs-banner-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--cs-heading);
    font-variant-numeric: tabular-nums;
}

.cs-banner-stat-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cs-muted);
}

.cs-banner-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

/* ---------- 23e. Desktop and tablet (768px+): Home header sizes, stats in one row ---------- */
@media (min-width: 768px) {
    .cs-page-banner {
        padding: 1.25rem 1.75rem;
    }

    .cs-banner-logo {
        max-height: var(--cs-banner-logo-height);
        max-width: var(--cs-banner-logo-width);
    }

    .cs-banner-company-name {
        font-size: 1.3rem;
    }

    .cs-banner-address {
        font-size: 0.95rem;
    }

    .cs-banner-titles {
        flex: 1 1 14rem; /* shares the row; wraps below the letterhead if space runs out */
    }

    .cs-banner-title {
        font-size: 2.4rem;
    }

    .cs-banner-sub {
        font-size: 1.15rem;
    }

    .cs-banner-stats {
        flex: 0 0 auto;
        margin-left: auto; /* pinned right; drops to its own row if the bar runs out of room */
    }

    .cs-banner-stats-grid {
        grid-template-columns: none;
        grid-auto-flow: column; /* any number of stats lines up in one row */
        grid-auto-columns: auto;
        gap: 0;
    }

    /* Kept short so the snapshot box doesn't stand taller than the banner's title */
    .cs-banner-stats {
        padding: 0.4rem 0.9rem 0.45rem;
    }

    .cs-banner-stat {
        padding: 0 1.25rem;
    }

        .cs-banner-stat + .cs-banner-stat {
            border-left: 1px solid var(--cs-blue-100);
        }

    .cs-banner-stat-value {
        font-size: 1.3rem;
    }

    .cs-banner-stat-label {
        font-size: 0.68rem;
    }

    .cs-banner-stats-title {
        margin-bottom: 0.25rem;
        padding-bottom: 0.2rem;
        font-size: 0.72rem;
    }
}

/* ---------- 23f. Toolbar row under a banner (page buttons, flush left) ---------- */
.cs-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--cs-gap);
}

/* ---------- 23g. Company Info: logo preview (was an inline style) ---------- */
.cs-company-logo-preview {
    max-height: 80px;
    max-width: 240px;
    padding: 0.25rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm);
}



/* ==========================================================================
38. NUMBER BOXES + LABOR RATE NOTES
========================================================================== */

/* ---------- 38a. No up/down arrows on number boxes, site-wide ----------
   Over remote desktop the browser can miss the mouse release and the arrows keep counting.
   Typing still works; site.js also stops the mouse wheel from changing a focused number. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---------- 38b. Labor rate: where it comes from, and a warning when nothing is charged ---------- */
/* Job Summary header (Projects/Details) */
.cs-labor-missing {
    margin: 0.25rem 0 0.4rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    color: var(--cs-warning);
    background: var(--cs-warning-alert-bg);
    border: 1px solid var(--cs-gold-soft);
    border-radius: var(--cs-radius);
}

/* Jobs Dashboard Totals pop-up: small line under the labor rows */
.cs-totals-table tfoot .cs-totals-labor-source td {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--cs-muted);
    background: var(--cs-blue-50);
}

    .cs-totals-labor-source a {
        margin-left: 0.35rem;
        font-weight: 600;
        color: var(--cs-heading);
    }

.cs-labor-missing-text {
    font-weight: 600;
    color: var(--cs-warning);
}



/* ==========================================================================
41. LABOR RATE "LOOKS LIKE AN HOURLY WAGE" WARNING (site.js, inputs with data-rate-check)
========================================================================== */
.cs-rate-warning {
    margin-top: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
    color: var(--cs-warning);
    background: var(--cs-warning-alert-bg);
    border: 1px solid var(--cs-gold-soft);
    border-left: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius);
}



/* ==========================================================================
49. HOME "WORKING IN" TRADE BOX (Views/Home/_Snapshot, Services/CurrentTrade)
========================================================================== */
.cs-trade-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.cs-trade-picker-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-heading);
}

.cs-trade-picker-select {
    width: auto;
    min-width: 13rem;
    font-weight: 600;
    color: var(--cs-heading);
    border-color: var(--cs-navy);
}

/* Phones: box full width */
@media (max-width: 575.98px) {
    .cs-trade-picker-select {
        flex: 1 1 100%;
        min-width: 0;
    }
}



/* ==========================================================================
50. FIELD SCREENS: STACKING TABLES ON PHONES + WORK LIST (Views/WorkList/Index)
   Field screens (Work List, Quotes, Invoices, Zones) are built phone-first; see CLAUDE.md.
========================================================================== */

/* ---------- 50a. .cs-stack-table: a normal table on wider screens; on phones each row becomes a small card.
   The first cell (.cs-stack-title) is the card's heading; other cells show their data-label on the left. ---------- */
@media (max-width: 575.98px) {
    .cs-stack-table thead {
        display: none;
    }

    .cs-stack-table,
    .cs-stack-table tbody,
    .cs-stack-table tr,
    .cs-stack-table td {
        display: block;
        width: 100%;
    }

    .cs-stack-table tr {
        padding: 0.65rem 0.9rem;
        border-bottom: 1px solid var(--cs-border);
    }

    .cs-stack-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.25rem 0 !important;
        text-align: right;
        border: none !important;
    }

    .cs-stack-table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.78rem;
        font-weight: 600;
        text-align: left;
        color: var(--cs-muted);
    }

    .cs-stack-table td.cs-stack-title {
        justify-content: flex-start;
        font-size: 1rem;
        text-align: left;
    }
}


/* ==========================================================================
busy. BUSY BUTTONS (no double saves)
========================================================================== */
/* Any Save/Send button whose form is already on its way (site.js "no double saves"): dimmed, can't be pressed again */
.btn.is-busy,
button.is-busy {
    opacity: 0.6;
    pointer-events: none;
    cursor: progress;
}



/* ==========================================================================
53. HELP: ? BUTTONS + SLIDE-IN HELP PANEL (_Layout, site.js "Help panel", Views/Help/Topics)
   The ? in the top bar opens help for the page; the ? beside a pop-up's X opens help for the pop-up.
   The panel is a <dialog> so it can sit on top of an open pop-up. Phones: full width.
========================================================================== */

/* ---------- 53a. ? buttons: round, gold edge (top bar = on navy; -light = on a pop-up's pale header) ---------- */
.cs-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cs-on-dark);
    background: transparent;
    border: 2px solid var(--cs-gold);
    border-radius: 50%;
    cursor: pointer;
}

    .cs-help-btn:hover,
    .cs-help-btn:focus-visible {
        color: var(--cs-navy);
        background: var(--cs-gold);
        outline: 0;
    }

.cs-help-btn-light {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.95rem;
    color: var(--cs-heading);
}

/* Pop-up header: ? and X side by side on the right */
.cs-dialog-header-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* ---------- 53b. The panel: right edge, full height, slides in ---------- */
.cs-help-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(30rem, 100vw);
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    color: var(--cs-text);
    background: var(--cs-surface);
    border: 0;
    border-left: 4px solid var(--cs-gold);
    box-shadow: var(--cs-shadow-lg);
}

    .cs-help-panel[open] {
        display: flex;
        flex-direction: column;
        animation: cs-help-in 0.2s ease-out;
    }

    .cs-help-panel::backdrop {
        background: rgba(var(--cs-navy-rgb), 0.3);
    }

@keyframes cs-help-in {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.cs-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--cs-navy);
}

.cs-help-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cs-on-dark);
}

.cs-help-close,
.cs-help-close:hover {
    color: var(--cs-on-dark);
}

.cs-help-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.15rem 2rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ---------- 53c. Help page content (Views/Help/Topics) ---------- */
.cs-help-body h3 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--cs-heading);
}

.cs-help-body h4 {
    margin: 1.25rem 0 0.4rem;
    padding-bottom: 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cs-heading);
    border-bottom: 2px solid var(--cs-gold);
}

.cs-help-body p {
    margin: 0 0 0.6rem;
}

.cs-help-body ol,
.cs-help-body ul {
    margin: 0 0 0.6rem;
    padding-left: 1.3rem;
}

.cs-help-body li {
    margin-bottom: 0.3rem;
}

/* One-line "what this screen is for" under the title */
.cs-help-lead {
    color: var(--cs-muted);
}

/* Box / button names: label | what it means */
.cs-help-terms {
    margin: 0 0 0.6rem;
}

    .cs-help-terms dt {
        font-weight: 700;
        color: var(--cs-heading);
    }

    .cs-help-terms dd {
        margin: 0 0 0.5rem;
        padding-left: 0.75rem;
        border-left: 2px solid var(--cs-blue-200);
    }

/* Common problems: question in bold, answer under it */
.cs-help-faq dt {
    font-weight: 700;
}

.cs-help-faq dd {
    margin: 0 0 0.6rem;
}

/* "Full only" tag on features Lite hides (help itself is for everyone) */
.cs-help-full {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--cs-heading);
    background: var(--cs-gold-tint-strong);
    border: 1px solid var(--cs-gold);
    border-radius: var(--cs-radius-pill);
}

/* Links to other help pages */
.cs-help-body [data-cs-help] {
    font-weight: 600;
    color: var(--cs-info);
    cursor: pointer;
}

.cs-help-see {
    margin-top: 1.25rem;
    padding-top: 0.6rem;
    font-size: 0.85rem;
    border-top: 1px solid var(--cs-border);
}

@media print {
    .cs-help-btn {
        display: none;
    }
}



/* ==========================================================================
55. ACCOUNT MENU + ACCOUNT PAGES (Views/Shared/_LoginPartial, Areas/Identity/Pages/_Layout)
   Top-right button (initial + email) opens: signed in as, Change Email / Password, Settings, Dark mode, Log out.
   Phones: just the initial. The built-in account pages sit in a card.
========================================================================== */
.cs-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 16rem;
    padding: 0.2rem 0.55rem 0.2rem 0.25rem;
    font-size: 0.82rem;
    color: var(--cs-on-dark-soft);
    background: transparent;
    border: 1px solid rgba(var(--cs-gold-rgb), 0.5);
    border-radius: var(--cs-radius-pill);
    cursor: pointer;
}

    .cs-account-btn:hover,
    .cs-account-btn[aria-expanded="true"] {
        color: var(--cs-on-dark);
        background: rgba(var(--cs-gold-rgb), 0.15);
    }

/* Round gold badge with the first letter of the email */
.cs-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    font-weight: 800;
    color: var(--cs-navy);
    background: var(--cs-gold);
    border-radius: 50%;
}

.cs-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-account-dropdown {
    min-width: 15rem;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-top: 3px solid var(--cs-gold);
    box-shadow: var(--cs-shadow-lg);
}

    .cs-account-dropdown .dropdown-item {
        padding: 0.45rem 1rem;
        color: var(--cs-text);
    }

        .cs-account-dropdown .dropdown-item:hover,
        .cs-account-dropdown .dropdown-item:focus {
            color: var(--cs-heading);
            background: var(--cs-blue-100);
        }

    .cs-account-dropdown .dropdown-divider {
        border-color: var(--cs-border);
    }

/* "Signed in as" + the email */
.cs-account-who {
    padding: 0.25rem 1rem 0.35rem;
    font-size: 0.78rem;
    color: var(--cs-muted);
}

    .cs-account-who strong {
        display: block;
        font-size: 0.88rem;
        color: var(--cs-text);
        overflow-wrap: anywhere;
    }

/* Dark mode: label left, switch right */
.cs-theme-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

.cs-account-logout {
    font-weight: 600;
}

/* Phones: the initial only, to save room */
@media (max-width: 575.98px) {
    .cs-account-email {
        display: none;
    }

    .cs-account-btn {
        padding-right: 0.25rem;
    }
}

/* The built-in account pages (log in, register, change email / password) in a card */
.cs-account-page {
    max-width: 60rem;
    padding: 1.5rem;
}

    .cs-account-page h1,
    .cs-account-page h2,
    .cs-account-page h3 {
        color: var(--cs-heading);
    }

    .cs-account-page .nav-pills .nav-link.active {
        color: var(--cs-on-dark);
        background: var(--cs-navy);
    }

    .cs-account-page .nav-pills .nav-link {
        color: var(--cs-heading);
    }



/* ==========================================================================
59. INFO POP-OVERS: THE ⓘ BESIDE A BOX'S NAME (<cs-info>, TagHelpers/InfoTagHelper; site.js "Info pop-overs")
   A small round "i" right after the label; tapping it shows a note under it. Big enough to tap on a phone.
========================================================================== */
.cs-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: 0.3rem;
    padding: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    vertical-align: 0.1em;
    color: var(--cs-heading);
    background: var(--cs-blue-100);
    border: 1px solid var(--cs-blue-300);
    border-radius: 50%;
    cursor: pointer;
}

    /* A bigger invisible tap area on touch screens */
    .cs-info {
        position: relative;
    }

        .cs-info::after {
            content: "";
            position: absolute;
            inset: -0.5rem;
        }

    .cs-info:hover,
    .cs-info[aria-expanded="true"] {
        color: var(--cs-navy);
        background: var(--cs-gold);
        border-color: var(--cs-gold);
    }

/* The note itself: floats above the page (or inside the open pop-up window) */
.cs-info-pop {
    position: fixed;
    z-index: 2000;
    max-width: min(20rem, calc(100vw - 1rem));
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--cs-text);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
    box-shadow: var(--cs-shadow-lg);
}

/* A label with an ⓘ: keep the ⓘ on the label's line (labels are block in some forms) */
.form-label:has(+ .cs-info) {
    display: inline-block;
}

@media print {
    .cs-info,
    .cs-info-pop {
        display: none;
    }
}



/* ==========================================================================
60. LOG IN + CREATE ACCOUNT (Areas/Identity/Pages/Account/Login + Register)
   No side menu (body.cs-auth-body); a centered card: navy CrewSheet header with a gold line, title, form,
   one big button, and the "New here? / Already have an account?" link at the bottom.
========================================================================== */
.cs-auth-body .cs-sidebar {
    display: none !important;
}

.cs-auth {
    display: flex;
    justify-content: center;
    padding: 2rem 0 3rem;
}

.cs-auth-card {
    width: min(26rem, 100%);
    padding: 0;
    overflow: hidden;
    border-left: 1px solid var(--cs-border);   /* not the usual gold card edge: the header carries the color */
    box-shadow: var(--cs-shadow-md);
}

.cs-auth-head {
    padding: 1.25rem 1.5rem 1rem;
    text-align: center;
    background: var(--cs-navy);
    border-bottom: 3px solid var(--cs-gold);
}

.cs-auth-brand {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--cs-on-dark);
}

.cs-auth-tagline {
    font-size: 0.82rem;
    color: var(--cs-on-dark-muted);
}

.cs-auth-title {
    margin: 1.4rem 1.5rem 0.2rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--cs-heading);
}

.cs-auth-sub {
    margin: 0 1.5rem 1rem;
    font-size: 0.88rem;
    color: var(--cs-muted);
}

.cs-auth-form {
    padding: 0 1.5rem;
}

    .cs-auth-form .form-label {
        margin-bottom: 0.2rem;
        font-weight: 600;
    }

    .cs-auth-form .form-control {
        padding: 0.55rem 0.75rem;   /* a little taller: easy to tap on a phone */
    }

/* "Password" label with "Forgot your password?" on the right */
.cs-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.cs-auth-small-link {
    font-size: 0.8rem;
    color: var(--cs-info);
}

.cs-auth-submit {
    width: 100%;
    min-height: 2.75rem;
    font-size: 1rem;
    font-weight: 700;
}

.cs-auth-switch {
    margin-top: 1.25rem;
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--cs-muted);
    background: var(--cs-blue-50);
    border-top: 1px solid var(--cs-border);
}

    .cs-auth-switch a {
        font-weight: 700;
        color: var(--cs-heading);
    }

@media (max-width: 575.98px) {
    .cs-auth {
        padding-top: 1rem;
    }
}



/* ==========================================================================
64. TOASTS (Views/Shared/_Toasts; site.js "Toasts")
Page messages ("Saved", "Zone added", problems) float over the page, top center, instead of pushing it down.
Success fades on its own; a problem stays until closed.
========================================================================== */
.cs-toasts {
    position: fixed;
    top: 4.75rem;               /* just under the top bar */
    left: 50%;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(34rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    pointer-events: none;       /* the gap between notes never blocks a click */
}

.cs-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    color: var(--cs-text);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-left: 5px solid var(--cs-success);
    border-radius: var(--cs-radius-md);
    box-shadow: var(--cs-shadow-lg);
    pointer-events: auto;
    animation: cs-toast-in 0.25s ease-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cs-toast-problem {
    border-left-color: var(--cs-danger);
}

    .cs-toast.is-leaving {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

.cs-toast-icon {
    flex: 0 0 1.4rem;
    height: 1.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
    color: #ffffff;
    background: var(--cs-success);
    border-radius: 50%;
}

.cs-toast-problem .cs-toast-icon {
    background: var(--cs-danger);
}

.cs-toast-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cs-toast-close {
    flex: 0 0 auto;
    padding: 0 0.25rem;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--cs-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

    .cs-toast-close:hover {
        color: var(--cs-text);
    }

@keyframes cs-toast-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}