/* =========================================================================
   SolarSense Quoting Tool — Stylesheet
   -------------------------------------------------------------------------
   This is an internal staff tool, not a public marketing site, so there's
   no hero/features/marketing CSS here on purpose — just what the login,
   dashboard, and forms actually need. Colours are the real hex values
   pulled from the SolarSense logo.
   ========================================================================= */

:root {
    --ss-green:        #8dc63f;   /* exact colour from the SolarSense logo */
    --ss-green-dark:   #6ea62f;   /* darker shade for hover states */
    --ss-green-light:  #eef7e2;   /* soft backgrounds, badges */
    --ss-orange:       #f5821f;   /* exact colour from the logo's sun icon */
    --ss-navy:         #10233a;   /* dark header bar */
    --ss-text:         #1b1f23;
    --ss-text-muted:   #5c6773;
    --ss-white:        #ffffff;
    --ss-border:       #e2e8ec;
    --ss-danger:       #c0392b;
    --ss-danger-bg:    #fdecea;
    --ss-radius:       10px;
    --ss-shadow:       0 4px 20px rgba(16, 35, 58, 0.08);
    --ss-shadow-lg:     0 10px 40px rgba(16, 35, 58, 0.14);
    --ss-font:         'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--ss-font);
    color: var(--ss-text);
    background: var(--ss-white);
}

a { color: var(--ss-green-dark); text-decoration: none; }
a:hover { color: var(--ss-green); }

img { max-width: 100%; display: block; }

/* ---------- Top bar (dashboard / logged-in pages only) --------------------- */

.site-header {
    background: var(--ss-white);
    color: var(--ss-text);
    padding: 0 32px;
    border-bottom: 1px solid var(--ss-border);
    box-shadow: 0 1px 3px rgba(16, 35, 58, 0.05);
}

.nav-wrap {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    height: 30px;
    width: auto;
}

.header-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-text-muted);
    border-left: 1px solid var(--ss-border);
    padding-left: 12px;
}

.nav-links { display: flex; align-items: center; gap: 20px; }

.header-link {
    color: var(--ss-text-muted);
    font-size: 14px;
    font-weight: 600;
    transition: color 0.12s ease;
}
.header-link:hover { color: var(--ss-green-dark); }

/* ---- Mobile/tablet nav toggle (hamburger) ---------------------------------
   Hidden on desktop; the media query below swaps .nav-links from a row of
   inline links to a dropdown panel it opens/closes. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    background: var(--ss-white);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--ss-text);
}
.nav-toggle:hover { border-color: var(--ss-green); }

/* ---------- Buttons --------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--ss-radius);
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn-primary {
    /* Navy text on the brand green gives ~7.75:1 contrast (white was ~2:1,
       well under WCAG AA's 4.5:1) while staying on-palette — navy is
       already the app's primary text/heading colour everywhere else. */
    background: var(--ss-green);
    color: var(--ss-navy);
}
.btn-primary:hover { background: var(--ss-green-dark); color: var(--ss-navy); transform: translateY(-1px); }

.btn-outline {
    background: transparent;
    color: var(--ss-text);
    border: 1.5px solid var(--ss-border);
}
.btn-outline:hover { border-color: var(--ss-text-muted); background: #f4f6f8; }

.btn-block { width: 100%; }

/* ---------- Auth pages (login / change password) -------------------------- */
/* This is the FIRST thing anyone sees — deliberately just a logo and a form. */



.auth-logo {
    height: 48px;
    width: auto;
    margin: 0 auto 18px;
}

.auth-card h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    text-align: center;
}

.auth-card .subtitle {
    text-align: center;
    color: var(--ss-text-muted);
    font-size: 13.5px;
    margin: 0 0 22px;
}

.field { margin-bottom: 18px; }

.field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ss-text);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="date"],
.field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--ss-font);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141,198,63,0.20);
}

.hint {
    font-size: 12.5px;
    color: var(--ss-text-muted);
    margin-top: 6px;
}

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.5;
}

.alert-error {
    background: var(--ss-danger-bg);
    color: var(--ss-danger);
    border: 1px solid rgba(192,57,43,0.25);
}

.alert-success {
    background: var(--ss-green-light);
    color: var(--ss-green-dark);
    border: 1px solid rgba(141,198,63,0.35);
}

.alert ul { margin: 6px 0 0; padding-left: 18px; }

.auth-footer-link {
    text-align: center;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--ss-text-muted);
}

/* ---------- Form pages (New Quote, etc.) ----------------------------------- */


.form-card {
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow);
    padding: 34px 36px;
}

.form-card h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
}

.form-subtitle {
    color: var(--ss-text-muted);
    font-size: 14px;
    margin: 0 0 26px;
}

.form-divider {
    border: none;
    border-top: 1px solid var(--ss-border);
    margin: 8px 0 22px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.field select {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--ss-font);
    background: var(--ss-white);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.field select:focus {
    outline: none;
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141,198,63,0.20);
}

.optional {
    font-weight: 400;
    color: var(--ss-text-muted);
    font-size: 12.5px;
}

/* Marks a field the server actually rejects the form for leaving blank —
   added only where a matching "Please select/enter/choose..." check exists
   in that page's own validation, so the marker never claims a requirement
   the code doesn't enforce. */
.required-mark {
    color: var(--ss-danger);
    font-weight: 700;
    margin-left: 3px;
}

/* ---------- Bigger, clearer number inputs ----------------------------------- */

.field input[type="number"] {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    font-family: var(--ss-font);
    text-align: center;
}
.field input[type="number"]:focus {
    outline: none;
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141,198,63,0.20);
}

.stepper-input {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    overflow: hidden;
}
.stepper-input input[type="number"] {
    border: none;
    border-radius: 0;
    flex: 1;
    -moz-appearance: textfield;
}
.stepper-input input[type="number"]:focus { box-shadow: none; }
.stepper-input input::-webkit-outer-spin-button,
.stepper-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper-btn {
    width: 44px;
    border: none;
    background: var(--ss-green-light);
    color: var(--ss-green-dark);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease;
}
.stepper-btn:hover { background: var(--ss-green); color: var(--ss-navy); }

/* ---------- Distance calculator (Project Info step) -------------------------- */

/* ---------- Compact toggle row (Optimisers / Microinverters) ---------------- */

.checkbox-row { display: flex; gap: 12px; flex-wrap: wrap; }
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.checkbox-option:has(input:checked) {
    border-color: var(--ss-green);
    background: var(--ss-green-light);
}
.checkbox-option input { accent-color: var(--ss-green); width: 16px; height: 16px; }

/* ---------- Add-on / Feasibility toggle rows (Steps 4 & 5) ------------------ */

/* (legacy .addon-row / .addon-cost-field removed — all pages now use
   .toggle-field / .toggle-detail from the component system) */
.addon-cost-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
}
.addon-cost-field input[type="number"] {
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    padding: 9px 12px;
}

.unit-input {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    overflow: hidden;
}
.unit-input input {
    border: none !important;
    border-radius: 0 !important;
    flex: 1;
}
.unit-input input:focus { box-shadow: none !important; }
.unit-suffix {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--ss-green-light);
    color: var(--ss-green-dark);
    font-weight: 700;
    font-size: 13px;
}

.alert-info {
    background: #eaf2fb;
    color: #2c5282;
    border: 1px solid #bcd8f5;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 18px;
}

.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ss-border);
    color: var(--ss-text-muted);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    margin-left: 5px;
    cursor: help;
    vertical-align: middle;
}
.info-tip:hover { background: var(--ss-green); color: var(--ss-navy); }

