/* ==========================================================================
CrewSheet styles: pages/jobs.css
==========================================================================
Jobs dashboard, Job Summary (project details), labor, New Job wizard.

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
  10        PROJECT DETAILS HEADER & TABS
  12        PROJECTS PAGE (KPI strip, chips, search, sort, dashboard table)
  24        JOBS DASHBOARD
  26        LABOR (job details header + Totals pop-up)
  32        JOBS DASHBOARD: STATUS BY EDGE LINE
  34        NEW JOB WIZARD
  35        JOB STATUS "AWAITING QUOTE" + WORK LIST COLUMN + DESCRIPTION REVEAL
  45        INVOICES PAGE CREATE CARD + JOB SUMMARY BUTTON BAR
  tradetag  JOBS DASHBOARD: TRADE TAG
========================================================================== */

/* ==========================================================================
10. PROJECT DETAILS HEADER & TABS
========================================================================== */
.cs-project-header {
    margin-bottom: 1.25rem !important;
    padding: 1rem 1.25rem !important;
    background: var(--cs-surface);
    border-left: 5px solid var(--cs-gold) !important;
    border-right: 2px solid var(--cs-gold) !important;
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-md);
}

/* Job Summary's top box: a light gray so it stands apart from the white sections below */
.cs-project-header.cs-project-header-gray {
    background: var(--cs-gray-100);
}

/* 4-column grid: Logo | Client info | Totals (2 sub-columns, so it's wider) | Meta */
.cs-header-4col {
    display: grid;
    grid-template-columns: auto 1.2fr 2fr 0.9fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .cs-header-4col {
        grid-template-columns: auto 1fr;
    }

    .cs-header-col-logo {
        grid-row: auto;
        align-self: start;
    }

    .cs-header-col-totals,
    .cs-header-col-meta {
        grid-column: 1 / -1; /* span both columns */
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px dashed var(--cs-border);
    }
}

@media (max-width: 575.98px) {
    .cs-header-4col {
        grid-template-columns: 1fr;
    }

    .cs-header-col-logo {
        grid-row: auto;
        justify-content: flex-start;
    }

    .cs-header-logo-img {
        max-width: 120px;
        max-height: 120px;
    }

    /* Phones: Actual Labor goes under Project Totals */
    .cs-header-col-totals.cs-header-totals-2col {
        grid-template-columns: 1fr;
    }
}

/* ---------- Logo column ---------- */
.cs-header-col-logo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 150px; /* reserves the column even with no image */
}

.cs-header-logo-img {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
}

.cs-header-logo-placeholder {
    width: 150px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--cs-border);
    border-radius: 4px;
    color: var(--cs-muted);
    font-size: 0.7rem;
    text-align: center;
    background: var(--cs-bg);
}

/* ---------- Info / totals / meta columns ---------- */
.cs-header-col-info,
.cs-header-col-totals,
.cs-header-col-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

/* Totals column: Project Totals | Actual Labor side by side, each its own short list */
.cs-header-col-totals.cs-header-totals-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.5rem;
    align-items: start;
}

.cs-header-subcol {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.cs-header-col-heading {
    display: inline-block; /* shrinks the box (and its border) to fit the text */
    align-self: flex-start; /* opts out of the parent flex column's stretch */
    margin-bottom: 0.15rem;
    padding-bottom: 0.2rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--cs-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--cs-border);
}

/* A second heading in the same column (Actual Labor under Labor on the Job Summary) */
.cs-header-col-heading.cs-header-col-heading-next {
    margin-top: 0.75rem;
}

.cs-header-line {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Let Job Description value wrap normally next to its label */
.cs-header-line-wrap {
    align-items: baseline;
    flex-wrap: wrap;
}

    .cs-header-line-wrap .cs-header-value {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
    }

.cs-header-label {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--cs-muted);
    white-space: nowrap;
}

.cs-header-value {
    font-size: 1rem;
    color: var(--cs-text);
    word-break: break-word;
}

.cs-header-link {
    color: var(--cs-heading) !important;
    text-decoration: none !important;
    font-size: 1rem;
}

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

.cs-project-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--cs-heading);
    letter-spacing: -0.01em;
}

/* ---------- Bottom tab row ---------- */
.cs-project-tabs-plain {
    display: flex;
    gap: 1.5rem;
    border-color: var(--cs-border) !important;
}

