/* Vladz L.M. Airconditioning Trading - base styles
   Mobile-first; media queries widen the layout at tablet and desktop. */

/* ---------- Colour set + design tokens (UI/UX round 1, 2026-10-09) ----------
   Taken from the shop logo (a blue shield): the mid blue of its stripes is
   the main colour, its navy edge the dark shade. Contrast (WCAG 2.1 AA):
   primary on white 7.0:1, primary-dark on white 14.9:1, primary on tint 6.2:1,
   text on grey-50 14.8:1, muted text on white 7.6:1, control borders
   (grey-400) on white 3.2:1, success/warning/error text on their own
   backgrounds 5.6 / 6.2 / 5.7:1. --color-accent (logo sky blue, 2.4:1 on
   white) is for decoration only, never for text.
   Used by the public pages now (.public-site); other pages keep their own
   colours until their round. */
:root {
    --color-primary: #0258ad;
    --color-primary-dark: #01245c;
    --color-primary-tint: #e8f3fd;
    --color-accent: #32b0fd;
    --color-white: #ffffff;
    --color-grey-50: #f4f7fa;
    --color-grey-200: #dde3ea;
    --color-grey-400: #8592a3;
    --color-grey-600: #4b5563;
    --color-text: #1a2233;
    --color-on-dark-muted: #c9dcf2;
    --color-success: #1b6e3a;
    --color-success-bg: #e7f5ec;
    --color-warning: #8a4b00;
    --color-warning-bg: #fff4dc;
    --color-error: #b3261e;
    --color-error-bg: #fdecea;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(1, 36, 92, 0.08), 0 1px 2px rgba(1, 36, 92, 0.06);
    --shadow-md: 0 8px 24px rgba(1, 36, 92, 0.10);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    background: #fff;
}

