/* ============================================================
   WARRANTY TRACK
   Main Application Stylesheet
   ============================================================ */

:root {
    --wt-sidebar: #e7eaee;
    --wt-sidebar-deep: #dfe3e8;
    --wt-sidebar-soft: #d3d9e0;
    --wt-accent: #315fbd;
    --wt-accent-dark: #274f9f;
    --wt-accent-deep: #1f4389;
    --wt-accent-soft: #edf3ff;
    --wt-accent-ink: #244b96;
    --wt-ink: #202833;
    --wt-muted: #68727e;
    --wt-line: #dde2e7;
    --wt-line-strong: #cbd2da;
    --wt-surface: #ffffff;
    --wt-canvas: #f2f4f6;
    --navy: var(--wt-sidebar);
    --blue: var(--wt-accent);
    --ink: var(--wt-ink);
    --muted: var(--wt-muted);
    --line: var(--wt-line);
    --surface: var(--wt-surface);
    --canvas: var(--wt-canvas);
}


/* ============================================================
   RESET / BASE
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body,
#app {
    min-height: 100%;
    margin: 0;
}

body {
    margin: 0;
    color: var(--wt-ink);
    background: var(--wt-canvas);
    font-family: "Segoe UI", Arial, sans-serif;
}

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

button {
    font-family: inherit;
}


/* ============================================================
   APPLICATION SHELL
   ============================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    position: relative;
    width: 100%;
    min-width: 0;
    padding-left: 260px;
}

.content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 26px 46px 60px;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: 260px;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: linear-gradient( 180deg, var(--wt-sidebar) 0%, var(--wt-sidebar-deep) 100% );
    box-shadow: 8px 0 30px rgba(14, 29, 40, .10);
}

.warranty-brand,
.brand {
    height: 88px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 21px;
    border-bottom: 1px solid rgba(255,255,255,.075);
}

.warranty-mark,
.login-mark,
.brand-mark {
    position: relative;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: linear-gradient(145deg, #4f79cd, #315fbd);
    box-shadow: 0 8px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.22);
    color: #172735;
    font-size: 19px;
    font-weight: 800;
}

    .warranty-mark small,
    .login-mark small {
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 17px;
        height: 17px;
        display: grid;
        place-items: center;
        border: 2px solid var(--wt-sidebar);
        border-radius: 50%;
        background: #ffb361;
        color: #172735;
        font-size: 9px;
        font-weight: 900;
    }

.brand-copy {
    min-width: 0;
}

.brand-name {
    color: #f7fafb;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.brand-product {
    margin-top: 4px;
    color: #8396a5;
    font-size: 10.5px;
    font-weight: 500;
}

.nav-list {
    flex: 1;
    padding: 14px 13px 18px;
}

.nav-section-label {
    margin: 18px 12px 8px;
    color: #718695;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.nav-item {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 0 13px;
    border-radius: 8px;
    color: #aebbc5;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

    .nav-item:hover {
        color: #fff;
        background: rgba(255,255,255,.055);
    }

    .nav-item.active {
        color: #ffffff;
        background: linear-gradient(90deg, rgba(49,95,189,.18), rgba(49,95,189,.06));
        box-shadow: inset 0 0 0 1px rgba(49,95,189,.12);
    }

        .nav-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: var(--wt-accent);
        }

.nav-icon {
    width: 20px;
    color: #8ea0ad;
    text-align: center;
    font-size: 18px;
}

.nav-item.active .nav-icon {
    color: var(--wt-accent);
}

.nav-session-label {
    margin-top: 28px;
}

.nav-session-item {
    opacity: .82;
}

.nav-signout {
    width: 100%;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .nav-signout:hover {
        color: #fff;
        background: rgba(255,255,255,.055);
    }


/* ============================================================
   SIDEBAR USER
   ============================================================ */

.sidebar-bottom {
    border-top: 1px solid rgba(255,255,255,.075);
}

.sidebar-footer {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 16px 18px 12px;
    border: 0;
}

.user-initials,
.user-option-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
}

.user-initials {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.09);
    background: #273d4d;
    color: #eaf1f4;
    font-size: 11px;
}

.sidebar-user-details {
    min-width: 0;
}

    .sidebar-user-details strong {
        display: block;
        overflow: hidden;
        color: #edf3f5;
        font-size: 12px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-user-details small {
        display: block;
        margin-top: 3px;
        color: #8295a4;
        font-size: 10px;
    }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5fbd91;
    box-shadow: 0 0 0 3px rgba(95,189,145,.12);
}

.framework-credit {
    padding: 0 18px 16px 65px;
    color: #5f7484;
    font-size: 8.5px;
    letter-spacing: .02em;
}

    .framework-credit span {
        margin-right: 3px;
    }

    .framework-credit strong {
        color: #748997;
        font-weight: 600;
    }


/* ============================================================
   PAGE HEADINGS
   ============================================================ */

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

    .page-heading h1 {
        margin: 6px 0 7px;
        color: #152532;
        font-size: 29px;
        font-weight: 700;
        letter-spacing: -.035em;
    }

    .page-heading p {
        margin: 0;
        color: #71808c;
        font-size: 14px;
    }

.compact-heading {
    margin-bottom: 14px;
}

.eyebrow {
    color: var(--wt-accent-dark);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 17px;
    border: 0;
    border-radius: 8px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
}

.button-primary {
    color: #ffffff;
    background: var(--wt-accent);
    box-shadow: 0 6px 15px rgba(49,95,189,.22);
}

    .button-primary:hover {
        background: var(--wt-accent-dark);
        color: #ffffff;
        transform: translateY(-1px);
    }

.button-secondary {
    color: var(--wt-ink);
    background: #fff;
    border: 1px solid var(--wt-line);
}


/* ============================================================
   PANELS / CARDS
   ============================================================ */

.panel,
.stat-card {
    background: #fff;
    border: 1px solid #e2e7e9;
    border-radius: 10px;
    box-shadow: 0 2px 9px rgba(19,35,48,.025);
}

.panel {
    padding: 24px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
}

    .stat-card::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: #ffd7b0;
        content: "";
    }

    .stat-card span,
    .stat-card small {
        display: block;
        color: var(--wt-muted);
        font-size: 12px;
    }

    .stat-card strong {
        display: block;
        margin: 12px 0 8px;
        color: #172632;
        font-size: 30px;
    }

.empty-state {
    padding: 58px 24px;
    text-align: center;
}

    .empty-state h2 {
        margin: 15px 0 7px;
        font-size: 18px;
    }

    .empty-state p {
        margin: 0;
        color: var(--wt-muted);
        font-size: 13px;
    }

.empty-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin: auto;
    border-radius: 50%;
    color: #198754;
    background: #e8f8ef;
    font-size: 20px;
}

