/* ==========================================================
   Bin Dhaen Holding Group - Capital Expenditure Request (Stage 1)
   Navy / Gold internal-tool visual language
   ========================================================== */

:root {
    --navy-950: #0a1628;
    --navy-900: #0e1d33;
    --navy-800: #142640;
    --navy-700: #1c3455;
    --navy-600: #2a4570;
    --gold-600: #b3903f;
    --gold-500: #c9a84c;
    --gold-400: #d9bf72;
    --gold-100: #f7f0dc;

    --ink: #1c2430;
    --ink-soft: #4a5568;
    --ink-faint: #8a94a3;

    --bg: #f5f6f8;
    --card-bg: #ffffff;
    --border: #e2e5ea;
    --border-soft: #edeff2;
    --locked-bg: #f0f1f4;

    --error: #b3402f;
    --success: #2f7a4f;

    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 7px;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win, even on elements whose own
   class sets `display: flex/grid/block` (e.g. .field, .card,
   .signature-type-wrap). Author CSS normally beats the browser's
   default `[hidden]{display:none}` UA rule regardless of specificity,
   which was silently keeping several conditional sections visible
   (category "Others" specify box, signature mode panels, draft
   banners, etc.) - this rule restores the expected behavior everywhere
   in the app. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- Session bar (signed-in identity + sign out) ---------- */

.session-bar {
    background: var(--navy-950);
    border-bottom: 1px solid rgba(244, 241, 234, 0.1);
}

.session-bar__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
}

.session-bar__identity {
    color: #93a1b8;
}

.session-bar__identity strong {
    color: #f4f1ea;
    font-weight: 600;
}

.session-bar__nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.session-bar__link {
    color: var(--gold-400);
    text-decoration: none;
    font-weight: 600;
}

.session-bar__link:hover {
    text-decoration: underline;
}

/* ---------- Scroll progress ---------- */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
    z-index: 1000;
    transition: width 0.1s linear;
}

/* ---------- Draft banner / status ---------- */

.draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--gold-100);
    border: 1px solid var(--gold-500);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--gold-600);
}

.draft-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--success);
    margin-bottom: 20px;
}

.draft-status__icon { flex-shrink: 0; }

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

.page-header {
    background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
    border-bottom: 3px solid var(--gold-500);
}

.page-header__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

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

.brand__mark {
    display: block;
    height: 46px;
    width: auto;
}

.brand__text { display: flex; flex-direction: column; }

.brand__group {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: #f4f1ea;
    letter-spacing: 0.2px;
}

.brand__system {
    font-size: 12px;
    color: #93a1b8;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.stage-indicator {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stage-indicator__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #7f8dab;
}

.stage-indicator__stage {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-400);
}

.page-header__right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.form-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    padding-left: 22px;
    border-left: 1px solid rgba(244, 241, 234, 0.15);
}

.form-meta__row {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.form-meta__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #7f8dab;
}

.form-meta__value {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gold-400);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

/* ---------- Layout ---------- */

.page-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

.form-title { margin-bottom: 28px; }

.form-title--with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.form-title--with-action .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.form-title h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    color: var(--navy-950);
    margin: 0 0 8px;
}

.form-subtitle {
    color: var(--ink-soft);
    font-size: 14.5px;
    margin: 0;
}

.required-mark { color: var(--error); }

/* ---------- Dashboard: stats + section headings ---------- */

.dashboard-stats {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.dashboard-stat {
    flex: 1 1 140px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-stat--action {
    border-color: var(--gold-500);
    background: var(--gold-100);
}

.dashboard-stat__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--navy-950);
    line-height: 1.1;
}

.dashboard-stat__label {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ---------- Dashboard card approval progress ---------- */

.request-progress {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
}

.request-progress__step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 4px;
    gap: 2px;
}

/* Connector from the previous step's dot to this one - coloured by
   THIS step's state, so the line fills up to wherever the request is. */
.request-progress__step + .request-progress__step::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--border);
}