h1, h2, h3 {
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

p {
    margin: 0 0 0.75rem;
}

a {
    color: #0b5ea8;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---------- Header ---------- */

.site-header {
    background: #0b5ea8;
    color: #fff;
    padding: 1rem 0;
}

.brand h1 {
    font-size: 1.2rem;
}

.tagline {
    margin: 0;
    font-size: 0.85rem;
}

/* Menu button and auth buttons share one row under the brand on mobile. */
.header-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

/* Admin header, compact by default so a phone keeps it to one short row.
   The min-width rules further down restore full size on larger screens. */
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Long label on wide screens, short one on phones. */
.cta-long {
    display: none;
}

/* Name and logout travel together so they never split across rows. */
.header-user {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.header-user .btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
}

/* Log Out is a POST form (CSRF) now, not a link — sits inline exactly
   where the link used to, with the button keeping the link's look. */
.logout-form {
    display: inline;
    margin: 0;
}

.logout-form button {
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.nav-toggle {
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 1rem;
    color: #0b5ea8;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    cursor: pointer;
}

/* Nav is collapsed by default on small screens. */
.main-nav {
    display: none;
    margin-top: 0.75rem;
}

.main-nav.open {
    display: block;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav li {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.main-nav a {
    display: block;
    padding: 0.6rem 0;
    color: #fff;
    text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus {
    text-decoration: underline;
}

/* ---------- Auth links (login / register / logout) ---------- */

.auth-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.auth-greeting {
    font-size: 0.8rem;
    /* Never let the admin name wrap and push the logout button down. */
    white-space: nowrap;
}

/* ---------- Sections ---------- */

.section {
    padding: 1.5rem 0;
}

.section-alt {
    background: #f2f4f6;
}

.section h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* ---------- Services ---------- */

.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.service-card {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.service-card h3 {
    font-size: 1.05rem;
}

.service-card p {
    margin: 0;
    font-size: 0.92rem;
}

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

.btn {
    display: inline-block;
    padding: 0.7rem 1.2rem;
    color: #fff;
    background: #0b5ea8;
    /* Transparent rather than none so .btn-outline's border doesn't change the height. */
    border: 1px solid transparent;
    border-radius: 3px;
    text-decoration: none;
}

.btn:hover,
.btn:focus {
    background: #084a85;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.88rem;
}

/* Outlined button for use on the dark header. */
.btn-outline {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.btn-outline:hover,
.btn-outline:focus {
    background: rgba(255, 255, 255, 0.15);
}

/* Outlined button for LIGHT backgrounds (panels, forms). .btn-outline is
   white-on-transparent for the dark header and disappears on white. */
.btn-ghost {
    background: #fff;
    border: 1px solid #0b5ea8;
    color: #0b5ea8;
}

.btn-ghost:hover,
.btn-ghost:focus {
    background: #eaf2fa;
}

/* Solid light button for use on the dark header. */
.btn-light {
    background: #fff;
    color: #0b5ea8;
}

.btn-light:hover,
.btn-light:focus {
    background: #e4eef7;
    color: #0b5ea8;
}

/* Secondary action on light backgrounds. */
.btn-secondary {
    background: #555;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #3b3b3b;
}

/* ---------- Hero / primary call to action ---------- */

.hero {
    background: #f2f4f6;
    border-bottom: 1px solid #dcdfe3;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hero-actions .btn {
    flex: 1 1 auto;
    text-align: center;
}

.hero-note {
    margin: 0;
    font-size: 0.88rem;
    color: #555;
}

/* ---------- Contact ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.contact-block {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-block h3 {
    font-size: 1rem;
}

.contact-block p {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
}

/* ---------- Forms / auth pages ---------- */

.auth-card {
    max-width: 480px;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* Wider variant for forms with side-by-side fields, e.g. registration. */
.auth-card-wide {
    max-width: 640px;
}

.form-row {
    margin-bottom: 0.9rem;
}

/* Stacked on mobile; the media query below splits it into columns. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 0.75rem;
}

.form-row label,
.form-row .form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.92rem;
    font-weight: bold;
}

/* A read-only value under a .form-label (e.g. a locked phone number). */
.form-row .form-label + p {
    margin: 0;
}

.form-row input,
.form-row textarea,
.form-row select {
    display: block;
    width: 100%;
    padding: 0.55rem;
    font-family: inherit;
    font-size: 1rem;
    color: #222;
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
}

.form-row textarea {
    resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: 2px solid #0b5ea8;
    outline-offset: 1px;
}

.form-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: #555;
}

/* Extra cost line items (technician_complete_job.php) — stacked on
   mobile, description/cost/remove sit in one row from 600px up. */
.line-item-row {
    margin-bottom: 0.5rem;
}

.line-item-row input {
    margin-bottom: 0.4rem;
}

/* Multi-service rows (_service_rows.php): select + quantity + Remove. */
.service-line-row select {
    /* Long service names must not push the page wider than a phone. */
    max-width: 100%;
    margin-bottom: 0.4rem;
}

/* technician_complete_job.php's on-site "Add Service" row. */
.add-service-form {
    margin: 0.75rem 0 1.5rem;
}

/* Duplicate-phone nudge on register.php — a step up from the plain hint
   above so it's noticed, but not styled as an error since it's not one. */
.form-hint-notice {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    color: #0b4a73;
    background: #eaf4fb;
    border: 1px solid #bcdcf0;
    border-radius: 3px;
}

.auth-alt {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

/* ---------- Panels / fieldsets ---------- */

.panel {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* ---------- Add/Edit modals (products_services.php) ----------
   Native <dialog> — showModal()/close() give focus-trapping, top-layer
   stacking and Escape-to-close for free. Width is fluid (vw-based) so it
   adapts across the 600/768/1024 breakpoints without needing rules of
   its own at each one. */

dialog.modal {
    width: 92vw;
    max-width: 600px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 0;
    border: none;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-box {
    position: relative;
    padding: 1.25rem;
}

.modal-close {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #555;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
    color: #111;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ---------- Signature pad (sign.php) ---------- */

.signature-pad-wrap {
    margin: 1rem 0;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    /* Keeps a two-finger scroll/pinch from fighting the pen on touch
       devices — drawing owns the gesture inside this box. */
    touch-action: none;
}

.signature-pad {
    display: block;
    width: 100%;
    height: auto;
    max-width: 600px;
    cursor: crosshair;
}

/* ---------- Completion documentation (technician_complete_job.php) ---------- */

.completion-photo {
    max-width: 100%;
    max-height: 320px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-block {
    margin: 0 0 1.25rem;
    padding: 0.9rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-block legend {
    padding: 0 0.4rem;
    font-weight: bold;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.9rem;
}

.radio-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
}

/* Radios must not stretch like the text inputs above. */
.radio-row input[type="radio"] {
    width: auto;
    margin: 0;
}

/* ---------- Work order receipt ---------- */

.receipt {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 2px solid #1b5e20;
    border-radius: 4px;
    background: #e6f4e6;
}

/* The number the admin reads out to the customer — deliberately big. */
.service-id {
    margin: 0.5rem 0 1rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #1b5e20;
    word-break: break-all;
}

.receipt-details {
    margin: 0;
    font-size: 0.92rem;
}

.receipt-details dt {
    font-weight: bold;
}

.receipt-details dd {
    margin: 0 0 0.5rem;
}

.tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: 0.78rem;
    color: #fff;
    background: #0b5ea8;
    border-radius: 3px;
}

/* ---------- Admin nav ---------- */

.admin-nav {
    background: #08406f;
    border-bottom: 1px solid #063354;
}

/* Wraps onto as many lines as it needs (two on desktop, a few on a phone)
   so every link and its badge is always visible — it used to be one row
   that cut off "Sales Report" and everything after it. */
.admin-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.9rem;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
}

.admin-nav li {
    flex: 0 0 auto;
}

.admin-nav a {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.88rem;
    white-space: nowrap;
    color: #d7e7f5;
    text-decoration: none;
}

.admin-nav a:hover,
.admin-nav a:focus {
    color: #fff;
    text-decoration: underline;
}

.admin-nav a.is-current {
    font-weight: bold;
    color: #fff;
    border-bottom: 2px solid #fff;
}

/* Modules that have no page yet. */
.admin-nav a.is-disabled {
    color: #7fa3bf;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .admin-nav ul {
        gap: 0.1rem 1.1rem;
    }

    .admin-nav a {
        font-size: 0.92rem;
    }
}

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

.dash-block {
    margin-bottom: 1.75rem;
}

/* ---------- Technicians (technicians.php): team line under the name ---------- */

.tech-team-line {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: #555;
}

/* The roster table cells don't wrap (.data-table); this note must, or it
   would stretch the whole table. */
.tech-team-note {
    display: block;
    max-width: 22rem;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #8a1c14;
    white-space: normal;
}

/* ---------- Services + Products (services.php / products.php, both built
   by products_services.php) ---------- */

.catalog-section {
    padding-top: 0.5rem;
    border-top: 3px solid #e3e3e3;
}

.catalog-section .panel {
    margin-top: 1rem;
}

/* Services / Products pages (2026-10-14): one section per page or tab, so no
   divider line on top; the Products tabs sit right under the page title. */
.catalog-page .catalog-section {
    padding-top: 0;
    border-top: 0;
}

.catalog-page .catalog-tabs {
    margin-bottom: 1.25rem;
}

.catalog-page .showcase-admin {
    margin-top: 0;
}

/* Services + Products lists: never scroll sideways. Phones (default): each
   row is a card, every value beside its label (data-label). From 768px: a
   fixed-layout table whose cells wrap, actions stacked in a narrow column.
   Selectors are .data-table.catalog-table so they outrank the generic
   .data-table rules further down (padding, nowrap, borders). */
.catalog-count {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: #555;
}

.catalog-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.catalog-filter label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    font-weight: bold;
}

.catalog-filter select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.catalog-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.data-table.catalog-table,
.data-table.catalog-table tbody,
.data-table.catalog-table tr,
.data-table.catalog-table td {
    display: block;
}

.data-table.catalog-table {
    width: 100%;
    font-size: 0.92rem;
}

.data-table.catalog-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.data-table.catalog-table tr {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid #d5dbe1;
    border-radius: 6px;
}

.data-table.catalog-table tbody tr:hover {
    background: #fff;
}

.data-table.catalog-table tr.is-inactive,
.data-table.catalog-table tbody tr.is-inactive:hover {
    background: #f4f5f7;
}

.data-table.catalog-table td {
    position: relative;
    padding: 0.3rem 0 0.3rem 7.5rem;
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.data-table.catalog-table td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    top: 0.3rem;
    left: 0;
    width: 7rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
}

.data-table.catalog-table td.catalog-name {
    padding: 0 0 0.4rem;
    font-size: 1rem;
}

.data-table.catalog-table td.catalog-name::before {
    content: none;
}

.catalog-sub {
    display: block;
    font-size: 0.8rem;
    color: #5a6470;
}

.data-table.catalog-table td.catalog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0 0;
}

.catalog-actions form {
    margin: 0;
}

.catalog-actions .btn {
    min-height: 40px;
    white-space: normal;
}

@media (min-width: 600px) {
    .catalog-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .catalog-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .data-table.catalog-table {
        display: table;
        table-layout: fixed;
        background: #fff;
        border: 1px solid #ccc;
        font-size: 0.88rem;
    }

    .data-table.catalog-table thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .data-table.catalog-table tbody {
        display: table-row-group;
    }

    .data-table.catalog-table tr {
        display: table-row;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .data-table.catalog-table thead th,
    .data-table.catalog-table td,
    .data-table.catalog-table td.catalog-name,
    .data-table.catalog-table td.catalog-actions {
        display: table-cell;
        padding: 0.55rem 0.5rem;
        border-bottom: 1px solid #e3e3e3;
        vertical-align: top;
        white-space: normal;
        font-size: inherit;
    }

    .data-table.catalog-table thead th {
        font-size: 0.75rem;
    }

    .data-table.catalog-table td[data-label]::before {
        content: none;
    }

    .catalog-actions .btn,
    .catalog-actions form {
        display: block;
        width: 100%;
    }

    .catalog-actions .btn {
        box-sizing: border-box;
        min-height: 0;
        margin-bottom: 0.35rem;
        padding-right: 0.3rem;
        padding-left: 0.3rem;
        text-align: center;
    }

    /* Products: Product, Unit type, Price, Free install, Home page, Status, actions */
    .catalog-table-products th:nth-child(1) { width: 27%; }
    .catalog-table-products th:nth-child(2) { width: 13%; }
    .catalog-table-products th:nth-child(3) { width: 15%; }
    .catalog-table-products th:nth-child(4) { width: 9%; }
    .catalog-table-products th:nth-child(5) { width: 10%; }
    .catalog-table-products th:nth-child(6) { width: 11%; }
    .catalog-table-products th:nth-child(7) { width: 15%; }

    /* Services: Service, Duration, Price, Status, actions */
    .catalog-table-services th:nth-child(1) { width: 36%; }
    .catalog-table-services th:nth-child(2) { width: 18%; }
    .catalog-table-services th:nth-child(3) { width: 20%; }
    .catalog-table-services th:nth-child(4) { width: 11%; }
    .catalog-table-services th:nth-child(5) { width: 15%; }
}

.dash-heading {
    margin-bottom: 0.25rem;
    font-size: 1.15rem;
}

.dash-sub {
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
    color: #555;
}

/* ---------- List search bar (searchBoxHtml(), config/helpers.php) ---------- */

.search-bar {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin: 0.75rem 0 1rem;
}

.search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.search-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 2.6rem 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid #aaa;
    border-radius: 4px;
}

/* Our clear (x) submits a fresh, unsearched URL; the browser's own one only
   empties the box, so it's hidden to avoid two different x's. */
.search-field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-clear {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    font-size: 1.4rem;
    line-height: 1;
    color: #555;
    text-decoration: none;
    border-radius: 50%;
}

.search-clear:hover,
.search-clear:focus {
    color: #000;
    background: #e4e6e8;
}

.search-bar .btn {
    flex: none;
    min-height: 44px;
    cursor: pointer;
}

/* Text for screen readers only (the search box's label). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.empty-state {
    padding: 1rem;
    font-size: 0.92rem;
    color: #555;
    text-align: center;
    background: #f2f4f6;
    border: 1px dashed #bbb;
    border-radius: 4px;
}

/* ---------- Summary cards ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.stat-card {
    padding: 0.9rem;
    background: #fff;
    border: 1px solid #ccc;
    /* The status colour is carried by this edge. */
    border-left: 5px solid #999;
    border-radius: 4px;
}

.stat-value {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.1;
}

.stat-label {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-weight: bold;
}

.stat-note {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #666;
}

.stat-pending     { border-left-color: #b26a00; }
.stat-recommended { border-left-color: #0b5ea8; }
.stat-inprogress  { border-left-color: #6a3ab2; }
.stat-completed   { border-left-color: #1b5e20; }
.stat-revenue     { border-left-color: #1b5e20; }

.revenue-amount {
    white-space: nowrap;
}

/* Test (PayMongo TEST key) money: its own line, never in the totals. */
.revenue-test {
    margin: 0.5rem 0 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    color: #5c4200;
    background: #fff4d6;
    border-radius: 4px;
}

.badge-test { color: #5c4200; background: #fff4d6; border-color: #e0b84d; margin-left: 0.25rem; }

/* Sales Report's Module 14 From/To range picker — inputs stack on phones,
   sit in one row (button aligned to the inputs) once there's room. */
.range-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.range-form .form-row {
    margin-bottom: 0;
}

/* Fixed-height container so Chart.js (maintainAspectRatio: false) can fill
   it responsively without the canvas growing unbounded on resize. */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    margin-bottom: 1rem;
}

/* A Sales Report chart box takes no space until main.js has actually drawn
   its chart — if the chart can't render (JS off, Chart.js CDN blocked, a
   stale cached main.js), the table below it simply moves up instead of
   sitting under an empty 240-380px box. */
.chart-wrap.is-pending {
    display: none;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.pagination-status {
    font-size: 0.88rem;
    color: #555;
}

/* ---------- Technician capacity ---------- */

.capacity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.capacity-card {
    padding: 0.9rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* On Leave / Inactive technicians are dimmed but still readable. */
.capacity-card.is-unavailable {
    background: #f4f4f4;
    opacity: 0.65;
}

.capacity-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

/* <progress> is used instead of a div so the bar width needs no inline style. */
.capacity-bar {
    display: block;
    width: 100%;
    height: 14px;
    /* Reset the native look so the colours below apply in every browser. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #e9ecef;
    color: #0b5ea8;
}

.capacity-bar::-webkit-progress-bar {
    background: #e9ecef;
    border-radius: 2px;
}

.capacity-bar::-webkit-progress-value {
    background: #0b5ea8;
    border-radius: 2px;
}

.capacity-bar::-moz-progress-bar {
    background: #0b5ea8;
    border-radius: 2px;
}

.capacity-bar.is-full {
    color: #8a1c1c;
}

.capacity-bar.is-full::-webkit-progress-value {
    background: #8a1c1c;
}

.capacity-bar.is-full::-moz-progress-bar {
    background: #8a1c1c;
}

.capacity-meta {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #444;
}

.capacity-warn {
    font-weight: bold;
    color: #8a1c1c;
}

/* ---------- Work order queue ---------- */

.queue-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* "Download Excel" + back link side by side, wrapping on phones. */
.queue-head-actions,
.export-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.export-row {
    margin: 0 0 1rem;
}

.tab-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Tables are the one thing allowed to scroll sideways on a phone. */
/* ---------- Collapsed work-order lists (orderRowHtml(), config/helpers.php) ----------
   Replaces the wide multi-column tables: each row is 3 cells that WRAP
   instead of scrolling sideways. Phones: who/what | status on one line,
   the "when" meta underneath. 768+: all three side by side. The whole
   row is a link to work_order_detail.php, where every column/action that
   used to be inline now lives. */
.order-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.order-list > li + li {
    border-top: 1px solid #e6e6e6;
}

.order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main status"
        "meta meta";
    gap: 0.2rem 0.75rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    color: inherit;
    text-decoration: none;
}

a.order-row:hover,
a.order-row:focus {
    background: #eef4fa;
}

a.order-row:focus {
    outline: 2px solid #0b5ea8;
    outline-offset: -2px;
}

.order-row-main {
    grid-area: main;
    min-width: 0;
}

.order-row-title,
.order-row-sub {
    display: block;
    overflow-wrap: anywhere;
}

.order-row-title {
    font-weight: bold;
}

a.order-row .order-row-title {
    color: #0b5ea8;
}

.order-row-sub {
    font-size: 0.88rem;
    color: #444;
}

.order-row-meta {
    grid-area: meta;
    min-width: 0;
    font-size: 0.82rem;
    color: #666;
    overflow-wrap: anywhere;
}

.order-row-status {
    grid-area: status;
    text-align: right;
}

/* Small "what's next" line under a status badge in a collapsed row. */
.order-row-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: bold;
    color: #b26a00;
}

/* ---------- Work order detail page (work_order_detail.php) ---------- */

.detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
}

.detail-head h2 {
    margin: 0;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.detail-actions form {
    margin: 0;
}

/* A full-width note above an order's action buttons (e.g. "Needs a team: ..."). */
.detail-note {
    flex-basis: 100%;
    margin: 0;
}

.detail-lines {
    margin: 0;
    padding-left: 1.1rem;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.data-table th,
.data-table td {
    padding: 0.55rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid #e3e3e3;
    white-space: nowrap;
}

/* Small numeric summary tables (sales_report.php's Module 14 sections):
   headers and names WRAP and padding tightens, so a 4-6 column table fits
   a phone instead of scrolling sideways inside its .table-wrap. */
.data-table-fit th,
.data-table-fit td {
    padding: 0.45rem 0.4rem;
    white-space: normal;
}

/* Only DATA may break mid-word (a long service name); headers break at
   spaces or at a &shy; soft hyphen in the markup, never "OR DERS". */
.data-table-fit td {
    overflow-wrap: anywhere;
}

/* Compact headers: no uppercase/letter-spacing, which is what made
   "COMPLETED"/"CANCELLED" too wide for 6 columns at 375px. Doubled class
   so it outranks the later .data-table thead th rule. */
.data-table.data-table-fit thead th {
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
}

.data-table thead th {
    background: #f2f4f6;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: #f7f9fb;
}

.cell-uid {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

.cell-score {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.muted {
    color: #888;
    font-style: italic;
}

/* Two small action forms side by side in a table cell, e.g. Approve/Reject
   on link_requests.php. Forms are block-level by default and would
   otherwise stack. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.row-actions form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Confirm's inline date picker on admin_dashboard.php — sized to its
   content instead of stretching like a full form-row input. */
.row-actions input[type="date"] {
    width: auto;
    padding: 0.3rem 0.4rem;
    font-size: 0.85rem;
    border: 1px solid #999;
    border-radius: 3px;
}

/* Groups the Confirm date picker + button as one visual unit, and sets
   the Decline form apart with a divider — otherwise the two forms just
   sit side by side in .row-actions and read as if Decline needs a date
   too (admin_dashboard.php / customer_dashboard.php, Recommended orders). */
.row-actions .confirm-label {
    font-size: 0.8rem;
    color: #666;
}

.row-actions .decline-action {
    border-left: 1px solid #ccc;
    padding-left: 0.6rem;
    margin-left: 0.2rem;
}

/* ---------- Payment step (technician_complete_job.php, Module 5) ---------- */
.payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
}

.payment-actions form {
    margin: 0;
}

.payment-actions .btn {
    min-width: 11rem;
}

.payment-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Manual Link (link_requests.php) ----------
   Two search columns, stacked on mobile and side by side from tablet up. */

.manual-link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

/* Grid items default to min-width:auto; 0 lets the search bar shrink with its column. */
.manual-link-grid > div {
    min-width: 0;
}

.search-results {
    margin-top: 0.5rem;
}

.search-result-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
}

.search-result-info {
    flex: 1 1 auto;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 10px;
}

/* Pending-count badge on an admin nav link, e.g. "Link Requests 2". */
.admin-nav .badge {
    margin-left: 0.3rem;
}

/* Urgency */
.badge-emergency { color: #fff;    background: #b3261e; }
.badge-high      { color: #4a2500; background: #ffd8a8; border-color: #e0a260; }
.badge-normal    { color: #333;    background: #e4e6e8; border-color: #c4c8cc; }

/* Technician status */
.badge-active    { color: #1b5e20; background: #e6f4e6; border-color: #a8d5a8; }
/* Customers page: has an account vs. walk-in (customers.php, customer_detail.php). */
.badge-online    { color: #0b4a85; background: #e3effa; border-color: #9cc3e8; }
.badge-walkin    { color: #5a3d00; background: #fdf0d5; border-color: #e6c27a; }
.badge-onleave   { color: #7a4b00; background: #fdf0d5; border-color: #e0c48a; }
.badge-inactive  { color: #555;    background: #e4e6e8; border-color: #c4c8cc; }
/* Teams (technicians.php, teams.php): no team = gets no jobs; one-person team = solo. */
.badge-noteam    { color: #8a1c14; background: #fde4e1; border-color: #eba59d; }
.badge-solo      { color: #3f2a78; background: #ece6fa; border-color: #b9a8e6; }

/* Work order status */
.badge-pending       { color: #7a4b00; background: #fdf0d5; border-color: #e0c48a; }
.badge-recommended   { color: #0b3d6b; background: #dceaf6; border-color: #9cc3e0; }
.badge-dateproposed  { color: #7a4b00; background: #ffe8b3; border-color: #e0b25f; }
.badge-reconsideration { color: #8a2e00; background: #ffdcc2; border-color: #e08f5f; }
.badge-confirmed     { color: #0b3d6b; background: #cfe3f3; border-color: #7fb0d6; }
.badge-inprogress    { color: #3d1f6b; background: #e6dcf6; border-color: #b49ce0; }
.badge-completed     { color: #1b5e20; background: #e6f4e6; border-color: #a8d5a8; }
.badge-cancelled     { color: #555;    background: #e4e6e8; border-color: #c4c8cc; }

/* Sales Report transaction type */
.badge-service     { color: #0b3d6b; background: #dceaf6; border-color: #9cc3e0; }
.badge-productsale { color: #4a2500; background: #ffd8a8; border-color: #e0a260; }

/* ---------- Notifications (all three dashboards) ----------
   Each notification is a full-width link styled as a list row — one click
   marks it read and opens what it's about (notification_open.php,
   notificationTarget() in config/asapm.php), no JS needed. */
.badge-new { color: #fff; background: #0b5ea8; border-color: #0b5ea8; }

.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-item {
    border-bottom: 1px solid #e4e6e8;
}

.notification-item:last-child {
    border-bottom: none;
}

/* "Mark all as read" sits in the panel header (.queue-head). */
.notification-mark-all {
    margin: 0 0 0 auto;
}

/* Each row is a plain link (notification_open.php marks it read, then opens it). */
.notification-link {
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0.25rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.notification-link:hover,
.notification-link:focus-visible {
    background: #f5f6f7;
}

.notification-message {
    flex: 1 1 auto;
}

.notification-item.is-unread .notification-message {
    font-weight: 600;
}

.notification-time {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
}

/* ---------- Alerts ---------- */

.alert {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 0.92rem;
}

.alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.alert-success {
    color: #1b5e20;
    background: #e6f4e6;
    border-color: #a8d5a8;
}

.alert-error {
    color: #8a1c1c;
    background: #fbeaea;
    border-color: #e3b0b0;
}

/* One radio row per team in admin_dashboard.php's Reassign modal. */
.team-option {
    display: block;
    padding: 0.4rem 0;
    font-weight: normal;
    border-bottom: 1px solid #eee;
}

.team-option input {
    display: inline-block;
    width: auto;
    margin-right: 0.4rem;
}

/* Neutral notice — e.g. a teammate told only the job's lead can submit completion. */
.alert-info {
    color: #0b4a73;
    background: #eaf4fb;
    border-color: #bcdcf0;
}

/* ---------- Footer ---------- */

.site-footer {
    padding: 1.25rem 0;
    background: #222;
    color: #eee;
    font-size: 0.9rem;
}

.site-footer p {
    margin: 0 0 0.35rem;
}

.footer-link {
    color: #9ec7ea;
}

/* Shop contact lines from Settings (shopFooterHtml()); long emails/addresses wrap. */
.footer-contact {
    color: #c9c9c9;
    overflow-wrap: anywhere;
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) {
    .brand h1 {
        font-size: 1.7rem;
    }

    .tagline {
        font-size: 0.9rem;
    }

    /* Room for the full call-to-action label again. */
    .header-cta {
        padding: 0.7rem 1.2rem;
        font-size: 1rem;
    }

    .cta-long {
        display: inline;
    }

    .cta-short {
        display: none;
    }

    .header-user {
        gap: 0.5rem;
    }

    .header-user .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.88rem;
    }

    .auth-greeting {
        font-size: 0.9rem;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section {
        padding: 2rem 0;
    }

    /* Enough room now for buttons to size to their text. */
    .hero-actions .btn {
        flex: 0 0 auto;
    }

    /* Description / cost / remove sit in one row once there's room. */
    .line-item-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .line-item-row input[name="line_item_description[]"] {
        flex: 2 1 auto;
    }

    .line-item-row input[name="line_item_cost[]"] {
        flex: 1 1 auto;
        max-width: 9rem;
    }

    .line-item-row input {
        margin-bottom: 0;
    }

    .service-line-row select {
        flex: 2 1 auto;
        margin-bottom: 0;
    }

    .service-line-row input[name="quantity[]"],
    .service-line-row input[name="add_quantity"] {
        flex: 0 0 6rem;
        max-width: 6rem;
    }

    /* First / middle / last name sit on one line once there's room. */
    .form-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .receipt-details {
        display: grid;
        grid-template-columns: 10rem 1fr;
        gap: 0.15rem 1rem;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .capacity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Tablet ---------- */

@media (min-width: 768px) {
    /* Manual Link's two search columns side by side. */
    .manual-link-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-wrap {
        height: 320px;
    }

    /* Collapsed list rows: who/what | when | status side by side. Each row
       is its own grid, so the status column gets a FIXED width (wide
       enough for status + urgency badges) — an auto width would differ
       per row and the middle column would start at a different x on
       every line. */
    .order-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 12.5rem;
        grid-template-areas: "main meta status";
    }
}

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
    .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .chart-wrap {
        height: 380px;
    }

    /* Full nav is always visible, so the toggle is not needed. */
    .nav-toggle {
        display: none;
    }

    /* .open is included so a menu left open on mobile lays out correctly
       after a resize. */
    .main-nav,
    .main-nav.open {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-top: 0;
        /* Put the nav between the brand and the auth buttons. */
        order: 2;
    }

    .main-nav ul {
        display: flex;
        gap: 1.25rem;
    }

    .main-nav li {
        border-top: none;
    }

    .main-nav a {
        padding: 0;
    }

    .header-controls {
        order: 3;
        margin-top: 0;
    }

    .service-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* All four counters on one row, capacity cards three across. */
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .capacity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Today's Plan (technician_dashboard.php) ----------
   Phone-first stack of numbered job cards in the recommended order.
   Urgency badges step DOWN in lightness (dark red, mid amber, white
   outline) so they read apart without relying on colour alone. */

.today-plan {
    padding: 1rem;
    background: #f4f7fa;
    border: 1px solid #dfe6ee;
    border-radius: 12px;
}

.plan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 0.75rem;
}

.plan-date {
    margin: 0;
    font-size: 0.9rem;
    color: #4a5560;
}

.plan-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.85rem 0 1rem;
}

.plan-stat {
    padding: 0.6rem 0.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
}

.plan-stat dt {
    font-size: 0.75rem;
    color: #5a6470;
}

.plan-stat dd {
    margin: 0.1rem 0 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #0b3d6b;
}

/* customer_detail.php totals: a money figure must fit a third of a 390px screen. */
.customer-stats .plan-stat dd {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

/* customer_detail.php edit history: who changed what, newest first. */
.customer-edits {
    margin: 0;
    padding-left: 1.1rem;
    overflow-wrap: anywhere;
}

.customer-edits li + li {
    margin-top: 0.35rem;
}

.customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.plan-stat-of {
    font-size: 0.8rem;
    font-weight: normal;
    color: #5a6470;
}

.plan-icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
}

.plan-alert {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    color: #6b3a00;
    background: #fff4e5;
    border: 1px solid #f0c98a;
    border-left: 4px solid #c46a00;
    border-radius: 10px;
}

.plan-alert .plan-icon {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.05rem;
}

.plan-alert-title {
    margin: 0;
    font-weight: bold;
}

.plan-alert-jobs {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
}

.plan-alert-jobs a {
    color: #6b3a00;
    font-weight: bold;
}

.plan-alert-date {
    color: #7a5a30;
}

.plan-list,
.plan-done-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-card {
    margin-bottom: 0.85rem;
    padding: 0.95rem 0.95rem 1rem;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06);
}

.plan-card.is-next {
    border-color: #0b5ea8;
    box-shadow: 0 0 0 1px #0b5ea8, 0 6px 16px rgba(11, 94, 168, 0.14);
}

/* Thicker left edge; padding shrinks by the extra 3px so content stays aligned. */
.plan-card.is-now {
    padding-left: calc(0.95rem - 3px);
    border-left: 4px solid #5b3a9b;
}

.plan-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.plan-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: bold;
    color: #0b3d6b;
    background: #e3eef8;
    border-radius: 50%;
}

.is-next .plan-num {
    color: #fff;
    background: #0b5ea8;
}

.plan-card-who {
    flex: 1;
    min-width: 0;
}

.plan-uid {
    display: block;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    color: #4a5560;
}

.plan-customer {
    display: block;
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.plan-flag {
    flex: none;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    background: #0b5ea8;
    border-radius: 999px;
}

.plan-flag-now {
    background: #5b3a9b;
}

.plan-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.7rem 0 0.6rem;
}

.plan-urg,
.plan-lead {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.78rem;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 10px;
}

.plan-urg-emergency { color: #fff;    background: #a3201c; }
.plan-urg-high      { color: #3a1d00; background: #f2a93b; border-color: #c98219; }
.plan-urg-normal    { color: #3b4148; background: #fff;    border-color: #8a939b; }

.plan-lead {
    color: #fff;
    background: #0b3d6b;
}

.plan-facts {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
    color: #2b3138;
}

.plan-facts li {
    display: flex;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.plan-facts .plan-icon {
    margin-top: 0.15rem;
    color: #6b7783;
}

.plan-facts li > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.plan-qty {
    font-weight: bold;
    color: #4a5560;
    white-space: nowrap;
}

.plan-why {
    margin: 0.7rem 0 0;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    color: #4a5560;
    background: #f4f7fa;
    border-radius: 8px;
}

.plan-note {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #5a6470;
}

/* "Team on the way since 9:40 am" (migration 047) — Today's Plan, order page, lookup. */
.on-the-way-note {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    font-weight: 600;
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 6px;
}

/* Phones: equal-width buttons side by side. */
.plan-actions {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.plan-actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}

.plan-actions form {
    margin: 0;
}

.plan-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #c3ccd6;
    border-radius: 12px;
}

.plan-empty .plan-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.4rem;
    color: #0b5ea8;
}

.plan-empty-done .plan-icon {
    color: #1b5e20;
}

.plan-empty-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: bold;
}

.plan-empty-text {
    max-width: 22rem;
    margin: 0.25rem auto 0;
    font-size: 0.9rem;
    color: #5a6470;
}

/* Done today: collapsed by default (native <details>, no JS), greyed. */
.plan-done {
    margin-top: 0.25rem;
    background: #f6f7f8;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
}

.plan-done summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    font-weight: bold;
    color: #4a5258;
    list-style: none;
    cursor: pointer;
}

.plan-done summary::-webkit-details-marker {
    display: none;
}

.plan-done summary::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.plan-done[open] summary::after {
    transform: rotate(-135deg);
}

.plan-done summary:focus-visible {
    outline: 2px solid #0b5ea8;
    outline-offset: 2px;
    border-radius: 12px;
}

.plan-done-count {
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: #4a5258;
    background: #e4e7ea;
    border-radius: 999px;
}

.plan-done-list {
    padding: 0 0.95rem 0.5rem;
}

.plan-done-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    color: #5f6870;
    border-top: 1px solid #e4e7ea;
}

.plan-done-item > .plan-icon {
    color: #6f8a72;
}

.plan-done-main {
    flex: 1;
    min-width: 0;
}

.plan-done-item .plan-uid {
    color: #5f6870;
    text-decoration: line-through;
    text-decoration-color: #a3abb2;
}

.plan-done-sub {
    display: block;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.plan-done-item .btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 44px;
    border-radius: 8px;
}

.plan-footnote {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    color: #5a6470;
}

@media (min-width: 600px) {
    .today-plan {
        padding: 1.25rem;
    }

    .plan-actions {
        display: flex;
    }

    .plan-actions .btn {
        width: auto;
        min-width: 9rem;
    }
}

@media (min-width: 768px) {
    .plan-stats {
        max-width: 30rem;
    }

    /* Wide cards: details on the left (indented under the number),
       buttons stacked on the right. */
    .plan-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1.5rem;
        padding: 1.1rem 1.25rem;
    }

    .plan-card.is-now {
        padding-left: calc(1.25rem - 3px);
    }

    .plan-card > * {
        grid-column: 1;
    }

    .plan-card > .plan-actions {
        grid-row: 1 / span 6;
        grid-column: 2;
        flex-direction: column;
        align-self: center;
        margin-top: 0;
    }

    .plan-badges,
    .plan-facts,
    .plan-why,
    .plan-note {
        margin-left: 2.7rem;
    }
}

/* ---------- Customer sign-off (sign.php) ----------
   Phone-first summary of what the customer is agreeing to: one column,
   big total, amounts right-aligned. Read on the technician's phone. */

.signoff {
    max-width: 640px;
    margin: 0 auto;
}

.signoff-title {
    margin-bottom: 0.15rem;
    font-size: 1.3rem;
}

.signoff-uid {
    margin-bottom: 0.85rem;
    color: #4a5560;
}

.signoff-uid strong {
    font-family: "Courier New", Courier, monospace;
    color: #222;
}

.signoff-meta {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.85rem 0.95rem;
    background: #f4f7fa;
    border: 1px solid #dfe6ee;
    border-radius: 10px;
}

.signoff-meta dt {
    font-size: 0.78rem;
    color: #5a6470;
}

.signoff-meta dd {
    margin: 0;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.signoff-section {
    margin-bottom: 1rem;
}

.signoff-section h3 {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #0b3d6b;
    text-transform: uppercase;
}

.signoff-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e3e8ee;
}

.signoff-rows li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e3e8ee;
}

.signoff-what {
    min-width: 0;
    overflow-wrap: anywhere;
}

.signoff-qty {
    font-weight: bold;
    color: #4a5560;
    white-space: nowrap;
}

.signoff-amount {
    flex: none;
    font-weight: bold;
    white-space: nowrap;
}

.signoff-tag {
    display: inline-block;
    margin-left: 0.2rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #3a1d00;
    white-space: nowrap;
    background: #f2a93b;
    border-radius: 10px;
}

.signoff-note {
    display: block;
    font-size: 0.85rem;
    color: #5a6470;
}

.signoff-removed {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
    color: #5a3a3a;
    background: #fbf1f0;
    border-radius: 8px;
}

.signoff-findings {
    margin: 0;
    padding: 0.6rem 0.75rem;
    font-size: 0.92rem;
    background: #f4f7fa;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.signoff-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.25rem 0 0.75rem;
    padding: 0.9rem 1rem;
    color: #fff;
    background: #0b3d6b;
    border-radius: 12px;
}

.signoff-total span {
    font-size: 1rem;
    font-weight: bold;
}

.signoff-total strong {
    font-size: 1.75rem;
    line-height: 1.1;
    white-space: nowrap;
}

.signoff-agree {
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    font-size: 1rem;
    border: 2px solid #0b5ea8;
    border-radius: 10px;
}

.signoff-pad-label {
    margin: 0;
    font-weight: bold;
}

.signoff .signature-pad-wrap {
    margin-top: 0.35rem;
    border-radius: 10px;
}

.signoff-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0.5rem;
}

.signoff-actions .btn,
.signoff-fix .btn {
    min-height: 48px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}

.signoff-actions .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.signoff-fix {
    margin-top: 1.5rem;
    padding-top: 1rem;
    text-align: center;
    border-top: 1px dashed #c3ccd6;
}

.signoff-fix p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #5a6470;
}

.signoff-fix .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* "Fix the report" box on technician_complete_job.php's signature step. */
.fix-report {
    margin-top: 1.25rem;
    padding: 0.85rem 0.95rem;
    background: #f4f7fa;
    border: 1px solid #dfe6ee;
    border-radius: 10px;
}

.fix-report h4 {
    margin: 0 0 0.25rem;
}

.fix-report .btn {
    min-height: 44px;
}

@media (min-width: 600px) {
    .signoff-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Record Sale (record_sale.php): many products per sale ----------
   Phone-first: each product line is a small card; totals in a dark box.
   .form-row inputs are display:block/width:100%, so checkboxes and radios
   use .check-inline (input right next to its label, 44px tall). */

[data-sale-form] [hidden],
.sale-review [hidden] {
    display: none !important;
}

.check-inline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    font-size: 0.95rem;
    cursor: pointer;
}

.check-inline input[type="checkbox"],
.check-inline input[type="radio"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
}

.radio-stack {
    display: grid;
    gap: 0.1rem;
    margin-bottom: 0.5rem;
}

.sale-lines {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.sale-line {
    padding: 0.75rem 0.85rem;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 10px;
}

.sale-line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: 0.5rem;
}

.sale-line-row .form-row {
    margin-bottom: 0.5rem;
}

.sale-line-product select {
    max-width: 100%;
}

.sale-line-money {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-size: 0.9rem;
    color: #4a5560;
}

.sale-line-money strong {
    color: #222;
}

.sale-line-install {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #dfe6ee;
}

.sale-line-remove {
    margin-top: 0.5rem;
    min-height: 40px;
}

.sale-total-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.85rem 0 0.25rem;
    padding: 0.8rem 1rem;
    color: #fff;
    background: #0b3d6b;
    border-radius: 10px;
}

.sale-total-box span {
    font-weight: bold;
}

.sale-total-box strong {
    font-size: 1.5rem;
    white-space: nowrap;
}

.sale-sub {
    display: block;
    font-size: 0.85rem;
    color: #5a6470;
}

.sale-review-meta {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.85rem 0.95rem;
    background: #f4f7fa;
    border: 1px solid #dfe6ee;
    border-radius: 10px;
}

.sale-review-meta dt {
    font-size: 0.78rem;
    color: #5a6470;
}

.sale-review-meta dd {
    margin: 0;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.sale-review-lines,
.sale-cards,
.sale-card-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sale-review-lines li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #e3e8ee;
}

.sale-review-what {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sale-review-amount {
    flex: none;
    font-weight: bold;
    white-space: nowrap;
}

.sale-free-install {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    font-weight: bold;
    color: #14532d;
}

.sale-install-summary {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: #4a5560;
}

.sale-review-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0.5rem;
    margin-top: 1rem;
}

.sale-review-actions .btn {
    min-height: 48px;
    font-weight: bold;
    cursor: pointer;
}

.sale-cards {
    display: grid;
    gap: 0.75rem;
}

.sale-card {
    padding: 0.8rem 0.9rem;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 10px;
}

.sale-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.sale-card-customer {
    margin: 0.35rem 0;
    font-weight: bold;
}

.sale-card-lines li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

/* Child combinator: only the price column, not spans nested in the product cell. */
.sale-card-lines li > span:last-child {
    flex: none;
    white-space: nowrap;
}

/* Warranty under a sale line (sales list, customer purchases, review). */
.warranty-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: #1e6b3a;
}

.warranty-item {
    display: block;
    padding-left: 0.75rem;
}

.warranty-none,
.warranty-not_recorded,
.warranty-voided {
    color: #5a6470;
}


.sale-card-foot {
    margin: 0.4rem 0;
    padding-top: 0.4rem;
    border-top: 1px solid #e3e8ee;
}

.sale-card-total {
    font-size: 1.15rem;
    font-weight: bold;
}

.sale-card .btn {
    min-height: 44px;
}

.sale-card.is-voided {
    color: #555;
    background: #f6f7f8;
}

.sale-card.is-voided .sale-card-total {
    text-decoration: line-through;
}

.badge-voided {
    color: #fff;
    background: #5a6470;
}

.sale-void-note {
    margin: 0.4rem 0 0;
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
    color: #5a3a3a;
    background: #fbf1f0;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .sale-review-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sale-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Record Sale in 4 steps (2026-10-19, main.js [data-sale-form]) ----------
   Step bar: done = green circle + check, current = blue circle + soft ring,
   not yet = grey outline (each also named / marked for screen readers, not
   colour alone). One step at a time once .is-stepped; without JS every
   section shows. Summary card on the right (sticky) from 1024px. */
.sale-stepper[hidden],
.sale-summary[hidden] {
    display: none !important;
}

.sale-steps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
}

.sale-steps-item {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.sale-steps-item.is-current {
    flex: 0 0 auto;
}

.sale-steps-item:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 0.5rem;
    height: 2px;
    background: var(--color-grey-400);
}

.sale-steps-item.is-done:not(:last-child)::after {
    background: var(--color-success);
}

.sale-steps-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.25rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-grey-600);
    background: none;
    border: 0;
    border-radius: 8px;
}

button.sale-steps-btn {
    color: var(--color-text);
    cursor: pointer;
}

button.sale-steps-btn:hover .sale-steps-name {
    text-decoration: underline;
}

button.sale-steps-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.sale-steps-dot {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 800;
    color: var(--color-grey-600);
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: 50%;
}

.sale-steps-item.is-current .sale-steps-dot {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px #cfe3f8;
}

.sale-steps-item.is-current .sale-steps-name {
    color: var(--color-primary-dark);
    font-weight: 800;
}

.sale-steps-item.is-done .sale-steps-dot {
    color: var(--color-white);
    background: var(--color-success);
    border-color: var(--color-success);
}

/* Small phones: only the current step is named. */
.sale-steps-name {
    display: none;
}

.sale-steps-item.is-current .sale-steps-name {
    display: inline;
}

.sale-layout {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.sale-step + .sale-step {
    margin-top: 1.5rem;
}

.sale-form.is-stepped .sale-step + .sale-step {
    margin-top: 0;
}

.sale-step-title {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
}

.sale-step-title:focus {
    outline: none;
}

.sale-step-title:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}

.sale-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-grey-200);
}

.sale-nav .btn {
    min-height: 48px;
}

.sale-nav .btn:not(.btn-ghost) {
    flex: 1 1 12rem;
    margin-left: auto;
}

/* Customer tabs: the same customer_mode radios, drawn as a 3-part switch. */
.sale-mode {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.sale-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.sale-mode-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: var(--color-primary-dark);
    border-radius: 8px;
    cursor: pointer;
}

.sale-mode-tab input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.sale-mode-tab:hover {
    background: var(--color-primary-tint);
}

.sale-mode-tab:has(input:checked) {
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.sale-mode-tab:has(input:focus-visible) {
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.sale-counter-note {
    margin: 0 0 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
}

.sale-counter-note p {
    margin: 0;
}

.sale-find-status {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.92rem;
    color: var(--color-grey-600);
}

.sale-find-status:empty {
    display: none;
}

/* Customer matches: initials, name, phone · email, Online / Walk-in; the
   picked one has a blue border + "Picked ✓" (not colour alone). */
.sale-pick-list,
.sale-results,
.sale-summary-lines {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sale-pick-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    font: inherit;
    text-align: left;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-grey-200);
    border-radius: var(--radius);
    cursor: pointer;
}

.sale-pick-card:hover {
    border-color: var(--color-primary);
}

.sale-pick-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.sale-pick-card[aria-pressed="true"] {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.sale-pick-initials {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border: 1px solid #9cc3e8;
    border-radius: 50%;
}

.sale-pick-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.sale-pick-name {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sale-pick-sub {
    font-size: 0.88rem;
    color: var(--color-grey-600);
    overflow-wrap: anywhere;
}

.sale-pick-state {
    flex: none;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.sale-pick-card[aria-pressed="true"] .sale-pick-state {
    color: var(--color-primary-dark);
}

/* Product finder: chips + result rows. */
.sale-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
}

.sale-chips-label {
    min-width: 3rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.sale-chip {
    min-height: 44px;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    border-radius: 999px;
    cursor: pointer;
}

.sale-chip:hover {
    border-color: var(--color-primary);
}

.sale-chip:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.sale-chip[aria-pressed="true"] {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.sale-chip[aria-pressed="true"]::before {
    content: "\2713\00a0";
}

.sale-results {
    margin-bottom: 1rem;
}

.sale-result {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-areas: "photo text" "price add";
    gap: 0.4rem 0.75rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
}

.sale-result-photo,
.sale-line-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    color: var(--color-grey-600);
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    border-radius: 8px;
}

.sale-result-photo { grid-area: photo; }

.sale-result-photo img,
.sale-line-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sale-photo-none svg {
    display: block;
    width: 2.25rem;
    height: auto;
}

.sale-result-text {
    display: grid;
    grid-area: text;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sale-result-price {
    grid-area: price;
    font-weight: 800;
    white-space: nowrap;
}

.sale-result-add {
    grid-area: add;
    justify-self: end;
    min-width: 6.5rem;
    min-height: 44px;
}

.sale-result-add.is-added,
.sale-result-add.is-added:hover {
    color: var(--color-success);
    background: var(--color-success-bg);
    border-color: var(--color-success);
    cursor: default;
}

.sale-lines-title {
    margin: 1rem 0 0.5rem;
    font-size: 1.05rem;
}

.sale-lines-empty {
    margin: 0.5rem 0 1rem;
    padding: 1rem;
    text-align: center;
    color: var(--color-grey-600);
    background: var(--color-grey-50);
    border: 1px dashed var(--color-grey-400);
    border-radius: var(--radius);
}

/* Lines as cards once the finder fills them (the product dropdown and the
   "Add another product" button stay for the no-JS page). */
.sale-form.is-stepped .sale-line-row .form-row.sale-line-product,
.sale-form.is-stepped .sale-add-line,
.sale-form.is-stepped .sale-line.is-empty {
    display: none;
}

.sale-form.is-stepped .sale-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info info" "qty qty" "money money" "install install" "remove remove";
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.sale-line-info {
    display: flex;
    grid-area: info;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sale-line-text {
    display: grid;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sale-form.is-stepped .sale-line-row {
    grid-area: qty;
    display: block;
}

.sale-form.is-stepped .sale-line-row .form-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.sale-form.is-stepped .sale-line-row label {
    margin: 0;
}

.sale-form.is-stepped .sale-line-money { grid-area: money; }

.sale-form.is-stepped .sale-line-install { grid-area: install; }

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
}

.qty-stepper-btn {
    width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    cursor: pointer;
}

.qty-stepper-btn:first-child {
    border-radius: 10px 0 0 10px;
}

.qty-stepper-btn:last-child {
    border-radius: 0 10px 10px 0;
}

.qty-stepper-btn:hover {
    background: var(--color-primary-tint);
}

.qty-stepper-btn:focus-visible {
    position: relative;
    outline: 3px solid var(--color-primary);
    outline-offset: 0;
}

.sale-form.is-stepped .qty-stepper input[type="number"] {
    width: 4rem;
    min-height: 44px;
    margin: 0;
    padding: 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--color-grey-400);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    -moz-appearance: textfield;
}

/* Remove: small, red, set apart at the bottom right. */
.sale-form.is-stepped .sale-line-remove {
    grid-area: remove;
    justify-self: end;
    margin: 0;
    padding-top: 0.5rem;
    color: var(--color-error);
    background: var(--color-white);
    border: 1px solid var(--color-error);
}

.sale-form.is-stepped .sale-line-remove:hover {
    color: var(--color-white);
    background: var(--color-error);
}

/* Payment: two big choice cards (the same payment_method radios). */
.sale-pay {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.sale-pay legend {
    margin-bottom: 0.5rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.pay-choices {
    display: grid;
    gap: 0.75rem;
}

.pay-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 44px;
    margin: 0;
    padding: 1rem;
    font-weight: normal;
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: var(--radius);
    cursor: pointer;
}

.pay-choice input[type="radio"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0.1rem 0 0;
    accent-color: var(--color-primary);
}

.pay-choice:hover {
    border-color: var(--color-primary);
}

.pay-choice:has(input:checked) {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.pay-choice:has(input:focus-visible) {
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.pay-choice-body {
    display: grid;
    gap: 0.15rem;
}

.pay-choice-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text);
}

.pay-choice-sub {
    font-size: 0.92rem;
    color: var(--color-grey-600);
}

/* The sale summary card. */
.sale-summary {
    display: grid;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.sale-summary-title {
    margin: 0;
    font-size: 1.15rem;
}

.sale-summary-block {
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-grey-200);
}

.sale-summary-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.sale-summary-value {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sale-summary-change {
    justify-self: start;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.sale-summary-change:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.sale-summary-lines li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.sale-summary-amount {
    flex: none;
    font-weight: 700;
    white-space: nowrap;
}

.sale-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-radius: var(--radius);
}

.sale-summary-total strong {
    font-size: 1.5rem;
    white-space: nowrap;
}

.sale-summary-note {
    margin: 0;
}

.sale-review-lead {
    margin: -0.25rem 0 1rem;
}

/* Recent sales: the same card look as the steps. */
.sale-card {
    padding: 1rem 1.1rem;
    border-color: var(--color-grey-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.sale-card-total {
    color: var(--color-primary-dark);
}

@media (min-width: 600px) {
    .sale-steps-name {
        display: inline;
    }

    .sale-result {
        grid-template-columns: 3.5rem minmax(0, 1fr) auto auto;
        grid-template-areas: "photo text price add";
    }

    .pay-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .sale-form.is-stepped .sale-line {
        grid-template-areas: "info info" "qty money" "install install" "remove remove";
    }

    .sale-form.is-stepped .sale-line-money {
        align-self: center;
        justify-content: flex-end;
    }
}

@media (min-width: 1024px) {
    .sale-layout {
        grid-template-columns: minmax(0, 1fr) 21rem;
    }

    .sale-summary {
        position: sticky;
        top: 1rem;
    }
}

/* ---------- Paper invoice no. + paper backup jobs ----------
   Small "invoice no. [input][Save]" rows (payment step, detail page, sales
   list, Missing list) and the "Entered from paper" marks. */

[data-paper-form] [hidden] {
    display: none !important;
}

.paper-invoice-form {
    margin: 0.75rem 0;
}

.paper-invoice-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.92rem;
    font-weight: bold;
}

.paper-invoice-row {
    display: flex;
    gap: 0.5rem;
}

.paper-invoice-row input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 14rem;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.paper-invoice-row .btn {
    flex: none;
    min-height: 44px;
    cursor: pointer;
}

.paper-invoice-admin {
    flex-basis: 100%;
}

.badge-paper {
    color: #3a1d00;
    background: #f2a93b;
    border-color: #c98219;
}

.paper-job-note {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: #fff4e5;
    border: 1px solid #f0c98a;
    border-radius: 10px;
}

.paper-job-note p {
    margin: 0.4rem 0 0;
}

.paper-changed {
    font-weight: bold;
    color: #8a2e00;
}

.paper-price-row input {
    max-width: 12rem;
}

/* ---------- Email (settings.php, migration 046) ---------- */

/* Dev mode notice: long Windows paths must wrap at 390px. */
.email-mode-note {
    padding: 0.7rem 0.9rem;
    color: #0b4a73;
    background: #eaf4fb;
    border: 1px solid #bcdcf0;
    border-radius: 3px;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.test-email-form {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e5e5;
}

.email-log-heading {
    margin: 1.5rem 0 0.5rem;
}

/* Last 50 emails: one collapsed row each (no wide table). */
.email-log {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e5e5e5;
}

.email-log-row {
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.email-log-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.email-log-status {
    font-weight: bold;
    color: #1b5e20;
}

.email-log-failed .email-log-status {
    color: #8a1c1c;
}

.email-log-queued .email-log-status,
.email-log-sending .email-log-status {
    color: #0b4a73;
}

.email-log-subject {
    margin: 0.15rem 0;
}

.email-log-error {
    margin-top: 0.25rem;
    color: #8a1c1c;
}

/* Admin "Set new password" dialogs (technicians.php, customer_detail.php). */
.password-last-set {
    margin: 0 0 0.75rem;
}

/* ==========================================================================
   PRODUCT SHOWCASE (migration 048) — home page "Aircon units we sell" and
   units.php. Information only. Every colour/size here comes from the --unit-*
   variables below, so the UI/UX redesign can restyle it in one place.
   Phone first: one card per row; 2 per row from 600px, 4 from 1024px.
   ========================================================================== */

.showcase {
    --unit-accent: #0b5ea8;
    --unit-border: #d5dbe1;
    --unit-radius: 8px;
    --unit-bg: #fff;
    --unit-photo-bg: #f5f7f9;
    --unit-muted: #5a6470;
    --unit-price: #0a3d6b;
    --unit-install-bg: #dcfce7;
    --unit-install-fg: #14532d;
    --unit-warranty-bg: #e0ecf8;
    --unit-warranty-fg: #0a3d6b;
    --unit-banner-bg: #eef5fc;
}

.showcase-intro {
    margin: 0 0 1rem;
    color: var(--unit-muted);
}

.showcase-banner {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--unit-banner-bg);
    border-left: 4px solid var(--unit-accent);
    border-radius: var(--unit-radius);
}

.showcase-banner p {
    margin: 0 0 0.5rem;
}

.showcase-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

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

.unit-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--unit-bg);
    border: 1px solid var(--unit-border);
    border-radius: var(--unit-radius);
}

/* Fixed 4:3 frame: photos never stretch the layout (width/height set too). */
.unit-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--unit-photo-bg);
}

.unit-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.unit-icon {
    width: 40%;
    color: #9aa7b4;
}

.unit-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 1rem 1rem;
}

.unit-brand {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--unit-muted);
}

.unit-model {
    margin: 0;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.unit-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--unit-muted);
}

.unit-facts li + li::before {
    content: "\00b7";
    margin-right: 0.35rem;
}

.unit-price {
    margin: 0.2rem 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--unit-price);
}

.unit-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.unit-badge {
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
}

.unit-badge-install  { color: var(--unit-install-fg);  background: var(--unit-install-bg); }
.unit-badge-warranty { color: var(--unit-warranty-fg); background: var(--unit-warranty-bg); }

.unit-price-note {
    margin: 1rem 0;
    font-size: 0.88rem;
    color: var(--unit-muted);
}

.unit-group-heading {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.1rem;
}

.showcase-contact {
    display: grid;
    gap: 0.6rem;
}

.showcase-btn {
    min-height: 44px;
    text-align: center;
}

.showcase-btn-sub {
    display: block;
    font-size: 0.8rem;
    font-weight: normal;
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.showcase-more {
    margin: 1rem 0 0;
}

/* Admin: Services & Products "Home page showcase" panel + dialog fields. */
.showcase-admin-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.showcase-admin-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e3e7eb;
}

.showcase-admin-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 48px;
    background: #f5f7f9;
    border-radius: 4px;
}

.showcase-admin-photo img {
    width: 64px;
    height: 48px;
    object-fit: contain;
}

.showcase-admin-photo .unit-icon {
    width: 70%;
}

.showcase-admin-name {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.showcase-fields {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #d5dbe1;
    border-radius: 6px;
}

.showcase-current-photo img {
    display: block;
    width: 160px;
    height: 120px;
    margin: 0.35rem 0;
    object-fit: contain;
    background: #f5f7f9;
}

@media (min-width: 600px) {
    .unit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .showcase-contact {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

@media (min-width: 1024px) {
    .unit-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---- Settings: shop logo (PDF header preview — the PDF's blue band) ---- */
.shop-logo {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #d5dbe1;
}

.shop-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
}

.shop-logo-band {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    background: #0b5ea8;
    border-radius: 8px;
}

.shop-logo-tile {
    display: block;
    width: 80px;
    height: 80px;
    padding: 4px;
    background: #fff;
    border-radius: 9px;
    object-fit: contain;
}

.shop-logo-vlm {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    color: #0b5ea8;
    font-weight: 700;
    font-size: 1.25rem;
}

.shop-logo-form {
    margin-top: 0.75rem;
}

.shop-logo-form input[type="file"] {
    max-width: 100%;
}

/* ---------- Job payment step: choices + QR Ph screen (technician_complete_job.php) ---------- */

.pay-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}

.pay-choice {
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 1px solid #d5dbe1;
    border-radius: 6px;
}

.pay-choice h4 {
    margin: 0 0 0.4rem;
}

.pay-choice form {
    margin: 0.5rem 0 0;
}

.pay-choice .btn {
    min-width: 11rem;
    min-height: 44px;
}

.pay-qr-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #555;
}

/* "Sent to shop's account": one card per receiving account (config/shop_accounts.php,
   shopAccountPickerHtml()) — job payment step + Record Sale. The whole card is the radio's label. */
.shop-account-fieldset {
    margin: 0.5rem 0 0.75rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.shop-account-fieldset legend {
    margin-bottom: 0.4rem;
    font-weight: bold;
}

.shop-account-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
}

.shop-account-card {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.8rem;
    background: #f7f9fb;
    border: 2px solid #d5dbe1;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
}

.shop-account-card input[type="radio"] {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem 0 0;
}

.shop-account-card:has(input:checked) {
    background: #eaf3fc;
    border-color: #0b5ea8;
}

.shop-account-card input:focus-visible + .shop-account-body {
    outline: 2px solid #0b5ea8;
    outline-offset: 2px;
}

.shop-account-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.shop-account-provider {
    font-size: 1.1rem;
    font-weight: bold;
    color: #0a3d6b;
}

.shop-account-number {
    font-size: 1.15rem;
    font-weight: bold;
    letter-spacing: 0.02em;
}

.shop-account-qr {
    display: block;
    width: 100%;
    max-width: 16rem;
    height: auto;
    margin-top: 0.5rem;
    background: #fff;
    border: 1px solid #d5dbe1;
    border-radius: 6px;
}

/* Record Sale: smaller QR thumbnails (admin at the counter). */
.sale-account-pick .shop-account-qr {
    max-width: 8rem;
}

#saleAccountBlock {
    margin-bottom: 0.75rem;
}

/* The QR the customer scans: as big as the phone allows, on plain white. */
.qr-pay {
    max-width: 30rem;
    margin: 0.5rem auto 1rem;
    padding: 0.75rem 0.25rem;
    text-align: center;
    background: #fff;
    border: 2px solid #0b5ea8;
    border-radius: 10px;
}

.qr-pay-amount {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    color: #0a3d6b;
}

.qr-pay-order {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.95rem;
    color: #444;
}

.qr-pay-code {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
    margin: 0 auto;
    image-rendering: pixelated;
}

.qr-pay-help {
    margin: 0.6rem 0 0.2rem;
    font-size: 0.95rem;
}

.qr-pay-timer {
    margin: 0.2rem 0;
    font-size: 1.05rem;
}

.qr-pay-status {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: #0b5ea8;
}

.qr-pay .payment-actions {
    justify-content: center;
}

.qr-pay-test {
    margin-top: 0.75rem;
    text-align: left;
}

.qr-pay-expired {
    border-color: #b3261e;
}

/* Settings > Shop receiving accounts. */
.account-list {
    list-style: none;
    margin: 0.75rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.account-row {
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 1px solid #d5dbe1;
    border-radius: 6px;
}

.account-row.is-off {
    background: #f4f4f4;
    color: #555;
}

.account-row-main {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-width: 0;
}

.account-row-qr {
    flex: 0 0 auto;
    width: 5rem;
    height: auto;
    border: 1px solid #d5dbe1;
    border-radius: 6px;
    background: #fff;
}

.account-row-noqr {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    font-size: 0.8rem;
    color: #777;
}

.account-row-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-row-provider {
    font-size: 1.05rem;
}

.account-row-number {
    font-weight: bold;
}

.account-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.account-row-actions form {
    margin: 0;
}

.account-row-actions .btn {
    min-height: 44px;
}

.account-add-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e3e7eb;
}

@media (min-width: 600px) {
    .qr-pay {
        padding: 1rem;
    }

    .shop-account-pick {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }
}

@media (min-width: 768px) {
    .pay-choices {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .pay-choice-wide {
        grid-column: 1 / -1;
    }

    .account-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    .account-row-actions {
        justify-content: flex-end;
        margin-top: 0;
        max-width: 22rem;
    }
}

/* ---------- Privacy Notice + consent (pop-up card, locked consent card, privacy.php, RA 10173) ---------- */

/* The notice: a readable line length, plain headings, no sideways scroll on phones. */
.privacy-notice {
    max-width: 46rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.privacy-notice h3 {
    margin: 1.4rem 0 0.4rem;
    font-size: 1.05rem;
}

.privacy-notice ul {
    margin: 0.3rem 0 0.6rem;
    padding-left: 1.25rem;
}

.privacy-notice li {
    margin-bottom: 0.3rem;
}

.privacy-meta {
    margin-top: 0;
    font-size: 0.88rem;
    color: #555;
}

/* The consent checkbox: long text wraps next to the box (top-aligned).
   .form-row .privacy-check beats ".form-row label" (block + bold) on register.php. */
.privacy-check,
.form-row .privacy-check {
    display: flex;
    align-items: flex-start;
    line-height: 1.45;
    font-weight: normal;
}

.privacy-check input[type="checkbox"] {
    margin-top: 0.15rem;
}

.privacy-link-note {
    margin: 0.5rem 0;
}

/* Admin reminder for a NEW walk-in (Order Entry, Record Sale). */
.privacy-walkin {
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: #f1f6fb;
    border-left: 3px solid #0b5ea8;
    border-radius: 4px;
}

.privacy-walkin .form-hint {
    margin: 0 0 0.25rem;
}

/* Customer page: one line per consent record. */
.privacy-status {
    display: block;
}

/* The notice as a card: fixed head and foot, only the notice scrolls.
   Used by the pop-up (dialog.privacy-modal, closes with X / Close / Esc /
   a click outside) and the LOCKED consent card (.privacy-gate). */
dialog.privacy-modal {
    max-width: 46rem;
    overflow: hidden;
}

.privacy-sheet {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    background: #fff;
}

.privacy-sheet-head {
    position: relative;
    flex: none;
    padding: 1rem 3rem 0.75rem 1rem;
    border-bottom: 1px solid #ddd;
}

.privacy-sheet-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.privacy-sheet-head .modal-close {
    top: 0.6rem;
    width: 2.75rem;
    height: 2.75rem;
}

.privacy-sheet-body {
    flex: 1 1 auto;
    min-height: 6rem;
    max-width: none;
    padding: 0.75rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.privacy-sheet-foot {
    flex: none;
    padding: 0.75rem 1rem;
    border-top: 1px solid #ddd;
}

/* The LOCKED card over the customer dashboard: covers the whole screen (no
   JavaScript needed), nothing closes it, the page behind can't scroll. */
.privacy-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.6);
}

.privacy-gate .privacy-sheet {
    width: 100%;
    max-width: 46rem;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.privacy-gate .privacy-sheet-head {
    padding-right: 1rem;
}

.privacy-gate-intro {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
}

.privacy-gate-form .alert {
    margin-bottom: 0.5rem;
}

.privacy-gate-form .btn {
    width: 100%;
    margin: 0.6rem 0 0.25rem;
}

.privacy-gate-logout {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

body:has(.privacy-gate),
html.privacy-locked body {
    overflow: hidden;
}

@media (min-width: 600px) {
    .privacy-gate {
        padding: 1rem;
    }

    .privacy-gate .privacy-sheet {
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
    }

    .privacy-sheet-head,
    .privacy-sheet-body,
    .privacy-sheet-foot {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .privacy-sheet-head {
        padding-right: 3.5rem;
    }

    .privacy-gate .privacy-sheet-head {
        padding-right: 1.5rem;
    }

    .privacy-gate-form .btn {
        width: auto;
    }
}

/* ---------- Friendly error pages (config/errors.php showErrorPage(), error.php) ---------- */

.error-page {
    max-width: 36rem;
    margin: 1rem auto;
    padding: 1.5rem 1rem;
    text-align: center;
}

.error-page h2 {
    margin: 0.25rem 0 0.75rem;
    font-size: 1.5rem;
}

.error-page p {
    line-height: 1.55;
}

.error-page-code {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #555;
}

.error-page-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

@media (min-width: 600px) {
    .error-page {
        margin: 2.5rem auto;
        padding: 2rem;
    }

    .error-page-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ---------- Teams page: Edit Team, Inactive teams, history (2026-10-06) ----------
   Mobile-first: heading and the Edit button stack; members are cards below
   768px (.data-table.catalog-table), so nothing scrolls sideways at 390px. */
.team-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.team-head-main {
    min-width: 0;
}

.team-title {
    margin: 0;
    overflow-wrap: anywhere;
}

.team-panel.is-inactive {
    background: #f6f7f8;
}

.team-inactive-note {
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.88rem;
    color: #5b3a00;
    background: #fff4dc;
    border: 1px solid #e6c98a;
    border-radius: 4px;
}

.team-history {
    margin-top: 0.75rem;
    font-size: 0.88rem;
}

.team-history summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #0b4f8a;
}

.team-history ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

.team-history li {
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.team-history-when {
    color: #555;
}

.team-status-choice {
    border: 0;
    padding: 0;
    margin: 0 0 0.75rem;
}

.team-status-choice legend {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

/* No team box, Show archived switch, Delete / Archive on an empty team (057). */
.no-team-box {
    border-left: 4px solid #e6c98a;
}

.archived-switch {
    margin: 0 0 0.5rem;
}

.empty-team-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.empty-team-actions form {
    margin: 0;
}

.archived-heading {
    margin-top: 1.5rem;
}

/* ---------- Teams page member rows (2026-10-08): status pill, solo switch,
   Edit + "More" menu. Phones: cards (.catalog-table); from 768px one line. */
.team-flash {
    margin: 0.25rem 0 0.75rem;
}

.status-quick-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

/* Status dropdown styled as the status pill: same colors as .badge-active /
   -onleave / -inactive, word always visible, darker borders (3:1 on white). */
.status-select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 44px;
    padding: 0.35rem 2.2rem 0.35rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.2;
    border: 1px solid;
    border-radius: 999px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
}

.status-select-active   { color: #1b5e20; background-color: #e6f4e6; border-color: #2e7d32; }
.status-select-onleave  { color: #7a4b00; background-color: #fdf0d5; border-color: #9a6700; }
.status-select-inactive { color: #4a4f55; background-color: #e4e6e8; border-color: #6b7178; }

.status-select:hover {
    filter: brightness(0.97);
}

.status-select:focus-visible {
    outline: 3px solid #0b5cad;
    outline-offset: 2px;
}

.status-select option {
    color: #1f2933;
    background: #fff;
}

.member-solo .toggle-form,
.member-solo .toggle-row {
    margin: 0;
}

/* "More" menu: without JS the items are a plain list of links (the toggle
   button stays hidden); main.js adds .is-enhanced and shows the button. */
.row-menu {
    position: relative;
    display: inline-block;
}

.row-menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.9rem;
}

.row-menu-item {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #0b5cad;
    font-weight: bold;
}

.row-menu-item-danger {
    color: #a3261b;
}

/* A POST action in the menu (e.g. Make one-person team) is a <button> in its
   own form: make it look exactly like the link items. */
.row-menu-form {
    margin: 0;
}

button.row-menu-item {
    padding: 0;
    font: inherit;
    font-weight: bold;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.row-menu.is-enhanced .row-menu-form {
    width: 100%;
}

.row-menu-item:focus-visible {
    outline: 3px solid #0b5cad;
    outline-offset: 2px;
}

/* .btn display rules must not un-hide the button before main.js runs. */
.tech-rows .member-actions .row-menu-toggle[hidden] {
    display: none;
}

.row-menu-toggle:focus-visible {
    outline: 3px solid #0b5cad;
    outline-offset: 2px;
}

.row-menu-toggle[aria-expanded="true"] {
    background: #e3effa;
}

.row-menu.is-enhanced .row-menu-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;    /* phones: the button sits at the card's left edge */
    z-index: 30;
    flex-direction: column;
    min-width: 12rem;
    padding: 0.3rem 0;
    background: #fff;
    border: 1px solid #b8c2cc;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 30, 45, 0.18);
}

.row-menu.is-enhanced.is-open .row-menu-list {
    display: flex;
}

.row-menu.is-enhanced .row-menu-item {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 1rem;
    color: #1f2933;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}

.row-menu.is-enhanced .row-menu-item-danger {
    margin-top: 0.3rem;
    padding-top: 0.75rem;
    color: #a3261b;
    border-top: 1px solid #e1e5ea;
}

.row-menu.is-enhanced .row-menu-item:hover,
.row-menu.is-enhanced .row-menu-item:focus-visible {
    background: #eef3f8;
}

.row-menu.is-enhanced .row-menu-item:focus-visible {
    outline-offset: -3px;
}

/* Phones: a card per member; the switch shows its own label. */
.data-table.catalog-table td.member-solo {
    padding-left: 0;
}

.data-table.catalog-table td.member-actions {
    align-items: center;
}

.tech-rows .member-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* A row's message, right under it (technicians.php). */
.data-table.catalog-table tr.row-flash {
    margin-top: -0.4rem;
    padding: 0;
    background: transparent;
    border: 0;
}

.data-table.catalog-table tr.row-flash td {
    padding: 0;
}

.row-flash .team-flash a {
    margin-left: 0.4rem;
    font-weight: bold;
}

/* ---------- Team header (teams.php, 2026-10-08): name + pencil (rename in
   place), Active switch. ---------- */
.team-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
}

.team-title-row .team-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    margin: 0;
}

.team-title-row .team-title[hidden],
.team-rename-form[hidden] {
    display: none;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    color: #0b5ea8;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
}

.icon-btn:hover {
    background: #eaf2fa;
    border-color: #9cc3e8;
}

.icon-btn:focus-visible {
    outline: 3px solid #0b5cad;
    outline-offset: 2px;
}

.team-rename-form {
    display: flex;
    flex: 1 1 18rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.team-rename-input {
    box-sizing: border-box;
    flex: 1 1 12rem;
    max-width: 22rem;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-size: 1rem;
    font-weight: bold;
    border: 1px solid #6b7178;
    border-radius: 4px;
}

.team-rename-input:focus-visible {
    outline: 3px solid #0b5cad;
    outline-offset: 1px;
}

.team-rename-input[aria-invalid="true"] {
    border-color: #a3261b;
}

.team-rename-form .btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.team-rename-error {
    flex-basis: 100%;
    margin: 0;
    color: #a3261b;
    font-weight: bold;
}

.team-status-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.team-status-form .toggle-row {
    margin: 0;
}

/* The visible word (Active / Inactive) is the switch's own On/Off word. */
.team-status-form .toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .tech-rows .member-col-name    { width: 24%; }
    .tech-rows .member-col-role,
    .tech-rows .member-col-team    { width: 17%; }
    .tech-rows-noteam .member-col-name { width: 41%; }

    .data-table.catalog-table tr.row-flash td {
        padding: 0 0.5rem 0.5rem;
    }
    .tech-rows .member-col-status  { width: 19%; }
    .tech-rows .member-col-solo    { width: 17%; }
    .tech-rows .member-col-actions { width: 23%; }

    .data-table.catalog-table.tech-rows td {
        vertical-align: middle;
    }

    .data-table.catalog-table.tech-rows td.member-actions {
        white-space: nowrap;
    }

    /* Desktop: the Actions column is at the right — open the menu leftward. */
    .row-menu.is-enhanced .row-menu-list {
        right: 0;
        left: auto;
    }

    .tech-rows .member-actions .btn {
        display: inline-flex;
        align-items: center;
        width: auto;
        min-height: 40px;
        margin: 0 0.35rem 0 0;
        padding-right: 0.9rem;
        padding-left: 0.9rem;
        vertical-align: middle;
    }

    .tech-rows .status-select {
        min-height: 40px;
    }

    /* The column header already says "Can work solo": keep the label for
       screen readers only, show the switch + On/Off. */
    .tech-rows .member-solo .toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.team-release {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #fff8e6;
    border: 1px solid #e6c98a;
    border-radius: 4px;
}

.team-release ul {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.1rem;
}

@media (min-width: 600px) {
    .team-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

/* Radio/checkbox rows in the Edit Team dialog: beat ".form-row label"
   (block + bold) so each control sits beside its text. */
.form-row.team-status-choice .check-inline,
.team-release .check-inline {
    display: flex;
    font-weight: normal;
    margin-bottom: 0;
}

/* ---------- Toggle switch (toggleSwitchHtml(), config/helpers.php) ----------
   ONE look for every On/Off setting. A real checkbox (role="switch") sits
   invisibly on top of the track: Tab focuses it, Space flips it, a click on
   the label or the track flips it, and it posts like any checkbox without JS.
   The "On"/"Off" word comes from the data attributes below. */
.toggle-row {
    margin: 0.25rem 0 0.75rem;
}

.toggle,
.form-row label.toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.toggle-input {
    position: absolute;
    left: 0;
    top: 50%;
    width: 52px;
    height: 32px;
    margin: -16px 0 0 0;
    opacity: 0;
    cursor: pointer;
}

.toggle-track {
    position: relative;
    flex: none;
    width: 52px;
    height: 32px;
    border-radius: 16px;
    background: #7d8995;
    transition: background-color 0.15s;
}

.toggle-track::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s;
}

.toggle-input:checked + .toggle-track {
    background: #0b5ea8;
}

.toggle-input:checked + .toggle-track::after {
    transform: translateX(20px);
}

.toggle-input:focus-visible + .toggle-track {
    outline: 3px solid #f2a900;
    outline-offset: 2px;
}

.toggle-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    line-height: 1.3;
}

.toggle-label {
    font-weight: bold;
    font-size: 0.95rem;
}

.toggle-state {
    font-size: 0.85rem;
    font-weight: bold;
    color: #5b6670;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.toggle-state::before {
    content: attr(data-off);
}

.toggle-input:checked ~ .toggle-text .toggle-state {
    color: #0b5ea8;
}

.toggle-input:checked ~ .toggle-text .toggle-state::before {
    content: attr(data-on);
}

.toggle-row .form-hint {
    display: block;
    margin-top: 0.15rem;
}

.toggle-row.is-disabled .toggle {
    cursor: not-allowed;
    opacity: 0.55;
}

.toggle-row.is-disabled .toggle-input {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .toggle-track,
    .toggle-track::after {
        transition: none;
    }
}

/* A toggle that saves at once (toggleFormHtml(): list rows, accounts). */
.toggle-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.toggle-form .toggle-row {
    margin: 0;
}

/* ---------- "Verify your email" banner (migration 056) ---------- */
.verify-banner {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    color: #5c3b00;
    background: #fdf3dd;
    border: 1px solid #e6c98a;
    border-radius: 4px;
}

.verify-banner-text {
    display: grid;
    gap: 0.2rem;
}

.verify-banner-form {
    margin: 0;
}

.verify-banner-form .btn {
    min-height: 44px;
}

@media (min-width: 600px) {
    .verify-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .verify-banner-form {
        flex: none;
    }
}

.email-verify-note,
.email-verify-limit {
    display: block;
    margin: 0.2rem 0;
}

/* Hourly limit reached: replaces the banner's button; same dark text as the banner. */
.verify-banner .verify-banner-limit {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
}

@media (min-width: 600px) {
    .verify-banner .verify-banner-limit {
        max-width: 18rem;
    }
}

.inline-form {
    display: inline;
    margin: 0;
}

.email-log-skipped .email-log-status {
    color: #6b5200;
}

/* ==========================================================================
   PUBLIC WEBSITE (UI/UX rounds 1 + 1.5, 2026-10-09)
   Home, See all units, lookup.php, customer login, register, forgot
   password. Every rule is under body.public-site (or a class only these
   pages print), so admin, technician and logged-in customer pages are not
   touched. Markup: views/_public_header.php, _public_parts.php,
   _public_footer.php. Colours: the tokens in :root (top of this file).
   ONE page width (1200px) and ONE type scale for every section.
   Phone first; 600 / 768 / 1024.
   Contrast notes: white on the hero overlay >= 5.8:1 (overlay is at least
   70% navy wherever text sits, even over the white wall); white on navy
   14.9:1; white on the blue band 7.0:1; sky-blue icons on navy 6.2:1.
   ========================================================================== */

.public-site {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-white);
}

.public-site .container {
    max-width: 1200px;
    padding: 0 1.25rem;
}

.public-site h1,
.public-site h2,
.public-site h3 {
    color: var(--color-text);
    line-height: 1.2;
}

.public-site a {
    color: var(--color-primary);
}

.public-site a:hover {
    color: var(--color-primary-dark);
}

/* One visible keyboard focus ring everywhere (white on dark/blue areas). */
.public-site a:focus-visible,
.public-site button:focus-visible,
.public-site input:focus-visible,
.public-site select:focus-visible,
.public-site textarea:focus-visible,
.public-site summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.public-site .top-strip a:focus-visible,
.public-site .public-hero a:focus-visible,
.public-site .warranty-band a:focus-visible,
.public-site .status-band-section a:focus-visible,
.public-site .public-footer a:focus-visible,
.public-site .site-footer a:focus-visible,
.public-site .site-footer button:focus-visible {
    outline-color: var(--color-white);
}

.public-site img {
    max-width: 100%;
    height: auto;
}

.public-site .icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

/* "Skip to main content": only shows when reached with the keyboard. */
.public-site .skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-radius: var(--radius);
}

.public-site .skip-link:focus {
    top: 0.5rem;
    color: var(--color-white);
}

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

.public-site .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--color-white);
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    cursor: pointer;
}

.public-site .btn:hover,
.public-site .btn:focus {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.public-site .btn-sm {
    padding: 0.45rem 0.95rem;
    font-size: 0.94rem;
}

.public-site .btn-lg {
    min-height: 52px;
    padding: 0.85rem 1.75rem;
    font-size: 1.0625rem;
}

/* Secondary buttons on light backgrounds: outlined in the brand colour. */
.public-site .btn-ghost,
.public-site .btn-secondary {
    color: var(--color-primary);
    background: var(--color-white);
    border-color: var(--color-primary);
}

.public-site .btn-ghost:hover,
.public-site .btn-ghost:focus,
.public-site .btn-secondary:hover,
.public-site .btn-secondary:focus {
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-color: var(--color-primary-dark);
}

/* On dark / blue areas: white filled (main) and white outline (second). */
.public-site .btn-hero,
.public-site .btn-on-blue {
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-color: var(--color-white);
}

.public-site .btn-hero:hover,
.public-site .btn-hero:focus,
.public-site .btn-on-blue:hover,
.public-site .btn-on-blue:focus {
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-color: var(--color-primary-tint);
}

.public-site .btn-hero-outline {
    color: var(--color-white);
    background: transparent;
    border-color: var(--color-white);
}

.public-site .btn-hero-outline:hover,
.public-site .btn-hero-outline:focus {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--color-white);
}

/* Call / Visit / Facebook buttons keep their second line under the label. */
.public-site .showcase-btn {
    flex-direction: column;
    gap: 0;
}

.public-site .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
}

.public-site .text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.public-site .text-link .icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------- Top strip (shop phone | Book a Service, Track my order) ---------- */

.top-strip {
    color: var(--color-white);
    background: var(--color-primary);
    font-size: 0.9rem;
}

.top-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1rem;
}

.top-strip p {
    margin: 0;
}

.public-site .top-strip a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
}

.public-site .top-strip a:hover,
.public-site .top-strip a[aria-current="page"] {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.top-strip-label {
    display: none;
    color: var(--color-on-dark-muted);
}

.top-strip-links {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- White menu bar ---------- */

.public-site .site-header {
    padding: 0.6rem 0;
    color: var(--color-text);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-grey-200);
    box-shadow: var(--shadow-sm);
}

/* Phone: logo + name | Menu on the first row, account buttons under it,
   the links fold open below. From 1024 everything sits on one row. */
.public-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand toggle"
        "auth  auth"
        "nav   nav";
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.public-site .public-brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 44px;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.public-logo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.public-brand-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.public-site .nav-toggle {
    grid-area: toggle;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
}

.public-site .nav-toggle[aria-expanded="true"] {
    background: var(--color-primary-tint);
}

.public-site .main-nav {
    grid-area: nav;
    margin: 0;
}

.public-site .main-nav li {
    border-top: 1px solid var(--color-grey-200);
}

.public-site .main-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 0.25rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.public-site .main-nav a:hover,
.public-site .main-nav a:focus,
.public-site .main-nav a[aria-current="page"] {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.public-site .auth-links {
    grid-area: auth;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.public-site .auth-greeting {
    margin-right: auto;
    font-size: 0.94rem;
    color: var(--color-grey-600);
}

.public-site .auth-links .btn-ghost[aria-current="page"] {
    background: var(--color-primary-tint);
}

.public-site .auth-links .btn:not(.btn-ghost)[aria-current="page"] {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* ---------- Sections: one width, one type scale ---------- */

.public-flash {
    margin-top: 1rem;
}

.public-site .alert {
    border-radius: var(--radius);
    font-size: 1rem;
}

.public-section {
    padding: 3.5rem 0;
    font-size: 1.0625rem;
}

.public-site .section-alt {
    background: var(--color-grey-50);
}

/* Every section heading is the same size (no shrinking further down). */
.public-site .section-head h2,
.public-site .brands-title,
.public-site .warranty-title,
.public-site .status-band h2 {
    margin: 0 0 0.6rem;
    font-size: 1.75rem;
    font-weight: 800;
}

.public-site .section-head {
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.public-site .section-head p {
    margin: 0;
    font-size: 1.125rem;
    color: var(--color-grey-600);
}

.public-site .public-section h3 {
    font-size: 1.375rem;
}

.page-title {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    font-weight: 800;
}

.page-back {
    margin: 0 0 0.5rem;
    font-size: 0.94rem;
}

.public-site .page-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
}

.public-site .page-back a:hover {
    text-decoration: underline;
}

/* ---------- Hero: full-width photo, navy overlay, white text ---------- */

.public-site .public-hero {
    display: flex;
    align-items: center;
    min-height: 520px;
    padding: 4rem 0;
    color: var(--color-white);
    background-color: var(--color-primary-dark);
    background-image:
        linear-gradient(180deg, rgba(1, 36, 92, 0.72) 0%, rgba(1, 36, 92, 0.88) 100%),
        url("../img/bg/hero-heat.webp");
    background-repeat: no-repeat;
    background-position: center, 62% center;
    background-size: cover, cover;
    border-bottom: 0;
}

.public-site .public-hero > .container {
    width: 100%;
}

.hero-text {
    max-width: 36rem;
}

.public-site .hero-title {
    margin: 0 0 1rem;
    color: var(--color-white);
    line-height: 1.1;
}

.hero-title-main {
    display: block;
    font-size: 2.75rem;
    font-weight: 800;
}

.hero-title-sub {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
}

.public-site .hero-lead {
    margin: 0 0 2rem;
    font-size: 1.1875rem;
    color: var(--color-white);
}

.public-site .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

.public-site .hero-actions .btn {
    flex: 1 1 100%;
}

/* ONE small fade-in on the hero text; nothing else moves. */
@media (prefers-reduced-motion: no-preference) {
    .public-site .hero-text {
        animation: hero-fade-in 0.6s ease-out both;
    }
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* ---------- Services: photo rows, alternating sides ---------- */

.public-site .service-rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
}

.public-site .service-row {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.public-site .service-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-grey-50);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.public-site .service-card-body h3 {
    margin: 0 0 0.6rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.public-site .service-card-body p {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    color: var(--color-grey-600);
}

/* ---------- Brands we carry ---------- */

.public-site .brands-section {
    padding: 3rem 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-grey-200);
}

.public-site .brands-title {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand-item {
    display: flex;
    align-items: center;
    height: 36px;
}

.public-site .brand-item img {
    width: auto;
    height: 36px;
    max-width: 120px;
    object-fit: contain;
}

/* A brand we have no logo file for: its name, same height. */
.brand-item-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

/* ---------- Warranty band (navy) ---------- */

.warranty-band {
    padding: 3.5rem 0;
    color: var(--color-white);
    background: var(--color-primary-dark);
    text-align: center;
}

.public-site .warranty-title {
    color: var(--color-white);
    margin-bottom: 2rem;
}

.warranty-band .warranty-list {
    display: grid;
    gap: 1.75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.warranty-band .warranty-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.public-site .warranty-band .warranty-item .icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.25rem;
    color: var(--color-accent);
}

.warranty-band .warranty-years {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.warranty-band .warranty-label {
    font-size: 1.125rem;
    color: var(--color-on-dark-muted);
}

.warranty-band .warranty-note {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--color-on-dark-muted);
}

/* Slim one-line version (See all units). */
.warranty-slim {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-primary-tint);
    border-radius: var(--radius);
}

.public-site .warranty-slim .icon {
    margin-top: 0.1rem;
    color: var(--color-primary);
}

/* ---------- Products ---------- */

.public-site .showcase {
    --unit-accent: var(--color-primary);
    --unit-border: var(--color-grey-200);
    --unit-radius: var(--radius-lg);
    --unit-bg: var(--color-white);
    --unit-photo-bg: var(--color-white);
    --unit-muted: var(--color-grey-600);
    --unit-price: var(--color-primary-dark);
}

.public-site .showcase-intro {
    color: var(--color-grey-600);
}

.public-site .unit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.public-site .unit-card {
    box-shadow: var(--shadow-sm);
}

.public-site .unit-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--color-grey-200);
}

/* Every picture box is the same square (photos are square, white). */
.public-site .unit-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.public-site .unit-body {
    gap: 0.35rem;
    padding: 0.75rem 0.8rem 1rem;
}

.public-site .unit-model {
    font-size: 1rem;
}

.public-site .unit-price {
    font-size: 1.2rem;
    font-weight: 800;
}

.public-site .unit-badge {
    font-size: 0.8rem;
}

/* No photo: brand + HP in large text on a light blue panel. */
.unit-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    text-align: center;
    background: var(--color-primary-tint);
}

.unit-ph-brand {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    overflow-wrap: anywhere;
}

.unit-ph-cap {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary);
}

.unit-ph-type {
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.public-site .unit-price-note {
    font-size: 0.94rem;
    text-align: center;
}

/* Call us / Message us on Facebook / See all units, together. */
.products-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.public-site .products-actions .showcase-contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.public-site .products-actions .showcase-more {
    margin: 0;
}

.public-site .products-actions .btn {
    width: 100%;
    min-height: 56px;
}

/* ---------- How it works: 4 connected steps ---------- */

.steps {
    position: relative;
    display: grid;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The thin line joining the steps (down the left on phones). */
.steps::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    left: 1.75rem;
    width: 2px;
    background: var(--color-grey-200);
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-areas:
        "badge title"
        "badge text";
    column-gap: 1rem;
    align-content: start;
}

.step-badge {
    grid-area: badge;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-grey-200);
}

.step-num {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
}

.public-site .step h3 {
    grid-area: title;
    margin: 0.35rem 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.step p {
    grid-area: text;
    margin: 0;
    color: var(--color-grey-600);
}

/* ---------- Check Service Status: blue band ---------- */

.status-band-section {
    padding: 3rem 0;
    font-size: 1.0625rem;
    color: var(--color-white);
    background: var(--color-primary);
}

.status-band {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.public-site .status-band h2 {
    color: var(--color-white);
}

.status-band-text p {
    margin: 0;
    max-width: 44rem;
    color: var(--color-white);
}

/* ---------- Contact: details + map / visit card ---------- */

.contact-layout {
    display: grid;
    gap: 1.5rem;
}

.contact-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

.contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-label {
    font-size: 0.94rem;
    color: var(--color-grey-600);
}

.public-site .contact-text a,
.contact-text > span:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.125rem;
    font-weight: 700;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
    border-radius: var(--radius-lg);
}

.contact-visit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 2rem 1.5rem;
    background: var(--color-primary-tint);
    border-radius: var(--radius-lg);
}

.contact-visit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
}

.public-site .contact-visit h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.contact-visit p {
    margin: 0 0 0.5rem;
}

/* ---------- Footer: 3 columns + copyright bar ---------- */

.public-footer {
    padding: 3rem 0 2rem;
    font-size: 1rem;
    color: var(--color-on-dark-muted);
    background: var(--color-primary-dark);
}

.public-footer-cols {
    display: grid;
    gap: 2rem;
}

.public-footer p {
    margin: 0 0 0.5rem;
}

.public-footer-name {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-white);
}

.public-site .public-footer-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-white);
}

.public-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-site .public-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.public-site .public-footer a:hover {
    color: var(--color-on-dark-muted);
}

/* shopFooterHtml(): only its copyright line shows here (the contact lines
   and links are in the columns above). */
.public-site .site-footer {
    padding: 1.25rem 0;
    font-size: 0.875rem;
    color: var(--color-on-dark-muted);
    background: var(--color-primary-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.public-site .site-footer p {
    margin: 0;
}

.public-site .public-footer + .site-footer .footer-contact {
    display: none;
}

/* ---------- Login / register / forgot password / lookup: one centred card ---------- */

.public-site .auth-page {
    padding: 2rem 0 3rem;
    background: var(--color-grey-50);
}

.public-site .auth-page .section {
    padding: 0;
}

.public-site .auth-page .section + .section {
    padding-top: 1.5rem;
}

.public-site .auth-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.public-site .auth-card-wide {
    max-width: 680px;
}

.public-site .auth-card .form-row {
    margin-bottom: 1.1rem;
}

.public-site .auth-card .form-row label,
.public-site .auth-card legend {
    margin-bottom: 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.public-site .auth-card .form-row .privacy-check {
    font-weight: normal;
}

.public-site input::placeholder,
.public-site textarea::placeholder {
    color: var(--color-grey-600);
    opacity: 1;
}

.public-site .auth-card .form-row input:not([type="checkbox"]):not([type="radio"]),
.public-site .auth-card .form-row textarea,
.public-site .auth-card .form-row select {
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
    color: var(--color-text);
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site .auth-card .form-row input:focus,
.public-site .auth-card .form-row textarea:focus,
.public-site .auth-card .form-row select:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
}

.public-site .auth-card .form-hint {
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

.public-site .auth-card .form-block {
    margin: 0 0 1.1rem;
    padding: 1rem;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
}

/* The main button fills the card (register's Yes / No stack the same way). */
.public-site .auth-card form .btn[type="submit"] {
    width: 100%;
    min-height: 50px;
    margin-top: 0.25rem;
    font-size: 1.06rem;
}

.public-site .auth-card form .btn[type="submit"] + .btn[type="submit"] {
    margin-top: 0.6rem;
}

.public-site .privacy-check input[type="checkbox"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0.1rem 0.6rem 0 0;
}

.public-site .auth-alt {
    font-size: 0.97rem;
}

.public-site .auth-card .alert {
    margin-bottom: 1.1rem;
}

/* lookup.php: the order details card under the form. */
.public-site .auth-page .section-alt {
    background: transparent;
}

.public-site .auth-page .section-alt > .container {
    width: auto;
    max-width: 720px;
    margin: 0 1rem;
    padding: 1.5rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow-wrap: anywhere;
}

/* ---------- See all units ---------- */

.public-site .units-page {
    padding-top: 1.5rem;
}

.public-site .search-field input {
    min-height: 48px;
    border-color: var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site .unit-group-heading {
    margin: 2rem 0 1rem;
    font-size: 1.375rem;
    font-weight: 800;
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .top-strip-label {
        display: inline;
    }

    .public-brand-name {
        font-size: 1.1rem;
    }

    .public-site .hero-actions .btn {
        flex: 0 0 auto;
    }

    .public-site .unit-grid {
        gap: 1.25rem;
    }

    .public-site .unit-body {
        padding: 1rem 1.25rem 1.25rem;
    }

    .public-site .unit-model {
        font-size: 1.125rem;
    }

    .public-site .unit-price {
        font-size: 1.5rem;
    }

    .unit-ph-brand {
        font-size: 1.5rem;
    }

    .unit-ph-cap {
        font-size: 2.5rem;
    }

    .public-site .brand-item,
    .public-site .brand-item img {
        height: 44px;
    }

    .public-site .brand-item img {
        max-width: 150px;
    }

    .warranty-band .warranty-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .products-actions,
    .public-site .products-actions .showcase-contact {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .public-site .products-actions .btn {
        width: auto;
        min-width: 14rem;
    }

    .public-site .auth-card {
        padding: 2rem 2.25rem;
    }

    .public-site .auth-page .section-alt > .container {
        padding: 2rem 2.25rem;
    }

    .public-site .auth-page {
        padding: 3rem 0 4rem;
    }
}

/* ---------- 768px ---------- */

@media (min-width: 768px) {
    .public-section {
        padding: 5rem 0;
    }

    .public-site .section-head h2,
    .public-site .brands-title,
    .public-site .warranty-title,
    .public-site .status-band h2,
    .page-title {
        font-size: 2.25rem;
    }

    .public-site .public-hero {
        min-height: 560px;
    }

    .hero-title-main {
        font-size: 3.5rem;
    }

    .hero-title-sub {
        font-size: 2rem;
    }

    /* Photo rows: picture and text side by side, every other row flipped. */
    .public-site .service-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }

    .public-site .service-row:nth-child(even) .service-card-img {
        order: 2;
    }

    .public-site .service-card-body h3 {
        font-size: 1.875rem;
    }

    .warranty-band,
    .status-band-section {
        padding: 4.5rem 0;
    }

    .warranty-band .warranty-years {
        font-size: 3rem;
    }

    .status-band {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
    }

    .public-site .status-band .btn {
        flex: none;
    }

    .contact-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 2rem;
    }

    .contact-visit {
        padding: 2.5rem 2rem;
    }

    .public-footer-cols {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .public-site .auth-page .section-alt > .container {
        margin: 0 auto;
    }
}

/* ---------- 1024px ---------- */

@media (min-width: 1024px) {
    .public-header-inner {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav auth";
        gap: 1.5rem;
    }

    .public-brand-name {
        max-width: 14rem;
    }

    .public-site .main-nav,
    .public-site .main-nav.open {
        display: flex;
        justify-content: center;
    }

    .public-site .main-nav ul {
        gap: 1.75rem;
    }

    .public-site .main-nav li {
        border-top: 0;
    }

    .public-site .main-nav a {
        min-height: 44px;
        padding: 0;
        white-space: nowrap;
    }

    /* The full name would squeeze the links; My Account / Log Out stay. */
    .public-site .auth-greeting {
        display: none;
    }

    /* Desktop hero: 85% of the screen tall; navy on the left fading to
       clear on the right. The text stays in the left half, where the
       overlay is at least 70% navy. */
    .public-site .public-hero {
        min-height: min(85vh, 860px);
        background-image:
            linear-gradient(90deg, rgba(1, 36, 92, 0.92) 0%, rgba(1, 36, 92, 0.85) 40%, rgba(1, 36, 92, 0.72) 52%, rgba(1, 36, 92, 0) 80%),
            url("../img/bg/hero-heat.webp");
        background-position: center, center;
    }

    .hero-text {
        max-width: min(38rem, calc(50vw - 3rem));
    }

    .hero-title-main {
        font-size: 4rem;
    }

    .public-site .unit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    /* Tighter spacing: one row on wide screens, two centred rows at 1024. */
    .brand-strip {
        gap: 1.5rem 2rem;
    }

    .public-site .brand-item,
    .public-site .brand-item img {
        height: 40px;
    }

    .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }

    /* Across the top on desktop, through the middle of the icons. */
    .steps::before {
        top: 1.75rem;
        bottom: auto;
        left: 12.5%;
        right: 12.5%;
        width: auto;
        height: 2px;
    }

    .step {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "badge"
            "title"
            "text";
        justify-items: center;
        text-align: center;
    }

    .public-site .step h3 {
        margin-top: 1rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .public-site .btn,
    .public-site .main-nav a {
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
}

/* ==========================================================================
   PUBLIC WEBSITE round 1.6 (2026-10-09): See all units filters (brand
   chips, type/size pills, phone Filters panel), one card per model with
   size buttons, and a shorter phone home page. All under body.public-site.
   Selected states never rely on colour alone: a checkmark shows too.
   Contrast: white on primary 7.0:1; primary borders on white 7.0:1;
   grey-400 control borders on white 3.2:1.
   ========================================================================== */

/* Elements switched by main.js with the hidden attribute stay hidden even
   when a rule here gives them a display value. */
.public-site [hidden] {
    display: none !important;
}

/* ---------- Brand rows: one row that scrolls sideways on phones ---------- */

.public-site .brand-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    /* A soft fade at the right edge says "there is more". */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
}

.public-site .brand-scroll .brand-strip,
.public-site .brand-filter-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    margin: 0;
    padding: 0.35rem 2.5rem 0.5rem 0.35rem;
    list-style: none;
}

.public-site .brand-scroll .brand-strip {
    gap: 2rem;
}

/* Items size to their 44px link (the logo height is set on the img). */
.public-site .brand-item {
    height: auto;
}

.public-site .brand-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius);
}

.public-site .brand-link:hover {
    background: var(--color-grey-50);
}

.public-site .brand-item-text .brand-link {
    font-size: 1.5rem;
    font-weight: 800;
}

/* See all units: brand chips */
.brand-filter {
    margin: 0 0 1rem;
}

.public-site .brand-filter-list {
    gap: 0.6rem;
}

.public-site .brand-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 56px;
    min-width: 92px;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site .brand-chip img {
    width: auto;
    height: 28px;
    max-width: 100px;
    object-fit: contain;
}

.public-site .brand-chip:hover {
    border-color: var(--color-primary);
}

.public-site .brand-chip .icon-check {
    display: none;
}

/* Picked: thick blue outline, light tint, and a check badge. */
.public-site .brand-chip.is-selected {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.public-site .brand-chip.is-selected .icon-check {
    position: absolute;
    top: -0.55rem;
    right: -0.55rem;
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.15rem;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
    stroke-width: 3;
}

/* ---------- Type / size pills + the phone Filters panel ---------- */

.public-site .filters-toggle {
    width: 100%;
    margin: 0 0 1rem;
}

.unit-filters {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

/* With JS on a phone the pills fold into a panel opened by "Filters". */
.public-site .unit-filters.js-panel:not(.is-open) {
    display: none;
}

.public-site .unit-filters.js-panel.is-open {
    padding: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.pill-group-label {
    flex: 0 0 100%;
    font-weight: 700;
}

.public-site .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 1rem;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: 999px;
}

.public-site .pill:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

.public-site .pill .icon-check {
    display: none;
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 3;
}

.public-site .pill.is-selected {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.public-site .pill.is-selected .icon-check {
    display: block;
}

.filters-panel-actions {
    display: none;
}

.public-site .unit-filters.js-panel .filters-panel-actions {
    display: flex;
    gap: 0.6rem;
    padding-top: 0.25rem;
}

.public-site .filters-panel-actions .btn {
    flex: 1 1 0;
}

/* "X units found" + Clear filters, and the no-match box */
.units-found {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.5rem;
}

.public-site .units-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
}

.public-site .units-empty {
    padding: 2rem 1rem;
    text-align: center;
    background: var(--color-primary-tint);
    border: 0;
    border-radius: var(--radius-lg);
}

.public-site .units-empty p {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* ---------- Compact unit cards (feature line) ---------- */

.public-site .unit-feature {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
}





/* Picked size: filled blue + a check mark (not colour alone). */




/* ---------- Shorter phone home page (phone values; 768 puts them back) ---------- */

.public-site .service-rows {
    gap: 1.75rem;
}

.public-site .service-row {
    gap: 0.75rem;
}

.public-site .service-card-img {
    aspect-ratio: 2 / 1;
}

.public-site .service-card-body h3 {
    margin-bottom: 0.3rem;
    font-size: 1.25rem;
}

.public-site .service-card-body p {
    margin-bottom: 0;
    font-size: 1rem;
}

.public-site .section-head {
    margin-bottom: 1.5rem;
}

.public-section {
    padding: 2.5rem 0;
}

.public-site .brands-section {
    padding: 2rem 0;
}

.public-site .brands-title {
    margin-bottom: 1rem;
}

/* Warranty: the three numbers side by side on phones too. */
.warranty-band {
    padding: 2.5rem 0;
}

.warranty-band .warranty-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.public-site .warranty-band .warranty-item .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.warranty-band .warranty-years {
    font-size: 1.5rem;
}

.warranty-band .warranty-label {
    font-size: 0.9rem;
}

.warranty-band .warranty-note {
    font-size: 0.94rem;
}

.steps {
    gap: 1.25rem;
}

.status-band-section {
    padding: 2.5rem 0;
}

.contact-item {
    padding: 0.6rem 1rem;
}

.contact-visit {
    padding: 1.5rem 1.25rem;
}

/* Footer: links in two columns on phones. */
.public-footer {
    padding: 2.25rem 0 1.5rem;
}

.public-footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

.public-footer-cols > .public-footer-col:first-child {
    grid-column: 1 / -1;
}

/* ---------- 768px: everything visible, logos wrap ---------- */

@media (min-width: 768px) {
    .public-site .brand-scroll {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .public-site .brand-scroll .brand-strip,
    .public-site .brand-filter-list {
        flex-wrap: wrap;
        width: auto;
        padding: 0.35rem 0.35rem 0.5rem;
    }

    .public-site .brand-scroll .brand-strip {
        justify-content: center;
        gap: 1.5rem 2rem;
    }

    .public-site .filters-toggle,
    .public-site .unit-filters .filters-panel-actions {
        display: none !important;
    }

    .public-site .unit-filters.js-panel:not(.is-open),
    .public-site .unit-filters.js-panel.is-open {
        display: grid;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .pill-group-label {
        flex: 0 0 3.5rem;
    }
    /* Desktop values for the phone rules above. */
    .public-site .service-rows {
        gap: 3rem;
    }

    .public-site .service-row {
        gap: 3rem;
    }

    .public-site .service-card-img {
        aspect-ratio: 3 / 2;
    }

    .public-site .service-card-body h3 {
        margin-bottom: 0.6rem;
        font-size: 1.875rem;
    }

    .public-site .service-card-body p {
        margin-bottom: 0.5rem;
        font-size: 1.0625rem;
    }

    .public-site .section-head {
        margin-bottom: 2.5rem;
    }

    .public-section {
        padding: 5rem 0;
    }

    .public-site .brands-section {
        padding: 3rem 0;
    }

    .public-site .brands-title {
        margin-bottom: 2rem;
    }

    .warranty-band,
    .status-band-section {
        padding: 4.5rem 0;
    }

    .warranty-band .warranty-list {
        gap: 1.75rem;
        margin-bottom: 2rem;
    }

    .public-site .warranty-band .warranty-item .icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .warranty-band .warranty-years {
        font-size: 3rem;
    }

    .warranty-band .warranty-label {
        font-size: 1.125rem;
    }

    .warranty-band .warranty-note {
        font-size: 1.0625rem;
    }

    .contact-item {
        padding: 1rem 1.25rem;
    }

    .contact-visit {
        padding: 2.5rem 2rem;
    }

    .public-footer {
        padding: 3rem 0 2rem;
    }

    .public-footer-cols {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 2rem;
    }

    .public-footer-cols > .public-footer-col:first-child {
        grid-column: auto;
    }
}


/* ---------- Shorter phone home page, part 2 ---------- */



/* Service rows on phones: a small picture beside the text. */
.public-site .service-row {
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: start;
}

.public-site .service-row .service-card-img {
    aspect-ratio: 1 / 1;
}

.public-site .service-row:nth-child(even) .service-card-img {
    order: 0;
}

.public-site .service-card-body h3 {
    font-size: 1.125rem;
}

.public-site .service-card-body p {
    font-size: 0.94rem;
}

.public-site .service-card-body .text-link {
    font-size: 0.94rem;
}

/* Hero on phones: as tall as its content. */
.public-site .public-hero {
    min-height: 0;
    padding: 3rem 0;
}

@media (min-width: 600px) {

    .public-site .service-row .service-card-img {
        aspect-ratio: 3 / 2;
    }

    .public-site .service-card-body h3 {
        font-size: 1.375rem;
    }

    .public-site .service-card-body p,
    .public-site .service-card-body .text-link {
        font-size: 1.0625rem;
    }
}

@media (min-width: 768px) {
    .public-site .service-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .public-site .service-row:nth-child(even) .service-card-img {
        order: 2;
    }

    .public-site .service-card-body h3 {
        font-size: 1.875rem;
    }

    .public-site .public-hero {
        min-height: 560px;
        padding: 4rem 0;
    }
}

@media (min-width: 1024px) {
    .public-site .public-hero {
        min-height: min(85vh, 860px);
    }
}

/* ---------- Shorter phone home page, part 3 ---------- */


/* Call us + Message us side by side on phones; See all units under them. */
.public-site .products-actions .showcase-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.public-site .products-actions .showcase-contact .btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.step p {
    font-size: 0.97rem;
}

.public-site .steps {
    gap: 1rem;
}

.contact-visit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 0.9rem;
}

.contact-visit p,
.contact-visit .btn {
    grid-column: 1 / -1;
}

.contact-visit-icon {
    width: 2.75rem;
    height: 2.75rem;
}

@media (min-width: 600px) {

    .public-site .products-actions .showcase-contact {
        display: flex;
    }

    .public-site .products-actions .showcase-contact .btn {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 768px) {
    .step p {
        font-size: inherit;
    }

    .contact-visit {
        display: flex;
    }

    .contact-visit-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .public-site .steps {
        gap: 1.5rem;
    }
}

/* Phone spacing, final trim (768 restores the desktop values above). */
.public-section {
    padding: 2.25rem 0;
}

.public-site .contact-list {
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .public-section {
        padding: 5rem 0;
    }

    .public-site .contact-list {
        gap: 0.75rem;
    }
}

.public-site .warranty-title {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .public-site .warranty-title {
        margin-bottom: 2rem;
    }
}

/* ==========================================================================
   PUBLIC WEBSITE round 1.7 (2026-10-09): compact unit cards
   (views/_public_parts.php publicUnitCardHtml()) on See all units and the
   home page. 2 per row on phones, 3 from 768, 4 from 1024; every card in a
   row is the same height and the prices line up. HP badge: white on navy
   14.9:1.
   ========================================================================== */

.public-site .unit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.public-site .unit-card-compact {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Shorter 4:3 photo box; the square photo is zoomed a little so the unit
   fills the box instead of floating in white space. */
.public-site .unit-card-compact .unit-photo {
    aspect-ratio: 4 / 3;
}

.public-site .unit-card-compact .unit-photo img {
    transform: scale(1.15);
}

.unit-hp-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-radius: 999px;
}

.public-site .unit-card-compact .unit-ph {
    gap: 0.25rem;
}

.public-site .unit-card-compact .unit-ph-brand {
    font-size: 1.25rem;
}

.public-site .unit-card-compact .unit-body {
    flex: 1 1 auto;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem 0.75rem;
}

.public-site .unit-card-compact .unit-brand {
    font-size: 0.75rem;
}

/* Feature line next to the brand ("AUX  Inverter"). */
.public-site .unit-card-compact .unit-brand .unit-feature {
    display: inline;
    margin-left: 0.35rem;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.public-site .unit-card-compact .unit-model {
    font-size: 0.95rem;
    line-height: 1.3;
}

.public-site .unit-type {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

/* Price and tags sit at the bottom, so they line up across a row. */
.public-site .unit-card-compact .unit-price {
    margin: auto 0 0;
    padding-top: 0.35rem;
    font-size: 1.15rem;
}

.public-site .unit-card-compact .unit-badges {
    gap: 0.25rem;
    margin-top: 0.1rem;
}

.public-site .unit-card-compact .unit-badge {
    font-size: 0.75rem;
}

@media (min-width: 600px) {
    .public-site .unit-card-compact .unit-body {
        padding: 0.75rem 0.9rem 0.9rem;
    }

    .public-site .unit-card-compact .unit-model {
        font-size: 1rem;
    }

    .public-site .unit-card-compact .unit-price {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .public-site .unit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .public-site .unit-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* Wide units: the photo fills the box width (the white above and below the
   flat unit is what gets trimmed, never the unit). */
.public-site .unit-card-compact .unit-photo-wide img {
    object-fit: cover;
    transform: none;
}

/* Tags that wrap on narrow phone cards keep tidy corners. */
.public-site .unit-card-compact .unit-badge {
    border-radius: 6px;
}

/* Tags first, price on the last line: prices line up across a row even
   when one card has fewer tags. */
.public-site .unit-card-compact .unit-badges {
    order: 1;
    margin-top: auto;
    padding-top: 0.35rem;
}

.public-site .unit-card-compact .unit-price {
    order: 2;
    margin-top: 0;
    padding-top: 0.3rem;
}

/* ==========================================================================
   CUSTOMER AREA (UI/UX round 2, 2026-10-09): signed-in customer pages —
   customer_dashboard.php, my_orders.php, my_notifications.php, profile.php
   (body.public-site.customer-area) — plus the signed-in header (bell).
   Same tokens, width and type scale as the public pages; admin and
   technician pages are untouched (they don't carry these body classes).
   Contrast: white on navy 14.9:1; status badges 5.96-9.92:1 (existing
   colours, word always shown); bell count white on #b3261e 6.5:1; hints
   #8a4b00 on white 6.8:1; muted text #4b5563 7.6:1; tab underline and
   "done" dots #0258ad on white 7.0:1, "not yet" rings #8592a3 3.2:1.
   ========================================================================== */

/* Screen-reader-only text (the progress line's "(done)" / "(not yet)"). */
.visually-hidden-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Signed-in header: menu + bell ---------- */

.public-site .public-header.is-customer .public-header-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "brand bell toggle"
        "auth  auth auth"
        "nav   nav  nav";
}

.public-site .header-bell {
    grid-area: bell;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-primary-dark);
    border: 2px solid var(--color-grey-200);
    border-radius: 50%;
}

.public-site .header-bell:hover,
.public-site .header-bell[aria-current="page"] {
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.header-bell-count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    color: var(--color-white);
    background: var(--color-error);
    border: 2px solid var(--color-white);
    border-radius: 999px;
    box-sizing: content-box;
}

.public-site .public-header.is-customer .auth-links {
    justify-content: stretch;
}

.public-site .public-header.is-customer .auth-links > .btn,
.public-site .public-header.is-customer .auth-links > .logout-form {
    flex: 1 1 0;
}

.public-site .public-header.is-customer .auth-links .logout-form .btn {
    width: 100%;
}

/* ---------- Navy band (welcome / page title) ---------- */

.account-band {
    padding: 2rem 0;
    color: var(--color-white);
    background: var(--color-primary-dark);
}

.account-band-slim {
    padding: 1.25rem 0 1.5rem;
}

.account-band-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.public-site .account-band-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-white);
}

.account-band-lead {
    margin: 0.35rem 0 0;
    font-size: 1.0625rem;
    color: var(--color-on-dark-muted);
}

.account-band-back {
    margin: 0 0 0.25rem;
}

.public-site .account-band a:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-white);
    font-weight: 600;
}

.public-site .account-band a:focus-visible {
    outline-color: var(--color-white);
}

/* ---------- Page body, cards ---------- */

.account-page {
    display: grid;
    gap: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.public-site .account-page > .alert {
    margin: 0;
}

.account-card {
    min-width: 0;
    padding: 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.public-site .account-card.dash-block {
    margin: 0;
}

.account-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.public-site .account-card-title {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.public-site .account-card-head .account-card-title {
    margin: 0;
}

.public-site .customer-area .dash-sub,
.public-site.customer-area .dash-sub {
    margin: 0 0 0.75rem;
    font-size: 0.94rem;
    color: var(--color-grey-600);
}

.public-site.customer-area .empty-state {
    color: var(--color-grey-600);
}

.public-site .account-empty {
    padding: 1.5rem 1rem;
    text-align: center;
}

.public-site .account-empty p {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
}

.public-site.customer-area .service-uid {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------- Needs your action ---------- */

.all-set {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 600;
    color: var(--color-success);
}

.action-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.action-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-warning-bg);
    border: 1px solid #e6c98a;
    border-left: 5px solid var(--color-warning);
    border-radius: var(--radius);
}

.action-item p {
    margin: 0 0 0.25rem;
}

.action-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.action-item-services {
    font-weight: 600;
}

.action-item-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.public-site .needs-action .verify-banner {
    margin: 0 0 0.75rem;
    border-radius: var(--radius);
}

/* ---------- Next visit ---------- */

.visit-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.visit-facts dt {
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.visit-facts dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.visit-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.visit-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-grey-600);
}

/* The thin line between steps (solid blue once the step is done). */
.visit-step + .visit-step::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    right: 50%;
    width: 100%;
    height: 3px;
    background: var(--color-grey-200);
    z-index: 0;
}

.visit-step.is-done + .visit-step.is-done::before {
    background: var(--color-primary);
}

.visit-step-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--color-white);
    border: 3px solid var(--color-grey-400);
    border-radius: 50%;
}

.visit-step.is-done {
    color: var(--color-text);
    font-weight: 700;
}

.visit-step.is-done .visit-step-dot {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.public-site .visit-step-dot .icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 3;
}

/* Recent orders + notifications: stacked, side by side from 1024. */
.account-grid {
    display: grid;
    gap: 1.25rem;
}

/* ---------- Order rows (dashboard + My Orders) ---------- */

.public-site.customer-area .order-list {
    border: 0;
    border-radius: 0;
    background: none;
}

.public-site.customer-area .order-list > li + li {
    border-top: 1px solid var(--color-grey-200);
}

.public-site.customer-area .order-row {
    gap: 0.35rem 0.75rem;
    padding: 0.85rem 0.5rem;
    border-radius: var(--radius);
}

.public-site.customer-area a.order-row:hover,
.public-site.customer-area a.order-row:focus {
    background: var(--color-primary-tint);
}

.public-site.customer-area a.order-row:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.public-site.customer-area a.order-row .order-row-title {
    color: var(--color-primary-dark);
}

.public-site.customer-area .order-row-sub,
.public-site.customer-area .order-row-meta {
    color: var(--color-grey-600);
}

.public-site.customer-area .order-row-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.public-site.customer-area .order-row-hint {
    margin: 0;
    color: var(--color-warning);
}

/* "View": looks like a small outline button; the whole row is the link. */
.order-row-view {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 0.8rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

.public-site.customer-area a.order-row:hover .order-row-view {
    color: var(--color-white);
    background: var(--color-primary);
}

/* ---------- Notifications (dashboard preview + page) ---------- */

.public-site.customer-area .notification-mark-all {
    margin: 0 0 0.5rem;
}

.notification-list-compact .notification-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon msg"
        "icon meta";
    gap: 0.15rem 0.75rem;
    align-items: start;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius);
}

.public-site.customer-area .notification-link:hover,
.public-site.customer-area .notification-link:focus-visible {
    background: var(--color-primary-tint);
}

.notification-list-compact .notification-icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-grey-600);
    background: var(--color-grey-50);
    border-radius: 50%;
}

.notification-list-compact .notification-message {
    grid-area: msg;
    overflow-wrap: anywhere;
}

.notification-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.public-site.customer-area .notification-time {
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

/* Unread: bold text, a blue icon and the word "New" (never colour alone). */
.notification-list-compact .is-unread .notification-icon {
    color: var(--color-white);
    background: var(--color-primary);
}

.public-site.customer-area .badge-new {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* ---------- Tabs (My Orders, notifications, My Profile) ---------- */

.tab-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.tab-row .tab-bar {
    flex: 1 1 auto;
    min-width: 0;
}

/* The tab bar scrolls sideways inside itself on phones; the page never does. */
.tab-bar {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-bottom: 2px solid var(--color-grey-200);
}

.tab-list {
    display: flex;
    gap: 0.25rem;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-site .tab,
.admin-modern .tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0 1rem;
    margin-bottom: -2px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 4px solid transparent;
}

.public-site .tab:hover,
.admin-modern .tab:hover {
    color: var(--color-primary-dark);
    background: var(--color-grey-50);
}

/* Selected: a thick blue underline + bold + tinted (shape, not colour alone). */
.public-site .tab.is-selected,
.admin-modern .tab.is-selected {
    font-weight: 800;
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-bottom-color: var(--color-primary);
}

.public-site .tab:focus-visible,
.admin-modern .tab:focus-visible {
    outline-offset: -3px;
}

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-text);
    background: var(--color-grey-200);
    border-radius: 999px;
}

.tab.is-selected .tab-count {
    color: var(--color-white);
    background: var(--color-primary);
}

/* Search + sort */
.list-tools {
    display: grid;
    gap: 0.5rem;
}

.public-site .list-tools .search-bar {
    margin: 0;
}

.sort-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sort-label {
    font-weight: 700;
}

/* ---------- My Profile ---------- */

.profile-facts {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.profile-facts dt {
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.profile-facts dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.profile-email {
    overflow-wrap: anywhere;
}

.public-site .verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.public-site .verify-badge .icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
}

.public-site .profile-summary .verify-banner {
    border-radius: var(--radius);
}

/* Phones: no tab bar — every section is stacked. */
.profile-tab-bar {
    display: none;
}

.profile-section {
    display: grid;
    gap: 1rem;
}

.public-site .profile-section-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
}

.public-site.customer-area .panel {
    padding: 1.25rem;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.public-site.customer-area .panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 800;
}

/* Forms on the customer pages: big labels and boxes, 16px text. */
.public-site.customer-area .form-row label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.public-site.customer-area .form-row input:not([type="checkbox"]):not([type="radio"]),
.public-site.customer-area .form-row textarea,
.public-site.customer-area .form-row select {
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
    color: var(--color-text);
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site.customer-area .form-row input:focus,
.public-site.customer-area .form-row textarea:focus,
.public-site.customer-area .form-row select:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
}

.public-site.customer-area .form-hint,
.public-site.customer-area .muted {
    color: var(--color-grey-600);
}

.public-site.customer-area .panel form .btn[type="submit"] {
    min-height: 48px;
}

.public-site .customer-edits {
    margin: 0;
    padding-left: 1.1rem;
}

.public-site .customer-edits li {
    margin-bottom: 0.4rem;
}

/* Dialogs (Respond / Cancel) keep their own layout; round corners to match. */
.public-site.customer-area dialog.modal {
    border-radius: var(--radius-lg);
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .public-site .public-header.is-customer .auth-links > .btn,
    .public-site .public-header.is-customer .auth-links > .logout-form {
        flex: 0 0 auto;
    }

    .public-site .public-header.is-customer .auth-links {
        justify-content: flex-end;
    }

    .visit-step {
        font-size: 0.875rem;
    }

    .action-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .action-item-buttons {
        flex: none;
    }

    .profile-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- 768px ---------- */

@media (min-width: 768px) {
    .account-band {
        padding: 2.75rem 0;
    }

    .account-band-slim {
        padding: 1.75rem 0 2rem;
    }

    .account-band-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .public-site .account-band-title {
        font-size: 2.25rem;
    }

    .account-card {
        padding: 1.5rem;
    }

    .visit-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .list-tools {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
    }

    /* Tabs on desktop/tablet; main.js shows one section at a time. */
    .profile-tab-bar {
        display: block;
    }

    .notification-list-compact .notification-link {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon msg meta";
        align-items: center;
    }

    .notification-meta {
        justify-content: flex-end;
    }
}

/* ---------- 1024px ---------- */

@media (min-width: 1024px) {
    .public-site .public-header.is-customer .public-header-inner {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "brand nav bell auth";
    }

    .account-grid {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 1.25rem;
        align-items: start;
    }
}


/* The shared .public-site .container rule resets padding; keep the page's
   breathing room under the navy band. */
.public-site .account-page {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .public-site .account-page {
        padding-top: 2rem;
    }
}

/* ==========================================================================
   CUSTOMER AREA round 2.1 (2026-10-09): photo page bands, Book a Service
   (pick cards, sections, summary), the customer view of Order details,
   dashboard notification "More" + My Purchases rows. All scoped to
   body.public-site.customer-area pages (admin / technician untouched).
   Photo bands: the photo sits under an 86% navy layer, so even a white
   pixel behind white text gives at least 9.8:1.
   ========================================================================== */

/* ---------- Page band with a faint photo ---------- */

.public-site .account-band-photo {
    background-color: var(--color-primary-dark);
    background-repeat: no-repeat;
    background-position: center, center 40%;
    background-size: cover, cover;
}

.public-site .account-band-photo.band-heat {
    background-image: linear-gradient(rgba(1, 36, 92, 0.86), rgba(1, 36, 92, 0.86)), url("../img/bg/hero-heat.webp");
}

.public-site .account-band-photo.band-cleaning {
    background-image: linear-gradient(rgba(1, 36, 92, 0.86), rgba(1, 36, 92, 0.86)), url("../img/bg/service-cleaning.webp");
}

.public-site .account-band-photo.band-repair {
    background-image: linear-gradient(rgba(1, 36, 92, 0.86), rgba(1, 36, 92, 0.86)), url("../img/bg/service-repair.webp");
}

.public-site .account-band-photo .account-band-lead {
    color: var(--color-white);
}

/* Order details: order no. + a big status badge in the band. */
.public-site .order-band-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
}

.public-site .badge.badge-lg {
    padding: 0.35rem 0.85rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    letter-spacing: 0;
    border-width: 2px;
    border-style: solid;
}

/* ---------- Shared bits (lists in cards) ---------- */

.price-lines {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.price-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-grey-200);
}

.price-line-amount {
    flex: none;
    font-weight: 700;
    white-space: nowrap;
}

.price-lines .price-total {
    font-size: 1.125rem;
    font-weight: 800;
    border-bottom: 0;
    border-top: 2px solid var(--color-text);
}

.public-site .account-sub-title {
    margin: 1rem 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
}

/* ---------- Order details (customer) ---------- */

.order-detail-grid {
    display: grid;
    gap: 1.25rem;
}

.public-site .order-actions .detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0;
}

.public-site .order-cancelled {
    border-left: 6px solid var(--color-grey-600);
}

.public-site .order-cancelled .account-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-history,
.team-lines {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.date-history li {
    padding-left: 1rem;
    border-left: 3px solid var(--color-grey-200);
    overflow-wrap: anywhere;
}

.date-history-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.date-history-reason {
    display: block;
    font-style: italic;
    color: var(--color-grey-600);
}

.team-lines li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
}

.public-site .team-lines a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.payment-amount {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 800;
}

/* ---------- Book a Service ---------- */

.booking-layout {
    display: grid;
    gap: 1.25rem;
}

.public-site .booking-step-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    font-size: 1.375rem;
    font-weight: 800;
}

.step-no {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
}

.public-site .field-errors {
    margin: 0 0 0.75rem;
}

/* The shared rows stay in the form (they are what gets posted); with JS
   the pick cards drive them, so they are tucked away. */
:is(.public-site, .oe-form) .service-rows-fallback.is-enhanced {
    display: none;
}

/* Book a Service cards (compact 2026-10-15): grouped under small headings
   (Installation / Maintenance / Repair), 1 per row on phones, 2 from 600px,
   3 from 1024px. The whole card is the checkbox's label (big tap target). */
.pick-groups {
    display: grid;
    gap: 1rem;
}

.pick-group-title {
    margin: 0 0 0.45rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.pick-grid {
    display: grid;
    gap: 0.5rem;
}

.pick-card {
    position: relative;
    display: grid;
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.pick-card:hover {
    border-color: var(--color-primary);
}

.pick-card:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Picked: blue border, light tint and a check mark (not colour alone). */
.pick-card.is-checked {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

:is(.public-site, .oe-form) .pick-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 0.5rem;
    align-items: start;
    margin: 0;
    padding: 0.6rem 2.6rem 0.6rem 0.65rem;
    font-weight: normal;
    cursor: pointer;
}

/* The real checkbox: still focusable / clickable, drawn by .pick-check. */
.pick-input {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pick-check {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: transparent;
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: 6px;
    pointer-events: none;
}

:is(.public-site, .oe-form) .pick-check .icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 3;
}

.pick-card.is-checked .pick-check {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.pick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

:is(.public-site, .oe-form) .pick-icon .icon {
    width: 1rem;
    height: 1rem;
}

.pick-card.is-checked .pick-icon {
    color: var(--color-white);
    background: var(--color-primary);
}

/* Small icon beside the name only; price, time and pipe lines use the full card width. */
.pick-text {
    display: contents;
}

.pick-name {
    grid-column: 2;
    align-self: center;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 800;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.pick-price,
.pick-note {
    grid-column: 1 / -1;
}

.pick-nowrap {
    white-space: nowrap;
}

.pick-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.pick-per {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.pick-note {
    font-size: 0.85rem;
    color: var(--color-warning);
}

.pick-qty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.65rem 0.6rem;
}

.pick-card:not(.is-checked) .pick-qty {
    display: none;
}

:is(.public-site, .oe-form) .pick-qty label {
    margin: 0;
    font-weight: 700;
}

:is(.public-site, .oe-form) .pick-qty input {
    width: 5rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.booking-address {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.public-site .booking-address .icon {
    margin-top: 0.1rem;
    color: var(--color-primary);
}

.booking-summary {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
}

.booking-summary-empty {
    margin: 0 0 0.5rem;
    color: var(--color-grey-600);
}

.booking-summary-total {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0 0.5rem;
    font-size: 1.125rem;
}

.public-site .booking-submit {
    width: 100%;
}

.booking-received .account-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-success);
}

/* 4 steps (2026-10-19, main.js [data-booking-form]): the step bar ("Step 2
   of 4: Aircon details" + numbered names) on every width; only the current
   step's section(s) show. Without JS the bar and the Back / Next buttons
   stay hidden and all steps show as one page. Done steps show a check mark,
   the current one is filled and named (not colour alone). */
.booking-form [hidden],
.booking-form .booking-step[hidden] {
    display: none !important;
}

.booking-stepper {
    margin: 0 0 1rem;
}

.booking-stepper-count {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.booking-progress {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    margin: 0 0 1rem;
    padding: 0.4rem 0.5rem;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.public-site .booking-progress li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.booking-progress-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: 50%;
}

/* Only the current section shows its name on small phones. */
.booking-progress-label {
    display: none;
}

.public-site .booking-progress li.is-current {
    color: var(--color-primary-dark);
}

.booking-progress li.is-current .booking-progress-no {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.booking-progress li.is-done .booking-progress-no {
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.booking-progress li.is-current .booking-progress-label {
    display: inline;
}

/* Back / Next under each step: Next is the one main button, Back is quiet. */
.booking-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.booking-nav [data-step-next] {
    flex: 1 1 12rem;
    margin-left: auto;
}

.booking-nav [data-step-back] {
    flex: 0 0 auto;
}

.public-site .booking-nav .btn {
    min-height: 44px;
}

.booking-nav-last {
    margin-top: 0.75rem;
}

.public-site .booking-step-title:focus {
    outline: none;
}

.public-site .booking-step-title:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}

.booking-step-error {
    margin: 0 0 0.75rem;
}

.booking-address-check .booking-step-error {
    margin: 0.25rem 0 0;
}

/* Step 3: the profile address + "This is where the service will be done". */
.booking-address-lead {
    margin: 0 0 0.35rem;
}

.public-site .booking-address-check {
    margin: 0.75rem 0 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site .booking-address-check .check-inline {
    font-size: 1rem;
    font-weight: 700;
}

.public-site .booking-address-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 0.1rem;
}

.public-site .booking-address-check:has(input[aria-invalid="true"]) {
    border-color: var(--color-error);
}

/* Step 4: the month calendar (fills preferred_date). Days are 44px buttons;
   days before the earliest date are disabled, grey AND crossed out; the
   picked day is filled, bold and ringed, and named below the grid. */
.booking-cal {
    margin: 0 0 0.75rem;
}

.booking-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

:is(.public-site, .oe-form) .booking-cal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    text-align: center;
}

:is(.public-site, .oe-form) .booking-cal-arrow {
    min-width: 44px;
    min-height: 44px;
}

:is(.public-site, .oe-form) .booking-cal-arrow:disabled {
    color: var(--color-grey-600);
    border-color: var(--color-grey-400);
    background: var(--color-grey-50);
    cursor: not-allowed;
}

.booking-cal-grid {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

.booking-cal-grid th {
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-grey-600);
    text-align: center;
}

.booking-cal-grid td {
    padding: 0;
    text-align: center;
}

.booking-cal-day {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
    cursor: pointer;
}

.booking-cal-day:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.booking-cal-day:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
}

.booking-cal-day.is-past,
.booking-cal-day:disabled {
    color: var(--color-grey-600);
    background: var(--color-grey-50);
    border-color: var(--color-grey-200);
    text-decoration: line-through;
    cursor: not-allowed;
}

.booking-cal-day.is-picked {
    color: var(--color-white);
    font-weight: 800;
    background: var(--color-primary);
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 2px var(--color-primary-dark);
}

.booking-cal-picked {
    margin: 0.75rem 0 0.5rem;
    font-size: 1rem;
}

/* ---------- Dashboard: My Purchases rows ---------- */

.sale-rows {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-site .sale-row {
    padding: 0.85rem 1rem;
}

.sale-row-main {
    display: grid;
    gap: 0.5rem;
}

.sale-row-what {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
}

.sale-row-unit {
    flex: 1 1 100%;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sale-row-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sale-row-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-grey-200);
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .pick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-progress-label {
        display: inline;
    }

    .sale-row-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .sale-row-buttons {
        grid-column: 1 / -1;
    }
}

/* ---------- 768px ---------- */

@media (min-width: 768px) {
    .order-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .public-site .booking-submit {
        width: auto;
        min-width: 16rem;
    }

    .sale-row-main {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .sale-row-buttons {
        grid-column: auto;
    }
}

/* ---------- 1024px: summary on the right, sticky ---------- */

@media (min-width: 1024px) {
    .booking-layout {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }

    .booking-layout > .booking-step {
        grid-column: 1;
    }

    .public-site .booking-layout > .booking-review {
        position: sticky;
        top: 1rem;
        grid-column: 2;
        grid-row: 1 / span 4;
    }

    .public-site .booking-submit {
        width: 100%;
        min-width: 0;
    }

    /* Steps 1-3 use the full width; step 4 = calendar left, review right. */
    .booking-form.is-stepped .booking-layout > .booking-step {
        grid-column: 1 / -1;
    }

    .booking-form.is-stepped .booking-layout > .booking-step-date {
        grid-column: 1;
        grid-row: 1;
    }

    .public-site .booking-form.is-stepped .booking-layout > .booking-review {
        grid-column: 2;
        grid-row: 1;
    }
}

/* ==========================================================================
   TECHNICIAN AREA (UI/UX round 3, 2026-10-09): technician_dashboard.php,
   technician_notifications.php, technician_complete_job.php and sign.php
   (body.public-site.customer-area.tech-area — the signed-in styles of the
   customer pages, plus the rules below). Phone first and readable outdoors:
   17px text, text at 7:1 or more (#1a2233 15.9:1, #4b5563 7.6:1 on white),
   48px+ buttons with room between them. Admin pages are untouched.
   ========================================================================== */

.public-site.tech-area {
    font-size: 1.0625rem;
}

/* Keep a focused field above the button pinned to the bottom of the screen. */
html:has(body.tech-area) {
    scroll-padding-bottom: 7rem;
}

.public-site.tech-area .btn {
    min-height: 48px;
}

.public-site.tech-area .btn-sm {
    min-height: 44px;
}

.public-site.tech-area .muted,
.public-site.tech-area .form-hint,
.public-site.tech-area .plan-why,
.public-site.tech-area .plan-date,
.public-site.tech-area .plan-footnote {
    color: var(--color-grey-600);
}

.public-site .account-band-photo.band-tech {
    background-image: linear-gradient(rgba(1, 36, 92, 0.86), rgba(1, 36, 92, 0.86)), url("../img/bg/tech-band.webp");
}

.public-site.tech-area .account-band {
    padding: 1.5rem 0;
}

/* ---------- Top bar: logo | bell | Menu (My Jobs, My Profile, Log Out) ---------- */

.public-site .tech-header .tech-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "brand bell toggle"
        "nav   nav  nav";
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.public-site .tech-header .public-brand {
    grid-area: brand;
}

.public-site .tech-header .nav-toggle {
    grid-area: toggle;
    min-height: 48px;
}

.public-site .tech-header .header-bell {
    width: 48px;
    height: 48px;
}

.public-site .tech-nav .tech-nav-logout {
    padding: 0.5rem 0;
}

.public-site .tech-nav .logout-form,
.public-site .tech-nav .logout-form .btn {
    display: block;
    width: 100%;
}

.sign-header-label {
    font-weight: 700;
    color: var(--color-grey-600);
}

/* ---------- Today's Plan ---------- */

.public-site.tech-area .today-plan {
    margin: 0;
}

.public-site.tech-area .plan-card {
    padding: 1.1rem;
    border-radius: var(--radius-lg);
}

.public-site.tech-area .plan-uid {
    font-size: 1.125rem;
}

.public-site.tech-area .plan-customer {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
}

.public-site.tech-area .plan-facts {
    font-size: 1rem;
}

.public-site .plan-map-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-height: 44px;
    color: var(--color-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.plan-map-hint {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}

/* ONE big next action; Open job and any second action look secondary. */
.public-site.tech-area .plan-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.public-site.tech-area .plan-actions form {
    margin: 0;
}

.public-site.tech-area .plan-action-main,
.public-site.tech-area .plan-action-main .btn {
    width: 100%;
}

.public-site.tech-area .plan-action-main .btn,
.public-site.tech-area a.btn.plan-action-main {
    min-height: 56px;
    font-size: 1.125rem;
}

/* "On the way" is the main action when it shows: filled, not grey. */
.public-site.tech-area .plan-action-main .btn-secondary {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.public-site.tech-area .plan-action-second .btn {
    width: 100%;
    color: var(--color-primary);
    background: var(--color-white);
    border-color: var(--color-primary);
}

.public-site.tech-area .plan-actions > .btn-ghost {
    width: 100%;
}

/* ---------- Complete Job: step header ---------- */

.tech-steps {
    padding: 1rem 1.1rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tech-steps-job {
    margin: 0 0 0.25rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tech-steps-count {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.tech-progress {
    height: 12px;
    overflow: hidden;
    background: var(--color-grey-200);
    border-radius: 999px;
}

.tech-progress-bar {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
}

.tech-progress-bar.is-step-1 { width: 16.7%; }
.tech-progress-bar.is-step-2 { width: 50%; }
.tech-progress-bar.is-step-3 { width: 83.3%; }
.tech-progress-bar.is-step-4 { width: 100%; }

.tech-step-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.tech-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

.tech-step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: 800;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: 50%;
}

.tech-step.is-done .tech-step-no {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.tech-step.is-current {
    font-weight: 800;
    color: var(--color-text);
}

.tech-step.is-current .tech-step-no {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}

.tech-step-now {
    display: block;
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* ---------- Complete Job: cards ---------- */

.public-site.tech-area .tech-job-panel {
    padding: 1.1rem;
}

.public-site.tech-area .tech-job-panel h2 {
    font-size: 1.25rem;
}

.public-site.tech-area .tech-job-panel h3 {
    margin: 1.5rem -1.1rem 0.75rem;
    padding: 1rem 1.1rem 0;
    font-size: 1.25rem;
    font-weight: 800;
    border-top: 6px solid var(--color-grey-50);
}

.public-site.tech-area .tech-job-panel .data-table {
    font-size: 1rem;
}

.tech-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.75rem 0;
    padding: 0.75rem 0;
    font-size: 1.125rem;
    border-top: 2px solid var(--color-text);
}

.public-site .add-service-form {
    display: grid;
    gap: 0.6rem;
}

.public-site.tech-area .add-service-form select,
.public-site.tech-area .add-service-form input,
.public-site.tech-area .tech-job-panel .form-row input:not([type="file"]),
.public-site.tech-area .tech-job-panel .form-row textarea,
.public-site.tech-area .tech-job-panel .paper-invoice-row input {
    min-height: 48px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.add-service-preview {
    margin: 0;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.public-site.tech-area .line-item-row {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Photo: a big "Take photo" button (the label of the same file input) + preview. */
.photo-row.is-enhanced input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.photo-pick {
    display: none;
}

.public-site .photo-row.is-enhanced .photo-pick {
    display: flex;
    width: 100%;
    min-height: 56px;
    font-size: 1.125rem;
    cursor: pointer;
}

.photo-row.is-enhanced:has(input[type="file"]:focus-visible) .photo-pick {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.photo-preview {
    display: block;
    max-width: 100%;
    max-height: 260px;
    margin-top: 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-grey-200);
}

/* ONE main button pinned to the bottom of the screen (stays inside its own
   form, leaves room for the phone's home bar). */
.sticky-action {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 1rem -1.1rem -1.1rem;
    padding: 0.75rem 1.1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid var(--color-grey-200);
    box-shadow: 0 -6px 16px rgba(1, 36, 92, 0.08);
}

.public-site .sticky-action .btn {
    width: 100%;
    min-height: 56px;
    font-size: 1.125rem;
}

/* Payment: three big choice cards. */
.pay-tiles {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.public-site .pay-tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 64px;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 800;
    text-align: left;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.pay-tile-check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: transparent;
    border: 2px solid var(--color-grey-400);
    border-radius: 50%;
}

.public-site .pay-tile[aria-pressed="true"] {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.pay-tile[aria-pressed="true"] .pay-tile-check {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.public-site.tech-area .pay-choice .btn {
    width: 100%;
    min-height: 56px;
}

/* Done screen. */
.tech-done {
    margin: 0.5rem 0 1rem;
    text-align: center;
}

.tech-done-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-success);
    border-radius: 50%;
}

.public-site.tech-area .tech-done h3 {
    margin: 0.75rem 0 0.35rem;
    padding: 0;
    font-size: 1.5rem;
    border: 0;
}

.tech-done-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.public-site .tech-done-actions .btn {
    width: 100%;
    min-height: 56px;
}

/* ---------- Sign page (sign.php) ---------- */

/* Bigger pad, same 600:220 shape as the saved signature (no stretching). */
.public-site.sign-page .signature-pad {
    max-width: none;
}

.public-site.sign-page .signature-pad-wrap {
    border: 2px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site.sign-page .signoff-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.75rem;
}

.public-site.sign-page .signoff-actions .btn {
    min-height: 56px;
    font-size: 1.125rem;
}

.public-site.sign-page .signoff {
    padding: 1.1rem;
}

/* ---------- 600px+ ---------- */

@media (min-width: 600px) {
    .pay-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tech-done-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-site.tech-area .line-item-row {
        grid-template-columns: 2fr 1fr auto;
        align-items: center;
    }
}

/* ---------- 1024px: one-row top bar ---------- */

@media (min-width: 1024px) {
    .public-site .tech-header .tech-header-inner {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav bell";
    }

    .public-site .tech-header .nav-toggle {
        display: none;
    }

    .public-site .tech-nav ul {
        align-items: center;
    }

    .public-site .tech-nav .tech-nav-logout {
        padding: 0;
    }

    .public-site .tech-nav .logout-form .btn {
        width: auto;
    }

    .public-site.tech-area .plan-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .public-site.tech-area .plan-action-main,
    .public-site.tech-area .plan-action-second,
    .public-site.tech-area .plan-actions > .btn-ghost {
        width: auto;
        flex: 1 1 0;
    }
}

/* Round 3 fixes. The shop footer's own links (shown on technician pages and
   sign.php; hidden on public/customer pages under the 3-column footer):
   white on navy (14.9:1). */
.public-site .site-footer a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.public-site .site-footer a:hover {
    color: var(--color-on-dark-muted);
}

/* Technician notification rows: dark text for outdoor reading (not link blue). */
.public-site.tech-area .notification-list-compact .notification-link {
    color: var(--color-text);
}

/* Phones: the signature box runs edge to edge (same 600:220 shape, bigger);
   from 600px it sits inside the card again. */
.public-site.sign-page .signature-pad-wrap {
    margin-left: calc(-1.1rem - 1.25rem);
    margin-right: calc(-1.1rem - 1.25rem);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

@media (min-width: 600px) {
    .public-site.sign-page .signature-pad-wrap {
        margin-left: 0;
        margin-right: 0;
        border-left: 2px solid var(--color-grey-400);
        border-right: 2px solid var(--color-grey-400);
        border-radius: var(--radius);
    }
}

/* Complete Job on phones: the services table wraps instead of widening the
   page (grid children may shrink; the table's own wrapper scrolls if needed). */
.public-site .account-page > * {
    min-width: 0;
}

.public-site.tech-area .tech-job-panel .table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.public-site.tech-area .tech-job-panel .data-table th,
.public-site.tech-area .tech-job-panel .data-table td {
    white-space: normal;
    padding: 0.6rem 0.5rem;
}

.public-site.tech-area .add-service-form select,
.public-site.tech-area .add-service-form input,
.public-site.tech-area .add-service-form .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ==========================================================================
   TECHNICIAN AREA round 3.1 (2026-10-09): job details (technician view),
   My Profile, Reschedule / Cancel, the technician Log Out screen, staff
   login, the "On the way" dialog and the big shop-account QR. Scoped to
   body.public-site pages (admin pages other than staff login untouched).
   ========================================================================== */

.public-site .account-band-photo.band-install {
    background-image: linear-gradient(rgba(1, 36, 92, 0.86), rgba(1, 36, 92, 0.86)), url("../img/bg/service-install.webp");
}

.public-site .account-band-photo.band-tech-profile {
    background-image: linear-gradient(rgba(1, 36, 92, 0.86), rgba(1, 36, 92, 0.86)), url("../img/bg/tech-profile.webp");
}

/* ---------- Job details (technician) ---------- */

.public-site.tech-area .tech-actions .detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
}

.public-site.tech-area .tech-actions .detail-actions > .btn,
.public-site.tech-area .tech-actions .detail-actions form,
.public-site.tech-area .tech-actions .detail-actions form .btn {
    width: 100%;
    margin: 0;
}

.tech-fact-big {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
}

.tech-contact {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.public-site .tech-contact .icon {
    margin-top: 0.75rem;
    color: var(--color-primary);
}

.public-site .tech-contact a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    min-height: 48px;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tech-contact-hint {
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: underline;
}

.public-site .tech-photo {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* ---------- My Profile ---------- */

.set-by-admin {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-grey-600);
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-200);
    border-radius: 999px;
}

/* ---------- Reschedule / Cancel ---------- */

.public-site.tech-area .radio-row {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.public-site.tech-area .radio-row label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
    cursor: pointer;
}

.public-site.tech-area .radio-row input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.public-site.tech-area .modal-actions .btn {
    width: 100%;
    min-height: 56px;
}

/* A dangerous action looks different: red outline + red text (6.5:1). */
.public-site .btn.tech-danger {
    color: var(--color-error);
    background: var(--color-white);
    border-color: var(--color-error);
}

.public-site .btn.tech-danger:hover,
.public-site .btn.tech-danger:focus {
    color: var(--color-white);
    background: var(--color-error);
    border-color: var(--color-error);
}

/* ---------- Staff login ---------- */

.public-site.staff-login-page .auth-card {
    text-align: left;
}

.auth-card-logo {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 0 0.75rem;
    border-radius: 12px;
}

/* ---------- "On the way" dialog ---------- */

.otw-dialog {
    width: min(92vw, 420px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(1, 36, 92, 0.3);
}

.otw-dialog::backdrop {
    background: rgba(1, 36, 92, 0.55);
}

.otw-dialog-box {
    padding: 1.5rem 1.25rem;
    font-size: 1.0625rem;
    color: var(--color-text);
}

.otw-dialog-title {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-text);
}

.otw-dialog-text {
    margin: 0 0 1.25rem;
    color: var(--color-grey-600);
}

.otw-dialog-actions {
    display: grid;
    gap: 0.75rem;
}

.public-site .otw-dialog-actions .btn {
    width: 100%;
    min-height: 56px;
    font-size: 1.125rem;
}

/* ---------- Payment: big QR of the picked account ---------- */

/* With JS the cards show provider, name and number only (no QR). */
.public-site .shop-account-pick.is-enhanced .shop-account-qr {
    display: none;
}

.public-site.tech-area .shop-account-card {
    min-height: 48px;
}

.shop-qr-big {
    margin: 1rem 0;
}

.shop-qr-empty {
    margin: 0;
    font-weight: 700;
    color: var(--color-grey-600);
}

.shop-qr-chosen p {
    margin: 0 0 0.35rem;
}

.shop-qr-amount {
    font-size: 1.125rem;
}

.shop-qr-amount strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.shop-qr-provider {
    font-size: 1.25rem;
    font-weight: 800;
}

.shop-qr-name {
    font-weight: 700;
}

.shop-qr-number {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.shop-qr-copied {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-success);
}

/* About 85-90% of the phone width, up to 420px; white with a quiet zone;
   the image keeps its own shape (never stretched). The frame is sized from
   the screen (16px gutter each side), not from the padded cards around it,
   and centred: (100% - its width) / 2 is a negative margin on phones. */
.shop-qr-frame {
    --qr-frame-w: min(calc(100vw - 2rem), 420px);
    width: var(--qr-frame-w);
    max-width: none;
    margin: 0.75rem 0 0.75rem calc((100% - var(--qr-frame-w)) / 2);
    padding: 12px;
    background: #fff;
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site .shop-qr-frame img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: auto;
}

.public-site .shop-qr-full-btn {
    width: 100%;
}

/* Full screen: the QR alone on white, for bright sunlight. */
.qr-fullscreen {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 1.5rem;
    background: #fff;
    border: 0;
    cursor: pointer;
}

.qr-fullscreen[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.qr-fullscreen::backdrop {
    background: #fff;
}

.qr-fullscreen img {
    width: min(92vw, 92vh, 640px);
    height: auto;
}

.qr-fullscreen p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

@media (min-width: 600px) {
    .otw-dialog-actions {
        grid-template-columns: 1fr 1fr;
    }

    .public-site.tech-area .radio-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .public-site.tech-area .tech-actions .detail-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .public-site.tech-area .tech-actions .detail-actions > .btn,
    .public-site.tech-area .tech-actions .detail-actions form {
        width: auto;
        flex: 1 1 0;
    }
}

/* ==========================================================================
   PUBLIC WEBSITE round 4 (2026-10-12): the mockup's look on the public
   pages — light two-row header (phone icon), navy hero with the photo
   blended into the right side, a soft blue-grey page with white cards
   (thin borders, soft shadows, round corners), bigger section titles,
   sidebar filters on the home "Aircon units we sell" section and on See
   all units, and the navy footer.
   Every rule is under body.public-modern, which ONLY index.php, units.php,
   lookup.php, login.php, register.php and forgot_password.php print — the
   signed-in customer, technician and admin pages are not touched (the one
   exception, .top-strip-icon, is an element only the shared header prints,
   hidden unless body.public-modern).
   Contrast (WCAG 2.1 AA): text on the page tint #eef3f9 — body 15.2:1,
   grey-600 6.8:1, primary 6.4:1; white on the hero's solid navy 14.9:1 and
   >= 6.4:1 where the photo starts fading in (the text column ends before
   it); white on the hero's filled button #1a6fd0 5.0:1, that button on navy
   3.1:1; white on the feature badge (primary) 7.0:1; checkboxes: Edge's
   grey border on white 4.5:1, ticked = primary fill 7.0:1; card borders
   are decoration (the cards also have shadows and spacing).
   ========================================================================== */

/* Not scoped: only views/_public_header.php prints it. */
.top-strip-icon {
    display: none;
}

.public-modern {
    --r4-page: #eef3f9;
    --r4-line: #dbe4ee;
    --r4-hero-btn: #1a6fd0;
    --r4-radius: 14px;
    --r4-shadow: 0 1px 2px rgba(1, 36, 92, 0.05), 0 6px 18px rgba(1, 36, 92, 0.07);
    --r4-shadow-hover: 0 2px 4px rgba(1, 36, 92, 0.06), 0 14px 30px rgba(1, 36, 92, 0.13);
    background: var(--r4-page);
}

.public-modern .btn {
    border-radius: 8px;
}

/* ---------- Header: thin white strip (phone + 2 links), white menu bar ---------- */

.public-modern .top-strip {
    color: var(--color-grey-600);
    background: var(--color-white);
    border-bottom: 1px solid var(--r4-line);
}

.public-modern .top-strip-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.public-modern .top-strip-icon {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.public-modern .top-strip-label {
    color: var(--color-grey-600);
}

.public-modern .top-strip a {
    min-height: 44px;
    color: var(--color-primary-dark);
}

.public-modern .top-strip a:hover,
.public-modern .top-strip a[aria-current="page"] {
    color: var(--color-primary);
}

.public-modern .top-strip a:focus-visible {
    outline-color: var(--color-primary);
}

.public-modern .site-header {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--r4-line);
    box-shadow: 0 2px 10px rgba(1, 36, 92, 0.05);
}

.public-modern .public-logo {
    width: 48px;
    height: 48px;
}

.public-modern .public-brand-name {
    font-weight: 800;
    color: var(--color-primary-dark);
}

.public-modern .nav-toggle {
    border-radius: 8px;
}

/* ---------- Hero: navy, photo on the right fading into it ---------- */

/* Phones / tablets: the photo behind everything under a strong overlay. */
.public-modern .public-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0;
    background-image:
        linear-gradient(180deg, rgba(1, 36, 92, 0.84) 0%, rgba(1, 36, 92, 0.93) 100%),
        url("../img/bg/hero-heat.webp");
    background-position: center, 68% center;
    background-size: cover, cover;
}

.public-modern .public-hero > .container {
    position: relative;
    z-index: 1;
}

.public-modern .hero-title {
    letter-spacing: -0.015em;
}

.public-modern .hero-title-main {
    font-size: 2.6rem;
    font-weight: 800;
}

.public-modern .hero-title-sub {
    font-size: 1.5rem;
    font-weight: 700;
}

.public-modern .hero-lead {
    max-width: 34rem;
    font-size: 1.125rem;
    color: var(--color-on-dark-muted);
}

/* One filled button (brighter blue), one white outline. */
.public-modern .btn-hero {
    color: var(--color-white);
    background: var(--r4-hero-btn);
    border-color: var(--r4-hero-btn);
}

.public-modern .btn-hero:hover,
.public-modern .btn-hero:focus {
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-color: var(--color-white);
}

.public-modern .btn-hero-outline {
    border-color: rgba(255, 255, 255, 0.9);
}

/* ---------- Page: soft tint, white cards, bigger titles ---------- */

.public-modern .public-section,
.public-modern .section-alt,
.public-modern .brands-section {
    background: transparent;
    border-top: 0;
}

.public-modern .section-head h2,
.public-modern .brands-title,
.public-modern .page-title {
    color: var(--color-primary-dark);
}

.public-modern .section-head h2,
.public-modern .brands-title,
.public-modern .warranty-title,
.public-modern .status-band h2,
.public-modern .page-title {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* One card look: white, thin light border, soft shadow, round corners. */
.public-modern .service-row,
.public-modern .step,
.public-modern .contact-item,
.public-modern .unit-card,
.public-modern .auth-card,
.public-modern .auth-page .section-alt > .container,
.public-modern .units-toolbar,
.public-modern .home-units-side,
.public-modern .unit-filters {
    background: var(--color-white);
    border: 1px solid var(--r4-line);
    border-radius: var(--r4-radius);
    box-shadow: var(--r4-shadow);
}

/* Full-width bands become rounded cards inside the page width. */
.public-modern .brands-section > .container,
.public-modern .warranty-band > .container,
.public-modern .status-band-section > .container {
    width: min(100% - 2rem, 1160px);
    margin: 0 auto;
    border-radius: 20px;
}

.public-modern .brands-section {
    padding: 1rem 0;
}

.public-modern .brands-section > .container {
    padding: 1.75rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--r4-line);
    box-shadow: var(--r4-shadow);
}

.public-modern .warranty-band,
.public-modern .status-band-section {
    padding: 1rem 0;
    background: transparent;
}

.public-modern .warranty-band > .container {
    padding: 2.25rem 1.25rem;
    background: var(--color-primary-dark);
    box-shadow: var(--r4-shadow);
}

.public-modern .status-band-section > .container {
    padding: 2rem 1.5rem;
    background: var(--color-primary);
    box-shadow: var(--r4-shadow);
}

/* Services: each photo row is a card. */
.public-modern .service-rows {
    gap: 1rem;
}

.public-modern .service-row {
    padding: 0.85rem;
}

.public-modern .service-card-img {
    border-radius: 10px;
    box-shadow: none;
}

/* How it works: each step is a card (the joining line is dropped). */
.public-modern .steps::before {
    display: none;
}

.public-modern .steps {
    gap: 0.75rem;
}

.public-modern .step {
    padding: 1rem 1.1rem;
}

/* Contact */
.public-modern .contact-visit {
    border: 1px solid var(--r4-line);
    border-radius: var(--r4-radius);
}

/* Login / register / forgot password / lookup: the card on the page tint. */
.public-modern .auth-page {
    background: transparent;
}

.public-modern .auth-card {
    border-radius: 18px;
}

/* ---------- Unit cards (home + See all units) ---------- */

.public-modern .unit-card {
    overflow: hidden;
}

.public-modern .unit-photo {
    background: var(--color-white);
    border-bottom: 1px solid var(--r4-line);
}

.public-modern .unit-photo-none {
    background: var(--color-primary-tint);
}

/* Feature badge on the photo (Inverter / Non Inverter / Side Discharge). */
.public-modern .unit-photo .unit-feature {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    max-width: calc(100% - 1rem);
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 999px;
}

.public-modern .unit-card-compact .unit-body {
    padding: 0.75rem 0.8rem 0.85rem;
}

.public-modern .unit-card-compact .unit-brand {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-grey-600);
}

.public-modern .unit-card-compact .unit-model {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--color-text);
}

.public-modern .unit-card-compact .unit-type {
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.public-modern .unit-card-compact .unit-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

/* 2 per row on phones and tablets (both pages); 3 from 1024. */
.public-modern .unit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.public-modern .public-section .unit-group-heading {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.25rem;
    color: var(--color-primary-dark);
}

.public-modern .public-section .unit-group-heading:first-of-type {
    margin-top: 0.5rem;
}

.public-modern .units-empty {
    border: 1px solid var(--r4-line);
}

/* ---------- Home: brand / HP sidebar + cards ---------- */

/* minmax(0, 1fr): the sideways brand row must not widen the columns. */
.public-modern .home-units {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.public-modern .home-units[aria-busy="true"] .home-units-main {
    opacity: 0.6;
}

.public-modern .home-units-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    min-width: 0;
    padding: 0.9rem 1rem;
}

/* (.public-section kept in the selector: it beats ".public-section h3".) */
.public-modern .public-section .home-filter-title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text);
}

/* Phones: one row of brands that scrolls sideways inside the strip. */
.public-modern .home-brand-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent 100%);
}

.public-modern .home-brand-list {
    display: flex;
    gap: 0.5rem;
    width: max-content;
    margin: 0;
    padding: 0.2rem 2rem 0.4rem 0.2rem;
    list-style: none;
}

.public-modern .home-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.3rem 0.85rem 0.3rem 0.6rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: 10px;
}

.public-modern .home-brand:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

/* Picked: thick blue border + tint + bold (shape and weight, not colour alone). */
.public-modern .home-brand.is-selected {
    font-weight: 800;
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.public-modern .home-brand-logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 26px;
}

.public-modern .home-brand-logo img {
    width: auto;
    max-width: 52px;
    height: auto;
    max-height: 24px;
    object-fit: contain;
}

.public-modern .home-brand-all {
    color: var(--color-primary);
}

.public-modern .home-brand-all .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.public-modern .home-brand-nologo {
    display: none;
}

.public-modern .home-hp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-modern .home-hp-list .pill {
    min-height: 44px;
    padding: 0 0.85rem;
}

.public-modern .home-units-main {
    min-width: 0;
}

.public-modern .home-units-main .unit-price-note {
    margin-bottom: 0;
}

.public-modern .home-see-all {
    margin: 1rem 0 0;
    text-align: center;
}

/* ---------- See all units: sidebar form + results ---------- */

.public-modern .units-page {
    padding-top: 1.5rem;
}

.public-modern .units-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.public-modern .units-sidebar {
    min-width: 0;
}

.public-modern .unit-filters {
    display: block;
    margin: 0;
    padding: 0.5rem 1rem 1rem;
}

.public-modern .filter-group {
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0 0.5rem;
    border: 0;
    border-top: 1px solid var(--r4-line);
}

.public-modern .filter-group:first-of-type {
    border-top: 0;
}

/* Floated so the group's top line runs above the title, not through it. */
.public-modern .filter-group-title {
    float: left;
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text);
}

.public-modern .filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The whole row is the label: the box, logo and name are all clickable. */
.public-modern .filter-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 0.35rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    border-radius: 8px;
}

.public-modern .filter-option:hover {
    background: var(--color-grey-50);
}

.public-modern .filter-option input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.public-modern .filter-option:has(input:checked) {
    font-weight: 800;
    color: var(--color-primary-dark);
}

.public-modern .filter-option-text {
    min-width: 0;
    overflow-wrap: break-word;
}

.public-modern .filter-logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    width: 44px;
    height: 24px;
}

.public-modern .filter-logo img {
    width: auto;
    max-width: 44px;
    height: auto;
    max-height: 22px;
    object-fit: contain;
}

/* "All": clears its group; drawn like a box (ticked while nothing is picked). */
.public-modern .filter-all {
    clear: both;
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 0.35rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 8px;
}

.public-modern .filter-all .icon-check {
    width: 20px;
    height: 20px;
    padding: 2px;
    color: transparent;
    border: 2px solid var(--color-grey-400);
    border-radius: 4px;
    stroke-width: 3;
}

.public-modern .filter-all.is-selected {
    font-weight: 800;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.public-modern .filter-all.is-selected .icon-check {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.public-modern .filters-panel-actions {
    display: flex;
    gap: 0.6rem;
    padding-top: 0.75rem;
}

.public-modern .filters-panel-actions .btn {
    flex: 1 1 0;
}

/* Phones with JS: the form is the Filters panel. */
.public-modern .filters-toggle {
    width: 100%;
    margin: 0 0 0.75rem;
}

.public-modern .unit-filters.js-panel.is-open {
    padding: 0.5rem 1rem 0;
    border-radius: var(--r4-radius);
}

/* "Show units" + "Clear" stay in reach while the panel is long. */
.public-modern .unit-filters.js-panel .filters-panel-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -1rem;
    padding: 0.75rem 1rem;
    background: var(--color-white);
    border-top: 1px solid var(--r4-line);
    border-radius: 0 0 var(--r4-radius) var(--r4-radius);
}

.public-modern .units-results {
    min-width: 0;
}

.public-modern .units-toolbar {
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem 0.25rem;
}

.public-modern .units-toolbar .search-bar {
    margin: 0 0 0.25rem;
}

.public-modern .units-toolbar .units-found {
    margin: 0;
}

.public-modern .units-toolbar .search-field input {
    border-radius: 8px;
}

/* ---------- Footer: navy, a blue top line, quiet column titles ---------- */

.public-modern .public-footer {
    margin-top: 1.5rem;
    border-top: 4px solid var(--color-primary);
}

.public-modern .public-footer-title {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-dark-muted);
}

.public-modern .public-footer-name {
    font-size: 1.25rem;
}

.public-modern .public-footer a {
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

.public-modern .public-footer a:hover {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
}

.public-modern .site-footer {
    background: #011a45;
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .public-modern .hero-title-main {
        font-size: 3.25rem;
    }

    .public-modern .unit-grid {
        gap: 1rem;
    }

    .public-modern .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .public-modern .filter-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- 768px ---------- */
/* (Round 4.1: the sidebars now start at 1024px — see the round 4.1 block.) */

@media (min-width: 768px) {
    .public-modern .section-head h2,
    .public-modern .brands-title,
    .public-modern .warranty-title,
    .public-modern .status-band h2,
    .public-modern .page-title {
        font-size: 2.5rem;
    }

    .public-modern .public-section {
        padding: 4rem 0;
    }

    .public-modern .units-page {
        padding-top: 1.5rem;
    }

    .public-modern .brands-section,
    .public-modern .warranty-band,
    .public-modern .status-band-section {
        padding: 1.5rem 0;
    }

    .public-modern .brands-section > .container {
        padding: 2.5rem 2rem;
    }

    .public-modern .warranty-band > .container {
        padding: 3.5rem 2rem;
    }

    .public-modern .status-band-section > .container {
        padding: 3rem 3rem;
    }

    .public-modern .service-rows {
        gap: 1.5rem;
    }

    .public-modern .service-row {
        padding: 1.25rem;
    }

    .public-modern .service-card-body {
        padding: 0 1rem;
    }

    .public-modern .public-hero {
        padding: 4.5rem 0;
    }

    .public-modern .hero-title-main {
        font-size: 3.75rem;
    }

    .public-modern .hero-title-sub {
        font-size: 2rem;
    }

    .public-modern .units-toolbar {
        padding: 0.75rem 1.25rem 0.25rem;
    }
}

/* ---------- 1024px: the mockup hero, 3 cards per row ---------- */

@media (min-width: 1024px) {
    .public-modern .top-strip {
        font-size: 0.875rem;
    }

    .public-modern .main-nav a {
        position: relative;
        color: var(--color-text);
    }

    .public-modern .main-nav a::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 2px;
        left: 0;
        height: 3px;
        background: transparent;
        border-radius: 2px;
    }

    .public-modern .main-nav a:hover,
    .public-modern .main-nav a:focus,
    .public-modern .main-nav a[aria-current="page"] {
        color: var(--color-primary);
        text-decoration: none;
    }

    .public-modern .main-nav a:hover::after,
    .public-modern .main-nav a[aria-current="page"]::after {
        background: var(--color-primary);
    }

    /* Solid navy on the left (where the text is); the photo fills the
       right part and fades into the navy. The text column ends before the
       photo is more than about a quarter visible. */
    .public-modern .public-hero {
        min-height: min(80vh, 680px);
        padding: 5rem 0;
        background-image: none;
    }

    .public-modern .public-hero::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 56%;
        background: url("../img/bg/hero-heat.webp") 72% center / cover no-repeat;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 46%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 46%);
    }

    .public-modern .hero-text {
        max-width: min(38rem, calc(48vw - 3rem));
    }

    .public-modern .hero-title-main {
        font-size: 4.5rem;
    }

    .public-modern .hero-title-sub {
        font-size: 2.25rem;
    }

    .public-modern .hero-lead {
        font-size: 1.25rem;
    }

    .public-modern .unit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .public-modern .home-units {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 2rem;
    }

    .public-modern .units-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 2rem;
    }

    .public-modern .units-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1.25rem;
        padding: 0.75rem 1.25rem;
    }

    .public-modern .units-toolbar .search-bar {
        flex: 1 1 22rem;
        margin: 0;
    }

    .public-modern .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .public-modern .step {
        padding: 1.5rem 1.25rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .public-modern .unit-card {
        transition: box-shadow 0.15s ease;
    }
}

.public-modern .unit-card:hover {
    box-shadow: var(--r4-shadow-hover);
}

/* ==========================================================================
   PUBLIC WEBSITE round 4.1 (2026-10-12): a shorter See all units and home
   "Aircon units we sell" — smaller cards (3:2 photo, tight text, tags side
   by side), more per row (2 phones / 3 tablets / 4 from 1024 / 5 from 1440
   on See all units), Type as tabs above the cards, a short sidebar (brand
   logos in 2 columns, HP as small toggle buttons in rows of 3) that stays
   in view on desktop, 12 cards per page with numbered page links. Below
   1024px both pages stack: the See all units sidebar folds behind
   "Filters" (with JS) and the home brands are one sideways row.
   Still only under body.public-modern.
   Contrast: tab text 15.2:1 on the page tint, picked tab primary-dark
   13.4:1 + a 3px underline; tab counts text on grey-200 12.0:1, picked
   count white on primary 7.0:1; HP buttons: border grey-400 3.2:1, picked
   = white on primary 7.0:1 + a check mark; brand tiles keep a real visible
   checkbox (Edge's border 4.5:1).
   ========================================================================== */

/* Very wide screens: one wider page width for every public section. */
@media (min-width: 1440px) {
    .public-modern .container {
        max-width: 1400px;
    }
}

/* ---------- Smaller unit cards (both pages) ---------- */

.public-modern .unit-card-compact .unit-photo {
    aspect-ratio: 3 / 2;
}

.public-modern .unit-card-compact .unit-photo img {
    transform: scale(1.06);
}

.public-modern .unit-card-compact .unit-photo-wide img {
    transform: none;
}

.public-modern .unit-photo .unit-feature {
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
}

.public-modern .unit-card-compact .unit-ph-brand {
    font-size: 1.05rem;
}

.public-modern .unit-card-compact .unit-body {
    gap: 0.1rem;
    padding: 0.5rem 0.65rem 0.6rem;
}

.public-modern .unit-card-compact .unit-brand {
    font-size: 0.7rem;
}

.public-modern .unit-card-compact .unit-model {
    font-size: 0.9rem;
    line-height: 1.25;
}

.public-modern .unit-card-compact .unit-type {
    font-size: 0.8rem;
}

/* Tags side by side on one line; they wrap only when the card is too narrow. */
.public-modern .unit-card-compact .unit-badges {
    flex-wrap: wrap;
    gap: 0.2rem;
    padding-top: 0.3rem;
}

.public-modern .unit-card-compact .unit-badge {
    padding: 0.08rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.35;
    white-space: nowrap;
}

.public-modern .unit-card-compact .unit-price {
    padding-top: 0.25rem;
    font-size: 1.05rem;
}

.public-modern .unit-grid {
    gap: 0.6rem;
}

/* ---------- See all units: type tabs ---------- */

.public-modern .type-tabs {
    margin: 0 0 0.75rem;
    padding-top: 4px;   /* room for the focus ring inside the scroller */
    overflow-x: auto;
    overflow-y: hidden;   /* 2026-10-19: no vertical scrollbar (the tabs' -2px underline overlap made one) */
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    border-bottom: 2px solid var(--r4-line);
}

.public-modern .type-tabs-list {
    display: flex;
    gap: 0.15rem;
    width: max-content;
    margin: 0;
    padding: 0 4px;
    list-style: none;
}

.public-modern .type-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin-bottom: -2px;
    padding: 0 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
}

.public-modern .type-tab:hover {
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-bottom-color: var(--color-grey-400);
}

/* Picked: bold + a thick blue underline + white background (not colour alone). */
.public-modern .type-tab.is-selected {
    font-weight: 800;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-bottom-color: var(--color-primary);
}

.public-modern .type-tab-count {
    min-width: 1.6rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    background: var(--color-grey-200);
    border-radius: 999px;
}

.public-modern .type-tab.is-selected .type-tab-count {
    color: var(--color-white);
    background: var(--color-primary);
}

/* Phones: the tab row scrolls sideways; a soft fade says there is more. */
@media (max-width: 767px) {
    .public-modern .type-tabs {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent 100%);
    }

    .public-modern .type-tabs-list {
        padding-right: 2rem;
    }
}

/* ---------- See all units: pagination ---------- */

.public-modern .units-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.public-modern .units-pagination .pagination-status {
    margin: 0;
    font-size: 0.94rem;
    color: var(--color-grey-600);
}

.public-modern .page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-modern .page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    background: var(--color-white);
    border: 2px solid var(--color-primary);   /* 6.4:1 on the page tint */
    border-radius: 8px;
}

.public-modern .page-num:hover {
    background: var(--color-primary-tint);
}

/* Current page: filled + bold, and aria-current for screen readers. */
.public-modern .page-num.is-current {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.public-modern .page-gap {
    padding: 0 0.25rem;
    color: var(--color-grey-600);
}

.public-modern .page-links .btn-sm {
    min-height: 44px;
}

/* ---------- Sidebar: brand tiles (2 columns) + HP buttons (rows of 3) ---------- */

.public-modern .filter-group {
    padding: 0.6rem 0 0.4rem;
}

.public-modern .filter-all {
    min-height: 40px;
}

.public-modern .filter-options-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.public-modern .filter-tile {
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--r4-line);
}

.public-modern .filter-tile:hover {
    border-color: var(--color-primary);
}

.public-modern .filter-tile:has(input:checked) {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.public-modern .filter-option.filter-tile input {
    width: 18px;
    height: 18px;
}

.public-modern .filter-tile-face {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
}

.public-modern .filter-tile .filter-logo {
    width: auto;
    height: 18px;
}

.public-modern .filter-tile .filter-logo img {
    max-width: 58px;
    max-height: 18px;
}

.public-modern .filter-tile .filter-option-text {
    font-size: 0.8rem;
    line-height: 1.2;
}

.public-modern .filter-options-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

/* The real checkbox covers the button (clicks and keyboard reach it);
   the face below it shows the state. */
.public-modern .filter-btn {
    position: relative;
    display: block;
    min-height: 44px;
    padding: 0;
}

.public-modern .filter-option.filter-btn .filter-btn-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.public-modern .filter-btn-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 44px;
    padding: 0.2rem 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-grey-400);
    border-radius: 8px;
}

.public-modern .filter-btn-face .icon-check {
    display: none;
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 3;
}

.public-modern .filter-btn:hover .filter-btn-face {
    border-color: var(--color-primary);
}

/* Picked: filled blue, bold and a check mark. */
.public-modern .filter-btn-input:checked + .filter-btn-face {
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.public-modern .filter-btn-input:checked + .filter-btn-face .icon-check {
    display: inline-block;
}

.public-modern .filter-btn-input:focus-visible + .filter-btn-face {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------- Home: HP buttons + brand tiles look ---------- */

.public-modern .home-hp-list .pill {
    justify-content: center;
    min-height: 44px;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

.public-modern .home-hp-list .pill .icon-check {
    width: 0.95rem;
    height: 0.95rem;
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .public-modern .filter-options-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .public-modern .filter-options-buttons {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .public-modern .units-pagination {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* ---------- 768px: 3 cards per row; still no sidebar ---------- */

@media (min-width: 768px) {
    .public-modern .unit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* 768-1023 with JS: the Filters button and panel, as on phones (older
   rules hide them from 768 with !important). */
@media (min-width: 768px) and (max-width: 1023px) {
    .public-modern .units-sidebar .filters-toggle:not([hidden]) {
        display: inline-flex !important;
    }

    .public-modern .unit-filters.js-panel:not(.is-open) {
        display: none;
    }

    .public-modern .unit-filters.js-panel.is-open {
        display: block;
        padding: 0.5rem 1rem 0;
        background: var(--color-white);
        border: 1px solid var(--r4-line);
        box-shadow: var(--r4-shadow);
    }

    .public-modern .unit-filters.js-panel.is-open .filters-panel-actions,
    .public-modern .unit-filters:not(.js-panel) .filters-panel-actions {
        display: flex !important;
    }
}

/* ---------- 1024px: sidebars beside the cards, 4 per row ---------- */

@media (min-width: 1024px) {
    .public-modern .unit-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
    }

    /* Home: brands + HP down the left, 2 rows of 4 cards on the right. */
    .public-modern .home-units {
        grid-template-columns: 236px minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;
    }

    .public-modern .home-units-side {
        gap: 0.9rem;
        padding: 0.9rem 0.75rem;
    }

    .public-modern .home-brand-scroll {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Brand tiles in 2 columns; "All" across the top. */
    .public-modern .home-brand-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        width: auto;
        padding: 0;
    }

    .public-modern .home-brand-list > li:first-child {
        grid-column: 1 / -1;
    }

    .public-modern .home-brand {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.1rem;
        min-height: 48px;
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        border: 1px solid var(--color-grey-400);   /* 3.2:1: the only edge these links have */
        border-radius: 8px;
    }

    .public-modern .home-brand-list > li:first-child .home-brand {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        font-size: 1rem;
    }

    .public-modern .home-brand:hover {
        background: var(--color-grey-50);
        border-color: var(--color-primary);
    }

    .public-modern .home-brand.is-selected {
        background: var(--color-primary-tint);
        border-color: var(--color-primary);
        box-shadow: inset 0 0 0 2px var(--color-primary);
    }

    .public-modern .home-brand-logo {
        justify-content: flex-start;
        width: auto;
        height: 18px;
    }

    .public-modern .home-brand-logo img {
        max-width: 58px;
        max-height: 18px;
    }

    .public-modern .home-brand-nologo {
        display: inline-flex;
    }

    /* HP: small buttons, 3 per row. */
    .public-modern .home-hp-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .public-modern .home-hp-list .pill {
        width: 100%;
        padding: 0.15rem 0.3rem;
        line-height: 1.15;
        text-align: center;
    }

    .public-modern .home-see-all {
        text-align: right;
    }

    /* See all units: the sidebar beside the cards, in view while scrolling
       (scrolls on its own when taller than the screen). */
    .public-modern .units-layout {
        grid-template-columns: 236px minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;
    }

    .public-modern .units-sidebar {
        position: sticky;
        top: 0.75rem;
        max-height: calc(100vh - 1.5rem);
        margin: -4px;
        padding: 4px;   /* room for focus rings and the card shadow */
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .public-modern .unit-filters.js-panel:not(.is-open),
    .public-modern .unit-filters.js-panel.is-open {
        display: block;
        padding: 0.4rem 0.85rem 0.75rem;
        background: var(--color-white);
        border: 1px solid var(--r4-line);
        box-shadow: var(--r4-shadow);
    }

    .public-modern .unit-filters {
        padding: 0.4rem 0.85rem 0.75rem;
    }

    .public-modern .filter-options-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-modern .filter-options-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Without JS the boxes need "Show units"; with JS a tick filters at once. */
    .public-modern .unit-filters:not(.js-panel) .filters-panel-actions {
        display: flex !important;
        flex-wrap: wrap;
    }

    .public-modern .units-toolbar {
        padding: 0.6rem 1rem;
    }
}

/* ---------- 1440px: 5 cards per row on See all units ---------- */

@media (min-width: 1440px) {
    .public-modern .units-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .public-modern .units-layout,
    .public-modern .home-units {
        grid-template-columns: 250px minmax(0, 1fr);
    }
}

/* ==========================================================================
   ROUND 5 (2026-10-12), Part A: unit cards (home + See all units) — the
   price and an "Inquire" button (the shop's Facebook page, outline style so
   the price stays the main thing) share the card's last line; at most 4
   cards per row.
   ========================================================================== */

.public-modern .unit-card-compact .unit-foot {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.5rem;
    padding-top: 0.3rem;
}

.public-modern .unit-card-compact .unit-foot .unit-price {
    margin: 0;
    padding: 0;
}

.public-modern .unit-inquire {
    min-height: 44px;
    padding: 0.3rem 0.85rem;
    font-size: 0.875rem;
}

@media (min-width: 1440px) {
    .public-modern .units-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   ROUND 5, Part B: the signed-in CUSTOMER layout (docs/mockup.png
   "Customer Dashboard") — body.cust-modern on customer_dashboard.php,
   my_orders.php, my_notifications.php, profile.php, booking.php and the
   customer view of work_order_detail.php. Markup: views/_customer_shell_top.php
   / _customer_shell_bottom.php. White top bar, navy sidebar menu (a panel
   opened by Menu below 1024px), light page, white cards.
   Contrast: sidebar text white on navy 14.9:1, current item white on
   primary 7.0:1 + a white bar + bold (not colour alone), unread count navy
   on white 14.9:1; Log Out border (white 60%) on navy 6.0:1; stat icons
   primary on tint 6.2:1, the "needs response" icon #b3261e on #fdecea
   5.7:1; amber card text 15+:1, its icon #8a4b00 on #fff4dc 6.2:1; page
   text on #eef3f9 13.4+:1, muted 6.8:1.
   ========================================================================== */

.cust-modern {
    --c5-page: #eef3f9;
    --c5-line: #dbe4ee;
    --c5-radius: 14px;
    --c5-shadow: 0 1px 2px rgba(1, 36, 92, 0.05), 0 6px 18px rgba(1, 36, 92, 0.07);
    background: var(--c5-page);
}

html.cust-menu-open {
    overflow: hidden;
}

/* ---------- Top bar ---------- */

.cust-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 68px;
    padding: 0.5rem 1rem;
    background: var(--color-white);
    border-bottom: 1px solid var(--c5-line);
    box-shadow: 0 2px 10px rgba(1, 36, 92, 0.05);
}

.cust-icon {
    flex: none;
    width: 22px;
    height: 22px;
}

.cust-menu-btn {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    cursor: pointer;
}

.cust-menu-btn[aria-expanded="true"] {
    background: var(--color-primary-tint);
}

.cust-menu-dot {
    min-width: 1.35rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    color: var(--color-white);
    background: var(--color-error);
    border-radius: 999px;
}

.cust-modern .cust-brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 44px;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.cust-logo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

.cust-brand-name {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
}

.cust-modern .cust-topbar-phone {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-left: auto;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.cust-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

.cust-topbar-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-grey-600);
}

.cust-modern .cust-account {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.cust-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
}

.cust-modern .cust-account[aria-current="page"] .cust-avatar {
    box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-primary);
}

/* Phones: logo, Call icon and the initial only (the words stay for screen readers). */
.cust-brand-name,
.cust-topbar-phone-text,
.cust-account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---------- Sidebar (a panel below 1024px) ---------- */

.cust-shell {
    min-width: 0;
}

.cust-modern .cust-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(300px, 86vw);
    padding: 1rem 0.75rem;
    overflow-y: auto;
    color: var(--color-white);
    background: var(--color-primary-dark);
    visibility: hidden;
    transform: translateX(-100%);
}

.cust-modern .cust-sidebar.open {
    visibility: visible;
    transform: none;
    box-shadow: 0 0 40px rgba(1, 20, 50, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
    .cust-modern .cust-sidebar {
        transition: transform 0.2s ease, visibility 0.2s;
    }

    /* Opening: visible at once (so focus can move in); closing: hidden after the slide. */
    .cust-modern .cust-sidebar.open {
        transition: transform 0.2s ease, visibility 0s;
    }
}

.cust-modern .cust-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(1, 20, 50, 0.5);
}

.cust-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0 0.25rem;
}

.cust-sidebar-title {
    font-size: 1.125rem;
    font-weight: 800;
}

.cust-sidebar-close {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    cursor: pointer;
}

.cust-menu {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cust-modern .cust-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0 0.85rem;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    border-left: 4px solid transparent;
    border-radius: 10px;
}

.cust-modern .cust-menu-link:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

/* Current page: lighter blue, bold and a white bar on the left. */
.cust-modern .cust-menu-link.is-current {
    font-weight: 800;
    background: var(--color-primary);
    border-left-color: var(--color-white);
}

.cust-menu-count {
    min-width: 1.6rem;
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-radius: 999px;
}

.cust-sidebar-foot {
    margin-top: auto;
    padding-top: 1.5rem;
}

.cust-sidebar-foot .logout-form {
    margin: 0;
}

.cust-modern .cust-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    cursor: pointer;
}

/* The door-and-arrow icon (the button text comes from logoutForm()). */
.cust-modern .cust-logout::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cust-modern .cust-logout:hover,
.cust-modern .cust-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* White focus ring on the navy panel. */
.cust-modern .cust-sidebar a:focus-visible,
.cust-modern .cust-sidebar button:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

/* ---------- Content column ---------- */

.cust-content {
    min-width: 0;
    padding: 0 1rem;
}

.cust-modern .cust-content .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

.cust-modern .cust-content .cust-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding-top: 1.25rem;
}

.cust-modern .cust-back {
    margin: 0;
}

.cust-modern .cust-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
}

.cust-modern .cust-back a:hover {
    text-decoration: underline;
}

.cust-modern .cust-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

.cust-modern .cust-title.order-band-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.cust-modern .cust-lead {
    margin: 0.3rem 0 0;
    color: var(--color-grey-600);
}

.cust-modern .cust-content .account-page {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* Cards: white, thin light border, soft shadow, round corners. */
.cust-modern .account-card {
    border: 1px solid var(--c5-line);
    border-radius: var(--c5-radius);
    box-shadow: var(--c5-shadow);
}

/* The slim footer (shopFooterHtml()) at the end of the content column. */
.cust-modern .site-footer {
    margin-top: 0.5rem;
    padding: 1rem 0 1.5rem;
    font-size: 0.875rem;
    color: var(--color-grey-600);
    background: transparent;
    border-top: 1px solid var(--c5-line);
}

.cust-modern .site-footer a {
    color: var(--color-primary);
}

.cust-modern .site-footer p,
.cust-modern .site-footer .footer-contact {
    color: var(--color-grey-600);
    opacity: 1;
}

.cust-modern .site-footer a:focus-visible,
.cust-modern .site-footer button:focus-visible {
    outline-color: var(--color-primary);
}

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

.dash-head-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.dash-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin: 0;
    padding: 0 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--c5-line);
    border-radius: 10px;
}

.dash-date .cust-icon {
    color: var(--color-primary);
}

.stat-cards {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--c5-line);
    border-radius: var(--c5-radius);
    box-shadow: var(--c5-shadow);
}

.stat-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

.stat-icon .cust-icon {
    width: 26px;
    height: 26px;
}

.stat-card-alert.has-items .stat-icon {
    color: var(--color-error);
    background: var(--color-error-bg);
}

.stat-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label number"
        "link  number";
    align-items: center;
    column-gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.stat-label {
    grid-area: label;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.stat-number {
    grid-area: number;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary-dark);
}

.cust-modern .stat-link {
    grid-area: link;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    min-height: 44px;
    font-weight: 700;
    text-decoration: none;
}

.cust-modern .stat-link:hover {
    text-decoration: underline;
}

.stat-link .icon {
    width: 1rem;
    height: 1rem;
}

.dash-columns {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.dash-col {
    display: grid;
    gap: 1.25rem;
    align-content: start;
    min-width: 0;
}

/* Needs your action: a soft amber card with a warning icon while something
   needs the customer (the items keep their amber edge); plain when all set. */
.cust-modern .needs-action.is-highlighted {
    background: #fffaf0;
    border-color: #e6c98a;
    border-left: 5px solid var(--color-warning);
}

.cust-modern .needs-action .account-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.needs-action-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-warning);
    background: var(--color-warning-bg);
    border-radius: 50%;
}

.cust-modern .needs-action:not(.is-highlighted) .needs-action-icon {
    display: none;
}

.cust-modern .needs-action.is-highlighted .action-item {
    background: var(--color-white);
}

/* Recent orders: compact rows (icon, order no. + services | status + date). */
.recent-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.recent-item + .recent-item {
    border-top: 1px solid var(--c5-line);
}

.cust-modern .recent-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 60px;
    padding: 0.6rem 0.35rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 8px;
}

.cust-modern .recent-row:hover {
    color: var(--color-text);
    background: var(--color-grey-50);
}

.cust-modern .recent-row:hover .service-uid {
    text-decoration: underline;
}

.recent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: 10px;
}

.recent-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recent-services {
    font-size: 0.9rem;
    color: var(--color-grey-600);
    overflow-wrap: anywhere;
}

.recent-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    text-align: right;
}

.recent-date {
    font-size: 0.8rem;
    color: var(--color-grey-600);
}

.recent-side .order-row-hint {
    font-size: 0.8rem;
}

/* Need help? — a soft photo strip, then the shop phone. */
.cust-modern .help-card {
    padding: 0;
    overflow: hidden;
    background: var(--color-primary-tint);
}

.cust-modern .help-photo {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    object-position: 60% 30%;
    opacity: 0.9;
}

.help-body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem 1.1rem;
}

.help-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--color-primary);
    background: var(--color-white);
    border-radius: 50%;
}

.cust-modern .help-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.help-title span {
    display: block;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--color-grey-600);
}

.help-call {
    margin: 0.2rem 0 0;
    font-weight: 700;
}

.cust-modern .help-call a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.1rem;
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .stat-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stat-card {
        align-items: flex-start;
    }

    .stat-text {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "number"
            "link";
    }
}

/* ---------- 768px ---------- */

@media (min-width: 768px) {
    .cust-topbar {
        padding: 0.5rem 1.5rem;
        gap: 1rem;
    }

    .cust-brand-name,
    .cust-topbar-phone-text,
    .cust-account-name {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .cust-brand-name {
        max-width: 13rem;
    }

    .cust-content {
        padding: 0 1.5rem;
    }

    .cust-modern .cust-title {
        font-size: 2rem;
    }
}

/* ---------- 1024px: the sidebar beside the page ---------- */

@media (min-width: 1024px) {
    .cust-menu-btn,
    .cust-sidebar-head,
    .cust-modern .cust-backdrop {
        display: none;
    }

    .cust-topbar {
        padding: 0.5rem 2rem 0.5rem 1.5rem;
    }

    .cust-shell {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: start;
    }

    .cust-modern .cust-sidebar,
    .cust-modern .cust-sidebar.open {
        position: sticky;
        top: 1rem;
        z-index: auto;
        width: auto;
        max-height: calc(100vh - 2rem);
        min-height: min(560px, calc(100vh - 2rem));
        margin: 1rem 0 1rem 1rem;
        border-radius: 16px;
        visibility: visible;
        transform: none;
        box-shadow: var(--c5-shadow);
    }

    .cust-content {
        padding: 0 2rem 0 1.75rem;
    }

    .dash-columns {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* ==========================================================================
   ROUND 6 (2026-10-12), Part A: the shared "needs attention" box
   (views/_attention.php, docs/mockup-needs-attention.png) — customer
   dashboard "Needs your action" and admin dashboard "Needs Attention".
   White card, soft orange header strip, one row per item with a round icon
   AND a text label (Urgent / Needs action / Info — never colour alone).
   Contrast: title #8a4b00 on #fff4e5 6.6:1, header icon #b45309 on #fff4e5
   4.9:1; row icons on white: urgent #b3261e 6.5:1, needs action #b45309
   5.0:1, info #0258ad 7.0:1; level words the same colours (or darker);
   detail / time #4b5563 7.6:1.
   ========================================================================== */

.attention-box {
    padding: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(1, 36, 92, 0.05), 0 6px 18px rgba(1, 36, 92, 0.07);
}

.cust-modern .attention-box.account-card {
    padding: 0;
}

.attention-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.8rem 1.25rem;
    background: #fff4e5;
    border-bottom: 1px solid #f3d8b0;
}

.attention-box .attention-head h2.attention-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #8a4b00;
}

.attention-head-icon {
    flex: none;
    color: #b45309;
}

.attention-head-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.attention-head-links .notification-mark-all {
    margin: 0;
}

.attention-box .attention-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    font-weight: 700;
    color: var(--color-primary);
}

.attention-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.attention-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon id"
        "icon text"
        "icon meta"
        "act  act";
    gap: 0.35rem 0.85rem;
    align-items: start;
    padding: 0.9rem 1rem;
}

.attention-row + .attention-row {
    border-top: 1px solid #e8eef5;
}

.attention-icon {
    grid-area: icon;
    display: inline-flex;
    margin-top: 0.1rem;
}

.attention-icon svg {
    display: block;
}

.attention-icon-urgent { color: #b3261e; }
.attention-icon-reply  { color: #b45309; }
.attention-icon-info   { color: var(--color-primary); }

.attention-id {
    grid-area: id;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.5rem;
    min-width: 0;
}

.attention-uid {
    font-weight: 800;
    color: var(--color-text);
}

.attention-type {
    font-size: 0.85rem;
    color: var(--color-grey-600);
    overflow-wrap: anywhere;
}

.attention-text {
    grid-area: text;
    min-width: 0;
}

.attention-box .attention-headline {
    margin: 0;
    font-weight: 700;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.attention-box .attention-detail {
    margin: 0.15rem 0 0;
    font-size: 0.92rem;
    color: var(--color-grey-600);
    overflow-wrap: anywhere;
}

.attention-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.attention-level {
    font-weight: 700;
}

.attention-level-urgent { color: #b3261e; }
.attention-level-reply  { color: #8a4b00; }
.attention-level-info   { color: var(--color-primary); }

.attention-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.attention-actions {
    grid-area: act;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
}

.attention-box .attention-btn {
    display: inline-flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 8px;
}

.attention-box .attention-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.92rem;
    font-weight: 600;
}

/* The verify-email banner (emailVerifyBannerHtml()) as a row of the box. */
.attention-row-banner {
    grid-template-areas: "icon text";
    align-items: start;
}

.attention-banner {
    grid-area: text;
    min-width: 0;
}

.attention-box .attention-banner .verify-banner {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: 0;
}

.attention-box .all-set {
    padding: 1rem 1.25rem;
}

/* Phones: the banner's button is full width like the other rows' buttons. */
@media (max-width: 767px) {
    .attention-box .attention-banner .verify-banner-form .btn {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .attention-row {
        grid-template-columns: auto minmax(7rem, 11rem) minmax(0, 1fr) auto auto;
        grid-template-areas: "icon id text meta act";
        align-items: center;
        gap: 0.5rem 1.25rem;
        padding: 0.9rem 1.25rem;
    }

    .attention-id {
        flex-direction: column;
        align-items: flex-start;
    }

    .attention-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .attention-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.1rem;
    }

    .attention-box .attention-btn {
        flex: none;
    }

    .attention-row-banner {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icon text";
    }
}

/* ==========================================================================
   ROUND 6, Part B: the ADMIN layout (docs/mockup-admin.png) — every admin
   page (body.admin-modern): navy sidebar (views/_admin_nav.php; a panel
   opened by Menu below 1024px), page title + New Work Order on top
   (_admin_header.php), light page, white cards, light-header tables.
   Contrast: sidebar text white on navy 14.9:1, group words #c9dcf2 10.6:1,
   current item white on primary 7.0:1 + a white bar + bold; count badges
   white on #b3261e 6.5:1; stat icons on their tints >= 5.6:1; capacity bar
   fill primary on the track #e2e8f0 5.6:1 (the numbers are written too).
   ========================================================================== */

body.admin-modern {
    --a6-page: #eef3f9;
    --a6-line: #dbe4ee;
    --a6-radius: 14px;
    --a6-shadow: 0 1px 2px rgba(1, 36, 92, 0.05), 0 6px 18px rgba(1, 36, 92, 0.07);
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--a6-page);
}

html.admin-menu-open {
    overflow: hidden;
}

.admin-modern a:focus-visible,
.admin-modern button:focus-visible,
.admin-modern input:focus-visible,
.admin-modern select:focus-visible,
.admin-modern textarea:focus-visible,
.admin-modern summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-modern .skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-radius: 8px;
}

.admin-modern .skip-link:focus {
    top: 0.5rem;
}

.admin-modern .container {
    max-width: 1320px;
    padding: 0 1rem;
}

/* ---------- Page head (title + New Work Order) ---------- */

.admin-modern .admin-topbar {
    padding: 0.6rem 0;
    color: var(--color-text);
    background: var(--color-white);
    border-bottom: 1px solid var(--a6-line);
}

.admin-modern .admin-topbar .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.admin-menu-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    cursor: pointer;
}

.admin-modern .admin-page-head {
    flex: 1 1 12rem;
    min-width: 0;
}

.admin-modern .admin-page-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-primary-dark);
    overflow-wrap: anywhere;
}