.workspace-stat-filter {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

    .workspace-stat-filter:hover {
        transform: translateY(-1px);
    }

    .workspace-stat-filter.active {
        border-color: #3569b8;
        box-shadow: 0 0 0 2px rgba(53, 105, 184, 0.10);
    }

.workspace-list-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.workspace-filter-label {
    display: block;
    margin-top: 0.15rem;
    opacity: 0.7;
}

.workspace-filter-empty {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


/* ============================================================
   GENERAL FORM FIELDS
   ============================================================ */

.field {
    min-width: 0;
}

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

.field label,
.form-group label,
.login-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #394b58;
    font-size: 11px;
    font-weight: 650;
}

.field input:not([type=file]),
.field textarea,
.field select,
.archive-filters select,
.brand-add-row select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wt-line-strong);
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: var(--wt-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.field select,
.archive-filters select,
.brand-add-row select {
    height: 39px;
    padding: 0 11px;
    font-size: 12px;
}

.field textarea {
    resize: vertical;
}

    .field input:focus,
    .field textarea:focus,
    .field select:focus,
    .archive-filters select:focus,
    .brand-add-row select:focus {
        border-color: var(--wt-accent);
        box-shadow: 0 0 0 3px rgba(49,95,189,.14);
    }

.field input[type=file] {
    width: 100%;
    padding: 12px;
    border: 1px dashed #b9c3d2;
    border-radius: 8px;
    background: #f8fafc;
}

.field-help {
    display: block;
    margin-top: 7px;
    color: var(--wt-muted);
    font-size: 10px;
}


/* ============================================================
   VALIDATION
   ============================================================ */

.validation-message,
.validation-summary {
    color: #b42318;
    font-size: 11px;
}

    .validation-summary ul {
        margin: 0 0 12px;
        padding: 9px 28px;
        border-radius: 7px;
        background: #fff1f0;
    }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #c62828;
}


/* ============================================================
   NEW REQUEST
   ============================================================ */

.request-form {
    max-width: 1000px;
}

.form-section {
    padding: 22px 24px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 18px;
}

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

.advanced-options {
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
}

    .advanced-options summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 22px;
        list-style: none;
        background: #fbfcfc;
        cursor: pointer;
    }

        .advanced-options summary:hover {
            background: #fffaf6;
        }

        .advanced-options summary::-webkit-details-marker {
            display: none;
        }

        .advanced-options summary strong,
        .advanced-options summary small {
            display: block;
        }

        .advanced-options summary strong {
            font-size: 13px;
        }

        .advanced-options summary small {
            margin-top: 4px;
            color: var(--wt-muted);
            font-size: 11px;
        }

    .advanced-options[open] summary {
        border-bottom: 1px solid var(--wt-line);
    }

.chevron {
    font-size: 19px;
    transition: transform .15s ease;
}

.advanced-options[open] .chevron {
    transform: rotate(180deg);
}

.advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px;
}

.money-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--wt-line-strong);
    border-radius: 7px;
}

    .money-input span {
        padding-left: 12px;
        color: var(--wt-muted);
    }

    .money-input input {
        border: 0 !important;
        box-shadow: none !important;
    }

.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

    .file-list span {
        padding: 5px 8px;
        border-radius: 5px;
        background: var(--wt-accent-soft);
        color: var(--wt-accent-ink);
        font-size: 10px;
    }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}


/* ============================================================
   REQUEST LISTS
   ============================================================ */

.request-panel {
    padding: 0;
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.request-panel .panel-header {
    padding: 18px 22px;
}

    .panel-header h2,
    .request-panel .panel-header h2 {
        margin: 0;
        font-size: 16px;
    }

.badge,
.selection-mark {
    padding: 5px 9px;
    border-radius: 99px;
    color: var(--wt-accent-ink);
    background: var(--wt-accent-soft);
    font-size: 10px;
    font-weight: 700;
}

.request-list {
    border-top: 1px solid var(--wt-line);
}

.request-row {
    display: grid;
    grid-template-columns: minmax(150px,1.1fr) minmax(180px,2fr) auto 100px;
    gap: 18px;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--wt-line);
    font-size: 12px;
}

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

    .request-row strong,
    .request-row small {
        display: block;
    }

    .request-row small {
        margin-top: 4px;
        color: var(--wt-muted);
        font-size: 10px;
    }


    /* Registration plate look */

    .request-row > div:first-child strong,
    .queue-item > div:first-child strong {
        display: inline-block;
        padding: 3px 7px;
        border: 1px solid #e4d18a;
        border-radius: 4px;
        background: #f7e59c;
        color: #161616;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .055em;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
    }

.request-repair {
    overflow: hidden;
    color: #455066;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-row time {
    color: var(--wt-muted);
    text-align: right;
    font-size: 10px;
}

.request-link {
    color: inherit;
    text-decoration: none;
    transition: background .12s ease;
}

    .request-link:hover {
        background: #fffaf6;
    }

.empty-table {
    padding: 50px 10px;
    border-top: 1px solid var(--wt-line);
    color: var(--wt-muted);
    text-align: center;
    font-size: 13px;
}


/* ============================================================
   STATUS BADGES
   ============================================================ */

.status-badge {
    padding: 5px 9px;
    border-radius: 6px;
    color: #286142;
    background: #e7f4eb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .025em;
}

.status-approved {
    color: #286142;
    background: #e7f4eb;
}

.status-declined {
    color: #9a3430;
    background: #fbeceb;
}

.status-pending {
    color: #745a12;
    background: #fff4d6;
}

.status-underreview,
.status-submitted {
    color: #355f91;
    background: #eaf1f8;
}

.status-morephotosrequired,
.status-moreinformationrequired {
    color: #84551a;
    background: #fbefdd;
}


/* ============================================================
   ADMIN REQUEST QUEUE
   ============================================================ */

.queue-total {
    padding: 7px 11px;
    border-radius: 99px;
    color: var(--wt-accent-ink);
    background: var(--wt-accent-soft);
    font-size: 11px;
    font-weight: 700;
}

.queue-sections {
    display: grid;
    gap: 14px;
}

.queue-section {
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

.queue-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 19px;
    border-bottom: 1px solid var(--wt-line);
    background: #fbfcfc;
}

    .queue-heading h2,
    .queue-heading small {
        display: block;
        margin: 0;
    }

    .queue-heading h2 {
        color: #233440;
        font-size: 13px;
    }

    .queue-heading small {
        margin-top: 4px;
        color: var(--wt-muted);
        font-size: 10px;
    }

    .queue-heading > span {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--wt-accent-ink);
        background: var(--wt-accent-soft);
        font-size: 11px;
        font-weight: 700;
    }

.queue-empty {
    padding: 24px 20px;
    color: var(--wt-muted);
    font-size: 11px;
}

.queue-item {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(150px,1fr) minmax(220px,2fr) auto 95px;
    gap: 18px;
    align-items: center;
    padding: 13px 19px;
    border-bottom: 1px solid var(--wt-line);
    color: inherit;
    text-decoration: none;
}

    .queue-item:last-child {
        border-bottom: 0;
    }

    .queue-item:hover {
        background: #fffaf6;
    }

    .queue-item strong,
    .queue-item small {
        display: block;
    }

    .queue-item strong {
        font-size: 12px;
    }

    .queue-item small,
    .queue-item time {
        margin-top: 4px;
        color: var(--wt-muted);
        font-size: 10px;
    }

    .queue-item p {
        margin: 0;
        overflow: hidden;
        color: #455066;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .queue-item time {
        text-align: right;
    }


/* ============================================================
   BRAND COLOUR SUPPORT
   ============================================================ */

