/* ==========================================================================
CrewSheet styles: pages/settings.css
==========================================================================
Settings: Setup wizard, Lite/Full, Material Library, Trade Info (labor pricing), Assemblies.

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
  28        SETUP WIZARD
  29        LITE / FULL
  31        MATERIAL LIBRARY + TRADE PROFILES BUTTONS
  36        SETUP STEP 4 (STANDARD MIX POP-UP), REQUIRED MARKS, MATERIAL FORM SECTIONS,
  42        TRADE PROFILE LABOR PRICING (Views/TradeProfiles/_TradeProfileFields, site.js data-labor-pricing)
  48        ASSEMBLIES (Views/Assemblies, the zone Materials pop-up, wwwroot/js/assemblies.js)
  54        TRADE PROFILE CARDS (Views/TradeProfiles/Index)
  56        COMPANY INFO LAYOUT (Views/Company/Edit)
  57        MATERIAL LIBRARY: "SHOW EVERY TRADE" SWITCH (Views/Materials/Index)
  62        TRADE PROFILE: "YOUR BUSINESS NUMBERS" (side-job switch + crew cost)
  67        LICENSES & INSURANCE (Views/Compliance)
========================================================================== */

/* ==========================================================================
28. SETUP WIZARD
Views/Setup/Index.cshtml + wwwroot/js/setup-wizard.js (one form, five steps)
========================================================================== */

/* ---------- 28a. Page and heading ---------- */
.cs-wizard {
    max-width: 52rem;
    margin: 0 auto;
    padding-block: 1rem 2rem;
}

.cs-wizard-head {
    margin-bottom: var(--cs-gap);
    text-align: center;
}

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

.cs-wizard-sub {
    margin: 0.25rem 0 1rem;
    color: var(--cs-muted);
}

/* ---------- 28b. Progress: numbered circles, current one gold, finished ones navy ---------- */
.cs-wizard-progress {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .cs-wizard-progress li {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--cs-muted);
    }

.cs-wizard-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--cs-border);
    border-radius: 50%;
    background: var(--cs-surface);
}

.cs-wizard-progress li.is-active {
    color: var(--cs-heading);
}

    .cs-wizard-progress li.is-active .cs-wizard-num {
        border-color: var(--cs-gold);
        background: var(--cs-gold);
        color: var(--cs-navy);
    }

.cs-wizard-progress li.is-done .cs-wizard-num {
    border-color: var(--cs-navy);
    background: var(--cs-navy);
    color: var(--cs-on-dark);
}

/* Phones: numbers only, names hidden to save room */
@media (max-width: 575.98px) {
    .cs-wizard-name {
        display: none;
    }

    .cs-wizard-progress li.is-active .cs-wizard-name {
        display: inline;
    }
}

/* ---------- 28c. Card and step content ---------- */
.cs-wizard-card {
    padding: 1.5rem;
    border-top: 3px solid var(--cs-gold);
    box-shadow: var(--cs-shadow-md);
}

.cs-wizard-step-title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-wizard-subtitle {
    margin: 0.5rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-wizard-hint {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--cs-muted);
}

/* Back on the left, Next/Finish on the right */
.cs-wizard-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cs-border);
}

    .cs-wizard-nav [data-wizard-back] {
        margin-right: auto;
    }

/* ---------- 28d. Step 4: starter materials list ---------- */
.cs-starter-tools {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cs-starter-cat {
    margin: 1rem 0 0.35rem;
    padding-bottom: 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cs-heading);
    border-bottom: 2px solid var(--cs-gold-soft);
}

.cs-starter-table {
    margin-bottom: 0;
}

    .cs-starter-table td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .cs-starter-table tr.is-picked td {
        background: var(--cs-blue-50);
    }

.cs-starter-pick {
    width: 2rem;
}

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

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

.cs-starter-flag {
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cs-warning);
    background: var(--cs-warning-bg);
    border: 1px solid var(--cs-gold-soft);
    border-radius: var(--cs-radius-pill);
}

.cs-starter-price {
    width: 8rem;
}

.cs-starter-none {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--cs-muted);
    background: var(--cs-blue-50);
    border-radius: var(--cs-radius-md);
}

/* ---------- 28e. Step 5: review list ---------- */
.cs-wizard-review {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1rem;
}

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

    .cs-wizard-review dd {
        margin: 0;
    }

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

    .cs-wizard-review {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

        .cs-wizard-review dd {
            margin-bottom: 0.5rem;
        }
}