.admin-modern .admin-page-lead {
    margin: 0.2rem 0 0;
    font-size: 0.95rem;
    color: var(--color-grey-600);
}

.admin-modern .admin-topbar .header-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.admin-modern .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 10px;
}

.admin-modern .header-cta:hover,
.admin-modern .header-cta:focus {
    color: var(--color-white);
    background: var(--color-primary-dark);
}

.admin-date {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    margin: 0;
    padding: 0 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: 10px;
}

.admin-date svg {
    color: var(--color-primary);
}

/* ---------- Sidebar ---------- */

.admin-modern .admin-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(300px, 86vw);
    padding: 0.9rem 0.75rem 1rem;
    overflow-y: auto;
    color: var(--color-white);
    background: var(--color-primary-dark);
    border: 0;
    visibility: hidden;
    transform: translateX(-100%);
}

.admin-modern .admin-sidebar.open {
    visibility: visible;
    transform: none;
    box-shadow: 0 0 40px rgba(1, 20, 50, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
    .admin-modern .admin-sidebar {
        transition: transform 0.2s ease, visibility 0.2s;
    }

    .admin-modern .admin-sidebar.open {
        transition: transform 0.2s ease, visibility 0s;
    }
}

.admin-modern .admin-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(1, 20, 50, 0.5);
}