.cs-tab-link {
    color: var(--cs-heading) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

    .cs-tab-link:hover {
        border-bottom-color: var(--cs-muted);
    }

    .cs-tab-link.active {
        border-bottom-color: var(--cs-gold);
    }



/* ==========================================================================
12. PROJECTS PAGE (KPI strip, chips, search, sort, dashboard table)
========================================================================== */

/* ---------- Header bar: logo | centered title | New Project ---------- */
.cs-dash-bar {
    padding: 0.9rem 1.25rem;
    background: var(--cs-surface);
    border-bottom: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0;
}

.cs-dash-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.cs-dash-logo-col {
    display: flex;
    align-items: center;
}

.cs-dash-logo {
    max-height: 64px;
    max-width: 140px;
    object-fit: contain;
    padding: 0.25rem;
    background: var(--cs-surface);
    border: 2px solid var(--cs-gold);
    border-radius: 0.3rem;
}

.cs-dash-title {
    font-size: 1.9rem;
}

.cs-dash-action {
    justify-self: end;
}

@media (max-width: 767.98px) {
    .cs-dash-header {
        grid-template-columns: auto 1fr;
    }

    .cs-dash-action {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 0.5rem;
    }
}

/* ---------- KPI strip ---------- */
.cs-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.cs-kpi-card {
    padding: 0.85rem 1rem;
    text-align: center;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-left: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
}

.cs-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cs-heading);
    line-height: 1.1;
}

.cs-kpi-sub {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cs-muted);
}

.cs-kpi-label {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cs-muted);
}

.cs-kpi-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

    .cs-kpi-link:hover {
        border-color: var(--cs-gold);
        box-shadow: var(--cs-shadow-lg);
    }

@media (max-width: 767.98px) {
    .cs-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Filter chips ---------- */
.cs-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cs-chip {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cs-heading) !important;
    text-decoration: none !important;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-pill);
}

    .cs-chip:hover {
        border-color: var(--cs-gold);
        background: var(--cs-blue-50);
    }

    .cs-chip.is-active {
        background: var(--cs-navy);
        border-color: var(--cs-navy);
        color: var(--cs-on-dark) !important;
    }

.cs-chip-count {
    opacity: 0.75;
}

/* ---------- Search row ---------- */
.cs-search-row {
    display: flex;
    gap: 0.5rem;
    max-width: 26rem;
}

.cs-search-input {
    background: var(--cs-surface);
}

/* ---------- Sortable column headers ---------- */
.cs-sort-link {
    color: inherit !important;
    text-decoration: none !important;
}

    .cs-sort-link:hover {
        color: var(--cs-heading) !important;
    }

    .cs-sort-link.is-asc::after {
        content: " \25B2";
        font-size: 0.65em;
    }

    .cs-sort-link.is-desc::after {
        content: " \25BC";
        font-size: 0.65em;
    }

/* ---------- Dashboard table ---------- */
.cs-dash-table {
    width: 100%;
}

.cs-col-dot {
    width: 2rem;
}

/* Left border by status, on the row's first cell */
.cs-dash-table tbody tr.cs-row-active td:first-child {
    border-left: 3px solid var(--cs-gold);
}

.cs-dash-table tbody tr.cs-row-completed td:first-child {
    border-left: 3px solid var(--cs-success);
}

.cs-dash-table tbody tr.cs-row-quoting td:first-child {
    border-left: 3px solid var(--cs-navy);
}

.cs-dash-table tbody tr.cs-row-archived td:first-child {
    border-left: 3px solid var(--cs-muted);
}

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

/* ---------- Empty states ---------- */
.cs-empty-state {
    padding: 3rem 1.5rem;
}

.cs-panel-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--cs-muted);
}


/* ---------- 12a. Projects page: wrapper, header, toolbar ---------- */

/* One place controls vertical spacing; children never need mb-* utilities */
.cs-projects {
    display: flex;
    flex-direction: column;
    gap: var(--cs-gap);
}

    .cs-projects > * {
        margin-bottom: 0 !important; /* gap replaces per-element margins */
    }

/* Header card: logo | centered titles | quick links */
.cs-proj-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, var(--cs-surface) 0%, var(--cs-blue-50) 100%);
    border-bottom: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-md);
}

    /* Jobs Dashboard header logo — a step up from the base 64×140 */
    .cs-proj-header .cs-dash-logo {
        max-height: 80px;
        max-width: 170px;
    }