/* ---------- 27e. Saved mixes in the Materials pop-up ---------- */
/* "Save these materials as a mix" row sits under the table */
.cs-mix-save {
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cs-border);
}

.cs-mix-label {
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cs-heading);
}

.cs-mix-apply .cs-btn-delete {
    align-self: center;
}



/* ==========================================================================
29. LITE / FULL
Picker: Views/Shared/_ExperienceModePicker (Company Info + setup wizard).
"Part of Full" page: Views/Shared/FeatureOff. Rules: Services/Features.cs.
========================================================================== */

/* ---------- 29a. Two choice cards; the picked one gets a gold edge ---------- */
.cs-mode-pick {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.cs-mode-legend {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cs-text);
}

.cs-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    cursor: pointer;
    transition: border-color var(--cs-transition), background var(--cs-transition);
}

    .cs-mode-option:hover {
        border-color: var(--cs-blue-300);
    }

    .cs-mode-option:has(input:checked) {
        background: var(--cs-blue-50);
        border-color: var(--cs-gold);
        box-shadow: inset 3px 0 0 var(--cs-gold);
    }

    .cs-mode-option .form-check-input {
        flex: 0 0 auto;
        margin-top: 0.2rem;
    }

.cs-mode-text {
    display: flex;
    flex-direction: column;
}

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

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

/* ---------- 29b. "Part of CrewSheet Full" page ---------- */
.cs-feature-off {
    max-width: 40rem;
    margin: 2rem auto;
}

.cs-feature-off-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}



/* ==========================================================================
31. MATERIAL LIBRARY + TRADE PROFILES BUTTONS
Views/Materials/Index (grouped by category), Views/TradeProfiles/Index
========================================================================== */

/* ---------- 31a. Category heading rows inside the material table ---------- */
.cs-material-table th,
.cs-material-table td {
    padding-left: 1rem;
    padding-right: 1rem;
}

.cs-material-table .cs-cat-row th {
    padding-top: 0.6rem;
    padding-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cs-heading);
    background: var(--cs-blue-100);
    border-bottom: 2px solid var(--cs-gold-soft);
}

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

/* Inactive products: muted, with a small tag after the name */
.cs-row-inactive td {
    color: var(--cs-muted);
    background: var(--cs-disabled-bg);
}

.cs-inactive-tag {
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cs-neutral);
    background: var(--cs-neutral-bg);
    border: 1px solid var(--cs-neutral-border);
    border-radius: var(--cs-radius-pill);
}

/* ---------- 31b. Deactivate (amber) / Activate (green) ---------- */
.cs-btn-deactivate {
    color: var(--cs-warning) !important;
    background: var(--cs-warning-bg) !important;
    border: 1px solid var(--cs-gold) !important;
    font-weight: 500;
}

    .cs-btn-deactivate:hover {
        color: var(--cs-navy) !important;
        background: var(--cs-gold) !important;
    }

.cs-btn-activate {
    color: var(--cs-success) !important;
    background: var(--cs-success-bg) !important;
    border: 1px solid var(--cs-success-border) !important;
    font-weight: 500;
}

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

/* ---------- 31c. Material Library button on Trade Profiles: brand gold ---------- */
.cs-btn-library {
    color: var(--cs-navy) !important;
    background: var(--cs-gold) !important;
    border: 1px solid var(--cs-gold) !important;
    font-weight: 600;
}

    .cs-btn-library:hover {
        background: var(--cs-gold-soft) !important;
    }



/* ==========================================================================
36. SETUP STEP 4 (STANDARD MIX POP-UP), REQUIRED MARKS, MATERIAL FORM SECTIONS,
    "DIFFERENT PRICE OR SIZE?" CHOOSER
========================================================================== */

/* ---------- 36a. Required fields: a red * after the label ---------- */
.cs-required::after,
.cs-required-either::after {
    content: " *";
    color: var(--cs-danger);
    font-weight: 700;
}

.cs-required-note {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.8rem;
    color: var(--cs-muted);
}

.cs-required-mark {
    color: var(--cs-danger);
    font-weight: 700;
}