.admin-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.25rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-modern .admin-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 44px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-white);
    text-decoration: none;
}

.admin-logo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}

/* The brand is a link inside .admin-nav: it wraps and has no pill. */
.admin-modern .admin-nav a.admin-brand {
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    white-space: normal;
    background: none;
}

.admin-sidebar-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 0.7rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-white);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    cursor: pointer;
}

.admin-modern .admin-sidebar .admin-nav-groups {
    max-width: none;
    margin: 0;
    padding: 0;
}

.admin-nav-group {
    margin: 0.9rem 0.75rem 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-on-dark-muted);
}

.admin-modern .admin-nav ul.admin-nav-list {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-modern .admin-nav ul.admin-nav-list-solo {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-modern .admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0 0.75rem;
    font-size: 0.97rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-white);
    text-decoration: none;
    border: 0;
    border-radius: 10px;
}

.admin-modern .admin-nav a:hover {
    color: var(--color-white);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
}

/* Current page: filled blue pill, bold and a white bar (not colour alone). */
.admin-modern .admin-nav a.is-current {
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border: 0;
    box-shadow: inset 4px 0 0 var(--color-white);
}

.admin-modern .admin-sidebar a:focus-visible,
.admin-modern .admin-sidebar button:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

.admin-nav-icon {
    flex: none;
}