.cs-proj-titles {
    text-align: center;
}

    .cs-proj-titles .cs-dash-title {
        margin: 0;
    }

.cs-proj-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

.cs-proj-sub {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: var(--cs-muted);
}

.cs-proj-meta {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--cs-muted);
}

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

@media (max-width: 767.98px) {
    .cs-proj-header {
        grid-template-columns: auto 1fr;
    }

    .cs-proj-titles {
        text-align: left;
    }

    .cs-proj-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* Toolbar: chips on the left, search pinned to the right of the last chip */
.cs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

    .cs-toolbar .cs-search-row {
        flex: 0 1 20rem;
        max-width: 20rem;
        margin-left: auto;
    }

    .cs-toolbar .cs-search-input {
        flex: 1 1 auto;
        min-width: 0;
    }

@media (max-width: 767.98px) {
    .cs-toolbar .cs-search-row {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }
}

/* The Actions select shows at every width (beats the 992px+ hide rule in section 6).
   Use cs-actions-always on any page that is not a .cs-dash-table. */
.cs-dash-table .cs-actions-narrow,
.cs-actions-narrow.cs-actions-always {
    display: block !important;
}



/* ==========================================================================
24. JOBS DASHBOARD
Views/Projects/Index.cshtml (+ wwwroot/js/jobs.js). Builds on section 12.
========================================================================== */

/* ---------- 24a. Toolbar: New Job (left) | status chips (center) | search (right) ---------- */
.cs-jobs-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem 1rem;
}

    .cs-jobs-toolbar .cs-jobs-new {
        white-space: nowrap;
    }

    /* New Job with the "Working in" box beside it (components.css 49) */
    .cs-jobs-toolbar-left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-self: start;
        gap: 0.6rem 1rem;
    }

        .cs-jobs-toolbar-left .cs-trade-picker {
            margin-bottom: 0;
        }

        .cs-jobs-toolbar-left .cs-trade-picker-select {
            min-width: 10rem;
        }

    .cs-jobs-toolbar .cs-chip-row {
        justify-content: center;
    }

    .cs-jobs-toolbar .cs-search-row {
        justify-self: end;
        width: 100%;
        max-width: 22rem;
    }

    .cs-jobs-toolbar .cs-search-input {
        flex: 1 1 auto;
        min-width: 0;
    }

.cs-search-clear {
    align-self: center;
    white-space: nowrap;
}

/* Below 1200px: one item per row (button, chips, search) */
@media (max-width: 1199.98px) {
    .cs-jobs-toolbar {
        grid-template-columns: 1fr;
    }

        .cs-jobs-toolbar .cs-search-row {
            justify-self: stretch;
            max-width: none;
        }
}

/* Phones: chips become a vertical list, New Job and the trade box go full width */
@media (max-width: 575.98px) {
    .cs-jobs-toolbar-left {
        justify-self: stretch;
    }

        .cs-jobs-toolbar-left .cs-jobs-new,
        .cs-jobs-toolbar-left .cs-trade-picker {
            flex: 1 1 100%;
        }

    .cs-jobs-toolbar .cs-chip-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-jobs-toolbar .cs-chip {
        text-align: center;
    }
}

/* ---------- 24b. Table columns: short description, narrow badge and Actions columns ---------- */
/* Job Description: one line with "..."; the full text shows on hover (title attribute) */
.cs-dash-table .cs-truncate {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-dash-table .cs-col-flag {
    width: 1%; /* shrink to fit the badge */
    text-align: center;
    white-space: nowrap;
}

.cs-dash-table .cs-col-actions {
    width: 1%;
}

.cs-dash-table .cs-actions-narrow {
    min-width: 0;
    width: 7.5rem;
}

/* ---------- 24c. At-a-glance badges (Zones / Quoted / Invoiced) ---------- */
.cs-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--cs-radius-pill);
}

/* Zone count: round blue circle */
.cs-flag-count {
    padding: 0 0.4rem;
    background: var(--cs-info-bg);
    color: var(--cs-info);
    border-color: var(--cs-info-border);
}

/* Done: round green check */
.cs-flag-ok {
    padding: 0;
    width: 1.6rem;
    font-size: 0.9rem;
    background: var(--cs-success-bg);
    color: var(--cs-success);
    border-color: var(--cs-success-border);
}

/* Still to do */
.cs-flag-need {
    background: var(--cs-warning-bg);
    color: var(--cs-warning);
    border-color: var(--cs-gold-soft);
}