.field-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.field-tag-auto      { background: var(--ss-green-light); color: var(--ss-green-dark); }
.field-tag-reference { background: #eaf2fb; color: #2c5282; }
.field-tag-manual     { background: #f0f0f0; color: var(--ss-text-muted); }

.ref-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f9fa;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}
.ref-cost-label { color: var(--ss-text-muted); font-weight: 600; }
.ref-cost-value { font-weight: 700; color: var(--ss-text); }

.waste-status-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.waste-status-formula { background: var(--ss-green-light); color: var(--ss-green-dark); }
.waste-status-override { background: #fff4d6; color: #8a6d1f; }

/* ---------- Wizard stepper -------------------------------------------------- */


.stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 84px;
}

.stepper-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--ss-border);
    background: var(--ss-white);
    color: var(--ss-text-muted);
}

.stepper-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-text-muted);
}

.stepper-active .stepper-circle {
    border-color: var(--ss-green);
    background: var(--ss-green);
    color: var(--ss-navy);
}
.stepper-active .stepper-label { color: var(--ss-text); }

.stepper-done .stepper-circle {
    border-color: var(--ss-green);
    background: var(--ss-green-light);
    color: var(--ss-green-dark);
}
.stepper-done .stepper-label { color: var(--ss-green-dark); }

.stepper-line {
    height: 2px;
    width: 48px;
    background: var(--ss-border);
    margin: 0 4px 22px;
}
.stepper-line-done { background: var(--ss-green); }

/* ---------- Live preview box (System Details step) ------------------------- */

.live-preview {
    display: flex;
    gap: 24px;
    background: var(--ss-green-light);
    border: 1px solid rgba(141,198,63,0.35);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 4px 0 20px;
}

.live-preview-item { display: flex; flex-direction: column; gap: 2px; }
.live-preview-label { font-size: 12px; color: var(--ss-text-muted); font-weight: 600; }
.live-preview-value { font-size: 18px; font-weight: 700; color: var(--ss-green-dark); }

/* ---------- Battery toggle (Battery step) ----------------------------------- */

/* ---------- Review page ------------------------------------------------------ */

.form-page-wide { max-width: 980px; }


.section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ss-text-muted);
    margin: 26px 0 10px;
    border-bottom: 1px solid var(--ss-border);
    padding-bottom: 8px;
}

.summary-table { width: 100%; border-collapse: collapse; }
.summary-table th, .summary-table td {
    text-align: left;
    padding: 7px 0;
    font-size: 14px;
    vertical-align: top;
}
.summary-table th { width: 130px; color: var(--ss-text-muted); font-weight: 600; }

.pricing-card { position: sticky; top: 20px; }

.pricing-category { margin-bottom: 18px; }
.pricing-category-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ss-green-dark);
    background: var(--ss-green-light);
    padding: 7px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
}
.pricing-category-warning {
    background: #fff8e6;
    color: #8a6d1f;
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 6px;
    margin-top: 4px;
}

.pricing-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.pricing-table td { padding: 10px 0; border-bottom: 1px solid var(--ss-border); vertical-align: top; }
.pricing-label { font-weight: 600; font-size: 14px; }
.pricing-detail { font-size: 12.5px; color: var(--ss-text-muted); margin-top: 2px; }
.pricing-amount { text-align: right; font-weight: 700; white-space: nowrap; }

.pricing-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ss-green-dark);
}

.notes-block {
    font-size: 13.5px;
    line-height: 1.6;
    background: #f7f9fa;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 10px;
}
.notes-internal { background: #fff8e6; border-color: #f2d98a; }

.inclusions-list { border: 1px solid var(--ss-border); border-radius: 8px; overflow: hidden; }
.inclusion-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--ss-border);
}
.inclusion-row:last-child { border-bottom: none; }
.inclusion-row-changed { background: #fff9ec; border-left: 1px solid #e6b800; padding-left: 9px; }
.inclusion-changed-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: #fff4d6;
    color: #8a6d1f;
    vertical-align: middle;
}
.inclusion-item { color: var(--ss-text); flex: 1 1 220px; min-width: 0; }
.inclusion-resp {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 9px;
    border-radius: 999px;
}
.inclusion-resp-solarsense { background: var(--ss-green-light); color: var(--ss-green-dark); }
.inclusion-resp-client { background: #eaf2fb; color: #2c5282; }
.inclusion-resp-third-party { background: #fdf0e3; color: #a35a1a; }
.inclusion-resp-n-a { background: #f0f0f0; color: var(--ss-text-muted); }

/* Clickable version of the badges above — the estimator picks one of four
   pills instead of a native dropdown, since scope items are no longer
   fixed. Only the picked pill is filled in; the other three stay outlined
   so the current choice is obvious at a glance across all 24 rows. */
.inclusion-buttons {
    flex-shrink: 0;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.inclusion-btn {
    font-family: var(--ss-font);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ss-border);
    background: var(--ss-white);
    color: var(--ss-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.inclusion-btn:hover { border-color: rgba(0,0,0,0.25); }
.inclusion-btn.is-active.inclusion-resp-solarsense { background: var(--ss-green-light); color: var(--ss-green-dark); border-color: transparent; }
.inclusion-btn.is-active.inclusion-resp-client { background: #eaf2fb; color: #2c5282; border-color: transparent; }
.inclusion-btn.is-active.inclusion-resp-third-party { background: #fdf0e3; color: #a35a1a; border-color: transparent; }
.inclusion-btn.is-active.inclusion-resp-n-a { background: #f0f0f0; color: var(--ss-text-muted); border-color: transparent; }

.cost-of-sale-highlight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ss-navy);
    color: var(--ss-white);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 4px 0;
}
.cost-of-sale-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.cost-of-sale-value { font-size: 24px; font-weight: 800; }

.settings-table { width: 100%; border-collapse: collapse; }
.settings-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ss-text-muted);
    border-bottom: 1px solid var(--ss-border);
    padding: 0 10px 10px 0;
}
.settings-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--ss-border); vertical-align: middle; }
.settings-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.settings-desc { font-size: 12.5px; color: var(--ss-text-muted); }
.settings-input { width: 120px; padding: 8px 10px; border: 1.5px solid var(--ss-border); border-radius: 6px; font-size: 14px; font-weight: 600; }
.settings-input:focus { outline: none; border-color: var(--ss-green); box-shadow: 0 0 0 3px rgba(141,198,63,0.20); }

.gross-margin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-weight: 700;
    font-size: 15px;
}
.gross-margin-value {
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 800;
}
.margin-green { background: var(--ss-green-light); color: var(--ss-green-dark); }
.margin-amber { background: #fff4d6; color: #8a6d1f; }
.margin-red   { background: var(--ss-danger-bg); color: var(--ss-danger); }

.summary-table-wrap,
.pricing-table-wrap,
.guidance-table-wrap { overflow-x: auto; }
.guidance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.guidance-table th {
    text-align: left;
    padding: 6px 8px;
    background: var(--ss-green-light);
    color: var(--ss-green-dark);
    font-weight: 700;
    white-space: nowrap;
}
.guidance-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--ss-border);
    white-space: nowrap;
}
.guidance-row-active { background: #fff8e6; font-weight: 700; }

.alert-warning {
    background: #fff8e6;
    color: #8a6d1f;
    border: 1px solid #f2d98a;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 20px;
}
.alert-warning ul { margin: 0; padding-left: 18px; }

/* ---------- Quote Library ---------------------------------------------------- */

.library-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.library-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ss-text-muted);
    border-bottom: 1px solid var(--ss-border);
    padding: 0 10px 10px 0;
}
.library-table td {
    padding: 14px 10px 14px 0;
    border-bottom: 1px solid var(--ss-border);
    font-size: 14px;
    vertical-align: middle;
}
.library-title { font-weight: 600; }
.library-subtitle { font-size: 12.5px; color: var(--ss-text-muted); margin-top: 2px; }

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}
.status-draft { background: #eef1f4; color: #5c6773; }
.status-awaiting-approval { background: #fff3cd; color: #8a6d1f; }
.status-complete { background: var(--ss-green-light); color: var(--ss-green-dark); }
.status-sent  { background: #e6f0ff; color: #1d4ed8; }
.status-won   { background: var(--ss-green-light); color: var(--ss-green-dark); }
.status-lost  { background: var(--ss-danger-bg); color: var(--ss-danger); }

.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    border: 1.5px solid var(--ss-border);
    color: var(--ss-text);
    background: var(--ss-white);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.btn-outline-dark:hover { border-color: var(--ss-green); background: var(--ss-green-light); color: var(--ss-green-dark); }

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.form-actions .btn-primary { flex: 2; }
.form-actions .btn-outline-dark { flex: 1; padding: 11px 22px; }

.field-narrow { max-width: 280px; }

/* ---------- Dashboard ------------------------------------------------------ */


.dash-welcome h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.dash-welcome p { margin: 0; color: var(--ss-text-muted); font-size: 14.5px; }



.dash-tile h3 { margin: 0; font-size: 17px; font-weight: 700; }
.dash-tile p { margin: 0; color: var(--ss-text-muted); font-size: 14px; line-height: 1.55; flex-grow: 1; }

/* ---------- Responsive ----------------------------------------------------- */

@media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; }
    .nav-toggle { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--ss-white);
        border-bottom: 1px solid var(--ss-border);
        box-shadow: var(--ss-shadow);
        padding: 8px 0;
    }
    .nav-links.is-open { display: flex; }
    .nav-links .header-link {
        padding: 12px 24px;
        width: 100%;
    }
    .nav-wrap { position: relative; }
    .field-row { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .pricing-card { position: static; }
    .stepper-label { display: none; }
    /* With 9 steps and labels hidden, the stepper is still wider than a
       phone screen — this was overflowing the whole page horizontally
       (confirmed on quote/new.php at 375px) rather than just this element,
       since .stepper itself had no overflow handling. Letting it scroll
       within its own row keeps every step reachable without that. */
    .stepper {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .stepper-item, .stepper-line { flex-shrink: 0; }
}

/* =========================================================================
   COMPONENT SYSTEM (spec §8, §9, §16)
   -------------------------------------------------------------------------
   Everything below is rendered by includes/layout.php. These are the only
   styles that should be used for toggles, money fields, panels and action
   bars — page-specific inline styles are what caused the earlier spacing
   and alignment drift, so new work should reach for these instead.
   ========================================================================= */

/* ---- Panels: the standard grouping container (§6) ----------------------- */
.panel {
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    margin-bottom: 18px;
    /* NOTE: deliberately no `overflow: hidden` here. It clipped any
       combobox dropdown that extended past the panel edge, making the list
       almost unusable. The panel head rounds its own top corners instead,
       which achieves the same visual result without trapping children. */
}
.panel-head {
    border-top-left-radius: var(--ss-radius);
    border-top-right-radius: var(--ss-radius);
    padding: 14px 20px;
    border-bottom: 1px solid var(--ss-border);
    background: #fbfcfd;
}
.panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ss-navy);
}
.panel-sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--ss-text-muted);
}
.panel-body { padding: 18px 20px; }