.admin-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Settings dropdown (2026-10-19, _admin_nav.php): the button looks like a
   menu link with a chevron that turns when open; the 8 links sit indented
   under it with a line on the left. Open category = the filled pill; the
   Settings button itself then gets the white bar + bold (not colour alone). */
.admin-modern .admin-nav .admin-nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0 0.75rem;
    font: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--color-white);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.admin-modern .admin-nav .admin-nav-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.admin-modern .admin-nav .admin-nav-dropdown-toggle.is-current {
    font-weight: 800;
    box-shadow: inset 4px 0 0 var(--color-white);
}

/* hidden must win over the menu's display:flex (JS swaps link <-> button). */
.admin-modern .admin-nav a[hidden],
.admin-modern .admin-nav .admin-nav-dropdown-toggle[hidden] {
    display: none;
}

.admin-nav-chevron {
    flex: none;
    margin-left: auto;
}

.admin-nav-dropdown.is-open .admin-nav-chevron {
    transform: rotate(180deg);
}

.admin-modern .admin-nav ul.admin-subnav {
    display: grid;
    gap: 0.1rem;
    margin: 0.15rem 0 0.25rem 1.6rem;
    padding: 0 0 0 0.5rem;
    list-style: none;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.admin-modern .admin-nav ul.admin-subnav[hidden] {
    display: none;
}

.admin-modern .admin-nav .admin-subnav a {
    font-size: 0.92rem;
    font-weight: 600;
    white-space: normal;
}

/* ---------- Settings (views/settings.php, 2026-10-19) ----------
   The category list (icon, name, one line, On/Off word where it has one)
   as big tappable rows; each opens its own page with "All settings". */
.settings-intro {
    margin: 0 0 0.75rem;
    color: var(--color-grey-600);
}

.settings-cats {
    display: grid;
    gap: 0.6rem;
    max-width: 52rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.settings-cat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 44px;
    padding: 0.85rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.settings-cat:hover {
    color: var(--color-text);
    text-decoration: none;
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.settings-cat:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.settings-cat-badge {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

.settings-cat-text {
    display: grid;
    flex: 1 1 auto;
    gap: 0.15rem;
    min-width: 0;
}

.settings-cat-name {
    font-size: 1.05rem;
    font-weight: 800;
}

.settings-cat-desc {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-grey-600);
}

.settings-cat-state {
    flex: none;
}

.settings-cat-go {
    flex: none;
    color: var(--color-primary);
}

.settings-back {
    margin: 0 0 1rem;
}

.settings-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
}

.asapm-how-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.5;
}

.admin-modern .admin-nav .badge {
    min-width: 1.6rem;
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
    text-align: center;
    color: var(--color-white);
    background: var(--color-error);
    border-color: var(--color-error);
}

.admin-sidebar-foot {
    margin-top: auto;
    padding: 1rem 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.75rem;
}

.admin-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-radius: 50%;
}