.request-progress__step--done::before,
.request-progress__step--current::before {
    background: var(--success) !important;
}

.request-progress__dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--border);
    margin-bottom: 6px;
}

.request-progress__step--done .request-progress__dot {
    background: var(--success);
    border-color: var(--success);
}

.request-progress__step--current .request-progress__dot {
    border-color: var(--gold-500);
    background: var(--gold-400);
    box-shadow: 0 0 0 4px var(--gold-100);
}

.request-progress__step--returned .request-progress__dot {
    border-color: var(--error);
    background: var(--card-bg);
    box-shadow: 0 0 0 4px rgba(179, 64, 47, 0.12);
}

.request-progress__step--skipped .request-progress__dot {
    border-style: dashed;
}

.request-progress__role {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ink-faint);
}

.request-progress__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.request-progress__state {
    font-size: 11.5px;
    color: var(--ink-faint);
}

.request-progress__step--done .request-progress__state { color: var(--success); }
.request-progress__step--current .request-progress__state { color: var(--gold-600); font-weight: 600; }
.request-progress__step--returned .request-progress__state { color: var(--error); font-weight: 600; }
.request-progress__step--upcoming .request-progress__name,
.request-progress__step--skipped .request-progress__name { color: var(--ink-soft); font-weight: 500; }
.request-progress__step--skipped .request-progress__name { text-decoration: line-through; }

/* Narrow screens: a 5-6 stage chain won't fit side by side, so stack
   it as a vertical timeline instead. */
@media (max-width: 640px) {
    .request-progress {
        flex-direction: column;
        gap: 12px;
    }
    .request-progress__step {
        display: grid;
        grid-template-columns: 14px 1fr;
        column-gap: 12px;
        align-items: center;
        text-align: left;
        padding: 0;
    }
    .request-progress__dot {
        grid-row: 1 / span 3;
        align-self: start;
        margin: 2px 0 0;
    }
    /* Vertical: draw each connector DOWN from a dot to the next one
       (spanning the step's own text height), green once that step is
       signed - same fill-up-to-here meaning as the horizontal line. */
    .request-progress__step + .request-progress__step::before {
        display: none;
    }
    .request-progress__step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 16px;
        bottom: -14px;
        width: 2px;
        background: var(--border);
    }
    .request-progress__step--done:not(:last-child)::after {
        background: var(--success);
    }
}

.dashboard-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gold-500);
}

.dashboard-section-heading--secondary {
    margin-top: 36px;
    border-bottom-color: var(--border);
}

.dashboard-section-heading h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--navy-950);
    margin: 0;
}

.dashboard-section-heading__hint {
    font-size: 12.5px;
    color: var(--ink-faint);
}

.dashboard-section-heading__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--navy-950);
}

.dashboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.dashboard-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    flex: 1 1 220px;
}

.dashboard-filter-select {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    flex: 1 1 160px;
    max-width: 220px;
}

.dashboard-search__icon {
    color: var(--ink-faint);
    flex-shrink: 0;
}

.dashboard-search__input {
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: var(--ink);
    width: 100%;
}

.dashboard-search__empty {
    text-align: center;
    color: var(--ink-faint);
    font-size: 13.5px;
    padding: 20px 0;
}

/* Approved requests accumulate without bound as an account's history
   grows, so they're tucked behind a native <details> toggle instead of
   permanently crowding the page - collapsed by default, but the search
   box above auto-expands it when a match lives inside (see the inline
   script in dashboard.php). */
.dashboard-approved-collapse {
    margin-top: 36px;
}

.dashboard-approved-collapse summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
    cursor: pointer;
    /* Removes the native disclosure triangle - its size/contrast/
       position varies a lot across browsers, so a purpose-built,
       always-visible toggle (see .dashboard-approved-toggle below)
       replaces it rather than relying on it. */
    list-style: none;
}

.dashboard-approved-collapse summary::-webkit-details-marker {
    display: none;
}