/* Two-column grid for related fields — avoids the endless single column (§6) */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 22px; }
@media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---- Reusable Yes/No toggle (§8) --------------------------------------- */
/* Fixed dimensions everywhere: this is what stops the "button, button,
   whitespace, button" misalignment the old hand-rolled controls caused. */
.toggle-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ss-border);
}
.toggle-field:last-child { border-bottom: none; }

.toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-text);
    display: inline-flex;
    align-items: center;
}

.toggle-group {
    display: inline-flex;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.toggle-btn { margin: 0; }
.toggle-btn input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-btn span {
    display: block;
    min-width: 62px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--ss-text-muted);
    background: var(--ss-white);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    user-select: none;
}
.toggle-btn + .toggle-btn span { border-left: 1.5px solid var(--ss-border); }
.toggle-btn span:hover { background: #f4f6f8; }
.toggle-btn input:checked + span {
    /* Same contrast fix as .btn-primary: white on this green is ~2:1 and
       fails WCAG AA; navy (already used for checked/active states like
       .status-badge and the stepper) gives ~7.75:1. */
    background: var(--ss-green);
    color: var(--ss-navy);
}
.toggle-btn input:focus-visible + span {
    outline: 2px solid var(--ss-navy);
    outline-offset: -2px;
}

/* Revealed detail block for a toggle set to Yes (§15) */
.toggle-detail {
    padding: 14px 0 4px 0;
    animation: revealFade 0.14s ease;
}
.toggle-detail.is-hidden { display: none; }
@keyframes revealFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Money input with £ prefix ----------------------------------------- */
.money-input {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    overflow: hidden;
}
.money-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f4f6f8;
    color: var(--ss-text-muted);
    font-weight: 700;
    font-size: 14px;
    border-right: 1.5px solid var(--ss-border);
}
.money-input input {
    border: none !important;
    border-radius: 0 !important;
    flex: 1;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-family: var(--ss-font);
}
.money-input input:focus { outline: none; box-shadow: none !important; }
.money-input:focus-within {
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141,198,63,0.18);
}

/* ---- Help popover (§9) -------------------------------------------------- */
/* Absolutely positioned so opening help never shifts the form. */
.help-popover {
    position: absolute;
    z-index: 1000;
    max-width: 280px;
    background: var(--ss-navy);
    color: var(--ss-white);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 10px 13px;
    border-radius: 8px;
    box-shadow: var(--ss-shadow-lg);
}

/* ---- Action bar: consistent Back / Save Draft / Continue (§7) ----------- */
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    margin-top: 6px;
    border-top: 1px solid var(--ss-border);
}
.action-bar-right { display: flex; gap: 10px; }

.btn-ghost {
    background: transparent;
    color: var(--ss-text-muted);
    border: none;
    font-weight: 600;
    padding: 11px 4px;
}
.btn-ghost:hover { color: var(--ss-navy); }

.btn-secondary {
    background: var(--ss-white);
    color: var(--ss-text);
    border: 1.5px solid var(--ss-border);
}
.btn-secondary:hover { border-color: var(--ss-text-muted); background: #f4f6f8; }

/* Shared utility — replaces scattered inline display:none */
.is-hidden { display: none !important; }

/* ---- Small spacing/weight utilities -------------------------------------
   totals.php and review.php had accumulated one-off inline style="" spacing
   tweaks (see includes/layout.php's header comment on why that drifts). None
   of them are a real recurring component, so rather than inventing a
   one-off class per page, these cover the exact values that were inline. */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: 2px; }
.mt-6  { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mb-0  { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-18 { margin-bottom: 18px; }
.fw-800 { font-weight: 800; }
.note-tight { margin: 6px 0 0; }
.note-loose { margin: 16px 0 8px; }
.hint-tight { margin: 0 0 8px; }
.action-bar-flush { border-top: none; padding-top: 10px; }

/* ---- Wider working area for data-dense wizard steps (§4 desktop-first) -- */
.form-page-wide { max-width: 1180px; }

/* Inline select sitting in a .toggle-field row, so a 3-option control lines
   up with the Yes/No toggles beside it instead of drifting out of the grid. */
.inline-select {
    min-width: 150px;
    padding: 7px 12px;
    border: 1.5px solid var(--ss-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--ss-font);
    background: var(--ss-white);
    color: var(--ss-text);
}
.inline-select:focus {
    outline: none;
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141,198,63,0.18);
}

/* Live calculated readout under a group of inputs (§16) */
.calc-readout {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-green-dark);
    min-height: 18px;
}