.brand-queue-item {
    position: relative;
    border-left: 4px solid rgb(var(--brand-rgb));
    background: linear-gradient( 90deg, rgba(var(--brand-rgb),.12) 0%, rgba(var(--brand-rgb),.045) 18%, #fff 52% );
}

    .brand-queue-item:hover {
        background: linear-gradient( 90deg, rgba(var(--brand-rgb),.16) 0%, rgba(var(--brand-rgb),.065) 22%, #f9fbfb 58% );
    }

.brand-request-row {
    position: relative;
    border-left: 4px solid rgb(var(--brand-rgb));
    background: linear-gradient( 90deg, rgba(var(--brand-rgb),.115) 0%, rgba(var(--brand-rgb),.035) 17%, #fff 48% );
}

    .brand-request-row:hover {
        background: linear-gradient( 90deg, rgba(var(--brand-rgb),.16) 0%, rgba(var(--brand-rgb),.055) 20%, #f9fbfb 52% );
    }


/* ============================================================
   REQUEST DETAIL
   ============================================================ */

.detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .detail-toolbar a {
        color: var(--wt-muted);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }

.request-hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 36px;
    align-items: center;
    margin-bottom: 18px;
    padding: 28px;
}

    .request-hero h1 {
        display: inline-block;
        margin: 5px 0;
        padding: 5px 10px;
        border: 1px solid #e2cc7d;
        border-radius: 5px;
        background: #f6e49a;
        color: #151515;
        font-family: Arial, sans-serif;
        font-size: 27px;
        letter-spacing: .055em;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    }

    .request-hero p {
        margin: 0;
        color: var(--wt-muted);
        font-size: 12px;
    }

    .request-hero > div:last-child {
        padding-left: 28px;
        border-left: 1px solid var(--wt-line);
    }

    .request-hero small,
    .request-hero strong {
        display: block;
    }

    .request-hero small {
        margin-bottom: 8px;
        color: var(--wt-muted);
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .request-hero strong {
        font-size: 16px;
        line-height: 1.45;
    }

.request-hero-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.brand-detail-panel {
    position: relative;
    overflow: hidden;
}

    .brand-detail-panel::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 5px;
        background: rgb(var(--brand-rgb));
        content: "";
    }

    .brand-detail-panel::after {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 90deg, rgba(var(--brand-rgb),.10) 0%, rgba(var(--brand-rgb),.035) 18%, transparent 45% );
        content: "";
    }

    .brand-detail-panel > * {
        position: relative;
        z-index: 1;
    }

.brand-detail-badge,
.brand-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(var(--brand-rgb),.28);
    border-radius: 6px;
    background: rgba(var(--brand-rgb),.11);
    color: rgb(var(--brand-rgb));
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .025em;
}

    .brand-detail-badge::before,
    .brand-inline::before {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgb(var(--brand-rgb));
        content: "";
    }


/* ============================================================
   DETAIL GRID
   ============================================================ */

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

.detail-section h2,
.action-card h2,
.history-panel h2,
.response-card h2,
.request-summary-card h2 {
    margin: 0 0 18px;
    font-size: 16px;
}

.detail-list {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 0;
    margin: 0;
}

    .detail-list dt,
    .detail-list dd {
        margin: 0;
        padding: 10px 0;
        border-bottom: 1px solid #edf0f4;
        font-size: 12px;
    }

    .detail-list dt {
        color: var(--wt-muted);
    }

    .detail-list dd {
        font-weight: 500;
        white-space: pre-wrap;
    }

.subheading {
    margin-top: 28px !important;
}

.action-card {
    position: sticky;
    top: 90px;
}

    .action-card label,
    .response-card label {
        display: block;
        margin: 12px 0 7px;
        font-size: 11px;
        font-weight: 700;
    }

    .action-card textarea,
    .response-card textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--wt-line-strong);
        border-radius: 7px;
        resize: vertical;
    }

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

    .action-buttons button {
        padding: 9px;
        border: 1px solid #bdd0f7;
        border-radius: 7px;
        color: #2458b5;
        background: #f2f6ff;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

        .action-buttons button:first-child {
            color: #176438;
            border-color: #b7dec6;
            background: #edf9f2;
        }

    .action-buttons .pending {
        color: #725100;
        border-color: #ecd58a;
        background: #fff8dd;
    }

    .action-buttons .danger {
        color: #a32721;
        border-color: #efc1bd;
        background: #fff2f1;
    }

.action-error {
    color: #b42318;
    font-size: 11px;
}

.archive-readonly h2 {
    margin: 8px 0;
    font-size: 15px;
}

.archive-readonly p {
    margin: 0;
    color: var(--wt-muted);
    font-size: 11px;
    line-height: 1.55;
}

.request-summary-card {
    margin-bottom: 18px;
}


/* ============================================================
   HISTORY
   ============================================================ */

.history-panel {
    margin-top: 18px;
}

.history-item {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 10px;
    padding: 0 0 22px;
}

    .history-item::before {
        position: absolute;
        top: 12px;
        bottom: 0;
        left: 5px;
        width: 1px;
        background: var(--wt-line);
        content: "";
    }

    .history-item:last-child::before {
        display: none;
    }

.history-dot {
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border: 3px solid #ffe1c4;
    border-radius: 50%;
    background: var(--wt-accent);
}

.history-item strong,
.history-item time {
    display: block;
}

.history-item strong {
    font-size: 12px;
}

.history-item time,
.history-item small {
    margin-top: 4px;
    color: var(--wt-muted);
    font-size: 10px;
}

.history-item p {
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    background: #f7f8fa;
    font-size: 12px;
    white-space: pre-wrap;
}


/* ============================================================
   USER RESPONSE
   ============================================================ */

.response-card {
    max-width: 760px;
    margin-bottom: 18px;
    border-color: #f1c99d;
    background: #fffaf6;
}

.admin-message {
    margin: 8px 0 18px;
    padding: 14px;
    border-left: 3px solid var(--wt-accent);
    background: #fff4e8;
}

    .admin-message strong {
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .admin-message p {
        margin: 7px 0 0;
        font-size: 13px;
        white-space: pre-wrap;
    }


/* ============================================================
   STATS
   ============================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.response-stat strong {
    font-size: 24px;
}

.stats-note {
    margin-top: 18px;
}

    .stats-note strong {
        font-size: 12px;
    }

    .stats-note p {
        margin: 7px 0 0;
        color: var(--wt-muted);
        font-size: 11px;
        line-height: 1.6;
    }


/* ============================================================
   ARCHIVE FILTERS
   ============================================================ */

.archive-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1.1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.archive-filters-brand {
    grid-template-columns: minmax(220px,2fr) minmax(130px,1fr) minmax(130px,1fr) minmax(150px,1fr) auto;
}

.clear-filters {
    height: 39px;
    padding: 0 12px;
    border: 1px solid var(--wt-line);
    border-radius: 7px;
    color: var(--wt-muted);
    background: #fff;
    font-size: 11px;
    cursor: pointer;
}


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

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
}

.setting-card {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 16px;
    align-items: center;
}

    .setting-card h2 {
        margin: 0 0 6px;
        font-size: 15px;
    }

    .setting-card p {
        margin: 0;
        color: var(--wt-muted);
        font-size: 12px;
    }

    .setting-card > span {
        color: var(--wt-muted);
        font-size: 10px;
    }

.setting-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--wt-accent-ink);
    background: var(--wt-accent-soft);
    font-size: 21px;
}