.admin-user-text {
    display: grid;
    line-height: 1.25;
}

.admin-user-name {
    font-weight: 800;
}

.admin-user-role {
    font-size: 0.82rem;
    color: var(--color-on-dark-muted);
}

.admin-sidebar-foot .logout-form {
    display: block;
}

.admin-modern .admin-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 46px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.admin-modern .admin-logout::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.admin-modern .admin-logout:hover,
.admin-modern .admin-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ---------- Cards, headings, tables, buttons (every admin page) ---------- */

.admin-modern .section {
    padding: 1rem 0 2rem;
}

.admin-modern .dash-block,
.admin-modern .panel,
.admin-modern .receipt {
    padding: 1.1rem;
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: var(--a6-radius);
    box-shadow: var(--a6-shadow);
}

.admin-modern .dash-block {
    margin-bottom: 1.25rem;
}

/* A card inside a card stays flat. */
.admin-modern .dash-block .panel,
.admin-modern .dash-block .dash-block,
.admin-modern .panel .panel {
    box-shadow: none;
}

.admin-modern .dash-heading,
.admin-modern .section h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.admin-modern .dash-sub,
.admin-modern .form-hint {
    color: var(--color-grey-600);
}

.admin-modern .table-wrap {
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: 12px;
}

.admin-modern .data-table th {
    padding: 0.7rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-grey-600);
    background: #f4f7fa;
    border-bottom: 1px solid var(--a6-line);
}

.admin-modern .data-table td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #e8eef5;
}

.admin-modern .data-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-modern .btn {
    font-family: inherit;
    font-weight: 600;
    border-radius: 8px;
}

/* Secondary: white with a grey edge (also the not-picked tabs). */
.admin-modern .btn-secondary {
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
}

.admin-modern .btn-secondary:hover,
.admin-modern .btn-secondary:focus {
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.admin-modern .btn-ghost {
    border-color: var(--color-primary);
}

.admin-modern .tab-links .btn {
    border-radius: 999px;
}

.admin-modern .order-list {
    overflow: hidden;
    border-color: var(--a6-line);
    border-radius: 12px;
}

.admin-modern .alert {
    border-radius: 10px;
}

.admin-modern .empty-state {
    color: var(--color-grey-600);
    background: #f4f7fa;
    border-color: var(--a6-line);
    border-radius: 10px;
}

.admin-modern .search-field input {
    min-height: 44px;
    border: 1px solid var(--color-grey-400);
    border-radius: 8px;
}

.admin-modern .site-footer {
    padding: 1rem 0 1.5rem;
    font-size: 0.85rem;
    color: var(--color-grey-600);
    background: transparent;
    border-top: 1px solid var(--a6-line);
}

.admin-modern .site-footer .footer-contact,
.admin-modern .site-footer p {
    color: var(--color-grey-600);
}

.admin-modern .site-footer a {
    color: var(--color-primary);
}

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

.admin-dashboard .dash-stats {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.admin-stat-grid {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-modern .admin-stat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: var(--a6-radius);
    box-shadow: var(--a6-shadow);
}

.admin-modern .admin-stat:hover {
    color: var(--color-text);
    border-color: var(--color-primary);
}

.admin-stat-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
}

.stat-amber .admin-stat-icon  { color: #8a4b00; background: #fff4dc; }
.stat-blue .admin-stat-icon   { color: var(--color-primary); background: var(--color-primary-tint); }
.stat-violet .admin-stat-icon { color: #5b3fa3; background: #ede7fb; }
.stat-green .admin-stat-icon  { color: var(--color-success); background: var(--color-success-bg); }

.admin-stat-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-stat-label {
    font-weight: 700;
}

.admin-stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary-dark);
}

.admin-stat-note {
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.admin-stat-arrow {
    font-size: 1.6rem;
    color: var(--color-grey-600);
}

.admin-dashboard .allocate-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    background: var(--color-primary-tint);
    border-color: #b9d6f2;
}

.allocate-text {
    flex: 1 1 22rem;
    min-width: 0;
}

.admin-dashboard .allocate-text .dash-sub {
    margin: 0;
    color: var(--color-text);
}

.admin-dashboard .allocate-action .btn {
    min-height: 48px;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.admin-dashboard .admin-attention {
    padding: 0;
}

.dash-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1.25rem;
    align-items: start;
}

.admin-dashboard .dash-two .dash-heading,
.admin-dashboard .quick-actions .dash-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.admin-dashboard .dash-two .dash-heading svg,
.admin-dashboard .quick-actions .dash-heading svg {
    color: var(--color-primary);
}

.admin-dashboard .capacity-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
}

.admin-dashboard .capacity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 0.85rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--a6-line);
    border-radius: 12px;
}

/* Unavailable (On Leave / Inactive / team inactive): a grey card, full-strength
   text (the old 65% opacity dropped it below 4.5:1); the badges say why. */
.admin-dashboard .capacity-card.is-unavailable {
    opacity: 1;
    background: #f4f7fa;
}

.capacity-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

.capacity-who {
    min-width: 0;
}

.admin-dashboard .capacity-head {
    justify-content: flex-start;
    margin: 0;
}

.capacity-team {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.capacity-load {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.6rem;
    align-items: center;
}

.admin-dashboard .capacity-meta {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.88rem;
}

.admin-dashboard .capacity-bar {
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
}

.admin-dashboard .capacity-bar::-webkit-progress-bar {
    background: #e2e8f0;
    border-radius: 999px;
}

.admin-dashboard .capacity-bar::-webkit-progress-value {
    background: var(--color-primary);
    border-radius: 999px;
}

.admin-dashboard .capacity-bar::-moz-progress-bar {
    background: var(--color-primary);
    border-radius: 999px;
}

.admin-dashboard .capacity-bar.is-full::-webkit-progress-value {
    background: var(--color-error);
}

.admin-dashboard .capacity-bar.is-full::-moz-progress-bar {
    background: var(--color-error);
}

.capacity-percent {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.admin-dashboard .today-block .queue-head {
    align-items: center;
}

.admin-modern .today-uid {
    font-weight: 800;
}

.today-none {
    color: var(--color-grey-600);
    font-style: italic;
}

/* Today's Work Orders (2026-10-15): never scrolls sideways. Phones = one small
   card per order (order no. + status, service, team); from 768px the table.
   The order-no. link's ::after covers the whole row / card, so the whole
   thing opens the order (plain link, works without JS). */
.admin-modern .today-wrap {
    overflow: visible;
}

.admin-modern .today-table,
.admin-modern .today-table tbody,
.admin-modern .today-table td {
    display: block;
}

.admin-modern .today-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.admin-modern .today-table .today-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.6rem;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #e8eef5;
}

.admin-modern .today-table .today-row:last-child {
    border-bottom: 0;
}

.admin-modern .today-table .today-row:hover {
    background: var(--color-primary-tint);
}

.admin-modern .today-table td {
    min-width: 0;
    padding: 0;
    white-space: normal;
    border: 0;
    overflow-wrap: anywhere;
}

.admin-modern .today-table .today-col-uid    { grid-column: 1; grid-row: 1; }
.admin-modern .today-table .today-col-status { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
.admin-modern .today-table .today-col-service,
.admin-modern .today-table .today-col-team   { grid-column: 1 / -1; }

.admin-modern .today-table .today-col-team {
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

.admin-modern .today-uid::after {
    content: "";
    position: absolute;
    inset: 0;
}

.admin-modern .today-uid:focus-visible {
    outline: none;
}

.admin-modern .today-uid:focus-visible::after {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .admin-modern .today-table {
        display: table;
    }

    .admin-modern .today-table thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .admin-modern .today-table tbody {
        display: table-row-group;
    }

    .admin-modern .today-table .today-row {
        display: table-row;
        padding: 0;
    }

    .admin-modern .today-table td {
        display: table-cell;
        padding: 0.7rem 0.8rem;
        vertical-align: middle;
        border-bottom: 1px solid #e8eef5;
    }

    .admin-modern .today-table .today-row:last-child td {
        border-bottom: 0;
    }

    .admin-modern .today-table .today-col-status {
        text-align: left;
    }

    /* Order no. and status never break; service and team wrap instead. */
    .admin-modern .today-table .today-col-uid,
    .admin-modern .today-table .today-col-status {
        width: 1%;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .admin-modern .today-table .today-col-team {
        font-size: inherit;
        color: inherit;
    }

    .admin-modern .today-table .today-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

.quick-grid {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-modern .quick-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    min-height: 64px;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--a6-line);
    border-radius: 12px;
}

.admin-modern .quick-card:hover {
    color: var(--color-text);
    background: #f4f7fa;
    border-color: var(--color-primary);
}

.quick-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

.quick-sub {
    display: block;
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.queue-details > .queue-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}

.queue-details > .queue-summary::-webkit-details-marker {
    display: none;
}

.queue-summary-hint {
    flex: none;
    padding: 0.3rem 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
}

.queue-summary-hint::after {
    content: " \25BE";
}

.queue-details[open] .queue-summary-hint {
    font-size: 0;
}

.queue-details[open] .queue-summary-hint::after {
    content: "Hide \25B4";
    font-size: 1rem;
}

.queue-details[open] > .queue-summary {
    margin-bottom: 0.75rem;
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .admin-stat-grid,
    .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard .capacity-card {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 14rem);
    }

    .capacity-load {
        grid-column: auto;
    }
}

/* ---------- 768px ---------- */

@media (min-width: 768px) {
    .admin-modern .container {
        padding: 0 1.5rem;
    }

    .admin-modern .admin-page-title {
        font-size: 1.6rem;
    }

    .admin-modern .dash-block,
    .admin-modern .panel {
        padding: 1.25rem 1.4rem;
    }
}

/* ---------- 1024px: the sidebar beside the page ---------- */

@media (min-width: 1024px) {
    body.admin-modern {
        display: grid;
        /* The sidebar column stays navy all the way down a long page. */
        background: linear-gradient(90deg, var(--color-primary-dark) 264px, var(--a6-page) 264px);
        grid-template-columns: 264px minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "side top"
            "side main"
            "side foot";
        min-height: 100vh;
    }

    .admin-modern .admin-topbar {
        grid-area: top;
        padding: 1.4rem 0 0.4rem;
        background: transparent;
        border: 0;
    }

    .admin-modern main.section {
        grid-area: main;
        min-width: 0;
    }

    .admin-modern .site-footer {
        grid-area: foot;
        margin: 0 2rem;
    }

    .admin-menu-btn,
    .admin-sidebar-close,
    .admin-modern .admin-backdrop:not([hidden]) {
        display: none;
    }

    .admin-modern .admin-sidebar,
    .admin-modern .admin-sidebar.open {
        grid-area: side;
        position: sticky;
        top: 0;
        z-index: auto;
        width: auto;
        height: 100vh;
        visibility: visible;
        transform: none;
        box-shadow: none;
    }

    .admin-modern .container {
        padding: 0 2rem;
    }

    .admin-modern .admin-page-title {
        font-size: 2rem;
    }

    .admin-stat-grid,
    .quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .dash-two {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
}

/* ==========================================================================
   ROUND 7 (2026-10-12), Part 1: admin dashboard Priority Queue — the work
   order queue right under the stat cards, with each row's priority score.
   ========================================================================== */

.admin-dashboard .priority-formula {
    margin: 0.15rem 0 0.35rem;
    font-weight: 600;
    color: var(--color-grey-600);
}

/* Compact Priority Queue (2026-10-15): open jobs only, top 6, one line per
   order from 768px (order no. + customer | service + date chip | score +
   ONE status chip), two lines on phones. Urgency = the row's left edge:
   Emergency solid red (#b3261e, 6.5:1 on white), High striped orange
   (#b45309, 5.0:1) — shape as well as colour, legend under the list. */
.admin-dashboard .pq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.25rem;
}

.admin-dashboard .pq-head .dash-heading {
    margin: 0;
}

.admin-dashboard .pq-tabs {
    margin: 0;
}

.admin-dashboard .pq-how {
    margin: 0 0 0.6rem;
}

.admin-dashboard .pq-how summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}

.admin-dashboard .pq-how summary::-webkit-details-marker {
    display: none;
}

.admin-dashboard .pq-how .dash-sub {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
}

.admin-dashboard .pq-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--a6-line);
    border-radius: 12px;
    overflow: hidden;
}

.admin-dashboard .pq-row + .pq-row {
    border-top: 1px solid #e8eef5;
}

.admin-dashboard .pq-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "who status"
        "what what";
    align-items: center;
    gap: 0.2rem 0.75rem;
    min-height: 44px;
    padding: 0.55rem 0.8rem 0.55rem 1.1rem;
    color: var(--color-text);
    text-decoration: none;
}

.admin-dashboard .pq-link:hover {
    background: var(--color-primary-tint);
}

.admin-dashboard .pq-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

/* The urgency edge. */
.admin-dashboard .pq-link::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
}

.admin-dashboard .pq-emergency .pq-link::before,
.admin-dashboard .pq-swatch-emergency {
    background: #b3261e;
}

.admin-dashboard .pq-high .pq-link::before,
.admin-dashboard .pq-swatch-high {
    background: repeating-linear-gradient(180deg, #b45309 0 5px, #fbd9b0 5px 8px);
}

.admin-dashboard .pq-who {
    grid-area: who;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    min-width: 0;
}

.admin-dashboard .pq-uid {
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
}

.admin-dashboard .pq-customer {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.admin-dashboard .pq-what {
    grid-area: what;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

.admin-dashboard .pq-service {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-dashboard .pq-when {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.4rem;
}

.admin-dashboard .pq-noteam {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-grey-600);
    white-space: nowrap;
}

.admin-dashboard .pq-status {
    grid-area: status;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    white-space: nowrap;
}

.admin-dashboard .pq-score {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-grey-600);
    font-variant-numeric: tabular-nums;
}

.admin-dashboard .pq-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--color-grey-600);
}

.admin-dashboard .pq-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-dashboard .pq-swatch {
    display: inline-block;
    width: 6px;
    height: 16px;
    border-radius: 2px;
}

.admin-dashboard .pq-more {
    margin: 0.25rem 0 0;
}

.admin-dashboard .pq-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    font-weight: 700;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .admin-dashboard .pq-link {
        /* Fixed status column so the middle column starts at the same x on every row. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 10.5rem;
        grid-template-areas: "who what status";
    }

    .admin-dashboard .pq-who,
    .admin-dashboard .pq-what {
        flex-wrap: nowrap;
    }

    .admin-dashboard .pq-customer,
    .admin-dashboard .pq-service {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==========================================================================
   ROUND 7, Part 2: the TECHNICIAN layout — the same look as the customer
   and admin sides. body.tech-modern (+ .tech-layout on pages with the
   technician header, views/_tech_header.php): white top bar, from 768px a
   navy sidebar beside the page, below 768px a fixed bottom tab bar (hidden
   on the Complete Job page, whose own step button is pinned to the bottom).
   Outdoor rules kept: 17px+ text, 48px buttons; text on the page tint uses
   #3f4757 (8.2:1), on white #1a2233 / #4b5563 (15.9 / 7.6:1).
   Contrast: sidebar white on navy 14.9:1, current item white on primary
   7.0:1 + a white bar + bold; tab bar words #4b5563 on white 7.6:1, current
   #01245c 14.9:1 + a top bar + tinted pill + bold; counts white on #b3261e
   6.5:1 / navy on white 14.9:1.
   ========================================================================== */

.public-site.tech-modern {
    --t7-page: #eef3f9;
    --t7-line: #dbe4ee;
    --t7-muted: #3f4757;
    --t7-shadow: 0 1px 2px rgba(1, 36, 92, 0.05), 0 6px 18px rgba(1, 36, 92, 0.07);
    background: var(--t7-page);
}

/* ---------- Top bar ---------- */

.public-site.tech-modern .tech-topbar {
    padding: 0.45rem 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--t7-line);
    box-shadow: 0 2px 10px rgba(1, 36, 92, 0.05);
}

.public-site.tech-modern .tech-header .tech-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.public-site.tech-modern .tech-brand {
    flex: none;
}

/* Phones: the logo only (the shop name stays for screen readers). */
.public-site.tech-modern .tech-brand .public-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.public-site.tech-modern .tech-account {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 48px;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.tech-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
}

.public-site.tech-modern .tech-account[aria-current="page"] .tech-avatar {
    box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-primary);
}

.tech-account-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Sidebar (768+) ---------- */

.public-site.tech-modern .tech-sidebar {
    display: none;
}

.tech-menu {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-site.tech-modern .tech-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0 0.85rem;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    border-left: 4px solid transparent;
    border-radius: 10px;
}