/* =========================================================================
   VISUAL REFINEMENT PASS (spec §4, §5)
   -------------------------------------------------------------------------
   Tightens typography, spacing and depth so the app reads as a commercial
   product rather than a form. Restrained on purpose: no heavy shadows, no
   large radii, no decorative colour. Layout behaviour is unchanged — this
   pass only adjusts finish.
   ========================================================================= */


/* Header: thinner, calmer, with a subtle brand accent underline */
.site-header {
    box-shadow: 0 1px 2px rgba(16, 35, 58, 0.04);
    border-bottom: 1px solid #e3e8ed;
}
.nav-wrap { height: 58px; }
.header-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #8a95a1;
}
.header-link { font-size: 13.5px; }

/* Page headings: quieter, more editorial */
.form-card h1 {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ss-navy);
    margin-bottom: 3px;
}
.form-subtitle {
    font-size: 13px;
    color: #7c8894;
    margin-bottom: 22px;
}

/* Cards: flatter and crisper than the previous rounded style */
.form-card {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 35, 58, 0.05);
    border: 1px solid #e3e8ed;
}

.panel {
    border-color: #e3e8ed;
    border-radius: 8px;
    box-shadow: none;
}
.panel-head {
    background: #fafbfc;
    padding: 12px 18px;
}
.panel-title { font-size: 12.5px; letter-spacing: 0.05em; }
.panel-body  { padding: 16px 18px 18px; }

/* Inputs: consistent height and a calmer focus ring */
.field label {
    font-size: 12.5px;
    font-weight: 600;
    color: #55616d;
    margin-bottom: 5px;
}
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
    font-size: 14px;
    padding: 9px 12px;
    border-color: #d8dee5;
    border-radius: 7px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.15);
}

/* Buttons: tighter, less shouty */
.btn {
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 7px;
    letter-spacing: 0.005em;
}
.btn-primary { box-shadow: 0 1px 2px rgba(141, 198, 63, 0.3); }
.btn-primary:hover { transform: none; box-shadow: 0 2px 6px rgba(141, 198, 63, 0.35); }

/* Toggle: slightly tighter, clearer selected state */
.toggle-btn span {
    min-width: 58px;
    padding: 6px 15px;
    font-size: 12.5px;
}
.toggle-label { font-size: 13.5px; }
.toggle-field { padding: 10px 0; }

/* Provenance badges: smaller and less loud than body text */
.field-tag {
    font-size: 9.5px;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    vertical-align: middle;
}

/* Hints and helper text */
.hint { font-size: 11.5px; color: #8a95a1; margin-top: 5px; }

/* Stepper matches the new input height */
.stepper-input input { font-size: 14px; padding: 9px 8px; }
.stepper-btn { padding: 9px 13px; font-size: 14px; }

/* Tables read as data, not decoration */
.summary-table th { font-size: 12px; color: #7c8894; font-weight: 600; }
.summary-table td { font-size: 13.5px; }

/* Stepper nav: quieter inactive states so the current step stands out */
.stepper-label { font-size: 11px; letter-spacing: 0.01em; }
.stepper-circle { width: 26px; height: 26px; font-size: 11.5px; }

/* ---- Subsection inside a panel ----------------------------------------- */
.subsection {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ss-border);
}
.subsection-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #55616d;
    margin-bottom: 10px;
}

/* ---- Dynamic extra rows (unlimited Add Extra) -------------------------- */
.extra-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 10px;
}
.extra-row-remove { display: flex; align-items: flex-end; }
@media (max-width: 720px) {
    .extra-row { grid-template-columns: 1fr; }
}

.btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* =========================================================================
   REVIEW PAGE (spec §27)
   Reads as a quote summary document rather than a dump of database fields.
   ========================================================================= */

.quote-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ss-green);
}
.quote-hero-main { min-width: 0; }
.quote-ref {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ss-green-dark);
    background: var(--ss-green-light);
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.quote-hero h1 { margin: 0 0 4px; font-size: 26px; }
.quote-hero-address { margin: 0; font-size: 13.5px; color: #7c8894; }

.quote-hero-stats { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.hero-stat {
    min-width: 116px;
    padding: 12px 16px;
    background: #f7f9fa;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    text-align: right;
}
.hero-stat-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a95a1;
    margin-bottom: 5px;
}
.hero-stat-value {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--ss-navy);
    letter-spacing: -0.02em;
    /* A large currency figure is one unbreakable token — on the narrowest
       phones the 4-stat strip can flex each box down to ~65px, well under
       what "£406,347.31" needs, so without this it overflowed the card
       (and the page) instead of wrapping onto a second line. */
    overflow-wrap: break-word;
}
.hero-stat-value small { font-size: 12px; font-weight: 600; color: #8a95a1; }
.hero-stat-accent {
    background: var(--ss-navy);
    border-color: var(--ss-navy);
}
.hero-stat-accent .hero-stat-label { color: rgba(255,255,255,0.6); }
.hero-stat-accent .hero-stat-value { color: var(--ss-white); }

/* Per-panel edit link (§27) — jump straight to the step that owns the data */
.panel { position: relative; }
.panel-edit {
    position: absolute;
    top: 11px;
    right: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ss-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.panel-edit:hover { text-decoration: underline; }

/* Label/value rows — lighter than a table, easier to scan in two columns */
.detail-list { display: flex; flex-direction: column; }
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid #eef1f4;
    font-size: 13px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row span { color: #7c8894; flex-shrink: 0; }
.detail-row strong { color: var(--ss-text); font-weight: 600; text-align: right; }

.tag-inline {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: #f0f0f0;
    color: #7c8894;
    vertical-align: middle;
}

@media (max-width: 780px) {
    .quote-hero-stats { width: 100%; }
    .hero-stat { flex: 1; min-width: 0; text-align: left; }
}
@media (max-width: 480px) {
    /* All 4 stats squeezed onto one row left each too narrow for its own
       currency figure (e.g. "£406,347.31"), which then broke mid-digit via
       .hero-stat-value's overflow-wrap safety net — legible as a fallback,
       but not a real fix. Two per row gives each one enough width instead. */
    .hero-stat { flex: 1 1 calc(50% - 5px); }
}

/* Inverter slots sit in a responsive grid rather than a tall single column */
#inverter-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 6px;
}

/* =========================================================================
   CUSTOM COMBOBOX (replaces the unstyleable native <datalist>)
   Matches the SolarSense palette and shows a second line of spec/price
   detail per option, which a native datalist cannot do.
   ========================================================================= */

.combo { position: relative; }

.combo-input {
    width: 100%;
    padding: 9px 34px 9px 12px;
    border: 1.5px solid #d8dee5;
    border-radius: 7px;
    font-size: 14px;
    font-family: var(--ss-font);
    background: var(--ss-white);
}
.combo-input:focus {
    outline: none;
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.15);
}

.combo-caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a95a1;
    font-size: 11px;
    cursor: pointer;
    pointer-events: auto;
}

.combo-list {
    display: none;
    position: absolute;
    /* Sits above panels, cards and neighbouring fields. Below the help
       popover (1000) so an open tooltip is never hidden behind a list. */
    z-index: 900;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(16, 35, 58, 0.13);
}
.combo-list.is-open { display: block; }

.combo-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13.5px;
}
.combo-option.is-filtered { display: none; }
.combo-option:hover,
.combo-option.is-active {
    background: var(--ss-green-light);
}
.combo-option.is-active { box-shadow: inset 2px 0 0 var(--ss-green); }

.combo-option-label {
    color: var(--ss-text);
    font-weight: 500;
    min-width: 0;
}
.combo-option-meta {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ss-green-dark);
    white-space: nowrap;
}

/* Empty state when a search matches nothing */
.combo-list:not(:has(.combo-option:not(.is-filtered)))::after {
    content: 'No matches';
    display: block;
    padding: 10px;
    font-size: 12.5px;
    color: #8a95a1;
    text-align: center;
}

