/* SAWM app-specific overrides on top of vendored Bootstrap. Keep this file small — PRD §8.1 performance budget. */

/* Brand color reconciliation, take two. #1F3864 (navy) was never SAWM's real brand color — it
   was only ever what the PDF templates happened to use, and got treated as canon because
   nothing had checked it against the actual corporate identity. The real one is the Shared
   Auto Cars brand manual (SAC-LogoManual): Shared Auto Red #CC0011 leading, Shared Auto Blue
   #0088CC supporting, Grey 80% #333333 / Grey 20% #CCCCCC as the official neutrals. Navy
   doesn't appear anywhere in that manual.

   Bootstrap 5.3's compiled CSS only wires bg-primary/text-primary/border-primary/alert-primary
   to the root --bs-primary(-rgb) custom properties — button, dropdown, and form-control colors
   are baked in per-component at compile time and need their own overrides. The shades below are
   not picked by eye: they reapply Bootstrap's own derivation ratios (hover ~85% of base,
   hover-border/active-bg ~80%, active-border ~75%, the button focus glow a 15% white tint, the
   subtle bg/border tints ~84%/~61% white) to Shared Auto Red, the same ratios navy borrowed
   before it — so hover/active/focus feel exactly as calibrated as ever, just correctly red now.

   --bs-info becomes Shared Auto Blue: Bootstrap's bg-info/alert-info/text-info utilities read
   the root token directly rather than baking a component-level var, so unlike primary there's
   no .btn-info/.alert-info block needed. This is also where "today / part-paid" status badges
   (bg-info.text-dark, DESIGN.md's Semantic-Only Rule) start showing actual brand blue instead
   of Bootstrap's stock cyan.

   --bs-dark becomes Grey 80%, the manual's own dark neutral, instead of Bootstrap's #212529 —
   the navbar rides on bg-dark now (see layout/base.php) so it should be brand grey, not a color
   the manual never specified. */
:root {
    --bs-primary: #CC0011;
    --bs-primary-rgb: 204, 0, 17;
    --bs-primary-text-emphasis: #8F000C;
    --bs-primary-bg-subtle: #F7D6D9;
    --bs-primary-border-subtle: #EB9CA2;
    --bs-info: #0088CC;
    --bs-info-rgb: 0, 136, 204;
    --bs-dark: #333333;
    --bs-dark-rgb: 51, 51, 51;
    /* "links and secondary accents in Shared Auto Blue" — the manual's own typography rule.
       Like --bs-info, link color is a root token Bootstrap doesn't bake per-component, so
       this alone repaints every plain <a> in the app (customer names, plate numbers, table
       row links) away from Bootstrap's stock blue and onto the real brand blue. */
    --bs-link-color: #0088CC;
    --bs-link-color-rgb: 0, 136, 204;
    --bs-link-hover-color: #0074AD;
    --bs-link-hover-color-rgb: 0, 116, 173;
}

.btn-primary {
    --bs-btn-bg: #CC0011;
    --bs-btn-border-color: #CC0011;
    --bs-btn-hover-bg: #AD000E;
    --bs-btn-hover-border-color: #A3000E;
    --bs-btn-active-bg: #A3000E;
    --bs-btn-active-border-color: #99000D;
    --bs-btn-disabled-bg: #CC0011;
    --bs-btn-disabled-border-color: #CC0011;
    --bs-btn-focus-shadow-rgb: 212, 38, 53;
}

.btn-outline-primary {
    --bs-btn-color: #CC0011;
    --bs-btn-border-color: #CC0011;
    --bs-btn-hover-bg: #CC0011;
    --bs-btn-hover-border-color: #CC0011;
    --bs-btn-active-bg: #CC0011;
    --bs-btn-active-border-color: #CC0011;
    --bs-btn-disabled-color: #CC0011;
    --bs-btn-disabled-border-color: #CC0011;
    --bs-btn-focus-shadow-rgb: 204, 0, 17;
}

/* The Reports/Admin nav dropdowns mark "you are here" with .dropdown-item.active's solid fill
   (see the comment in layout/base.php) — part of the navbar's own active-state language. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: #CC0011;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #e68088;
    box-shadow: 0 0 0 .25rem rgba(204, 0, 17, .25);
}

.form-check-input:checked {
    background-color: #CC0011;
    border-color: #CC0011;
}

body {
    min-height: 100vh;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Active section in the top menu. Bootstrap's navbar-dark separates the current link from
   the rest by text opacity alone (.55 → 1), which is not enough to catch at a glance across
   a bar this wide — and once Reports and Admin became dropdowns, a collapsed group had to be
   able to say the screen you are on is inside it.

   Desktop gets an underline. The collapsed menu gets a left rule instead, because a stacked
   list has no bar to underline. Items inside an open dropdown need nothing: .dropdown-item.active
   is already a solid primary fill. */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav .nav-link.active {
        box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.9);
    }

    /* The two-word labels — "Job Overview", "Service due" — break across two lines on a
       narrow desktop, which doubles the height of the whole bar and leaves the underline
       above sitting under half a label. Wrap by whole item instead. */
    .navbar-expand-xl .navbar-nav .nav-link {
        white-space: nowrap;
    }

    /* Laid out on one line the bar wants ~1324px (it wanted ~1575px before the menu was
       grouped, which is why it overflowed even a 1366px laptop). A flex row does not wrap
       by default, so the shortfall came out as a horizontal scrollbar across the whole
       page. Let it fall to a second row instead — it only happens between 1200px and
       ~1324px, and a name longer than the one it was measured with widens that band. */
    .navbar-expand-xl .navbar-collapse {
        flex-wrap: wrap;
    }
}