/* ---------- 36b. "Nothing here is final" note ---------- */
.cs-change-later {
    margin-bottom: 1rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    color: var(--cs-text);
    background: var(--cs-success-bg);
    border: 1px solid var(--cs-success-border);
    border-left: 4px solid var(--cs-success);
    border-radius: var(--cs-radius-md);
}

/* ---------- 36c. Category checkboxes (step 4) ---------- */
.cs-category-picks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cs-category-pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-weight: 600;
    color: var(--cs-heading);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    cursor: pointer;
}

    .cs-category-pick:has(input:checked) {
        background: var(--cs-blue-100);
        border-color: var(--cs-navy);
    }

    .cs-category-pick .form-check-input {
        margin: 0;
    }

.cs-starter-enter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cs-starter-enter-hint {
    font-size: 0.85rem;
    color: var(--cs-muted);
}

.cs-entered-table th,
.cs-entered-table td {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.cs-standard-mix {
    margin-top: 1rem;
}

/* ---------- 36d. The pop-up: question, OR divider, two lines of boxes ---------- */
.cs-starter-progress {
    margin-left: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cs-muted);
}

.cs-starter-question {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cs-muted);
}

    .cs-or::before,
    .cs-or::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px solid var(--cs-border);
    }

/* Package | Amount | Unit | Price on one line */
.cs-starter-line {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
}

/* How it's measured | value | hint */
.cs-starter-measure {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.8fr);
    align-items: end;
}

.cs-starter-measure-hint {
    padding-bottom: 0.4rem;
    font-size: 0.8rem;
    color: var(--cs-muted);
}

.cs-starter-error {
    margin: 1rem 0 0;
}

.cs-starter-actions [data-starter-skip] {
    margin-right: auto;
}

.cs-starter-later {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    text-align: right;
    color: var(--cs-muted);
}

@media (max-width: 575.98px) {
    .cs-starter-line,
    .cs-starter-measure {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-starter-measure-hint {
        grid-column: 1 / -1;
    }
}

/* ---------- 36e. Material form: section headings ---------- */
.cs-form-section {
    margin: 0.5rem 0 0.6rem;
    padding-bottom: 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cs-heading);
    border-bottom: 2px solid var(--cs-gold-soft);
}

.cs-form-section-hint {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cs-muted);
}

/* ---------- 36f. "Different price or size?" chooser ---------- */
.cs-different-intro {
    margin-bottom: 1rem;
}

.cs-different-option {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--cs-border);
    border-left: 4px solid var(--cs-navy);
    border-radius: var(--cs-radius-md);
}

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

.cs-different-hint {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--cs-muted);
}

.cs-different-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

    .cs-different-price .cs-money-input {
        width: 9rem;
    }

/* Zone line bought at a job-only price */
.cs-job-price-tag {
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cs-info);
    background: var(--cs-info-bg);
    border: 1px solid var(--cs-info-border);
    border-radius: var(--cs-radius-pill);
}

/* ---------- 36g. New Job wizard: zone rows with an optional Linear ft box, and a heading row ---------- */
.cs-zone-row .cs-zone-lf {
    flex: 0 0 8rem;
    text-align: right;
}

.cs-zone-row-head {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-muted);
}

    .cs-zone-row-head span:nth-child(1) {
        flex: 1 1 auto;
    }

    .cs-zone-row-head span:nth-child(2) {
        flex: 0 0 9rem;
        text-align: right;
    }

    .cs-zone-row-head span:nth-child(3) {
        flex: 0 0 1.9rem;   /* lines up with the red delete button */
    }

/* Job price tag sits under the material's name in the wizard checklist */
.cs-pick-text .cs-job-price-tag {
    align-self: flex-start;
    margin-top: 0.15rem;
}

@media (max-width: 575.98px) {
    .cs-zone-row-head span:nth-child(2) {
        flex-basis: 6.5rem;
    }
}

/* ---------- 36h. Setup pop-up: a clear box around each choice ("choose from the list" OR "type your own") ---------- */
.cs-choice-box {
    padding: 0.7rem 0.85rem 0.85rem;
    background: var(--cs-blue-50);
    border: 1px solid var(--cs-blue-300);
    border-left: 4px solid var(--cs-navy);
    border-radius: var(--cs-radius-md);
}

    .cs-choice-box .form-label {
        font-weight: 600;
        color: var(--cs-heading);
    }

/* The OR between the two boxes: a bold pill on the divider */
.cs-or span {
    padding: 0.15rem 0.7rem;
    color: var(--cs-navy);
    background: var(--cs-gold-soft);
    border-radius: var(--cs-radius-pill);
}