/* Disabled-looking action (e.g. customer PDF before a quote is complete) */
.btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================================
   LANDING PAGE
   ========================================================================= */

.landing-body { background: var(--ss-white); }

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--ss-border);
}
.landing-nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.landing-logo { height: 32px; width: auto; display: block; }
.landing-nav-links { display: flex; align-items: center; gap: 26px; }
.landing-nav-links a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ss-text-muted);
}
.landing-nav-links a:hover { color: var(--ss-navy); }
/* .landing-nav-links a sets a muted grey on every link in the bar, which
   otherwise beats .btn-primary's navy on specificity (class+tag > class) and
   silently drags the Sign In button back under AA contrast — this restores
   it without reintroducing the old white-on-green failure. */
.landing-nav-links .btn-primary { color: var(--ss-navy); }

.btn-sm  { padding: 7px 15px; font-size: 13px; }
.btn-lg  { padding: 13px 30px; font-size: 15.5px; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
    position: relative;
    padding: 92px 28px 76px;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 60% at 50% -10%, rgba(141,198,63,0.16), transparent 70%),
        linear-gradient(180deg, #fbfdfa 0%, var(--ss-white) 100%);
    border-bottom: 1px solid var(--ss-border);
}
.hero-inner { max-width: 780px; margin: 0 auto; }

.hero-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ss-green-dark);
    background: var(--ss-green-light);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.hero h1 {
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--ss-navy);
    margin: 0 0 18px;
}
.hero-sub {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ss-text-muted);
    max-width: 600px;
    margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-stats-strip {
    display: flex;
    justify-content: center;
    gap: 52px;
    margin-top: 56px;
    padding-top: 30px;
    border-top: 1px solid var(--ss-border);
    flex-wrap: wrap;
}
.hero-stats-strip div { display: flex; flex-direction: column; gap: 3px; }
.hero-stats-strip strong {
    font-size: 30px;
    font-weight: 800;
    color: var(--ss-navy);
    letter-spacing: -0.02em;
}
.hero-stats-strip span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ss-text-muted);
}

/* ---- Content sections -------------------------------------------------- */
.landing-section { padding: 78px 28px; }
.landing-section-alt { background: #f7f9fa; border-block: 1px solid var(--ss-border); }
.landing-inner { max-width: 1120px; margin: 0 auto; }

.landing-h2 {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -0.022em;
    color: var(--ss-navy);
    text-align: center;
    margin: 0 0 44px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}
.feature-card {
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    padding: 26px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--ss-green);
    box-shadow: 0 10px 26px rgba(16,35,58,0.08);
}
.feature-card h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ss-navy);
    margin: 0 0 9px;
}
.feature-card p {
    font-size: 14px;
    line-height: 1.62;
    color: var(--ss-text-muted);
    margin: 0;
}

/* ---- How it works ------------------------------------------------------ */
.how-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px 34px;
    counter-reset: none;
}
.how-list li { display: flex; gap: 16px; align-items: flex-start; }
.how-list span {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ss-green);
    color: var(--ss-navy);
    font-size: 13.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.how-list strong {
    display: block;
    font-size: 14.5px;
    color: var(--ss-navy);
    margin-bottom: 2px;
}
.how-list div { font-size: 13.5px; color: var(--ss-text-muted); line-height: 1.55; }

/* ---- CTA --------------------------------------------------------------- */
.landing-cta {
    padding: 74px 28px;
    text-align: center;
    background: var(--ss-navy);
    color: var(--ss-white);
}
.landing-cta h2 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.022em;
    margin: 0 0 10px;
}
.landing-cta p { font-size: 15.5px; color: rgba(255,255,255,0.72); margin: 0 0 26px; }

/* ---- Footer ------------------------------------------------------------ */
.landing-footer { background: #0d1c2e; color: rgba(255,255,255,0.68); }
.landing-footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 44px;
    padding: 52px 28px 40px;
}
.footer-logo {
    height: 30px;
    width: auto;
    margin-bottom: 14px;
    /* The logo is dark-on-transparent, so lift it on the dark footer. */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.footer-brand p { font-size: 13.5px; margin: 0; max-width: 280px; line-height: 1.6; }
.footer-links h4 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ss-white);
    margin: 0 0 14px;
}
.footer-links a {
    display: block;
    font-size: 13.5px;
    color: rgba(255,255,255,0.68);
    margin-bottom: 9px;
}
.footer-links a:hover { color: var(--ss-green); }
.footer-note { font-size: 13px; line-height: 1.6; margin: 0; }

.landing-footer-bar {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 18px 28px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.45);
}

@media (max-width: 820px) {
    .hero h1 { font-size: 36px; }
    .hero-sub { font-size: 16px; }
    .landing-h2 { font-size: 25px; }
    .landing-footer-inner { grid-template-columns: 1fr; gap: 30px; }
    .hero-stats-strip { gap: 30px; }
    .landing-nav-links { gap: 16px; }
}

/* =========================================================================
   CLICKABLE STEPPER — completed steps navigate; future steps stay inert
   ========================================================================= */
.stepper-link {
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.12s ease;
}
.stepper-link:hover { transform: translateY(-2px); }
.stepper-link:hover .stepper-circle {
    background: var(--ss-green);
    border-color: var(--ss-green);
    color: var(--ss-navy);
}
.stepper-link:hover .stepper-label { color: var(--ss-navy); }
.stepper-link:focus-visible {
    outline: 2px solid var(--ss-green);
    outline-offset: 3px;
}
/* Steps not yet reached read as inactive rather than clickable. */
.stepper-item.stepper-upcoming { cursor: default; }

/* ---- Soft "double-check this" warning ---------------------------------- */
/* Deliberately advisory, not blocking: the value is accepted, the estimator
   is just asked to confirm it. */
.soft-warning {
    margin-top: 6px;
    padding: 7px 10px;
    background: #fff8e6;
    border: 1px solid #f2d98a;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #8a6d1f;
}
input.is-flagged {
    border-color: #e6b800 !important;
    background: #fffdf5;
}
.money-input:has(input.is-flagged) { border-color: #e6b800; }

/* ---- App footer (signed-in pages) -------------------------------------- */
.app-footer {
    margin-top: 48px;
    background: #0d1c2e;
    color: rgba(255,255,255,0.6);
}
.app-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.app-footer-brand { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.app-footer-logo {
    height: 22px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.app-footer-links { display: flex; gap: 20px; }
.app-footer-links a { font-size: 13px; color: rgba(255,255,255,0.6); }
.app-footer-links a:hover { color: var(--ss-green); }
.app-footer-meta { font-size: 12px; color: rgba(255,255,255,0.4); }

/* Header nav: separate the destructive/secondary actions visually */
.header-back { margin-right: 6px; }
.header-logout { color: var(--ss-text-muted); opacity: 0.8; }
.header-logout:hover { color: var(--ss-danger); }

@media (max-width: 780px) {
    .app-footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .header-link { font-size: 12.5px; }
}

/* =========================================================================
   PAGE SKELETON & RHYTHM
   -------------------------------------------------------------------------
   Sticky footer: the body is a flex column filling the viewport and <main>
   absorbs the leftover space, so on short pages (login, an empty library)
   the footer sits at the bottom of the window instead of floating halfway
   up. A margin-top on the footer can't do this — it has nothing to push
   against when the content is shorter than the screen.
   ========================================================================= */

html { height: 100%; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f7f9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-main {
    flex: 1 0 auto;      /* grows to fill, never shrinks below its content */
    width: 100%;
    display: flex;
    flex-direction: column;
}

.app-footer {
    flex-shrink: 0;
    margin-top: 0;       /* the flex layout handles the gap now */
}

/* ---- Consistent page container --------------------------------------- */
/* One rhythm everywhere: same gutters, same top offset, generous bottom
   space so the last card never collides with the footer. */
.form-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 38px 28px 72px;
    width: 100%;
}
.form-page-wide { max-width: 1180px; }

.dash-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 38px 28px 0;
    width: 100%;
}
.dash-grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 28px 72px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    align-items: start;
}

/* ---- Dashboard ---------------------------------------------------------- */
.dash-welcome h1 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.022em;
    color: var(--ss-navy);
    margin: 0 0 5px;
}
.dash-welcome p {
    font-size: 14.5px;
    color: var(--ss-text-muted);
    margin: 0;
}