/* ============================================================
   BRAND SETTINGS
   ============================================================ */

.brand-settings {
    margin-top: 18px;
}

.brand-settings-heading {
    margin-bottom: 20px;
}

    .brand-settings-heading h2 {
        margin: 5px 0 6px;
        color: #233440;
        font-size: 17px;
    }

    .brand-settings-heading p {
        margin: 0;
        color: var(--wt-muted);
        font-size: 11px;
    }

.brand-add-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--wt-line);
    border-radius: 8px;
    background: #fafcfc;
}

    .brand-add-row .button {
        height: 39px;
    }

.brand-list {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--wt-line);
    border-radius: 8px;
}

.brand-setting-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(150px,1fr) 1.5fr auto;
    gap: 18px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wt-line);
}

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

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

    .brand-preview strong {
        color: #263640;
        font-size: 12px;
    }

.brand-preview-dot {
    width: 11px;
    height: 32px;
    border-radius: 4px;
    background: rgb(var(--brand-rgb));
}

.brand-colour-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.brand-colour-choice {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: rgb(var(--palette-rgb));
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    cursor: pointer;
}

    .brand-colour-choice:hover {
        transform: scale(1.08);
    }

    .brand-colour-choice.selected {
        border-color: #fff;
        box-shadow: 0 0 0 2px rgb(var(--palette-rgb));
    }

.brand-active-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--wt-muted);
    font-size: 10px;
    cursor: pointer;
}

    .brand-active-toggle input {
        accent-color: var(--wt-accent);
    }

.brand-settings-note {
    margin-top: 12px;
    color: #8b979e;
    font-size: 9px;
}


/* ============================================================
   USER SELECTION
   ============================================================ */

.user-list {
    display: grid;
    gap: 10px;
    max-width: 720px;
}

.user-option {
    width: 100%;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--wt-line);
    border-radius: 9px;
    background: #fff;
    color: var(--wt-ink);
    text-align: left;
    cursor: pointer;
}

    .user-option:hover,
    .user-option.selected {
        border-color: #f1b16f;
        background: #fff8f1;
    }

.user-option-avatar {
    width: 42px;
    height: 42px;
    background: var(--wt-accent);
    color: #fff;
    font-size: 12px;
}

.user-option strong,
.user-option small {
    display: block;
}

.user-option small {
    margin-top: 5px;
    color: var(--wt-muted);
}

.helper-text {
    color: var(--wt-muted);
    font-size: 12px;
}


/* ============================================================
   LOGIN
   ============================================================ */

.login-layout {
    min-height: 100vh;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: radial-gradient(circle at 50% -20%, #e9effa 0, transparent 42%), #f3f5f6;
}

.login-shell {
    width: 100%;
    max-width: 420px;
}

.login-card {
    width: 100%;
    padding: 36px 38px 32px;
    border: 1px solid #dfe5e7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(24,42,53,.075);
}

.login-brand,
.login-brand-new {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
}

.login-mark {
    border-color: rgba(0,0,0,.035);
}

    .login-mark small {
        border-color: #fff;
    }

.login-title,
.login-product-name {
    color: #172a36;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.login-subtitle,
.login-product-subtitle {
    margin-top: 3px;
    color: #82909a;
    font-size: 10.5px;
}

.login-heading {
    margin-bottom: 26px;
}

    .login-heading h1 {
        margin: 0 0 7px;
        color: #152631;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -.025em;
    }

    .login-heading p {
        margin: 0;
        color: #73818b;
        font-size: 12px;
    }

.form-group,
.login-form-group {
    margin-bottom: 17px;
}

    .form-group input,
    .login-form-group input {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid #ccd6da;
        border-radius: 7px;
        outline: none;
        background: #fff;
        color: #192a35;
        transition: border-color .12s ease, box-shadow .12s ease;
    }

        .form-group input:focus,
        .login-form-group input:focus {
            border-color: var(--wt-accent);
            box-shadow: 0 0 0 3px rgba(49,95,189,.14);
        }

.login-error {
    margin-bottom: 17px;
    padding: 10px 12px;
    border: 1px solid #f2d0ce;
    border-radius: 7px;
    background: #fdf2f1;
    color: #a73732;
    font-size: 11px;
}

.login-button {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 15px;
    border: 0;
    border-radius: 7px;
    background: var(--wt-accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(49,95,189,.22);
    cursor: pointer;
    transition: background .12s ease, transform .08s ease;
}

    .login-button:hover:not(:disabled) {
        background: var(--wt-accent-dark);
        transform: translateY(-1px);
    }

    .login-button:disabled {
        opacity: .66;
        cursor: default;
    }

.login-arrow {
    margin-left: auto;
    font-size: 17px;
    line-height: 0;
}

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
    color: #8a979f;
    font-size: 9px;
}

.security-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #65b28f;
}

.login-footer,
.login-framework {
    margin-top: 16px;
    color: #9aa5ab;
    text-align: center;
    font-size: 9px;
}

    .login-framework strong {
        color: #7d8b93;
        font-weight: 600;
    }

.login-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wt-spin .7s linear infinite;
}

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


/* ============================================================
   BLAZOR DEFAULT UI
   ============================================================ */

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
    width: 100%;
    padding: .6rem 1.25rem .7rem;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    background: lightyellow;
    color-scheme: light only;
}

    #blazor-error-ui .dismiss {
        position: absolute;
        top: .5rem;
        right: .75rem;
        cursor: pointer;
    }

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
    background: #b32121;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.loading-progress {
    position: absolute;
    inset: 20vh 0 auto 0;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: .6rem;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

        .loading-progress circle:last-child {
            stroke: var(--wt-accent);
            stroke-dasharray: calc( 3.141 * var(--blazor-load-percentage,0%) * .8 ), 500%;
            transition: stroke-dasharray .05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3.25rem) 0 auto .2rem;
    font-weight: bold;
    text-align: center;
}

    .loading-progress-text::after {
        content: var(--blazor-load-percentage-text,"Loading");
    }

code {
    color: #c02d76;
}

.menu-button {
    display: none;
}

.sidebar-backdrop {
    display: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

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

    .brand-setting-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

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

        .archive-filters-brand .archive-search {
            grid-column: 1 / -1;
        }
}


@media (max-width: 1000px) {

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

    .archive-search {
        grid-column: 1 / -1;
    }
}