/* Invoice sent but not paid */
.cs-flag-unpaid {
    background: var(--cs-danger-bg);
    color: var(--cs-danger);
    border-color: var(--cs-danger-border);
}

/* Not applicable yet (e.g. no accepted quote, so no invoice expected) */
.cs-flag-none {
    color: var(--cs-muted);
}

/* ---------- 24d. Material totals pop-up ---------- */
.cs-totals-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-totals-modal .modal-body {
    padding: 0;
}

.cs-totals-head {
    padding: 0.75rem 1rem;
    background: var(--cs-blue-50);
    border-bottom: 1px solid var(--cs-border);
}

.cs-totals-client {
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-totals-jobno {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cs-muted);
}

.cs-totals-desc {
    font-size: 0.85rem;
    color: var(--cs-muted);
}

/* Side padding so numbers don't touch the pop-up edges */
.cs-totals-table th,
.cs-totals-table td {
    padding-left: 1rem;
    padding-right: 1rem;
    font-variant-numeric: tabular-nums;
}

.cs-totals-table tfoot th {
    border-top: 2px solid var(--cs-gold);
    color: var(--cs-heading);
}



/* ==========================================================================
26. LABOR (job details header + Totals pop-up)
Values come from Services/LaborCalculator.cs.
========================================================================== */

/* Job details: "Actual Labor" heading under the Project Totals lines */
.cs-header-subheading {
    margin-top: 0.6rem;
}

/* Small grey note after a value, e.g. "($0.1000/sq ft)" */
.cs-header-note {
    font-size: 0.88rem;
    color: var(--cs-muted);
}

/* Totals pop-up: labor rows sit under the supply total, a shade lighter */
.cs-totals-table tfoot .cs-totals-labor td {
    font-weight: 600;
    background: var(--cs-blue-50);
}

/* Totals pop-up: retainage row is red while still held (normal once paid) */
.cs-totals-table tfoot .cs-totals-retainage td {
    color: var(--cs-danger);
    background: var(--cs-danger-bg);
}



/* ==========================================================================
32. JOBS DASHBOARD: STATUS BY EDGE LINE
Overrides section 12. The row's bold left edge is the only status color; the status itself is
plain text, and the colored dot is gone. Gold is kept for "Need" badges, so Active is blue.
  navy = quoting (Draft, Generating Zones, Quoted, Sent)   blue = In Progress
  green = Completed                                         grey = Archived
========================================================================== */
:root {
    --cs-row-edge-width: 6px; /* change here to make the edge line thicker or thinner */
}

.cs-dash-table tbody tr.cs-row-quoting td:first-child {
    border-left: var(--cs-row-edge-width) solid var(--cs-navy);
}

.cs-dash-table tbody tr.cs-row-active td:first-child {
    border-left: var(--cs-row-edge-width) solid var(--cs-info);
}

.cs-dash-table tbody tr.cs-row-completed td:first-child {
    border-left: var(--cs-row-edge-width) solid var(--cs-success);
}

.cs-dash-table tbody tr.cs-row-archived td:first-child {
    border-left: var(--cs-row-edge-width) solid var(--cs-gray-300);
}

/* Plain status text: readable, no badge */
.cs-dash-table .cs-status-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cs-text);
    white-space: nowrap;
}



/* ==========================================================================
34. NEW JOB WIZARD
Views/Projects/Wizard (+ _WizardPreview) and wwwroot/js/job-wizard.js.
Shares the step/progress/card look with the setup wizard (section 28).
========================================================================== */
.cs-job-wizard {
    max-width: 60rem;
}

/* Cancel sits on the left when there's no Back button yet */
.cs-wizard-cancel {
    margin-right: auto;
}

    .cs-wizard-nav [data-wizard-back]:not([hidden]) + .cs-wizard-cancel {
        margin-right: 0;
    }

/* ---------- 34a. Step 3: zone rows ---------- */
.cs-zone-rows {
    display: grid;
    gap: 0.5rem;
}

.cs-zone-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .cs-zone-row .form-control:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cs-zone-row .cs-zone-sqft {
        flex: 0 0 9rem;
        text-align: right;
    }

.cs-zone-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cs-zone-total {
    color: var(--cs-muted);
}

    .cs-zone-total strong {
        color: var(--cs-heading);
        font-variant-numeric: tabular-nums;
    }

