:root {
    --brand: #e10d35;
    --brand-dark: #bc0707;
    --brand-soft: #fce8ed;
    --gold: #e10d35;
    --gold-soft: #fce8ed;
    --ink: #17191b;
    --ink-soft: #41464a;
    --ink-muted: #70767b;
    --surface: #ffffff;
    --surface-subtle: #f3f4f5;
    --line: #dfe2e4;
    --line-strong: #c7cbce;
    --success: #25875f;
    --warning: #d99127;
    --danger: #bd554b;
    --info: #4d7fa0;
    --shadow-sm: 0 1px 2px rgba(13, 17, 20, .05), 0 5px 16px rgba(13, 17, 20, .04);
    --shadow-md: 0 14px 35px rgba(13, 17, 20, .1);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Roboto, Aptos, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--surface-subtle);
}

body {
    font-size: 14px;
}

a {
    color: var(--brand);
}

button, input, select, textarea {
    font: inherit;
}

h1, h2, h3, h4, p {
    margin-top: 0;
}

h1 {
    scroll-margin-top: 104px;
}

    h1:focus {
        outline: none;
    }

.app-icon {
    display: block;
    flex: 0 0 auto;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 25px;
}

.page-title-wrap {
    min-width: 0;
}

.page-kicker {
    display: block;
    color: var(--brand);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.page-head h1 {
    font-family: "Arial Narrow", "Roboto Condensed", Roboto, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    letter-spacing: -.015em;
    line-height: 1.05;
    margin: 0;
}

.page-head p {
    color: var(--ink-muted);
    margin: 8px 0 0;
    font-size: .84rem;
    line-height: 1.5;
}

.page-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.btn {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    font-family: "Arial Narrow", "Roboto Condensed", Roboto, sans-serif;
    text-transform: uppercase;
    letter-spacing: .035em;
    font-weight: 800;
    font-size: .72rem;
    transition: .16s ease;
    cursor: pointer;
}

    .btn:hover {
        transform: translateY(-1px);
    }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 6px 13px rgba(225,13,53,.18);
}

    .btn-primary:hover {
        background: var(--brand-dark);
        color: #fff;
    }

.btn-secondary {
    background: #fff;
    border-color: var(--line-strong);
    color: var(--ink-soft);
}

    .btn-secondary:hover {
        border-color: #9cacA6;
        color: var(--ink);
    }

.btn-quiet {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-soft);
}

.btn-danger {
    background: #fff2f0;
    border-color: #f0c9c4;
    color: #99433b;
}

.btn-sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: .7rem;
}

.btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.card-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .card-head h2, .card-head h3 {
        font-size: .85rem;
        margin: 0;
        font-weight: 800;
    }

    .card-head p {
        margin: 4px 0 0;
        color: var(--ink-muted);
        font-size: .69rem;
    }

.card-body {
    padding: 20px;
}

.card-link {
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-card {
    padding: 19px;
    position: relative;
    overflow: hidden;
}

    .metric-card::after {
        content: '';
        position: absolute;
        width: 58px;
        height: 58px;
        border-radius: 0 5px 0 18px;
        background: var(--brand-soft);
        right: 0;
        top: 0;
        opacity: .75;
    }

.metric-top {
    min-height: 29px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    padding-right: 44px;
    position: relative;
    z-index: 1;
}

.metric-label {
    min-width: 0;
    color: var(--ink-muted);
    font-size: .69rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.metric-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--brand);
    background: transparent;
    font-weight: 900;
    line-height: 0;
    position: absolute;
    right: -19px;
    top: -19px;
    z-index: 1;
}

    .metric-icon .app-icon {
        display: block;
        margin: auto;
    }

.metric-value {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    letter-spacing: -.02em;
    line-height: 1;
}

.metric-foot {
    color: var(--ink-muted);
    font-size: .67rem;
    margin-top: 9px;
}

    .metric-foot strong {
        color: var(--success);
    }

.metric-card.warning .metric-icon {
    color: #9a6112;
    background: transparent;
}

.metric-card.warning::after {
    background: var(--gold-soft);
}

.payment-pending-card {
    margin-bottom: 18px;
    border-left: 4px solid var(--warning);
}

.payment-outstanding {
    color: var(--danger);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    gap: 18px;
}

.dashboard-stack {
    display: grid;
    gap: 18px;
}