@media (max-width: 900px) {

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .action-card {
        position: static;
    }

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


@media (max-width: 850px) and (min-width: 651px) {

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


@media (max-width: 800px) {

    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .sidebar-open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 15;
        display: block;
        border: 0;
        background: rgba(7,15,28,.48);
    }

    .app-main {
        padding-left: 0;
    }

    .menu-button {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 12;
        display: block;
        width: 40px;
        height: 40px;
        padding: 7px;
        border: 1px solid var(--wt-line);
        border-radius: 9px;
        background: rgba(255,255,255,.95);
        box-shadow: 0 4px 14px rgba(19,35,63,.1);
    }

        .menu-button span {
            display: block;
            height: 2px;
            margin: 5px;
            background: var(--wt-ink);
        }

    .content {
        padding: 66px 20px 55px;
    }

    .stat-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 650px) {

    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 29px 24px 27px;
    }

    .login-heading h1 {
        font-size: 22px;
    }

    .warranty-brand {
        height: 82px;
    }

    .quick-grid,
    .quick-grid-brand,
    .advanced-grid {
        grid-template-columns: 1fr;
    }

    .field-full {
        grid-column: auto;
    }

    .form-section {
        padding: 20px;
    }

    .request-row {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
    }

    .request-repair {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .request-row time {
        grid-column: 2;
        grid-row: 1;
    }

    .status-badge {
        grid-column: 2;
        grid-row: 2;
    }

    .form-actions .button {
        flex: 1;
    }

    .request-hero {
        grid-template-columns: 1fr;
        gap: 18px;
    }

        .request-hero > div:last-child {
            padding: 18px 0 0;
            border-top: 1px solid var(--wt-line);
            border-left: 0;
        }

    .request-hero-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-list {
        grid-template-columns: 1fr;
    }

        .detail-list dt {
            padding-bottom: 2px;
            border: 0;
        }

        .detail-list dd {
            padding-top: 2px;
        }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .queue-item {
        grid-template-columns: 1fr auto;
        gap: 7px 12px;
    }

        .queue-item p {
            grid-column: 1 / -1;
            grid-row: 2;
        }

        .queue-item time {
            display: none;
        }

    .archive-filters,
    .archive-filters-brand {
        grid-template-columns: 1fr;
    }

        .archive-search,
        .archive-filters-brand .archive-search {
            grid-column: auto;
        }

    .brand-add-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   WARRANTY TRACK - DEALERS
   ============================================================ */

.dealer-settings {
    margin-top: 18px;
}

.dealer-settings-heading {
    margin-bottom: 20px;
}

    .dealer-settings-heading h2 {
        margin: 5px 0 6px;
        color: #233440;
        font-size: 17px;
    }

    .dealer-settings-heading p {
        max-width: 700px;
        margin: 0;
        color: var(--wt-muted);
        font-size: 11px;
        line-height: 1.55;
    }

.dealer-add-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(140px, .7fr) auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--wt-line);
    border-radius: 8px;
    background: #fafcfc;
}

    .dealer-add-row .button {
        height: 39px;
    }

.dealer-list {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--wt-line);
    border-radius: 8px;
}

.dealer-setting-row {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(340px, 1.5fr) auto;
    gap: 18px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--wt-line);
}

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

.dealer-identity {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dealer-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--wt-accent-soft);
    color: var(--wt-accent-dark);
    font-size: 12px;
    font-weight: 800;
}

.dealer-identity strong,
.dealer-identity small {
    display: block;
}

.dealer-identity strong {
    color: #263640;
    font-size: 12px;
}

.dealer-identity small {
    margin-top: 4px;
    color: var(--wt-muted);
    font-size: 9px;
}

.dealer-edit-fields {
    display: grid;
    grid-template-columns: 1fr .6fr;
    gap: 10px;
}

    .dealer-edit-fields .field label {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .dealer-edit-fields input {
        height: 35px;
    }

.dealer-active-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--wt-muted);
    font-size: 10px;
    cursor: pointer;
}

    .dealer-active-toggle input {
        accent-color: var(--wt-accent);
    }

.dealer-settings-note {
    margin-top: 12px;
    color: #8b979e;
    font-size: 9px;
}

.dealer-empty {
    margin-top: 16px;
    padding: 24px;
    border: 1px dashed var(--wt-line-strong);
    border-radius: 8px;
    color: var(--wt-muted);
    text-align: center;
    font-size: 11px;
}

@media (max-width: 1050px) {

    .dealer-setting-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dealer-active-toggle {
        justify-self: start;
    }
}

@media (max-width: 700px) {

    .dealer-add-row {
        grid-template-columns: 1fr;
    }

    .dealer-edit-fields {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   WARRANTY TRACK - USER SETTINGS
   ============================================================ */

.user-settings {
    margin-top: 18px;
}

.user-settings-heading {
    margin-bottom: 20px;
}

    .user-settings-heading h2 {
        margin: 5px 0 6px;
        color: #233440;
        font-size: 17px;
    }

    .user-settings-heading p {
        max-width: 700px;
        margin: 0;
        color: var(--wt-muted);
        font-size: 11px;
        line-height: 1.55;
    }

.user-settings-list {
    overflow: hidden;
    border: 1px solid var(--wt-line);
    border-radius: 8px;
}

.user-setting-row {
    min-height: 82px;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--wt-line);
}

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

.user-setting-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-setting-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wt-sidebar-soft);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
}

.user-setting-copy {
    min-width: 0;
}

.user-setting-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .user-setting-name strong {
        color: #263640;
        font-size: 12px;
    }

.current-user-tag {
    padding: 3px 6px;
    border-radius: 99px;
    background: var(--wt-accent-soft);
    color: var(--wt-accent-deep);
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.user-setting-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--wt-muted);
    font-size: 9px;
}

.user-role-badge {
    padding: 3px 6px;
    border-radius: 5px;
    background: #edf1f3;
    color: #5b6972;
    font-size: 8px;
    font-weight: 700;
}

    .user-role-badge.admin {
        background: var(--wt-accent-soft);
        color: var(--wt-accent-deep);
    }

.user-status-dot {
    width: 6px;
    height: 6px;
    margin-left: 3px;
    border-radius: 50%;
}

    .user-status-dot.active {
        background: #5fbd91;
    }

    .user-status-dot.inactive {
        background: #b8c0c5;
    }

.user-dealer-assignment label {
    display: block;
    margin-bottom: 6px;
    color: #394b58;
    font-size: 9px;
    font-weight: 650;
}

.user-dealer-assignment select {
    width: 100%;
    height: 37px;
    padding: 0 10px;
    border: 1px solid var(--wt-line-strong);
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: var(--wt-ink);
    font-size: 11px;
}

    .user-dealer-assignment select:focus {
        border-color: var(--wt-accent);
        box-shadow: 0 0 0 3px rgba(49,95,189,.14);
    }

    .user-dealer-assignment select:disabled {
        opacity: .65;
        cursor: default;
    }

.user-dealer-assignment small {
    display: block;
    margin-top: 5px;
    color: var(--wt-muted);
    font-size: 9px;
}

.user-save-status {
    color: var(--wt-accent-dark) !important;
}

.user-settings-note {
    margin-top: 12px;
    color: #8b979e;
    font-size: 9px;
}