/* Sold by the foot: this note replaces the "How it's measured" line */
.cs-starter-by-foot {
    margin-top: 1rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
    color: var(--cs-text);
    background: var(--cs-success-bg);
    border: 1px solid var(--cs-success-border);
    border-radius: var(--cs-radius-md);
}

/* ---------- 36i. Feet for by-the-foot materials (zone Materials pop-up and the New Job wizard) ---------- */
/* Add row: "Feet on this zone" box appears next to the picker for by-the-foot materials */
.cs-feet-box .form-control {
    width: 9rem;
}

/* On a zone line: [ 300 ] ft [Set] under the amount */
.cs-feet-form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

    .cs-feet-form .form-control {
        width: 5.5rem;
        text-align: right;
    }

    .cs-feet-form .form-control.is-missing {
        border-color: var(--cs-gold);
        background: var(--cs-warning-alert-bg);
    }

    /* "No price set" on a zone line: the price box (ZonesController.SetPrice) */
    .cs-line-price-form .form-control {
        width: 6.5rem;
    }

/* Wizard checklist row: feet box at the end of a ticked by-the-foot row */
.cs-pick-feet {
    flex: 0 0 6rem;
    width: 6rem;
    text-align: right;
}

    /* No footage yet: gold reminder, not a block (job-wizard.js) */
    .cs-pick-feet.is-missing {
        border-color: var(--cs-gold);
        background: var(--cs-warning-alert-bg);
    }

/* "+ Add a new material..." stands out at the top of the drop-down */
.cs-option-new {
    font-weight: 700;
    color: var(--cs-heading);
}

/* Work List "Closed" badge on the Jobs Dashboard (invoice went out): quiet grey */
.cs-flag-closed {
    background: var(--cs-neutral-bg);
    color: var(--cs-neutral);
    border-color: var(--cs-neutral-border);
}



/* ==========================================================================
42. TRADE PROFILE LABOR PRICING (Views/TradeProfiles/_TradeProfileFields, site.js data-labor-pricing)
========================================================================== */

/* Two big choices side by side: Per sq ft | By the hour (stack on phones) */
.cs-labor-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.cs-labor-method {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    transition: border-color 0.15s, background 0.15s;
}

    .cs-labor-method:has(input:checked) {
        background: var(--cs-blue-50);
        border-color: var(--cs-navy);
        box-shadow: inset 4px 0 0 var(--cs-gold);
    }

    .cs-labor-method .form-check-input {
        margin-top: 0.2rem;
    }

    .cs-labor-method strong {
        display: block;
        color: var(--cs-heading);
    }

    .cs-labor-method small {
        display: block;
        color: var(--cs-muted);
    }

/* "Your crews averaged 500 sq ft per man-hour on 3 jobs  [Use it]" */
.cs-labor-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    color: var(--cs-success);
    background: var(--cs-success-bg);
    border: 1px solid var(--cs-success-border);
    border-radius: var(--cs-radius);
}

/* "Charges $0.0630 per sq ft (...)" */
.cs-labor-result {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    color: var(--cs-text);
    background: var(--cs-blue-50);
    border: 1px solid var(--cs-blue-200);
    border-left: 4px solid var(--cs-navy);
    border-radius: var(--cs-radius-md);
}

    .cs-labor-result strong {
        color: var(--cs-heading);
    }

/* Trade Info list: "by the hour" tag next to the rate */
.cs-labor-tag {
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cs-navy);
    background: var(--cs-gold-soft);
    border-radius: var(--cs-radius-pill);
}



/* ==========================================================================
48. ASSEMBLIES (Views/Assemblies, the zone Materials pop-up, wwwroot/js/assemblies.js)
========================================================================== */

/* Small tags: "corners", "assembly", "per sq ft" */
.cs-assembly-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cs-heading);
    background: var(--cs-blue-100);
    border: 1px solid var(--cs-blue-200);
    border-radius: var(--cs-radius-pill);
    vertical-align: middle;
}

/* "2 materials at $0": prices still to fill in */
.cs-assembly-warn {
    display: block;
    font-size: 0.78rem;
    color: var(--cs-warning);
}

.cs-assembly-empty {
    margin: 0;
    padding: 1rem;
    color: var(--cs-muted);
}