/* This was the ONLY visible cue that the section is expandable at all
   - it had been styled with the same faint, 12.5px gray used for
   genuinely secondary hint text elsewhere on the page (e.g. "Requests
   waiting on your review"), which made an actual interactive control
   nearly invisible. Styled here as a real, button-like affordance
   instead: a filled gold pill with a chevron that flips on open. */
.dashboard-approved-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--gold-100);
    border: 1px solid var(--gold-500);
    color: var(--gold-600);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.dashboard-approved-collapse summary:hover .dashboard-approved-toggle {
    background: var(--gold-500);
    color: var(--navy-950);
}

.dashboard-approved-toggle__label::before {
    content: 'Expand';
}

.dashboard-approved-collapse[open] .dashboard-approved-toggle__label::before {
    content: 'Collapse';
}

.dashboard-approved-toggle__chevron {
    transition: transform 0.15s ease;
}

.dashboard-approved-collapse[open] .dashboard-approved-toggle__chevron {
    transform: rotate(180deg);
}

.dashboard-approved-collapse > div {
    margin-top: 14px;
}

.dashboard-show-more {
    display: block;
    width: 100%;
    margin: -4px 0 24px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--ink-soft);
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    text-align: center;
}

.dashboard-show-more:hover {
    background: var(--gold-100);
    border-color: var(--gold-500);
    color: var(--navy-950);
}

.dashboard-archive-form {
    display: inline-block;
    margin-top: 12px;
}

.dashboard-archive-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-faint);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.dashboard-archive-btn:hover {
    color: var(--navy-800);
}

/* ---------- Cards / sections ---------- */

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(10, 22, 40, 0.03);
    overflow: hidden;
}

.card--conditional {
    border-color: var(--gold-500);
    box-shadow: 0 1px 3px rgba(201, 168, 76, 0.18);
}

.card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #fbfbfc, #ffffff);
}

.card__header h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--navy-900);
    margin: 0;
}

.card__hint {
    font-size: 12px;
    color: var(--ink-faint);
    white-space: nowrap;
}

.card__body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------- Fields ---------- */

.field-grid {
    display: grid;
    gap: 20px;
}

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

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-800);
}

.field--fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.field--fieldset legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-800);
    padding: 0;
    margin-bottom: 7px;
}

.field-note {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: -2px;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea { resize: vertical; min-height: 44px; font-family: var(--font-body); }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

input::placeholder, textarea::placeholder { color: #adb4bf; }

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--locked-bg);
    color: var(--ink-soft);
    cursor: not-allowed;
}

.label-with-lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.label-with-lock .lock-icon { color: var(--ink-faint); }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234a5568' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* invalid state */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(179, 64, 47, 0.12);
}

.segmented.is-invalid {
    border: 1.5px dashed var(--error);
    border-radius: 999px;
    padding: 6px;
    margin: -6px;
}

.segmented.is-invalid .segmented__option span {
    border-color: rgba(179, 64, 47, 0.4);
}

.field-error {
    display: none;
    font-size: 12.5px;
    color: var(--error);
    margin-top: 2px;
}

.field.is-invalid .field-error,
.segmented-wrap.is-invalid .field-error {
    display: block;
}

/* ---------- Locked / auto-filled fields ---------- */

.field--locked label {
    color: var(--ink-faint);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.locked-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--locked-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    color: var(--ink-soft);
    font-weight: 500;
    cursor: not-allowed;
}

.locked-value .lock-icon { color: var(--ink-faint); flex-shrink: 0; }

/* ---------- Read-only summary rows (reviewer recap, print doc) ----------
   Deliberately plain text, no border or box - a reviewer's recap of a
   prior stage's answers must never look like an editable field. */

.summary-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 0;
}

.summary-row__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-faint);
}

.summary-row__value {
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.5;
}

.summary-row__empty {
    color: var(--ink-faint);
    font-style: italic;
    font-weight: 400;
}

.summary-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-faint);
    margin-bottom: 14px;
}