.dash-tile {
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: 12px;
    padding: 26px;
    box-shadow: var(--ss-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 190px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dash-tile:hover {
    transform: translateY(-3px);
    border-color: var(--ss-green);
    box-shadow: 0 10px 26px rgba(16,35,58,0.08);
}
.dash-tile h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ss-navy);
    margin: 0;
}
.dash-tile p {
    font-size: 13.8px;
    line-height: 1.6;
    color: var(--ss-text-muted);
    margin: 0;
    flex: 1;          /* pushes the button to a consistent baseline */
}
.dash-tile .btn { align-self: flex-start; margin-top: 4px; }

/* ---- Vertical rhythm inside cards ------------------------------------- */
.form-card { padding: 30px 32px; }
.form-card h1 { margin-bottom: 4px; }
.form-card > .form-subtitle { margin-bottom: 26px; }

/* Consistent gap between stacked panels */
.panel + .panel { margin-top: 18px; }

/* The action bar gets real breathing room from the last panel */
.action-bar { margin-top: 26px; padding-top: 22px; }

/* ---- Stepper spacing --------------------------------------------------- */
.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1180px;
    margin: 0 auto 28px;
    padding: 0 4px;
}
/* This unconditional rule sits after the mobile-overflow media query above
   (same selector, same specificity — later wins), so its justify-content:
   center silently overrode that query's flex-start and reopened the page
   overflow on narrow screens: centering an overflowing flex row lets content
   bleed equally past both edges instead of just scrolling to the right, and
   the parent page picked up that extra width even with .stepper's own
   overflow-x: auto set. Restated here, after it, so mobile wins again. */
@media (max-width: 900px) {
    .stepper { justify-content: flex-start; }
}

/* ---- Review grid ------------------------------------------------------- */
.review-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1000px) {
    .review-grid { grid-template-columns: 1fr; }
}

/* ---- Login / auth pages ------------------------------------------------ */
/* Centred in the available space rather than pinned to the top. */
.auth-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    width: 100%;
    background: radial-gradient(circle at 50% 0%, #eef7e2 0%, #f6f8f7 45%, #eef1f0 100%);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: 14px;
    padding: 38px 34px;
    box-shadow: 0 4px 24px rgba(16,35,58,0.07);
}

@media (max-width: 720px) {
    .form-page, .dash-grid { padding-left: 18px; padding-right: 18px; }
    .dash-topbar { padding-left: 18px; padding-right: 18px; }
    .form-card { padding: 22px 20px; }
}

/* ---- Auth card detail --------------------------------------------------- */
.auth-logo {
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto 14px;
}
.auth-subtitle {
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ss-text-muted);
    margin: 0 0 26px;
}
.auth-card .field { margin-bottom: 16px; }
.auth-card .btn-block { margin-top: 6px; }

.auth-footer-link {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-border);
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ss-text-muted);
}
.auth-back {
    display: block;
    margin-top: 8px;
    font-weight: 600;
    color: var(--ss-green-dark);
}

/* Landing footer also participates in the sticky-footer flex layout */
.landing-footer { flex-shrink: 0; }

/* =========================================================================
   FINAL POLISH — spacing rhythm and readability
   ========================================================================= */

/* Sticky header so navigation stays reachable on long wizard steps */
.site-header {
    position: sticky;
    top: 0;
    z-index: 400;
    background: var(--ss-white);
}

/* Stepper sits in its own quiet band, separating chrome from content */
.stepper-wrap {
    background: var(--ss-white);
    border-bottom: 1px solid var(--ss-border);
    padding: 18px 28px;
    margin-bottom: 0;
}

/* Panels breathe more; grouped fields get consistent internal rhythm */
.panel-body > .grid-2 + .grid-2,
.panel-body > .grid-3 + .grid-3,
.panel-body > .grid-2 + .grid-3,
.panel-body > .grid-3 + .grid-2 { margin-top: 16px; }

.panel-body > .toggle-field:first-child { padding-top: 0; }

/* Field labels sit closer to their inputs than to the field above */
.field { margin-bottom: 0; }
.grid-2 > .field, .grid-3 > .field { margin-bottom: 0; }

/* Alerts get consistent spacing and a subtle left accent */
.alert {
    border-radius: 8px;
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 13.5px;
    line-height: 1.55;
    border-left-width: 1px;
    border-left-style: solid;
}
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert li { margin-bottom: 3px; }
.alert li:last-child { margin-bottom: 0; }
.alert-error   { border-left-color: var(--ss-danger); }
.alert-warning { border-left-color: #e6b800; }
.alert-success { border-left-color: var(--ss-green); }
.alert-info    { border-left-color: #5a9bd8; }

/* Section titles inside cards: quieter, better separated */
.section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ss-text-muted);
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ss-border);
}
.section-title:first-of-type { margin-top: 0; }

/* Summary tables read as data */
.summary-table { width: 100%; border-collapse: collapse; }
.summary-table th,
.summary-table td {
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f4;
    vertical-align: top;
}
.summary-table tr:last-child th,
.summary-table tr:last-child td { border-bottom: none; }
.summary-table th { width: 45%; font-weight: 600; }

/* Focus visibility for keyboard users, consistently. Includes custom
   role="button" controls (the "?" help tips) — a bare tag-name list here
   misses those, since they're <span> elements, not real <button>s, so they
   were keyboard-focusable (tabindex="0") but showed no focus ring at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ss-green);
    outline-offset: 2px;
}

/* ---- Reduced motion ---------------------------------------------------- */
/* Actual movement (translateY lifts, the toggle-reveal fade) can trigger
   vestibular symptoms, so those are removed here. Colour/border/shadow
   transitions are left alone — they're not motion in that sense, and they're
   how hover/focus/selected states are communicated, so turning them off too
   would silently remove real feedback rather than making it safer. */
@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover,
    .btn-outline-dark:hover,
    .feature-card:hover,
    .dash-tile:hover,
    .stepper-link:hover,
    .stepper-link:hover .stepper-circle,
    .approval-inbox-item:hover {
        transform: none;
    }
    .toggle-detail {
        animation: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* Print: drop the chrome so a review page prints cleanly */
@media print {
    .site-header, .app-footer, .stepper, .action-bar, .form-actions { display: none !important; }
    body { background: #fff; }
    .form-card, .panel { border: 1px solid #ccc; box-shadow: none; }
    .review-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   TOGGLE + REVEALED DETAIL GROUPING
   -------------------------------------------------------------------------
   Previously a .toggle-field's bottom border sat between the toggle and its
   own revealed cost box, so the box appeared to belong to the NEXT control —
   MEWP's cost field looked like it was part of the Telehandler row. The
   detail block now reads as a child of the toggle above it.
   ========================================================================= */

/* Drop the divider when a toggle's own detail is open, so the two read as
   one unit. :has() is unsupported in older browsers, where it simply falls
   back to the previous appearance rather than breaking. */
.toggle-field:has(+ .toggle-detail:not(.is-hidden)) {
    border-bottom: none;
    padding-bottom: 4px;
}

.toggle-detail {
    padding: 12px 0 14px 14px;
    margin-bottom: 2px;
    border-left: 1px solid var(--ss-green);
    border-bottom: 1px solid var(--ss-border);
    background: linear-gradient(90deg, rgba(141,198,63,0.05), transparent 60%);
    border-radius: 0 6px 6px 0;
}
/* The last control in a panel shouldn't leave a trailing divider. */
.toggle-detail:last-child { border-bottom: none; margin-bottom: 0; }

/* Plant Hire mixes Yes/No toggles with a Telehandler dropdown; give the
   select row the same treatment so all four items align consistently. */
.toggle-field:has(+ .toggle-detail:not(.is-hidden)) .toggle-label,
.toggle-field .toggle-label { line-height: 1.3; }

/* Project Total is the headline figure the client asked to emphasise
   (Cost of Sale, now "Project Cost", is a normal row above it). */
.project-total-highlight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: var(--ss-navy);
    color: var(--ss-white);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 14px 0 4px;
}
.project-total-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}
.project-total-sub {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-green);
}
.project-total-value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }

/* =========================================================================
   PROMINENT HINT CALLOUT
   -------------------------------------------------------------------------
   Standard .hint text (11.5px, light grey) was reported as too easy to
   miss — specifically instructions like "this is calculated for you" or
   "leave this blank". This is deliberately bigger, higher-contrast, and
   boxed so it can't be mistaken for routine formula text.
   ========================================================================= */
.hint-callout {
    margin-top: 8px;
    padding: 9px 12px;
    background: #eef7e2;
    border: 1px solid #cfe6ad;
    border-left: 1px solid var(--ss-green);
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #3d5c1a;
}

/* =========================================================================
   QUOTE LIBRARY
   ========================================================================= */

.library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}
.library-search input {
    width: 320px;
    max-width: 100%;
    padding: 9px 14px;
    border: 1.5px solid #d8dee5;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--ss-font);
}
.library-search input:focus {
    outline: none;
    border-color: var(--ss-green);
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.15);
}

.library-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.library-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1.5px solid var(--ss-border);
    border-radius: 999px;
    background: var(--ss-white);
    color: var(--ss-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.library-filter-pill:hover { border-color: var(--ss-green); }
.library-filter-pill.is-active {
    background: var(--ss-navy);
    border-color: var(--ss-navy);
    color: var(--ss-white);
}
.library-filter-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
}
.library-filter-pill.is-active .library-filter-count { background: rgba(255,255,255,0.18); }

.library-table-wrap { overflow-x: auto; }
.library-table { width: 100%; border-collapse: collapse; }
.library-table th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a95a1;
    padding: 0 12px 10px 0;
    border-bottom: 1.5px solid var(--ss-border);
    white-space: nowrap;
}
.library-table td {
    padding: 13px 12px 13px 0;
    border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
    font-size: 13.5px;
    white-space: nowrap;
}
.library-table tr:last-child td { border-bottom: none; }
.library-table tr.is-hidden { display: none; }
.library-table tbody tr:hover { background: #fbfcfd; }

.library-title { font-weight: 700; color: var(--ss-navy); font-size: 14px; white-space: normal; }
.library-subtitle { font-size: 12px; color: #8a95a1; margin-top: 1px; white-space: normal; }
.library-tag {
    display: inline-block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ss-green-dark);
    background: var(--ss-green-light);
    padding: 1px 7px;
    border-radius: 4px;
}
.library-incomplete { color: #8a95a1; font-style: italic; }
.library-updated { color: #8a95a1; font-size: 12.5px; }
.library-empty-search { text-align: center; padding: 30px 0; color: #8a95a1; font-size: 14px; }

/* ---- Row action buttons (View / Edit / PDF / Copy Link / Delete) ------- */
.library-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }

.lib-action {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 6px;
    border: 1.5px solid var(--ss-border);
    background: var(--ss-white);
    color: var(--ss-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--ss-font);
}
.lib-action:hover { border-color: var(--ss-green); color: var(--ss-green-dark); }
.lib-action-danger { color: var(--ss-danger); }
.lib-action-danger:hover { border-color: var(--ss-danger); background: var(--ss-danger-bg); }

.lib-delete-form { display: inline-block; }

.lib-dropdown { position: relative; display: inline-block; }
.lib-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 300;
    min-width: 160px;
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(16,35,58,0.13);
    padding: 6px;
}
.lib-dropdown-menu.is-open { display: block; }
.lib-dropdown-menu a,
.lib-dropdown-menu .lib-dropdown-disabled {
    display: block;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ss-text);
}
.lib-dropdown-menu a:hover { background: var(--ss-green-light); color: var(--ss-green-dark); }
.lib-dropdown-menu .lib-dropdown-disabled { color: #b7bec5; cursor: not-allowed; }

@media (max-width: 900px) {
    .library-search input { width: 100%; }
}

/* =========================================================================
   PRICING SETTINGS
   ========================================================================= */

.settings-summary {
    display: flex;
    gap: 14px;
    margin: 4px 0 22px;
}
.settings-summary-stat {
    padding: 12px 20px;
    background: #f7f9fa;
    border: 1px solid var(--ss-border);
    border-radius: 10px;
}
.settings-summary-value {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: var(--ss-navy);
    letter-spacing: -0.01em;
}
.settings-summary-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8a95a1;
    margin-top: 2px;
}

.cable-rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}
.cable-rate-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cable-rate-item label { font-size: 12.5px; font-weight: 700; color: var(--ss-text); }
.money-input-sm input { padding: 7px 10px; font-size: 13.5px; }
.cable-rate-item .field-tag { align-self: flex-start; }

/* =========================================================================
   PVSOL IMPORT (Project Info step)
   -------------------------------------------------------------------------
   Sits above the existing Project/Sales Person panels as its own block —
   deliberately does not restyle or restructure anything that was already
   there.
   ========================================================================= */
.import-panel {
    background: #f7faf3;
    border: 1.5px dashed #b9d98a;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.import-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.import-panel-head strong {
    display: block;
    font-size: 14px;
    color: var(--ss-navy);
    margin-bottom: 3px;
}
.import-panel-sub {
    display: block;
    font-size: 12.5px;
    color: var(--ss-text-muted);
    max-width: 480px;
    line-height: 1.5;
}
.import-btn { position: relative; cursor: pointer; flex-shrink: 0; }
.import-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.import-btn.is-busy { opacity: 0.6; pointer-events: none; }

.import-status {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #d9e8c2;
    font-size: 13px;
    line-height: 1.6;
}
.import-status-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.import-status-line span:first-child { color: var(--ss-text-muted); }
.import-status-line span:last-child { font-weight: 600; color: var(--ss-navy); }
.import-status-error {
    color: var(--ss-danger);
    font-weight: 600;
}
.import-status-warning {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff8e6;
    border: 1px solid #f2d98a;
    border-radius: 6px;
    color: #8a6d1f;
    font-size: 12.5px;
}
.import-status-warning:not(:last-child) { margin-bottom: 6px; }

/* Persistent (server-rendered, revisitable) variant of the import summary —
   slightly calmer styling than the live just-uploaded version, since this
   is a settled record rather than something actively happening. */