/* ---------- 48a. Built-in cards, grouped by trade ---------- */
.cs-assembly-trade {
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-assembly-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--cs-gap);
}

.cs-assembly-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-left: 4px solid var(--cs-gold);
    box-shadow: var(--cs-shadow-sm);
}

.cs-assembly-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

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

.cs-assembly-card-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cs-muted);
}

.cs-assembly-card-items {
    flex: 1;
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
}

.cs-assembly-added {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cs-success);
}

/* ---------- 48d. Set Up: the "ready" green box, the "needs prices" nudge, and the price pop-up ---------- */
.cs-assembly-ready {
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    color: var(--cs-text);
    background: var(--cs-success-bg);
    border: 1px solid var(--cs-success-border);
    border-left: 4px solid var(--cs-success);
    border-radius: var(--cs-radius-md);
}

    .cs-assembly-ready strong {
        color: var(--cs-success);
    }

.cs-assembly-unpriced {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    background: var(--cs-warning-alert-bg);
    border: 1px solid var(--cs-gold-soft);
    border-left: 4px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
}

.cs-assembly-setup {
    align-self: flex-start;
}

/* "✓ Ready" beside a name in Your Assemblies */
.cs-assembly-ready-tag {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cs-success);
}

/* The pop-up: name | $ price | "per bag (80 lbs)" per row; stacks on phones */
.cs-setup-intro {
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}

.cs-setup-desc {
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: var(--cs-muted);
}

.cs-setup-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cs-setup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem 9rem;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--cs-border);
}

    .cs-setup-row:last-child {
        border-bottom: none;
    }

.cs-setup-name {
    margin: 0;
    font-weight: 600;
    color: var(--cs-heading);
}

.cs-setup-new,
.cs-setup-optional {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--cs-muted);
}

.cs-setup-per {
    font-size: 0.82rem;
    color: var(--cs-muted);
}

/* "Where you buy them" spans the price and "per" columns */
.cs-setup-where {
    grid-column: 2 / -1;
}

.cs-setup-hint {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    text-align: right;
    color: var(--cs-muted);
}

.cs-setup-page {
    max-width: 44rem;
}

@media (max-width: 575.98px) {
    .cs-setup-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cs-setup-name {
        grid-column: 1 / -1;
    }

    .cs-setup-where {
        grid-column: 1 / -1;
    }
}

/* ---------- 48e. "Prebuilt assemblies need your prices first" intro pop-up (site.js "Intro pop-ups") ---------- */
.cs-intro-dialog {
    max-width: 34rem;
}

.cs-intro-steps {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
}

    .cs-intro-steps li {
        margin-bottom: 0.4rem;
    }

/* "An assembly only needs to be set up once..." */
.cs-intro-once {
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--cs-blue-50);
    border-left: 3px solid var(--cs-gold);
    border-radius: var(--cs-radius-sm);
}

.cs-intro-green {
    font-weight: 700;
    color: var(--cs-success);
}

/* "Don't show this again" switch on the left, Got It on the right */
.cs-intro-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cs-border);
}

.cs-intro-switch {
    margin: 0;
    font-size: 0.88rem;
    color: var(--cs-muted);
    cursor: pointer;
}

    .cs-intro-switch .form-check-input {
        cursor: pointer;
    }

.cs-intro-link {
    margin-left: auto;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cs-heading);
    text-decoration: none;
}

    .cs-intro-link:hover {
        text-decoration: underline;
    }

/* ---------- 48b. Editor ---------- */
.cs-assembly-editor {
    max-width: 60rem;
}

.cs-assembly-items th:first-child,
.cs-assembly-items td:first-child {
    min-width: 16rem;
}

.cs-assembly-num {
    width: 7rem;
    margin-left: auto;
    text-align: right;
}

.cs-assembly-help {
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--cs-text);
    background: var(--cs-blue-50);
    border: 1px solid var(--cs-blue-200);
    border-radius: var(--cs-radius-md);
}

/* ---------- 48c. Zone Materials pop-up + Zones page ---------- */
.cs-zone-assembly {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    background: var(--cs-blue-50);
    border: 1px solid var(--cs-blue-200);
    border-left: 4px solid var(--cs-navy);
    border-radius: var(--cs-radius-md);
}

/* How many / Corners / Height boxes next to the assembly picker */
.cs-assembly-units {
    flex: 0 0 7rem;
    width: 7rem;
}