/* ---------- Checkbox grid (Asset Category) ---------- */

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 16px;
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.checkbox-option:hover {
    border-color: var(--gold-500);
}

.checkbox-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.checkbox-option__box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 4px;
    border: 1.5px solid var(--ink-faint);
    background: #fff;
    position: relative;
    transition: all 0.15s ease;
}

.checkbox-option input:checked + .checkbox-option__box {
    background: var(--navy-900);
    border-color: var(--navy-900);
}

.checkbox-option input:checked + .checkbox-option__box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--gold-400);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-option input:focus-visible + .checkbox-option__box {
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.3);
}

.checkbox-option:has(input:checked),
.checkbox-option.is-checked {
    border-color: var(--navy-900);
    background: var(--gold-100);
}

.checkbox-option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkbox-option__label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}

.checkbox-grid.is-invalid .checkbox-option {
    border-color: var(--error);
}

/* ---------- Segmented control (Request Type) ---------- */

.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.segmented__option {
    position: relative;
}

.segmented__option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.segmented__option span {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    background: #fff;
    transition: all 0.15s ease;
}

.segmented__option input:checked + span {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: var(--gold-400);
    font-weight: 600;
}

.segmented__option input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.3);
}

/* ---------- Line items table ---------- */

.line-items__table {
    width: 100%;
    border-collapse: collapse;
}

.line-items__table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-faint);
    padding: 0 10px 10px;
    font-weight: 600;
}

.line-items__table td {
    padding: 6px 10px;
    vertical-align: middle;
}

/* min-width (not just width) on every column, plus a min-width on the
   description column that had none at all - a plain `width` hint still
   lets the browser's table auto-layout algorithm shrink columns (and
   the plain <input>s inside them) far below a usable size once the
   viewport is narrower than the table's preferred width, which is
   exactly what was happening on mobile: inputs shrank to near-unusable
   widths and the round remove-row button (a fixed 30px box, see
   .btn-icon) got squeezed into a cell smaller than itself and visibly
   clipped. With a real min-width the table instead simply refuses to
   shrink past a usable size, and the .line-items table's existing
   overflow-x:auto wrapper (see index.php/stage.php) takes over -
   letting the viewer scroll the table sideways on a phone instead of
   everything getting crushed. */
.col-desc { min-width: 160px; }
.col-amount { width: 160px; min-width: 130px; }
.col-qty { width: 100px; min-width: 76px; }
.col-action { width: 40px; min-width: 44px; }

/* Stage 1's Units in Hand column only applies to non-I.T. Equipment
   categories (see index.php) - toggled live via JS as Asset Category
   changes, rather than removed from the DOM, so newly-added rows
   don't need to know the current toggle state themselves. */
.hide-units-in-hand .col-units-in-hand { display: none; }

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

/* GFM's/Finance Manager's Budget Comparison table (stage.php) - a line
   whose actual price came in over GM's target budget. */
.line-item-row--over-budget { background: #fbeceb; }
.line-item-row--over-budget td { color: var(--navy-900); }

.line-items__group-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--navy-800);
}

.line-items__group-label:not(:first-child) {
    margin-top: 4px;
}

.line-items__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.btn-text {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-faint);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-text:hover { color: var(--error); }

.line-items__totals {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1.5px solid var(--border);
}

.line-items__total-cell {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.total-label {
    font-weight: 600;
    color: var(--navy-900);
    font-size: 13.5px;
}

.total-value {
    font-weight: 700;
    color: var(--navy-950);
    font-size: 16px;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
    background: #fbe9e6;
    color: var(--error);
}

.line-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- Per-line Specs (IT Team stage: editable; Procurement: read-only) ---------- */

.line-item-specs-row td {
    background: var(--bg);
    padding: 10px 14px !important;
}

.line-specs-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-faint);
    font-weight: 600;
    margin-bottom: 4px;
}

.line-specs {
    width: 100%;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    resize: vertical;
}