.public-site.tech-modern .tech-menu-link:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.public-site.tech-modern .tech-menu-link.is-current {
    font-weight: 800;
    background: var(--color-primary);
    border-left-color: var(--color-white);
}

.public-site.tech-modern .tech-sidebar a:focus-visible,
.public-site.tech-modern .tech-sidebar button:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

.tech-nav-icon {
    flex: none;
}

.tech-count {
    min-width: 1.6rem;
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-radius: 999px;
}

.tech-sidebar-foot {
    margin-top: auto;
    padding-top: 1.5rem;
}

.tech-sidebar-foot .logout-form {
    display: block;
    margin: 0;
}

.public-site.tech-modern .tech-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 52px;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-white);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.public-site.tech-modern .tech-logout:hover {
    background: rgba(255, 255, 255, 0.12);
}

.public-site.tech-modern .tech-logout::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5v16h5M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Bottom tab bar (phones) ---------- */

.tech-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-white);
    border-top: 1px solid var(--t7-line, #dbe4ee);
    box-shadow: 0 -4px 14px rgba(1, 36, 92, 0.08);
}

.tech-tabbar ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-site.tech-modern .tech-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 64px;
    padding: 0.35rem 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-grey-600);
    text-decoration: none;
}

.tech-tab-icon {
    position: relative;
    display: inline-flex;
    padding: 0.2rem 0.95rem;
    border-radius: 999px;
}

/* Current tab: a bar on top, a tinted pill behind the icon, bold dark words. */
.public-site.tech-modern .tech-tab.is-current {
    color: var(--color-primary-dark);
    font-weight: 800;
    box-shadow: inset 0 3px 0 var(--color-primary);
}

.tech-tab.is-current .tech-tab-icon {
    background: var(--color-primary-tint);
}

.public-site.tech-modern .tech-tab:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.tech-tab-count {
    position: absolute;
    top: -0.3rem;
    right: 0.2rem;
    min-width: 1.4rem;
    margin: 0;
    padding: 0 0.35rem;
    font-size: 0.78rem;
    color: var(--color-white);
    background: var(--color-error);
}

/* Room for the tab bar so it never covers the end of a page. */
body.tech-layout {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* Complete Job (steps 1-3, done screen): no tab bar — the step's own main
   button is pinned to the bottom of the screen there. */
body.tech-layout.tech-job-page {
    padding-bottom: 0;
}

.tech-job-page .tech-tabbar {
    display: none;
}

/* ---------- Page head (was the photo band) ---------- */

.public-site.tech-modern .tech-page-head {
    padding-top: 1.1rem;
}

.public-site.tech-modern .tech-back {
    margin: 0;
}

.public-site.tech-modern .tech-back a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-weight: 700;
    text-decoration: none;
}

.public-site.tech-modern .tech-back a:hover {
    text-decoration: underline;
}

.public-site.tech-modern .tech-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-primary-dark);
}

.public-site.tech-modern .tech-title.order-band-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.public-site.tech-modern .tech-lead {
    margin: 0.3rem 0 0;
    color: var(--t7-muted);
}

.tech-dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.tech-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    margin: 0;
    padding: 0 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--t7-line);
    border-radius: 10px;
}

.tech-date svg {
    color: var(--color-primary);
}

/* ---------- Cards ---------- */

.public-site.tech-modern .account-card,
.public-site.tech-modern .tech-actions,
.public-site.tech-modern .plan-card,
.public-site.tech-modern .tech-card {
    border: 1px solid var(--t7-line);
    border-radius: 14px;
    box-shadow: var(--t7-shadow);
}

.public-site.tech-modern .today-plan {
    padding: 1.1rem;
    background: var(--color-white);
    border: 1px solid var(--t7-line);
    border-radius: 14px;
    box-shadow: var(--t7-shadow);
}

.public-site.tech-modern .attention-box.account-card {
    padding: 0;
}

.public-site.tech-modern .account-page {
    padding-top: 1rem;
}

/* ---------- Dashboard stat cards ---------- */

.tech-stats {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-stat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.8rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--t7-line);
    border-radius: 14px;
    box-shadow: var(--t7-shadow);
}

.tech-stat-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: 50%;
}

.tech-stat-icon .plan-icon {
    width: 26px;
    height: 26px;
}

.tech-stat-done .tech-stat-icon {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.tech-stat-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "note  value";
    align-items: center;
    column-gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.tech-stat-label {
    grid-area: label;
    font-weight: 700;
    color: var(--color-grey-600);
}

.public-site.tech-modern .tech-stat-value {
    grid-area: value;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary-dark);
}

.public-site.tech-modern .tech-stat-link {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-size: 1.15rem;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tech-stat-note {
    grid-area: note;
    font-size: 0.94rem;
    color: var(--color-grey-600);
}

/* ---------- Need help? (tech-band photo) ---------- */

.public-site.tech-modern .help-card {
    padding: 0;
    overflow: hidden;
    background: var(--color-primary-tint);
}

.public-site.tech-modern .help-photo {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    object-position: center 35%;
}

.public-site.tech-modern .help-body {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem 1.1rem;
}

.public-site.tech-modern .help-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--color-primary);
    background: var(--color-white);
    border-radius: 50%;
}

.public-site.tech-modern .help-icon .plan-icon {
    width: 26px;
    height: 26px;
}

.public-site.tech-modern .help-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.public-site.tech-modern .help-title span {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--t7-muted);
}

.public-site.tech-modern .help-call {
    margin: 0.2rem 0 0;
}

.public-site.tech-modern .help-call a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-size: 1.2rem;
    font-weight: 800;
}

/* My Profile: Log Out card. */
.public-site.tech-modern .tech-logout-card .logout-form,
.public-site.tech-modern .tech-logout-card .btn {
    display: block;
    width: 100%;
}

/* Footer on the light page: dark text, blue links (it was white-on-navy). */
.public-site.tech-modern .site-footer {
    color: var(--t7-muted);
    background: transparent;
    border-top: 1px solid var(--t7-line);
}

.public-site.tech-modern .site-footer p,
.public-site.tech-modern .site-footer .footer-contact {
    color: var(--t7-muted);
}

.public-site.tech-modern .site-footer a {
    color: var(--color-primary);
}

.public-site.tech-modern .site-footer a:focus-visible,
.public-site.tech-modern .site-footer button:focus-visible {
    outline-color: var(--color-primary);
}

.public-site.tech-modern .today-plan .plan-head .dash-heading {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

/* The sign page: same page tint and cards (no menus there). */
.public-site.tech-modern.sign-page {
    background: var(--t7-page);
}

/* ---------- 600px ---------- */

@media (min-width: 600px) {
    .public-site.tech-modern .tech-brand .public-brand-name {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        max-width: 13rem;
        white-space: normal;
    }

    .tech-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tech-stat {
        align-items: flex-start;
    }

    .tech-stat-text {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "value"
            "note";
    }
}

/* ---------- 768px: the sidebar beside the page, no tab bar ---------- */

@media (min-width: 768px) {
    body.tech-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "top  top"
            "side head"
            "side main"
            "side foot";
        padding-bottom: 0;
    }

    body.tech-layout > .tech-topbar {
        grid-area: top;
    }

    body.tech-layout > .tech-sidebar {
        grid-area: side;
    }

    body.tech-layout > .tech-page-head {
        grid-area: head;
    }

    body.tech-layout > main {
        grid-area: main;
        min-width: 0;
    }

    body.tech-layout > .site-footer {
        grid-area: foot;
    }

    .public-site.tech-modern .tech-sidebar {
        position: sticky;
        top: 1rem;
        display: flex;
        flex-direction: column;
        align-self: start;
        min-height: min(520px, calc(100vh - 2rem));
        margin: 1rem 0 1rem 1rem;
        padding: 1rem 0.75rem;
        color: var(--color-white);
        background: var(--color-primary-dark);
        border-radius: 16px;
        box-shadow: var(--t7-shadow);
    }

    .tech-tabbar {
        display: none;
    }

    .public-site.tech-modern .tech-title {
        font-size: 2rem;
    }

    body.tech-layout .site-footer {
        background: transparent;
        color: var(--t7-muted);
    }
}

/* ==========================================================================
   ROUND 7b (2026-10-12): technician Today's Plan first — a tight greeting,
   ONE summary line (was three cards), a ONE-LINE "Needs attention" bar with
   Show / Hide (rows collapsed by default, shown without JS), then the job
   cards. Only the technician dashboard (body.tech-dashboard) changes.
   Contrast: summary text #1a2233 / #3f4757 on white 15.9 / 9.6:1; bar text
   #8a4b00 on #fff4e5 6.3:1 (+ the warning icon and the word counts).
   ========================================================================== */

.tech-dashboard .tech-dash-head {
    padding-top: 0.75rem;
}

.tech-dashboard .tech-dash-head .tech-lead {
    margin-top: 0.1rem;
}

.tech-dashboard .account-page {
    gap: 0.85rem;
    padding-top: 0.6rem;
}

.tech-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0;
    margin: 0;
    padding: 0.55rem 0.9rem;
    color: var(--t7-muted, #3f4757);
    background: var(--color-white);
    border: 1px solid var(--t7-line, #dbe4ee);
    border-radius: 12px;
}

.tech-summary-item {
    white-space: nowrap;
}

.tech-summary-item strong {
    color: var(--color-text);
}

/* "·" between items; a wrapped line starts clean. */
.tech-summary-item + .tech-summary-item::before {
    content: "\00b7";
    margin: 0 0.5rem;
    color: var(--color-grey-600);
}

.public-site.tech-modern .tech-summary-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 800;
    color: var(--color-primary);
}

/* The one-line attention bar. */
.tech-attention-bar .tech-attention-head {
    flex-wrap: nowrap;
    padding: 0.4rem 0.6rem 0.4rem 0.9rem;
    border-bottom: 0;
}

.tech-attention-bar .attention-list:not([hidden]) {
    border-top: 1px solid #f3d8b0;
}

.attention-box.tech-attention-bar .attention-head h2.attention-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.0625rem;
    line-height: 1.3;
}

.tech-attention-bar .attention-head-icon {
    width: 24px;
    height: 24px;
}

.public-site.tech-modern .tech-attention-toggle {
    flex: none;
    min-width: 84px;
    min-height: 48px;
}

@media (max-width: 767px) {
    /* Phones: the date is a plain line under the greeting, not a box. */
    .tech-dashboard .tech-date {
        min-height: 0;
        padding: 0;
        font-size: 1rem;
        color: var(--t7-muted, #3f4757);
        background: none;
        border: 0;
    }

    .tech-dashboard .tech-dash-head {
        gap: 0.2rem;
    }
}

/* Round 7b: phones — the four summary items as a tidy 2 x 2 grid (no "·" at a line start). */
@media (max-width: 599px) {
    .tech-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.1rem 0.75rem;
    }

    .tech-summary-item + .tech-summary-item::before {
        content: none;
    }

    .tech-summary-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        min-height: 44px;
        white-space: normal;
    }
}

/* ---------- Brands (Services & Products > Brands + the product form's Brand dropdown, migration 059) ---------- */
.brand-admin {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.brand-admin-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 96px;
    height: 44px;
    padding: 4px 6px;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: 6px;
}

.brand-admin-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-admin-nologo {
    color: var(--color-grey-600);
    font-size: 0.8rem;
}

.brand-pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.brand-pick-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 20px;
    max-width: 72px;
}

.brand-pick-status {
    margin: 0;
}

.brand-pick-logo:empty {
    display: none;
}

.brand-pick-logo img {
    width: auto;
    height: auto;
    max-width: 72px;
    max-height: 20px;
    object-fit: contain;
}

.brand-add-link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    font-weight: 600;
}

.brand-current-logo .check-inline {
    display: flex;
}

.brand-current-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 80px;
    margin: 0.35rem 0;
    padding: 6px;
    background: var(--color-grey-50);
}

.brand-quick-modal {
    max-width: 440px;
}

.brand-delete-zone {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-grey-200);
}

.brand-delete-zone form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* A dangerous action looks different: red outline + red text (6.5:1), filled red on hover/focus. */
.btn.brand-delete-btn {
    color: var(--color-error);
    background: var(--color-white);
    border: 1px solid var(--color-error);
}

.btn.brand-delete-btn:hover,
.btn.brand-delete-btn:focus {
    color: var(--color-white);
    background: var(--color-error);
    border-color: var(--color-error);
}

/* Phones: the catalog cards (Services, Products, Brands) keep room for their
   labels — the round-6 ".admin-modern .data-table td" padding came later and
   made "Products" / "Price" sit on top of the value. */
@media (max-width: 767px) {
    .admin-modern .data-table.catalog-table td[data-label] {
        padding: 0.3rem 0 0.3rem 7.5rem;
    }

    .admin-modern .data-table.catalog-table td.catalog-name,
    .admin-modern .data-table.catalog-table td.catalog-actions {
        padding-left: 0;
    }
}

@media (min-width: 768px) {
    /* Brands: Brand, Products, Website order, Status, actions */
    .catalog-table-brands th:nth-child(1) { width: 40%; }
    .catalog-table-brands th:nth-child(2) { width: 14%; }
    .catalog-table-brands th:nth-child(3) { width: 15%; }
    .catalog-table-brands th:nth-child(4) { width: 12%; }
    .catalog-table-brands th:nth-child(5) { width: 19%; }
}

/* ---------- Input formats (2026-10-13): the message right under a field (fieldErrorHtml() / main.js [data-format]) ---------- */
.field-error {
    margin: 0.3rem 0 0;
    color: var(--color-error);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.field-error[hidden] {
    display: none;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-error);
}

/* ==========================================================================
   Admin Notifications page (views/notifications.php, 2026-10-14): tabs
   All | Unread | Needs action, day groups (Today / Yesterday / Earlier),
   one attention-style row per notification. Icons white on solid circles:
   needs action #8a4b00 6.6:1, done #1b6e3a 6.4:1, cancelled #b3261e 6.5:1,
   info #0258ad 6.6:1 (each >= 3:1 on white and on the unread tint). Unread =
   blue dot (#0258ad on #e8f3fd 5.9:1) + tint + "New" for screen readers;
   text #1a2233 on the tint 15:1, time #4b5563 on the tint 6.9:1.
   ========================================================================== */

.notif-page-head {
    justify-content: flex-end;
}

.notif-tabs {
    margin-bottom: 1rem;
}

.notif-page .search-bar {
    margin-bottom: 1.25rem;
}

.notif-day {
    margin-bottom: 1.25rem;
}

.notif-day-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    color: var(--color-primary-dark);
    background: var(--color-grey-50);
    border-bottom: 1px solid #e8eef5;
}

.notif-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-text);
    background: var(--color-grey-200);
    border-radius: 999px;
}

.notif-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon text"
        "act  act";
}

.notif-row.is-unread {
    background: var(--color-primary-tint);
}

.notif-kind-action    { color: #8a4b00; }
.notif-kind-done      { color: var(--color-success); }
.notif-kind-cancelled { color: var(--color-error); }
.notif-kind-info      { color: var(--color-primary); }

.notif-row-message {
    margin: 0;
    font-weight: 700;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.notif-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: 0.45rem;
    vertical-align: 0.1em;
    background: var(--color-primary);
    border-radius: 50%;
}

.notif-row:not(.is-unread) .notif-row-message {
    font-weight: 600;
}

/* main.js adds .is-clamped (JS only): 2 lines + "More"; without JS the whole text shows. */
.notif-rows.is-clamped .notif-row:not(.is-expanded) .notif-row-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-more {
    min-height: 44px;
    padding: 0 0.25rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.notif-more:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.notif-row-time {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--color-grey-600);
}

.notif-row-actions .notif-open {
    display: inline-flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-weight: 700;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .notif-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon text act";
    }

    .notif-row-actions .notif-open {
        flex: none;
        min-width: 6rem;
    }
}

/* ===========================================================================
   2026-10-14: date chips (all three sides), admin "What happened" + "Record
   payment", customer My Purchases. Colours from the :root tokens; every
   state has words, never colour alone. Contrast: today white on primary
   7.0:1; tomorrow primary-dark on tint 14:1; late error on error-bg 5.7:1;
   future text on grey-50 14.8:1 (border grey-400 3.2:1).
   ========================================================================= */

.date-chip {
    display: inline-flex;
    flex: none;   /* never squeezed by a flex row */
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem 0.15rem 0.45rem;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-grey-50);
    border: 1px solid var(--color-grey-400);
    border-radius: 999px;
    /* One line, always a pill (2026-10-15): the column makes room, the chip never wraps. */
    white-space: nowrap;
    vertical-align: middle;
}

.date-chip strong {
    font-weight: 800;
}

.date-chip-icon {
    flex: none;
}

.date-chip-today {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.date-chip-tomorrow {
    color: var(--color-primary-dark);
    background: var(--color-primary-tint);
    border-color: #7fb0d6;
}

.date-chip-late {
    color: var(--color-error);
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.date-chip-lg {
    padding: 0.35rem 0.85rem 0.35rem 0.65rem;
    font-size: 1rem;
}

.date-chip-lg .date-chip-icon {
    width: 20px;
    height: 20px;
}

.date-plain {
    color: var(--color-text);
}

/* The big chip under the order no. + status (admin, technician, customer). */
.detail-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0.75rem;
}

.detail-date-extra {
    font-weight: 700;
}

.order-row-meta .date-chip,
.recent-date .date-chip {
    margin: 0.1rem 0;
}

.plan-badges .date-chip {
    font-size: 0.82rem;
}

/* ---------- Admin order page: "What happened" (No Update only) ---------- */

.what-happened {
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-error) !important;
}

.what-happened h3 {
    margin-bottom: 0.6rem;
}

.wh-reason {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
    color: var(--color-error);
}

.wh-reason-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-weight: 800;
    color: var(--color-white);
    background: var(--color-error);
    border-radius: 50%;
}

.wh-late {
    margin-bottom: 0.4rem;
    font-weight: 700;
    color: var(--color-text);
}

.wh-team {
    margin-bottom: 0.75rem;
}

.wh-team a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    font-weight: 700;
}

.wh-label {
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-grey-600);
}

.wh-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wh-step {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-areas: "dot label" ". when";
    column-gap: 0.6rem;
    padding: 0 0 0.7rem;
}

.wh-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: 0.72rem;
    width: 2px;
    background: var(--color-grey-200);
}

.wh-dot {
    grid-area: dot;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    border-radius: 50%;
}

.wh-step-label {
    grid-area: label;
    font-weight: 700;
}

.wh-step-when {
    grid-area: when;
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

.wh-step.is-done .wh-dot {
    color: var(--color-white);
    background: var(--color-success);
}

.wh-step.is-missing .wh-dot {
    background: var(--color-white);
    border: 2px dashed var(--color-grey-400);
}

.wh-step.is-missing .wh-step-label,
.wh-step.is-missing .wh-step-when {
    color: var(--color-grey-600);
    font-style: italic;
}

@media (min-width: 768px) {
    .wh-step {
        grid-template-columns: 1.5rem 11rem minmax(0, 1fr);
        grid-template-areas: "dot label when";
    }
}

/* ---------- Admin "Record payment" ---------- */

.tap-hint {
    font-weight: 400;
}

.badge-recorded { color: var(--color-warning); background: var(--color-warning-bg); border-color: #e0b25f; }

.record-pay-modal .modal-box {
    max-width: 36rem;
}

.record-pay-amount {
    margin: 0.75rem 0 0.25rem;
    font-size: 1.15rem;
}

.record-pay-amount strong {
    font-size: 1.35rem;
}

.record-pay-methods,
.record-pay-shop .shop-account-fieldset {
    margin: 0.75rem 0;
    padding: 0;
    border: 0;
}

.record-pay-methods legend,
.record-pay-shop legend {
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.record-pay-method {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    margin-bottom: 0.4rem;
    padding: 0.5rem 0.8rem;
    font-weight: 700;
    background: var(--color-grey-50);
    border: 2px solid var(--color-grey-200);
    border-radius: 8px;
    cursor: pointer;
}

.record-pay-method:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.record-pay-method input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}

.record-pay-method:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------- Customer: My Purchases + dashboard "See all purchases" ---------- */

.see-all-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--color-primary);
}

.purchase-list {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.purchase-card.is-voided {
    opacity: 0.85;
}

.purchase-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-grey-200);
}

.purchase-no {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.15rem;
}

.purchase-date {
    margin: 0.15rem 0 0;
    color: var(--color-grey-600);
}

.purchase-total {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.purchase-total-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-grey-600);
}

.purchase-total-amount {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
}

.purchase-method {
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

.purchase-units {
    display: grid;
    gap: 1rem;
    margin: 0.85rem 0;
    padding: 0;
    list-style: none;
}

.purchase-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.purchase-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    max-width: 16rem;
    overflow: hidden;
    background: var(--color-grey-50);
    border-radius: 8px;
}

.purchase-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase-photo-none .unit-icon {
    width: 4rem;
    color: var(--color-grey-400);
}

.purchase-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.purchase-logo img {
    display: block;
    width: auto;
    max-width: 5.5rem;
    height: 1.6rem;
    object-fit: contain;
}

.purchase-model {
    margin: 0.15rem 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.purchase-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.purchase-line-total {
    color: var(--color-grey-600);
}

.purchase-install {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--color-success);
}

.purchase-install svg {
    width: 1.1rem;
    height: 1.1rem;
}

.purchase-install a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.purchase-warranty {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.purchase-warranty li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    padding: 0.4rem 0.6rem;
    background: var(--color-grey-50);
    border-radius: 8px;
}

.purchase-warranty-part {
    flex: 1 1 8rem;
    font-weight: 700;
}

.purchase-warranty-until {
    color: var(--color-grey-600);
}

.purchase-warranty-note {
    color: var(--color-grey-600);
}

.badge-warranty-active  { color: var(--color-success); background: var(--color-success-bg); border-color: #a8d5a8; }
.badge-warranty-expired { color: #4b5563; background: #e4e6e8; border-color: #c4c8cc; }

.purchase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-grey-200);
}

.purchase-actions .btn {
    min-height: 44px;
}

@media (min-width: 600px) {
    .purchase-unit {
        grid-template-columns: 11rem minmax(0, 1fr);
        align-items: start;
    }

    .purchase-total {
        text-align: right;
    }
}

@media (min-width: 1024px) {
    .purchase-unit {
        grid-template-columns: 14rem minmax(0, 1fr);
    }
}

/* Date chips, more states (2026-10-14 small round): Done green (success on
   success-bg 5.6:1), Cancelled grey (#4b5563 on #e4e6e8, 6.0:1), Not
   scheduled yet = grey outline (grey-600 on white, 7.6:1). Neutral chips
   (future dates, "Bought" on sales, dates in notifications) stay white. */
.date-chip-future {
    background: var(--color-white);
}

.date-chip-done {
    color: var(--color-success);
    background: var(--color-success-bg);
    border-color: #a8d5a8;
}

.date-chip-cancelled {
    color: #4b5563;
    background: #e4e6e8;
    border-color: #c4c8cc;
}

.date-chip-none {
    color: var(--color-grey-600);
    background: var(--color-white);
    border: 1px dashed var(--color-grey-400);
}

.notification-message .date-chip,
.attention-text .date-chip,
.notif-row-message .date-chip {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.85em;
}

.plan-done-date {
    display: block;
    margin-top: 0.2rem;
}

.purchase-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sale-row-what .date-chip {
    align-self: flex-start;
}

/* Customer "missed visit" text (2026-10-14). */
.missed-visit a {
    font-weight: 700;
}

.missed-visit {
    display: block;
    color: var(--color-text);
}

/* Inline padding: a 44px tap area without spreading the sentence's lines apart. */
.missed-visit a {
    padding: 0.7rem 0;
}

/* Sales Report: where the operations analytics used to be, a link to the
   Operations Report (2026-10-15). */
.report-moved {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    background: var(--color-primary-tint);
    border-radius: var(--radius);
    color: var(--color-text);
}

.report-moved a {
    display: inline-block;
    padding: 0.6rem 0;
    font-weight: 700;
    color: var(--color-primary);
}

/* ---------- On-site service changes + reasons (2026-10-15, migration 064) ----------
   Complete Job: Replace / Remove per service (dialogs), the reason fields
   (onSiteReasonFieldsHtml()), and the "Changed on site" list
   (onSiteChangesListHtml()) used on Complete Job, the sign page, the admin
   order page and the technician's job details. */

.onsite-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.public-site.tech-area .onsite-line-actions .btn {
    min-height: 48px;
    min-width: 48px;
    font-size: 1rem;
}

.reason-required {
    font-weight: 400;
    color: var(--color-grey-600);
}

.reason-text-need {
    font-weight: 400;
    color: var(--color-grey-600);
}

.public-site.tech-area .reason-group,
.public-site.tech-area .onsite-modal .form-row label,
.public-site.tech-area .onsite-modal .form-hint {
    font-size: 1.0625rem;
}

.public-site.tech-area .reason-text-row input,
.public-site.tech-area .onsite-modal select,
.public-site.tech-area .onsite-modal input[type="number"] {
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.8rem;
    font-size: 1.0625rem;
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

/* The dialog's own title is not a page section (no grey divider line). */
.public-site.tech-area .tech-job-panel .onsite-modal h3 {
    margin: 0 2.5rem 0.75rem 0;
    padding: 0;
    border-top: 0;
}

.public-site.tech-area .onsite-modal .modal-close {
    width: 48px;
    height: 48px;
}

/* "Changed on site" list */
.onsite-changes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.onsite-changes li {
    display: grid;
    gap: 0.15rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-grey-200);
}

.onsite-changes li:last-child {
    border-bottom: 0;
}

.onsite-change-what {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.onsite-change-reason {
    overflow-wrap: anywhere;
}

.onsite-change-who {
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

.onsite-changes-box {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius);
}

.onsite-changes-title {
    margin: 0 0 0.25rem;
    font-weight: 800;
}

.public-site.tech-area .onsite-changes-box,
.public-site.tech-area .onsite-changes {
    font-size: 1.0625rem;
}

/* ---------- Toasts: admin success / info messages (2026-10-15, adminFlashHtml() + main.js [data-toast]) ----------
   Without JS the message is a normal bar at the top of the page (icon + text).
   With JS it moves into .toast-stack: bottom of the screen on phones (left/right
   16px, above the safe area), top-right from 768px. Several stack with a gap. */

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.toast-icon {
    flex: 0 0 auto;
    color: var(--color-success);
    margin-top: 0.05rem;
}

.alert-info.toast .toast-icon {
    color: var(--color-primary);
}

.toast-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.toast-text a {
    display: inline-block;
    padding: 0.35rem 0;
    font-weight: 700;
    color: var(--color-primary);
}

.toast-stack {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.6rem;
    pointer-events: none;
}

.toast-stack .toast.is-toast {
    pointer-events: auto;
    margin: 0;
    padding: 0.75rem 0.5rem 0.75rem 0.9rem;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.45;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-left: 5px solid var(--color-success);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-stack .alert-info.toast.is-toast {
    border-left-color: var(--color-primary);
}

.toast-stack .toast.is-leaving {
    opacity: 0;
    transform: translateY(8px);
}

/* Closed or faded: out of sight, text kept in the page. */
.toast-stack .toast.toast-gone {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.toast-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -0.55rem 0 -0.55rem 0;
    padding: 0;
    color: var(--color-grey-600);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.toast-close:hover {
    color: var(--color-text);
    background: var(--color-grey-50);
}

.toast-close:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
}

@media (min-width: 768px) {
    .toast-stack {
        left: auto;
        right: 24px;
        bottom: auto;
        top: 5.5rem;
        width: 380px;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-stack .toast.is-toast {
        transition: none;
    }
}

/* A row's success message became a toast: its in-table copy stays in the page, hidden
   (the card layout's display rules must not show it again). */
.row-flash[hidden],
.team-flash[hidden] {
    display: none !important;
}

/* Without JS the close (x) can't work: keep it hidden until main.js shows it. */
.toast-close[hidden] {
    display: none;
}

/* Customer detail: an ONLINE customer's details are read-only for admin (privacy, 2026-10-15). */
.self-managed-note {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    color: var(--color-text);
    background: var(--color-primary-tint);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
}

.customer-password-last {
    display: block;
    margin-bottom: 0.3rem;
}

/* ---------- Complete Job: on-site change forms (2026-10-15 fix) ----------
   The Add form, and the Replace / Remove dialogs, are .onsite-change-form: ONE
   column, labels above fields. Scoped here so the older rules for the same
   form's other classes (.line-item-row = the extra-cost rows' 3-column grid
   from 768px; .service-line-row = booking's select + qty flex sizes; the
   .add-service-form input rule) can't squeeze or stretch these fields again. */
.public-site.tech-area .onsite-change-form.line-item-row,
.onsite-change-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    grid-template-columns: none;
    margin: 0.75rem 0 1.5rem;
    min-width: 0;
}

.onsite-change-form .onsite-service-qty {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

.onsite-change-form .reason-group {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    min-width: 0;
}

.onsite-change-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}

.onsite-change-form .form-row > * {
    flex: 0 0 auto;
}

.public-site.tech-area .onsite-change-form label {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
}

.public-site.tech-area .onsite-change-form select,
.public-site.tech-area .onsite-change-form input[type="number"],
.public-site.tech-area .onsite-change-form input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0.6rem 0.8rem;
    font-size: 1.0625rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    border-radius: var(--radius);
}

.public-site.tech-area .onsite-change-form select[aria-invalid="true"] {
    border-color: var(--color-error);
}

.public-site.tech-area .onsite-change-form .btn {
    width: 100%;
    min-height: 48px;
    font-size: 1.0625rem;
}

.onsite-change-form .field-error {
    margin: 0;
}

@media (min-width: 600px) {
    .onsite-change-form .onsite-service-qty {
        grid-template-columns: minmax(0, 1fr) 8rem;
        align-items: end;
    }
}

@media (min-width: 768px) {
    .public-site.tech-area .onsite-change-form > .btn {
        width: auto;
        min-width: 14rem;
        align-self: flex-start;
    }
}

/* On-site change forms: left-aligned, natural heights. The form also carries
   .line-item-row (align-items: center from 600px) and .service-line-row
   (qty input flex-basis 6rem), which must not apply here. */
.public-site.tech-area .onsite-change-form,
.public-site.tech-area .onsite-change-form .reason-group,
.public-site.tech-area .onsite-change-form .form-row {
    align-items: stretch;
}

.public-site.tech-area .onsite-change-form .form-row > *,
.public-site.tech-area .onsite-change-form .reason-group > * {
    flex: 0 0 auto;
}

/* Live page refresh (2026-10-15): "This job was updated. Tap to refresh." —
   shown instead of reloading when the user is typing, a dialog is open, or on
   Complete Job (main.js [data-live-refresh]). */
.live-refresh-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 0.5rem 16px;
    background: var(--color-primary-tint);
    border-bottom: 2px solid var(--color-primary);
}

.live-refresh-btn {
    display: block;
    width: 100%;
    max-width: 1100px;
    min-height: 48px;
    margin: 0 auto;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    cursor: pointer;
}

.live-refresh-btn:hover {
    background: var(--color-primary-tint);
}

.live-refresh-btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* "Reason in a few words" hidden until "Other" (main.js, 2026-10-15): the form-row
   display rule above must not show it again. */
.public-site.tech-area .onsite-change-form .reason-text-row[hidden],
.onsite-change-form .reason-text-row[hidden] {
    display: none;
}

/* ---------- Calendar (calendar.php, 2026-10-15 redesign) ----------
   Everything scoped under .cal-page. A fixed 6-week grid of equal day boxes
   (date, job count, one status dot per job, red "!" for an Emergency or
   No Update job) + the selected day's panel: below the grid on phones and
   tablets, beside it from 1024px. Nothing scrolls inside a box or the grid:
   the box height is fixed and its content clips. Dot colours = the status
   badge colours (fill = badge border colour, ring = badge text colour). */

.cal-page .cal-note {
    margin: 0 0 1rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    color: var(--color-warning);
    background: var(--color-warning-bg);
    border: 1px solid #e0b25f;
    border-radius: 10px;
}

.cal-page .cal-note a {
    color: var(--color-primary);
}

.cal-page .cal-layout {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.cal-page .cal-month,
.cal-page .cal-panel-wrap {
    min-width: 0;
    padding: 0.75rem 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: var(--a6-radius);
    box-shadow: var(--a6-shadow);
}

.cal-page .cal-panel-wrap {
    padding: 1rem;
}

.cal-page .cal-panel-wrap:focus {
    outline: none;
}

/* Previous month, month name, next month, Today. */
.cal-page .cal-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.25rem;
}

.cal-page .cal-arrow,
.cal-page .cal-today-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    font-size: 1rem;
    border-radius: 10px;
}

.cal-page .cal-arrow {
    padding: 0;
    font-size: 0.85rem;
}

.cal-page .cal-title-box {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.cal-page .cal-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--color-primary-dark);
}

.cal-page .cal-today-btn {
    margin-left: 0.25rem;
    font-weight: 600;
}

.cal-page .cal-month-count {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--color-grey-600);
}

.cal-page .cal-weekdays,
.cal-page .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.cal-page .cal-weekdays {
    margin-top: 0.6rem;
}

.cal-page .cal-weekday {
    padding: 0.2rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-grey-600);
}

.cal-page .cal-weekday abbr {
    text-decoration: none;
}

.cal-page .cal-grid {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.cal-page .cal-cell {
    min-width: 0;
    margin: 0;
}

/* One day box: same size every day, never grows, never scrolls. */
.cal-page .cal-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 4.25rem;
    padding: 0.2rem;
    overflow: hidden;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: 8px;
}

.cal-page .cal-day:hover {
    border-color: var(--color-primary);
    background: var(--color-grey-50);
}

.cal-page .cal-day:focus-visible {
    z-index: 1;
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
}

.cal-page .cal-day-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

.cal-page .cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.15rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 999px;
}

.cal-page .cal-day-count {
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-grey-600);
}

.cal-page .cal-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 3px;
}

.cal-page .cal-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: #c4c8cc;
    border: 1.5px solid #555;
    border-radius: 50%;
}

.cal-page .cal-dot-more {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-grey-600);
}