/* ---------- 34b. Step 4: one zone's materials screen ---------- */
.cs-zone-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

    .cs-zone-panel-head .cs-wizard-step-title {
        margin-bottom: 0;
    }

.cs-zone-panel-count {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

.cs-zone-panel-sqft {
    padding: 0.2rem 0.6rem;
    font-weight: 700;
    color: var(--cs-heading);
    background: var(--cs-blue-100);
    border-radius: var(--cs-radius-pill);
    white-space: nowrap;
}

.cs-zone-panel-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

    .cs-zone-panel-tools [data-add-material] {
        margin-left: auto;
    }

.cs-mix-use .form-select {
    width: auto;
}

/* Checklist rows: whole row is clickable; ticked rows get a soft blue */
.cs-pick-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--cs-border);
    cursor: pointer;
}

    .cs-pick-row:hover {
        background: var(--cs-blue-50);
    }

    .cs-pick-row:has(.cs-pick:checked) {
        background: var(--cs-blue-100);
    }

    .cs-pick-row .form-check-input {
        flex: 0 0 auto;
        margin: 0;
    }

.cs-pick-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.cs-pick-name {
    font-weight: 600;
    color: var(--cs-text);
}

.cs-pick-meta {
    font-size: 0.8rem;
    color: var(--cs-muted);
}

.cs-use-for-rest {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    color: var(--cs-heading);
    background: var(--cs-warning-alert-bg);
    border: 1px solid var(--cs-gold-soft);
    border-radius: var(--cs-radius-md);
    cursor: pointer;
}

    .cs-use-for-rest .form-check-input {
        margin: 0;
    }

/* ---------- 34c. Step 5: review ---------- */
.cs-review-zone {
    margin-bottom: 1rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    overflow: hidden;
}

.cs-review-zone-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--cs-blue-100);
    border-bottom: 1px solid var(--cs-blue-200);
}

.cs-review-zone-name {
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-review-zone-sqft {
    font-weight: 600;
    color: var(--cs-muted);
}

.cs-review-table th,
.cs-review-table td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.cs-review-cat {
    font-size: 0.75rem;
    color: var(--cs-muted);
}

.cs-review-problem {
    font-size: 0.78rem;
    color: var(--cs-warning);
}

.cs-review-none {
    padding: 0.75rem;
    color: var(--cs-muted);
}

.cs-review-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding: 0.75rem 1rem;
    background: var(--cs-blue-50);
    border: 1px solid var(--cs-blue-200);
    border-left: 4px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
}

    .cs-review-totals div {
        display: flex;
        flex-direction: column;
    }

    .cs-review-totals span {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--cs-muted);
    }

    .cs-review-totals strong {
        font-size: 1.2rem;
        color: var(--cs-heading);
        font-variant-numeric: tabular-nums;
    }

@media (max-width: 575.98px) {
    .cs-zone-row .cs-zone-sqft {
        flex-basis: 6.5rem;
    }

    .cs-zone-panel-tools [data-add-material] {
        margin-left: 0;
    }
}



/* ==========================================================================
35. JOB STATUS "AWAITING QUOTE" + WORK LIST COLUMN + DESCRIPTION REVEAL
========================================================================== */

/* "Awaiting Quote" badge (Home tables): same blue as "Generating Zones" */
.cs-status-awaitingquote {
    background: var(--cs-info-bg);
    color: var(--cs-info);
    border-color: var(--cs-info-border);
}

/* Jobs Dashboard: job description is short; click (or tap) it to show the whole thing */
.cs-dash-table .cs-truncate {
    max-width: 9rem;
}

.cs-dash-table .cs-desc-toggle {
    display: block;
    padding: 0;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

    .cs-dash-table .cs-desc-toggle.is-open {
        max-width: 16rem;
        white-space: normal;
        overflow: visible;
    }

/* Work List "Generated" badge: green pill with text (wider than the round check) */
.cs-flag-generated {
    background: var(--cs-success-bg);
    color: var(--cs-success);
    border-color: var(--cs-success-border);
}



/* ==========================================================================
45. INVOICES PAGE CREATE CARD + JOB SUMMARY BUTTON BAR
========================================================================== */

/* Invoices page: [From accepted quote ▾] [Create Invoice] on one line, wrapping on phones */
.cs-invoice-create-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cs-invoice-create-pick {
    flex: 1 1 18rem;
}

/* Job Summary: a full-width strip along the bottom of the top card.
   "Go to:" Zones / Quotes / Invoices / Work List / Photos / CPM ... Edit Job (right) */
.cs-job-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem -1.25rem -1rem;          /* runs edge to edge inside the card's padding */
    padding: 0.7rem 1.25rem;
    background: var(--cs-blue-50);
    border-top: 1px solid var(--cs-border);
    border-radius: 0 0 var(--cs-radius-lg) var(--cs-radius-lg);
}

    .cs-job-actions .btn {
        min-width: 6.5rem;
    }