/* Below xl the menu is a stacked list, so there is no bar to underline. */
@media (max-width: 1199.98px) {
    .navbar .navbar-nav > .nav-item > .nav-link.active {
        border-left: 3px solid rgba(255, 255, 255, 0.9);
        padding-left: 0.75rem;
    }
}

/* Show/hide password button injected by assets/password-toggle.js. The inline SVG needs
   explicit centring — Bootstrap sizes .btn for a text baseline, not an icon. */
.password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
}

/* Rendered staff guides (/help/{slug}) — Markdown from docs/guides via GuideService.
   Sized for reading a checklist on a phone, and for the printed copy that ends up
   laminated by the counter (PRD §6.13). */
.guide h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.guide h2 { font-size: 1.25rem; margin-top: 1.75rem; margin-bottom: .6rem; }
.guide h3 { font-size: 1rem; margin-top: 1.25rem; }
.guide p, .guide li { line-height: 1.6; }
.guide ol, .guide ul { padding-left: 1.35rem; }
.guide li { margin-bottom: .35rem; }
.guide table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.guide th, .guide td { border: 1px solid #dee2e6; padding: .45rem .6rem; text-align: left; vertical-align: top; }
.guide th { background: #f8f9fa; }
.guide blockquote {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #f8f9fa;
    margin: 1rem 0;
    padding: .6rem .9rem;
}
.guide blockquote p:last-child { margin-bottom: 0; }
.guide code { background: #f1f3f5; padding: .1rem .3rem; border-radius: .25rem; }

@media print {
    /* Print just the guide — no navbar, no buttons. */
    .navbar, .alert-dismissible .btn-close { display: none !important; }
    .guide { max-width: 100%; }
    a[href]::after { content: ""; }
}

/* ---------------------------------------------------------------- line editor
   Parts & labour rows (Views/partials/line_editor.php), shared by estimates and
   job sheets.

   The table is right on a desktop and unusable on a phone: eight columns squeezed
   into 360px leaves a description box showing "Tengok j..." and a horizontal
   scrollbar under everything. Below the md breakpoint each row becomes a card with
   real labels instead.

   Deliberately CSS-only. The markup keeps its <table>, its <tr class="line-row">
   and every class line-editor.js queries, so the add/remove/total/catalog logic is
   untouched — and a row cloned from the <template> reflows exactly like a
   server-rendered one, with no second code path to keep in step. */

.line-editor .cell-label,
.line-editor .remove-label {
    /* Labels exist for the mobile layout; the table header does the job on desktop.
       Not display:none — screen readers should still reach them. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767.98px) {
    .line-editor .table-responsive { overflow-x: visible; }
    .line-editor table,
    .line-editor tbody { display: block; width: 100%; }
    .line-editor thead { display: none; }

    .line-editor tr.line-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .6rem .75rem;
        align-items: end;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .5rem;
        padding: .85rem;
        margin-bottom: .85rem;
        background: var(--bs-body-bg, #fff);
    }

    .line-editor tr.line-row > td {
        display: block;
        width: auto !important;
        padding: 0;
        border: 0;
        text-align: left !important;
    }

    /* Description and the catalog type-ahead need the full width — it is the field
       staff actually type into, and the one the screenshot showed truncated. */
    .line-editor .cell-description,
    .line-editor .cell-remove { grid-column: 1 / -1; }

    .line-editor .cell-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 .2rem;
        clip: auto;
        overflow: visible;
        display: block;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--bs-secondary-color, #6c757d);
    }

    /* Taxable reads as a checkbox with its own words, not an unlabelled tick. */
    .line-editor .cell-tax { align-self: center; }
    .line-editor .cell-tax .cell-label {
        display: inline;
        margin: 0;
        text-transform: none;
        letter-spacing: 0;
        font-size: .875rem;
        font-weight: 400;
        color: inherit;
    }

    .line-editor .cell-amount {
        align-self: center;
        text-align: right !important;
        font-size: 1rem;
    }
    .line-editor .cell-amount .cell-label {
        display: inline;
        margin: 0 .35rem 0 0;
        font-size: .75rem;
    }
    .line-editor .cell-amount .line-total-display { font-weight: 600; }

    /* A 36px × button is a poor target on a phone; give it words and full width. */
    .line-editor .cell-remove .remove-line { width: 100%; }
    .line-editor .remove-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 0 .4rem;
        clip: auto;
        overflow: visible;
    }

    /* iOS zooms the whole page when a focused input is under 16px, which on a
       cramped form means every tap fights the viewport. form-control-sm is 14px. */
    .line-editor .form-control,
    .line-editor .form-select { font-size: 1rem; }

    .line-editor .add-line { width: 100%; }
    .line-editor .totals-preview { max-width: none !important; }
}

/* ---------------------------------------------------------------- user list
   Views/users/index.php. Five columns (name, username, role badge, status
   badge, two action buttons) don't fit a phone even though no single cell is
   wide on its own — the same "too many columns" failure the line-editor
   rewrite above already solved once. Same fix, scoped to this table: below
   md, each row becomes a labeled card instead of a row that needs a
   horizontal scrollbar to read. */

.user-list .cell-label {
    /* Sr-only until the mobile rule below makes it a real visible label —
       at desktop the table's own <th> already names the column. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767.98px) {
    .user-list thead { display: none; }
    .user-list, .user-list tbody { display: block; width: 100%; }

    .user-list tr {
        display: block;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .5rem;
        padding: .85rem;
        margin-bottom: .85rem;
        background: var(--bs-body-bg, #fff);
    }

    .user-list td {
        display: block;
        width: auto !important;
        padding: .2rem 0;
        border: 0;
        text-align: left !important;
    }

    .user-list .cell-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0 .4rem 0 0;
        clip: auto;
        overflow: visible;
        display: inline-block;
        min-width: 5.5rem;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--bs-secondary-color, #6c757d);
    }
}