.cal-page .cal-dot-pending         { background: #e0c48a; border-color: #7a4b00; }
.cal-page .cal-dot-recommended     { background: #9cc3e0; border-color: #0b3d6b; }
.cal-page .cal-dot-dateproposed    { background: #e0b25f; border-color: #7a4b00; }
.cal-page .cal-dot-reconsideration { background: #e08f5f; border-color: #8a2e00; }
.cal-page .cal-dot-confirmed       { background: #7fb0d6; border-color: #0b3d6b; }
.cal-page .cal-dot-inprogress      { background: #b49ce0; border-color: #3d1f6b; }
.cal-page .cal-dot-completed       { background: #a8d5a8; border-color: #1b5e20; }
.cal-page .cal-dot-cancelled       { background: #c4c8cc; border-color: #555; }

/* Red mark: an Emergency or No Update job that day (a "!", never colour alone). */
.cal-page .cal-day-flag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 0.8rem;
    height: 0.8rem;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-white);
    background: var(--color-error);
    border-radius: 50%;
}

/* Days of the months either side: faded, still readable and clickable. */
.cal-page .cal-day.is-outside {
    background: var(--color-grey-50);
    border-style: dashed;
}

.cal-page .cal-day.is-outside .cal-day-num {
    font-weight: 400;
    color: var(--color-grey-600);
}

.cal-page .cal-day.is-outside .cal-dots {
    opacity: 0.6;
}

/* Today = filled (tint + blue number); selected = a dark outline. */
.cal-page .cal-day.is-today {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.cal-page .cal-day.is-today .cal-day-num {
    color: var(--color-white);
    background: var(--color-primary);
}

.cal-page .cal-day.is-selected {
    border-color: var(--color-primary-dark);
    box-shadow: inset 0 0 0 2px var(--color-primary-dark);
}

.cal-page .cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 0.75rem 0.25rem 0;
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

.cal-page .cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cal-page .cal-legend-note {
    margin: 0.4rem 0.25rem 0;
    font-size: 0.85rem;
    color: var(--color-grey-600);
}

/* ---- Day panel ---- */

.cal-page .cal-panel-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--color-primary-dark);
}

.cal-page .cal-panel-title:focus {
    outline: none;
}

.cal-page .cal-panel-title:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.cal-page .cal-today-tag {
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 999px;
}

.cal-page .cal-panel-empty {
    margin: 0;
    padding: 1rem;
    text-align: center;
    color: var(--color-grey-600);
    background: var(--color-grey-50);
    border-radius: 10px;
}

.cal-page .cal-team + .cal-team {
    margin-top: 0.8rem;
}

.cal-page .cal-team-name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    padding-bottom: 0.3rem;
    font-size: 0.95rem;
    color: var(--color-primary-dark);
    border-bottom: 1px solid var(--a6-line);
}

.cal-page .cal-team-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-grey-600);
}

.cal-page .cal-jobs {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One job: the whole row opens the order. Compact: order no. + chips, then
   customer and services on one line (wrapping when narrow). */
.cal-page .cal-job {
    display: grid;
    gap: 0.15rem;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: 10px;
}

.cal-page .cal-job:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
}

.cal-page .cal-job-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.5rem;
}

.cal-page .cal-job-uid {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cal-page .cal-job-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cal-page .cal-multi {
    color: var(--color-primary-dark);
    background: var(--color-white);
    border-color: var(--color-primary-dark);
}

.cal-page .cal-job-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
}

.cal-page .cal-job-customer {
    font-size: 1rem;
    font-weight: 600;
}

.cal-page .cal-job-services {
    font-size: 0.9rem;
    color: var(--color-grey-600);
    overflow-wrap: anywhere;
}

@media (min-width: 600px) {
    .cal-page .cal-month {
        padding: 1rem;
    }

    .cal-page .cal-weekdays,
    .cal-page .cal-grid {
        gap: 4px;
    }

    .cal-page .cal-day {
        height: 5rem;
        padding: 0.35rem;
    }

    .cal-page .cal-day-num {
        min-width: 1.5rem;
        height: 1.5rem;
        font-size: 0.9rem;
    }

    .cal-page .cal-day-top .cal-day-flag {
        width: 1rem;
        height: 1rem;
        font-size: 0.7rem;
    }

    .cal-page .cal-day-count {
        font-size: 0.75rem;
    }

    .cal-page .cal-dot {
        width: 9px;
        height: 9px;
    }

    .cal-page .cal-title {
        font-size: 1.3rem;
    }
}

@media (min-width: 768px) {
    .cal-page .cal-month,
    .cal-page .cal-panel-wrap {
        padding: 1.25rem;
    }

    .cal-page .cal-day {
        height: 5.5rem;
    }

    .cal-page .cal-panel-title {
        font-size: 1.25rem;
    }
}

/* Panel beside the grid. */
@media (min-width: 1024px) {
    .cal-page .cal-layout {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
        gap: 1rem;
    }

    .cal-page .cal-month {
        padding: 0.75rem;
    }

    .cal-page .cal-panel-wrap {
        padding: 1rem;
    }

    .cal-page .cal-day {
        height: 5.25rem;
        padding: 0.25rem;
    }

    /* The whole page fits the screen (2026-10-15): body = one screen tall,
       the calendar fills what the header / note / footer leave, its 6 week
       rows share that height, the panel is as tall as the calendar and only
       its job list scrolls. A very short window still scrolls the page (the
       min-heights below), never cutting anything off. */
    body.admin-modern.cal-fit {
        height: 100vh;
        min-height: 0;
    }

    .cal-fit main.section {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0.5rem 0 0.75rem;
    }

    .cal-fit .cal-page {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        min-height: 0;
    }

    .cal-page .cal-note {
        margin-bottom: 0.6rem;
        padding: 0.45rem 0.9rem;
        font-size: 0.9rem;
    }

    .cal-page .cal-layout {
        flex: 1 1 auto;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        min-height: 26rem;
    }

    .cal-page .cal-month {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .cal-page .cal-grid {
        flex: 1 1 auto;
        grid-template-rows: repeat(6, minmax(0, 1fr));
        min-height: 0;
    }

    .cal-page .cal-cell {
        min-height: 0;
    }

    .cal-page .cal-day {
        height: 100%;
    }

    .cal-page .cal-legend {
        margin-top: 0.5rem;
        font-size: 0.8rem;
    }

    .cal-page .cal-legend-note {
        margin-top: 0.2rem;
        font-size: 0.8rem;
    }

    .cal-page .cal-panel-wrap {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0.9rem 0.6rem 0.9rem 0.9rem;
        overflow: hidden;
    }

    .cal-page .cal-panel:not([hidden]) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .cal-page .cal-panel-title {
        flex: 0 0 auto;
        margin-bottom: 0.5rem;
        font-size: 1.15rem;
    }

    /* Only the job list scrolls. */
    .cal-page .cal-panel-body {
        flex: 1 1 auto;
        min-height: 0;
        padding-right: 0.3rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .cal-page .cal-job-customer {
        font-size: 0.95rem;
    }

    .cal-page .cal-job-services {
        font-size: 0.875rem;
    }

    /* Compact footer on this page only: one wrapping line. */
    .cal-fit .site-footer {
        padding: 0.5rem 0 0.6rem;
    }

    .cal-fit .site-footer .container {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1.25rem;
    }

    .cal-fit .site-footer p {
        margin: 0;
    }
}

/* Record Sale (2026-10-15): newest 4 + "View all sales" (?view=all = the same list in full). */
.sales-view-all {
    margin: 0.75rem 0 0;
    font-weight: 700;
}

.sales-view-all a,
.sales-view-note a {
    display: inline-block;
    padding: 0.6rem 0;
    color: var(--color-primary);
}

.sales-view-note {
    margin: 0 0 0.5rem;
    color: var(--color-grey-600);
}

/* ---------- Sales Report (sales_report.php, 2026-10-15 redesign) ----------
   Look only (the figures are revenueSummary()'s). Scoped to body.sr-page.
   Colours: services = navy (primary-dark, 14.9:1 on white), product sales =
   blue #0b84d8 (4.0:1 on white, 3.8:1 next to navy) — tiles, split bar,
   method bars and the chart all use the same two. */

.sr-page {
    --sr-services: var(--color-primary-dark);
    --sr-products: #0b84d8;
}

.sr-page .sr-head .dash-heading {
    margin-bottom: 0.15rem;
}

.sr-page .sr-intro {
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    color: var(--color-grey-600);
}

/* "This month | All time" + the range beside them. */
.sr-page .sr-period-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.sr-page .sr-tabs {
    display: inline-flex;
    padding: 4px;
    background: var(--color-grey-50);
    border: 1px solid var(--a6-line);
    border-radius: 999px;
}

.sr-page .sr-tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    border-radius: 999px;
}

.sr-page .sr-tab:hover {
    background: var(--color-primary-tint);
}

.sr-page .sr-tab.is-active {
    color: var(--color-white);
    background: var(--color-primary);
}

.sr-page .sr-range {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-grey-600);
}

/* Three tiles. */
.sr-page .sr-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.sr-page .sr-tile {
    min-width: 0;
    padding: 0.9rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--a6-line);
    border-radius: 12px;
}

.sr-page .sr-tile-total {
    background: var(--color-primary-tint);
    border-color: #b9d6f2;
}

.sr-page .sr-tile-services {
    border-top: 4px solid var(--sr-services);
}

.sr-page .sr-tile-products {
    border-top: 4px solid var(--sr-products);
}

.sr-page .sr-tile-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-grey-600);
}

.sr-page .sr-key {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.sr-page .sr-key-services { background: var(--sr-services); }
.sr-page .sr-key-products { background: var(--sr-products); }

.sr-page .sr-tile-value {
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.sr-page .sr-tile-total .sr-tile-value {
    font-size: 1.75rem;
    color: var(--color-primary-dark);
}

.sr-page .sr-tile-share {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    color: var(--color-grey-600);
}

/* Bars (inline SVG, widths are attributes). */
.sr-page .sr-bar-track       { fill: #e8eef5; }
.sr-page .sr-fill-services   { fill: var(--sr-services); }
.sr-page .sr-fill-products   { fill: var(--sr-products); }

.sr-page .sr-split {
    margin: 0.75rem 0 1rem;
}

.sr-page .sr-split-bar {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
}

/* Two payment-method cards. */
.sr-page .sr-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.sr-page .sr-card {
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--a6-line);
    border-radius: 12px;
}

.sr-page .sr-card-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.sr-page .sr-methods {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One method: name | bar | amount. Inline-blocks (not grid/flex) so the
   row's text reads "Cash: PHP 4,500.00" (what tests/e2e revenue() parses);
   the bar comes last in the markup. Phones: name + amount, bar underneath;
   from 600px the bar sits between them (absolutely placed). PHP 0 rows: no bar. */
.sr-page .sr-method {
    position: relative;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
    border-top: 1px solid #eef2f6;
}

.sr-page .sr-method:first-child {
    border-top: 0;
}

.sr-page .sr-method-name {
    display: inline-block;
    width: calc(100% - 9.5rem);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.sr-page .sr-sep {
    font-size: 0;   /* ": " stays in the text (screen readers, tests), not shown */
}

.sr-page .sr-method .revenue-amount {
    display: inline-block;
    width: 9.5rem;
    font-weight: 700;
    text-align: right;
    vertical-align: middle;
}

.sr-page .sr-method .sr-bar {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 0.3rem;
    border-radius: 999px;
    overflow: hidden;
}

.sr-page .sr-method.is-zero {
    color: var(--color-grey-600);
}

.sr-page .sr-method.is-zero .revenue-amount {
    font-weight: 400;
}

/* Small grey notes (test payments, not recorded). */
.sr-page .sr-note,
.sr-page .sr-note.revenue-test {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--color-grey-600);
    background: none;
    border-radius: 0;
}

.sr-page .sr-note-icon {
    flex: none;
    margin-top: 0.15rem;
}

.sr-page .sr-chart-wrap {
    height: 260px;
}

@media (min-width: 600px) {
    .sr-page .sr-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* name (fixed) | bar (the rest) | amount (fixed), one line. */
    .sr-page .sr-method-name {
        width: 10rem;
    }

    .sr-page .sr-method .revenue-amount {
        margin-left: calc(100% - 19.5rem);
    }

    .sr-page .sr-method .sr-bar {
        position: absolute;
        top: 50%;
        left: 10.75rem;
        width: calc(100% - 21rem);   /* an SVG doesn't stretch from left/right alone */
        margin-top: -4px;
    }
}

@media (min-width: 768px) {
    .sr-page .sr-tile-total .sr-tile-value {
        font-size: 2rem;
    }

    .sr-page .sr-chart-wrap {
        height: 300px;
    }
}

@media (min-width: 1024px) {
    .sr-page .sr-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (min-width: 1024px) {
    .pick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Technician My Jobs page (technician_my_jobs.php, 2026-10-15) ----------
   Scoped to body.tech-myjobs. Filter chips wrap (never scroll sideways);
   counts = solid red badge, white bold text (6.5:1), only when above 0, with
   a white ring on the selected (blue) chip. Rows: one column on phones
   (order no. + customer, status chip; services + date chip under), one line
   from 768px. The whole row opens the job. */

.tech-myjobs .mj-filters {
    margin: 0 0 0.75rem;
}

.tech-myjobs .mj-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-myjobs .mj-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0 1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    border-radius: 999px;
}

.tech-myjobs .mj-chip:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.tech-myjobs .mj-chip.is-selected {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.tech-myjobs .mj-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-white);
    background: var(--color-error);
    border-radius: 999px;
}

.tech-myjobs .mj-chip.is-selected .mj-count {
    box-shadow: 0 0 0 2px var(--color-white);
}

.tech-myjobs .mj-card {
    padding: 0;
    overflow: hidden;
}

.tech-myjobs .mj-empty {
    margin: 0;
    padding: 1.25rem 1rem;
    color: var(--color-grey-600);
}

.tech-myjobs .mj-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-myjobs .mj-row + .mj-row {
    border-top: 1px solid #e8eef5;
}

.tech-myjobs .mj-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "who status"
        "what what"
        "note note";
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-height: 48px;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    text-decoration: none;
}

.tech-myjobs .mj-link:hover {
    background: var(--color-primary-tint);
}

.tech-myjobs .mj-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.tech-myjobs .mj-who {
    grid-area: who;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    min-width: 0;
}

.tech-myjobs .mj-uid {
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
}

.tech-myjobs .mj-customer {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tech-myjobs .mj-what {
    grid-area: what;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    min-width: 0;
    color: var(--color-grey-600);
}

.tech-myjobs .mj-service {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tech-myjobs .mj-status {
    grid-area: status;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    justify-self: end;
    white-space: nowrap;
}

/* The lead's next step (same words and rules as the old My Jobs rows). */
.tech-myjobs .mj-hint {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-warning);
}

.tech-myjobs .mj-note {
    grid-area: note;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-grey-600);
}

/* "This job is no longer assigned to you": two buttons side by side. */
.job-gone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .tech-myjobs .mj-link {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 9.5rem;
        grid-template-areas:
            "who what status"
            "note note note";
    }
}

/* =========================================================================
   Urgency suggester (2026-10-16, config/urgency_suggest.php, migration 065)
   - .urgency-suggest: the admin's "Suggested: ..." line (Review dialog,
     Order Entry) with "Use suggestion"
   - .urgency-add-form / .urgency-level: Settings > Urgency suggestions
   ========================================================================= */
.urgency-suggest {
    margin: 0.35rem 0 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-grey-200);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-grey-50);
    color: var(--color-text);
}

.urgency-suggest-line {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.urgency-suggest-label {
    font-weight: 700;
    margin-right: 0.15rem;
}

.urgency-suggest-line .badge {
    margin-right: 0.1rem;
    vertical-align: baseline;
}

.urgency-suggest-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
}

.urgency-suggest-actions:empty {
    display: none;
}

.urgency-suggest-done {
    color: var(--color-success);
    font-size: 0.9rem;
    font-weight: 600;
}

.urgency-suggest .form-hint {
    display: block;
    margin-top: 0.3rem;
}

.tech-reported {
    margin: 0.75rem 0 0;
}

.urgency-add-form {
    margin: 0.75rem 0 1rem;
    padding: 0.9rem;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
}

.urgency-add-form h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.urgency-add-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}

.urgency-level {
    margin-top: 0.75rem;
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
    background: var(--color-white);
}

.urgency-level > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.urgency-level > summary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.urgency-level-count {
    color: var(--color-grey-600);
    font-weight: 400;
}

.urgency-word-list {
    margin: 0;
    padding: 0 0.75rem 0.75rem;
    list-style: none;
}

.urgency-word {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--color-grey-200);
}

.urgency-word-text {
    flex: 1 1 9rem;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.urgency-word.is-off .urgency-word-text {
    color: var(--color-grey-600);
    font-weight: 400;
}

.urgency-word .toggle-form,
.urgency-word form {
    margin: 0;
}

@media (min-width: 600px) {
    .urgency-add-fields {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .urgency-word-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
        /* thin divider in the middle of the gap, same line as the row borders
           (2026-10-21); one column below 1024px = no line */
        background: linear-gradient(var(--color-grey-200), var(--color-grey-200)) center / 1px 100% no-repeat;
        background-origin: content-box;
        background-clip: content-box;
    }
}

/* ---------- Customer pages: footer at the very bottom (2026-10-19) ----------
   body.cust-modern is a full-height column; the shell and its content column
   grow, and <main> takes the free space, so on a short page the footer sits
   on the bottom edge and on a long one it follows the content with 48px
   above it. From 1024px the shell stays the sidebar grid: only the content
   column stretches (the sidebar keeps align-self: start, so it stays
   sticky). The phone menu panel and the backdrop are fixed, so not affected. */
body.cust-modern {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body.cust-modern > .cust-shell {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.cust-modern .cust-content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.cust-modern .cust-content > main {
    flex: 1 0 auto;
    margin-bottom: 3rem;
}

.cust-modern .cust-content > .site-footer {
    flex: none;
    margin-top: 0;
}

@media (min-width: 1024px) {
    body.cust-modern > .cust-shell {
        display: grid;
        align-items: stretch;
    }

    .cust-modern .cust-sidebar,
    .cust-modern .cust-sidebar.open {
        align-self: start;
    }
}

/* ---------- See all units: Price (2026-10-19) ----------
   Band buttons reuse the HP button look (radios, one choice). Under them:
   Min / Max (labelled, 48px) + Apply in one row; the note under them. */
/* The group title floats (see .filter-group-title); the band list must
   start under it, as HP's list does after its "All" link. */
.public-modern .filter-group-price > .filter-options {
    clear: both;
}

/* Min / Max side by side in the phone panel, one per row in the narrow
   desktop sidebar; Apply under them, full width. */
.public-modern .price-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: end;
    margin-top: 0.75rem;
}

.public-modern .price-range-apply {
    grid-column: 1 / -1;
}

.public-modern .price-range-box {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.public-modern .price-range-box label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #01245c;
}

.public-modern .price-range-box input {
    width: 100%;
    min-width: 0;
}

.public-modern .price-range-apply {
    min-height: 48px;
}

.public-modern .price-range-hint {
    margin: 0.35rem 0 0;
}

.public-modern .price-range-note {
    margin: 0.4rem 0 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

@media (min-width: 1024px) {
    .public-modern .price-range {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Work Order Queue: search + "Sort by" (2026-10-19) ----------
   Search takes the width; Sort by (label + select, + Apply without JS) sits
   beside it from 768px, under it on phones. */
.queue-tools {
    display: grid;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 1rem;
}

.queue-tools .search-bar {
    margin: 0;
}

.queue-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.queue-sort label {
    margin: 0;
    font-weight: 700;
    color: #01245c;
}

.queue-sort select {
    flex: 1 1 14rem;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.queue-sort [hidden] {
    display: none;
}

@media (min-width: 768px) {
    .queue-tools {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .queue-sort select {
        flex: 0 1 17rem;
    }
}

/* ---------- Complete Job layout fixes (2026-10-19) ----------
   Qty (Add a service, Replace dialog) = the − qty + stepper: 48px tall, real
   buttons, beside "Add a service" from 600px (labels and boxes lined up),
   under it on phones. Extra cost rows: Description wide, Cost a fixed width
   that shows "Cost (PHP)" with its ₱ block, Remove at the end; on phones
   Description on its own line, then Cost + Remove. */
.qty-stepper > input[type="number"]::-webkit-inner-spin-button,
.qty-stepper > input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* A stepper's number box on its own (no JS, so no − / + yet): still a
   proper 48px box. With JS the stepper rules (Record Sale, Complete Job)
   join it to its buttons. */
.form-row .qty-stepper > input[type="number"] {
    box-sizing: border-box;
    width: 5rem;
    min-height: 48px;
    padding: 0 0.5rem;
    font-size: 1rem;
    text-align: center;
    color: var(--color-text);
    background: var(--color-white);
    border: 1.5px solid #7189a8;
    border-radius: 12px;
}

.onsite-change-form .qty-stepper {
    display: inline-flex;
    align-self: flex-start;
}

.public-site.tech-area .onsite-change-form .qty-stepper > input[type="number"] {
    width: 4.5rem;
    min-width: 4.5rem;
    height: 48px;
    min-height: 48px;
    padding: 0 0.25rem;
    font-weight: 700;
    text-align: center;
    background: var(--color-white);
    border: 1.5px solid #7189a8;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    -moz-appearance: textfield;
}

.public-site.tech-area .onsite-change-form .qty-stepper > input[type="number"]:focus {
    position: relative;
    outline: 3px solid var(--color-primary);
    outline-offset: -2px;
}

.public-site.tech-area .onsite-change-form .qty-stepper-btn {
    width: 48px;
    min-height: 48px;
    border: 1.5px solid #7189a8;
}

.public-site.tech-area .onsite-change-form .qty-stepper-btn:first-child {
    border-radius: 12px 0 0 12px;
}

.public-site.tech-area .onsite-change-form .qty-stepper-btn:last-child {
    border-radius: 0 12px 12px 0;
}

.public-site.tech-area [data-line-items-container] > .line-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "desc desc" "cost remove";
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.public-site.tech-area [data-line-items-container] > .line-item-row > input[name="line_item_description[]"] {
    grid-area: desc;
    width: 100%;
    margin: 0;
}

.public-site.tech-area [data-line-items-container] > .line-item-row > input[name="line_item_cost[]"] {
    grid-area: cost;
    width: 100%;
    max-width: none;
    margin: 0;
}

.public-site.tech-area [data-line-items-container] > .line-item-row > [data-remove-line-item] {
    grid-area: remove;
    min-height: 48px;
    margin: 0;
}

/* A pinned main button (.sticky-action) never hides what you scroll or tab to:
   the page keeps that much room at the bottom of the view. */
html:has(.sticky-action) {
    scroll-padding-bottom: 7rem;
}

@media (min-width: 600px) {
    .onsite-change-form .onsite-service-qty {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .public-site.tech-area [data-line-items-container] > .line-item-row {
        grid-template-columns: minmax(0, 1fr) 12rem auto;
        grid-template-areas: "desc cost remove";
    }
}

/* ---------- Sales Report: Services / Sales chips + numbered pages (2026-10-19) ----------
   Plain links. The chosen chip / page is filled (.sr-pagelink: body.sr-page is the page itself), bold and ticked (not colour alone). */
.sr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
}

.sr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    border-radius: 999px;
}

.sr-chip:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.sr-chip:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.sr-chip.is-on,
.sr-chip.is-on:hover {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.sr-chip.is-on::before {
    content: "\2713";
}

.sr-chip-count {
    font-weight: 600;
}

.sr-list-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--color-primary-dark);
}

.sr-showing {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--color-grey-600);
}

.sr-pages {
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sr-pagelink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--color-grey-400);
    border-radius: 10px;
}

a.sr-pagelink:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

a.sr-pagelink:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.sr-pagelink.is-on {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sr-page-gap {
    align-self: center;
    padding: 0 0.15rem;
    color: var(--color-grey-600);
}

/* ---------- Record Sale: the 2 newest sales as short lines (2026-10-19) ---------- */
.sale-recent {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0;
    list-style: none;
}

.sale-recent-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius);
}

.sale-recent-who {
    font-weight: 800;
}

.sale-recent-what {
    flex: 1 1 12rem;
    min-width: 0;
    color: var(--color-grey-600);
    overflow-wrap: anywhere;
}

.sale-recent-total {
    font-weight: 800;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.sale-recent-pay {
    font-size: 0.92rem;
    color: var(--color-grey-600);
}

.sale-recent-row.is-voided .sale-recent-total {
    text-decoration: line-through;
}

/* ---------- Order Entry in 4 steps (2026-10-19, order_entry.php) ----------
   The same step bar / tabs / summary as Record Sale (.sale-*), the service
   cards and calendar of Book a Service; the parts that were scoped to the
   customer pages (.public-site) also apply inside .oe-form. */
.sale-mode-tabs.sale-mode-tabs-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oe-form .icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

.oe-form .pick-groups {
    margin-bottom: 1rem;
}

.oe-form .pick-qty .qty-stepper {
    display: inline-flex;
}

.pick-admin-tag {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.1rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #3f2a78;
    background: #ece6fa;
    border: 1px solid #b9a8e6;
    border-radius: 999px;
}

.oe-services-lead {
    margin: -0.25rem 0 0.75rem;
}

.oe-teams-note {
    margin: 0.25rem 0 0;
}

.oe-review {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-grey-200);
}

.oe-review-title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.oe-review-hours {
    margin: 0.75rem 0 0;
}

/* ---------- Book a Service: "Booked!" (2026-10-19) ---------- */
.booking-done {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.booking-done-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.5rem;
    color: var(--color-white);
    background: var(--color-success);
    border-radius: 50%;
}

.public-site .booking-done-check .icon {
    width: 2.25rem;
    height: 2.25rem;
    stroke-width: 3;
}

.public-site .booking-done-title {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-success);
}

.booking-done-title:focus {
    outline: none;
}

.booking-done-label {
    margin: 0;
    font-weight: 700;
    color: var(--color-grey-600);
}

.booking-done-uid {
    margin: 0.15rem 0 1rem;
}

.booking-done-details {
    text-align: left;
}

.booking-done-next {
    margin: 1rem 0 1.25rem;
    font-size: 1.05rem;
}

.booking-done-actions {
    display: grid;
    gap: 0.6rem;
}

.booking-done-actions .btn {
    min-height: 48px;
}

@media (min-width: 600px) {
    .booking-done-actions {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
    }
}

/* ==========================================================================
   ONE TEXT BOX LOOK (2026-10-19, CSS only — no page markup changed)
   Every text input, select and textarea (public, customer, technician,
   admin): a 48px box with a 48px "icon block" on the left, drawn with
   background layers (a gradient for the block + divider, an inline SVG
   icon) and left padding. The icon comes from what the field already has:
   type, data-format, name (money = "\20B1"; nothing matched = a pencil).
   States: focus = white box, blue border + soft glow, blue block with a
   white icon; error (aria-invalid="true") = red border, pink box + block,
   red icon; disabled / readonly = grey, dashed border, lock icon;
   search = white pill, search icon, no block. Checkboxes, radios, switches,
   file inputs, list boxes and the Record Sale quantity stepper are left as
   they were.
   Contrast (CLAUDE.md 0.2): the border is #7189a8 (3.4:1 on the box, 3.6:1
   on white) and the dashed one #6b7a8c (3.9:1) instead of the lighter
   #b7cbe3 / #c5d0dc (1.6:1 / 1.4:1); placeholders #5f6f84 (4.9:1);
   icons #0258ad on #e8f3fd 6.2:1, white on #0258ad 7:1, red 5.4:1.
   ========================================================================== */

:where(input, textarea) {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
}

:where(select) {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
}

input[type="search"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
}

input[type="email"],
input[data-format="email"],
input[name*="email"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
}

input[type="tel"],
input[data-format="mobile"],
input[data-format="shop-phone"],
input[data-format="phone"],
input[name*="phone"],
input[name*="mobile"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3h3l1.5 4.5-2 1.5a11 11 0 0 0 5.9 5.9l1.5-2 4.5 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.6 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3h3l1.5 4.5-2 1.5a11 11 0 0 0 5.9 5.9l1.5-2 4.5 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.6 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3h3l1.5 4.5-2 1.5a11 11 0 0 0 5.9 5.9l1.5-2 4.5 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.6 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

input[type="time"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

input[type="password"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E");
}

input[type="number"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4 8 20M16 4l-2 16'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4 8 20M16 4l-2 16'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4 8 20M16 4l-2 16'/%3E%3C/svg%3E");
}

input[data-format="name"],
input[data-format="name-middle"],
input[name$="first_name"],
input[name$="last_name"],
input[name$="middle_name"],
input[name="username"],
input[name$="_name"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

input[name*="address"],
textarea[name*="address"],
input[autocomplete="street-address"],
textarea[autocomplete="street-address"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}

input[data-format="reference"],
input[data-format="invoice"],
input[name*="reference"],
input[name*="invoice"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
}

input[type="url"],
input[name*="facebook"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
}

input[data-format="urgency-word"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E");
}

input[name="shop_name"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v10h16V10'/%3E%3Cpath d='M2.5 10 5 4h14l2.5 6z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v10h16V10'/%3E%3Cpath d='M2.5 10 5 4h14l2.5 6z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v10h16V10'/%3E%3Cpath d='M2.5 10 5 4h14l2.5 6z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}

input[name*="hours"] {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230258ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

input[data-format="money"],
input[data-format="money-positive"],
input[name*="price"],
input[name*="amount"],
#price_min,
#price_max {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='17' font-weight='700' fill='%230258ad'%3E%E2%82%B1%3C/text%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='17' font-weight='700' fill='%23ffffff'%3E%E2%82%B1%3C/text%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='17' font-weight='700' fill='%23b3261e'%3E%E2%82%B1%3C/text%3E%3C/svg%3E");
}

input:is(:disabled, [readonly]),
select:disabled,
textarea:is(:disabled, [readonly]) {
    --fld-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
    --fld-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
    --fld-icon-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea) {
    --fld-w: 48px;
    --fld-bg: #f7fafd;
    --fld-border: #7189a8;
    --fld-blk: #e8f3fd;
    --fld-div: #d3deeb;
    --fld-ic: var(--fld-icon);
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 14px 0 calc(var(--fld-w) + 12px);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: #1a2233;
    background-color: var(--fld-bg);
    background-image: var(--fld-ic), linear-gradient(to right, var(--fld-blk) 0 var(--fld-w), var(--fld-div) var(--fld-w) calc(var(--fld-w) + 1px), transparent calc(var(--fld-w) + 1px));
    background-repeat: no-repeat, no-repeat;
    background-position: calc((var(--fld-w) - 20px) / 2) center, 0 0;
    background-size: 20px 20px, 100% 100%;
    border: 1.5px solid var(--fld-border);
    border-radius: 12px;
    box-shadow: none;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple])) {
    height: 48px;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea):is(select) {
    padding-right: 40px;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--fld-ic), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301245c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(to right, var(--fld-blk) 0 var(--fld-w), var(--fld-div) var(--fld-w) calc(var(--fld-w) + 1px), transparent calc(var(--fld-w) + 1px));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: calc((var(--fld-w) - 20px) / 2) center, right 14px center, 0 0;
    background-size: 20px 20px, 18px 18px, 100% 100%;
    text-overflow: ellipsis;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea):is(textarea) {
    min-height: 104px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
    background-position: calc((var(--fld-w) - 20px) / 2) 13px, 0 0;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)::placeholder {
    color: #5f6f84;
    opacity: 1;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea):focus {
    --fld-bg: #ffffff;
    --fld-border: #0258ad;
    --fld-blk: #0258ad;
    --fld-div: #0258ad;
    --fld-ic: var(--fld-icon-on);
    outline: none;
    box-shadow: 0 0 0 4px #cfe3f8;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[aria-invalid="true"] {
    --fld-bg: #fff6f5;
    --fld-border: #b3261e;
    --fld-blk: #fde3e0;
    --fld-div: #f3c3bd;
    --fld-ic: var(--fld-icon-err);
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[aria-invalid="true"]:focus {
    --fld-bg: #ffffff;
    box-shadow: 0 0 0 4px #f8d4cf;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea):is(:disabled, [readonly]) {
    --fld-bg: #eef1f4;
    --fld-blk: #e1e6ec;
    --fld-div: #c5d0dc;
    --fld-ic: var(--fld-icon);
    color: #4b5563;
    border: 1.5px dashed #6b7a8c;
    cursor: not-allowed;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea):is(:disabled, [readonly]):focus {
    --fld-bg: #eef1f4;
    --fld-blk: #e1e6ec;
    --fld-ic: var(--fld-icon);
    border-color: #0258ad;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[type="search"] {
    --fld-bg: #ffffff;
    --fld-blk: transparent;
    --fld-div: transparent;
    --fld-w: 44px;
    padding-left: 44px;
    border-radius: 999px;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[type="search"]:focus {
    --fld-blk: transparent;
    --fld-div: transparent;
    --fld-ic: var(--fld-icon);
}

.search-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[type="search"] {
    padding-right: 2.75rem;
}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[type="number"] {
    --fld-w: 38px;
    padding-left: 46px;
    padding-right: 8px;
}

.public-site .pick-qty :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea) {
    width: 6.5rem;
}

@media (min-width: 768px) {
    .service-line-row :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[name="quantity[]"],
    .service-line-row :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea)[name="add_quantity"] {
        flex: 0 0 7rem;
        max-width: 7rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]):not(.qty-stepper > input), select:not([size]):not([multiple]), textarea) {
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
}

/* Labels above the box: bold, dark navy. Help text below: 14px. */
.form-row > label:not(.check-inline):not(.privacy-check):not(.toggle),
.paper-invoice-form > label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: #01245c;
}

.form-hint,
.form-row .form-hint,
.public-site .form-hint {
    font-size: 14px;
    color: #4a5b70;
}

/* The error text under a box gets a small warning icon. */
.field-error:not([hidden]):not(:empty)::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
    vertical-align: -0.15em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Complete Job, Step 3 Payment: plain stacked layout (2026-10-22) ----------
   Here section.pay-choice is a panel, not Record Sale's clickable label card (.pay-choice
   at the top of this file): no side-by-side flex row, no pointer, no "checked" tint, one
   column at every width. The main button sits at the end of its form (.pay-submit), never
   pinned, the same for Cash and Sent to shop's account. */
.tech-job-panel .pay-choices {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 1rem 0 0;
}

.tech-job-panel section.pay-choice,
.tech-job-panel section.pay-choice:hover,
.tech-job-panel section.pay-choice:has(input:checked) {
    display: block;
    min-height: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid #d5dbe1;
    box-shadow: none;
    cursor: auto;
}

.tech-job-panel section.pay-choice:has(input:focus-visible) {
    outline: 0;
}

.tech-job-panel section.pay-choice > h4 {
    margin: 0 0 0.5rem;
}

.tech-job-panel section.pay-choice > .form-hint {
    margin: 0 0 0.75rem;
}

.tech-job-panel .pay-choice-wide {
    grid-column: auto;
}

.pay-submit {
    margin-top: 1.25rem;
}

.public-site .pay-submit .btn {
    width: 100%;
    min-height: 56px;
    font-size: 1.125rem;
}

/* Top part: total, paper invoice box, then the Cash / Sent to shop choice, evenly spaced. */
.tech-job-panel .receipt-details,
.tech-job-panel .paper-invoice-form {
    margin: 1rem 0;
}

.tech-job-panel .paper-invoice-form .form-hint {
    display: block;
    margin-top: 0.35rem;
}

.tech-job-panel .pay-tiles {
    margin: 0.75rem 0 0;
}

/* The picked account: details, then a QR that fits the panel (up to 20rem), centred,
   with "Show full screen" right under it. */
.tech-job-panel .shop-qr-big {
    margin: 1rem 0 0;
}

.public-site.tech-area .tech-job-panel .shop-qr-number .btn {
    width: auto;
    min-height: 44px;
}

.tech-job-panel .shop-qr-frame {
    --qr-frame-w: min(100%, 20rem);
    width: var(--qr-frame-w);
    margin: 0.75rem auto 0.5rem;
}

.public-site.tech-area .tech-job-panel .shop-qr-full-btn {
    display: block;
    width: min(100%, 20rem);
    margin: 0 auto;
}

/* Wide screens: account, Reference no. and the button on the left; amount, account and QR on the right. */
@media (min-width: 1024px) {
    .tech-job-panel #sent-to-shop > form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
        grid-template-areas:
            "pick   qr"
            "ref    qr"
            "submit qr";
        grid-template-rows: auto auto 1fr;
        column-gap: 2rem;
        align-items: start;
    }

    .tech-job-panel #sent-to-shop .shop-account-fieldset {
        grid-area: pick;
        margin-top: 0;
    }

    .tech-job-panel #sent-to-shop .shop-qr-big {
        grid-area: qr;
        margin: 0;
        padding-left: 2rem;
        border-left: 1px solid #d5dbe1;
    }

    .tech-job-panel #sent-to-shop .form-row {
        grid-area: ref;
        margin: 0;
    }

    .tech-job-panel #sent-to-shop .pay-submit {
        grid-area: submit;
    }

    .tech-job-panel .pay-choices {
        max-width: 60rem;
    }

    .tech-job-panel [data-pay-panel="cash"] .pay-submit .btn {
        max-width: 24rem;
    }
}

/* ---------- Job detail cards: no empty gaps (2026-10-23) ----------
   Technician + customer job pages (.order-detail-grid in _tech_order_detail.php /
   _customer_order_detail.php). Phones: one column, page order. 768px+: two CSS
   columns, each stacking its own cards top to bottom (still page order), so a
   short card never waits beside a tall one. A card is never split. */
@media (min-width: 768px) {
    .order-detail-grid {
        display: block;
        column-count: 2;
        column-gap: 1.25rem;
    }

    .order-detail-grid > * {
        display: block;
        margin: 0 0 1.25rem;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Payment card (technician): Method, Paid, Account, ref ... one under another,
   label above value, so "QR Ph via PayMongo" and a long ref get the full card width.
   A ref breaks only if it can't fit, and one tap selects all of it for copying. */
.visit-facts.tech-pay-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0.5rem 0 0;
}

.tech-pay-facts > div {
    padding: 0.6rem 0;
    border-top: 1px solid var(--color-grey-200);
}

.tech-pay-facts > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.tech-pay-facts dd.service-uid,
.receipt-details dd.cell-uid {
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}