@media (max-width: 800px) {

    .user-setting-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ============================================================
   REQUEST DEALER FILTER
   ============================================================ */

.requests-heading-actions {
    display: flex;
    align-items: end;
    gap: 14px;
}

.request-dealer-filter {
    min-width: 220px;
}

    .request-dealer-filter label {
        display: block;
        margin-bottom: 5px;
        color: var(--wt-muted);
        font-size: 9px;
        font-weight: 650;
    }

    .request-dealer-filter select {
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border: 1px solid var(--wt-line-strong);
        border-radius: 7px;
        background: #fff;
        color: var(--wt-ink);
        outline: none;
        font-size: 10px;
    }

        .request-dealer-filter select:focus {
            border-color: var(--wt-accent);
            box-shadow: 0 0 0 3px rgba(242, 140, 40, .14);
        }

.queue-dealer {
    display: block;
    margin-top: 4px;
    color: #6f7d85 !important;
    font-size: 9px !important;
    font-weight: 650;
}

@media (max-width: 800px) {

    .requests-heading-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .request-dealer-filter {
        width: 100%;
        min-width: 0;
    }
}

/* 2026 housekeeping / polish pass */
.warranty-brand { background:transparent; height:100px; padding:20px 25px; }
.warranty-brand .brand-name { color:#13233f;font-size:21px;font-weight:800; }
.warranty-brand .brand-product { color:rgba(19,35,63,.78);font-size:13px;font-weight:650; }
.nav-spacer { flex:1; min-height:22px; }
.nav-list { display:flex;flex-direction:column; }
.nav-signout { opacity:1;color:#aebbc5;background:transparent;box-shadow:none; }
.request-category-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.request-category-card { appearance:none;text-align:left;cursor:pointer;position:relative;min-height:205px;padding:25px;border-color:var(--wt-line);color:var(--wt-ink);transition:.18s ease; }
.request-category-card:hover { transform:translateY(-2px);border-color:rgba(49,95,189,.5);box-shadow:0 14px 30px rgba(20,35,50,.08); }
.request-category-card strong { display:block;margin:20px 0 0;font-size:42px;color:var(--wt-accent); }
.request-category-card h2 { margin:4px 0;font-size:19px; }.request-category-card small,.category-kicker { color:var(--wt-muted); }
.category-open { position:absolute;right:24px;bottom:24px;color:var(--wt-accent);font-size:12px;font-weight:700; }
.back-link { margin:0 0 14px;padding:0;border:0;background:none;color:var(--wt-muted);cursor:pointer;font-weight:650; }
.period-filter { display:flex;gap:14px;align-items:end;margin-bottom:18px;padding:16px 20px; }.period-filter .field{min-width:180px;}
.response-summary { min-width:240px;padding:15px 20px;border-radius:12px;background:linear-gradient(135deg,var(--wt-sidebar),#213d52);color:#fff;text-align:right; }
.response-summary span,.response-summary small { display:block;color:#9fb0bc;font-size:10px; }.response-summary strong{display:block;margin:5px 0;font-size:25px;color:#8eb1f3;}
.settings-dashboard { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }.settings-shortcut{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;color:inherit;text-decoration:none;}.settings-shortcut>span{width:45px;height:45px;display:grid;place-items:center;border-radius:10px;background:#edf3ff;color:#315fbd;font-size:21px}.settings-shortcut h2{margin:0 0 5px;font-size:16px}.settings-shortcut p{margin:0;color:var(--wt-muted);font-size:12px}.settings-shortcut b{color:var(--wt-accent)}.settings-shortcut.future{opacity:.68}.settings-shortcut small{color:var(--wt-muted)}
.user-editor{margin-bottom:18px}.security-callout{margin-top:20px;padding:15px;border-left:3px solid var(--wt-accent);background:#f4f7fd}.security-callout p,.settings-intro{margin:6px 0 0;color:var(--wt-muted);font-size:12px;line-height:1.55}.toggle-field{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.brand-settings-list{display:grid;gap:0}.brand-settings-list article{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--wt-line)}.brand-settings-list article:last-child{border:0}.brand-settings-list strong,.brand-settings-list small{display:block}.brand-settings-list small{margin-top:3px;color:var(--wt-muted)}.brand-swatch{width:12px;height:34px;border-radius:8px;background:rgb(var(--brand-rgb))}.status-unresolved{color:#674c16;background:#f5ead0}.action-buttons .unresolved{grid-column:1/-1;color:#674c16;border-color:#dec994;background:#fff9e9}
.wt-loader{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#f9fafc 0,#edf0f4 55%,#e1e5ea 100%);color:#202833}.wt-loader-brand{text-align:center;margin-bottom:22px}.wt-loader-brand strong,.wt-loader-brand span{display:block}.wt-loader-brand strong{font-size:27px;color:#25313e}.wt-loader-brand span{margin-top:5px;color:#6f7b87;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.wt-loader .loading-progress{position:relative;inset:auto;margin:0;width:7rem;height:7rem}.wt-loader .loading-progress circle:first-child{stroke:rgba(49,65,82,.13)}.wt-loader .loading-progress circle:last-child{stroke:#315fbd}.wt-loader .loading-progress-text{position:relative;inset:auto;margin-top:-4.25rem;height:4.25rem;color:#1f4389}.wt-loader>p{margin-top:30px;color:#6f7b87;font-size:11px}.loading-progress-text::after{content:var(--blazor-load-percentage-text,"0%");}
@media(max-width:700px){.request-category-grid,.settings-dashboard{grid-template-columns:1fr}.period-filter{flex-wrap:wrap}.response-summary{width:100%;text-align:left}}

/* Final approved light-grey / royal-blue theme */
.sidebar {
    color: var(--wt-ink);
    background: linear-gradient(180deg, var(--wt-sidebar) 0%, var(--wt-sidebar-deep) 100%);
    border-right: 1px solid #d4d9df;
    box-shadow: 8px 0 28px rgba(34, 45, 58, .06);
}
.warranty-brand { height:100px; padding:20px 25px; background:transparent; border-bottom-color:rgba(39,52,67,.08); }
.warranty-brand .brand-name { color:#222d39; font-size:21px; font-weight:800; }
.warranty-brand .brand-product { color:#687582; font-size:13px; font-weight:650; }
.nav-section-label { color:#7c8792; }
.nav-item, .nav-signout { color:#4f5c68; }
.nav-item:hover, .nav-signout:hover { color:#263340; background:rgba(49,95,189,.07); }
.nav-item.active { color:#244f9f; background:rgba(49,95,189,.11); box-shadow:inset 0 0 0 1px rgba(49,95,189,.10); }
.nav-icon { color:#77838f; }
.nav-item.active .nav-icon { color:var(--wt-accent); }
.nav-spacer { flex:1; min-height:28px; }
.sidebar-bottom { border-top-color:rgba(39,52,67,.10); }
.user-initials { border-color:#c3c9d0; background:#cbd1d8; color:#36414c; }
.sidebar-user-details strong { color:#2b3641; }
.sidebar-user-details small, .framework-credit, .framework-credit strong { color:#727e89; }
.status-dot { background:#4e9d77; }
.panel { border-color:var(--wt-line); box-shadow:0 8px 24px rgba(28,39,52,.045); }
.button-primary, .login-button { background:var(--wt-accent); box-shadow:0 6px 14px rgba(49,95,189,.20); }
.button-primary:hover, .login-button:hover:not(:disabled) { background:var(--wt-accent-dark); }
.request-category-card:hover { border-color:rgba(49,95,189,.45); }
.response-summary { background:linear-gradient(135deg,#35475a,#293a4b); }
.response-summary strong { color:#8eb1f3; }
.settings-shortcut>span { background:var(--wt-accent-soft); color:var(--wt-accent); }
.security-callout { background:#f4f7fd; }
.login-page { background:radial-gradient(circle at 50% -20%,#e9effa 0,transparent 42%),#f2f4f6; }
.login-brand-new { justify-content:center; text-align:center; }
.form-group input:focus, .login-form-group input:focus { box-shadow:0 0 0 3px rgba(49,95,189,.14); }
.wt-loader { background:radial-gradient(circle at 50% 35%,#f9fafc 0,#edf0f4 55%,#e1e5ea 100%); color:var(--wt-ink); }
.wt-loader-brand strong { color:#25313e; }
.wt-loader-brand span, .wt-loader>p { color:#6f7b87; }
.wt-loader .loading-progress circle:first-child { stroke:rgba(49,65,82,.13); }
.wt-loader .loading-progress circle:last-child { stroke:var(--wt-accent); }
.wt-loader .loading-progress-text { color:var(--wt-accent-deep); font-weight:750; }
.dealer-error { margin-top:12px; }
.brand-name-input { min-width:0; width:180px; padding:8px 10px; border:1px solid var(--wt-line); border-radius:7px; color:var(--wt-ink); background:#fff; font-weight:650; }
.brand-name-input:focus { outline:none; border-color:var(--wt-accent); box-shadow:0 0 0 3px rgba(49,95,189,.12); }
.refresh-control { padding:7px 10px; border:1px solid var(--wt-line); border-radius:7px; color:var(--wt-muted); background:#fff; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.refresh-control:hover:not(:disabled) { color:var(--wt-accent); border-color:rgba(49,95,189,.45); background:var(--wt-accent-soft); }
.refresh-control:disabled { cursor:default; opacity:.65; }
.last-refreshed { color:var(--wt-muted); font-size:10px; white-space:nowrap; }
.workspace-heading-actions { display:flex; align-items:center; gap:14px; }
.refresh-status { display:flex; align-items:center; gap:8px; }
@media(max-width:700px) { .workspace-heading-actions { width:100%; align-items:stretch; flex-direction:column-reverse; } .refresh-status { justify-content:flex-end; } }


.workspace-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.workspace-dashboard-card {
    width: 100%;
    min-height: 170px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .workspace-dashboard-card:hover {
        transform: translateY(-2px);
        border-color: rgba(53, 105, 184, 0.35);
        box-shadow: 0 8px 22px rgba(20, 35, 55, 0.07);
    }

    .workspace-dashboard-card.active {
        border-color: #3569b8;
        box-shadow: 0 0 0 2px rgba(53, 105, 184, 0.10);
    }

    .workspace-dashboard-card strong {
        display: block;
        margin-top: 0.4rem;
    }

.workspace-card-label {
    font-weight: 600;
}

.workspace-card-action {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.72;
}

.workspace-card-approved {
    background: linear-gradient( 135deg, rgba(40, 145, 85, 0.07), rgba(40, 145, 85, 0.02) );
    border-color: rgba(40, 145, 85, 0.14);
}

    .workspace-card-approved:hover,
    .workspace-card-approved.active {
        border-color: rgba(40, 145, 85, 0.42);
    }

.workspace-card-declined {
    background: linear-gradient( 135deg, rgba(190, 65, 65, 0.065), rgba(190, 65, 65, 0.015) );
    border-color: rgba(190, 65, 65, 0.13);
}

    .workspace-card-declined:hover,
    .workspace-card-declined.active {
        border-color: rgba(190, 65, 65, 0.4);
    }

.workspace-card-view-all {
    background: linear-gradient( 135deg, rgba(53, 105, 184, 0.055), rgba(53, 105, 184, 0.015) );
}

.workspace-results-panel {
    margin-top: 0.25rem;
}

.workspace-dashboard-back {
    margin-bottom: 0.55rem;
}

.workspace-filter-label {
    display: block;
    margin-top: 0.15rem;
    opacity: 0.7;
}

.workspace-filter-empty {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

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

@media (max-width: 620px) {
    .workspace-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   WARRANTY HUB - FINAL BRAND / WORKSPACE / REQUEST POLISH
   ============================================================ */

/* Warranty Hub sidebar branding */

.warranty-brand .brand-name {
    color: #222d39;
    font-size: 21px;
    font-weight: 800;
}

.warranty-brand .brand-product {
    margin-top: 4px;
    color: #687582;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.25;
}


/* ============================================================
   WORKSPACE DASHBOARD
   ============================================================ */

.workspace-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.workspace-dashboard-card {
    width: 100%;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .workspace-dashboard-card:hover {
        transform: translateY(-2px);
        border-color: rgba(53, 105, 184, 0.35);
        box-shadow: 0 8px 22px rgba(20, 35, 55, 0.07);
    }

    .workspace-dashboard-card.active {
        border-color: #3569b8;
        box-shadow: 0 0 0 2px rgba(53, 105, 184, 0.10);
    }

    .workspace-dashboard-card strong {
        display: block;
        margin-top: 0.4rem;
    }


/* Slightly larger card titles */

.workspace-card-label {
    display: block;
    color: #354353 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.25;
}


/* Bottom card action text */

.workspace-card-action {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--wt-muted) !important;
    font-size: 0.82rem;
    font-weight: 600;
    opacity: 0.78;
}


/* Approved remains deliberately green */

.workspace-card-approved {
    background: linear-gradient( 135deg, rgba(40, 145, 85, 0.07), rgba(40, 145, 85, 0.02) );
    border-color: rgba(40, 145, 85, 0.14);
}

    .workspace-card-approved:hover,
    .workspace-card-approved.active {
        border-color: rgba(40, 145, 85, 0.42);
    }


/* Declined remains deliberately red */

.workspace-card-declined {
    background: linear-gradient( 135deg, rgba(190, 65, 65, 0.065), rgba(190, 65, 65, 0.015) );
    border-color: rgba(190, 65, 65, 0.13);
}

    .workspace-card-declined:hover,
    .workspace-card-declined.active {
        border-color: rgba(190, 65, 65, 0.40);
    }


/* View All now matches the neutral cards */

.workspace-card-view-all {
    background: #ffffff;
    border-color: #e2e7e9;
}

    .workspace-card-view-all:hover,
    .workspace-card-view-all.active {
        border-color: rgba(53, 105, 184, 0.35);
    }


/* Workspace results */

.workspace-results-panel {
    margin-top: 0.25rem;
}

.workspace-dashboard-back {
    margin-bottom: 0.55rem;
}

.workspace-filter-label {
    display: block;
    margin-top: 0.15rem;
    opacity: 0.7;
}

.workspace-filter-empty {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


/* ============================================================
   ADMIN REQUEST CATEGORY CARDS
   ============================================================ */

/*
   Keep blue as the interaction/accent colour,
   but make the actual card content normal dark text.
*/

.request-category-card {
    color: var(--wt-ink);
}

    .request-category-card .category-kicker {
        color: var(--wt-muted);
    }

    .request-category-card strong {
        color: #172632;
    }

    .request-category-card h2 {
        color: #202833;
    }

    .request-category-card small {
        color: var(--wt-muted);
    }

    .request-category-card .category-open {
        color: #4f5c68;
    }

    .request-category-card:hover .category-open {
        color: var(--wt-accent);
    }


/* ============================================================
   RESPONSIVE WORKSPACE
   ============================================================ */

@media (max-width: 900px) {

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

@media (max-width: 620px) {

    .workspace-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.user-create-success {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(40, 145, 85, 0.20);
    border-radius: 10px;
    background: rgba(40, 145, 85, 0.06);
}

    .user-create-success strong {
        display: block;
        margin-bottom: 0.2rem;
        color: #234b34;
    }

    .user-create-success p {
        margin: 0;
        color: #52645a;
    }

.temporary-password-card {
    margin-top: 1rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(44, 104, 190, 0.18);
    border-radius: 12px;
    background: rgba(44, 104, 190, 0.055);
}

.temporary-password-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .temporary-password-heading h3 {
        margin: 0.15rem 0 0;
    }

.temporary-login-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.temporary-login-item {
    padding: 0.85rem 0.95rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.7);
}

    .temporary-login-item span {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
        color: #68717a;
    }

    .temporary-login-item strong {
        display: block;
        word-break: break-word;
    }

.temporary-password-value {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.temporary-password-note {
    margin: 0.9rem 0 0;
    color: #5b6570;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .temporary-login-grid {
        grid-template-columns: 1fr;
    }
}

.password-change-page {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.password-change-panel {
    width: 100%;
    max-width: 620px;
}

    .password-change-panel h1 {
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
    }

.password-change-intro {
    margin-bottom: 1.5rem;
    color: #66717d;
}

.password-change-panel .field {
    margin-bottom: 1rem;
}

.user-count-text {
    margin: 0.25rem 0 0;
}

.user-list-state {
    padding: 1.5rem 0;
    color: #68717a;
}

.account-list {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.account-row {
    display: grid;
    grid-template-columns: 46px minmax(200px, 1.5fr) minmax(120px, 0.7fr) minmax(180px, 1fr) minmax(180px, auto);
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(30, 45, 60, 0.09);
}

    .account-row:first-child {
        border-top: 0;
    }

.account-avatar {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e1e6eb;
    color: #40505f;
    font-size: 0.8rem;
    font-weight: 700;
}

.account-main {
    min-width: 0;
}

.account-name-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-email {
    display: block;
    margin-top: 0.2rem;
    color: #6a7580;
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-detail {
    min-width: 0;
}

.account-detail-label {
    display: block;
    margin-bottom: 0.2rem;
    color: #7a8490;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-detail strong {
    font-size: 0.88rem;
}

.account-statuses {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.account-status,
.password-required-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.account-status-active {
    background: rgba(37, 145, 84, 0.09);
    color: #25734a;
}

.account-status-inactive {
    background: rgba(165, 55, 55, 0.08);
    color: #9a3f3f;
}

.password-required-badge {
    background: rgba(44, 104, 190, 0.08);
    color: #315f9f;
}

@media (max-width: 1000px) {
    .account-row {
        grid-template-columns: 46px 1fr auto;
    }

    .account-detail {
        display: none;
    }
}

@media (max-width: 700px) {
    .account-row {
        grid-template-columns: 42px 1fr;
    }

    .account-statuses {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* User administration - final row layout */

.account-row {
    grid-template-columns: minmax(240px, 1.6fr) minmax(150px, auto) minmax(120px, 0.7fr) minmax(190px, 1fr) auto;
}

.account-statuses {
    justify-content: flex-start;
}

.account-actions {
    display: flex;
    justify-content: flex-end;
}

.account-edit-button {
    min-width: 74px;
}

.account-edit-panel {
    margin: 0 0 0.75rem;
    padding: 1.2rem;
    border: 1px solid rgba(44, 104, 190, 0.16);
    border-radius: 10px;
    background: rgba(44, 104, 190, 0.035);
}

.account-edit-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .account-edit-heading h3 {
        margin: 0.15rem 0 0;
    }

.account-edit-success {
    margin-top: 1rem;
    padding: 0.8rem 0.95rem;
    border-radius: 8px;
    background: rgba(37, 145, 84, 0.08);
    color: #25734a;
    font-weight: 600;
}

.password-admin-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 1rem 1.05rem;
    border-top: 1px solid rgba(30, 45, 60, 0.09);
}

.password-admin-copy strong {
    display: block;
    margin-bottom: 0.2rem;
}

.password-admin-copy p {
    margin: 0;
    color: #68717a;
    font-size: 0.88rem;
}

.password-reset-unavailable {
    color: #8a5b38;
    font-size: 0.82rem;
    font-weight: 600;
}

.password-reset-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 0.75rem;
    padding: 1rem 1.05rem;
    border-radius: 9px;
    background: rgba(44, 104, 190, 0.055);
}

    .password-reset-confirm p {
        margin: 0.25rem 0 0;
        color: #68717a;
        font-size: 0.88rem;
    }

.password-reset-confirm-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.6rem;
}

@media (max-width: 800px) {
    .password-admin-section,
    .password-reset-confirm {
        align-items: stretch;
        flex-direction: column;
    }

    .password-reset-confirm-actions {
        justify-content: flex-end;
    }
}

/* ============================================================
   WARRANTY HUB - FINAL SIDEBAR / STATUS POLISH
   ============================================================ */

/* ------------------------------------------------------------
   Sidebar signed-in user
   Remove avatar spacing and align the user details cleanly.
   ------------------------------------------------------------ */

.sidebar-footer {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 16px 18px 12px;
}

.framework-credit {
    padding: 0 18px 16px;
}


/* ------------------------------------------------------------
   Selected navigation item
   Slightly stronger royal-blue highlight.
   Previous background alpha: .11
   New background alpha: .16
   ------------------------------------------------------------ */

.nav-item.active {
    color: #214d9d;
    background: rgba(49, 95, 189, 0.16);
    box-shadow: inset 0 0 0 1px rgba(49, 95, 189, 0.15);
}

    .nav-item.active::before {
        background: #315fbd;
    }

    .nav-item.active .nav-icon {
        color: #315fbd;
    }


/* ------------------------------------------------------------
   Approved Workspace card
   Increase green tint by approximately 5 percentage points.
   ------------------------------------------------------------ */

.workspace-card-approved {
    background: linear-gradient( 135deg, rgba(40, 145, 85, 0.12), rgba(40, 145, 85, 0.07) );
    border-color: rgba(40, 145, 85, 0.19);
}

    .workspace-card-approved:hover,
    .workspace-card-approved.active {
        border-color: rgba(40, 145, 85, 0.47);
        box-shadow: 0 8px 22px rgba(40, 145, 85, 0.08);
    }


/* ------------------------------------------------------------
   Declined Workspace card
   Increase red tint by approximately 5 percentage points.
   ------------------------------------------------------------ */

.workspace-card-declined {
    background: linear-gradient( 135deg, rgba(190, 65, 65, 0.115), rgba(190, 65, 65, 0.065) );
    border-color: rgba(190, 65, 65, 0.18);
}

    .workspace-card-declined:hover,
    .workspace-card-declined.active {
        border-color: rgba(190, 65, 65, 0.45);
        box-shadow: 0 8px 22px rgba(190, 65, 65, 0.075);
    }