/* "buy 9 bags (80 lb)" under a line's amount */
.cs-line-packages {
    font-size: 0.75rem;
    color: var(--cs-muted);
}

.cs-zone-assembly-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--cs-muted);
}

/* Assemblies page: "To use these on a job, make a Block / Masonry profile" (no profile for that trade yet) */
/* 48b. Same gold note in the zone Materials pop-up: "Masonry walls are figured with an assembly" */
.cs-zone-howto {
    margin-bottom: 0.75rem;
}

.cs-assembly-howto,
.cs-zone-howto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    background: var(--cs-warning-alert-bg);
    border: 1px solid var(--cs-gold-soft);
    border-left: 4px solid var(--cs-gold);
    border-radius: var(--cs-radius-md);
}



/* ==========================================================================
54. TRADE PROFILE CARDS (Views/TradeProfiles/Index)
   Grouped by trade; each card: name | big labor price + how it's set | settings | warnings | jobs using it + Edit.
   Cards wrap to fit: 3 across on a wide screen, 1 on a phone.
========================================================================== */
.cs-profile-group {
    margin-bottom: var(--cs-gap);
}

.cs-profile-group-title {
    margin: 0 0 0.6rem;
    padding-bottom: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cs-heading);
    border-bottom: 2px solid var(--cs-gold);
}

.cs-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
    gap: 1rem;
}

.cs-profile-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    border-top: 3px solid var(--cs-navy);
}

    /* Not active: faded, so the ones in use stand out */
    .cs-profile-card.is-inactive {
        opacity: 0.65;
        border-top-color: var(--cs-border);
    }

.cs-profile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cs-profile-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cs-heading);
}

.cs-profile-off {
    flex: 0 0 auto;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cs-neutral);
    background: var(--cs-neutral-bg);
    border: 1px solid var(--cs-neutral-border);
    border-radius: var(--cs-radius-pill);
}

/* The labor price: the number big, the unit beside it */
.cs-profile-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.cs-profile-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cs-heading);
}

.cs-profile-unit {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cs-muted);
}

.cs-profile-detail {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--cs-muted);
}

/* Settings: label | value, a light line between rows */
.cs-profile-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0;
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
}

    .cs-profile-facts dt,
    .cs-profile-facts dd {
        margin: 0;
        padding: 0.3rem 0;
        border-top: 1px solid var(--cs-border);
    }

    .cs-profile-facts dt {
        padding-right: 1rem;
        font-weight: 600;
        color: var(--cs-muted);
    }

    .cs-profile-facts dd {
        text-align: right;
        font-weight: 600;
    }

/* Things to fix: gold-edged note */
.cs-profile-warnings {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 1.6rem;
    font-size: 0.83rem;
    color: var(--cs-warning);
    background: var(--cs-warning-alert-bg);
    border-left: 3px solid var(--cs-gold);
    border-radius: 0 var(--cs-radius) var(--cs-radius) 0;
}

    .cs-profile-warnings li + li {
        margin-top: 0.25rem;
    }

/* Bottom: jobs using it | Edit (pushed to the bottom so cards line up) */
.cs-profile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.cs-profile-used {
    font-size: 0.82rem;
    color: var(--cs-muted);
}



/* ==========================================================================
56. COMPANY INFO LAYOUT (Views/Company/Edit)
   Top: logo card | Lite/Full card. Then Contact & Address and Quotes cards, with boxes sized to their content
   on a 6-column grid (cs-span-1..4). Phones: everything one column.
========================================================================== */
.cs-company-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 62rem;
}

.cs-company-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.cs-company-card {
    padding: 0.9rem 1.1rem 1rem;
}

.cs-company-card-title,
.cs-company-card .cs-mode-legend {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-heading);
}

/* Logo: small preview beside the file box and "Remove" */
.cs-logo-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.cs-company-form .cs-company-logo-preview {
    flex: 0 0 auto;
    max-height: 3.75rem;
    max-width: 7rem;
}