.import-panel-persisted {
    background: #f4f8fb;
    border-color: #bcd4e8;
}
.import-panel-persisted .import-status { border-top-color: #d3e3ef; }

/* ---- Scaffolding: kept visually distinct from everything else, since it
   must never be marked up, and the presentation needs that to be obvious
   at a glance, not just correct in the maths. ---- */
.pricing-total-row-scaffolding {
    color: #8a6d1f;
    font-weight: 600;
}
.project-total-highlight-final {
    background: var(--ss-green-dark, #2f6b1f);
    margin-top: 10px;
}
.scaffolding-note {
    font-weight: 500;
    opacity: 0.85;
    font-size: 11.5px;
    text-transform: none;
    letter-spacing: 0;
}

/* Approve/Reject action row on the scope and margin approval banners */
.approval-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.reject-box {
    margin-top: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
}
.reject-box label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 4px;
}
.reject-box textarea {
    width: 100%;
    font-family: var(--ss-font);
    font-size: 13px;
    padding: 8px;
    border: 1px solid var(--ss-border);
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Standalone container matching the dashboard's width/gutter rhythm,
   without inheriting dash-topbar's flex-row (space-between) behaviour,
   which isn't right for a single wide banner. */
.dash-banner-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
}
.dash-banner-wrap + .dash-banner-wrap { margin-top: 14px; }
.dash-banner-wrap:first-of-type { margin-top: 18px; }
.dash-banner-wrap .alert { margin: 0; }

/* Manager approval inbox — deliberately large and high-contrast, since
   this is the single most important thing on the dashboard for anyone who
   sees it: quotes are stuck until they act. */
.approval-inbox {
    background: #fffaf0;
    border: 1.5px solid #f2d98a;
    border-radius: 12px;
    padding: 22px 26px;
    margin-top: 18px;
}
.approval-inbox h2 {
    font-size: 19px;
    font-weight: 800;
    color: var(--ss-navy);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.approval-inbox-count {
    background: #8a6d1f;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 11px;
    border-radius: 999px;
}
.approval-inbox-list { display: flex; flex-direction: column; gap: 10px; }
.approval-inbox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--ss-white);
    border: 1.5px solid var(--ss-border);
    border-radius: 10px;
    color: var(--ss-text);
    transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.approval-inbox-item:hover {
    border-color: #8a6d1f;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(138,109,31,0.15);
}
.approval-inbox-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.approval-inbox-item strong { font-size: 16px; font-weight: 700; color: var(--ss-navy); }
.approval-inbox-meta { font-size: 13px; color: var(--ss-text-muted); }
.approval-inbox-reasons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.approval-inbox-reasons .status-badge { font-size: 12px; padding: 3px 10px; }
.approval-inbox-arrow { font-size: 18px; color: #8a6d1f; font-weight: 700; }

@media (max-width: 640px) {
    .approval-inbox { padding: 16px 18px; }
    .approval-inbox-item { flex-wrap: wrap; }
}

/* Signature capture panel on Review */
.signature-panel {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--ss-border);
}
.signature-panel h3 { font-size: 15px; font-weight: 700; color: var(--ss-navy); margin: 0 0 10px; }
.signature-canvas {
    display: block;
    width: 100%;
    max-width: 500px;
    height: 160px;
    background: #fff;
    border: 1.5px dashed var(--ss-border);
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
}
.signature-canvas-actions { margin: 8px 0 14px; }
#signature-mode-to-type,
#signature-mode-to-draw { margin-top: 4px; }
.signature-captured { margin-bottom: 12px; }
.signature-preview {
    display: block;
    max-width: 500px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 8px;
}
.signature-meta { font-size: 13px; color: var(--ss-text-muted); margin: 8px 0 0; }

/* PVSol-imported site render (Energy & Financial step). A dedicated class
   rather than reusing .signature-preview — it's an unrelated component, and
   this one needs its own size cap: some PV*SOL exports embed a very large
   image, and without a bound it can force an oversized layout jump while it
   decodes. object-fit: contain keeps the whole image visible either way. */
.pvsol-image-field { margin-bottom: 18px; }
.pvsol-image {
    display: block;
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 8px;
}

/* Customer signing link box on the signature panel */
.signing-link-box {
    background: #f4f8fb;
    border: 1px solid #d3e3ef;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 4px;
}
.signing-link-row { display: flex; gap: 8px; }
.signing-link-row input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1.5px solid var(--ss-border);
    border-radius: 6px;
    font-family: var(--ss-font);
    font-size: 13px;
    background: var(--ss-white);
    color: var(--ss-text);
}

/* Branded error page (404.php, "quote not found", invalid signing link).
   Built on the login card so it reads as part of the same product. */
.error-card { text-align: center; }
.error-code {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ss-green-light);
    color: var(--ss-navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.error-card h1 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ss-navy);
    text-wrap: balance;
}
.error-message {
    margin: 0 auto 24px;
    max-width: 34ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ss-text-muted);
    text-wrap: pretty;
}
.error-actions { display: grid; gap: 10px; }
.error-actions .btn { margin: 0; text-align: center; }
.error-actions [hidden] { display: none; }   /* .btn sets display, which would otherwise un-hide it */
.error-actions .btn-outline-dark {
    padding: 10px 22px;
    border-radius: var(--ss-radius);
    background: var(--ss-white);
    font-family: inherit;
    font-size: 14.5px;
    cursor: pointer;
}

/* ---- Roofs on the System Details step ----------------------------------- */
/* One line above the roof list saying what is left to do and whether the
   roofs still agree with the PV*SOL import. Green when there is nothing to
   do, amber when something needs a look. */
.roof-status {
    margin: 4px 0 16px;
    padding: 10px 14px;
    border: 1px solid #d5e9b8;
    border-radius: 8px;
    background: var(--ss-green-light);
    color: var(--ss-navy);
    font-size: 13px;
    line-height: 1.5;
}
.roof-status-attention {
    border-color: #f0d98a;
    background: #fff8e1;
    color: #5c4a00;
}
/* A roof whose type hasn't been chosen yet: PV*SOL supplies the roof and its
   panel count but has no idea what the roof is made of, so that one field
   is left for the estimator and made hard to miss. */
.roof-slot-needs-type .combo-input {
    border-color: #e6b800;
    background: #fffdf5;
}
.field-tag.roof-type-needed {
    background: #fff3c4;
    color: #6b5300;
}
.roof-area-name {
    margin: -2px 0 6px;
    color: var(--ss-text-muted);
}
/* Each roof is its own row: divided from the next, with the panel count
   lined up against the roof type even when a PV*SOL area name sits above
   the type and pushes it down. */
.roof-slot {
    align-items: end;
    padding: 12px 0 2px;
    border-top: 1px solid var(--ss-border);
}
.roof-slot:first-child { border-top: 0; padding-top: 4px; }
.roof-slot .field { margin-bottom: 10px; }

/* ---- AC cable schedule (Add-ons & Cabling) ------------------------------- */
/* The cable each group of inverters gets, priced line by line. Read-only:
   it follows the run length and the inverters on the quote. */
.cable-schedule { margin-top: 14px; overflow-x: auto; }
.cable-schedule-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 13px;
}
.cable-schedule-table th,
.cable-schedule-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ss-border);
    text-align: left;
    vertical-align: top;
}
.cable-schedule-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ss-text-muted);
    background: #f6f8f7;
}
.cable-schedule-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cable-schedule-table tfoot th,
.cable-schedule-table tfoot td { border-bottom: 0; font-weight: 700; color: var(--ss-navy); }
.cable-line-unpriced td { background: #fffdf5; }
.cable-unpriced { color: #6b5300; font-weight: 600; }
.cable-schedule-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #5c4a00; }

/* Unit size for an inverter whose catalogue row covers several sizes. */
.inverter-unit-size {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
}
.inverter-unit-size:empty,
.inverter-unit-size:not(:has(select)) { display: none; }
.inverter-unit-size label { margin: 0; font-size: 12.5px; }
.inverter-unit-size select { width: auto; min-width: 110px; padding: 6px 10px; }
.inverter-unit-size .hint { margin: 0; }

/* An Included Item that can be set to suit the job without sign-off
   (scaffolding). Deliberately quieter than the amber "Changed from default". */
.inclusion-free-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: #eef1f0;
    color: var(--ss-text-muted);
    vertical-align: middle;
}

/* A figure the page works out and the estimator cannot change (e.g. dongles,
   one per inverter): reads as a value, not as an empty box to fill in. */
input.input-fixed,
input.input-fixed:focus {
    background: #f6f8f7;
    border-color: var(--ss-border);
    color: var(--ss-text);
    cursor: default;
    box-shadow: none;
}