.dashboard-workload-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 14px; }
.dashboard-workload-heading h2 { margin: 0; font-size: 1rem; }
.dashboard-workload-heading p { margin: 5px 0 0; color: var(--ink-muted); font-size: .8rem; }
.metric-grid.dashboard-stage-grid { grid-template-columns: repeat(8, minmax(140px, 1fr)); gap: 10px; overflow-x: auto; padding: 4px 3px 12px; scroll-snap-type: x proximity; scroll-padding-inline: 3px; scrollbar-width: thin; scrollbar-color: #ccd0d5 transparent; }
.dashboard-stage-card { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 13px; border-radius: 10px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; scroll-snap-align: start; box-shadow: 0 2px 5px rgba(24, 31, 40, .04); transition: border-color .15s, background .15s, box-shadow .15s; }
.dashboard-stage-name { display: flex; align-items: flex-start; min-height: 2.8em; font-size: .78rem; line-height: 1.4; font-weight: 750; }
.dashboard-stage-total { display: flex; align-items: baseline; gap: 7px; }
.dashboard-stage-total strong { font-size: 1.85rem; line-height: 1; letter-spacing: -.04em; font-weight: 800; font-variant-numeric: tabular-nums; }
.dashboard-stage-total > span { color: var(--ink-muted); font-size: .73rem; }
.dashboard-stage-share { height: 4px; display: block; overflow: hidden; border-radius: 3px; background: #eceff1; }
.dashboard-stage-share > span { display: block; height: 100%; border-radius: inherit; background: #b8c0c7; }
.dashboard-stage-action { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--ink-muted); font-size: .68rem; font-weight: 650; }
.dashboard-stage-card:hover { border-color: #e9a4b3; background: #fffafb; box-shadow: 0 3px 10px rgba(24, 31, 40, .07); }
.dashboard-stage-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dashboard-stage-card.is-selected { border-color: var(--brand); background: #fff5f7; box-shadow: inset 0 3px 0 var(--brand); }
.dashboard-stage-card.is-selected .dashboard-stage-name, .dashboard-stage-card.is-selected .dashboard-stage-total strong, .dashboard-stage-card.is-selected .dashboard-stage-action { color: var(--brand); }
.dashboard-stage-card.is-selected .dashboard-stage-share > span { background: var(--brand); }
.dashboard-orders { min-width: 0; }
@media (max-width: 1100px) { .metric-grid.dashboard-stage-grid { grid-template-columns: repeat(8, 168px); } }
@media (max-width: 480px) { .dashboard-workload-heading { align-items: flex-start; gap: 10px; } .dashboard-workload-heading p { max-width: 200px; font-size: .73rem; } .dashboard-workload-heading .btn { flex-shrink: 0; } .metric-grid.dashboard-stage-grid { grid-template-columns: repeat(8, 155px); } }
@media (prefers-reduced-motion: reduce) { .dashboard-stage-card { transition: none; } }
.order-accordion { min-width: 0; overflow: hidden; scroll-margin-top: 92px; }
.order-accordion:focus { outline: none; }
.order-accordion:focus-visible { box-shadow: 0 0 0 2px rgba(224, 13, 52, .22), var(--shadow-sm); }
.order-accordion-head { padding: 0; gap: 0; }
.order-accordion.is-collapsed .order-accordion-head { border-bottom-color: transparent; }
.order-accordion-toggle { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-start; gap: 18px; padding: 18px 20px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.order-accordion-toggle:hover { background: #fafbfa; }
.order-accordion-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.order-accordion-toggle > div { min-width: 0; }
.order-accordion-end { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-right: 16px; }
.order-accordion-chevron { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-muted); background: #fff; cursor: pointer; transition: transform .18s ease, color .18s ease, border-color .18s ease; }
.order-accordion-chevron:hover { color: var(--brand); border-color: #f2a8b5; }
.order-accordion-chevron:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.order-accordion.is-expanded .order-accordion-chevron { transform: rotate(90deg); color: var(--brand); border-color: #f2a8b5; }
.order-accordion-action { flex: 0 0 auto; }
.order-accordion-content { min-width: 0; }

.welcome-strip {
    background: linear-gradient(100deg, rgba(18,20,22,.96), rgba(18,20,22,.68)), url('/images/brand/industrial-background.jpg') center 51%/cover;
    color: #fff;
    padding: 24px 26px;
    border-radius: 6px;
    border-bottom: 4px solid var(--brand);
    box-shadow: 0 12px 26px rgba(13,17,20,.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

    .welcome-strip::after {
        content: '';
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
        right: 6%;
        top: -120px;
        box-shadow: 0 0 0 35px rgba(255,255,255,.025);
    }

    .welcome-strip h2 {
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-weight: 800;
        font-size: 1.35rem;
        margin: 0 0 5px;
    }

    .welcome-strip p {
        color: #d4d7d9;
        font-size: .73rem;
        margin: 0;
    }

.welcome-date {
    color: #ff3158;
    font-weight: 900;
    font-size: .68rem;
    letter-spacing: .06em;
    white-space: nowrap;
}

.data-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

    .data-table th {
        text-align: left;
        color: #69736f;
        background: #fafbf9;
        font-size: .61rem;
        letter-spacing: .09em;
        text-transform: uppercase;
        font-weight: 900;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
    }

    .data-table td {
        padding: 14px 16px;
        border-bottom: 1px solid #edf0ed;
        font-size: .75rem;
        vertical-align: middle;
    }

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

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

.table-primary {
    display: grid;
    gap: 3px;
}

    .table-primary a, .table-primary strong {
        color: var(--ink);
        text-decoration: none;
        font-weight: 800;
    }

        .table-primary a:hover {
            color: var(--brand);
        }

    .table-primary small, .muted {
        color: var(--ink-muted);
        font-size: .64rem;
    }

.amount {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.date-cell {
    white-space: nowrap;
    color: var(--ink-soft);
}

.avatar-name {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mini-avatar {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #52756c;
    font-size: .57rem;
    font-weight: 900;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 20px;
    font-size: .61rem;
    font-weight: 850;
    white-space: nowrap;
}

    .status::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

.status-success, .status-completed {
    color: #277253;
    background: #e8f5ee;
}

.status-warning, .status-awaitingapproval, .status-inprogress {
    color: #95601a;
    background: #fcf1de;
}

.status-info, .status-ready {
    color: #3c6f8e;
    background: #eaf3f8;
}

.status-muted, .status-pending, .status-skipped {
    color: #6f7b77;
    background: #eef1ef;
}

.status-danger, .status-returned, .status-onhold {
    color: #9a463e;
    background: #faeae7;
}

.stage-meter {
    min-width: 150px;
}

.stage-meter-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: .62rem;
}

    .stage-meter-label strong {
        font-weight: 800;
        color: var(--ink-soft);
    }

    .stage-meter-label span {
        color: var(--ink-muted);
    }

.meter {
    height: 4px;
    background: #e7ebe8;
    border-radius: 10px;
    overflow: hidden;
}

    .meter > span {
        display: block;
        height: 100%;
        background: var(--brand);
        border-radius: inherit;
    }

.workload-list {
    display: grid;
    gap: 15px;
}

.workload-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    gap: 10px;
    align-items: center;
}

.workload-number {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #edf3f0;
    color: var(--brand);
    font-size: .6rem;
    font-weight: 900;
}

.workload-copy {
    display: grid;
    gap: 5px;
}

    .workload-copy span {
        font-size: .68rem;
        font-weight: 700;
    }

    .workload-copy .meter > span {
        background: #79a99d;
    }

.workload-count {
    text-align: right;
    font-size: .7rem;
    font-weight: 850;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.quick-action {
    min-height: 76px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    transition: .16s ease;
}

    .quick-action:hover {
        border-color: #a8c7be;
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .quick-action span {
        color: var(--brand);
        font-weight: 900;
    }

    .quick-action strong {
        font-size: .68rem;
    }

.toolbar {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}

.search-box {
    height: 39px;
    min-width: 240px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 9px;
}

    .search-box > .app-icon {
        color: var(--ink-muted);
    }

    .search-box input {
        border: 0;
        outline: 0;
        width: 100%;
        color: var(--ink);
        font-size: .76rem;
        background: transparent;
    }

.filter-select, .form-control, .form-select {
    min-height: 41px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background-color: #fff;
    color: var(--ink);
    padding: 0 12px;
    font-size: .77rem;
    line-height: 1.35;
    outline: none;
    color-scheme: light;
}

    .filter-select:hover, .form-control:hover, .form-select:hover {
        border-color: #9ea5aa;
    }

    .filter-select:focus, .form-control:focus, .form-select:focus {
        border-color: #e10d35;
        box-shadow: 0 0 0 3px rgba(225,13,53,.09);
    }

    .filter-select option, .form-select option {
        color: #17191b;
        background-color: #fff;
        font-size: .82rem;
    }

    .filter-select:disabled, .form-control:disabled, .form-select:disabled {
        color: #596066;
        background-color: #eef0f2;
        border-color: #d5d9dc;
        opacity: 1;
        cursor: not-allowed;
    }

textarea.form-control {
    padding: 10px 11px;
    min-height: 92px;
    resize: vertical;
}

.result-count {
    padding: 11px 16px;
    color: var(--ink-muted);
    font-size: .65rem;
    border-bottom: 1px solid var(--line);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.form-field {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 7px;
}

    .form-field.full {
        grid-column: 1 / -1;
    }

    .form-field label {
        font-size: .7rem;
        font-weight: 800;
        color: var(--ink-soft);
    }

    .form-field .hint {
        color: var(--ink-muted);
        font-size: .64rem;
        line-height: 1.45;
    }

.form-section {
    padding: 21px 22px;
    border-bottom: 1px solid var(--line);
}

    .form-section:last-child {
        border-bottom: 0;
    }

.form-section-title {
    margin-bottom: 17px;
}

    .form-section-title h3 {
        margin: 0 0 5px;
        font-size: .8rem;
    }

    .form-section-title p {
        color: var(--ink-muted);
        margin: 0;
        font-size: .66rem;
    }

.form-footer {
    padding: 17px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    background: #fafbf9;
    border-radius: 0 0 14px 14px;
}

.validation-message, .text-danger {
    color: var(--danger);
    font-size: .64rem;
}

.invalid {
    border-color: var(--danger) !important;
}

.detail-hero {
    background: linear-gradient(100deg, #fff 72%, #f1f2f3);
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand);
    border-radius: 6px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

.detail-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.detail-id {
    color: var(--brand);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.detail-hero h1 {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 2rem;
    margin: 7px 0 4px;
    letter-spacing: -.01em;
}

.detail-sub {
    color: var(--ink-muted);
    font-size: .73rem;
}

.detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    padding-top: 21px;
    margin-top: 20px;
    border-top: 1px solid var(--line);
}

.fact {
    display: grid;
    gap: 4px;
}

    .fact small {
        color: var(--ink-muted);
        font-size: .58rem;
        text-transform: uppercase;
        letter-spacing: .07em;
        font-weight: 800;
    }

    .fact strong {
        font-size: .76rem;
    }

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(350px, .72fr);
    gap: 18px;
    align-items: start;
}

.workflow-list {
    padding: 6px 20px 14px;
}

.workflow-text-history {
    display: grid;
    gap: 4px;
    margin-top: 9px;
}

.workflow-text-line {
    min-width: 0;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
    column-gap: 7px;
    color: var(--ink);
    font-size: .61rem;
    line-height: 1.45;
}

.workflow-text-line > svg {
    color: var(--ink-muted);
    margin-top: 2px;
}

.workflow-text-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

.workflow-text-content a {
    color: var(--brand);
    font-weight: 800;
    text-decoration: none;
}

.workflow-text-content a:hover {
    text-decoration: underline;
}

.workflow-text-content small {
    margin-left: 7px;
    color: var(--ink-muted);
    font-size: .56rem;
}


.workflow-audit-link {
    display: flex;
    justify-content: flex-end;
    padding: 14px 0 2px;
}

.workflow-row {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 15px 0;
    border-bottom: 1px solid #edf0ed;
}

    .workflow-row:last-child {
        border-bottom: 0;
    }

.workflow-step {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #eef1ef;
    color: #77837f;
    font-size: .66rem;
    font-weight: 900;
}

.workflow-row.current .workflow-step {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 5px var(--brand-soft);
}

.workflow-row.complete .workflow-step {
    background: var(--brand);
    color: #fff;
}

.workflow-copy h4 {
    font-size: .74rem;
    margin: 2px 0 5px;
}

.workflow-copy p {
    color: var(--ink-muted);
    font-size: .63rem;
    margin: 0;
}

.approval-avatars {
    display: flex;
    margin-top: 8px;
}

.approval-avatar {
    width: 23px;
    height: 23px;
    border: 2px solid #fff;
    border-radius: 7px;
    margin-left: -4px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #6a8d83;
    font-size: .5rem;
    font-weight: 900;
}

    .approval-avatar:first-child {
        margin-left: 0;
    }

.action-panel {
    position: static;
}

.current-work {
    margin-bottom: 22px;
}

.current-work-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 32px;
    align-items: center;
    padding: 28px 32px;
    border-bottom: 1px solid var(--line);
}

.current-work-stage h2,
.current-work .stage-callout h2 {
    margin: 10px 0 8px;
    font-size: 1.5rem;
    line-height: 1.25;
}

.current-work-stage > p {
    margin: 0;
    color: var(--ink-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.current-work-stage .stage-callout-meta > span {
    color: var(--ink-muted);
}

.current-work-stage .stage-callout-meta > .page-kicker {
    color: var(--brand);
}

.current-work .stage-progress-block {
    max-width: 500px;
    padding: 20px 0 0;
}

.current-work .next-action-card {
    margin: 0;
    padding: 20px;
}

.current-work .next-action-card strong {
    font-size: .9rem;
}

.current-work .action-body {
    padding: 0 32px 20px;
}

.current-work .action-sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.current-work-secondary {
    display: grid;
    gap: 0;
    min-width: 0;
}

.current-work .action-section-body {
    padding: 0 0 24px;
}

.current-work-completed .action-body {
    display: grid;
    gap: 12px;
}

.order-workspace-header {
    padding: 22px 24px 0;
    margin-bottom: 20px;
}

.order-summary-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.order-summary-identity {
    min-width: 0;
}

.order-header-download-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.order-register-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    font-size: .7rem;
}

.order-summary-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0;
}

.order-summary-title h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.order-summary-facts,
.order-finance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    align-items: center;
    gap: 18px;
    padding: 22px 0;
}

.order-summary-facts .fact strong,
.order-finance-summary .fact strong {
    font-size: .95rem;
}

.order-finance-summary {
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
}

.order-credit-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    color: #236c4a;
    background: #eef8f2;
    font-size: .65rem;
}

.order-credit-indicator strong {
    display: block;
    margin-top: 3px;
    font-size: .85rem;
}

.order-secondary-details {
    border-top: 1px solid var(--line);
}

.order-secondary-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    list-style: none;
    cursor: pointer;
    font-size: .74rem;
    font-weight: 700;
}

.order-secondary-details > summary::-webkit-details-marker,
.order-download-menu > summary::-webkit-details-marker {
    display: none;
}

.order-secondary-details[open] > summary svg {
    transform: rotate(180deg);
}

.order-secondary-details .detail-facts {
    margin: 0;
    padding: 6px 0 20px;
    border: 0;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.order-summary-notes {
    grid-column: 1 / -1;
}

.order-download-menu {
    position: relative;
    flex-shrink: 0;
}

.order-download-menu > summary {
    list-style: none;
}

.order-download-options {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 20;
    display: grid;
    width: 230px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(13,17,20,.12);
}

.order-download-options a {
    padding: 12px;
    color: var(--ink);
    font-size: .76rem;
    border-radius: 4px;
}

.order-download-options a:hover,
.order-download-options a:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}

.order-workspace-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 20px;
    padding: 0 4px;
    border-bottom: 1px solid var(--line);
}

.order-workspace-tab {
    flex-shrink: 0;
    padding: 14px 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.order-workspace-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.order-workspace-tab:hover {
    color: var(--ink);
    background: #f4f5f6;
}

.order-workspace-tab:focus-visible,
.order-secondary-details > summary:focus-visible,
.order-download-menu > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.order-workspace-panel {
    min-width: 0;
    scroll-margin-top: 16px;
}

.credit-details-link {
    display: block;
    padding: 3px 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tab-attention {
    display: inline-flex;
    justify-content: center;
    min-width: 20px;
    margin-left: 8px;
    padding: 2px 5px;
    border-radius: 10px;
    background: #fff1d9;
    color: #835212;
    font-size: .65rem;
}

.access-explanation, .document-empty {
    margin: 12px 0;
    color: var(--ink-muted);
    font-size: .76rem;
    line-height: 1.55;
}

.conversation-access, .finance-stage-note { padding: 0 24px; }
.completed-record-links { display: flex; flex-wrap: wrap; gap: 10px; }
.work-finance-link { padding: 16px 0; }
.work-finance-link > strong { font-size: .85rem; }
.work-finance-link > p { font-size: .76rem; color: var(--ink-muted); }
.finance-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; padding: 24px; border-bottom: 1px solid var(--line); }
.finance-work-section { min-width: 0; display: grid; align-content: start; gap: 12px; }
.finance-work-section h3, .finance-history-head h3, .document-scope h3 { margin: 0; font-size: .9rem; }
.finance-work-section > .btn { justify-self: start; }
.finance-terms-summary { display: grid; gap: 5px; padding: 18px 24px; font-size: .76rem; border-bottom: 1px solid var(--line); }
.finance-terms-summary > span { color: var(--ink-muted); }
.finance-line-progress { display: flex; justify-content: space-between; font-size: .76rem; margin-top: 10px; }
.document-stage { border-top: 1px solid var(--line); }
.document-stage > summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 24px; cursor: pointer; list-style: none; }
.document-stage > summary::-webkit-details-marker { display: none; }
.document-stage > summary::after { content: "+"; color: var(--ink-muted); }
.document-stage[open] > summary::after { content: "-"; }
.document-stage > summary > span:first-child { flex: 1; min-width: 160px; }
.document-stage > summary strong { display: block; font-size: .85rem; }
.document-stage > summary small { display: block; margin-top: 5px; color: var(--ink-muted); font-size: .7rem; }

.activity-stage-empty {
    margin: 0;
    padding: 4px 24px 24px;
    color: var(--ink-muted);
    font-size: .85rem;
}
.document-scope { padding: 12px 24px 22px; }
.document-scope + .document-scope { border-top: 1px dashed var(--line); }
.document-scope-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.document-scope-heading > span { color: var(--ink-muted); font-size: .7rem; }
.document-register-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.document-register-row > div:first-child { min-width: 0; display: grid; gap: 5px; font-size: .8rem; overflow-wrap: anywhere; }
.document-register-row small, .document-register-row span { color: var(--ink-muted); font-size: .7rem; }
.document-register-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.document-register-upload { display: flex; align-items: start; flex-wrap: wrap; gap: 12px; padding-top: 14px; }
.document-register-upload > select { flex: 1; min-width: 150px; }
.document-requirement-status { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0 0; font-size: .72rem; }
.document-missing { color: #835212; font-size: .72rem; }
.document-received { color: #236c4a; }
.current-work .action-section { box-shadow: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.current-work .action-section[open] { box-shadow: none; }
.current-work .action-section > summary { background: transparent; grid-template-columns: minmax(0, 1fr) auto 12px; gap: 16px; padding: 22px 0; }
.current-work .action-section > summary::after { grid-column: 3; }
.current-work .action-section-number { display: none; }
.current-work .action-section summary strong { font-size: 1rem; }
.current-work .action-section summary small { font-size: .82rem; font-weight: 400; }
.current-work .action-section-state { font-size: .75rem; font-weight: 600; padding: 5px 10px; background: #fff5e7; color: #805615; }
.current-work .action-section-state.neutral { background: #f1f3f5; color: var(--ink-muted); }
.current-work .action-section-body { border-top: 0; }
.current-work .evidence-checklist { background: transparent; border: 0; padding: 0; margin: 0 0 18px; }
.current-work .evidence-checklist h4 { display: none; }
.current-work .evidence-item { font-size: .88rem; padding: 8px 0; }
.current-work .evidence-item strong { font-weight: 500; }
.current-work .requirement-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 16px 0; border-bottom: 1px solid #eef0f2; }
.current-work .requirement-row .evidence-item { padding: 0; align-items: center; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
.requirement-row .evidence-item > div { display: grid; gap: 6px; }
.current-work .requirement-row { padding: 16px 14px; border-left: 4px solid transparent; border-radius: 6px; margin: 4px 0; }
.current-work .requirement-row:has(> .evidence-item.done) { background: #f0faf5; border-left-color: var(--success); border-bottom-color: #d5eadd; }
.current-work .evidence-item .requirement-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.current-work .evidence-item.done .requirement-title { color: #176445; font-weight: 600; }
.current-work .evidence-item.done > span { width: 24px; height: 24px; background: var(--success); color: #fff; border-radius: 50%; flex-shrink: 0; font-size: .8rem; }
.current-work .evidence-item .requirement-complete-label { display: inline-flex; width: auto; height: auto; padding: 4px 8px; border-radius: 999px; background: #dcefe3; color: #176445; font-size: .65rem; font-weight: 700; line-height: 1; }
.requirement-row .evidence-item small { color: var(--ink-muted); font-size: .78rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.requirement-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }
.current-work .requirement-upload { border: 0; padding: 0; background: transparent; flex-direction: column; align-items: end; gap: 6px; margin: 0; }
.requirement-upload:focus-within .supplier-document-file-button { outline: 2px solid var(--brand); outline-offset: 2px; }
.current-work .requirement-upload .supplier-document-file-button { background: #f3f5f7; color: var(--ink); border: 1px solid #dce1e5; }
.current-work .requirement-upload small { max-width: 280px; text-align: right; }
.po-number-editor { grid-column: 1 / -1; display: flex; gap: 10px; max-width: 560px; margin-left: 26px; }
.po-number-editor > input { min-width: 0; flex: 1; }
.po-number-editor > button { flex-shrink: 0; }
.signoff-requirements { color: var(--ink-muted); font-size: .85rem; margin: 0 0 18px; }
.current-work .action-section-primary[open] > summary { background: transparent; }
.current-work .action-section-primary > .action-section-body { padding: 12px 0 24px; }
.order-payment-entry { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.order-payment-entry .form-field { margin: 0; }
.order-payment-entry small { color: var(--ink-muted); line-height: 1.5; }
.order-payment-entry .payment-proof-picker { margin: 0; min-height: 48px; }
.order-payment-entry .payment-proof-picker .supplier-document-file-button { min-height: 34px; font-size: .78rem; padding: 0 12px; }
.order-payment-entry .payment-proof-picker small { font-size: .78rem; overflow-wrap: anywhere; }
.payment-proof-picker:focus-within .supplier-document-file-button { outline: 2px solid var(--brand); outline-offset: 2px; }
.payment-proof-field, .payment-form-actions, .payment-form-error { grid-column: 1 / -1; }
.supplier-payment-checks { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin: 18px 0; }
.supplier-payment-check { display: grid; gap: 6px; border: 1px solid #e1e5e8; border-radius: 6px; padding: 14px; }
.supplier-payment-check.complete { background: #f0faf5; border-color: #d5eadd; }
.supplier-payment-check span, .supplier-payment-check small { color: var(--ink-muted); font-size: .78rem; }
.payment-supplier-name, .payment-proof-link { display: block; margin-top: 5px; }
.order-client-details .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.order-client-details .card-header h2 { font-size: 1rem; margin: 0 0 5px; }
.order-client-details .card-header p { margin: 0; font-size: .8rem; color: var(--ink-muted); }
.order-client-body { padding: 24px; }
.order-client-section + .order-client-section { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
.order-client-section h3 { font-size: .95rem; margin: 0 0 18px; }
.order-client-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.order-client-section-heading > span, .order-client-empty { font-size: .8rem; color: var(--ink-muted); }
.order-client-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; }
.order-client-details dt { font-size: .72rem; color: var(--ink-muted); font-weight: 500; margin-bottom: 6px; }
.order-client-details dd { font-size: .88rem; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.order-client-wide { grid-column: 1 / -1; }
.order-client-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.order-client-contact { min-width: 0; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 6px; padding: 18px; overflow-wrap: anywhere; }
.order-client-card-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 12px; }
.order-client-card-heading h4 { font-size: .9rem; margin: 0; }
.order-client-card-heading > div { display: flex; gap: 6px; }
.order-client-contact p { font-size: .8rem; color: var(--ink-muted); }
.order-client-contact dl { display: grid; gap: 14px; margin: 0; }
.order-client-contact > div:not(.order-client-card-heading) { font-size: .85rem; line-height: 1.6; }
.order-client-address-text { white-space: pre-line; overflow-wrap: anywhere; }
@media(max-width:650px) { .order-client-body { padding: 18px; } .order-client-facts, .order-client-cards { grid-template-columns: minmax(0,1fr); } }
@media(max-width:600px) { .order-payment-entry { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 650px) {
    .current-work .requirement-row { grid-template-columns: minmax(0, 1fr); }
    .requirement-actions { justify-content: start; margin-left: 26px; }
    .current-work .requirement-upload { align-items: start; }
    .current-work .requirement-upload small { text-align: left; }
    .po-number-editor { flex-wrap: wrap; }
    .po-number-editor > input { flex-basis: 100%; }
}
.current-work .work-requirement-action { font-size: .82rem; padding: 12px 18px; width: fit-content; max-width: 100%; box-shadow: none; }
.current-work .work-supporting-documents { padding-top: 0; border-top: 0; margin-top: 22px; }
.work-supporting-documents > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; font-size: .85rem; font-weight: 600; padding: 10px 0; }
.work-supporting-documents > summary::-webkit-details-marker { display: none; }
.work-supporting-documents > summary > span { color: var(--ink-muted); font-size: .78rem; font-weight: 400; }
.work-supporting-documents[open] > summary > svg { transform: rotate(180deg); }
.work-supporting-document-content { max-width: 720px; padding-top: 12px; }
.current-work .document-uploader h4, .current-work .form-field label { font-size: .85rem; }
.current-work .form-control, .current-work .form-select { font-size: .9rem; }
.current-work .supplier-document-file-button { font-size: .8rem; padding: 10px 14px; }
.current-work .supplier-document-file-picker small { font-size: .75rem; }
.current-work .return-control p, .current-work .return-control label { font-size: .85rem; }
.current-work .action-section-body > textarea { display: block; width: 100%; max-width: 720px; margin-bottom: 12px; font-size: .9rem; }
.current-work .action-section-body > .workflow-wide { width: fit-content; max-width: 100%; padding: 12px 18px; }
.current-work .next-action-card small { color: var(--ink-muted); font-size: .7rem; letter-spacing: .04em; }
.current-work .next-action-card p { font-size: .82rem; }
.current-work .stage-callout-meta > span { font-size: .75rem; }
.current-work .approval-progress { font-size: .82rem; }
.current-work .approval-progress strong { color: var(--ink-muted); }
.order-workspace-panel:focus { outline: none; }
.current-work .action-section-primary { border-color: var(--line); }
.current-work .action-section-state.ready { color: #236c4a; background: #e8f5ee; }
.current-work .action-section-body .payment-rule-summary { background: transparent; padding: 0; border: 0; }
.current-work .next-action-card { background: transparent; border: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
.current-work .next-action-icon { display: none; }
.current-work .other-actions { margin-top: 0; border-bottom: 0; }
.current-work .other-actions > summary strong { color: var(--ink-muted); font-size: .88rem; }
.current-work .other-actions .return-control { border: 0; padding: 0; background: transparent; }
.current-work-completed .stage-callout { background: #f6faf7; color: var(--ink); border-bottom: 1px solid var(--line); }
.current-work-completed .stage-callout small { color: #236c4a; }
.current-work-completed .stage-callout p { color: var(--ink-muted); }
.current-work-completed .meter > span { background: #236c4a; }

@media (max-width: 600px) {
    .finance-work-grid { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .document-register-row { align-items: start; flex-direction: column; }
    .document-stage > summary, .document-scope { padding-left: 18px; padding-right: 18px; }
    .document-register-upload { flex-direction: column; }
    .document-register-upload > select { width: 100%; flex: auto; }
}

@media (max-width: 600px) {
    .order-workspace-header {
        padding: 18px 18px 0;
    }

    .order-summary-heading {
        align-items: start;
        gap: 12px;
        flex-direction: column;
    }

    .order-header-download-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .order-summary-title h1 {
        font-size: 1.2rem;
    }

    .order-summary-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .order-workspace-tab {
        padding: 12px;
    }
}

@media (max-width: 900px) {
    .current-work-head,
    .current-work .action-sections {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .current-work-head,
    .current-work .action-body {
        padding: 18px;
    }

    .current-work .action-section-body {
        padding: 0 0 18px;
    }
    .current-work .action-section > summary { gap: 8px; }
    .current-work .action-section-state { font-size: .68rem; padding: 4px 6px; }
    .current-work .action-section summary strong { font-size: .9rem; }
}

.stage-callout {
    padding: 19px;
    background: linear-gradient(135deg, #202326, #111315);
    color: #fff;
    border-radius: 6px 6px 0 0;
    border-bottom: 4px solid var(--brand);
}

.stage-callout-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .stage-callout-meta > span {
        color: #bfc4c7;
        font-size: .65rem;
        font-weight: 800;
    }

.stage-callout small {
    color: #ff7890;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .56rem;
    font-weight: 900;
}

.stage-callout h3 {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.2rem;
    margin: 9px 0 5px;
}

.stage-callout p {
    color: #cfd2d4;
    font-size: .72rem;
    margin: 0;
    line-height: 1.55;
}

.action-body {
    padding: 17px;
}

.approval-progress {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: .68rem;
}

    .approval-progress strong {
        color: var(--brand);
    }

.stage-progress-block {
    padding: 1px 2px 14px;
}

.next-action-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 13px;
    margin-bottom: 13px;
    border: 1px solid #f0bdc7;
    border-left: 4px solid var(--brand);
    border-radius: 5px;
    background: var(--brand-soft);
}

.next-action-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: var(--brand);
    color: #fff;
}

.next-action-card > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.next-action-card small {
    color: var(--brand);
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.next-action-card strong {
    font-size: .78rem;
    line-height: 1.35;
}

.next-action-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .66rem;
    line-height: 1.45;
}

.action-sections {
    display: grid;
    gap: 8px;
}

.action-section {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
}

    .action-section[open] {
        border-color: var(--line-strong);
        box-shadow: 0 4px 12px rgba(13,17,20,.04);
    }

    .action-section > summary {
        min-height: 58px;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto 9px;
        align-items: center;
        gap: 10px;
        padding: 10px 11px;
        cursor: pointer;
        list-style: none;
        background: #fafbfb;
    }

        .action-section > summary::-webkit-details-marker {
            display: none;
        }

        .action-section > summary::after {
            content: '';
            grid-column: 4;
            width: 7px;
            height: 7px;
            margin-left: 2px;
            border-right: 2px solid #7b8287;
            border-bottom: 2px solid #7b8287;
            transform: rotate(45deg) translateY(-2px);
            transition: transform .16s ease;
        }

    .action-section[open] > summary::after {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    .action-section > summary > .action-section-state {
        margin-right: 2px;
    }

.action-section-number {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: #25282b;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

.action-section summary > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.action-section summary strong {
    font-size: .72rem;
}

.action-section summary small {
    color: var(--ink-muted);
    font-size: .6rem;
    line-height: 1.35;
}

.action-section-state {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border-radius: 12px;
    color: #9a463e;
    background: #faeae7;
    font-size: .55rem;
    font-weight: 850;
    white-space: nowrap;
}

    .action-section-state.ready {
        color: #277253;
        background: #e8f5ee;
    }

    .action-section-state.neutral {
        color: #6f777c;
        background: #eceff1;
    }

.action-section-primary[open] {
    border-color: #efb4bf;
}

    .action-section-primary[open] > summary {
        background: #fff7f8;
    }

.action-section-primary .action-section-number {
    background: var(--brand);
}

.action-section-secondary .action-section-number {
    color: var(--ink-soft);
    background: #e9edef;
}

.action-section-body {
    padding: 14px;
    border-top: 1px solid var(--line);
}

    .action-section-body > .evidence-checklist:first-child {
        margin-top: 0;
    }

    .action-section-body > :last-child {
        margin-bottom: 0;
    }

.action-help {
    margin: 0 0 10px;
    color: var(--ink-muted);
    font-size: .67rem;
    line-height: 1.5;
}

.action-field-gap {
    margin-top: 10px;
}

.inline-action-link {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -2px 0 12px;
    color: var(--brand);
    font-size: .67rem;
    font-weight: 800;
    text-decoration: none;
}

    .inline-action-link:hover {
        text-decoration: underline;
    }

.document-uploader {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.order-document-file-picker {
    margin-top: 9px;
}

.order-document-list {
    display: grid;
    gap: 7px;
    margin-top: 11px;
}

.order-document-row {
    align-items: stretch;
    flex-direction: column;
}

    .order-document-row .supplier-document-actions {
        justify-content: flex-end;
    }

.signoff-box {
    border: 1px solid var(--line);
    background: #fbfcfa;
    border-radius: 10px;
    padding: 13px;
    margin: 15px 0;
}

    .signoff-box h4 {
        font-size: .7rem;
        margin: 0 0 5px;
    }

    .signoff-box p {
        font-size: .61rem;
        color: var(--ink-muted);
        line-height: 1.5;
        margin-bottom: 10px;
    }

.upload-zone {
    border: 1px dashed #adc0ba;
    border-radius: 5px;
    padding: 12px;
    text-align: center;
    background: #fbfcfb;
    margin-top: 9px;
}

    .upload-zone label {
        cursor: pointer;
        color: var(--brand);
        font-size: .68rem;
        font-weight: 800;
    }

    .upload-zone input {
        width: 100%;
        font-size: .65rem;
    }

.document-list, .payment-list {
    display: grid;
    gap: 9px;
}

.document-row, .payment-row {
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.document-info, .payment-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

    .document-info strong, .payment-info strong {
        font-size: .66rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .document-info small, .payment-info small {
        font-size: .57rem;
        color: var(--ink-muted);
    }

.document-icon {
    width: 29px;
    height: 32px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #f3ebe2;
    color: #a15a41;
    font-size: .55rem;
    font-weight: 900;
}

.evidence-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

    .evidence-columns > section {
        min-width: 0;
    }

.evidence-column-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

    .evidence-column-head > span {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 6px;
        color: var(--brand);
        background: var(--brand-soft);
    }

    .evidence-column-head h3 {
        margin: 0;
        font-size: .76rem;
    }

    .evidence-column-head p {
        margin: 3px 0 0;
        color: var(--ink-muted);
        font-size: .62rem;
    }

.split-row {
    display: flex;
    gap: 9px;
    align-items: center;
}

.order-chat {
    margin-top: 0;
    overflow: visible;
}

.tab-unread {
    margin-left: 6px;
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.order-communications .message-thread {
    max-height: 560px;
    overflow-y: auto;
    padding: 12px clamp(16px, 3vw, 36px);
    scrollbar-width: thin;
}

.order-communications .order-message {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
    scroll-margin-top: 20px;
}

.order-communications .message-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 50%;
    font-size: .75rem;
}

.order-communications .is-own-message .message-avatar {
    color: var(--brand);
    background: #fff0f3;
}

.order-communications .message-meta strong {
    font-size: .875rem;
}

.order-communications .message-meta time {
    font-size: .75rem;
}

.order-communications .message-content p {
    font-size: .9375rem;
    line-height: 1.65;
}

.order-communications .message-mentions > span:first-child,
.order-communications .mention-tag {
    font-size: .75rem;
}

.order-communications .message-composer {
    border-top: 1px solid var(--line);
    border-bottom: 0;
    padding: 22px clamp(16px, 3vw, 36px);
    background: #fafafa;
}

.order-communications .message-composer-head small,
.order-communications .message-composer-actions small {
    font-size: .75rem;
}

.order-communications .mention-option strong {
    font-size: .875rem;
}

.order-communications .mention-option small,
.order-communications .selected-mentions button {
    font-size: .75rem;
}

.order-communications .message-thread:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.order-communications textarea.form-control {
    min-height: 100px;
    font-size: .9375rem;
    line-height: 1.6;
    resize: vertical;
    background: #fff;
}

.order-communications .message-empty {
    padding: 64px 12px;
    gap: 12px;
}

.order-communications .message-empty strong {
    font-size: 1rem;
}

.order-communications .message-empty span,
.order-communications .conversation-access {
    font-size: .875rem;
}

.order-communications .conversation-access {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    margin: 0;
}

@media (max-width: 600px) {
    .order-communications .message-meta {
        flex-direction: column;
        gap: 4px;
    }

    .order-communications .order-message {
        gap: 10px;
    }
}

.message-composer {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: #fafbfb;
}

.message-composer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .message-composer-head > div {
        display: grid;
        gap: 3px;
    }

    .message-composer-head strong {
        font-size: .72rem;
    }

    .message-composer-head small {
        color: var(--ink-muted);
        font-size: .61rem;
    }

.message-avatar, .mention-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: #202326;
    color: #fff;
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mention-composer {
    position: relative;
}

    .mention-composer textarea {
        width: 100%;
        min-height: 104px;
        line-height: 1.55;
    }

.mention-menu {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 8;
    width: min(390px, calc(100% - 20px));
    max-height: 260px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--brand);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(13,17,20,.2);
}

.mention-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

    .mention-option:hover {
        border-left-color: var(--brand);
        background: var(--brand-soft);
    }

    .mention-option > span:last-child {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .mention-option strong {
        font-size: .68rem;
    }

    .mention-option small {
        overflow: hidden;
        color: var(--ink-muted);
        font-size: .57rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.mention-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    background: #64706c;
}

.mention-empty {
    display: block;
    padding: 16px;
    color: var(--ink-muted);
    font-size: .64rem;
    text-align: center;
}

.selected-mentions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

    .selected-mentions > span {
        margin-right: 2px;
        color: var(--ink-muted);
        font-size: .58rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .selected-mentions button, .mention-tag {
        min-height: 25px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid #f0c2ca;
        border-radius: 14px;
        background: var(--brand-soft);
        color: var(--brand);
        font-size: .59rem;
        font-weight: 800;
    }

    .selected-mentions button {
        cursor: pointer;
    }

        .selected-mentions button:hover {
            border-color: var(--brand);
        }

        .selected-mentions button span {
            font-size: .8rem;
            line-height: 1;
        }

.message-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    margin-top: 11px;
}

    .message-composer-actions small {
        color: var(--ink-muted);
        font-size: .58rem;
        font-variant-numeric: tabular-nums;
    }

.message-thread {
    padding: 0 20px;
}

.order-message {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding: 17px 0;
    border-bottom: 1px solid #edf0ed;
    scroll-margin-top: 100px;
}

    .order-message:last-child {
        border-bottom: 0;
    }

.message-content {
    min-width: 0;
}

.message-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

    .message-meta strong {
        font-size: .7rem;
    }

    .message-meta time {
        color: var(--ink-muted);
        font-size: .57rem;
        white-space: nowrap;
    }

.message-content p {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: .7rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-mentions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

    .message-mentions > span:first-child {
        margin-right: 2px;
        color: var(--ink-muted);
        font-size: .55rem;
        font-weight: 800;
        text-transform: uppercase;
    }

.message-empty {
    padding: 36px 20px;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: var(--ink-muted);
    text-align: center;
}

    .message-empty .app-icon {
        color: var(--brand);
    }

    .message-empty strong {
        color: var(--ink);
        font-size: .72rem;
    }

    .message-empty span {
        font-size: .63rem;
    }

.message-highlight {
    animation: message-highlight 2.8s ease-out;
}

@keyframes message-highlight {
    0%, 25% {
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
        background: #fff0f3;
        box-shadow: inset 4px 0 var(--brand);
    }

    100% {
        background: transparent;
        box-shadow: none;
    }
}

.tabs {
    display: flex;
    gap: 3px;
    padding: 0 19px;
    border-bottom: 1px solid var(--line);
}

.tab {
    padding: 13px 4px 11px;
    margin-right: 18px;
    border-bottom: 2px solid transparent;
    color: var(--ink-muted);
    font-size: .67rem;
    font-weight: 800;
    cursor: default;
}

    .tab.active {
        color: var(--brand);
        border-color: var(--brand);
    }

.master-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.catalogue-brand-strip {
    min-height: 150px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 210px 210px;
    gap: 0;
    margin-bottom: 16px;
    overflow: hidden;
    background: #191c1e;
    color: #fff;
    border-radius: 6px;
    border-bottom: 4px solid var(--brand);
}

.catalogue-copy {
    padding: 24px;
    align-self: center;
}

    .catalogue-copy h2 {
        margin: 0 0 7px;
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-size: 1.35rem;
    }

    .catalogue-copy p {
        color: #c2c6c8;
        margin: 0;
        max-width: 580px;
        font-size: .72rem;
        line-height: 1.6;
    }

.catalogue-image {
    min-height: 150px;
    background-position: center;
    background-size: cover;
    filter: grayscale(.35);
    border-left: 1px solid rgba(255,255,255,.15);
}

    .catalogue-image.flow {
        background-image: linear-gradient(rgba(225,13,53,.16), rgba(0,0,0,.18)), url('/images/brand/flow-meters.jpg');
    }

    .catalogue-image.iolink {
        background-image: linear-gradient(rgba(225,13,53,.16), rgba(0,0,0,.18)), url('/images/brand/io-link.jpg');
    }

.entity-card {
    padding: 17px;
}

.entity-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.entity-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 11px;
    font-weight: 900;
}

.entity-card h3 {
    font-size: .78rem;
    margin: 13px 0 4px;
}

.entity-code {
    color: var(--ink-muted);
    font-size: .6rem;
}

.entity-details {
    display: grid;
    gap: 7px;
    padding-top: 13px;
    margin-top: 13px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .64rem;
}

.customer-record {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fafbf9;
}

    .customer-record > span {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .customer-record > small {
        color: var(--ink-muted);
        line-height: 1.45;
    }

    .customer-record .status {
        min-height: 20px;
        padding: 0 7px;
        font-size: .55rem;
    }

.customer-modal-tabs {
    display: flex;
    gap: 4px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
    background: #fafbf9;
}

.customer-modal-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 13px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: .67rem;
    font-weight: 850;
    cursor: pointer;
}

    .customer-modal-tab:hover {
        color: var(--ink);
    }

    .customer-modal-tab.active {
        color: var(--brand);
        border-bottom-color: var(--brand);
    }

    .customer-modal-tab span {
        min-width: 20px;
        height: 20px;
        display: inline-grid;
        place-items: center;
        padding: 0 6px;
        border-radius: 12px;
        background: var(--line);
        color: var(--ink-soft);
        font-size: .56rem;
    }

    .customer-modal-tab.active span {
        background: var(--brand-soft);
        color: var(--brand);
    }

.customer-tab-section {
    display: grid;
    gap: 17px;
    padding: 20px 22px 24px;
}

.customer-tab-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .customer-tab-heading h3 {
        margin: 0 0 4px;
        font-size: .82rem;
    }

    .customer-tab-heading p {
        margin: 0;
        color: var(--ink-muted);
        font-size: .65rem;
    }

.customer-inline-editor {
    display: grid;
    gap: 17px;
    padding: 18px;
    border: 1px solid #f0bbc4;
    border-left: 4px solid var(--brand);
    border-radius: 5px;
    background: #fff9fa;
}

    .customer-inline-editor .form-section-title {
        margin: 0;
    }

.customer-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 3px;
}

.customer-modal-list {
    display: grid;
    gap: 9px;
}

.customer-modal-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
}

.customer-modal-record-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .customer-modal-record-main .entity-avatar {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

    .customer-modal-record-main > div {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .customer-modal-record-main small {
        color: var(--ink-muted);
        font-size: .62rem;
        overflow-wrap: anywhere;
    }

.customer-record-title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

    .customer-record-title .status {
        min-height: 20px;
        padding: 0 7px;
        font-size: .55rem;
    }

.customer-modal-record-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.customer-remove-button {
    color: var(--danger);
}

    .customer-remove-button:hover {
        color: #fff;
        background: var(--danger);
    }

.customer-address-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 900;
}

.customer-tab-empty {
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 120px;
    padding: 22px;
    border: 1px dashed var(--line-strong);
    border-radius: 5px;
    color: var(--ink-muted);
    text-align: center;
}

    .customer-tab-empty strong {
        color: var(--ink);
        font-size: .72rem;
    }

.customer-tab-empty span {
        font-size: .63rem;
    }

.supplier-modal-tabs {
    display: flex;
    gap: 4px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
    background: #fafbf9;
}

.supplier-modal-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 13px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: .67rem;
    font-weight: 850;
    cursor: pointer;
}

    .supplier-modal-tab:hover {
        color: var(--ink);
    }

    .supplier-modal-tab.active {
        color: var(--brand);
        border-bottom-color: var(--brand);
    }

    .supplier-modal-tab span {
        min-width: 20px;
        height: 20px;
        display: inline-grid;
        place-items: center;
        padding: 0 6px;
        border-radius: 12px;
        background: var(--line);
        color: var(--ink-soft);
        font-size: .56rem;
    }

    .supplier-modal-tab.active span {
        background: var(--brand-soft);
        color: var(--brand);
    }

.supplier-products-section {
    display: grid;
    gap: 16px;
    padding: 20px 22px 24px;
}

.supplier-products-heading,
.supplier-product-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .supplier-products-heading h3 {
        margin: 0 0 4px;
        font-size: .82rem;
    }

    .supplier-products-heading p {
        margin: 0;
        color: var(--ink-muted);
        font-size: .65rem;
    }

.supplier-product-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #ead8a1;
    border-radius: 5px;
    background: #fffaf0;
    color: #765c15;
    font-size: .64rem;
}

.supplier-product-toolbar {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fafbf9;
}

    .supplier-product-toolbar .search-box {
        max-width: 440px;
    }

.supplier-product-list {
    display: grid;
    gap: 9px;
}

.supplier-product-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
}

.supplier-product-summary {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .supplier-product-summary > .entity-avatar {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }

.supplier-product-identity {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 6px;
}

    .supplier-product-identity > small {
        color: var(--ink-muted);
        font-size: .62rem;
    }

    .supplier-product-identity .meter {
        max-width: 520px;
    }

.supplier-product-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .72rem;
}

    .supplier-product-title .status {
        min-height: 20px;
        padding: 0 7px;
        font-size: .55rem;
    }

.supplier-product-prices {
    display: grid;
    grid-template-columns: repeat(4, minmax(76px, 1fr));
    gap: 12px;
}

.supplier-product-prices.supplier-service-prices {
    grid-template-columns: repeat(2, minmax(120px, 180px));
    justify-content: start;
}

    .supplier-product-prices > span {
        display: grid;
        gap: 2px;
    }

    .supplier-product-prices small {
        color: var(--ink-muted);
        font-size: .56rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .supplier-product-prices strong {
        font-size: .66rem;
    }

.supplier-product-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.supplier-remove-button {
    color: var(--danger);
}

    .supplier-remove-button:hover {
        color: #fff;
        background: var(--danger);
    }

.supplier-remove-confirm {
    color: var(--danger);
    font-size: .61rem;
    font-weight: 750;
}

.entity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.stock-value {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
}

.stock-low {
    color: var(--danger);
}

.timeline {
    padding: 4px 20px 16px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0ed;
}

    .timeline-item:last-child {
        border: 0;
    }

.timeline-mark {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 900;
}

.timeline-copy h4 {
    margin: 1px 0 4px;
    font-size: .7rem;
}

.timeline-actor {
    display: block;
    margin: -1px 0 5px;
    color: var(--ink-muted);
    font-size: .58rem;
}

    .timeline-actor strong {
        color: var(--ink-soft);
    }

.timeline-copy p {
    margin: 0;
    color: var(--ink-muted);
    font-size: .63rem;
    line-height: 1.45;
}

.timeline-time {
    color: var(--ink-muted);
    font-size: .58rem;
    white-space: nowrap;
}

.notice {
    padding: 11px 13px;
    border-radius: 9px;
    margin-bottom: 14px;
    font-size: .68rem;
    line-height: 1.5;
}

.notice-success {
    color: #205f45;
    background: #e7f4ed;
    border: 1px solid #c4e4d3;
}

.notice-error {
    color: #8b3f37;
    background: #fbedeb;
    border: 1px solid #efcbc6;
}

.form-select-sm,
.form-control-sm {
    min-width: 130px;
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
}

.check-field {
    display: flex;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: start;
}

    .check-field input {
        width: 16px;
        height: 16px;
        accent-color: var(--brand);
    }

.role-management-grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.role-picker-panel {
    position: sticky;
    top: 94px;
    overflow: hidden;
}

.role-picker-list {
    display: grid;
    padding: 8px;
}

.role-picker-item {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

    .role-picker-item:hover {
        background: #f5f6f7;
    }

    .role-picker-item.selected {
        background: var(--brand-soft);
        border-left-color: var(--brand);
    }

.role-picker-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: #222528;
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
}

.role-picker-item.selected .role-picker-icon {
    background: var(--brand);
}

.role-picker-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

    .role-picker-copy strong {
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-size: .73rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .role-picker-copy small {
        color: var(--ink-muted);
        font-size: .59rem;
    }

.role-picker-arrow {
    color: var(--ink-muted);
    font-size: 1.2rem;
}

.role-editor-panel {
    overflow: hidden;
}

.role-editor-hero {
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    color: #fff;
    background: linear-gradient(120deg, #202326, #111315);
    border-bottom: 4px solid var(--brand);
}

    .role-editor-hero h2 {
        margin: 0;
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-size: 1.55rem;
    }

    .role-editor-hero p {
        margin: 6px 0 0;
        max-width: 650px;
        color: #c8ccce;
        font-size: .68rem;
        line-height: 1.55;
    }

.role-editor-stats {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .role-editor-stats span {
        min-width: 74px;
        padding: 8px 10px;
        display: grid;
        gap: 2px;
        text-align: center;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 4px;
        color: #aeb3b6;
        font-size: .55rem;
        text-transform: uppercase;
    }

    .role-editor-stats strong {
        color: #fff;
        font-size: .9rem;
    }

.access-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    background: #f7f8f8;
    color: var(--ink-muted);
    font-size: .6rem;
}

    .access-legend > strong {
        color: var(--ink);
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .access-legend span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .access-legend i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .access-legend .role-save-note {
        margin-left: auto;
        color: #277253;
        font-weight: 750;
    }

    .access-legend .access-none {
        background: #c8cdd0;
    }

    .access-legend .access-view {
        background: #5d87a2;
    }

    .access-legend .access-edit {
        background: #e10d35;
    }

    .access-legend .access-approve {
        background: #d99127;
    }

    .access-legend .access-admin {
        background: #202326;
    }

.module-selector {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.module-selector-item {
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--ink-soft);
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
}

    .module-selector-item:hover {
        border-color: #9ea5aa;
        background: #f8f9f9;
    }

    .module-selector-item.selected {
        color: var(--brand);
        border-color: rgba(225,13,53,.42);
        background: var(--brand-soft);
        box-shadow: inset 0 -2px var(--brand);
    }

    .module-selector-item > span {
        grid-row: 1 / span 2;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 4px;
        background: #eef0f2;
        color: var(--ink-soft);
    }

    .module-selector-item.selected > span {
        color: #fff;
        background: var(--brand);
    }

    .module-selector-item strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-size: .68rem;
    }

    .module-selector-item small {
        color: var(--ink-muted);
        font-size: .58rem;
    }

.permission-modules {
    display: grid;
    gap: 12px;
    padding: 16px;
    background: #f4f5f6;
}

.permission-module {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
}

.permission-module-head {
    min-height: 66px;
    padding: 11px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

    .permission-module-head > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.permission-module-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: #202326;
    color: #fff;
    font-weight: 900;
}

.permission-module-head > div > span:last-child {
    display: grid;
    gap: 3px;
}

.permission-module-head strong {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: .78rem;
}

.permission-module-head small {
    color: var(--ink-muted);
    font-size: .57rem;
}

.permission-module-head label {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .permission-module-head label > span {
        color: var(--ink-muted);
        font-size: .58rem;
        font-weight: 700;
        text-transform: uppercase;
    }

.permission-rule-list {
    display: grid;
}

.permission-rule-row {
    min-height: 54px;
    padding: 9px 14px 9px 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #edf0f1;
}

    .permission-rule-row:last-child {
        border-bottom: 0;
    }

    .permission-rule-row > div {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .permission-rule-row strong {
        font-size: .72rem;
    }

    .permission-rule-row small {
        color: var(--ink-muted);
        font-size: .62rem;
        line-height: 1.4;
    }

.access-select {
    width: 150px;
    min-width: 0;
    justify-self: end;
    border-left-width: 4px;
    background-color: #fff;
    color: var(--ink);
    font-weight: 750;
}

    .access-select.access-none {
        border-left-color: #c8cdd0;
    }

    .access-select.access-view {
        border-left-color: #5d87a2;
    }

    .access-select.access-edit {
        border-left-color: #e10d35;
    }

    .access-select.access-approve {
        border-left-color: #d99127;
    }

    .access-select.access-administer {
        border-left-color: #202326;
    }

.line-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.quote-lines {
    display: grid;
    gap: 12px;
}

.quote-line {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(220px, 1.8fr) minmax(80px, .45fr) minmax(120px, .72fr) minmax(130px, .8fr) minmax(140px, .85fr) minmax(130px, .75fr) minmax(120px, .7fr);
    align-items: start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 3px solid #adb2b6;
    border-radius: 4px;
    background: #fafbfb;
}

    .quote-line > * {
        min-width: 0;
    }

.quote-line-number {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: #202326;
    color: #fff;
    border-radius: 3px;
    font-weight: 900;
    font-size: .68rem;
    margin-top: 22px;
}

.quote-line-total {
    display: grid;
    gap: 5px;
    margin-top: 21px;
    text-align: right;
}

    .quote-line-total small {
        color: var(--ink-muted);
        font-size: .58rem;
        text-transform: uppercase;
        font-weight: 800;
    }

    .quote-line-total strong {
        font-size: .8rem;
    }

.quote-sub-lines {
    grid-column: 2 / -1;
    display: grid;
    gap: 8px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
}

.quote-sub-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .quote-sub-lines-head > span {
        display: grid;
        gap: 2px;
    }

    .quote-sub-lines-head strong {
        font-size: .66rem;
    }

    .quote-sub-lines-head small {
        color: var(--ink-muted);
        font-size: .59rem;
    }

.quote-sub-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 7px;
}

.line-text-remove {
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}

    .line-text-remove:hover {
        color: var(--danger);
    }

.line-remove {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #202326;
    color: #fff;
    cursor: pointer;
}

    .line-remove:hover {
        background: var(--brand);
    }

.order-line-view-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: #fafbf9;
}

    .order-line-view-bar > span {
        color: var(--ink-muted);
        font-size: .62rem;
    }

.order-line-view-tabs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.order-line-view-tab {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: .64rem;
    font-weight: 850;
    cursor: pointer;
}

    .order-line-view-tab:hover {
        color: var(--brand);
        background: var(--brand-soft);
    }

    .order-line-view-tab.active {
        border-color: var(--brand);
        background: var(--brand);
        color: #fff;
        box-shadow: 0 3px 9px rgba(224,13,52,.2);
    }

.order-line-list {
    container-type: inline-size;
    display: grid;
    gap: 22px;
    padding: 14px;
    background: #e9ecf0;
}

.order-line-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #bac2cc;
    border-left: 4px solid var(--brand);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(13,17,20,.09);
}

.order-line-card-head {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 0;
    border-bottom: 2px solid var(--brand);
    border-radius: 4px 5px 0 0;
    background: #252a30;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .order-line-card-head:hover {
        background: #303740;
    }

.order-line-card-head .order-line-identity > strong,
.order-line-card-head .order-line-price strong {
    color: #fff;
}

.order-line-card-head .order-line-identity > span,
.order-line-card-head .order-line-identity > small,
.order-line-card-head .order-line-price small {
    color: #d9dee5;
}

.order-line-card-head .product-picker-trigger {
    color: var(--ink);
    background-color: #fff;
}

.order-line-card-head .product-picker-trigger.placeholder {
    color: #59616a;
}

    .order-line-card-head:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: -3px;
    }

.order-line-card.is-collapsed .order-line-card-head {
    border-bottom: 0;
    border-radius: 4px 5px 5px 4px;
}

.order-line-card-chevron {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    margin-top: 2px;
    border: 1px solid #f2a8b5;
    border-radius: 50%;
    color: var(--brand);
    background: #fff;
    transform: rotate(90deg);
    transition: transform .18s ease, color .18s ease, border-color .18s ease;
}

.order-line-card.is-collapsed .order-line-card-chevron {
    transform: rotate(0);
    color: var(--ink-muted);
    border-color: var(--line);
}

.order-line-identity {
    min-width: 0;
    display: grid;
    gap: 3px;
}

    .order-line-identity > span, .order-line-price small, .order-line-field > label, .order-line-workflow-item > div > small {
        color: var(--ink-muted);
        font-size: .58rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .order-line-identity strong {
        color: var(--ink);
        font-size: .88rem;
        line-height: 1.35;
    }

    .order-line-identity small {
        color: var(--ink-muted);
        font-size: .65rem;
    }

.order-line-price {
    margin-left: auto;
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: right;
}

    .order-line-price strong {
        font-size: .9rem;
    }

.order-line-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #d0d6dd;
    gap: 1px;
    border-bottom: 1px solid #c3cbd4;
}

.order-line-field {
    min-width: 0;
    min-height: 78px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 7px;
    padding: 12px 15px;
    background: #fff;
}

    .order-line-field .form-select {
        width: 100%;
        min-width: 0;
    }

.order-line-value {
    min-width: 0;
    max-width: 100%;
    font-size: .75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.order-line-total-field {
    background: #fce8ed;
}

    .order-line-total-field > small {
        color: var(--ink-muted);
        font-size: .58rem;
    }

.supplier-cost-total-field {
    border-left: 3px solid var(--brand);
}

.order-line-cost-source {
    color: var(--ink-muted);
    font-size: .58rem;
    line-height: 1.35;
}

.order-line-currency {
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand);
    letter-spacing: .05em;
}

.supplier-po-line-panel {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
    border-bottom: 1px solid var(--line);
    background: #fffdfd;
}

.supplier-po-line-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

    .supplier-po-line-head h4 {
        margin: 3px 0 4px;
        font-size: .8rem;
    }

    .supplier-po-line-head p {
        margin: 0;
        color: var(--ink-muted);
        font-size: .62rem;
    }

.supplier-po-line-grid,
.supplier-po-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.supplier-po-line-actions {
    display: flex;
    justify-content: flex-end;
}

.supplier-po-upload {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr);
    align-items: center;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fafbf9;
}

    .supplier-po-upload > div:first-child {
        display: grid;
        gap: 4px;
    }

    .supplier-po-upload strong {
        font-size: .7rem;
    }

    .supplier-po-upload span {
        color: var(--ink-muted);
        font-size: .61rem;
        line-height: 1.4;
    }

.supplier-document-upload-controls {
    display: grid;
    grid-template-columns: minmax(150px, .75fr) minmax(210px, 1.25fr);
    align-items: stretch;
    gap: 9px;
}

.supplier-document-file-picker {
    position: relative;
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px 6px 6px;
    border: 1px dashed #adc0ba;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

    .supplier-document-file-picker:hover {
        border-color: var(--brand);
        background: var(--brand-soft);
    }

    .supplier-document-file-picker.is-disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.supplier-document-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.supplier-document-file-button {
    flex: 0 0 auto;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 4px;
    background: var(--brand);
    color: #fff;
    font-size: .62rem;
    font-weight: 850;
}

.supplier-document-file-picker small {
    min-width: 0;
    color: var(--ink-muted);
    font-size: .56rem;
    line-height: 1.35;
}

.supplier-documents-complete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #b9d9c8;
    border-radius: 5px;
    background: #f1faf5;
    color: #236544;
    font-size: .63rem;
    font-weight: 750;
}

.supplier-po-readonly-grid > span {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
}

    .supplier-po-readonly-grid small {
        color: var(--ink-muted);
        font-size: .56rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .supplier-po-readonly-grid strong {
        font-size: .7rem;
        overflow-wrap: anywhere;
    }

.supplier-po-documents {
    display: grid;
    gap: 7px;
}

.supplier-document-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .supplier-document-row > a {
        min-width: 0;
        flex: 1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 5px;
        background: #fff;
        color: var(--ink);
        text-decoration: none;
    }

        .supplier-document-row > a:hover {
            border-color: #f2a8b5;
            color: var(--brand);
        }

    .supplier-document-row a > span {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .supplier-document-row strong {
        font-size: .66rem;
        overflow-wrap: anywhere;
    }

    .supplier-document-row small,
    .supplier-po-document-empty {
        color: var(--ink-muted);
        font-size: .58rem;
    }

.supplier-document-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.supplier-document-remove {
    color: var(--danger);
}

.supplier-po-document-empty {
    padding: 10px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 5px;
    background: rgba(255,255,255,.65);
}

.order-line-workflow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
}

.order-line-workflow-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    background: #fafbfa;
}

    .order-line-workflow-item > div:first-child {
        min-width: 0;
        display: grid;
        gap: 4px;
    }

        .order-line-workflow-item > div:first-child > strong {
            font-size: .7rem;
        }

.order-line-approval {
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: right;
}

    .order-line-approval > small {
        color: var(--ink-muted);
        font-size: .58rem;
        white-space: nowrap;
    }

.order-line-sub-lines {
    padding: 0 16px 16px;
    border-top: 1px solid #c3cbd4;
    background: #eef1f4;
}

.quote-capture-card {
    position: relative;
    overflow: visible;
}

    .quote-capture-card:focus-within {
        z-index: 5;
    }

.quote-capture-product {
    position: relative;
    width: min(680px, 72%);
}

.line-item-type-toggle {
    width: fit-content;
    display: inline-flex;
    gap: 2px;
    margin: 2px 0 6px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #f3f4f4;
}

    .line-item-type-toggle button {
        min-width: 76px;
        padding: 6px 11px;
        border: 0;
        border-radius: 3px;
        background: transparent;
        color: var(--ink-muted);
        font: inherit;
        font-size: .61rem;
        font-weight: 850;
        cursor: pointer;
    }

        .line-item-type-toggle button.active {
            color: #fff;
            background: var(--ink);
            box-shadow: 0 1px 3px rgba(13,17,20,.16);
        }

.required-marker { color: var(--brand); }
.representative-field { position: relative; }

.representative-house {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fafbf9;
}

    .representative-house small { color: var(--ink-muted); font-size: .62rem; }

.representative-picker { position: relative; }

.representative-picker-trigger {
    width: 100%;
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 6px 38px 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

    .representative-picker-trigger::after {
        content: '';
        position: absolute;
        right: 15px;
        top: 17px;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--ink-muted);
        border-bottom: 2px solid var(--ink-muted);
        transform: rotate(45deg);
    }

    .representative-picker-trigger:focus {
        outline: 2px solid rgba(225,13,53,.16);
        border-color: var(--brand);
    }

.representative-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }

.representative-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .61rem;
    font-weight: 850;
}

    .representative-chip > span { font-size: .78rem; line-height: 1; }

.representative-placeholder { padding: 5px 3px; color: var(--ink-muted); font-size: .68rem; }

.representative-picker-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.representative-picker-options {
    max-height: 250px;
    overflow-y: auto;
    display: grid;
    gap: 3px;
    margin-top: 7px;
}

.representative-picker-option {
    width: 100%;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 8px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

    .representative-picker-option:hover,
    .representative-picker-option.selected { background: var(--brand-soft); }

    .representative-picker-option > span:last-child { display: grid; gap: 2px; }
    .representative-picker-option strong { font-size: .68rem; }
    .representative-picker-option small { color: var(--ink-muted); font-size: .58rem; }

.representative-check {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: #fff;
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

    .representative-picker-option.selected .representative-check { border-color: var(--brand); background: var(--brand); }

    .quote-capture-product .product-picker-trigger {
        min-height: 38px;
        font-weight: 800;
    }

.quote-capture-head-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.quote-capture-remove {
    position: static;
    flex: 0 0 24px;
}

.quote-capture-fields .form-control,
.quote-capture-fields .form-select {
    width: 100%;
    min-width: 0;
}

.quote-capture-sub-lines {
    display: grid;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 0;
}

.order-subline-panel {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 13px 14px 15px 34px;
    border-left: 3px solid var(--line-strong);
}

    .order-subline-panel::before {
        content: '';
        position: absolute;
        left: 0;
        top: 28px;
        width: 21px;
        border-top: 2px solid var(--line-strong);
    }

.order-subline-list {
    display: grid;
    gap: 8px;
}

.order-subline-item {
    min-height: 52px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(13,17,20,.04);
}

.order-subline-item.is-editing {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    border-color: #f2a8b5;
    background: #fff9fa;
}

.order-subline-index {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: .7rem;
    font-weight: 900;
}

.order-subline-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

    .order-subline-copy small {
        color: var(--ink-muted);
        font-size: .58rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .order-subline-copy strong {
        color: var(--ink);
        font-size: .78rem;
        font-weight: 750;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

.order-subline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

    .order-subline-actions > span {
        color: var(--danger);
        font-size: .6rem;
        font-weight: 800;
        white-space: nowrap;
    }

.order-subline-remove {
    color: var(--danger);
}

    .order-subline-remove:hover {
        color: #fff;
        background: var(--danger);
    }

.order-subline-editor {
    min-width: 0;
    display: grid;
    gap: 8px;
}

    .order-subline-editor .form-control {
        min-height: 40px;
        font-size: .75rem;
    }

.order-subline-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.order-subline-empty {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px dashed var(--line-strong);
    border-radius: 5px;
    color: var(--ink-muted);
    background: rgba(255,255,255,.65);
    font-size: .7rem;
}

.order-subline-entry {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
}

    .order-subline-entry .form-control, .order-subline-entry .btn {
        min-height: 44px;
    }

    .order-subline-entry .form-control {
        font-size: .75rem;
    }

.order-add-line-panel {
    container-type: inline-size;
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
}

.order-add-line-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 18px;
    text-align: left;
    cursor: pointer;
}

.order-add-line-trigger > span:last-child {
    display: grid;
    gap: 5px;
}

.order-add-line-trigger strong {
    color: var(--ink);
    font-size: .875rem;
}

.order-add-line-trigger small {
    color: var(--ink-muted);
    font-size: .75rem;
}

.order-add-line-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--brand);
    background: var(--brand-soft);
}

.order-add-line-trigger:hover {
    border-color: var(--brand);
    background: #fffafb;
}

.order-add-line-trigger:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.order-add-line-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

    .order-add-line-head > div {
        display: grid;
        gap: 3px;
    }

    .order-add-line-head strong {
        font-size: .75rem;
    }

    .order-add-line-head small {
        color: var(--ink-muted);
        font-size: .64rem;
    }

.order-add-line-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    align-items: start;
}

.order-add-line-product {
    grid-column: 1 / -1;
}

.order-add-line-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.order-add-line-card .order-line-card-head {
    cursor: default;
}

.order-add-line-card .order-line-card-head:hover {
    background: #252a30;
}

.order-add-line-card .order-add-line-actions {
    margin: 0;
    padding: 14px 18px;
    background: #fafafa;
    border-radius: 0 0 6px 6px;
}

.order-add-line-card .product-picker-menu {
    position: static;
    min-width: 0;
    margin-top: 4px;
}

@container (max-width: 620px) {
    .order-line-fields, .order-line-workflow {
        grid-template-columns: 1fr;
    }

    .order-line-card-head, .order-line-workflow-item {
        align-items: stretch;
        flex-direction: column;
    }

    .order-line-price, .order-line-approval {
        justify-items: start;
        text-align: left;
    }

    .quote-capture-product,
    .quote-capture-head-actions {
        width: 100%;
    }

    .quote-capture-head-actions {
        justify-content: space-between;
    }

    .order-line-workflow-item .btn {
        width: 100%;
    }

    .order-line-approval > small {
        white-space: normal;
    }

    .order-subline-entry {
        grid-template-columns: 1fr;
    }

    .order-subline-item:not(.is-editing) {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .order-subline-actions {
        grid-column: 2;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .order-subline-editor-actions {
        flex-wrap: wrap;
    }

    .supplier-po-line-head {
        align-items: stretch;
        flex-direction: column;
    }

    .supplier-po-line-head .status {
        align-self: flex-start;
    }

    .supplier-po-line-grid,
    .supplier-po-readonly-grid,
    .supplier-po-upload {
        grid-template-columns: 1fr;
    }

    .supplier-document-upload-controls {
        grid-template-columns: 1fr;
    }

    .supplier-document-row {
        align-items: stretch;
        flex-direction: column;
    }

    .supplier-document-actions {
        justify-content: flex-end;
    }

    .supplier-po-line-actions .btn {
        width: 100%;
    }
}

.quote-product {
    position: relative;
    min-width: 0;
}

.product-picker-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 12px;
    background-image: none !important;
    appearance: none;
    text-align: left;
    cursor: pointer;
}

    .product-picker-trigger::after {
        content: '';
        width: 8px;
        height: 8px;
        flex: 0 0 8px;
        border-right: 2px solid #6c7277;
        border-bottom: 2px solid #6c7277;
        transform: translateY(-2px) rotate(45deg);
    }

    .product-picker-trigger > span {
        width: 0;
        min-width: 0;
        flex: 1 1 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-picker-trigger.placeholder {
        color: var(--ink-muted);
    }

.product-picker-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    min-width: 330px;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.product-picker-search {
    height: 37px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-muted);
}

    .product-picker-search input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        color: var(--ink);
        background: transparent;
        font-size: .72rem;
    }

.product-picker-options {
    max-height: min(300px, 45vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    display: grid;
    gap: 3px;
    margin-top: 7px;
    padding-right: 2px;
}

.product-picker-option {
    width: 100%;
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

    .product-picker-option:hover, .product-picker-option.selected {
        border-left-color: var(--brand);
        background: var(--brand-soft);
    }

    .product-picker-option strong {
        font-size: .68rem;
    }

    .product-picker-option small {
        color: var(--ink-muted);
        font-size: .59rem;
    }

.product-picker-empty {
    padding: 13px 10px;
    color: var(--ink-muted);
    font-size: .66rem;
}

.quote-summary {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 2px solid #202326;
    color: var(--ink-muted);
    font-size: .7rem;
}

    .quote-summary span {
        display: grid;
        gap: 4px;
    }

    .quote-summary strong {
        color: var(--ink);
        font-size: .82rem;
    }

    .quote-summary .quote-total strong {
        color: var(--brand);
        font-size: 1rem;
    }

.evidence-checklist {
    display: grid;
    gap: 7px;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--line);
    background: #f7f8f8;
    border-radius: 4px;
}

    .evidence-checklist h4 {
        font-size: .68rem;
        margin: 0 0 3px;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

.evidence-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 6px;
    font-size: .63rem;
}

    .evidence-item span {
        width: 18px;
        height: 18px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: .55rem;
        font-weight: 900;
    }

    .evidence-item.done span {
        background: #e8f5ee;
        color: #277253;
    }

    .evidence-item.missing span {
        background: var(--brand-soft);
        color: var(--brand);
    }

.workflow-control {
    display: grid;
    gap: 9px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.payment-terms-control {
    display: grid;
    gap: 9px;
    margin: 15px 0;
    padding: 13px;
    border: 1px solid #efd4a9;
    border-radius: 5px;
    background: #fffaf2;
}

    .payment-terms-control h4 {
        margin: 0;
        font-size: .7rem;
    }

    .payment-terms-control > p {
        margin: 0;
        color: var(--ink-muted);
        font-size: .61rem;
        line-height: 1.5;
    }

.payment-custom-fields {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(260px, 1fr);
    gap: 10px;
}

.payment-rule-summary {
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 4px;
    background: #fff;
    font-size: .62rem;
}

    .payment-rule-summary span {
        color: var(--ink-muted);
    }

@media (max-width: 720px) {
    .payment-custom-fields {
        grid-template-columns: 1fr;
    }
}

.payment-terms-control .approval-progress {
    margin: 3px 0 0;
}

.workflow-wide {
    width: 100%;
    margin-top: 9px;
}

.recorded-signoff {
    display: grid;
    gap: 2px;
    padding-top: 9px;
    margin-top: 9px;
    border-top: 1px solid var(--line);
    font-size: .6rem;
}

    .recorded-signoff span {
        color: var(--ink-muted);
    }

    .recorded-signoff p {
        margin: 3px 0 0;
        color: var(--ink-soft);
        font-style: italic;
    }

.return-control {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

    .return-control > label {
        display: block;
        margin-bottom: 8px;
        color: var(--danger);
        font-size: .65rem;
        font-weight: 800;
    }

    .return-control > p {
        margin: 0 0 10px;
        color: var(--ink-muted);
        font-size: .63rem;
        line-height: 1.5;
    }

    .return-control .form-field {
        margin-bottom: 10px;
    }

    .return-control summary {
        cursor: pointer;
        color: var(--danger);
        font-size: .63rem;
        font-weight: 800;
        margin-bottom: 9px;
    }

.stage-meta {
    color: #277253 !important;
    margin-top: 6px !important;
}

.stage-return {
    color: var(--danger) !important;
    margin-top: 6px !important;
}

.empty-state {
    text-align: center;
    padding: 52px 20px;
    color: var(--ink-muted);
}

.empty-state-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--brand);
    background: var(--brand-soft);
}

.empty-state .btn {
    margin-top: 16px;
}

.access-denied {
    max-width: 680px;
    margin: 70px auto;
    padding: 36px;
    border-top: 4px solid var(--brand);
}

    .access-denied h1 {
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-size: 1.8rem;
    }

    .access-denied p {
        color: var(--ink-muted);
        line-height: 1.7;
    }

.toast-region {
    position: fixed;
    z-index: 1200;
    top: 92px;
    right: 22px;
    width: min(390px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.app-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    gap: 11px;
    align-items: start;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--info);
    border-radius: 5px;
    box-shadow: 0 15px 40px rgba(13,17,20,.2);
    animation: toast-in .2s ease-out;
}

    .app-toast .toast-symbol {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #edf3f7;
        color: var(--info);
        font-weight: 900;
    }

    .app-toast strong {
        display: block;
        font-size: .75rem;
        margin: 1px 0 4px;
    }

    .app-toast p {
        margin: 0;
        color: var(--ink-muted);
        font-size: .66rem;
        line-height: 1.45;
    }

    .app-toast button {
        border: 0;
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
    }

    .app-toast.toast-success {
        border-left-color: var(--success);
    }

        .app-toast.toast-success .toast-symbol {
            background: #e8f5ee;
            color: var(--success);
        }

    .app-toast.toast-error {
        border-left-color: var(--brand);
    }

        .app-toast.toast-error .toast-symbol {
            background: var(--brand-soft);
            color: var(--brand);
        }

    .app-toast.toast-warning {
        border-left-color: var(--warning);
    }

        .app-toast.toast-warning .toast-symbol {
            background: #fcf1de;
            color: var(--warning);
        }

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px) translateX(10px);
    }
}

body:has(.app-modal-backdrop) {
    overflow: hidden;
}

.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10,12,14,.72);
    backdrop-filter: blur(3px);
    animation: modal-fade .16s ease-out;
}

.app-modal {
    width: min(100%, 720px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    border-top: 5px solid var(--brand);
    box-shadow: 0 28px 80px rgba(0,0,0,.35);
    animation: modal-rise .18s ease-out;
}

    .app-modal.modal-small {
        width: min(100%, 520px);
    }

    .app-modal.modal-large {
        width: min(100%, 980px);
    }

    .app-modal.modal-xlarge {
        width: min(100%, 1180px);
    }

.app-modal-head {
    padding: 20px 22px 17px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

    .app-modal-head h2 {
        margin: 0;
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-size: 1.35rem;
    }

    .app-modal-head p {
        margin: 5px 0 0;
        color: var(--ink-muted);
        font-size: .68rem;
    }

.app-modal-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f6f7f8;
    color: var(--ink);
    cursor: pointer;
}

    .app-modal-close:hover {
        color: #fff;
        background: var(--brand);
        border-color: var(--brand);
    }

.app-modal-body {
    overflow-y: auto;
}

.user-access-editor {
    padding: 20px 22px;
}

.user-access-editor .module-selector {
    padding: 14px 0;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.user-access-editor .module-selector-item {
    grid-template-columns: minmax(0, 1fr);
}

.user-access-editor .module-selector-item strong,
.user-access-editor .module-selector-item small {
    grid-column: 1;
}

.user-access-editor .permission-rule-row {
    padding: 12px 0;
}

    .app-modal-body .form-section {
        padding: 20px 22px;
    }

@keyframes modal-fade {
    from {
        opacity: 0;
    }
}

@keyframes modal-rise {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
}

.empty-state strong {
    display: block;
    color: var(--ink);
    margin-bottom: 7px;
}

.loading {
    min-height: 300px;
    display: grid;
    place-items: center;
    color: var(--ink-muted);
}

    .loading::before {
        content: '';
        width: 25px;
        height: 25px;
        border: 2px solid var(--line);
        border-top-color: var(--brand);
        border-radius: 50%;
        animation: spin .8s linear infinite;
        margin-right: 9px;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.system-state {
    max-width: 720px;
    margin: 9vh auto 0;
    padding: 42px;
    border-top: 4px solid var(--brand);
}

.system-state-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--brand);
    background: var(--brand-soft);
}

    .system-state-icon.error {
        color: var(--danger);
        background: #faeae7;
    }

.system-state h1 {
    margin: 0 0 10px;
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
}

.system-state p {
    max-width: 560px;
    color: var(--ink-muted);
    line-height: 1.65;
}

.system-state .page-actions {
    margin-top: 22px;
}

.support-reference {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #f6f7f8;
}

.account-manage-grid {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.account-settings-nav {
    padding: 10px;
    position: sticky;
    top: 94px;
}

.settings-nav-list {
    display: grid;
    gap: 4px;
}

.settings-nav-link {
    min-height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 750;
}

    .settings-nav-link:hover {
        color: var(--ink);
        background: #f5f6f7;
    }

    .settings-nav-link.active {
        color: var(--brand);
        background: var(--brand-soft);
        box-shadow: inset 3px 0 var(--brand);
    }

.account-settings-panel {
    min-width: 0;
    padding: 24px;
}

    .account-settings-panel > h3, .account-settings-panel > h4 {
        margin: 0 0 18px;
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        text-transform: uppercase;
        font-size: 1.25rem;
    }

    .account-settings-panel > .row, .account-settings-panel > .row > [class*="col-"] {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .account-settings-panel form {
        max-width: 620px;
    }

    .account-settings-panel .form-floating {
        position: relative;
        margin-bottom: 14px !important;
    }

        .account-settings-panel .form-floating .form-control {
            height: 52px;
            width: 100%;
            padding: 20px 13px 5px;
        }

        .account-settings-panel .form-floating label {
            position: absolute;
            left: 13px;
            top: 6px;
            z-index: 2;
            height: auto;
            padding: 0;
            color: var(--ink-muted);
            font-size: .59rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 800;
            transform: none;
        }

    .account-settings-panel .btn-lg {
        min-height: 42px;
        font-size: .74rem;
    }

    .account-settings-panel .alert {
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 5px;
        font-size: .72rem;
    }

        .account-settings-panel .alert > p:first-child {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

.alert-inline-icon {
    flex: 0 0 auto;
    color: var(--warning);
}

/* Account pages */
.account-form-card > h1 {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 2.1rem;
    margin-bottom: 8px;
    letter-spacing: -.015em;
}

    .account-form-card > h1 + .row {
        margin-top: 22px;
    }

.account-form-card .row, .account-form-card [class*="col-"] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.account-form-card section > h2 {
    font-size: .76rem;
    color: var(--ink-muted);
    font-weight: 500;
    margin-bottom: 22px;
}

.account-form-card section > h3, .account-form-card .col-lg-4 {
    display: none;
}

.account-form-card hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 21px 0;
}

.account-form-card .form-floating {
    position: relative;
    margin-bottom: 14px !important;
}

    .account-form-card .form-floating .form-control {
        height: 52px;
        width: 100%;
        padding: 20px 13px 5px;
    }

    .account-form-card .form-floating label {
        position: absolute;
        left: 13px;
        top: 6px;
        color: var(--ink-muted);
        font-size: .59rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 800;
    }

.account-form-card .checkbox {
    font-size: .7rem;
    color: var(--ink-soft);
}

.account-form-card .btn-lg {
    height: 50px;
    width: 100%;
    font-size: .78rem;
}

.account-form-card p {
    font-size: .69rem;
}

.account-form-card .text-secondary {
    font-size: .62rem;
}

.account-form-card .btn-link {
    background: transparent;
    color: var(--brand);
    border: 0;
}

.account-intro {
    margin: 10px 0 24px;
    font-size: .76rem !important;
    line-height: 1.65;
}

.account-back-link {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: .69rem;
    font-weight: 750;
}

    .account-back-link:hover {
        color: var(--brand);
    }

@media (max-width: 1500px) {
    .module-selector {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 1200px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .quote-line {
        grid-template-columns: 30px repeat(2, minmax(0, 1fr));
    }

    .quote-product {
        grid-column: span 2;
    }
}

@media (max-width: 1050px) {
    .dashboard-grid, .detail-grid {
        grid-template-columns: 1fr;
    }

    .action-panel {
        position: static;
    }

    .role-management-grid {
        grid-template-columns: 1fr;
    }

    .role-picker-panel {
        position: static;
    }

    .role-picker-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-manage-grid {
        grid-template-columns: 1fr;
    }

    .account-settings-nav {
        position: static;
    }

    .settings-nav-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions, .page-actions .btn {
        width: 100%;
    }

    .order-accordion-head {
        flex-wrap: wrap;
    }

    .order-accordion-toggle {
        width: 100%;
        padding: 15px 16px;
    }

    .order-accordion-end {
        width: 100%;
        padding: 0 16px 13px;
    }

    .order-line-view-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .order-line-view-tabs,
    .order-line-view-tab {
        width: 100%;
    }

    .order-line-view-tab {
        flex: 1;
    }

    .metric-grid, .master-grid, .form-grid {
        grid-template-columns: 1fr;
    }

    .detail-top {
        flex-direction: column;
    }

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

    .welcome-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbar > * {
        width: 100%;
        min-width: 0;
    }

    .workflow-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

        .workflow-row > .status {
            grid-column: 2;
            justify-self: start;
        }

    .quote-line {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .quote-product {
        grid-column: auto;
    }

    .quote-sub-lines {
        grid-column: 1 / -1;
    }

    .quote-sub-lines-head, .order-subline-entry {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .quote-sub-lines-head {
        display: grid;
    }

    .quote-summary {
        flex-direction: column;
        gap: 9px;
    }

    .catalogue-brand-strip {
        grid-template-columns: 1fr 1fr;
    }

    .catalogue-copy {
        grid-column: 1 / -1;
    }

    .role-picker-list {
        grid-template-columns: 1fr;
    }

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

    .settings-nav-list {
        grid-template-columns: 1fr;
    }

    .evidence-columns {
        grid-template-columns: 1fr;
    }

    .order-add-line-grid {
        grid-template-columns: 1fr;
    }

    .order-add-line-product {
        grid-column: auto;
    }

    .order-add-line-actions, .order-add-line-actions .btn {
        width: 100%;
    }

    .message-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .message-composer-actions {
        justify-content: space-between;
    }

    .customer-modal-tabs, .supplier-modal-tabs {
        padding: 0 10px;
        overflow-x: auto;
    }

    .customer-modal-tab, .supplier-modal-tab {
        padding-inline: 9px;
        white-space: nowrap;
    }

    .supplier-products-heading, .supplier-product-toolbar, .supplier-product-record {
        align-items: stretch;
        flex-direction: column;
    }

    .supplier-products-heading .btn,
    .supplier-product-toolbar .search-box {
        width: 100%;
        max-width: none;
    }

    .supplier-product-prices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .supplier-product-actions .btn {
        flex: 1;
    }

    .customer-tab-heading, .customer-modal-record {
        align-items: stretch;
        flex-direction: column;
    }

        .customer-tab-heading .btn {
            width: 100%;
        }

    .customer-modal-record-actions .btn {
        flex: 1;
    }

    .role-editor-hero, .permission-module-head {
        align-items: stretch;
        flex-direction: column;
    }

    .permission-rule-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .access-select {
        width: 100%;
        justify-self: stretch;
    }

    .role-editor-stats {
        justify-content: flex-start;
    }

    .permission-rule-row {
        padding-left: 14px;
    }

    .permission-module-head label {
        justify-content: space-between;
    }

    .toast-region {
        top: 74px;
        right: 16px;
    }

    .app-modal-backdrop {
        padding: 10px;
        align-items: end;
    }

    .app-modal {
        max-height: calc(100vh - 20px);
    }

    .product-picker-menu {
        min-width: 0;
    }
}