.line-specs-readonly {
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.btn-toggle-specs {
    display: block;
    margin: 0 auto 6px;
}

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

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-sm);
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn--primary {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
    color: var(--gold-400);
    box-shadow: 0 2px 8px rgba(10, 22, 40, 0.25);
}

.btn--primary:hover { box-shadow: 0 4px 14px rgba(10, 22, 40, 0.32); }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost {
    background: transparent;
    color: var(--navy-700);
    border: 1.5px dashed var(--border);
    align-self: flex-start;
}

.btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-600); }

.btn--small { padding: 8px 16px; font-size: 13px; }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- Budget status ---------- */

.budget-status-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.budget-status-row__toggle { flex: 0 0 auto; }
.budget-status-row__reason { flex: 1 1 320px; }

@media (max-width: 640px) {
    .budget-status-row { flex-direction: column; gap: 20px; }
}

/* ---------- Signature ---------- */

.signature-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--locked-bg);
    padding: 4px;
    border-radius: 999px;
    align-self: flex-start;
}

.signature-tab {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.signature-tab.is-active {
    background: var(--navy-900);
    color: var(--gold-400);
}

.signature-pad-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signature-canvas {
    width: 100%;
    max-width: 100%;
    height: 160px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: crosshair;
    touch-action: none;
}

.signature-pad-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.signature-pad-hint {
    font-size: 12px;
    color: var(--ink-faint);
}

.signature-type-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signature-typed-input {
    border: none;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    background: transparent;
    font-family: 'Dancing Script', cursive;
    font-size: 32px;
    font-weight: 600;
    color: var(--navy-950);
    padding: 8px 4px;
}

.signature-typed-input:focus {
    box-shadow: none;
    border-bottom-color: var(--gold-500);
}

.signature-typed-input::placeholder {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
}

.signature-typed-line {
    font-size: 11px;
    color: var(--ink-faint);
}

.signature-upload-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signature-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    overflow: hidden;
}

.signature-upload-dropzone:hover {
    border-color: var(--gold-500);
    background: var(--gold-100);
}

.signature-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--ink-faint);
    font-size: 12.5px;
    text-align: center;
    line-height: 1.5;
}

.signature-upload-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.signature-meta {
    font-size: 12.5px;
    color: var(--ink-faint);
    margin: 4px 0 0;
}

.signature-meta strong { color: var(--navy-800); }

.signature-saved-note {
    font-size: 12.5px;
    color: var(--success);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.signature-saved-note a {
    color: var(--ink-faint);
    font-weight: 500;
}

.signature-save-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
}

.signature-save-toggle input {
    width: 15px;
    height: 15px;
    accent-color: var(--navy-900);
    cursor: pointer;
}

#signatureError {
    display: none;
    font-size: 12.5px;
    color: var(--error);
}

#signatureError.is-visible { display: block; }

.signature-canvas.is-invalid,
.signature-typed-input.is-invalid,
.signature-upload-dropzone.is-invalid {
    border-color: var(--error);
}

/* ---------- Confirmation signature ---------- */

.confirmation__signature {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.confirmation__signature img {
    max-height: 90px;
    max-width: 260px;
}

.confirmation__signature-typed {
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 34px;
    font-weight: 600;
    color: var(--navy-950);
}

.confirmation__signature-meta {
    font-size: 12.5px;
    color: var(--ink-faint);
    margin: 10px 0 0;
    line-height: 1.6;
}

.confirmation__signature-meta strong { color: var(--navy-800); }

/* ---------- Submit bar ---------- */

.submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 4px 4px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

.submit-bar__note {
    font-size: 13px;
    color: var(--ink-faint);
    margin: 0;
}

/* ---------- Confirmation state ---------- */

.confirmation {
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--gold-500);
    border-radius: var(--radius-lg);
    padding: 56px 40px;
    margin-top: 28px;
    box-shadow: 0 2px 10px rgba(201, 168, 76, 0.15);
}

.confirmation__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eaf6ee;
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}

.confirmation h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--navy-950);
    margin: 0 0 10px;
}