.cs-job-actions-label {
    margin-right: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

.cs-job-actions-edit {
    margin-left: auto;
}

/* Phones: two buttons per row, full width, easy to tap */
@media (max-width: 575.98px) {
    .cs-job-actions-label {
        flex-basis: 100%;
    }

    .cs-job-actions .btn {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .cs-job-actions-edit {
        margin-left: 0;
    }
}

/* ---------- 45d. Long tables (Jobs, Quotes, Invoices, Material Library): the table scrolls inside a screen-high box,
   so its sideways scroll bar is always in view (not below the last row), and the column headings stay pinned
   at the top while scrolling. Put cs-dash-scroll on the box right around the <table>. ---------- */
.cs-dash-scroll {
    max-height: calc(100vh - var(--cs-header-height) - 1.5rem);
    overflow: auto;
}

    .cs-dash-scroll > table > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

/* ---------- 45c. Jobs Dashboard: every other row a faint blue (jobs.js sets cs-row-stripe on the rows showing) ---------- */
/* Bootstrap paints each cell from --bs-table-bg, so the tint is set there (and on the row) */
.cs-dash-table > tbody > tr.cs-row-stripe {
    --bs-table-bg: var(--cs-blue-50);
    background: var(--cs-blue-50);
}

    /* Hover still shows on a tinted row */
    .cs-dash-table > tbody > tr.cs-row-stripe:hover {
        --bs-table-bg: var(--cs-blue-100);
        background: var(--cs-blue-100);
    }

/* The Totals pop-up inside a row keeps its own plain background */
.cs-dash-table .cs-totals-table {
    --bs-table-bg: var(--cs-surface);
}

/* ---------- 45b. Job Summary sections: Zones full width; Quotes | Invoices side by side on wide screens ---------- */
.cs-job-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.cs-job-section {
    margin-bottom: 0 !important;
    border-left: 3px solid var(--cs-gold);
    border-right: 2px solid var(--cs-gold);
    overflow: hidden;
}

.cs-job-section-zones {
    grid-column: 1 / -1;
}

/* Change Orders: full width under Quotes | Invoices */
.cs-job-section-full {
    grid-column: 1 / -1;
}

.cs-job-doc-table .cs-co-desc-col {
    text-align: left !important;
    white-space: normal;
}

.cs-co-billed {
    font-size: 0.78rem;
    color: var(--cs-success);
}

/* Job Summary tables: one size up from the usual accounting table (0.8rem) */
.cs-job-sections .table.cs-accounting-table {
    font-size: 0.9rem;
}

    .cs-job-sections .cs-accounting-table thead th {
        font-size: 0.78rem;
    }

.cs-job-sections .cs-section-title {
    font-size: 1.05rem;
}

/* Quotes / Invoices: number left, status centered, total and View right */
.cs-job-doc-table .cs-col-status {
    text-align: center !important;
}

.cs-job-doc-table .cs-col-action {
    width: 5rem;
}

@media (max-width: 991.98px) {
    .cs-job-sections {
        grid-template-columns: minmax(0, 1fr);
    }
}



/* ==========================================================================
tradetag. JOBS DASHBOARD: TRADE TAG
========================================================================== */
/* Jobs dashboard: which trade a job belongs to, under the client name (companies with 2+ trades) */
.cs-trade-tag {
    display: block;
    width: fit-content;
    margin-top: 0.15rem;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cs-navy);
    background: var(--cs-gold-soft);
    border-radius: var(--cs-radius-pill);
}

    .cs-trade-tag.is-none {
        color: var(--cs-muted);
        background: var(--cs-neutral-bg);
    }


/* ---------- 45e. Job Summary: lien deadline within 30 days (Services/LienDeadline) ---------- */
.cs-lien-warn {
    font-weight: 700;
    color: var(--cs-warning);
}

.cs-lien-bad {
    font-weight: 700;
    color: var(--cs-danger);
}