.cs-logo-controls {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* Lite / Full: tighter choice cards inside the top card */
.cs-company-card .cs-mode-pick {
    margin: 0;
}

.cs-company-card .cs-mode-option {
    padding: 0.5rem 0.75rem;
}

.cs-company-card .cs-mode-desc {
    font-size: 0.82rem;
}

/* Fields: a 6-column grid; each box takes only the columns it needs */
.cs-company-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

    .cs-company-grid .form-label {
        margin-bottom: 0.2rem;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .cs-company-grid .form-control {
        padding: 0.3rem 0.55rem;
        font-size: 0.92rem;
    }

.cs-span-1 { grid-column: span 1; }
.cs-span-2 { grid-column: span 2; }
.cs-span-3 { grid-column: span 3; }
.cs-span-4 { grid-column: span 4; }

/* Start a new line in the grid (the address under the contact boxes); keeps the box's own width */
.cs-span-2.cs-row-start { grid-column: 1 / span 2; }
.cs-span-3.cs-row-start { grid-column: 1 / span 3; }



/* A number box that only needs a few digits */
.cs-input-short {
    max-width: 7rem;
}

/* Checkbox lined up with the boxes beside it (under their labels) */
.cs-company-check {
    padding-top: 1.6rem;
}

.cs-company-actions {
    display: flex;
    gap: 0.5rem;
}

/* Tablets: the top two cards stack */
@media (max-width: 991.98px) {
    .cs-company-top {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phones: one column for every box */
@media (max-width: 575.98px) {
    .cs-company-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-span-1,
    .cs-span-2,
    .cs-span-3,
    .cs-span-4,
    .cs-span-2.cs-row-start,
    .cs-span-3.cs-row-start {
        grid-column: 1 / -1;
    }

    .cs-company-check {
        padding-top: 0;
    }

    .cs-logo-row {
        flex-wrap: wrap;
    }
}


/* ==========================================================================
57. MATERIAL LIBRARY: "SHOW EVERY TRADE" SWITCH (Views/Materials/Index)
   A link that looks like a switch, beside + Add Material; a short "Showing Masonry materials" note after it.
========================================================================== */
.cs-material-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
}

.cs-material-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--cs-heading);
    text-decoration: none;
}

    .cs-material-switch:hover {
        color: var(--cs-heading);
        text-decoration: underline;
    }

    /* The switch is only a picture of the state; the whole link is what's clicked */
    .cs-material-switch .form-check-input {
        pointer-events: none;
    }

.cs-material-showing {
    font-size: 0.88rem;
    color: var(--cs-muted);
}



/* ==========================================================================
62. TRADE PROFILE: "YOUR BUSINESS NUMBERS" (Views/TradeProfiles/_TradeProfileFields)
Side-job switch (count these jobs in Reports and Home totals?) and the crew cost per man-hour under it.
========================================================================== */
.cs-business-numbers {
    margin-top: 1rem;
}

.cs-business-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-left: 2.75rem;   /* room for the switch */
}

    .cs-business-switch .form-check-label {
        font-weight: 600;
        color: var(--cs-heading);
    }

.cs-business-cost {
    max-width: 22rem;
}

/* ==========================================================================
67. LICENSES & INSURANCE (Views/Compliance; tones from Services/ComplianceDates)
========================================================================== */

/* ---------- 67a. The list ---------- */
.cs-compliance-card {
    overflow: hidden;
}

.cs-compliance-table th,
.cs-compliance-table td {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    vertical-align: middle;
}

.cs-compliance-name {
    font-weight: 600;
    color: var(--cs-heading);
}

.cs-compliance-expires {
    white-space: nowrap;
}

/* Edit (and Delete for admins) side by side on the right */
.cs-compliance-actions {
    text-align: right;
    white-space: nowrap;
}

    .cs-compliance-actions form {
        display: inline-block;
        margin-left: 0.35rem;
    }

/* Within 60 days: light gold row. Within 14 days or expired: light red row */
.cs-compliance-table .cs-compliance-warn > td {
    color: var(--cs-warning);
    background: var(--cs-warning-alert-bg);
}

.cs-compliance-table .cs-compliance-bad > td {
    color: var(--cs-danger);
    background: var(--cs-danger-bg);
}

    .cs-compliance-table .cs-compliance-warn .cs-compliance-name,
    .cs-compliance-table .cs-compliance-bad .cs-compliance-name {
        color: inherit;
    }

/* ---------- 67b. Add / Edit form: two columns, one on phones ---------- */
.cs-compliance-form {
    max-width: 48rem;
    padding: 1.25rem;
}

.cs-compliance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.cs-compliance-wide {
    grid-column: 1 / -1;
}

.cs-compliance-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

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