.confirmation__ref {
    font-size: 15px;
    color: var(--navy-800);
    margin: 0 0 18px;
}

.confirmation__ref strong {
    color: var(--gold-600);
    font-family: var(--font-display);
    letter-spacing: 0.4px;
}

.confirmation__body {
    max-width: 520px;
    margin: 0 auto;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.7;
}

.confirmation__actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

/* ---------- Read-only (post-submit) state ---------- */

.capex-form.is-locked input,
.capex-form.is-locked select,
.capex-form.is-locked textarea {
    background: var(--locked-bg);
    color: var(--ink-soft);
    pointer-events: none;
}

.capex-form.is-locked .segmented__option span { pointer-events: none; }
.capex-form.is-locked .btn,
.capex-form.is-locked .btn-icon,
.capex-form.is-locked .btn-text { display: none; }
.capex-form.is-locked .submit-bar { display: none; }
.capex-form.is-locked .signature-tabs { display: none; }
.capex-form.is-locked .signature-pad-actions { display: none; }
.capex-form.is-locked .signature-upload-dropzone { pointer-events: none; cursor: default; }

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

.page-footer {
    text-align: center;
    padding: 22px;
    font-size: 12px;
    color: var(--ink-faint);
    border-top: 1px solid var(--border);
}

/* ---------- Responsive (secondary priority) ---------- */

@media (max-width: 760px) {
    .field-grid--4 { grid-template-columns: 1fr 1fr; }
    .field-grid--2 { grid-template-columns: 1fr; }
    .checkbox-grid { grid-template-columns: 1fr 1fr; }
    .page-header__inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
    .page-header__right { width: 100%; justify-content: space-between; }
    .stage-indicator { text-align: left; }
    .form-meta { align-items: flex-start; border-left: none; padding-left: 0; }
    .page-main { padding: 24px 16px 56px; }
    /* The full 32px side padding this bar uses on desktop, combined
       with a long "Signed in as ..." identity string and three nav
       links all trying to share one row, was forcing each individual
       link's own text to wrap mid-word ("Signature" / "Settings" as two
       lines) on a phone - see flex-wrap:wrap added above, which lets
       the identity and nav groups drop to their own row instead, and
       the tighter side padding here gives both groups more room before
       that's even needed. */
    .session-bar__inner { padding: 8px 16px; }
}

/* ---------- Intelligent Procurement Comparison ---------- */

.cmp-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.cmp-file-name { font-size: 14px; font-weight: 600; color: var(--navy-800); }
.cmp-confirmed-note { color: var(--success); font-weight: 600; font-size: 13.5px; margin: 0; }

.cmp-extraction-status {
    margin: 0;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
}
.cmp-status--ok { background: #eaf7ef; color: var(--success); }
.cmp-status--ai { background: #fbf3e7; color: var(--navy-900); }
.cmp-status--unavailable,
.cmp-status--failed { background: #fbeceb; color: var(--navy-900); }

.cmp-upload-form { display: flex; flex-direction: column; gap: 14px; }

.cmp-warnings {
    background: #fbf3e7;
    border: 1px solid var(--gold-500);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--navy-900);
}
.cmp-warnings ul { margin: 6px 0 0; padding-left: 18px; }

.cmp-table-wrap { overflow-x: auto; }
.cmp-edit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-edit-table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
    padding: 6px 8px;
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.cmp-edit-table td { padding: 4px 8px; vertical-align: middle; }
.cmp-edit-table input[type="text"] { font-size: 13px; padding: 7px 9px; min-width: 90px; }
.cmp-edit-table--readonly td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); }
.cmp-row-remove { white-space: nowrap; }

.cmp-conf--low input, td.cmp-conf--low { background: #fbf3e7; }
.cmp-conf--none input, td.cmp-conf--none { background: #fbeceb; }

.cmp-verify-actions { display: flex; gap: 10px; }
.cmp-verify-form { display: flex; flex-direction: column; gap: 16px; }

.cmp-recommendation {
    background: var(--gold-100);
    border: 1px solid var(--gold-400);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}
.cmp-recommendation__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gold-600);
    margin-bottom: 4px;
}
.cmp-recommendation p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.cmp-recommendation--stage { background: var(--bg); border-color: var(--border); }
.cmp-recommendation--stage .cmp-recommendation__label { color: var(--navy-800); }
.cmp-recommendation__by { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }

.cmp-selection-note--recommendation { margin-top: -4px; font-style: italic; }

.cmp-supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.cmp-supplier-card {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cmp-supplier-card.is-staged { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18); }
.cmp-supplier-card.is-selected { border-color: var(--success); box-shadow: 0 0 0 3px rgba(47, 122, 79, 0.14); }
.cmp-supplier-card__badge {
    position: absolute;
    top: -10px;
    right: 14px;
    background: var(--success);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
}
.cmp-supplier-card h3 { margin: 0; font-family: var(--font-display); font-size: 17px; color: var(--navy-900); }
.cmp-supplier-card__quote-type {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
    margin-top: -6px;
}
.cmp-supplier-card__price { font-size: 24px; font-weight: 700; color: var(--navy-950); }
.cmp-supplier-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.cmp-supplier-card dt { color: var(--ink-faint); }
.cmp-supplier-card dd { margin: 0; color: var(--ink); font-weight: 500; }

.cmp-selection-note { font-size: 13px; color: var(--ink-soft); margin: 0; }

.cmp-view-items-btn {
    width: 100%;
    font-weight: 700;
    border-color: var(--gold-500);
    color: var(--gold-600);
}
.cmp-view-items-btn:hover { background: var(--gold-100); }

.cmp-items-panel {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.cmp-items-panel__title {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--navy-900);
    margin-bottom: 8px;
}
.cmp-line-items__table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 480px; }
.cmp-line-items__table th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}
.cmp-line-items__table td { padding: 4px 6px; border-bottom: 1px solid var(--border-soft); color: var(--ink-soft); }

.cmp-line-items-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.cmp-line-items-summary__row { display: flex; flex-direction: column; gap: 2px; }
.cmp-line-items-summary__row > span { font-size: 13px; font-weight: 600; color: var(--navy-800); }

.cmp-confirm-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--navy-900);
    color: #fff;
    border-radius: var(--radius-md);
}
.cmp-confirm-bar__row { display: flex; align-items: center; gap: 14px; }
.cmp-confirm-recommendation {
    width: 100%;
    resize: vertical;
    font: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.cmp-confirm-recommendation::placeholder { color: rgba(255, 255, 255, 0.55); }
.cmp-confirm-bar .cmp-confirm-text { font-weight: 600; flex: 1; }
.cmp-confirm-bar .btn-text { color: var(--gold-400); }

/* Multiple independent comparison groups per revision (Phase 2) */

.cmp-group-list { display: flex; flex-direction: column; gap: 14px; }

.cmp-group-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}
.cmp-group-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}
.cmp-group-card summary::-webkit-details-marker { display: none; }
.cmp-group-card__name { font-family: var(--font-display); font-size: 16px; color: var(--navy-900); }
.cmp-group-card__status { font-size: 12.5px; color: var(--ink-faint); }
.cmp-group-card__body {
    padding: 0 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
}

.cmp-add-group { margin-top: 16px; }
.cmp-add-group summary { cursor: pointer; list-style: none; }
.cmp-add-group summary::-webkit-details-marker { display: none; }
.cmp-add-group__body { margin-top: 14px; max-width: 420px; }

.cmp-comparison-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border-soft);
}
.cmp-comparison-block:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cmp-comparison-block__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.cmp-comparison-block__header h3 { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--navy-900); }

.cmp-selected-total {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
}
.cmp-selected-total__label { color: var(--ink-faint); font-size: 13px; }
.cmp-selected-total strong { color: var(--navy-950); font-size: 17px; }

@media (max-width: 760px) {
    .cmp-supplier-grid { grid-template-columns: 1fr; }
}