/* /Pages/Index.razor.rz.scp.css */
.dashboard-page[b-vfqodg9j9t] {
    width: 100%;
}

.dashboard-header[b-vfqodg9j9t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.dashboard-heading[b-vfqodg9j9t] {
    min-width: 0;
}

.eyebrow[b-vfqodg9j9t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.45px;
}

.eyebrow-dot[b-vfqodg9j9t] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}

.dashboard-heading h1[b-vfqodg9j9t] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}

.dashboard-heading p[b-vfqodg9j9t] {
    margin: 0;
    color: #788591;
    font-size: 12px;
    line-height: 1.6;
}

.dashboard-actions[b-vfqodg9j9t] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.preview-pill[b-vfqodg9j9t],
.panel-meta[b-vfqodg9j9t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #232c34;
    border-radius: 10px;
    background: rgba(13, 18, 22, 0.82);
    color: #687681;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.preview-dot[b-vfqodg9j9t] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.07);
}

.primary-action[b-vfqodg9j9t] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient(180deg, #4bd6c4, #35c5b2);
    color: #06110f;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}

    .primary-action:hover[b-vfqodg9j9t] {
        color: #06110f;
        transform: translateY(-1px);
        filter: brightness(1.035);
    }

.action-icon[b-vfqodg9j9t] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}

    .action-icon svg[b-vfqodg9j9t] {
        width: 14px;
        height: 14px;
    }

.kpi-grid[b-vfqodg9j9t] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.kpi-card[b-vfqodg9j9t],
.panel[b-vfqodg9j9t] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 55%), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}

.kpi-card[b-vfqodg9j9t] {
    min-height: 154px;
    padding: 18px;
    border-radius: 14px;
}

    .kpi-card[b-vfqodg9j9t]::before,
    .panel[b-vfqodg9j9t]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.45;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    }

    .kpi-card.kpi-accent[b-vfqodg9j9t] {
        border-color: rgba(59, 208, 189, 0.22);
        background: radial-gradient(circle at 95% 0%, rgba(59, 208, 189, 0.075), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 55%), var(--surface);
    }

        .kpi-card.kpi-accent[b-vfqodg9j9t]::before {
            opacity: 1;
            background: linear-gradient(90deg, transparent, rgba(59, 208, 189, 0.78), transparent);
        }

.kpi-topline[b-vfqodg9j9t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.kpi-label[b-vfqodg9j9t] {
    color: #6f7c87;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.58px;
    text-transform: uppercase;
}

.kpi-icon[b-vfqodg9j9t] {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.055);
    color: #54cdbd;
}

.kpi-icon-warning[b-vfqodg9j9t] {
    border-color: rgba(245, 195, 107, 0.14);
    background: rgba(245, 195, 107, 0.055);
    color: #d9ad62;
}

.kpi-icon svg[b-vfqodg9j9t] {
    width: 15px;
    height: 15px;
}

.kpi-value[b-vfqodg9j9t] {
    margin-bottom: 11px;
    color: #f6f8f9;
    font-size: 32px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -1.15px;
}

.kpi-unit[b-vfqodg9j9t] {
    margin-left: 3px;
    color: #8f9ba5;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.2px;
}

.kpi-footer[b-vfqodg9j9t] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #56636e;
    font-size: 9px;
}

.kpi-positive[b-vfqodg9j9t] {
    color: #61cdbf;
    font-weight: 700;
}

.kpi-warning[b-vfqodg9j9t] {
    color: #d8ab5c;
    font-weight: 700;
}

.dashboard-grid[b-vfqodg9j9t] {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.dashboard-grid-primary[b-vfqodg9j9t] {
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.72fr);
}

.dashboard-grid-secondary[b-vfqodg9j9t] {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
}

.panel[b-vfqodg9j9t] {
    border-radius: 15px;
    padding: 19px;
}

.panel-header[b-vfqodg9j9t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.panel-kicker[b-vfqodg9j9t] {
    margin-bottom: 5px;
    color: #53616c;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

.panel-header h2[b-vfqodg9j9t] {
    margin: 0 0 4px;
    color: #eef2f4;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.25px;
}

.panel-header p[b-vfqodg9j9t] {
    margin: 0;
    color: #65727d;
    font-size: 9px;
    line-height: 1.5;
}

.chart-wrap[b-vfqodg9j9t] {
    position: relative;
    width: 100%;
}

.chart-wrap-large[b-vfqodg9j9t] {
    height: 280px;
}

.chart-wrap-doughnut[b-vfqodg9j9t] {
    height: 210px;
    max-width: 260px;
    margin: 0 auto;
}

.chart-wrap-trend[b-vfqodg9j9t] {
    height: 235px;
}

.aging-legend[b-vfqodg9j9t] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #20282f;
}

    .aging-legend > div[b-vfqodg9j9t] {
        display: grid;
        grid-template-columns: 8px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        color: #6d7a85;
        font-size: 9px;
    }

    .aging-legend strong[b-vfqodg9j9t] {
        color: #cbd3d7;
        font-size: 9px;
    }

.legend-dot[b-vfqodg9j9t] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.legend-one[b-vfqodg9j9t] {
    background: #3bd0bd;
}

.legend-two[b-vfqodg9j9t] {
    background: #728a95;
}

.legend-three[b-vfqodg9j9t] {
    background: #d4a45a;
}

.trend-summary[b-vfqodg9j9t] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

    .trend-summary strong[b-vfqodg9j9t] {
        color: #dff8f4;
        font-size: 15px;
        font-weight: 720;
    }

    .trend-summary span[b-vfqodg9j9t] {
        color: #56636e;
        font-size: 8px;
    }

.attention-list[b-vfqodg9j9t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attention-item[b-vfqodg9j9t] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid #202931;
    border-radius: 11px;
    background: #0c1115;
}

.attention-icon[b-vfqodg9j9t] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.06);
    color: #5dcfbe;
    font-size: 9px;
    font-weight: 850;
}

    .attention-icon.attention-warning[b-vfqodg9j9t] {
        background: rgba(245, 195, 107, 0.07);
        color: #dab163;
    }

.attention-item > div[b-vfqodg9j9t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attention-item strong[b-vfqodg9j9t] {
    color: #cfd6da;
    font-size: 9px;
    font-weight: 700;
}

.attention-item span:not(.attention-icon):not(.attention-count)[b-vfqodg9j9t] {
    color: #596671;
    font-size: 8px;
    line-height: 1.4;
}

.attention-count[b-vfqodg9j9t] {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #27313a;
    border-radius: 7px;
    background: #10161b;
    color: #91a0aa;
    font-size: 9px;
    font-weight: 800;
}

.vehicles-panel[b-vfqodg9j9t] {
    margin-bottom: 14px;
}

.table-header[b-vfqodg9j9t] {
    align-items: center;
}

.secondary-action[b-vfqodg9j9t] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #76d8cc;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
}

    .secondary-action:hover[b-vfqodg9j9t] {
        color: #9be8df;
    }

    .secondary-action svg[b-vfqodg9j9t] {
        width: 13px;
        height: 13px;
    }

.vehicle-table-wrap[b-vfqodg9j9t] {
    width: 100%;
    overflow-x: auto;
}

.vehicle-table[b-vfqodg9j9t] {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

    .vehicle-table th[b-vfqodg9j9t] {
        padding: 9px 12px;
        text-align: left;
        border-bottom: 1px solid #222a31;
        color: #4f5d68;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.65px;
        text-transform: uppercase;
    }

    .vehicle-table td[b-vfqodg9j9t] {
        padding: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.038);
        color: #7e8b96;
        font-size: 9px;
        vertical-align: middle;
    }

    .vehicle-table tbody tr:last-child td[b-vfqodg9j9t] {
        border-bottom: 0;
    }

    .vehicle-table tbody tr:hover[b-vfqodg9j9t] {
        background: rgba(255, 255, 255, 0.012);
    }

.vehicle-cell[b-vfqodg9j9t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicle-avatar[b-vfqodg9j9t] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid #273139;
    border-radius: 9px;
    background: #0c1115;
    color: #5f6e78;
    font-size: 9px;
    font-weight: 800;
}

.vehicle-cell > div[b-vfqodg9j9t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vehicle-cell strong[b-vfqodg9j9t] {
    color: #d4dade;
    font-size: 9px;
    font-weight: 700;
}

.vehicle-cell span:not(.vehicle-avatar)[b-vfqodg9j9t] {
    color: #53606b;
    font-size: 8px;
}

.stock-number[b-vfqodg9j9t] {
    color: #aeb9bf;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 8px;
}

.stage-pill[b-vfqodg9j9t],
.status-pill[b-vfqodg9j9t] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 700;
}

.stage-pill[b-vfqodg9j9t] {
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(59, 208, 189, 0.14);
    background: rgba(59, 208, 189, 0.05);
    color: #75d8cb;
}

.stage-warning[b-vfqodg9j9t] {
    border-color: rgba(245, 195, 107, 0.15);
    background: rgba(245, 195, 107, 0.05);
    color: #d5aa60;
}

.stage-ready[b-vfqodg9j9t] {
    border-color: rgba(118, 216, 204, 0.18);
    background: rgba(118, 216, 204, 0.07);
    color: #96e3da;
}

.status-pill[b-vfqodg9j9t] {
    gap: 6px;
    color: #74818b;
}

    .status-pill > span[b-vfqodg9j9t] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

.status-active > span[b-vfqodg9j9t] {
    background: #3bd0bd;
}

.status-warning > span[b-vfqodg9j9t] {
    background: #d7a95d;
}

.status-ready > span[b-vfqodg9j9t] {
    background: #80ddd1;
}

.time-normal[b-vfqodg9j9t],
.time-warning[b-vfqodg9j9t] {
    font-size: 9px;
    font-weight: 700;
}

.time-normal[b-vfqodg9j9t] {
    color: #aeb8be;
}

.time-warning[b-vfqodg9j9t] {
    color: #d7a95d;
}

.preview-note[b-vfqodg9j9t] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid rgba(59, 208, 189, 0.12);
    border-radius: 10px;
    background: rgba(59, 208, 189, 0.035);
    color: #62717b;
    font-size: 8px;
    line-height: 1.55;
}

.preview-note-icon[b-vfqodg9j9t] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(59, 208, 189, 0.09);
    color: #69d6c8;
    font-size: 9px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .kpi-grid[b-vfqodg9j9t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid-primary[b-vfqodg9j9t],
    .dashboard-grid-secondary[b-vfqodg9j9t] {
        grid-template-columns: 1fr;
    }

    .chart-wrap-doughnut[b-vfqodg9j9t] {
        max-width: 300px;
    }
}

@media (max-width: 720px) {
    .dashboard-header[b-vfqodg9j9t] {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .dashboard-actions[b-vfqodg9j9t] {
        width: 100%;
        justify-content: space-between;
    }

    .kpi-grid[b-vfqodg9j9t] {
        grid-template-columns: 1fr;
    }

    .kpi-card[b-vfqodg9j9t] {
        min-height: 140px;
    }

    .panel[b-vfqodg9j9t] {
        padding: 16px;
    }

    .chart-wrap-large[b-vfqodg9j9t],
    .chart-wrap-trend[b-vfqodg9j9t] {
        height: 230px;
    }
}

@media (max-width: 480px) {
    .dashboard-actions[b-vfqodg9j9t] {
        align-items: stretch;
        flex-direction: column;
    }

    .preview-pill[b-vfqodg9j9t],
    .primary-action[b-vfqodg9j9t] {
        justify-content: center;
    }

    .panel-header[b-vfqodg9j9t] {
        flex-direction: column;
    }

    .trend-summary[b-vfqodg9j9t] {
        align-items: flex-start;
    }
}


/* ============================================================
   READABILITY / TYPOGRAPHY PASS
   ============================================================ */

/* Header */
.eyebrow[b-vfqodg9j9t] {
    font-size: 10px;
}

.dashboard-heading p[b-vfqodg9j9t] {
    font-size: 13px;
}

.preview-pill[b-vfqodg9j9t],
.panel-meta[b-vfqodg9j9t] {
    font-size: 11px;
}

.primary-action[b-vfqodg9j9t] {
    font-size: 12px;
}


/* KPI cards */
.kpi-label[b-vfqodg9j9t] {
    font-size: 11px;
}

.kpi-footer[b-vfqodg9j9t] {
    font-size: 11px;
}

.kpi-unit[b-vfqodg9j9t] {
    font-size: 16px;
}


/* Panel headers */
.panel-kicker[b-vfqodg9j9t] {
    font-size: 10px;
}

.panel-header h2[b-vfqodg9j9t] {
    font-size: 16px;
}

.panel-header p[b-vfqodg9j9t] {
    font-size: 11px;
}


/* Aging legend */
.aging-legend > div[b-vfqodg9j9t] {
    font-size: 11px;
}

.aging-legend strong[b-vfqodg9j9t] {
    font-size: 11px;
}


/* Trend summary */
.trend-summary strong[b-vfqodg9j9t] {
    font-size: 16px;
}

.trend-summary span[b-vfqodg9j9t] {
    font-size: 10px;
}


/* Attention queue */
.attention-icon[b-vfqodg9j9t] {
    font-size: 10px;
}

.attention-item strong[b-vfqodg9j9t] {
    font-size: 11px;
}

.attention-item span:not(.attention-icon):not(.attention-count)[b-vfqodg9j9t] {
    font-size: 10px;
}

.attention-count[b-vfqodg9j9t] {
    min-width: 27px;
    height: 27px;
    font-size: 11px;
}


/* Secondary actions */
.secondary-action[b-vfqodg9j9t] {
    font-size: 11px;
}


/* Vehicle table */
.vehicle-table th[b-vfqodg9j9t] {
    font-size: 10px;
}

.vehicle-table td[b-vfqodg9j9t] {
    font-size: 11px;
}

.vehicle-avatar[b-vfqodg9j9t] {
    font-size: 11px;
}

.vehicle-cell strong[b-vfqodg9j9t] {
    font-size: 11px;
}

.vehicle-cell span:not(.vehicle-avatar)[b-vfqodg9j9t] {
    font-size: 10px;
}

.stock-number[b-vfqodg9j9t] {
    font-size: 10px;
}


/* Pills / statuses */
.stage-pill[b-vfqodg9j9t],
.status-pill[b-vfqodg9j9t] {
    font-size: 10px;
}

.stage-pill[b-vfqodg9j9t] {
    min-height: 26px;
    padding: 0 10px;
}

.time-normal[b-vfqodg9j9t],
.time-warning[b-vfqodg9j9t] {
    font-size: 11px;
}


/* Bottom dashboard note */
.preview-note[b-vfqodg9j9t] {
    font-size: 10px;
}

.preview-note-icon[b-vfqodg9j9t] {
    font-size: 10px;
}
/* /Pages/Login.razor.rz.scp.css */
.login-page[b-wsczwburpv] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0d10;
    color: #ffffff;
    padding: 24px;
}

.login-container[b-wsczwburpv] {
    width: 100%;
    max-width: 400px;
}

.brand[b-wsczwburpv] {
    display: flex;
    justify-content: center;
    margin-bottom: 42px;
}

.brand-name[b-wsczwburpv] {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #ffffff;
}

.login-header[b-wsczwburpv] {
    text-align: center;
    margin-bottom: 32px;
}

    .login-header h1[b-wsczwburpv] {
        margin: 0 0 10px 0;
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -0.6px;
    }

    .login-header p[b-wsczwburpv] {
        margin: 0;
        font-size: 15px;
        color: #8f96a3;
    }

.login-actions[b-wsczwburpv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-button[b-wsczwburpv] {
    position: relative;
    height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #15181d;
    border: 1px solid #2a2e35;
    border-radius: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .login-button:hover[b-wsczwburpv] {
        background: #1b1f25;
        border-color: #3a4049;
        color: #ffffff;
    }

    .login-button:active[b-wsczwburpv] {
        transform: scale(0.99);
    }

.provider-icon[b-wsczwburpv] {
    position: absolute;
    left: 18px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .provider-icon svg[b-wsczwburpv] {
        width: 20px;
        height: 20px;
    }

.login-footer[b-wsczwburpv] {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: #626975;
}

@media (max-width: 500px) {
    .login-page[b-wsczwburpv] {
        align-items: flex-start;
        padding-top: 110px;
    }

    .login-container[b-wsczwburpv] {
        max-width: 100%;
    }

    .brand[b-wsczwburpv] {
        margin-bottom: 36px;
    }

    .login-header h1[b-wsczwburpv] {
        font-size: 26px;
    }
}
/* /Pages/Management/Reports.razor.rz.scp.css */
/* ============================================================
   RECONO REPORTS
   ============================================================ */

.reports-page[b-t0288n5aat] {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   HEADER
   ============================================================ */

.reports-header[b-t0288n5aat] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.reports-heading[b-t0288n5aat] {
    min-width: 0;
}


.eyebrow[b-t0288n5aat] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.45px;
}


.eyebrow-dot[b-t0288n5aat] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}


.reports-heading h1[b-t0288n5aat] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp( 28px, 3vw, 38px );
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}


.reports-heading p[b-t0288n5aat] {
    max-width: 760px;
    margin: 0;
    color: #788591;
    font-size: 14px;
    line-height: 1.6;
}


.header-actions[b-t0288n5aat] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}


.secondary-action[b-t0288n5aat] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    cursor: pointer;
    border: 1px solid #28323a;
    border-radius: 9px;
    background: #0d1216;
    color: #87949d;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
}


    .secondary-action:hover:not(:disabled)[b-t0288n5aat] {
        border-color: #35414a;
        color: #b1bbc0;
    }


    .secondary-action:disabled[b-t0288n5aat] {
        cursor: default;
        opacity: 0.45;
    }


    .secondary-action svg[b-t0288n5aat] {
        width: 14px;
        height: 14px;
    }


/* ============================================================
   FILTER BAR
   ============================================================ */

.report-filter-bar[b-t0288n5aat] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 14px;
    padding: 14px 15px;
    border: 1px solid #202931;
    border-radius: 13px;
    background: linear-gradient( 90deg, rgba(59, 208, 189, 0.025), transparent 34% ), rgba(15, 20, 24, 0.86);
}


.filter-heading[b-t0288n5aat] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


    .filter-heading > span[b-t0288n5aat] {
        color: #596671;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.65px;
        text-transform: uppercase;
    }


    .filter-heading > strong[b-t0288n5aat] {
        color: #d6dde0;
        font-size: 12px;
        font-weight: 700;
    }


.filter-controls[b-t0288n5aat] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}


.filter-control[b-t0288n5aat] {
    min-width: 155px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


    .filter-control.date-control[b-t0288n5aat] {
        min-width: 145px;
    }


    .filter-control label[b-t0288n5aat] {
        color: #66737e;
        font-size: 10px;
        font-weight: 700;
    }


    .filter-control select[b-t0288n5aat],
    .filter-control input[b-t0288n5aat] {
        width: 100%;
        height: 37px;
        outline: none;
        border: 1px solid #2a343c;
        border-radius: 8px;
        background: #0a0e12;
        color: #c3ccd1;
        font-family: inherit;
        font-size: 11px;
    }


    .filter-control select[b-t0288n5aat] {
        appearance: none;
        cursor: pointer;
        padding: 0 31px 0 10px;
        background-image: linear-gradient( 45deg, transparent 50%, #61717c 50% ), linear-gradient( 135deg, #61717c 50%, transparent 50% );
        background-position: calc(100% - 14px) 16px, calc(100% - 10px) 16px;
        background-size: 4px 4px, 4px 4px;
        background-repeat: no-repeat;
        background-color: #0a0e12;
    }


    .filter-control input[b-t0288n5aat] {
        padding: 0 9px;
        color-scheme: dark;
    }


        .filter-control select:focus[b-t0288n5aat],
        .filter-control input:focus[b-t0288n5aat] {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.07);
        }


.apply-filter-button[b-t0288n5aat] {
    min-height: 37px;
    padding: 0 12px;
    cursor: pointer;
    border: 1px solid rgba(59, 208, 189, 0.20);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.07);
    color: #77d8cb;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
}


    .apply-filter-button:hover:not(:disabled)[b-t0288n5aat] {
        background: rgba(59, 208, 189, 0.11);
    }


    .apply-filter-button:disabled[b-t0288n5aat] {
        opacity: 0.55;
    }


.refresh-indicator[b-t0288n5aat] {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 5px;
    color: #63717c;
    font-size: 10px;
}


.mini-spinner[b-t0288n5aat] {
    width: 12px;
    height: 12px;
    border: 2px solid #273139;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: recono-reports-spin-b-t0288n5aat 0.8s linear infinite;
}


/* ============================================================
   KPI CARDS
   ============================================================ */

.kpi-grid[b-t0288n5aat] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}


.kpi-card[b-t0288n5aat] {
    position: relative;
    min-width: 0;
    min-height: 132px;
    overflow: hidden;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}


    .kpi-card[b-t0288n5aat]::before,
    .report-panel[b-t0288n5aat]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.43;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent );
    }


.kpi-accent[b-t0288n5aat] {
    border-color: rgba(59, 208, 189, 0.22);
    background: radial-gradient( circle at 95% 0%, rgba(59, 208, 189, 0.07), transparent 43% ), var(--surface);
}


    .kpi-accent[b-t0288n5aat]::before {
        opacity: 1;
        background: linear-gradient( 90deg, transparent, rgba(59, 208, 189, 0.75), transparent );
    }


.kpi-warning[b-t0288n5aat] {
    border-color: rgba(215, 171, 94, 0.19);
}


.kpi-topline[b-t0288n5aat] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 13px;
}


    .kpi-topline > span:first-child[b-t0288n5aat] {
        color: #697681;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.45px;
        text-transform: uppercase;
    }


.kpi-icon[b-t0288n5aat] {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.05);
    color: #54cdbd;
}


    .kpi-icon.neutral[b-t0288n5aat] {
        border-color: rgba(145, 160, 171, 0.13);
        background: rgba(145, 160, 171, 0.045);
        color: #85939d;
    }


    .kpi-icon.warning[b-t0288n5aat] {
        border-color: rgba(215, 171, 94, 0.15);
        background: rgba(215, 171, 94, 0.05);
        color: #d5aa60;
    }


    .kpi-icon svg[b-t0288n5aat] {
        width: 14px;
        height: 14px;
    }


.kpi-card > strong[b-t0288n5aat] {
    display: block;
    margin-bottom: 6px;
    color: #f4f7f8;
    font-size: 27px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.8px;
}


.kpi-card > span[b-t0288n5aat] {
    color: #5b6873;
    font-size: 10px;
    line-height: 1.4;
}


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

.report-panel[b-t0288n5aat],
.state-panel[b-t0288n5aat] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


.report-panel[b-t0288n5aat] {
    margin-bottom: 14px;
    padding: 18px;
}


.panel-header[b-t0288n5aat] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #20282f;
}


.panel-kicker[b-t0288n5aat] {
    display: block;
    margin-bottom: 4px;
    color: #53616c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.panel-header h2[b-t0288n5aat] {
    margin: 0 0 4px;
    color: #edf1f3;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}


.panel-header p[b-t0288n5aat] {
    max-width: 680px;
    margin: 0;
    color: #65727d;
    font-size: 11px;
    line-height: 1.5;
}


.panel-period[b-t0288n5aat] {
    flex: 0 0 auto;
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #28323a;
    border-radius: 999px;
    background: #0d1216;
    color: #75828c;
    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   CHARTS
   ============================================================ */

.charts-grid[b-t0288n5aat] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


    .charts-grid .report-panel[b-t0288n5aat] {
        margin-bottom: 14px;
    }


.chart-shell[b-t0288n5aat] {
    position: relative;
    width: 100%;
    height: 270px;
}


    .chart-shell canvas[b-t0288n5aat],
    .stage-chart-shell canvas[b-t0288n5aat] {
        width: 100% !important;
        height: 100% !important;
    }


.chart-empty[b-t0288n5aat],
.panel-empty[b-t0288n5aat] {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}


    .chart-empty strong[b-t0288n5aat],
    .panel-empty strong[b-t0288n5aat] {
        margin-bottom: 5px;
        color: #b8c2c7;
        font-size: 12px;
    }


    .chart-empty span[b-t0288n5aat],
    .panel-empty span[b-t0288n5aat] {
        max-width: 420px;
        color: #586570;
        font-size: 10px;
        line-height: 1.5;
    }


.compact-empty[b-t0288n5aat] {
    min-height: 150px;
}


.throughput-summary[b-t0288n5aat] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


    .throughput-summary > span[b-t0288n5aat] {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0 8px;
        border: 1px solid #28323a;
        border-radius: 7px;
        background: #0d1216;
        color: #62707b;
        font-size: 9px;
    }


    .throughput-summary strong[b-t0288n5aat] {
        color: #b8c3c8;
        font-size: 10px;
    }


/* ============================================================
   STAGE PERFORMANCE
   ============================================================ */

.stage-panel-header[b-t0288n5aat] {
    align-items: center;
}


.bottleneck-callout[b-t0288n5aat] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid rgba(215, 171, 94, 0.15);
    border-radius: 9px;
    background: rgba(215, 171, 94, 0.04);
}


    .bottleneck-callout span[b-t0288n5aat] {
        color: #78694f;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.45px;
        text-transform: uppercase;
    }


    .bottleneck-callout strong[b-t0288n5aat] {
        color: #c9a865;
        font-size: 10px;
    }


.stage-layout[b-t0288n5aat] {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.6fr);
    gap: 18px;
    align-items: stretch;
}


.stage-chart-wrap[b-t0288n5aat] {
    min-width: 0;
    padding: 13px;
    border: 1px solid #222b32;
    border-radius: 11px;
    background: #0c1115;
}


.stage-chart-shell[b-t0288n5aat] {
    position: relative;
    width: 100%;
    height: 310px;
}


/* ============================================================
   TABLES
   ============================================================ */

.report-table-wrap[b-t0288n5aat] {
    width: 100%;
    overflow-x: auto;
}


.report-table[b-t0288n5aat] {
    width: 100%;
    border-collapse: collapse;
}


.stage-table[b-t0288n5aat] {
    min-width: 650px;
}


.aging-table[b-t0288n5aat] {
    min-width: 990px;
}


.report-table th[b-t0288n5aat] {
    padding: 10px 11px;
    text-align: left;
    border-bottom: 1px solid #222a31;
    color: #596671;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}


.report-table td[b-t0288n5aat] {
    padding: 12px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.038);
    color: #818e98;
    font-size: 11px;
    vertical-align: middle;
}


.report-table tbody tr:last-child td[b-t0288n5aat] {
    border-bottom: 0;
}


.report-table tbody tr[b-t0288n5aat] {
    transition: background 0.12s ease;
}


    .report-table tbody tr:hover[b-t0288n5aat] {
        background: rgba(255, 255, 255, 0.013);
    }


.stage-warning-row[b-t0288n5aat] {
    background: rgba(215, 171, 94, 0.018);
}


.stage-name-cell[b-t0288n5aat] {
    min-width: 125px;
    display: flex;
    align-items: center;
    gap: 8px;
}


    .stage-name-cell strong[b-t0288n5aat] {
        color: #cbd3d7;
        font-size: 11px;
    }


.stage-health-dot[b-t0288n5aat] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
}


    .stage-health-dot.healthy[b-t0288n5aat] {
        background: #3bd0bd;
    }


    .stage-health-dot.warning[b-t0288n5aat] {
        background: #d6a95d;
    }


    .stage-health-dot.danger[b-t0288n5aat] {
        background: #d97a7a;
    }


.stage-duration[b-t0288n5aat],
.age-value[b-t0288n5aat],
.stage-age[b-t0288n5aat] {
    color: #c1cbd0;
}


.warning-text[b-t0288n5aat] {
    color: #d4aa61 !important;
}


.danger-text[b-t0288n5aat] {
    color: #dd8888 !important;
}


.count-badge[b-t0288n5aat] {
    min-width: 25px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid #29333b;
    border-radius: 999px;
    background: #0e1418;
    color: #77858f;
    font-size: 9px;
    font-weight: 800;
}


    .count-badge.warning[b-t0288n5aat] {
        border-color: rgba(215, 171, 94, 0.15);
        background: rgba(215, 171, 94, 0.045);
        color: #d0a65f;
    }


/* ============================================================
   AGING SUMMARY
   ============================================================ */

.aging-grid[b-t0288n5aat] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
}


    .aging-grid .report-panel[b-t0288n5aat] {
        margin-bottom: 14px;
    }


.aging-buckets[b-t0288n5aat] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}


.aging-bucket[b-t0288n5aat] {
    min-width: 0;
    padding: 12px;
    border: 1px solid #222c33;
    border-radius: 10px;
    background: #0c1115;
}


.aging-bucket-topline[b-t0288n5aat] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}


    .aging-bucket-topline span[b-t0288n5aat] {
        color: #6d7a84;
        font-size: 10px;
        font-weight: 700;
    }


    .aging-bucket-topline strong[b-t0288n5aat] {
        color: #d6dde0;
        font-size: 17px;
        font-weight: 720;
    }


.aging-progress[b-t0288n5aat] {
    width: 100%;
    height: 5px;
    overflow: hidden;
    margin-bottom: 7px;
    border-radius: 999px;
    background: #192127;
}


    .aging-progress > span[b-t0288n5aat] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #66747e;
    }


.aging-bucket.normal .aging-progress > span[b-t0288n5aat] {
    background: #3ba99a;
}


.aging-bucket.warning .aging-progress > span[b-t0288n5aat] {
    background: #b28d4e;
}


.aging-bucket.danger .aging-progress > span[b-t0288n5aat],
.aging-bucket.critical .aging-progress > span[b-t0288n5aat] {
    background: #a75e5e;
}


.aging-bucket small[b-t0288n5aat] {
    color: #505d67;
    font-size: 9px;
}


/* ============================================================
   ATTENTION LIST
   ============================================================ */

.attention-count[b-t0288n5aat] {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #28323a;
    border-radius: 999px;
    background: #0d1216;
    color: #78858f;
    font-size: 9px;
    font-weight: 700;
}


.attention-list[b-t0288n5aat] {
    display: flex;
    flex-direction: column;
}


.attention-item[b-t0288n5aat] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 13px;
    padding: 11px 3px;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
}


    .attention-item:last-child[b-t0288n5aat] {
        border-bottom: 0;
    }


    .attention-item:hover[b-t0288n5aat] {
        background: rgba(255, 255, 255, 0.012);
    }


    .attention-item > svg[b-t0288n5aat] {
        width: 15px;
        height: 15px;
        color: #4f5c66;
    }


.attention-vehicle[b-t0288n5aat] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


    .attention-vehicle strong[b-t0288n5aat] {
        overflow: hidden;
        color: #cdd5d9;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .attention-vehicle span[b-t0288n5aat] {
        color: #596671;
        font-size: 9px;
    }


.attention-age[b-t0288n5aat] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}


    .attention-age strong[b-t0288n5aat] {
        font-size: 11px;
    }


    .attention-age span[b-t0288n5aat] {
        color: #596671;
        font-size: 9px;
    }


/* ============================================================
   AGING TABLE
   ============================================================ */

.aging-table-header[b-t0288n5aat] {
    align-items: center;
}


.aging-legend[b-t0288n5aat] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #65727c;
    font-size: 9px;
}


    .aging-legend > span[b-t0288n5aat] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }


.legend-dot[b-t0288n5aat] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3ba99a;
}


    .legend-dot.warning[b-t0288n5aat] {
        background: #b28d4e;
    }


    .legend-dot.danger[b-t0288n5aat] {
        background: #a75e5e;
    }


.vehicle-name[b-t0288n5aat] {
    color: #cfd7da;
    font-size: 11px;
}


.stock-vin-cell[b-t0288n5aat] {
    min-width: 145px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


    .stock-vin-cell strong[b-t0288n5aat] {
        color: #b8c2c7;
        font-size: 10px;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }


    .stock-vin-cell span[b-t0288n5aat] {
        color: #53606b;
        font-size: 9px;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }


.stage-pill[b-t0288n5aat] {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border: 1px solid rgba(59, 208, 189, 0.12);
    border-radius: 999px;
    background: rgba(59, 208, 189, 0.04);
    color: #73d2c6;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}


.date-text[b-t0288n5aat] {
    color: #687681;
    font-size: 10px;
    white-space: nowrap;
}


.table-action-cell[b-t0288n5aat] {
    width: 1%;
    text-align: right;
}


.open-vehicle-button[b-t0288n5aat] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid #28323a;
    border-radius: 7px;
    background: #0d1216;
    color: #687681;
}


    .open-vehicle-button:hover[b-t0288n5aat] {
        border-color: rgba(59, 208, 189, 0.20);
        color: #77d7ca;
    }


    .open-vehicle-button svg[b-t0288n5aat] {
        width: 13px;
        height: 13px;
    }


/* ============================================================
   LOADING / ERROR
   ============================================================ */

.state-panel[b-t0288n5aat] {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}


.loading-spinner[b-t0288n5aat] {
    width: 31px;
    height: 31px;
    margin-bottom: 10px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: recono-reports-spin-b-t0288n5aat 0.8s linear infinite;
}


@keyframes recono-reports-spin-b-t0288n5aat {
    to {
        transform: rotate(360deg);
    }
}


.state-panel > strong[b-t0288n5aat] {
    color: #d8dfe2;
    font-size: 13px;
}


.state-panel > span[b-t0288n5aat] {
    margin-top: 4px;
    color: #5e6b75;
    font-size: 11px;
}


.state-icon[b-t0288n5aat] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 11px;
    border: 1px solid rgba(226, 93, 93, 0.18);
    border-radius: 10px;
    background: rgba(198, 66, 66, 0.055);
    color: #df8585;
    font-size: 13px;
    font-weight: 850;
}


.error-state h2[b-t0288n5aat] {
    margin: 0 0 6px;
    color: #dce2e5;
    font-size: 15px;
}


.error-state p[b-t0288n5aat] {
    max-width: 540px;
    margin: 0 0 14px;
    color: #6b7882;
    font-size: 11px;
    line-height: 1.5;
}


.state-action[b-t0288n5aat] {
    min-height: 35px;
    padding: 0 11px;
    cursor: pointer;
    border: 1px solid rgba(59, 208, 189, 0.17);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.06);
    color: #7bd9cd;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
}


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

@media (max-width: 1280px) {

    .kpi-grid[b-t0288n5aat] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 1080px) {

    .charts-grid[b-t0288n5aat],
    .aging-grid[b-t0288n5aat],
    .stage-layout[b-t0288n5aat] {
        grid-template-columns: 1fr;
    }


    .stage-chart-shell[b-t0288n5aat] {
        height: 260px;
    }
}


@media (max-width: 860px) {

    .reports-header[b-t0288n5aat],
    .report-filter-bar[b-t0288n5aat] {
        align-items: flex-start;
        flex-direction: column;
    }


    .filter-controls[b-t0288n5aat] {
        width: 100%;
        flex-wrap: wrap;
    }


    .filter-control[b-t0288n5aat] {
        flex: 1 1 180px;
    }


    .aging-table-header[b-t0288n5aat],
    .stage-panel-header[b-t0288n5aat] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 680px) {

    .kpi-grid[b-t0288n5aat] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .filter-controls[b-t0288n5aat] {
        align-items: stretch;
        flex-direction: column;
    }


    .filter-control[b-t0288n5aat],
    .filter-control.date-control[b-t0288n5aat],
    .apply-filter-button[b-t0288n5aat] {
        width: 100%;
    }


    .throughput-summary[b-t0288n5aat],
    .aging-legend[b-t0288n5aat] {
        flex-wrap: wrap;
    }


    .aging-buckets[b-t0288n5aat] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 460px) {

    .kpi-grid[b-t0288n5aat] {
        grid-template-columns: 1fr;
    }


    .header-actions[b-t0288n5aat],
    .secondary-action[b-t0288n5aat] {
        width: 100%;
    }


    .secondary-action[b-t0288n5aat] {
        justify-content: center;
    }


    .report-panel[b-t0288n5aat] {
        padding: 15px;
    }
}
/* /Pages/Management/Support.razor.rz.scp.css */
/* ============================================================
   RECONO SUPPORT
   ============================================================ */

.support-page[b-53xbl5frn4] {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   HEADER
   ============================================================ */

.support-header[b-53xbl5frn4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.support-heading[b-53xbl5frn4] {
    min-width: 0;
}


.eyebrow[b-53xbl5frn4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.45px;
}


.eyebrow-dot[b-53xbl5frn4] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}


.support-heading h1[b-53xbl5frn4] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp( 28px, 3vw, 38px );
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}


.support-heading p[b-53xbl5frn4] {
    max-width: 720px;
    margin: 0;
    color: #788591;
    font-size: 14px;
    line-height: 1.6;
}


.support-identity[b-53xbl5frn4] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #242e35;
    border-radius: 11px;
    background: rgba(13, 18, 22, 0.82);
}


.identity-icon[b-53xbl5frn4] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 9px;
    background: rgba(59, 208, 189, 0.05);
    color: #62d1c3;
}


    .identity-icon svg[b-53xbl5frn4] {
        width: 16px;
        height: 16px;
    }


.support-identity > div:last-child[b-53xbl5frn4] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.support-identity span[b-53xbl5frn4] {
    color: #596671;
    font-size: 10px;
}


.support-identity strong[b-53xbl5frn4] {
    max-width: 220px;
    overflow: hidden;
    color: #cbd4d8;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert[b-53xbl5frn4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 12px;
}


.alert-error[b-53xbl5frn4] {
    border: 1px solid rgba(226, 93, 93, 0.25);
    background: rgba(198, 66, 66, 0.065);
    color: #ee9191;
}


.alert-success[b-53xbl5frn4] {
    border: 1px solid rgba(59, 208, 189, 0.19);
    background: rgba(59, 208, 189, 0.055);
    color: #84ddd2;
}


.alert-icon[b-53xbl5frn4] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    font-size: 11px;
    font-weight: 850;
}


.alert > div[b-53xbl5frn4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.alert strong[b-53xbl5frn4] {
    color: inherit;
    font-size: 12px;
}


.alert span[b-53xbl5frn4] {
    line-height: 1.5;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.support-layout[b-53xbl5frn4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 14px;
    margin-bottom: 14px;
}


.support-main[b-53xbl5frn4],
.support-sidebar[b-53xbl5frn4] {
    min-width: 0;
}


.support-sidebar[b-53xbl5frn4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


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

.support-panel[b-53xbl5frn4],
.state-panel[b-53xbl5frn4] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


.support-panel[b-53xbl5frn4] {
    padding: 19px;
}


    .support-panel[b-53xbl5frn4]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.45;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent );
    }


.form-panel[b-53xbl5frn4] {
    border-color: rgba(59, 208, 189, 0.13);
}


.panel-header[b-53xbl5frn4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #20282f;
}


.panel-icon[b-53xbl5frn4] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 9px;
    background: rgba(59, 208, 189, 0.055);
    color: #54cdbd;
}


    .panel-icon svg[b-53xbl5frn4] {
        width: 17px;
        height: 17px;
    }


.panel-header > div:last-child[b-53xbl5frn4] {
    min-width: 0;
}


.panel-kicker[b-53xbl5frn4] {
    display: block;
    margin-bottom: 4px;
    color: #53616c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.95px;
    text-transform: uppercase;
}


.panel-header h2[b-53xbl5frn4],
.help-panel h2[b-53xbl5frn4],
.account-panel h2[b-53xbl5frn4],
.recent-header h2[b-53xbl5frn4] {
    margin: 0 0 4px;
    color: #eef2f4;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}


.panel-header p[b-53xbl5frn4],
.recent-header p[b-53xbl5frn4] {
    margin: 0;
    color: #65727d;
    font-size: 12px;
    line-height: 1.5;
}


/* ============================================================
   FORM
   ============================================================ */

.field-grid[b-53xbl5frn4] {
    display: grid;
    gap: 15px;
    margin-bottom: 16px;
}


.field-grid-two[b-53xbl5frn4] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.field[b-53xbl5frn4] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}


    .field:last-child[b-53xbl5frn4] {
        margin-bottom: 0;
    }


.field-label[b-53xbl5frn4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}


    .field-label label[b-53xbl5frn4] {
        color: #d7dde0;
        font-size: 12px;
        font-weight: 680;
    }


    .field-label span[b-53xbl5frn4] {
        color: #596671;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }


.field[b-53xbl5frn4]  .support-input,
.field[b-53xbl5frn4]  .support-select,
.field[b-53xbl5frn4]  .support-textarea {
    width: 100%;
    appearance: none;
    outline: none;
    border: 1px solid #29323a;
    border-radius: 9px;
    background: #0a0e12 !important;
    color: #e8edef !important;
    font-family: inherit;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}


.field[b-53xbl5frn4]  .support-input,
.field[b-53xbl5frn4]  .support-select {
    height: 43px;
    padding: 0 11px;
}


.field[b-53xbl5frn4]  .support-select {
    padding-right: 34px;
    cursor: pointer;
    background-image: linear-gradient( 45deg, transparent 50%, #61717c 50% ), linear-gradient( 135deg, #61717c 50%, transparent 50% ) !important;
    background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px !important;
    background-size: 4px 4px, 4px 4px !important;
    background-repeat: no-repeat !important;
    background-color: #0a0e12 !important;
}


.field[b-53xbl5frn4]  .support-textarea {
    min-height: 175px;
    resize: vertical;
    padding: 12px;
    line-height: 1.55;
}


    .field[b-53xbl5frn4]  .support-input::placeholder,
    .field[b-53xbl5frn4]  .support-textarea::placeholder {
        color: #4d5963;
        opacity: 1;
    }


    .field[b-53xbl5frn4]  .support-input:hover,
    .field[b-53xbl5frn4]  .support-select:hover,
    .field[b-53xbl5frn4]  .support-textarea:hover {
        border-color: #34404a;
    }


    .field[b-53xbl5frn4]  .support-input:focus,
    .field[b-53xbl5frn4]  .support-select:focus,
    .field[b-53xbl5frn4]  .support-textarea:focus {
        border-color: var(--accent);
        background-color: #0b1013 !important;
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.018);
    }


.field[b-53xbl5frn4]  .validation-message {
    margin-top: 5px;
    color: #ed8d8d;
    font-size: 11px;
    line-height: 1.4;
}


.field-help[b-53xbl5frn4] {
    margin-top: 6px;
    color: #586570;
    font-size: 11px;
    line-height: 1.45;
}


.message-field[b-53xbl5frn4] {
    margin-bottom: 0;
}


/* ============================================================
   SUBMIT BAR
   ============================================================ */

.submit-bar[b-53xbl5frn4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #20282f;
}


.submit-note[b-53xbl5frn4] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}


.submit-note-icon[b-53xbl5frn4] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(59, 208, 189, 0.065);
    color: #6ed4c7;
    font-size: 9px;
    font-weight: 850;
}


.submit-note p[b-53xbl5frn4] {
    max-width: 520px;
    margin: 1px 0 0;
    color: #596671;
    font-size: 11px;
    line-height: 1.45;
}


.submit-button[b-53xbl5frn4] {
    min-width: 154px;
    min-height: 40px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 7px 0 14px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    background: linear-gradient( 180deg, #4bd6c4, #35c5b2 );
    color: #06110f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}


    .submit-button:hover:not(:disabled)[b-53xbl5frn4] {
        transform: translateY(-1px);
        filter: brightness(1.035);
    }


    .submit-button:disabled[b-53xbl5frn4] {
        cursor: default;
        opacity: 0.6;
    }


.button-icon[b-53xbl5frn4] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}


    .button-icon svg[b-53xbl5frn4] {
        width: 13px;
        height: 13px;
    }


.button-spinner[b-53xbl5frn4],
.loading-spinner[b-53xbl5frn4] {
    border-radius: 50%;
    animation: recono-support-spin-b-53xbl5frn4 0.8s linear infinite;
}


.button-spinner[b-53xbl5frn4] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(5, 17, 15, 0.25);
    border-top-color: #06110f;
}


@keyframes recono-support-spin-b-53xbl5frn4 {
    to {
        transform: rotate(360deg);
    }
}


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

.help-panel > .panel-kicker[b-53xbl5frn4],
.account-panel > .panel-kicker[b-53xbl5frn4] {
    margin-bottom: 5px;
}


.help-panel h2[b-53xbl5frn4],
.account-panel h2[b-53xbl5frn4] {
    margin-bottom: 15px;
}


.help-list[b-53xbl5frn4] {
    display: flex;
    flex-direction: column;
}


.help-item[b-53xbl5frn4] {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}


    .help-item:first-child[b-53xbl5frn4] {
        padding-top: 0;
    }


    .help-item:last-child[b-53xbl5frn4] {
        padding-bottom: 0;
        border-bottom: 0;
    }


    .help-item > span[b-53xbl5frn4] {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        border: 1px solid #28323a;
        border-radius: 7px;
        background: #0d1216;
        color: #6d7a84;
        font-size: 9px;
        font-weight: 800;
    }


    .help-item strong[b-53xbl5frn4] {
        display: block;
        margin-bottom: 3px;
        color: #c5ced2;
        font-size: 11px;
    }


    .help-item p[b-53xbl5frn4] {
        margin: 0;
        color: #596671;
        font-size: 10px;
        line-height: 1.45;
    }


/* ============================================================
   ACCOUNT CONTEXT
   ============================================================ */

.account-row[b-53xbl5frn4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}


    .account-row:last-child[b-53xbl5frn4] {
        margin-bottom: 0;
    }


    .account-row span[b-53xbl5frn4] {
        color: #5e6b75;
        font-size: 10px;
    }


    .account-row strong[b-53xbl5frn4] {
        min-width: 0;
        overflow: hidden;
        color: #bfc8cd;
        font-size: 10px;
        font-weight: 700;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* ============================================================
   RECENT TICKETS
   ============================================================ */

.recent-panel[b-53xbl5frn4] {
    margin-bottom: 14px;
}


.recent-header[b-53xbl5frn4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid #20282f;
}


.ticket-count[b-53xbl5frn4] {
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #28323a;
    border-radius: 8px;
    background: #0d1216;
    color: #85929b;
    font-size: 10px;
    font-weight: 800;
}


.ticket-list[b-53xbl5frn4] {
    display: flex;
    flex-direction: column;
}


.ticket-item[b-53xbl5frn4] {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}


    .ticket-item:first-child[b-53xbl5frn4] {
        padding-top: 0;
    }


    .ticket-item:last-child[b-53xbl5frn4] {
        padding-bottom: 0;
        border-bottom: 0;
    }


.ticket-id[b-53xbl5frn4] {
    color: #64727c;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    font-weight: 700;
}


.ticket-content[b-53xbl5frn4] {
    min-width: 0;
}


.ticket-topline[b-53xbl5frn4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}


    .ticket-topline > strong[b-53xbl5frn4] {
        min-width: 0;
        overflow: hidden;
        color: #cfd7da;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.ticket-meta[b-53xbl5frn4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #596671;
    font-size: 10px;
}


    .ticket-meta span + span[b-53xbl5frn4]::before {
        content: "•";
        margin-right: 8px;
        color: #39444c;
    }


.ticket-status[b-53xbl5frn4] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7a8791;
    font-size: 9px;
    font-weight: 750;
}


    .ticket-status i[b-53xbl5frn4] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #77848e;
    }


    .ticket-status.open i[b-53xbl5frn4] {
        background: #d1a455;
    }


    .ticket-status.progress i[b-53xbl5frn4] {
        background: #6ca2d0;
    }


    .ticket-status.resolved i[b-53xbl5frn4] {
        background: #3bd0bd;
    }


    .ticket-status.closed i[b-53xbl5frn4] {
        background: #66737d;
    }


.recent-empty[b-53xbl5frn4] {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.recent-empty-icon[b-53xbl5frn4] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border: 1px solid #28323a;
    border-radius: 8px;
    background: #0d1216;
    color: #64727c;
}


    .recent-empty-icon svg[b-53xbl5frn4] {
        width: 16px;
        height: 16px;
    }


.recent-empty strong[b-53xbl5frn4] {
    margin-bottom: 3px;
    color: #b1bbc0;
    font-size: 11px;
}


.recent-empty > span[b-53xbl5frn4] {
    color: #596671;
    font-size: 10px;
}


/* ============================================================
   STATE
   ============================================================ */

.state-panel[b-53xbl5frn4] {
    min-height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}


.loading-spinner[b-53xbl5frn4] {
    width: 31px;
    height: 31px;
    margin-bottom: 10px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
}


.state-panel > strong[b-53xbl5frn4] {
    color: #d8dfe2;
    font-size: 13px;
}


.state-panel > span[b-53xbl5frn4] {
    margin-top: 4px;
    color: #5e6b75;
    font-size: 11px;
}


.state-icon[b-53xbl5frn4] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 11px;
    border: 1px solid rgba(226, 93, 93, 0.18);
    border-radius: 10px;
    background: rgba(198, 66, 66, 0.055);
    color: #df8585;
    font-size: 13px;
    font-weight: 850;
}


.state-panel h2[b-53xbl5frn4] {
    margin: 0 0 6px;
    color: #dce2e5;
    font-size: 15px;
}


.state-panel p[b-53xbl5frn4] {
    margin: 0;
    color: #687681;
    font-size: 11px;
}


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

@media (max-width: 1080px) {

    .support-layout[b-53xbl5frn4] {
        grid-template-columns: 1fr;
    }


    .support-sidebar[b-53xbl5frn4] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .support-header[b-53xbl5frn4] {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }


    .support-identity[b-53xbl5frn4] {
        width: 100%;
    }


    .field-grid-two[b-53xbl5frn4],
    .support-sidebar[b-53xbl5frn4] {
        grid-template-columns: 1fr;
    }


    .submit-bar[b-53xbl5frn4] {
        align-items: stretch;
        flex-direction: column;
    }


    .submit-button[b-53xbl5frn4] {
        align-self: flex-end;
    }
}


@media (max-width: 540px) {

    .support-panel[b-53xbl5frn4] {
        padding: 15px;
    }


    .submit-button[b-53xbl5frn4] {
        width: 100%;
    }


    .ticket-item[b-53xbl5frn4] {
        grid-template-columns: 1fr;
        gap: 6px;
    }


    .ticket-topline[b-53xbl5frn4] {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}
/* /Pages/Management/Team.razor.rz.scp.css */
/* ============================================================
   RECONO TEAM MANAGEMENT
   ============================================================ */

.team-page[b-q652yuc9rh] {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   HEADER
   ============================================================ */

.team-header[b-q652yuc9rh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.team-heading[b-q652yuc9rh] {
    min-width: 0;
}


.eyebrow[b-q652yuc9rh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.45px;
}


.eyebrow-dot[b-q652yuc9rh] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}


.team-heading h1[b-q652yuc9rh] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}


.team-heading p[b-q652yuc9rh] {
    max-width: 720px;
    margin: 0;
    color: #788591;
    font-size: 13px;
    line-height: 1.6;
}


.header-actions[b-q652yuc9rh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


.team-count-pill[b-q652yuc9rh] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #232c34;
    border-radius: 10px;
    background: rgba(13, 18, 22, 0.82);
    color: #788691;
    font-size: 11px;
    font-weight: 700;
}


.team-count-dot[b-q652yuc9rh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.07);
}


.primary-action[b-q652yuc9rh] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 14px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient( 180deg, #4bd6c4, #35c5b2 );
    color: #06110f;
    font-family: inherit;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}


    .primary-action:hover[b-q652yuc9rh] {
        transform: translateY(-1px);
        filter: brightness(1.035);
    }


.action-icon[b-q652yuc9rh] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}


    .action-icon svg[b-q652yuc9rh] {
        width: 14px;
        height: 14px;
    }


/* ============================================================
   ALERTS
   ============================================================ */

.alert[b-q652yuc9rh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 11px;
}


.alert-error[b-q652yuc9rh] {
    border: 1px solid rgba(226, 93, 93, 0.25);
    background: rgba(198, 66, 66, 0.065);
    color: #ee9191;
}


.alert-success[b-q652yuc9rh] {
    border: 1px solid rgba(59, 208, 189, 0.19);
    background: rgba(59, 208, 189, 0.055);
    color: #84ddd2;
}


.alert-icon[b-q652yuc9rh] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    font-size: 10px;
    font-weight: 850;
}


.alert > div[b-q652yuc9rh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.alert strong[b-q652yuc9rh] {
    color: inherit;
    font-size: 11px;
}


.alert span[b-q652yuc9rh] {
    line-height: 1.5;
}


/* ============================================================
   KPI GRID
   ============================================================ */

.team-kpi-grid[b-q652yuc9rh] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}


.team-kpi-card[b-q652yuc9rh] {
    position: relative;
    min-width: 0;
    min-height: 133px;
    overflow: hidden;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


    .team-kpi-card[b-q652yuc9rh]::before,
    .management-panel[b-q652yuc9rh]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.45;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent );
    }


.team-kpi-accent[b-q652yuc9rh] {
    border-color: rgba(59, 208, 189, 0.22);
    background: radial-gradient( circle at 95% 0%, rgba(59, 208, 189, 0.075), transparent 42% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
}


    .team-kpi-accent[b-q652yuc9rh]::before {
        opacity: 1;
        background: linear-gradient( 90deg, transparent, rgba(59, 208, 189, 0.78), transparent );
    }


.team-kpi-topline[b-q652yuc9rh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}


    .team-kpi-topline > span:first-child[b-q652yuc9rh] {
        color: #6f7c87;
        font-size: 11px;
        font-weight: 760;
        letter-spacing: 0.55px;
        text-transform: uppercase;
    }


.team-kpi-icon[b-q652yuc9rh] {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.055);
    color: #54cdbd;
}


    .team-kpi-icon.neutral[b-q652yuc9rh] {
        border-color: rgba(145, 160, 171, 0.14);
        background: rgba(145, 160, 171, 0.05);
        color: #84939d;
    }


    .team-kpi-icon.warning[b-q652yuc9rh] {
        border-color: rgba(245, 195, 107, 0.14);
        background: rgba(245, 195, 107, 0.055);
        color: #d9ad62;
    }


    .team-kpi-icon svg[b-q652yuc9rh] {
        width: 15px;
        height: 15px;
    }


.team-kpi-card > strong[b-q652yuc9rh] {
    display: block;
    margin-bottom: 7px;
    color: #f6f8f9;
    font-size: 29px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -1px;
}


.team-kpi-card > span[b-q652yuc9rh] {
    color: #5d6a75;
    font-size: 10px;
    line-height: 1.45;
}


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

.management-panel[b-q652yuc9rh],
.state-panel[b-q652yuc9rh] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


.management-panel[b-q652yuc9rh] {
    margin-bottom: 14px;
    padding: 18px;
}


.add-user-panel[b-q652yuc9rh],
.edit-user-panel[b-q652yuc9rh] {
    border-color: rgba(59, 208, 189, 0.14);
}


.panel-header[b-q652yuc9rh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #20282f;
}


.panel-kicker[b-q652yuc9rh] {
    display: block;
    margin-bottom: 4px;
    color: #53616c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.95px;
    text-transform: uppercase;
}


.panel-header h2[b-q652yuc9rh] {
    margin: 0 0 4px;
    color: #eef2f4;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.25px;
}


.panel-header p[b-q652yuc9rh] {
    max-width: 650px;
    margin: 0;
    color: #65727d;
    font-size: 11px;
    line-height: 1.5;
}


.panel-badge[b-q652yuc9rh] {
    flex: 0 0 auto;
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid rgba(59, 208, 189, 0.14);
    border-radius: 999px;
    background: rgba(59, 208, 189, 0.045);
    color: #75d8cb;
    font-size: 9px;
    font-weight: 750;
}


.close-editor-button[b-q652yuc9rh] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid #28323a;
    border-radius: 8px;
    background: #0d1216;
    color: #687681;
}


    .close-editor-button:hover[b-q652yuc9rh] {
        border-color: #36414a;
        color: #a3adb4;
    }


    .close-editor-button svg[b-q652yuc9rh] {
        width: 13px;
        height: 13px;
    }


/* ============================================================
   USER FORM
   ============================================================ */

.user-form-grid[b-q652yuc9rh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(180px, 0.65fr);
    gap: 14px;
}


.edit-grid[b-q652yuc9rh] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.field[b-q652yuc9rh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


.field-label[b-q652yuc9rh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}


    .field-label label[b-q652yuc9rh] {
        color: #d7dde0;
        font-size: 11px;
        font-weight: 680;
    }


    .field-label span[b-q652yuc9rh] {
        color: #56636e;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.35px;
        text-transform: uppercase;
    }


.field[b-q652yuc9rh]  .team-input,
.field[b-q652yuc9rh]  .team-select {
    width: 100%;
    height: 42px;
    appearance: none;
    outline: none;
    padding: 0 11px;
    border: 1px solid #29323a;
    border-radius: 9px;
    background: #0a0e12 !important;
    color: #e8edef !important;
    font-family: inherit;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}


.field[b-q652yuc9rh]  .team-select {
    padding-right: 34px;
    cursor: pointer;
    background-image: linear-gradient( 45deg, transparent 50%, #61717c 50% ), linear-gradient( 135deg, #61717c 50%, transparent 50% ) !important;
    background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px !important;
    background-size: 4px 4px, 4px 4px !important;
    background-repeat: no-repeat !important;
    background-color: #0a0e12 !important;
}


.field[b-q652yuc9rh]  .team-input::placeholder {
    color: #4c5963;
    opacity: 1;
}


.field[b-q652yuc9rh]  .team-input:hover:not(:disabled),
.field[b-q652yuc9rh]  .team-select:hover:not(:disabled) {
    border-color: #34404a;
}


.field[b-q652yuc9rh]  .team-input:focus,
.field[b-q652yuc9rh]  .team-select:focus {
    border-color: var(--accent);
    background-color: #0b1013 !important;
    box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.018);
}


.field[b-q652yuc9rh]  .team-input:disabled,
.field[b-q652yuc9rh]  .team-select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}


.field[b-q652yuc9rh]  .validation-message {
    margin-top: 5px;
    color: #ed8d8d;
    font-size: 10px;
    line-height: 1.4;
}


.field-help[b-q652yuc9rh] {
    margin-top: 6px;
    color: #53606b;
    font-size: 10px;
    line-height: 1.45;
}


/* ============================================================
   STATUS TOGGLE
   ============================================================ */

.status-toggle[b-q652yuc9rh] {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border: 1px solid #29323a;
    border-radius: 9px;
    background: #0a0e12;
}


    .status-toggle.active[b-q652yuc9rh] {
        border-color: rgba(59, 208, 189, 0.18);
        background: rgba(59, 208, 189, 0.035);
    }


    .status-toggle[b-q652yuc9rh]  input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
    }


.toggle-track[b-q652yuc9rh] {
    position: relative;
    width: 35px;
    height: 20px;
    flex: 0 0 35px;
    border: 1px solid #39434b;
    border-radius: 999px;
    background: #171d22;
    transition: background 0.15s ease, border-color 0.15s ease;
}


.toggle-thumb[b-q652yuc9rh] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #65727b;
    transition: left 0.15s ease, background 0.15s ease;
}


.status-toggle.active .toggle-track[b-q652yuc9rh] {
    border-color: rgba(59, 208, 189, 0.38);
    background: rgba(59, 208, 189, 0.12);
}


.status-toggle.active .toggle-thumb[b-q652yuc9rh] {
    left: 18px;
    background: var(--accent);
}


.toggle-copy[b-q652yuc9rh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


    .toggle-copy strong[b-q652yuc9rh] {
        color: #cbd3d7;
        font-size: 10px;
    }


    .toggle-copy small[b-q652yuc9rh] {
        color: #586570;
        font-size: 9px;
        line-height: 1.35;
    }


/* ============================================================
   FORM ACTIONS
   ============================================================ */

.form-actions[b-q652yuc9rh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #20282f;
}


.form-note[b-q652yuc9rh] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}


    .form-note > span[b-q652yuc9rh] {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(59, 208, 189, 0.07);
        color: #68d2c5;
        font-size: 8px;
        font-weight: 850;
    }


    .form-note p[b-q652yuc9rh] {
        max-width: 620px;
        margin: 1px 0 0;
        color: #596671;
        font-size: 10px;
        line-height: 1.45;
    }


.form-buttons[b-q652yuc9rh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}


.secondary-button[b-q652yuc9rh],
.save-button[b-q652yuc9rh] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}


.secondary-button[b-q652yuc9rh] {
    padding: 0 12px;
    border: 1px solid #28323a;
    background: #0d1216;
    color: #77858f;
}


    .secondary-button:hover[b-q652yuc9rh] {
        border-color: #36414a;
        color: #a3adb4;
    }


.save-button[b-q652yuc9rh] {
    min-width: 116px;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(59, 208, 189, 0.21);
    background: rgba(59, 208, 189, 0.08);
    color: #7bd9cd;
}


    .save-button:hover:not(:disabled)[b-q652yuc9rh] {
        border-color: rgba(59, 208, 189, 0.36);
        background: rgba(59, 208, 189, 0.11);
    }


    .save-button:disabled[b-q652yuc9rh] {
        cursor: default;
        opacity: 0.6;
    }


    .save-button svg[b-q652yuc9rh] {
        width: 13px;
        height: 13px;
    }


.button-spinner[b-q652yuc9rh],
.loading-spinner[b-q652yuc9rh] {
    border-radius: 50%;
    animation: recono-team-spin-b-q652yuc9rh 0.8s linear infinite;
}


.button-spinner[b-q652yuc9rh] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(59, 208, 189, 0.20);
    border-top-color: #72d9cc;
}


@keyframes recono-team-spin-b-q652yuc9rh {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   TEAM LIST
   ============================================================ */

.team-list-header[b-q652yuc9rh] {
    align-items: flex-end;
}


.search-field[b-q652yuc9rh] {
    position: relative;
    width: 260px;
    min-width: 200px;
}


    .search-field > svg[b-q652yuc9rh] {
        position: absolute;
        top: 50%;
        left: 12px;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
        color: #596771;
        pointer-events: none;
    }


    .search-field input[b-q652yuc9rh] {
        width: 100%;
        height: 39px;
        outline: none;
        padding: 0 12px 0 36px;
        border: 1px solid #29323a;
        border-radius: 9px;
        background: #0a0e12;
        color: #e5eaed;
        font-family: inherit;
        font-size: 11px;
    }


        .search-field input[b-q652yuc9rh]::placeholder {
            color: #4c5963;
        }


        .search-field input:focus[b-q652yuc9rh] {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.075);
        }


.team-table-wrap[b-q652yuc9rh] {
    width: 100%;
    overflow-x: auto;
}


.team-table[b-q652yuc9rh] {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}


    .team-table th[b-q652yuc9rh] {
        padding: 10px 11px;
        text-align: left;
        border-bottom: 1px solid #222a31;
        color: #53616c;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.55px;
        text-transform: uppercase;
        white-space: nowrap;
    }


    .team-table td[b-q652yuc9rh] {
        padding: 13px 11px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.038);
        color: #818e98;
        font-size: 11px;
        vertical-align: middle;
    }


    .team-table tbody tr:last-child td[b-q652yuc9rh] {
        border-bottom: 0;
    }


    .team-table tbody tr[b-q652yuc9rh] {
        transition: background 0.12s ease;
    }


        .team-table tbody tr:hover[b-q652yuc9rh] {
            background: rgba(255, 255, 255, 0.014);
        }


        .team-table tbody tr.current-user-row[b-q652yuc9rh] {
            background: rgba(59, 208, 189, 0.018);
        }


/* ============================================================
   USER CELL
   ============================================================ */

.user-cell[b-q652yuc9rh] {
    min-width: 230px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.user-avatar[b-q652yuc9rh] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid #273139;
    border-radius: 9px;
    background: #0c1115;
    color: #7a8993;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.25px;
}


.user-cell > div[b-q652yuc9rh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.user-name-line[b-q652yuc9rh] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}


    .user-name-line strong[b-q652yuc9rh] {
        overflow: hidden;
        color: #d8dee1;
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.user-cell > div > span[b-q652yuc9rh] {
    color: #596671;
    font-size: 10px;
}


.you-badge[b-q652yuc9rh] {
    flex: 0 0 auto;
    min-height: 19px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 999px;
    background: rgba(59, 208, 189, 0.045);
    color: #72d4c8;
    font-size: 8px;
    font-weight: 800;
}


/* ============================================================
   ROLE / PROVIDER / STATUS
   ============================================================ */

.role-badge[b-q652yuc9rh] {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #2b353d;
    border-radius: 999px;
    background: #10161a;
    color: #74818b;
    font-size: 9px;
    font-weight: 750;
}


.role-admin[b-q652yuc9rh] {
    border-color: rgba(59, 208, 189, 0.16);
    background: rgba(59, 208, 189, 0.05);
    color: #79d9cd;
}


.provider-cell[b-q652yuc9rh] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7d8a94;
    font-size: 10px;
}


.provider-icon[b-q652yuc9rh] {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid #29333b;
    border-radius: 7px;
    background: #0c1115;
    color: #70808a;
    font-size: 9px;
    font-weight: 850;
}


    .provider-icon.connected[b-q652yuc9rh] {
        border-color: rgba(59, 208, 189, 0.13);
        color: #69d1c4;
    }


    .provider-icon.pending[b-q652yuc9rh] {
        border-color: rgba(213, 166, 84, 0.15);
        color: #d0a35b;
    }


.account-status[b-q652yuc9rh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7d8a94;
    font-size: 10px;
    font-weight: 700;
}


    .account-status > span[b-q652yuc9rh] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }


    .account-status.active > span[b-q652yuc9rh] {
        background: #3bd0bd;
    }


    .account-status.pending > span[b-q652yuc9rh] {
        background: #d4a45a;
    }


    .account-status.inactive > span[b-q652yuc9rh] {
        background: #56626b;
    }


.date-text[b-q652yuc9rh] {
    color: #687681;
    font-size: 10px;
    white-space: nowrap;
}


.action-cell[b-q652yuc9rh] {
    width: 1%;
    text-align: right;
}


.edit-button[b-q652yuc9rh] {
    min-height: 31px;
    padding: 0 9px;
    cursor: pointer;
    border: 1px solid #28323a;
    border-radius: 7px;
    background: #0d1216;
    color: #77858f;
    font-family: inherit;
    font-size: 9px;
    font-weight: 750;
}


    .edit-button:hover[b-q652yuc9rh] {
        border-color: rgba(59, 208, 189, 0.22);
        color: #7edbd0;
    }


/* ============================================================
   EMPTY / STATE
   ============================================================ */

.state-panel[b-q652yuc9rh] {
    min-height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}


.loading-spinner[b-q652yuc9rh] {
    width: 30px;
    height: 30px;
    margin-bottom: 9px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
}


.state-panel > strong[b-q652yuc9rh] {
    color: #d8dfe2;
    font-size: 12px;
}


.state-panel > span[b-q652yuc9rh] {
    margin-top: 4px;
    color: #5e6b75;
    font-size: 10px;
}


.state-icon[b-q652yuc9rh] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border: 1px solid rgba(245, 195, 107, 0.15);
    border-radius: 11px;
    background: rgba(245, 195, 107, 0.05);
    color: #d7aa5c;
}


    .state-icon svg[b-q652yuc9rh] {
        width: 20px;
        height: 20px;
    }


.access-denied h2[b-q652yuc9rh] {
    margin: 0 0 7px;
    color: #dde3e5;
    font-size: 15px;
}


.access-denied p[b-q652yuc9rh] {
    max-width: 430px;
    margin: 0 0 14px;
    color: #66737d;
    font-size: 11px;
    line-height: 1.5;
}


.state-action[b-q652yuc9rh] {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(59, 208, 189, 0.16);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.05);
    color: #7bd9cd;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}


.empty-state[b-q652yuc9rh] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.empty-icon[b-q652yuc9rh] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 11px;
    border: 1px solid #28323a;
    border-radius: 10px;
    background: #0d1216;
    color: #64727c;
}


    .empty-icon svg[b-q652yuc9rh] {
        width: 18px;
        height: 18px;
    }


.empty-state h3[b-q652yuc9rh] {
    margin: 0 0 5px;
    color: #cdd5d9;
    font-size: 13px;
}


.empty-state p[b-q652yuc9rh] {
    margin: 0;
    color: #596671;
    font-size: 10px;
}


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

@media (max-width: 1180px) {

    .team-kpi-grid[b-q652yuc9rh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .edit-grid[b-q652yuc9rh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .user-form-grid[b-q652yuc9rh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


        .user-form-grid .field:last-child[b-q652yuc9rh] {
            grid-column: 1 / -1;
        }


    .team-list-header[b-q652yuc9rh] {
        align-items: stretch;
        flex-direction: column;
    }


    .search-field[b-q652yuc9rh] {
        width: 100%;
    }
}


@media (max-width: 720px) {

    .team-header[b-q652yuc9rh] {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }


    .header-actions[b-q652yuc9rh] {
        width: 100%;
    }


    .team-count-pill[b-q652yuc9rh] {
        flex: 1;
    }


    .form-actions[b-q652yuc9rh] {
        align-items: stretch;
        flex-direction: column;
    }


    .form-buttons[b-q652yuc9rh] {
        justify-content: flex-end;
    }
}


@media (max-width: 560px) {

    .team-kpi-grid[b-q652yuc9rh],
    .user-form-grid[b-q652yuc9rh],
    .edit-grid[b-q652yuc9rh] {
        grid-template-columns: 1fr;
    }


        .user-form-grid .field:last-child[b-q652yuc9rh] {
            grid-column: auto;
        }


    .header-actions[b-q652yuc9rh],
    .form-buttons[b-q652yuc9rh] {
        align-items: stretch;
        flex-direction: column;
    }


    .team-count-pill[b-q652yuc9rh],
    .primary-action[b-q652yuc9rh],
    .secondary-button[b-q652yuc9rh],
    .save-button[b-q652yuc9rh] {
        width: 100%;
        justify-content: center;
    }


    .management-panel[b-q652yuc9rh] {
        padding: 15px;
    }
}


/* ============================================================
   READABILITY / TYPOGRAPHY PASS
   ============================================================ */

/* Header */
.eyebrow[b-q652yuc9rh] {
    font-size: 11px;
}

.team-heading p[b-q652yuc9rh] {
    font-size: 14px;
}

.team-count-pill[b-q652yuc9rh] {
    font-size: 12px;
}

.primary-action[b-q652yuc9rh] {
    font-size: 13px;
}


/* Alerts */
.alert[b-q652yuc9rh] {
    font-size: 12px;
}

    .alert strong[b-q652yuc9rh] {
        font-size: 12px;
    }

.alert-icon[b-q652yuc9rh] {
    font-size: 11px;
}


/* KPI cards */
.team-kpi-topline > span:first-child[b-q652yuc9rh] {
    font-size: 12px;
}

.team-kpi-card > strong[b-q652yuc9rh] {
    font-size: 31px;
}

.team-kpi-card > span[b-q652yuc9rh] {
    font-size: 11px;
}


/* Panel headings */
.panel-kicker[b-q652yuc9rh] {
    font-size: 11px;
}

.panel-header h2[b-q652yuc9rh] {
    font-size: 17px;
}

.panel-header p[b-q652yuc9rh] {
    font-size: 12px;
}

.panel-badge[b-q652yuc9rh] {
    font-size: 10px;
}


/* Form labels / controls */
.field-label label[b-q652yuc9rh] {
    font-size: 12px;
}

.field-label span[b-q652yuc9rh] {
    font-size: 10px;
}

.field[b-q652yuc9rh]  .team-input,
.field[b-q652yuc9rh]  .team-select {
    font-size: 13px;
}

.field[b-q652yuc9rh]  .validation-message {
    font-size: 11px;
}

.field-help[b-q652yuc9rh] {
    font-size: 11px;
}


/* Account status toggle */
.toggle-copy strong[b-q652yuc9rh] {
    font-size: 11px;
}

.toggle-copy small[b-q652yuc9rh] {
    font-size: 10px;
}


/* Form actions */
.form-note > span[b-q652yuc9rh] {
    font-size: 9px;
}

.form-note p[b-q652yuc9rh] {
    font-size: 11px;
}

.secondary-button[b-q652yuc9rh],
.save-button[b-q652yuc9rh] {
    font-size: 11px;
}


/* Team search */
.search-field input[b-q652yuc9rh] {
    font-size: 12px;
}


/* Team table */
.team-table th[b-q652yuc9rh] {
    font-size: 11px;
}

.team-table td[b-q652yuc9rh] {
    font-size: 12px;
}

.user-avatar[b-q652yuc9rh] {
    font-size: 11px;
}

.user-name-line strong[b-q652yuc9rh] {
    font-size: 12px;
}

.user-cell > div > span[b-q652yuc9rh] {
    font-size: 11px;
}

.you-badge[b-q652yuc9rh] {
    font-size: 9px;
}

.role-badge[b-q652yuc9rh] {
    font-size: 10px;
}

.provider-cell[b-q652yuc9rh] {
    font-size: 11px;
}

.provider-icon[b-q652yuc9rh] {
    font-size: 10px;
}

.account-status[b-q652yuc9rh] {
    font-size: 11px;
}

.date-text[b-q652yuc9rh] {
    font-size: 11px;
}

.edit-button[b-q652yuc9rh] {
    font-size: 10px;
}


/* Loading / empty / access states */
.state-panel > strong[b-q652yuc9rh] {
    font-size: 13px;
}

.state-panel > span[b-q652yuc9rh] {
    font-size: 11px;
}

.access-denied h2[b-q652yuc9rh] {
    font-size: 16px;
}

.access-denied p[b-q652yuc9rh] {
    font-size: 12px;
}

.state-action[b-q652yuc9rh] {
    font-size: 11px;
}

.empty-state h3[b-q652yuc9rh] {
    font-size: 14px;
}

.empty-state p[b-q652yuc9rh] {
    font-size: 11px;
}


/* Give the table a little more breathing room for larger text */
.team-table[b-q652yuc9rh] {
    min-width: 980px;
}

    .team-table th[b-q652yuc9rh] {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .team-table td[b-q652yuc9rh] {
        padding-top: 14px;
        padding-bottom: 14px;
    }
/* /Pages/Management/UpgradePlan.razor.rz.scp.css */
/* ============================================================
   RECONO PLAN & BILLING
   ============================================================ */

.upgrade-page[b-d13k01kmx9] {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   HEADER
   ============================================================ */

.upgrade-header[b-d13k01kmx9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.upgrade-heading[b-d13k01kmx9] {
    min-width: 0;
}


.eyebrow[b-d13k01kmx9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.45px;
}


.eyebrow-dot[b-d13k01kmx9] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}


.upgrade-heading h1[b-d13k01kmx9] {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp( 28px, 3vw, 38px );
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}


.upgrade-heading p[b-d13k01kmx9] {
    max-width: 720px;
    margin: 0;
    color: #788591;
    font-size: 14px;
    line-height: 1.6;
}


.header-status[b-d13k01kmx9] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 160px;
    padding: 10px 12px;
    border: 1px solid #232d35;
    border-radius: 10px;
    background: rgba(13, 18, 22, 0.84);
}


    .header-status > div[b-d13k01kmx9] {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }


    .header-status span:not(.status-dot)[b-d13k01kmx9] {
        color: #596671;
        font-size: 9px;
    }


    .header-status strong[b-d13k01kmx9] {
        color: #c4ced3;
        font-size: 11px;
    }


.status-dot[b-d13k01kmx9] {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.07);
}


    .status-dot.warning[b-d13k01kmx9] {
        background: #d3a457;
        box-shadow: 0 0 0 4px rgba(211, 164, 87, 0.07);
    }


    .status-dot.neutral[b-d13k01kmx9] {
        background: #77848e;
        box-shadow: 0 0 0 4px rgba(119, 132, 142, 0.07);
    }


/* ============================================================
   ALERTS
   ============================================================ */

.alert[b-d13k01kmx9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 12px;
}


.alert-error[b-d13k01kmx9] {
    border: 1px solid rgba(226, 93, 93, 0.25);
    background: rgba(198, 66, 66, 0.065);
    color: #ee9191;
}


.alert-success[b-d13k01kmx9] {
    border: 1px solid rgba(59, 208, 189, 0.19);
    background: rgba(59, 208, 189, 0.055);
    color: #84ddd2;
}


.alert-info[b-d13k01kmx9] {
    border: 1px solid rgba(108, 162, 208, 0.18);
    background: rgba(108, 162, 208, 0.05);
    color: #91badc;
}


.alert-icon[b-d13k01kmx9] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    font-size: 11px;
    font-weight: 850;
}


.alert > div[b-d13k01kmx9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.alert strong[b-d13k01kmx9] {
    color: inherit;
    font-size: 12px;
}


.alert span[b-d13k01kmx9] {
    line-height: 1.5;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.billing-summary-grid[b-d13k01kmx9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}


.summary-card[b-d13k01kmx9] {
    position: relative;
    min-width: 0;
    min-height: 128px;
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}


    .summary-card[b-d13k01kmx9]::before,
    .plans-section[b-d13k01kmx9]::before,
    .change-panel[b-d13k01kmx9]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.43;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent );
    }


.summary-accent[b-d13k01kmx9] {
    border-color: rgba(59, 208, 189, 0.20);
    background: radial-gradient( circle at 95% 0%, rgba(59, 208, 189, 0.065), transparent 45% ), var(--surface);
}


    .summary-accent[b-d13k01kmx9]::before {
        opacity: 1;
        background: linear-gradient( 90deg, transparent, rgba(59, 208, 189, 0.75), transparent );
    }


.summary-topline[b-d13k01kmx9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}


    .summary-topline > span:first-child[b-d13k01kmx9] {
        color: #697681;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.45px;
        text-transform: uppercase;
    }


.summary-icon[b-d13k01kmx9] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.05);
    color: #54cdbd;
}


    .summary-icon.neutral[b-d13k01kmx9] {
        border-color: rgba(145, 160, 171, 0.13);
        background: rgba(145, 160, 171, 0.045);
        color: #85939d;
    }


    .summary-icon svg[b-d13k01kmx9] {
        width: 14px;
        height: 14px;
    }


.summary-card > strong[b-d13k01kmx9] {
    display: block;
    margin-bottom: 6px;
    color: #f4f7f8;
    font-size: 24px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.7px;
}


.summary-card > .billing-period-value[b-d13k01kmx9] {
    font-size: 18px;
}


.summary-card > span[b-d13k01kmx9] {
    color: #5b6873;
    font-size: 10px;
    line-height: 1.4;
}


/* ============================================================
   SCHEDULED CHANGE
   ============================================================ */

.scheduled-change-panel[b-d13k01kmx9] {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(211, 164, 87, 0.18);
    border-radius: 12px;
    background: rgba(211, 164, 87, 0.04);
}


.scheduled-icon[b-d13k01kmx9] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(211, 164, 87, 0.15);
    border-radius: 9px;
    background: rgba(211, 164, 87, 0.05);
    color: #c9a15b;
}


    .scheduled-icon svg[b-d13k01kmx9] {
        width: 17px;
        height: 17px;
    }


.scheduled-change-panel > div:nth-child(2)[b-d13k01kmx9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.scheduled-change-panel span[b-d13k01kmx9] {
    color: #826d49;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}


.scheduled-change-panel strong[b-d13k01kmx9] {
    color: #cfb174;
    font-size: 11px;
}


.scheduled-change-panel p[b-d13k01kmx9] {
    margin: 0;
    color: #73654d;
    font-size: 10px;
    line-height: 1.45;
}


.keep-plan-button[b-d13k01kmx9] {
    min-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    border: 1px solid rgba(211, 164, 87, 0.18);
    border-radius: 8px;
    background: rgba(211, 164, 87, 0.045);
    color: #caa762;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
}


    .keep-plan-button:hover:not(:disabled)[b-d13k01kmx9] {
        background: rgba(211, 164, 87, 0.08);
    }


/* ============================================================
   PLANS SECTION
   ============================================================ */

.plans-section[b-d13k01kmx9],
.change-panel[b-d13k01kmx9],
.state-panel[b-d13k01kmx9] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


.plans-section[b-d13k01kmx9] {
    margin-bottom: 14px;
    padding: 18px;
}


.section-header[b-d13k01kmx9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #20282f;
}


.section-kicker[b-d13k01kmx9] {
    display: block;
    margin-bottom: 4px;
    color: #53616c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.section-header h2[b-d13k01kmx9],
.change-copy h2[b-d13k01kmx9] {
    margin: 0 0 4px;
    color: #edf1f3;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}


.section-header p[b-d13k01kmx9],
.change-copy p[b-d13k01kmx9] {
    max-width: 650px;
    margin: 0;
    color: #65727d;
    font-size: 11px;
    line-height: 1.5;
}


.monthly-badge[b-d13k01kmx9] {
    flex: 0 0 auto;
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid rgba(59, 208, 189, 0.14);
    border-radius: 999px;
    background: rgba(59, 208, 189, 0.045);
    color: #75d8cb;
    font-size: 9px;
    font-weight: 750;
}


/* ============================================================
   PLAN CARDS
   ============================================================ */

.plans-grid[b-d13k01kmx9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}


.plan-card[b-d13k01kmx9] {
    position: relative;
    min-width: 0;
    min-height: 305px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px;
    cursor: pointer;
    border: 1px solid #252f37;
    border-radius: 12px;
    background: #0d1216;
    color: inherit;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}


    .plan-card:hover:not(:disabled)[b-d13k01kmx9] {
        transform: translateY(-1px);
        border-color: #334049;
        background: #10161a;
    }


    .plan-card.selected[b-d13k01kmx9] {
        border-color: rgba(59, 208, 189, 0.33);
        background: radial-gradient( circle at 100% 0%, rgba(59, 208, 189, 0.07), transparent 45% ), #0e1418;
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.035);
    }


    .plan-card.current[b-d13k01kmx9] {
        box-shadow: inset 0 1px 0 rgba(59, 208, 189, 0.06);
    }


    .plan-card.capacity-blocked[b-d13k01kmx9] {
        opacity: 0.68;
    }


    .plan-card:disabled[b-d13k01kmx9] {
        cursor: default;
    }


.recommended-badge[b-d13k01kmx9] {
    position: absolute;
    top: 0;
    right: 12px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 0 0 7px 7px;
    background: rgba(59, 208, 189, 0.10);
    color: #75d8cb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.4px;
}


    .recommended-badge svg[b-d13k01kmx9] {
        width: 10px;
        height: 10px;
    }


.plan-card-topline[b-d13k01kmx9] {
    min-height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 13px;
}


.plan-state[b-d13k01kmx9] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #61707a;
    font-size: 9px;
    font-weight: 700;
}


.plan-radio[b-d13k01kmx9] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: grid;
    place-items: center;
    border: 1px solid #3a464f;
    border-radius: 50%;
    background: #0a0f12;
    color: #07110f;
}


    .plan-radio.selected[b-d13k01kmx9] {
        border-color: var(--accent);
        background: var(--accent);
    }


    .plan-radio svg[b-d13k01kmx9] {
        width: 10px;
        height: 10px;
    }


.current-badge[b-d13k01kmx9] {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 999px;
    background: rgba(59, 208, 189, 0.045);
    color: #70d2c6;
    font-size: 8px;
    font-weight: 800;
}


.plan-name[b-d13k01kmx9] {
    margin-bottom: 5px;
    color: #d9e0e3;
    font-size: 13px;
    font-weight: 720;
}


.plan-price[b-d13k01kmx9] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 16px;
}


    .plan-price strong[b-d13k01kmx9] {
        color: #fff;
        font-size: 25px;
        font-weight: 720;
        letter-spacing: -0.8px;
    }


    .plan-price span[b-d13k01kmx9] {
        color: #5e6b75;
        font-size: 9px;
    }


.capacity-block[b-d13k01kmx9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 1px solid #222b32;
    border-radius: 8px;
    background: #0a0f12;
}


    .capacity-block span[b-d13k01kmx9] {
        color: #53606a;
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
    }


    .capacity-block strong[b-d13k01kmx9] {
        color: #aeb9be;
        font-size: 10px;
    }


.plan-divider[b-d13k01kmx9] {
    height: 1px;
    margin: 13px 0;
    background: #20282f;
}


.plan-features[b-d13k01kmx9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


    .plan-features > div[b-d13k01kmx9] {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        color: #72808a;
        font-size: 10px;
        line-height: 1.35;
    }


.feature-check[b-d13k01kmx9] {
    color: #54cdbd;
    font-size: 10px;
    font-weight: 850;
}


.capacity-warning[b-d13k01kmx9] {
    margin-top: auto;
    padding-top: 10px;
    color: #c99e58;
    font-size: 9px;
    line-height: 1.4;
}


/* ============================================================
   CHANGE PANEL
   ============================================================ */

.change-panel[b-d13k01kmx9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 17px 18px;
}


.change-copy[b-d13k01kmx9] {
    min-width: 0;
}


    .change-copy h2 > span[b-d13k01kmx9] {
        color: #4d5963;
    }


.selection-warning[b-d13k01kmx9] {
    margin-top: 8px;
    color: #d0a45c;
    font-size: 10px;
    line-height: 1.45;
}


.change-button[b-d13k01kmx9] {
    min-width: 170px;
    min-height: 41px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 7px 0 13px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    background: linear-gradient( 180deg, #4bd6c4, #35c5b2 );
    color: #06110f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}


    .change-button:hover:not(:disabled)[b-d13k01kmx9] {
        transform: translateY(-1px);
        filter: brightness(1.035);
    }


    .change-button:disabled[b-d13k01kmx9] {
        cursor: default;
        opacity: 0.45;
    }


    .change-button.downgrade-button[b-d13k01kmx9] {
        border-color: rgba(211, 164, 87, 0.18);
        background: rgba(211, 164, 87, 0.06);
        color: #c9a35f;
        box-shadow: none;
    }


        .change-button.downgrade-button:hover:not(:disabled)[b-d13k01kmx9] {
            background: rgba(211, 164, 87, 0.10);
            filter: none;
        }


.button-arrow[b-d13k01kmx9] {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}


.downgrade-button .button-arrow[b-d13k01kmx9] {
    background: rgba(211, 164, 87, 0.07);
}


.button-arrow svg[b-d13k01kmx9] {
    width: 13px;
    height: 13px;
}


.button-spinner[b-d13k01kmx9],
.loading-spinner[b-d13k01kmx9] {
    border-radius: 50%;
    animation: recono-billing-spin-b-d13k01kmx9 0.8s linear infinite;
}


.button-spinner[b-d13k01kmx9] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(5, 17, 15, 0.24);
    border-top-color: #06110f;
}


@keyframes recono-billing-spin-b-d13k01kmx9 {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

.billing-footer[b-d13k01kmx9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 5px 0 10px;
    color: #52606a;
    font-size: 9px;
}


    .billing-footer i[b-d13k01kmx9] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #344049;
    }


/* ============================================================
   STATE
   ============================================================ */

.state-panel[b-d13k01kmx9] {
    min-height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}


.loading-spinner[b-d13k01kmx9] {
    width: 31px;
    height: 31px;
    margin-bottom: 10px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
}


.state-panel > strong[b-d13k01kmx9] {
    color: #d8dfe2;
    font-size: 13px;
}


.state-panel > span[b-d13k01kmx9] {
    margin-top: 4px;
    color: #5e6b75;
    font-size: 11px;
}


.state-icon[b-d13k01kmx9] {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    margin-bottom: 11px;
    border: 1px solid rgba(211, 164, 87, 0.16);
    border-radius: 10px;
    background: rgba(211, 164, 87, 0.05);
    color: #cca45e;
}


    .state-icon svg[b-d13k01kmx9] {
        width: 19px;
        height: 19px;
    }


.state-panel h2[b-d13k01kmx9] {
    margin: 0 0 7px;
    color: #dde3e5;
    font-size: 15px;
}


.state-panel p[b-d13k01kmx9] {
    max-width: 430px;
    margin: 0 0 14px;
    color: #66737d;
    font-size: 11px;
    line-height: 1.5;
}


.state-action[b-d13k01kmx9] {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(59, 208, 189, 0.16);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.05);
    color: #7bd9cd;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}


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

@media (max-width: 1180px) {

    .billing-summary-grid[b-d13k01kmx9],
    .plans-grid[b-d13k01kmx9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .upgrade-header[b-d13k01kmx9],
    .section-header[b-d13k01kmx9],
    .change-panel[b-d13k01kmx9] {
        align-items: flex-start;
        flex-direction: column;
    }


    .header-status[b-d13k01kmx9] {
        width: 100%;
    }


    .scheduled-change-panel[b-d13k01kmx9] {
        grid-template-columns: 38px minmax(0, 1fr);
    }


    .keep-plan-button[b-d13k01kmx9] {
        grid-column: 1 / -1;
        width: 100%;
    }


    .change-button[b-d13k01kmx9] {
        width: 100%;
    }
}


@media (max-width: 560px) {

    .billing-summary-grid[b-d13k01kmx9],
    .plans-grid[b-d13k01kmx9] {
        grid-template-columns: 1fr;
    }


    .plans-section[b-d13k01kmx9],
    .change-panel[b-d13k01kmx9] {
        padding: 15px;
    }
}
/* /Pages/Onboarding.razor.rz.scp.css */
/* ============================================================
   RECONO ONBOARDING
   ============================================================ */

.onboarding-page[b-bzj3ynaxim] {
    --bg: #090c0f;
    --surface: #101419;
    --surface-raised: #13181e;
    --surface-soft: #0d1115;
    --border: #222a32;
    --border-strong: #303a45;
    --text: #f4f7f8;
    --muted: #8a96a3;
    --muted-soft: #65717d;
    --accent: #3bd0bd;
    --accent-strong: #55dbc9;
    --accent-soft: rgba(59, 208, 189, 0.10);
    --accent-border: rgba(59, 208, 189, 0.32);
    --danger: #ff8f8f;
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 50% -18%, rgba(59, 208, 189, 0.11), transparent 34%), radial-gradient(circle at 7% 40%, rgba(46, 113, 102, 0.07), transparent 24%), var(--bg);
    color: var(--text);
    padding: 28px 28px 70px;
}

    .onboarding-page[b-bzj3ynaxim]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.11;
        background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: linear-gradient(to bottom, black, transparent 62%);
    }

.onboarding-shell[b-bzj3ynaxim] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.onboarding-page[b-bzj3ynaxim],
.onboarding-page *[b-bzj3ynaxim] {
    box-sizing: border-box;
}

/* ============================================================
   HEADER
   ============================================================ */

.onboarding-header[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    margin-bottom: 52px;
}

.brand[b-bzj3ynaxim] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-mark-wrap[b-bzj3ynaxim] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: linear-gradient(145deg, #161d21, #0e1316);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.brand-mark[b-bzj3ynaxim] {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.brand-copy[b-bzj3ynaxim] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-name[b-bzj3ynaxim] {
    color: #ffffff;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -0.55px;
}

.brand-subtitle[b-bzj3ynaxim] {
    color: var(--muted-soft);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.setup-status[b-bzj3ynaxim] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid #202831;
    border-radius: 999px;
    background: rgba(15, 20, 25, 0.78);
    color: #9aa6b2;
    font-size: 11px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.status-dot[b-bzj3ynaxim] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.09);
}

/* ============================================================
   INTRO
   ============================================================ */

.intro-section[b-bzj3ynaxim] {
    margin-bottom: 42px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.eyebrow[b-bzj3ynaxim] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.65px;
}

.eyebrow-dot[b-bzj3ynaxim] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.65);
}

.intro-content[b-bzj3ynaxim] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 42px;
}

    .intro-content > div:first-child[b-bzj3ynaxim] {
        max-width: 680px;
    }

.intro-section h1[b-bzj3ynaxim] {
    margin: 0 0 13px;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 720;
    line-height: 1.04;
    letter-spacing: -1.7px;
}

.intro-section p[b-bzj3ynaxim] {
    margin: 0;
    max-width: 640px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.intro-meta[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 250px;
    padding: 15px 17px;
    border: 1px solid #202831;
    border-radius: 12px;
    background: rgba(15, 19, 24, 0.62);
}

.intro-meta-item[b-bzj3ynaxim] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}

    .intro-meta-item strong[b-bzj3ynaxim] {
        color: #e8edef;
        font-size: 13px;
        font-weight: 700;
    }

    .intro-meta-item span[b-bzj3ynaxim] {
        color: var(--muted-soft);
        font-size: 10px;
    }

.intro-meta-divider[b-bzj3ynaxim] {
    width: 1px;
    height: 30px;
    margin: 0 16px;
    background: #242c34;
}

/* ============================================================
   FORM SECTIONS
   ============================================================ */

.form-section[b-bzj3ynaxim] {
    margin-bottom: 42px;
}

.plans-section[b-bzj3ynaxim] {
    margin-bottom: 34px;
}

.section-heading[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}

.section-number[b-bzj3ynaxim] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent-border);
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.section-copy[b-bzj3ynaxim] {
    min-width: 0;
}

.section-heading h2[b-bzj3ynaxim] {
    margin: 0 0 3px;
    color: #f5f7f8;
    font-size: 16px;
    font-weight: 690;
    letter-spacing: -0.25px;
}

.section-heading p[b-bzj3ynaxim] {
    margin: 0;
    color: #71808d;
    font-size: 11px;
    line-height: 1.45;
}

.section-badge[b-bzj3ynaxim] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #232c34;
    border-radius: 999px;
    background: #0d1216;
    color: #66737f;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.billing-badge[b-bzj3ynaxim] {
    color: #7f8d99;
}

/* ============================================================
   BUSINESS CARD / INPUTS
   ============================================================ */

.business-card[b-bzj3ynaxim] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent), var(--surface);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.field[b-bzj3ynaxim] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.field-label-row[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

    .field-label-row label[b-bzj3ynaxim] {
        color: #dfe4e7;
        font-size: 11px;
        font-weight: 650;
    }

    .field-label-row > span[b-bzj3ynaxim] {
        color: #586571;
        font-size: 9px;
        font-weight: 650;
        letter-spacing: 0.35px;
        text-transform: uppercase;
    }

.input-shell[b-bzj3ynaxim] {
    position: relative;
}

.input-icon[b-bzj3ynaxim] {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: #5d6a75;
    pointer-events: none;
    transition: color 0.15s ease;
}

.input-shell:focus-within .input-icon[b-bzj3ynaxim] {
    color: var(--accent);
}

/* InputText is a child component, so ::deep is required for
   Blazor CSS isolation to reach the rendered <input>. */
.input-shell[b-bzj3ynaxim]  .text-input {
    width: 100%;
    height: 47px;
    padding: 0 14px 0 39px;
    appearance: none;
    outline: none;
    border: 1px solid #29323a;
    border-radius: 10px;
    background: #0a0e12 !important;
    color: #edf1f3 !important;
    caret-color: var(--accent);
    font-family: inherit;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .input-shell[b-bzj3ynaxim]  .text-input::placeholder {
        color: #4f5b65;
        opacity: 1;
    }

    .input-shell[b-bzj3ynaxim]  .text-input:hover {
        border-color: #35414b;
    }

    .input-shell[b-bzj3ynaxim]  .text-input:focus {
        border-color: var(--accent);
        background: #0b1013 !important;
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

.field[b-bzj3ynaxim]  .validation-message {
    margin-top: 6px;
    color: var(--danger);
    font-size: 10px;
}

.field-help[b-bzj3ynaxim] {
    margin-top: 8px;
    color: #5e6b76;
    font-size: 10px;
    line-height: 1.45;
}


.business-card > .field[b-bzj3ynaxim] {
    max-width: 620px;
}

/* ============================================================
   PLAN CARDS
   ============================================================ */

.plans-grid[b-bzj3ynaxim] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.plan-card[b-bzj3ynaxim] {
    position: relative;
    min-width: 0;
    min-height: 300px;
    padding: 18px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 45%), #101419;
    color: #ffffff;
    font-family: inherit;
    box-shadow: 0 13px 34px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

    .plan-card[b-bzj3ynaxim]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 14%;
        right: 14%;
        height: 1px;
        opacity: 0;
        background: linear-gradient(90deg, transparent, rgba(59, 208, 189, 0.9), transparent);
        transition: opacity 0.16s ease;
    }

    .plan-card:hover[b-bzj3ynaxim] {
        transform: translateY(-3px);
        border-color: #35414a;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 50%), #12171c;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }

        .plan-card:hover[b-bzj3ynaxim]::before,
        .plan-card.selected[b-bzj3ynaxim]::before {
            opacity: 1;
        }

    .plan-card.selected[b-bzj3ynaxim] {
        transform: translateY(-2px);
        border-color: rgba(59, 208, 189, 0.72);
        background: radial-gradient(circle at 50% 0%, rgba(59, 208, 189, 0.08), transparent 44%), #101816;
        box-shadow: 0 0 0 1px rgba(59, 208, 189, 0.10), 0 18px 48px rgba(0, 0, 0, 0.24), 0 8px 38px rgba(43, 181, 163, 0.05);
    }

.recommended-badge[b-bzj3ynaxim] {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 25px;
    padding: 0 10px;
    border-bottom-left-radius: 9px;
    background: var(--accent);
    color: #05110f;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.72px;
    box-shadow: 0 5px 14px rgba(59, 208, 189, 0.14);
}

    .recommended-badge svg[b-bzj3ynaxim] {
        width: 9px;
        height: 9px;
    }

.plan-card-header[b-bzj3ynaxim] {
    min-height: 27px;
    margin-bottom: 18px;
}

.plan-select[b-bzj3ynaxim] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.radio-circle[b-bzj3ynaxim] {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 1px solid #3b4752;
    border-radius: 50%;
    background: #0c1115;
    color: #07110f;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.plan-card.selected .radio-circle[b-bzj3ynaxim] {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.08);
}

.selected-check[b-bzj3ynaxim] {
    width: 11px;
    height: 11px;
}

.plan-select-label[b-bzj3ynaxim] {
    color: #56636f;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.plan-card.selected .plan-select-label[b-bzj3ynaxim] {
    color: #77dacf;
}

.plan-top[b-bzj3ynaxim] {
    min-height: 74px;
}

.plan-name[b-bzj3ynaxim] {
    margin-bottom: 9px;
    color: #f5f7f8;
    font-size: 14px;
    font-weight: 720;
    letter-spacing: -0.2px;
}

.plan-price[b-bzj3ynaxim] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

    .plan-price strong[b-bzj3ynaxim] {
        color: #ffffff;
        font-size: 26px;
        font-weight: 720;
        line-height: 1;
        letter-spacing: -1px;
    }

    .plan-price span[b-bzj3ynaxim] {
        color: #697683;
        font-size: 9px;
        font-weight: 550;
    }

.vehicle-capacity[b-bzj3ynaxim] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid #202a31;
    border-radius: 10px;
    background: #0c1115;
}

    .vehicle-capacity > span[b-bzj3ynaxim] {
        color: #57646f;
        font-size: 8px;
        font-weight: 750;
        letter-spacing: 0.48px;
        text-transform: uppercase;
    }

    .vehicle-capacity strong[b-bzj3ynaxim] {
        color: #dce3e6;
        font-size: 10px;
        font-weight: 650;
    }

.plan-card.selected .vehicle-capacity[b-bzj3ynaxim] {
    border-color: rgba(59, 208, 189, 0.18);
    background: rgba(59, 208, 189, 0.045);
}

    .plan-card.selected .vehicle-capacity strong[b-bzj3ynaxim] {
        color: #bcece5;
    }

.plan-divider[b-bzj3ynaxim] {
    height: 1px;
    margin: 16px 0;
    background: #222a31;
}

.plan-details[b-bzj3ynaxim] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-feature[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7f8c97;
    font-size: 10px;
    line-height: 1.35;
}

.feature-check[b-bzj3ynaxim] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: rgba(59, 208, 189, 0.08);
    color: var(--accent);
}

    .feature-check svg[b-bzj3ynaxim] {
        width: 10px;
        height: 10px;
    }

.plan-card.selected .plan-feature[b-bzj3ynaxim] {
    color: #96a49f;
}

/* ============================================================
   ACTION AREA
   ============================================================ */

.form-footer[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 18px 20px;
    border: 1px solid #202931;
    border-radius: 15px;
    background: linear-gradient(90deg, rgba(59, 208, 189, 0.035), transparent 35%), rgba(15, 20, 24, 0.88);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.selection-summary[b-bzj3ynaxim] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.selection-label-row[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .selection-label-row > span:first-child[b-bzj3ynaxim] {
        color: #65727e;
        font-size: 8px;
        font-weight: 750;
        letter-spacing: 0.7px;
        text-transform: uppercase;
    }

.selection-ready[b-bzj3ynaxim] {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border: 1px solid rgba(59, 208, 189, 0.20);
    border-radius: 999px;
    background: rgba(59, 208, 189, 0.07);
    color: #69d5c7;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.selection-summary strong[b-bzj3ynaxim] {
    color: #eef2f4;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.15px;
}

.selection-dot[b-bzj3ynaxim] {
    margin: 0 2px;
    color: #4e5a64;
}

.selection-summary small[b-bzj3ynaxim] {
    color: #626f7b;
    font-size: 9px;
    line-height: 1.4;
}

.continue-button[b-bzj3ynaxim] {
    min-width: 250px;
    height: 46px;
    padding: 0 10px 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient(180deg, #4bd6c4, #35c5b2);
    color: #06110f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 11px 24px rgba(42, 190, 170, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

    .continue-button:hover:not(:disabled)[b-bzj3ynaxim] {
        transform: translateY(-2px);
        filter: brightness(1.04);
        box-shadow: 0 15px 30px rgba(42, 190, 170, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .continue-button:active:not(:disabled)[b-bzj3ynaxim] {
        transform: translateY(0);
    }

    .continue-button:disabled[b-bzj3ynaxim] {
        cursor: default;
        opacity: 0.62;
    }

.button-arrow[b-bzj3ynaxim] {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(5, 17, 15, 0.09);
}

    .button-arrow svg[b-bzj3ynaxim] {
        width: 15px;
        height: 15px;
    }

.button-spinner[b-bzj3ynaxim] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0, 0, 0, 0.24);
    border-top-color: #06110f;
    border-radius: 50%;
    animation: recono-spin-b-bzj3ynaxim 0.8s linear infinite;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert[b-bzj3ynaxim] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 28px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 11px;
}

    .alert > div:last-child[b-bzj3ynaxim] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .alert strong[b-bzj3ynaxim] {
        font-size: 11px;
    }

    .alert span[b-bzj3ynaxim] {
        opacity: 0.82;
        line-height: 1.45;
    }

.alert-icon[b-bzj3ynaxim] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.alert-error[b-bzj3ynaxim] {
    border: 1px solid rgba(226, 93, 93, 0.26);
    background: rgba(198, 66, 66, 0.08);
    color: #ff9b9b;
}

    .alert-error .alert-icon[b-bzj3ynaxim] {
        background: rgba(226, 93, 93, 0.14);
    }

.alert-info[b-bzj3ynaxim] {
    border: 1px solid rgba(59, 208, 189, 0.20);
    background: rgba(59, 208, 189, 0.06);
    color: #99e3da;
}

    .alert-info .alert-icon[b-bzj3ynaxim] {
        background: rgba(59, 208, 189, 0.12);
    }

/* ============================================================
   LOADING
   ============================================================ */

.loading-state[b-bzj3ynaxim] {
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #f0f3f4;
}

    .loading-state strong[b-bzj3ynaxim] {
        font-size: 13px;
    }

    .loading-state span[b-bzj3ynaxim] {
        color: #6c7883;
        font-size: 10px;
    }

.spinner[b-bzj3ynaxim] {
    width: 30px;
    height: 30px;
    margin-bottom: 7px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: recono-spin-b-bzj3ynaxim 0.8s linear infinite;
}

@keyframes recono-spin-b-bzj3ynaxim {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

.onboarding-footer[b-bzj3ynaxim] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    color: #4f5c66;
    font-size: 9px;
}

.footer-item[b-bzj3ynaxim] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .footer-item svg[b-bzj3ynaxim] {
        width: 12px;
        height: 12px;
        color: #5f6d77;
    }

.footer-divider[b-bzj3ynaxim] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #303941;
}

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

@media (max-width: 1050px) {
    .plans-grid[b-bzj3ynaxim] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-card[b-bzj3ynaxim] {
        min-height: 285px;
    }
}

@media (max-width: 780px) {
    .onboarding-page[b-bzj3ynaxim] {
        padding: 22px 18px 52px;
    }

    .onboarding-header[b-bzj3ynaxim] {
        margin-bottom: 38px;
    }

    .intro-content[b-bzj3ynaxim] {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .intro-meta[b-bzj3ynaxim] {
        width: 100%;
        max-width: 300px;
    }

    .business-card[b-bzj3ynaxim] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section-badge[b-bzj3ynaxim] {
        display: none;
    }

    .form-footer[b-bzj3ynaxim] {
        align-items: stretch;
        flex-direction: column;
    }

    .continue-button[b-bzj3ynaxim] {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .brand-subtitle[b-bzj3ynaxim] {
        display: none;
    }

    .setup-status[b-bzj3ynaxim] {
        height: 30px;
        padding: 0 10px;
        font-size: 9px;
    }

    .intro-section[b-bzj3ynaxim] {
        margin-bottom: 34px;
        padding-bottom: 28px;
    }

        .intro-section h1[b-bzj3ynaxim] {
            font-size: 34px;
        }

        .intro-section p[b-bzj3ynaxim] {
            font-size: 13px;
        }

    .plans-grid[b-bzj3ynaxim] {
        grid-template-columns: 1fr;
    }

    .plan-card[b-bzj3ynaxim] {
        min-height: auto;
    }

    .onboarding-footer[b-bzj3ynaxim] {
        gap: 8px;
    }

    .footer-divider[b-bzj3ynaxim] {
        display: none;
    }

    .onboarding-footer > span[b-bzj3ynaxim] {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plan-card[b-bzj3ynaxim],
    .continue-button[b-bzj3ynaxim],
    .radio-circle[b-bzj3ynaxim] {
        transition: none;
    }

    .spinner[b-bzj3ynaxim],
    .button-spinner[b-bzj3ynaxim] {
        animation-duration: 1.5s;
    }
}
/* /Pages/ReconBoard.razor.rz.scp.css */
/* ============================================================
   RECONO RECON BOARD
   ============================================================ */

.recon-board-page[b-eixfvhefad] {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   HEADER
   ============================================================ */

.board-header[b-eixfvhefad] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.board-heading[b-eixfvhefad] {
    min-width: 0;
}


.eyebrow[b-eixfvhefad] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.45px;
}


.eyebrow-dot[b-eixfvhefad] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}


.board-heading h1[b-eixfvhefad] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}


.board-heading p[b-eixfvhefad] {
    margin: 0;
    max-width: 710px;
    color: #788591;
    font-size: 13px;
    line-height: 1.6;
}


.header-actions[b-eixfvhefad] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


.live-pill[b-eixfvhefad] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #232c34;
    border-radius: 10px;
    background: rgba(13, 18, 22, 0.82);
    color: #788691;
    font-size: 11px;
    font-weight: 700;
}


.live-dot[b-eixfvhefad] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.07);
}


.primary-action[b-eixfvhefad] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient( 180deg, #4bd6c4, #35c5b2 );
    color: #06110f;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}


    .primary-action:hover[b-eixfvhefad] {
        color: #06110f;
        transform: translateY(-1px);
        filter: brightness(1.035);
    }


.action-icon[b-eixfvhefad] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}


    .action-icon svg[b-eixfvhefad] {
        width: 14px;
        height: 14px;
    }


/* ============================================================
   ALERT
   ============================================================ */

.alert[b-eixfvhefad] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 11px;
}


.alert-error[b-eixfvhefad] {
    border: 1px solid rgba(226, 93, 93, 0.25);
    background: rgba(198, 66, 66, 0.065);
    color: #ee9191;
}


.alert-icon[b-eixfvhefad] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(226, 93, 93, 0.12);
    font-size: 10px;
    font-weight: 850;
}


.alert > div[b-eixfvhefad] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.alert strong[b-eixfvhefad] {
    color: #f1a1a1;
    font-size: 11px;
}


.alert span[b-eixfvhefad] {
    line-height: 1.5;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.board-toolbar[b-eixfvhefad] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.012), transparent 55% ), rgba(15, 20, 24, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}


.toolbar-left[b-eixfvhefad] {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}


.toolbar-right[b-eixfvhefad] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


.search-field[b-eixfvhefad] {
    position: relative;
    width: 315px;
    min-width: 220px;
}


    .search-field > svg[b-eixfvhefad] {
        position: absolute;
        top: 50%;
        left: 12px;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
        color: #596771;
        pointer-events: none;
    }


    .search-field input[b-eixfvhefad],
    .filter-field select[b-eixfvhefad] {
        width: 100%;
        height: 39px;
        outline: none;
        border: 1px solid #29323a;
        border-radius: 9px;
        background: #0a0e12;
        color: #e5eaed;
        font-family: inherit;
        font-size: 11px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }


    .search-field input[b-eixfvhefad] {
        padding: 0 12px 0 36px;
    }


        .search-field input[b-eixfvhefad]::placeholder {
            color: #4c5963;
        }


        .search-field input:focus[b-eixfvhefad],
        .filter-field select:focus[b-eixfvhefad] {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.075);
        }


.filter-field[b-eixfvhefad] {
    width: 175px;
}


    .filter-field label[b-eixfvhefad] {
        display: block;
        margin-bottom: 5px;
        color: #61707b;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.35px;
        text-transform: uppercase;
    }


    .filter-field select[b-eixfvhefad] {
        appearance: none;
        padding: 0 32px 0 11px;
        cursor: pointer;
        background-image: linear-gradient( 45deg, transparent 50%, #61717c 50% ), linear-gradient( 135deg, #61717c 50%, transparent 50% );
        background-position: calc(100% - 16px) 17px, calc(100% - 12px) 17px;
        background-size: 4px 4px, 4px 4px;
        background-repeat: no-repeat;
        background-color: #0a0e12;
    }


.quick-filters[b-eixfvhefad] {
    display: flex;
    align-items: center;
    gap: 5px;
}


.quick-filter[b-eixfvhefad] {
    height: 34px;
    padding: 0 11px;
    border: 1px solid #263038;
    border-radius: 8px;
    background: #0d1216;
    color: #687680;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}


    .quick-filter:hover[b-eixfvhefad] {
        border-color: #34404a;
        color: #99a5ad;
    }


    .quick-filter.active[b-eixfvhefad] {
        border-color: rgba(59, 208, 189, 0.20);
        background: rgba(59, 208, 189, 0.075);
        color: #79d9cd;
    }


.board-count[b-eixfvhefad] {
    color: #65727d;
    font-size: 10px;
    font-weight: 700;
}


.refresh-button[b-eixfvhefad] {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #28323a;
    border-radius: 8px;
    background: #0d1216;
    color: #77858f;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}


    .refresh-button:hover:not(:disabled)[b-eixfvhefad] {
        border-color: #36414a;
        color: #a3adb4;
    }


    .refresh-button:disabled[b-eixfvhefad] {
        cursor: default;
        opacity: 0.5;
    }


    .refresh-button svg[b-eixfvhefad] {
        width: 13px;
        height: 13px;
    }


/* ============================================================
   BOARD
   ============================================================ */

.recon-board[b-eixfvhefad] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 1px 12px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 119, 130, 0.30) transparent;
    transition: opacity 0.15s ease;
}


    .recon-board.refreshing[b-eixfvhefad] {
        opacity: 0.62;
        pointer-events: none;
    }


    .recon-board[b-eixfvhefad]::-webkit-scrollbar {
        height: 9px;
    }


    .recon-board[b-eixfvhefad]::-webkit-scrollbar-track {
        background: transparent;
    }


    .recon-board[b-eixfvhefad]::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(103, 119, 130, 0.30);
        background-clip: padding-box;
    }


.recon-column[b-eixfvhefad] {
    width: 285px;
    min-width: 285px;
    overflow: hidden;
    border: 1px solid #222a32;
    border-radius: 14px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.012), transparent 42% ), #0e1317;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}


.completion-column[b-eixfvhefad] {
    border-color: rgba(59, 208, 189, 0.18);
    background: radial-gradient( circle at 50% 0%, rgba(59, 208, 189, 0.045), transparent 36% ), #0e1516;
}


/* ============================================================
   COLUMN HEADER
   ============================================================ */

.column-header[b-eixfvhefad] {
    min-height: 93px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid #20282f;
}


.column-heading[b-eixfvhefad] {
    min-width: 0;
}


.column-title-row[b-eixfvhefad] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}


.stage-dot[b-eixfvhefad] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #64737d;
}


    .stage-dot.completion[b-eixfvhefad] {
        background: var(--accent);
        box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.06);
    }


.column-title-row h2[b-eixfvhefad] {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: #dce2e5;
    font-size: 12px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.column-count[b-eixfvhefad] {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 1px solid #29333b;
    border-radius: 6px;
    background: #10161b;
    color: #74818b;
    font-size: 9px;
    font-weight: 800;
}


.column-header p[b-eixfvhefad] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #596671;
    font-size: 9px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.column-age[b-eixfvhefad] {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #61707a;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}


    .column-age.warning[b-eixfvhefad] {
        color: #cf9f52;
    }


    .column-age.critical[b-eixfvhefad] {
        color: #df7f7f;
    }


/* ============================================================
   COLUMN BODY
   ============================================================ */

.column-body[b-eixfvhefad] {
    min-height: 330px;
    max-height: calc(100vh - 370px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 119, 130, 0.20) transparent;
}


    .column-body[b-eixfvhefad]::-webkit-scrollbar {
        width: 7px;
    }


    .column-body[b-eixfvhefad]::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(103, 119, 130, 0.22);
        background-clip: padding-box;
    }


/* ============================================================
   VEHICLE CARD
   ============================================================ */

.vehicle-card[b-eixfvhefad] {
    position: relative;
    padding: 12px;
    cursor: grab;
    border: 1px solid #252f37;
    border-radius: 11px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.013), transparent 60% ), #11171c;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.018);
    transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}


    .vehicle-card:hover[b-eixfvhefad] {
        transform: translateY(-1px);
        border-color: #35414a;
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.018), transparent 60% ), #12191e;
        box-shadow: 0 11px 26px rgba(0, 0, 0, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.022);
    }


    .vehicle-card:active[b-eixfvhefad] {
        cursor: grabbing;
    }


    .vehicle-card.aging[b-eixfvhefad] {
        border-color: rgba(213, 166, 84, 0.23);
        background: linear-gradient( 180deg, rgba(213, 166, 84, 0.035), transparent 60% ), #131714;
    }


    .vehicle-card.critical[b-eixfvhefad] {
        border-color: rgba(224, 116, 116, 0.24);
        background: linear-gradient( 180deg, rgba(224, 116, 116, 0.035), transparent 60% ), #161313;
    }


    .vehicle-card.ready[b-eixfvhefad] {
        border-color: rgba(59, 208, 189, 0.20);
        background: linear-gradient( 180deg, rgba(59, 208, 189, 0.04), transparent 60% ), #101817;
    }


.vehicle-card-topline[b-eixfvhefad] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 11px;
}


.vehicle-title[b-eixfvhefad] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


    .vehicle-title strong[b-eixfvhefad] {
        overflow: hidden;
        color: #dce2e5;
        font-size: 11px;
        font-weight: 720;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .vehicle-title span[b-eixfvhefad] {
        color: #64717b;
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 9px;
        font-weight: 650;
    }


.age-badge[b-eixfvhefad] {
    flex: 0 0 auto;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #29333b;
    border-radius: 999px;
    background: #0c1115;
    color: #87939c;
    font-size: 9px;
    font-weight: 800;
}


    .age-badge.warning[b-eixfvhefad] {
        border-color: rgba(213, 166, 84, 0.21);
        background: rgba(213, 166, 84, 0.055);
        color: #d5aa60;
    }


    .age-badge.critical[b-eixfvhefad] {
        border-color: rgba(224, 116, 116, 0.22);
        background: rgba(224, 116, 116, 0.055);
        color: #e18b8b;
    }


    .age-badge.ready[b-eixfvhefad] {
        border-color: rgba(59, 208, 189, 0.19);
        background: rgba(59, 208, 189, 0.055);
        color: #82ddd2;
    }


.vehicle-meta[b-eixfvhefad] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 9px 0;
    border-top: 1px solid #20282f;
    border-bottom: 1px solid #20282f;
}


    .vehicle-meta > div[b-eixfvhefad] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .vehicle-meta span[b-eixfvhefad] {
        color: #53616b;
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.35px;
    }


    .vehicle-meta strong[b-eixfvhefad] {
        overflow: hidden;
        color: #aeb8be;
        font-size: 9px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.warning-text[b-eixfvhefad] {
    color: #d4a75a !important;
}


.vehicle-card-footer[b-eixfvhefad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 10px;
}


.owner[b-eixfvhefad] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}


.owner-avatar[b-eixfvhefad] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border: 1px solid #29333b;
    border-radius: 7px;
    background: #0c1115;
    color: #66747e;
    font-size: 8px;
    font-weight: 800;
}


.owner > span:last-child[b-eixfvhefad] {
    overflow: hidden;
    color: #697781;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.attention-pill[b-eixfvhefad],
.active-pill[b-eixfvhefad],
.ready-pill[b-eixfvhefad] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}


.active-pill[b-eixfvhefad] {
    border: 1px solid rgba(59, 208, 189, 0.12);
    background: rgba(59, 208, 189, 0.04);
    color: #6ecfc2;
}


.attention-pill[b-eixfvhefad] {
    border: 1px solid rgba(213, 166, 84, 0.17);
    background: rgba(213, 166, 84, 0.05);
    color: #d0a157;
}


.ready-pill[b-eixfvhefad] {
    border: 1px solid rgba(59, 208, 189, 0.17);
    background: rgba(59, 208, 189, 0.065);
    color: #86dfd4;
}


/* ============================================================
   EMPTY DROP AREA
   ============================================================ */

.empty-column[b-eixfvhefad] {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 2px;
    border: 1px dashed #28323a;
    border-radius: 10px;
    color: #4e5c66;
    font-size: 9px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}


    .empty-column svg[b-eixfvhefad] {
        width: 18px;
        height: 18px;
        opacity: 0.7;
    }


    .empty-column.drop-ready[b-eixfvhefad] {
        border-color: rgba(59, 208, 189, 0.26);
        background: rgba(59, 208, 189, 0.035);
        color: #72d2c6;
    }


        .empty-column.drop-ready.completion[b-eixfvhefad] {
            background: rgba(59, 208, 189, 0.055);
        }


/* ============================================================
   COLUMN FOOTER
   ============================================================ */

.column-footer[b-eixfvhefad] {
    min-height: 35px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-top: 1px solid #20282f;
    color: #56636d;
    font-size: 8px;
    font-weight: 650;
}


/* ============================================================
   LOADING / EMPTY
   ============================================================ */

.loading-panel[b-eixfvhefad],
.empty-panel[b-eixfvhefad] {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
}


.loading-spinner[b-eixfvhefad],
.mini-spinner[b-eixfvhefad] {
    border-radius: 50%;
    animation: recon-board-spin-b-eixfvhefad 0.8s linear infinite;
}


.loading-spinner[b-eixfvhefad] {
    width: 30px;
    height: 30px;
    margin-bottom: 9px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
}


.loading-panel strong[b-eixfvhefad] {
    color: #d8dfe2;
    font-size: 12px;
}


.loading-panel span[b-eixfvhefad] {
    margin-top: 4px;
    color: #5e6b75;
    font-size: 10px;
}


.empty-icon[b-eixfvhefad] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border: 1px solid rgba(245, 195, 107, 0.15);
    border-radius: 10px;
    background: rgba(245, 195, 107, 0.05);
    color: #d7aa5c;
    font-weight: 850;
}


.empty-panel h2[b-eixfvhefad] {
    margin: 0 0 6px;
    color: #dde3e5;
    font-size: 14px;
}


.empty-panel p[b-eixfvhefad] {
    margin: 0;
    color: #66737d;
    font-size: 11px;
}


@keyframes recon-board-spin-b-eixfvhefad {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   BOARD FOOTER
   ============================================================ */

.board-footer[b-eixfvhefad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 3px;
    padding: 11px 13px;
    border: 1px solid rgba(59, 208, 189, 0.10);
    border-radius: 10px;
    background: rgba(59, 208, 189, 0.025);
}


.board-footer-note[b-eixfvhefad] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #61707a;
    font-size: 10px;
    line-height: 1.5;
}


.footer-info[b-eixfvhefad] {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(59, 208, 189, 0.08);
    color: #70d4c7;
    font-size: 8px;
    font-weight: 850;
}


.moving-indicator[b-eixfvhefad] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7a888f;
    font-size: 9px;
    font-weight: 700;
}


.mini-spinner[b-eixfvhefad] {
    width: 12px;
    height: 12px;
    border: 2px solid #28323a;
    border-top-color: var(--accent);
}


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

@media (max-width: 1180px) {

    .board-toolbar[b-eixfvhefad] {
        align-items: stretch;
        flex-direction: column;
    }


    .toolbar-left[b-eixfvhefad] {
        flex-wrap: wrap;
    }


    .toolbar-right[b-eixfvhefad] {
        justify-content: space-between;
    }
}


@media (max-width: 760px) {

    .board-header[b-eixfvhefad] {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }


    .header-actions[b-eixfvhefad] {
        width: 100%;
    }


    .live-pill[b-eixfvhefad] {
        flex: 1;
    }


    .toolbar-left[b-eixfvhefad] {
        align-items: stretch;
        flex-direction: column;
    }


    .search-field[b-eixfvhefad],
    .filter-field[b-eixfvhefad] {
        width: 100%;
        min-width: 0;
    }


    .quick-filters[b-eixfvhefad] {
        overflow-x: auto;
        padding-bottom: 3px;
    }


    .quick-filter[b-eixfvhefad] {
        flex: 0 0 auto;
    }


    .board-footer[b-eixfvhefad] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 480px) {

    .header-actions[b-eixfvhefad] {
        align-items: stretch;
        flex-direction: column;
    }


    .live-pill[b-eixfvhefad],
    .primary-action[b-eixfvhefad] {
        justify-content: center;
    }


    .recon-column[b-eixfvhefad] {
        width: 270px;
        min-width: 270px;
    }
}


/* ============================================================
   DRAG / DROP STATES
   ============================================================ */

.vehicle-card[draggable="true"][b-eixfvhefad] {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: element;
}

.vehicle-card.dragging[b-eixfvhefad] {
    opacity: 0.30;
    transform: scale(0.985);
    cursor: grabbing;
}

.recon-column.drag-active[b-eixfvhefad] {
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.recon-column.drag-over[b-eixfvhefad] {
    border-color: rgba(59, 208, 189, 0.48);
    background: radial-gradient( circle at 50% 0%, rgba(59, 208, 189, 0.08), transparent 40% ), #0f1718;
    box-shadow: 0 0 0 1px rgba(59, 208, 189, 0.10), 0 16px 38px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

    .recon-column.drag-over .column-body[b-eixfvhefad] {
        background: rgba(59, 208, 189, 0.018);
    }

    .recon-column.drag-over .empty-column[b-eixfvhefad] {
        border-color: rgba(59, 208, 189, 0.40);
        background: rgba(59, 208, 189, 0.055);
        color: #85ded3;
    }

.recon-column.completion-column.drag-over[b-eixfvhefad] {
    border-color: rgba(59, 208, 189, 0.62);
    background: radial-gradient( circle at 50% 0%, rgba(59, 208, 189, 0.11), transparent 42% ), #101919;
}
/* /Pages/Vehicles/AddVehicle.razor.rz.scp.css */
/* ============================================================
   RECONO ADD VEHICLE
   ============================================================ */

.add-vehicle-page[b-925sir7nt7] {
    width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.page-header[b-925sir7nt7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.page-heading[b-925sir7nt7] {
    min-width: 0;
}

.back-link[b-925sir7nt7] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 21px;
    color: #65737e;
    font-size: 9px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

    .back-link:hover[b-925sir7nt7] {
        color: #9ba8b1;
        transform: translateX(-2px);
    }

    .back-link svg[b-925sir7nt7] {
        width: 13px;
        height: 13px;
    }

.eyebrow[b-925sir7nt7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.45px;
}

.eyebrow-dot[b-925sir7nt7] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}

.page-heading h1[b-925sir7nt7] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}

.page-heading p[b-925sir7nt7] {
    margin: 0;
    max-width: 670px;
    color: #788591;
    font-size: 12px;
    line-height: 1.6;
}


/* ============================================================
   CAPACITY
   ============================================================ */

.capacity-card[b-925sir7nt7] {
    width: 245px;
    flex: 0 0 245px;
    padding: 15px 16px;
    border: 1px solid #232c34;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(59, 208, 189, 0.035), transparent 65%), rgba(13, 18, 22, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.capacity-topline[b-925sir7nt7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #65727d;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.capacity-status[b-925sir7nt7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6f7d87;
    font-size: 7px;
    text-transform: none;
    letter-spacing: 0;
}

    .capacity-status > span[b-925sir7nt7] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.07);
    }

.capacity-value[b-925sir7nt7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 10px;
}

    .capacity-value strong[b-925sir7nt7] {
        color: #eef3f4;
        font-size: 22px;
        font-weight: 720;
        letter-spacing: -0.6px;
    }

    .capacity-value span[b-925sir7nt7] {
        color: #66737d;
        font-size: 9px;
    }

.capacity-track[b-925sir7nt7] {
    width: 100%;
    height: 5px;
    overflow: hidden;
    margin-bottom: 8px;
    border-radius: 999px;
    background: #1c252b;
}

    .capacity-track > span[b-925sir7nt7] {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #2db8a7, #54d8c7);
    }

.capacity-card small[b-925sir7nt7] {
    color: #53616c;
    font-size: 8px;
    line-height: 1.45;
}


/* ============================================================
   ALERT
   ============================================================ */

.alert[b-925sir7nt7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 9px;
}

.alert-error[b-925sir7nt7] {
    border: 1px solid rgba(226, 93, 93, 0.25);
    background: rgba(198, 66, 66, 0.065);
    color: #ee9191;
}

.alert-icon[b-925sir7nt7] {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(226, 93, 93, 0.12);
    font-size: 10px;
    font-weight: 850;
}

.alert > div[b-925sir7nt7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alert strong[b-925sir7nt7] {
    color: #f1a1a1;
    font-size: 9px;
}

.alert span[b-925sir7nt7] {
    line-height: 1.5;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.form-layout[b-925sir7nt7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 14px;
}

.form-main[b-925sir7nt7],
.form-sidebar[b-925sir7nt7] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


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

.form-panel[b-925sir7nt7],
.summary-panel[b-925sir7nt7],
.workflow-panel[b-925sir7nt7] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 55%), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}

.form-panel[b-925sir7nt7] {
    padding: 20px;
}

    .form-panel[b-925sir7nt7]::before,
    .summary-panel[b-925sir7nt7]::before,
    .workflow-panel[b-925sir7nt7]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.48;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    }


/* ============================================================
   SECTION HEADER
   ============================================================ */

.section-header[b-925sir7nt7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 21px;
    padding-bottom: 17px;
    border-bottom: 1px solid #20282f;
}

.compact-header[b-925sir7nt7] {
    margin-bottom: 15px;
}

.section-icon[b-925sir7nt7] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 9px;
    background: rgba(59, 208, 189, 0.055);
    color: #54cdbd;
}

    .section-icon svg[b-925sir7nt7] {
        width: 16px;
        height: 16px;
    }

.section-header > div:nth-child(2)[b-925sir7nt7] {
    min-width: 0;
}

.section-kicker[b-925sir7nt7] {
    margin-bottom: 3px;
    color: #52606b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.95px;
    text-transform: uppercase;
}

.section-header h2[b-925sir7nt7] {
    margin: 0 0 4px;
    color: #eef2f4;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.section-header p[b-925sir7nt7] {
    margin: 0;
    color: #65727d;
    font-size: 9px;
    line-height: 1.5;
}

.section-badge[b-925sir7nt7] {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border: 1px solid #242e36;
    border-radius: 999px;
    background: #0d1216;
    color: #63717c;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}


/* ============================================================
   FIELDS
   ============================================================ */

.field-grid[b-925sir7nt7] {
    display: grid;
    gap: 16px;
    margin-bottom: 17px;
}

    .field-grid:last-child[b-925sir7nt7] {
        margin-bottom: 0;
    }

.field-grid-two[b-925sir7nt7] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid-four[b-925sir7nt7] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field[b-925sir7nt7] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.field-label[b-925sir7nt7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

    .field-label label[b-925sir7nt7] {
        color: #d7dde0;
        font-size: 9px;
        font-weight: 680;
    }

    .field-label span[b-925sir7nt7] {
        color: #56636e;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.35px;
        text-transform: uppercase;
    }

.field[b-925sir7nt7]  .vehicle-input,
.field[b-925sir7nt7]  .vehicle-select,
.field[b-925sir7nt7]  .vehicle-textarea {
    width: 100%;
    appearance: none;
    outline: none;
    border: 1px solid #29323a;
    border-radius: 9px;
    background: #0a0e12 !important;
    color: #e8edef !important;
    font-family: inherit;
    font-size: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.field[b-925sir7nt7]  .vehicle-input,
.field[b-925sir7nt7]  .vehicle-select {
    height: 42px;
    padding: 0 11px;
}

.field[b-925sir7nt7]  .vehicle-select {
    padding-right: 34px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #61717c 50%), linear-gradient(135deg, #61717c 50%, transparent 50%) !important;
    background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px !important;
    background-size: 4px 4px, 4px 4px !important;
    background-repeat: no-repeat !important;
    background-color: #0a0e12 !important;
}

.field[b-925sir7nt7]  .vehicle-textarea {
    min-height: 105px;
    resize: vertical;
    padding: 11px 12px;
    line-height: 1.55;
}

    .field[b-925sir7nt7]  .vehicle-input::placeholder,
    .field[b-925sir7nt7]  .vehicle-textarea::placeholder {
        color: #4c5963;
        opacity: 1;
    }

    .field[b-925sir7nt7]  .vehicle-input:hover,
    .field[b-925sir7nt7]  .vehicle-select:hover,
    .field[b-925sir7nt7]  .vehicle-textarea:hover {
        border-color: #34404a;
    }

    .field[b-925sir7nt7]  .vehicle-input:focus,
    .field[b-925sir7nt7]  .vehicle-select:focus,
    .field[b-925sir7nt7]  .vehicle-textarea:focus {
        border-color: var(--accent);
        background-color: #0b1013 !important;
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.018);
    }

.field[b-925sir7nt7]  .mono-input {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.2px;
}

.field[b-925sir7nt7]  .validation-message {
    margin-top: 5px;
    color: #ed8d8d;
    font-size: 8px;
    line-height: 1.4;
}

.field-help[b-925sir7nt7] {
    margin-top: 6px;
    color: #53606b;
    font-size: 8px;
    line-height: 1.45;
}

.field[b-925sir7nt7]  input[type="date"]::-webkit-calendar-picker-indicator,
.field[b-925sir7nt7]  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.65);
}


/* ============================================================
   SUMMARY
   ============================================================ */

.summary-panel[b-925sir7nt7],
.workflow-panel[b-925sir7nt7] {
    padding: 17px;
}

.summary-header[b-925sir7nt7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-icon[b-925sir7nt7] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.15);
    border-radius: 9px;
    background: rgba(59, 208, 189, 0.06);
    color: var(--accent);
}

    .summary-icon svg[b-925sir7nt7] {
        width: 16px;
        height: 16px;
    }

.summary-header > div[b-925sir7nt7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-header span:not(.summary-icon)[b-925sir7nt7] {
    color: #5d6a74;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.summary-header strong[b-925sir7nt7] {
    color: #dce2e5;
    font-size: 10px;
    font-weight: 700;
}

.summary-divider[b-925sir7nt7] {
    height: 1px;
    margin: 15px 0;
    background: #20282f;
}

.summary-row[b-925sir7nt7] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 11px;
}

    .summary-row:last-of-type[b-925sir7nt7] {
        margin-bottom: 0;
    }

    .summary-row > span[b-925sir7nt7] {
        color: #5d6974;
        font-size: 8px;
    }

    .summary-row > strong[b-925sir7nt7] {
        min-width: 0;
        overflow: hidden;
        color: #bcc5ca;
        font-size: 8px;
        font-weight: 700;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.summary-active[b-925sir7nt7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .summary-active > span[b-925sir7nt7] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.06);
    }

.summary-note[b-925sir7nt7] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(59, 208, 189, 0.10);
    border-radius: 9px;
    background: rgba(59, 208, 189, 0.03);
}

    .summary-note > span[b-925sir7nt7] {
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(59, 208, 189, 0.09);
        color: #6ad7c9;
        font-size: 8px;
        font-weight: 850;
    }

    .summary-note p[b-925sir7nt7] {
        margin: 0;
        color: #5d6b75;
        font-size: 8px;
        line-height: 1.5;
    }


/* ============================================================
   WORKFLOW
   ============================================================ */

.workflow-title[b-925sir7nt7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

    .workflow-title span[b-925sir7nt7] {
        color: #687681;
        font-size: 8px;
        font-weight: 750;
        letter-spacing: 0.45px;
        text-transform: uppercase;
    }

    .workflow-title strong[b-925sir7nt7] {
        color: #52606a;
        font-size: 7px;
        font-weight: 700;
    }

.workflow-list[b-925sir7nt7] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.workflow-stage[b-925sir7nt7] {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64717c;
    font-size: 8px;
}

    .workflow-stage.selected[b-925sir7nt7] {
        border-color: rgba(59, 208, 189, 0.15);
        background: rgba(59, 208, 189, 0.05);
        color: #8bded4;
    }

.workflow-number[b-925sir7nt7] {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border: 1px solid #263038;
    border-radius: 6px;
    background: #0c1115;
    color: #53616b;
    font-size: 7px;
    font-weight: 800;
}

.workflow-stage.selected .workflow-number[b-925sir7nt7] {
    border-color: rgba(59, 208, 189, 0.21);
    color: #71d7ca;
}


/* ============================================================
   ACTION BAR
   ============================================================ */

.action-bar[b-925sir7nt7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid #202931;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(59, 208, 189, 0.03), transparent 36%), rgba(15, 20, 24, 0.90);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}

    .action-bar > div:first-child[b-925sir7nt7] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        .action-bar > div:first-child strong[b-925sir7nt7] {
            color: #dce2e5;
            font-size: 10px;
            font-weight: 700;
        }

        .action-bar > div:first-child span[b-925sir7nt7] {
            color: #586570;
            font-size: 8px;
            line-height: 1.45;
        }

.action-buttons[b-925sir7nt7] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.secondary-button[b-925sir7nt7],
.save-button[b-925sir7nt7] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.secondary-button[b-925sir7nt7] {
    padding: 0 14px;
    border: 1px solid #28323a;
    background: #0d1216;
    color: #7a8791;
}

    .secondary-button:hover[b-925sir7nt7] {
        color: #aab4ba;
        border-color: #34404a;
    }

.save-button[b-925sir7nt7] {
    min-width: 145px;
    gap: 12px;
    padding: 0 7px 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, #4bd6c4, #35c5b2);
    color: #06110f;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}

    .save-button:hover:not(:disabled)[b-925sir7nt7] {
        transform: translateY(-1px);
        filter: brightness(1.035);
    }

    .save-button:disabled[b-925sir7nt7] {
        cursor: default;
        opacity: 0.65;
    }

.button-icon[b-925sir7nt7] {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}

    .button-icon svg[b-925sir7nt7] {
        width: 13px;
        height: 13px;
    }

.button-spinner[b-925sir7nt7] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(5, 17, 15, 0.25);
    border-top-color: #06110f;
    border-radius: 50%;
    animation: recono-add-vehicle-spin-b-925sir7nt7 0.8s linear infinite;
}

@keyframes recono-add-vehicle-spin-b-925sir7nt7 {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   LOADING / EMPTY
   ============================================================ */

.loading-panel[b-925sir7nt7] {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #dbe1e4;
}

    .loading-panel strong[b-925sir7nt7] {
        margin-top: 5px;
        font-size: 10px;
    }

    .loading-panel span[b-925sir7nt7] {
        color: #5d6b75;
        font-size: 8px;
    }

.loading-spinner[b-925sir7nt7] {
    width: 28px;
    height: 28px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: recono-add-vehicle-spin-b-925sir7nt7 0.8s linear infinite;
}

.setup-required[b-925sir7nt7] {
    min-height: 180px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.setup-icon[b-925sir7nt7] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 195, 107, 0.16);
    border-radius: 8px;
    background: rgba(245, 195, 107, 0.06);
    color: #d8ad62;
    font-size: 11px;
    font-weight: 850;
}

.setup-required h2[b-925sir7nt7] {
    margin: 1px 0 5px;
    color: #e3e8ea;
    font-size: 13px;
}

.setup-required p[b-925sir7nt7] {
    margin: 0 0 3px;
    color: #687681;
    font-size: 9px;
    line-height: 1.5;
}


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

@media (max-width: 1180px) {
    .form-layout[b-925sir7nt7] {
        grid-template-columns: 1fr;
    }

    .form-sidebar[b-925sir7nt7] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .page-header[b-925sir7nt7] {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .capacity-card[b-925sir7nt7] {
        width: 100%;
        flex-basis: auto;
    }

    .field-grid-four[b-925sir7nt7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-bar[b-925sir7nt7] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-buttons[b-925sir7nt7] {
        justify-content: flex-end;
    }
}

@media (max-width: 620px) {
    .field-grid-two[b-925sir7nt7],
    .field-grid-four[b-925sir7nt7],
    .form-sidebar[b-925sir7nt7] {
        grid-template-columns: 1fr;
    }

    .section-badge[b-925sir7nt7] {
        display: none;
    }

    .form-panel[b-925sir7nt7] {
        padding: 16px;
    }

    .action-buttons[b-925sir7nt7] {
        width: 100%;
    }

    .secondary-button[b-925sir7nt7],
    .save-button[b-925sir7nt7] {
        flex: 1;
    }
}

@media (max-width: 420px) {
    .action-buttons[b-925sir7nt7] {
        flex-direction: column-reverse;
    }

    .secondary-button[b-925sir7nt7],
    .save-button[b-925sir7nt7] {
        width: 100%;
    }
}


/* ============================================================
   READABILITY / TYPOGRAPHY PASS
   ============================================================ */

/* Small navigation / utility text */
.back-link[b-925sir7nt7] {
    font-size: 11px;
}

.eyebrow[b-925sir7nt7] {
    font-size: 10px;
}

/* Main page copy */
.page-heading p[b-925sir7nt7] {
    font-size: 13px;
}

/* Capacity card */
.capacity-topline[b-925sir7nt7] {
    font-size: 10px;
}

.capacity-status[b-925sir7nt7] {
    font-size: 9px;
}

.capacity-value span[b-925sir7nt7] {
    font-size: 11px;
}

.capacity-card small[b-925sir7nt7] {
    font-size: 10px;
}

/* Alerts */
.alert[b-925sir7nt7] {
    font-size: 11px;
}

    .alert strong[b-925sir7nt7] {
        font-size: 11px;
    }

/* Section headers */
.section-kicker[b-925sir7nt7] {
    font-size: 9px;
}

.section-header h2[b-925sir7nt7] {
    font-size: 15px;
}

.section-header p[b-925sir7nt7] {
    font-size: 11px;
}

.section-badge[b-925sir7nt7] {
    font-size: 9px;
}

/* Field labels + helper text */
.field-label label[b-925sir7nt7] {
    font-size: 11px;
}

.field-label span[b-925sir7nt7] {
    font-size: 9px;
}

.field[b-925sir7nt7]  .vehicle-input,
.field[b-925sir7nt7]  .vehicle-select,
.field[b-925sir7nt7]  .vehicle-textarea {
    font-size: 12px;
}

.field[b-925sir7nt7]  .validation-message {
    font-size: 10px;
}

.field-help[b-925sir7nt7] {
    font-size: 10px;
}

/* Summary card */
.summary-header span:not(.summary-icon)[b-925sir7nt7] {
    font-size: 9px;
}

.summary-header strong[b-925sir7nt7] {
    font-size: 12px;
}

.summary-row > span[b-925sir7nt7] {
    font-size: 10px;
}

.summary-row > strong[b-925sir7nt7] {
    font-size: 10px;
}

.summary-note p[b-925sir7nt7] {
    font-size: 10px;
}

/* Workflow */
.workflow-title span[b-925sir7nt7] {
    font-size: 10px;
}

.workflow-title strong[b-925sir7nt7] {
    font-size: 9px;
}

.workflow-stage[b-925sir7nt7] {
    font-size: 10px;
}

.workflow-number[b-925sir7nt7] {
    font-size: 9px;
}

/* Action bar */
.action-bar > div:first-child strong[b-925sir7nt7] {
    font-size: 12px;
}

.action-bar > div:first-child span[b-925sir7nt7] {
    font-size: 10px;
}

.secondary-button[b-925sir7nt7],
.save-button[b-925sir7nt7] {
    font-size: 11px;
}

/* Loading / setup states */
.loading-panel strong[b-925sir7nt7] {
    font-size: 12px;
}

.loading-panel span[b-925sir7nt7] {
    font-size: 10px;
}

.setup-required h2[b-925sir7nt7] {
    font-size: 15px;
}

.setup-required p[b-925sir7nt7] {
    font-size: 11px;
}
/* /Pages/Vehicles/EditVehicle.razor.rz.scp.css */
/* ============================================================
   RECONO EDIT VEHICLE
   ============================================================ */

.edit-vehicle-page[b-3j9hpkqn5m] {
    width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.page-header[b-3j9hpkqn5m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.page-heading[b-3j9hpkqn5m] {
    min-width: 0;
}


.back-link[b-3j9hpkqn5m] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    color: #65737e;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}


    .back-link:hover[b-3j9hpkqn5m] {
        color: #9ba8b1;
        transform: translateX(-2px);
    }


    .back-link svg[b-3j9hpkqn5m] {
        width: 13px;
        height: 13px;
    }


.eyebrow[b-3j9hpkqn5m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.45px;
}


.eyebrow-dot[b-3j9hpkqn5m] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}


.page-heading h1[b-3j9hpkqn5m] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}


.page-heading p[b-3j9hpkqn5m] {
    margin: 0;
    max-width: 720px;
    color: #788591;
    font-size: 13px;
    line-height: 1.6;
}


.header-actions[b-3j9hpkqn5m] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
}


.secondary-action[b-3j9hpkqn5m] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #28323a;
    border-radius: 9px;
    background: #0d1216;
    color: #7c8992;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}


    .secondary-action:hover[b-3j9hpkqn5m] {
        border-color: #34404a;
        color: #a6b0b6;
    }


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

.status-pill[b-3j9hpkqn5m] {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #28323a;
    border-radius: 9px;
    background: #0d1216;
    color: #7e8b95;
    font-size: 10px;
    font-weight: 750;
}


    .status-pill > span[b-3j9hpkqn5m] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }


.status-active > span[b-3j9hpkqn5m] {
    background: #3bd0bd;
}


.status-ready > span[b-3j9hpkqn5m] {
    background: #80ddd1;
}


.status-sold > span[b-3j9hpkqn5m] {
    background: #77858f;
}


.status-archived > span[b-3j9hpkqn5m] {
    background: #525e67;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert[b-3j9hpkqn5m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 11px;
}


.alert-error[b-3j9hpkqn5m] {
    border: 1px solid rgba(226, 93, 93, 0.25);
    background: rgba(198, 66, 66, 0.065);
    color: #ee9191;
}


.alert-success[b-3j9hpkqn5m] {
    border: 1px solid rgba(59, 208, 189, 0.19);
    background: rgba(59, 208, 189, 0.055);
    color: #84ddd2;
}


.alert-icon[b-3j9hpkqn5m] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    font-size: 10px;
    font-weight: 850;
}


.alert > div[b-3j9hpkqn5m] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.alert strong[b-3j9hpkqn5m] {
    color: inherit;
    font-size: 11px;
}


.alert span[b-3j9hpkqn5m] {
    line-height: 1.5;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.edit-layout[b-3j9hpkqn5m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 315px;
    align-items: start;
    gap: 14px;
}


.edit-main[b-3j9hpkqn5m],
.edit-sidebar[b-3j9hpkqn5m] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


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

.content-panel[b-3j9hpkqn5m],
.summary-panel[b-3j9hpkqn5m],
.history-panel[b-3j9hpkqn5m] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


.content-panel[b-3j9hpkqn5m] {
    padding: 20px;
}


    .content-panel[b-3j9hpkqn5m]::before,
    .summary-panel[b-3j9hpkqn5m]::before,
    .history-panel[b-3j9hpkqn5m]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.45;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent );
    }


/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section-header[b-3j9hpkqn5m] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #20282f;
}


.compact-header[b-3j9hpkqn5m] {
    margin-bottom: 15px;
}


.section-icon[b-3j9hpkqn5m] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 9px;
    background: rgba(59, 208, 189, 0.055);
    color: #54cdbd;
}


    .section-icon svg[b-3j9hpkqn5m] {
        width: 16px;
        height: 16px;
    }


.section-header > div:nth-child(2)[b-3j9hpkqn5m] {
    min-width: 0;
}


.section-kicker[b-3j9hpkqn5m],
.summary-kicker[b-3j9hpkqn5m] {
    display: block;
    margin-bottom: 3px;
    color: #53616c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.95px;
    text-transform: uppercase;
}


.section-header h2[b-3j9hpkqn5m],
.summary-header h2[b-3j9hpkqn5m],
.history-header h2[b-3j9hpkqn5m] {
    margin: 0 0 4px;
    color: #eef2f4;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
}


.section-header p[b-3j9hpkqn5m] {
    margin: 0;
    color: #65727d;
    font-size: 11px;
    line-height: 1.5;
}


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

.field-grid[b-3j9hpkqn5m] {
    display: grid;
    gap: 16px;
    margin-bottom: 17px;
}


    .field-grid:last-child[b-3j9hpkqn5m] {
        margin-bottom: 0;
    }


.field-grid-two[b-3j9hpkqn5m] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.field-grid-four[b-3j9hpkqn5m] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.field[b-3j9hpkqn5m] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


.field-label[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}


    .field-label label[b-3j9hpkqn5m] {
        color: #d7dde0;
        font-size: 11px;
        font-weight: 680;
    }


    .field-label span[b-3j9hpkqn5m] {
        color: #56636e;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.35px;
        text-transform: uppercase;
    }


.field[b-3j9hpkqn5m]  .vehicle-input,
.field[b-3j9hpkqn5m]  .vehicle-select,
.field[b-3j9hpkqn5m]  .vehicle-textarea {
    width: 100%;
    appearance: none;
    outline: none;
    border: 1px solid #29323a;
    border-radius: 9px;
    background: #0a0e12 !important;
    color: #e8edef !important;
    font-family: inherit;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}


.field[b-3j9hpkqn5m]  .vehicle-input,
.field[b-3j9hpkqn5m]  .vehicle-select {
    height: 42px;
    padding: 0 11px;
}


.field[b-3j9hpkqn5m]  .vehicle-select {
    padding-right: 34px;
    cursor: pointer;
    background-image: linear-gradient( 45deg, transparent 50%, #61717c 50% ), linear-gradient( 135deg, #61717c 50%, transparent 50% ) !important;
    background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px !important;
    background-size: 4px 4px, 4px 4px !important;
    background-repeat: no-repeat !important;
    background-color: #0a0e12 !important;
}


.field[b-3j9hpkqn5m]  .vehicle-textarea {
    min-height: 110px;
    resize: vertical;
    padding: 11px 12px;
    line-height: 1.55;
}


    .field[b-3j9hpkqn5m]  .vehicle-input::placeholder,
    .field[b-3j9hpkqn5m]  .vehicle-textarea::placeholder {
        color: #4c5963;
        opacity: 1;
    }


    .field[b-3j9hpkqn5m]  .vehicle-input:hover,
    .field[b-3j9hpkqn5m]  .vehicle-select:hover,
    .field[b-3j9hpkqn5m]  .vehicle-textarea:hover {
        border-color: #34404a;
    }


    .field[b-3j9hpkqn5m]  .vehicle-input:focus,
    .field[b-3j9hpkqn5m]  .vehicle-select:focus,
    .field[b-3j9hpkqn5m]  .vehicle-textarea:focus {
        border-color: var(--accent);
        background-color: #0b1013 !important;
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.018);
    }


.field[b-3j9hpkqn5m]  .mono-input {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.2px;
}


.field[b-3j9hpkqn5m]  .validation-message {
    margin-top: 5px;
    color: #ed8d8d;
    font-size: 10px;
    line-height: 1.4;
}


.field-help[b-3j9hpkqn5m] {
    margin-top: 6px;
    color: #53606b;
    font-size: 10px;
    line-height: 1.45;
}


.field[b-3j9hpkqn5m]  input[type="date"]::-webkit-calendar-picker-indicator,
.field[b-3j9hpkqn5m]  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.65);
}


/* ============================================================
   SUMMARY
   ============================================================ */

.summary-panel[b-3j9hpkqn5m] {
    padding: 17px;
}


.summary-header[b-3j9hpkqn5m],
.history-header[b-3j9hpkqn5m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}


.summary-header[b-3j9hpkqn5m] {
    margin-bottom: 15px;
}


    .summary-header .status-pill[b-3j9hpkqn5m] {
        min-height: 29px;
        padding: 0 9px;
        border-radius: 8px;
        font-size: 9px;
    }


.metric-grid[b-3j9hpkqn5m] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}


.metric-card[b-3j9hpkqn5m] {
    min-width: 0;
    padding: 11px;
    border: 1px solid #222c33;
    border-radius: 10px;
    background: #0c1115;
}


    .metric-card span[b-3j9hpkqn5m] {
        display: block;
        margin-bottom: 5px;
        color: #586570;
        font-size: 9px;
    }


    .metric-card strong[b-3j9hpkqn5m] {
        color: #d9e0e3;
        font-size: 17px;
        font-weight: 720;
        letter-spacing: -0.4px;
    }


.warning-text[b-3j9hpkqn5m] {
    color: #d8aa5d !important;
}


.summary-divider[b-3j9hpkqn5m] {
    height: 1px;
    margin: 15px 0;
    background: #20282f;
}


.summary-row[b-3j9hpkqn5m] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}


    .summary-row:last-child[b-3j9hpkqn5m] {
        margin-bottom: 0;
    }


    .summary-row span[b-3j9hpkqn5m] {
        color: #5d6974;
        font-size: 10px;
    }


    .summary-row strong[b-3j9hpkqn5m] {
        min-width: 0;
        overflow: hidden;
        color: #bfc8cd;
        font-size: 10px;
        font-weight: 700;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


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

.history-panel[b-3j9hpkqn5m] {
    padding: 17px;
}


.history-header[b-3j9hpkqn5m] {
    margin-bottom: 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid #20282f;
}


    .history-header > span[b-3j9hpkqn5m] {
        min-width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
        border: 1px solid #27313a;
        border-radius: 7px;
        background: #10161b;
        color: #84919a;
        font-size: 10px;
        font-weight: 800;
    }


.history-list[b-3j9hpkqn5m] {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 119, 130, 0.22) transparent;
}


.history-item[b-3j9hpkqn5m] {
    position: relative;
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 9px;
    padding-bottom: 16px;
}


    .history-item:last-child[b-3j9hpkqn5m] {
        padding-bottom: 0;
    }


.history-marker[b-3j9hpkqn5m] {
    position: relative;
    display: flex;
    justify-content: center;
}


    .history-marker[b-3j9hpkqn5m]::after {
        content: "";
        position: absolute;
        top: 12px;
        bottom: -16px;
        width: 1px;
        background: #263038;
    }


.history-item:last-child .history-marker[b-3j9hpkqn5m]::after {
    display: none;
}


.history-marker span[b-3j9hpkqn5m] {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border: 2px solid #0e1317;
    border-radius: 50%;
    background: #65737d;
    box-shadow: 0 0 0 1px #2a353d;
}


.history-item.current .history-marker span[b-3j9hpkqn5m] {
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(59, 208, 189, 0.35), 0 0 0 4px rgba(59, 208, 189, 0.06);
}


.history-content[b-3j9hpkqn5m] {
    min-width: 0;
}


.history-topline[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}


    .history-topline strong[b-3j9hpkqn5m] {
        overflow: hidden;
        color: #cdd5d9;
        font-size: 10px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.current-badge[b-3j9hpkqn5m] {
    flex: 0 0 auto;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid rgba(59, 208, 189, 0.14);
    border-radius: 999px;
    background: rgba(59, 208, 189, 0.05);
    color: #75d8cb;
    font-size: 8px;
    font-weight: 750;
}


.history-time[b-3j9hpkqn5m] {
    display: block;
    margin-bottom: 5px;
    color: #596771;
    font-size: 9px;
}


.history-meta[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4f5c66;
    font-size: 8px;
}


    .history-meta span + span[b-3j9hpkqn5m]::before {
        content: "•";
        margin-right: 8px;
        color: #38434b;
    }


.history-empty[b-3j9hpkqn5m] {
    padding: 20px 10px;
    color: #5d6974;
    font-size: 10px;
    text-align: center;
}


/* ============================================================
   ACTION BAR
   ============================================================ */

.action-bar[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid #202931;
    border-radius: 14px;
    background: linear-gradient( 90deg, rgba(59, 208, 189, 0.03), transparent 36% ), rgba(15, 20, 24, 0.90);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


    .action-bar > div:first-child[b-3j9hpkqn5m] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


        .action-bar > div:first-child strong[b-3j9hpkqn5m] {
            color: #dce2e5;
            font-size: 12px;
            font-weight: 700;
        }


        .action-bar > div:first-child span[b-3j9hpkqn5m] {
            color: #586570;
            font-size: 10px;
            line-height: 1.45;
        }


.action-buttons[b-3j9hpkqn5m] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}


.cancel-button[b-3j9hpkqn5m],
.save-button[b-3j9hpkqn5m] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}


.cancel-button[b-3j9hpkqn5m] {
    padding: 0 14px;
    border: 1px solid #28323a;
    background: #0d1216;
    color: #7a8791;
}


    .cancel-button:hover[b-3j9hpkqn5m] {
        color: #aab4ba;
        border-color: #34404a;
    }


.save-button[b-3j9hpkqn5m] {
    min-width: 145px;
    gap: 12px;
    padding: 0 7px 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient( 180deg, #4bd6c4, #35c5b2 );
    color: #06110f;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}


    .save-button:hover:not(:disabled)[b-3j9hpkqn5m] {
        transform: translateY(-1px);
        filter: brightness(1.035);
    }


    .save-button:disabled[b-3j9hpkqn5m] {
        cursor: default;
        opacity: 0.65;
    }


.button-icon[b-3j9hpkqn5m] {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}


    .button-icon svg[b-3j9hpkqn5m] {
        width: 13px;
        height: 13px;
    }


.button-spinner[b-3j9hpkqn5m],
.loading-spinner[b-3j9hpkqn5m] {
    border-radius: 50%;
    animation: recono-edit-vehicle-spin-b-3j9hpkqn5m 0.8s linear infinite;
}


.button-spinner[b-3j9hpkqn5m] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(5, 17, 15, 0.25);
    border-top-color: #06110f;
}


@keyframes recono-edit-vehicle-spin-b-3j9hpkqn5m {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   LOADING / NOT FOUND
   ============================================================ */

.loading-panel[b-3j9hpkqn5m],
.not-found-panel[b-3j9hpkqn5m] {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.loading-spinner[b-3j9hpkqn5m] {
    width: 30px;
    height: 30px;
    margin-bottom: 9px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
}


.loading-panel strong[b-3j9hpkqn5m] {
    color: #d8dfe2;
    font-size: 12px;
}


.loading-panel span[b-3j9hpkqn5m] {
    margin-top: 4px;
    color: #5e6b75;
    font-size: 10px;
}


.not-found-icon[b-3j9hpkqn5m] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border: 1px solid rgba(245, 195, 107, 0.15);
    border-radius: 10px;
    background: rgba(245, 195, 107, 0.05);
    color: #d7aa5c;
    font-size: 14px;
    font-weight: 850;
}


.not-found-panel h2[b-3j9hpkqn5m] {
    margin: 0 0 6px;
    color: #dde3e5;
    font-size: 15px;
}


.not-found-panel p[b-3j9hpkqn5m] {
    max-width: 450px;
    margin: 0 0 14px;
    color: #66737d;
    font-size: 11px;
    line-height: 1.5;
}


.not-found-action[b-3j9hpkqn5m] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(59, 208, 189, 0.17);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.06);
    color: #7bd9cd;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}


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

@media (max-width: 1180px) {

    .edit-layout[b-3j9hpkqn5m] {
        grid-template-columns: 1fr;
    }


    .edit-sidebar[b-3j9hpkqn5m] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 820px) {

    .page-header[b-3j9hpkqn5m] {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }


    .header-actions[b-3j9hpkqn5m] {
        width: 100%;
    }


    .field-grid-four[b-3j9hpkqn5m] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .action-bar[b-3j9hpkqn5m] {
        align-items: stretch;
        flex-direction: column;
    }


    .action-buttons[b-3j9hpkqn5m] {
        justify-content: flex-end;
    }
}


@media (max-width: 620px) {

    .field-grid-two[b-3j9hpkqn5m],
    .field-grid-four[b-3j9hpkqn5m],
    .edit-sidebar[b-3j9hpkqn5m] {
        grid-template-columns: 1fr;
    }


    .content-panel[b-3j9hpkqn5m] {
        padding: 16px;
    }


    .action-buttons[b-3j9hpkqn5m] {
        width: 100%;
    }


    .cancel-button[b-3j9hpkqn5m],
    .save-button[b-3j9hpkqn5m] {
        flex: 1;
    }
}


@media (max-width: 420px) {

    .header-actions[b-3j9hpkqn5m],
    .action-buttons[b-3j9hpkqn5m] {
        align-items: stretch;
        flex-direction: column;
    }


    .secondary-action[b-3j9hpkqn5m],
    .status-pill[b-3j9hpkqn5m],
    .cancel-button[b-3j9hpkqn5m],
    .save-button[b-3j9hpkqn5m] {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   TEAM COMMENTS
   ============================================================ */

.comments-panel[b-3j9hpkqn5m] {
    overflow: visible;
}


.comments-section-header[b-3j9hpkqn5m] {
    position: relative;
}


.comment-count[b-3j9hpkqn5m] {
    min-width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border: 1px solid #28323a;
    border-radius: 8px;
    background: #0d1216;
    color: #87949d;
    font-size: 10px;
    font-weight: 800;
}


.comment-error[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 11px;
    border: 1px solid rgba(226, 93, 93, 0.22);
    border-radius: 9px;
    background: rgba(198, 66, 66, 0.055);
    color: #e98e8e;
    font-size: 10px;
}


    .comment-error > span[b-3j9hpkqn5m] {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(226, 93, 93, 0.10);
        font-size: 9px;
        font-weight: 850;
    }


.comment-composer[b-3j9hpkqn5m] {
    padding: 13px;
    border: 1px solid #28323a;
    border-radius: 11px;
    background: #0c1115;
}


.comment-composer-top[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}


    .comment-composer-top > div[b-3j9hpkqn5m] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }


.comment-composer-label[b-3j9hpkqn5m] {
    color: #d5dcdf;
    font-size: 11px;
    font-weight: 720;
}


.comment-composer-help[b-3j9hpkqn5m] {
    color: #586570;
    font-size: 9px;
}


.comment-department-select[b-3j9hpkqn5m] {
    width: 145px;
    height: 35px;
    appearance: none;
    outline: none;
    padding: 0 30px 0 10px;
    cursor: pointer;
    border: 1px solid #2b353d;
    border-radius: 8px;
    background-image: linear-gradient( 45deg, transparent 50%, #697781 50% ), linear-gradient( 135deg, #697781 50%, transparent 50% );
    background-position: calc(100% - 14px) 15px, calc(100% - 10px) 15px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    background-color: #090d10;
    color: #b7c1c6;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
}


    .comment-department-select:focus[b-3j9hpkqn5m] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.07);
    }


.comment-textarea[b-3j9hpkqn5m] {
    width: 100%;
    min-height: 92px;
    display: block;
    resize: vertical;
    outline: none;
    padding: 11px 12px;
    border: 1px solid #29323a;
    border-radius: 9px;
    background: #090d10;
    color: #e3e8ea;
    caret-color: var(--accent);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.55;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}


    .comment-textarea[b-3j9hpkqn5m]::placeholder {
        color: #4d5963;
    }


    .comment-textarea:focus[b-3j9hpkqn5m] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.07);
    }


    .comment-textarea:disabled[b-3j9hpkqn5m],
    .comment-department-select:disabled[b-3j9hpkqn5m] {
        cursor: default;
        opacity: 0.6;
    }


.comment-composer-footer[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 9px;
}


.comment-character-count[b-3j9hpkqn5m] {
    color: #4e5b65;
    font-size: 9px;
}


.comment-submit-button[b-3j9hpkqn5m] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(59, 208, 189, 0.22);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.085);
    color: #7ddbd0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}


    .comment-submit-button:hover:not(:disabled)[b-3j9hpkqn5m] {
        border-color: rgba(59, 208, 189, 0.38);
        background: rgba(59, 208, 189, 0.12);
        color: #a0e8df;
    }


    .comment-submit-button:disabled[b-3j9hpkqn5m] {
        cursor: default;
        opacity: 0.45;
    }


    .comment-submit-button svg[b-3j9hpkqn5m] {
        width: 13px;
        height: 13px;
    }


.comment-button-spinner[b-3j9hpkqn5m] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(59, 208, 189, 0.18);
    border-top-color: #75d8cb;
    border-radius: 50%;
    animation: recono-edit-vehicle-spin-b-3j9hpkqn5m 0.8s linear infinite;
}


.comments-divider[b-3j9hpkqn5m] {
    height: 1px;
    margin: 17px 0;
    background: #20282f;
}


.comments-list[b-3j9hpkqn5m] {
    display: flex;
    flex-direction: column;
}


.comment-item[b-3j9hpkqn5m] {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}


    .comment-item:first-child[b-3j9hpkqn5m] {
        padding-top: 0;
    }


    .comment-item:last-child[b-3j9hpkqn5m] {
        padding-bottom: 0;
        border-bottom: 0;
    }


.comment-avatar[b-3j9hpkqn5m] {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid #2a343c;
    border-radius: 9px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.018), transparent ), #0d1317;
    color: #85939c;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.25px;
}


.comment-content[b-3j9hpkqn5m] {
    min-width: 0;
}


.comment-topline[b-3j9hpkqn5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}


.comment-author[b-3j9hpkqn5m] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}


    .comment-author strong[b-3j9hpkqn5m] {
        overflow: hidden;
        color: #d2dadd;
        font-size: 11px;
        font-weight: 720;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.comment-topline time[b-3j9hpkqn5m] {
    flex: 0 0 auto;
    color: #54616b;
    font-size: 9px;
}


.comment-content p[b-3j9hpkqn5m] {
    margin: 0;
    color: #8b98a1;
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


.department-badge[b-3j9hpkqn5m] {
    flex: 0 0 auto;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid #2b353d;
    border-radius: 999px;
    background: #10161a;
    color: #71808a;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.25px;
}


.department-sales[b-3j9hpkqn5m] {
    border-color: rgba(82, 155, 220, 0.18);
    background: rgba(82, 155, 220, 0.055);
    color: #87b9e2;
}


.department-service[b-3j9hpkqn5m] {
    border-color: rgba(59, 208, 189, 0.18);
    background: rgba(59, 208, 189, 0.055);
    color: #7edbd0;
}


.department-parts[b-3j9hpkqn5m] {
    border-color: rgba(213, 166, 84, 0.18);
    background: rgba(213, 166, 84, 0.055);
    color: #d5aa60;
}


.department-detail[b-3j9hpkqn5m] {
    border-color: rgba(146, 126, 211, 0.18);
    background: rgba(146, 126, 211, 0.055);
    color: #b1a0e1;
}


.department-body[b-3j9hpkqn5m] {
    border-color: rgba(214, 126, 126, 0.18);
    background: rgba(214, 126, 126, 0.055);
    color: #dc9b9b;
}


.department-management[b-3j9hpkqn5m] {
    border-color: rgba(155, 166, 176, 0.18);
    background: rgba(155, 166, 176, 0.055);
    color: #a9b4bc;
}


.comments-empty[b-3j9hpkqn5m] {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.comments-empty-icon[b-3j9hpkqn5m] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border: 1px solid #28323a;
    border-radius: 8px;
    background: #0d1216;
    color: #64727c;
}


    .comments-empty-icon svg[b-3j9hpkqn5m] {
        width: 15px;
        height: 15px;
    }


.comments-empty strong[b-3j9hpkqn5m] {
    margin-bottom: 3px;
    color: #aeb8be;
    font-size: 11px;
}


.comments-empty > span:last-child[b-3j9hpkqn5m] {
    color: #56636d;
    font-size: 9px;
}


@media (max-width: 620px) {

    .comment-composer-top[b-3j9hpkqn5m],
    .comment-topline[b-3j9hpkqn5m] {
        align-items: flex-start;
        flex-direction: column;
    }


    .comment-department-select[b-3j9hpkqn5m] {
        width: 100%;
    }


    .comment-topline[b-3j9hpkqn5m] {
        gap: 4px;
    }


    .comment-author[b-3j9hpkqn5m] {
        flex-wrap: wrap;
    }


    .comment-composer-footer[b-3j9hpkqn5m] {
        align-items: stretch;
        flex-direction: column;
    }


    .comment-submit-button[b-3j9hpkqn5m] {
        width: 100%;
        min-height: 40px;
    }
}
/* /Pages/Vehicles/Vehicles.razor.rz.scp.css */
/* ============================================================
   RECONO VEHICLES
   ============================================================ */

.vehicles-page[b-815s9saxxx] {
    width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.vehicles-header[b-815s9saxxx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}


.vehicles-heading[b-815s9saxxx] {
    min-width: 0;
}


.eyebrow[b-815s9saxxx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.45px;
}


.eyebrow-dot[b-815s9saxxx] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px rgba(59, 208, 189, 0.62);
}


.vehicles-heading h1[b-815s9saxxx] {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -1.25px;
}


.vehicles-heading p[b-815s9saxxx] {
    margin: 0;
    max-width: 700px;
    color: #788591;
    font-size: 13px;
    line-height: 1.6;
}


.header-actions[b-815s9saxxx] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}


.capacity-pill[b-815s9saxxx] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #232c34;
    border-radius: 10px;
    background: rgba(13, 18, 22, 0.82);
    color: #788691;
    font-size: 11px;
    font-weight: 700;
}


.capacity-dot[b-815s9saxxx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.07);
}


.primary-action[b-815s9saxxx] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: linear-gradient( 180deg, #4bd6c4, #35c5b2 );
    color: #06110f;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(42, 190, 170, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, filter 0.15s ease;
}


    .primary-action:hover[b-815s9saxxx] {
        color: #06110f;
        transform: translateY(-1px);
        filter: brightness(1.035);
    }


.action-icon[b-815s9saxxx] {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(5, 17, 15, 0.10);
}


    .action-icon svg[b-815s9saxxx] {
        width: 14px;
        height: 14px;
    }


/* ============================================================
   ALERT
   ============================================================ */

.alert[b-815s9saxxx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 11px;
}


.alert-error[b-815s9saxxx] {
    border: 1px solid rgba(226, 93, 93, 0.25);
    background: rgba(198, 66, 66, 0.065);
    color: #ee9191;
}


.alert-icon[b-815s9saxxx] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(226, 93, 93, 0.12);
    font-size: 10px;
    font-weight: 850;
}


.alert > div[b-815s9saxxx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.alert strong[b-815s9saxxx] {
    color: #f1a1a1;
    font-size: 11px;
}


.alert span[b-815s9saxxx] {
    line-height: 1.5;
}


/* ============================================================
   KPI GRID
   ============================================================ */

.vehicle-kpi-grid[b-815s9saxxx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}


.vehicle-kpi-card[b-815s9saxxx] {
    position: relative;
    min-width: 0;
    min-height: 135px;
    overflow: hidden;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


    .vehicle-kpi-card[b-815s9saxxx]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.45;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent );
    }


.vehicle-kpi-accent[b-815s9saxxx] {
    border-color: rgba(59, 208, 189, 0.22);
    background: radial-gradient( circle at 95% 0%, rgba(59, 208, 189, 0.075), transparent 42% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
}


    .vehicle-kpi-accent[b-815s9saxxx]::before {
        opacity: 1;
        background: linear-gradient( 90deg, transparent, rgba(59, 208, 189, 0.78), transparent );
    }


.vehicle-kpi-top[b-815s9saxxx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}


    .vehicle-kpi-top > span:first-child[b-815s9saxxx] {
        color: #6f7c87;
        font-size: 11px;
        font-weight: 760;
        letter-spacing: 0.55px;
        text-transform: uppercase;
    }


.vehicle-kpi-icon[b-815s9saxxx] {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.13);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.055);
    color: #54cdbd;
}


    .vehicle-kpi-icon.warning[b-815s9saxxx] {
        border-color: rgba(245, 195, 107, 0.14);
        background: rgba(245, 195, 107, 0.055);
        color: #d9ad62;
    }


    .vehicle-kpi-icon.neutral[b-815s9saxxx] {
        border-color: rgba(145, 160, 171, 0.14);
        background: rgba(145, 160, 171, 0.05);
        color: #84939d;
    }


    .vehicle-kpi-icon svg[b-815s9saxxx] {
        width: 15px;
        height: 15px;
    }


.vehicle-kpi-value[b-815s9saxxx] {
    display: block;
    margin-bottom: 8px;
    color: #f6f8f9;
    font-size: 29px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -1px;
}


.vehicle-kpi-description[b-815s9saxxx] {
    display: block;
    color: #5d6a75;
    font-size: 10px;
    line-height: 1.45;
}


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

.filters-panel[b-815s9saxxx],
.vehicles-panel[b-815s9saxxx] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.014), transparent 55% ), var(--surface);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.022);
}


    .filters-panel[b-815s9saxxx]::before,
    .vehicles-panel[b-815s9saxxx]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        opacity: 0.45;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent );
    }


.filters-panel[b-815s9saxxx] {
    margin-bottom: 14px;
    padding: 17px;
}


.filters-topline[b-815s9saxxx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}


.panel-kicker[b-815s9saxxx] {
    display: block;
    margin-bottom: 4px;
    color: #53616c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.95px;
    text-transform: uppercase;
}


.filters-topline h2[b-815s9saxxx],
.panel-header h2[b-815s9saxxx] {
    margin: 0;
    color: #eef2f4;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.25px;
}


.result-count[b-815s9saxxx],
.page-summary[b-815s9saxxx] {
    color: #63707b;
    font-size: 10px;
    font-weight: 700;
}


.filters-grid[b-815s9saxxx] {
    display: grid;
    grid-template-columns: minmax(260px, 1.55fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(140px, 0.7fr) auto;
    align-items: end;
    gap: 10px;
}


.search-field[b-815s9saxxx] {
    position: relative;
    min-width: 0;
}


    .search-field > svg[b-815s9saxxx] {
        position: absolute;
        top: 50%;
        left: 12px;
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
        color: #596771;
        pointer-events: none;
    }


    .search-field input[b-815s9saxxx],
    .filter-field select[b-815s9saxxx] {
        width: 100%;
        height: 41px;
        outline: none;
        border: 1px solid #29323a;
        border-radius: 9px;
        background: #0a0e12;
        color: #e5eaed;
        font-family: inherit;
        font-size: 11px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }


    .search-field input[b-815s9saxxx] {
        padding: 0 12px 0 36px;
    }


        .search-field input[b-815s9saxxx]::placeholder {
            color: #4c5963;
        }


        .search-field input:focus[b-815s9saxxx],
        .filter-field select:focus[b-815s9saxxx] {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.075);
        }


.filter-field[b-815s9saxxx] {
    min-width: 0;
}


    .filter-field label[b-815s9saxxx] {
        display: block;
        margin-bottom: 6px;
        color: #63707b;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.35px;
        text-transform: uppercase;
    }


    .filter-field select[b-815s9saxxx] {
        appearance: none;
        padding: 0 33px 0 11px;
        cursor: pointer;
        background-image: linear-gradient( 45deg, transparent 50%, #61717c 50% ), linear-gradient( 135deg, #61717c 50%, transparent 50% );
        background-position: calc(100% - 16px) 18px, calc(100% - 12px) 18px;
        background-size: 4px 4px, 4px 4px;
        background-repeat: no-repeat;
        background-color: #0a0e12;
    }


.filter-actions[b-815s9saxxx] {
    display: flex;
    align-items: center;
    gap: 7px;
}


.search-button[b-815s9saxxx],
.clear-button[b-815s9saxxx] {
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}


.search-button[b-815s9saxxx] {
    min-width: 90px;
    padding: 0 12px;
    border: 1px solid rgba(59, 208, 189, 0.21);
    background: rgba(59, 208, 189, 0.08);
    color: #7bd9cd;
}


    .search-button:hover:not(:disabled)[b-815s9saxxx] {
        border-color: rgba(59, 208, 189, 0.36);
        background: rgba(59, 208, 189, 0.11);
    }


    .search-button:disabled[b-815s9saxxx] {
        cursor: default;
        opacity: 0.6;
    }


    .search-button svg[b-815s9saxxx] {
        width: 13px;
        height: 13px;
    }


.clear-button[b-815s9saxxx] {
    padding: 0 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #66747e;
}


    .clear-button:hover[b-815s9saxxx] {
        color: #9aa6ae;
    }


/* ============================================================
   TABLE PANEL
   ============================================================ */

.vehicles-panel[b-815s9saxxx] {
    margin-bottom: 14px;
    padding: 18px;
}


.panel-header[b-815s9saxxx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}


    .panel-header p[b-815s9saxxx] {
        margin: 4px 0 0;
        color: #65727d;
        font-size: 11px;
        line-height: 1.5;
    }


.vehicle-table-wrap[b-815s9saxxx] {
    width: 100%;
    overflow-x: auto;
    transition: opacity 0.15s ease;
}


    .vehicle-table-wrap.refreshing[b-815s9saxxx] {
        opacity: 0.55;
        pointer-events: none;
    }


.vehicle-table[b-815s9saxxx] {
    width: 100%;
    min-width: 1160px;
    border-collapse: collapse;
}


    .vehicle-table th[b-815s9saxxx] {
        padding: 10px 11px;
        text-align: left;
        border-bottom: 1px solid #222a31;
        color: #53616c;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.55px;
        text-transform: uppercase;
        white-space: nowrap;
    }


    .vehicle-table td[b-815s9saxxx] {
        padding: 13px 11px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.038);
        color: #818e98;
        font-size: 11px;
        vertical-align: middle;
    }


    .vehicle-table tbody tr:last-child td[b-815s9saxxx] {
        border-bottom: 0;
    }


    .vehicle-table tbody tr[b-815s9saxxx] {
        transition: background 0.12s ease;
    }


        .vehicle-table tbody tr:hover[b-815s9saxxx] {
            background: rgba(255, 255, 255, 0.014);
        }


/* ============================================================
   VEHICLE CELL
   ============================================================ */

.vehicle-cell[b-815s9saxxx] {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.vehicle-avatar[b-815s9saxxx] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid #273139;
    border-radius: 9px;
    background: #0c1115;
    color: #687781;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.25px;
}


.vehicle-cell > div[b-815s9saxxx],
.stock-cell[b-815s9saxxx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.vehicle-cell strong[b-815s9saxxx] {
    color: #d8dee1;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}


.vehicle-cell span:not(.vehicle-avatar)[b-815s9saxxx] {
    color: #586570;
    font-size: 10px;
}


.stock-cell[b-815s9saxxx] {
    min-width: 145px;
}


    .stock-cell strong[b-815s9saxxx] {
        color: #b9c3c8;
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 10px;
    }


    .stock-cell span[b-815s9saxxx] {
        color: #56636d;
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 9px;
    }


.dealership-name[b-815s9saxxx],
.owner-name[b-815s9saxxx],
.updated-text[b-815s9saxxx] {
    white-space: nowrap;
}


.owner-name[b-815s9saxxx] {
    color: #89969f;
}


.updated-text[b-815s9saxxx] {
    color: #64717c;
    font-size: 10px;
}


/* ============================================================
   STAGE / STATUS / AGE
   ============================================================ */

.stage-pill[b-815s9saxxx],
.status-pill[b-815s9saxxx] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}


.stage-pill[b-815s9saxxx] {
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(59, 208, 189, 0.14);
    background: rgba(59, 208, 189, 0.05);
    color: #75d8cb;
}


.stage-warning[b-815s9saxxx] {
    border-color: rgba(245, 195, 107, 0.15);
    background: rgba(245, 195, 107, 0.05);
    color: #d5aa60;
}


.stage-ready[b-815s9saxxx] {
    border-color: rgba(118, 216, 204, 0.18);
    background: rgba(118, 216, 204, 0.07);
    color: #96e3da;
}


.age-text[b-815s9saxxx] {
    color: #aab5bb;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}


.warning-text[b-815s9saxxx] {
    color: #d8aa5d !important;
}


.status-pill[b-815s9saxxx] {
    gap: 6px;
    color: #7e8b95;
}


    .status-pill > span[b-815s9saxxx] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }


.status-active > span[b-815s9saxxx] {
    background: #3bd0bd;
}


.status-ready > span[b-815s9saxxx] {
    background: #80ddd1;
}


.status-sold > span[b-815s9saxxx] {
    background: #77858f;
}


.status-archived > span[b-815s9saxxx] {
    background: #525e67;
}


/* ============================================================
   EMPTY / LOADING
   ============================================================ */

.loading-state[b-815s9saxxx],
.empty-state[b-815s9saxxx] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.loading-state[b-815s9saxxx] {
    gap: 6px;
}


.loading-spinner[b-815s9saxxx],
.button-spinner[b-815s9saxxx] {
    border-radius: 50%;
    animation: recono-vehicles-spin-b-815s9saxxx 0.8s linear infinite;
}


.loading-spinner[b-815s9saxxx] {
    width: 29px;
    height: 29px;
    margin-bottom: 7px;
    border: 3px solid #242d34;
    border-top-color: var(--accent);
}


.loading-state strong[b-815s9saxxx] {
    color: #d8dfe2;
    font-size: 12px;
}


.loading-state span[b-815s9saxxx] {
    color: #5e6b75;
    font-size: 10px;
}


.empty-icon[b-815s9saxxx] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border: 1px solid rgba(59, 208, 189, 0.12);
    border-radius: 13px;
    background: rgba(59, 208, 189, 0.045);
    color: #59cdbd;
}


    .empty-icon svg[b-815s9saxxx] {
        width: 22px;
        height: 22px;
    }


.empty-state h3[b-815s9saxxx] {
    margin: 0 0 6px;
    color: #dce2e5;
    font-size: 14px;
    font-weight: 700;
}


.empty-state p[b-815s9saxxx] {
    max-width: 420px;
    margin: 0 0 15px;
    color: #687681;
    font-size: 11px;
    line-height: 1.55;
}


.empty-action[b-815s9saxxx] {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid rgba(59, 208, 189, 0.18);
    border-radius: 8px;
    background: rgba(59, 208, 189, 0.07);
    color: #7edbd0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}


.button-reset[b-815s9saxxx] {
    appearance: none;
}


.button-spinner[b-815s9saxxx] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(59, 208, 189, 0.20);
    border-top-color: #72d9cc;
}


@keyframes recono-vehicles-spin-b-815s9saxxx {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   PAGINATION
   ============================================================ */

.pagination[b-815s9saxxx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 4px;
    padding-top: 15px;
    border-top: 1px solid #20282f;
}


.pagination-copy[b-815s9saxxx] {
    color: #64717b;
    font-size: 10px;
}


    .pagination-copy strong[b-815s9saxxx] {
        color: #9aa6ae;
        font-weight: 700;
    }


.pagination-actions[b-815s9saxxx] {
    display: flex;
    align-items: center;
    gap: 8px;
}


.page-button[b-815s9saxxx] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #28323a;
    border-radius: 8px;
    background: #0d1216;
    color: #77858f;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}


    .page-button:hover:not(:disabled)[b-815s9saxxx] {
        border-color: #36414a;
        color: #a3adb4;
    }


    .page-button:disabled[b-815s9saxxx] {
        cursor: default;
        opacity: 0.4;
    }


    .page-button svg[b-815s9saxxx] {
        width: 12px;
        height: 12px;
    }


.page-number[b-815s9saxxx] {
    min-width: 46px;
    text-align: center;
    color: #65727c;
    font-size: 10px;
    font-weight: 700;
}


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

@media (max-width: 1220px) {

    .vehicle-kpi-grid[b-815s9saxxx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .filters-grid[b-815s9saxxx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .search-field[b-815s9saxxx] {
        grid-column: 1 / -1;
    }


    .filter-actions[b-815s9saxxx] {
        align-self: end;
    }
}


@media (max-width: 760px) {

    .vehicles-header[b-815s9saxxx] {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }


    .header-actions[b-815s9saxxx] {
        width: 100%;
    }


    .capacity-pill[b-815s9saxxx] {
        flex: 1;
    }


    .filters-grid[b-815s9saxxx] {
        grid-template-columns: 1fr;
    }


    .search-field[b-815s9saxxx] {
        grid-column: auto;
    }


    .filter-actions[b-815s9saxxx] {
        width: 100%;
    }


    .search-button[b-815s9saxxx],
    .clear-button[b-815s9saxxx] {
        flex: 1;
    }


    .panel-header[b-815s9saxxx] {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }


    .pagination[b-815s9saxxx] {
        align-items: flex-start;
        flex-direction: column;
    }


    .pagination-actions[b-815s9saxxx] {
        width: 100%;
        justify-content: space-between;
    }
}


@media (max-width: 520px) {

    .vehicle-kpi-grid[b-815s9saxxx] {
        grid-template-columns: 1fr;
    }


    .header-actions[b-815s9saxxx] {
        align-items: stretch;
        flex-direction: column;
    }


    .capacity-pill[b-815s9saxxx],
    .primary-action[b-815s9saxxx] {
        justify-content: center;
    }


    .vehicles-panel[b-815s9saxxx],
    .filters-panel[b-815s9saxxx] {
        padding: 15px;
    }
}


/* ============================================================
   CLICKABLE VEHICLE ROWS
   ============================================================ */

.vehicle-table tbody tr.vehicle-row[b-815s9saxxx] {
    cursor: pointer;
    outline: none;
}

    .vehicle-table tbody tr.vehicle-row:hover[b-815s9saxxx] {
        background: rgba(59, 208, 189, 0.025);
    }

        .vehicle-table tbody tr.vehicle-row:hover .vehicle-cell strong[b-815s9saxxx] {
            color: #e1e7e9;
        }

    .vehicle-table tbody tr.vehicle-row:focus-visible[b-815s9saxxx] {
        box-shadow: inset 0 0 0 1px rgba(59, 208, 189, 0.34);
        background: rgba(59, 208, 189, 0.035);
    }

        .vehicle-table tbody tr.vehicle-row:focus-visible .vehicle-cell strong[b-815s9saxxx] {
            color: #e5ebed;
        }
/* /Shared/EmptyLayout.razor.rz.scp.css */
/* ============================================================
   RECONO EMPTY LAYOUT
   ============================================================ */

.empty-layout[b-2t5aspos47] {
    --bg: #090c0f;
    --surface: #101419;
    --surface-raised: #13181e;
    --surface-soft: #0d1115;
    --surface-deep: #0a0e12;
    --border: #222a32;
    --border-strong: #303a45;
    --text: #f4f7f8;
    --muted: #8a96a3;
    --muted-soft: #65717d;
    --accent: #3bd0bd;
    --accent-strong: #55dbc9;
    --accent-soft: rgba(59, 208, 189, 0.10);
    --accent-border: rgba(59, 208, 189, 0.32);
    --warning: #f5c36b;
    --danger: #ff8f8f;
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient( circle at 50% -12%, rgba(59, 208, 189, 0.10), transparent 34% ), radial-gradient( circle at 8% 46%, rgba(38, 103, 94, 0.055), transparent 24% ), var(--bg);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


    /* ============================================================
   BACKGROUND GRID
   ============================================================ */

    .empty-layout[b-2t5aspos47]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.09;
        background-image: linear-gradient( rgba(255, 255, 255, 0.024) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px );
        background-size: 54px 54px;
        mask-image: linear-gradient( to bottom, black, transparent 76% );
    }


    /* ============================================================
   BOX SIZING
   ============================================================ */

    .empty-layout[b-2t5aspos47],
    .empty-layout *[b-2t5aspos47] {
        box-sizing: border-box;
    }


/* ============================================================
   CONTENT
   ============================================================ */

.empty-layout-content[b-2t5aspos47] {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

.empty-layout[b-2t5aspos47] {
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 119, 130, 0.30) transparent;
}


    .empty-layout[b-2t5aspos47]::-webkit-scrollbar {
        width: 9px;
    }


    .empty-layout[b-2t5aspos47]::-webkit-scrollbar-track {
        background: transparent;
    }


    .empty-layout[b-2t5aspos47]::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(103, 119, 130, 0.30);
        background-clip: padding-box;
    }


        .empty-layout[b-2t5aspos47]::-webkit-scrollbar-thumb:hover {
            background: rgba(103, 119, 130, 0.48);
            background-clip: padding-box;
        }
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-u63z7ynqdr] {
    --bg: #090c0f;
    --surface: #101419;
    --surface-raised: #13181e;
    --surface-soft: #0d1115;
    --surface-deep: #0a0e12;
    --border: #222a32;
    --border-strong: #303a45;
    --text: #f4f7f8;
    --muted: #8a96a3;
    --muted-soft: #65717d;
    --accent: #3bd0bd;
    --accent-strong: #55dbc9;
    --accent-soft: rgba(59, 208, 189, 0.10);
    --accent-border: rgba(59, 208, 189, 0.32);
    --warning: #f5c36b;
    --danger: #ff8f8f;
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    background: radial-gradient( circle at 58% -12%, rgba(59, 208, 189, 0.09), transparent 31% ), radial-gradient( circle at 95% 42%, rgba(35, 103, 95, 0.05), transparent 22% ), var(--bg);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


    /* ============================================================
   BACKGROUND GRID
   ============================================================ */

    .page[b-u63z7ynqdr]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.09;
        background-image: linear-gradient( rgba(255, 255, 255, 0.024) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px );
        background-size: 54px 54px;
        mask-image: linear-gradient( to bottom, black, transparent 76% );
    }


    .page[b-u63z7ynqdr],
    .page *[b-u63z7ynqdr] {
        box-sizing: border-box;
    }


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

.sidebar[b-u63z7ynqdr] {
    position: relative;
    z-index: 20;
    flex: 0 0 248px;
    width: 248px;
    height: 100vh;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.065);
    background: linear-gradient( 180deg, rgba(59, 208, 189, 0.025), transparent 23% ), rgba(9, 12, 15, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content[b-u63z7ynqdr] {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}


/* ============================================================
   CONTENT CONTAINER
   ============================================================ */

.content[b-u63z7ynqdr] {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 30px 34px 54px;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

.main-content[b-u63z7ynqdr]::-webkit-scrollbar {
    width: 9px;
}

.main-content[b-u63z7ynqdr]::-webkit-scrollbar-track {
    background: transparent;
}

.main-content[b-u63z7ynqdr]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(103, 119, 130, 0.30);
    background-clip: padding-box;
}

    .main-content[b-u63z7ynqdr]::-webkit-scrollbar-thumb:hover {
        background: rgba(103, 119, 130, 0.48);
        background-clip: padding-box;
    }


/* Firefox */
.main-content[b-u63z7ynqdr] {
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 119, 130, 0.30) transparent;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 920px) {

    /*
     * Mobile goes back to normal document scrolling.
     *
     * This avoids nested/fixed viewport scrolling on phones.
     */

    .page[b-u63z7ynqdr] {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }


    .sidebar[b-u63z7ynqdr] {
        position: relative;
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    }


    .main-content[b-u63z7ynqdr] {
        height: auto;
        overflow: visible;
        scrollbar-gutter: auto;
    }


    .content[b-u63z7ynqdr] {
        padding: 24px 20px 44px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .content[b-u63z7ynqdr] {
        padding: 20px 14px 38px;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.nav-shell[b-4bhsxjbg0x] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

.nav-header[b-4bhsxjbg0x] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

    .nav-header[b-4bhsxjbg0x]  .brand-link {
        min-width: 0;
        flex: 1;
        display: flex;
        align-items: center;
        gap: 11px;
        color: inherit;
        text-decoration: none;
    }

.brand-mark-wrap[b-4bhsxjbg0x] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: linear-gradient(145deg, #161d21, #0e1316);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.brand-mark[b-4bhsxjbg0x] {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.brand-copy[b-4bhsxjbg0x] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-name[b-4bhsxjbg0x] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.5px;
}

.brand-subtitle[b-4bhsxjbg0x] {
    color: #596671;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.72px;
    text-transform: uppercase;
}

.nav-toggle[b-4bhsxjbg0x] {
    width: 38px;
    height: 38px;
    display: none;
    place-items: center;
    padding: 0;
    cursor: pointer;
    border: 1px solid #27313a;
    border-radius: 10px;
    background: #0d1216;
    color: #8e9ba6;
}

    .nav-toggle svg[b-4bhsxjbg0x] {
        width: 18px;
        height: 18px;
    }

.nav-content[b-4bhsxjbg0x] {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 13px 14px;
}

.nav-sections[b-4bhsxjbg0x] {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.nav-section[b-4bhsxjbg0x] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-label[b-4bhsxjbg0x] {
    padding: 0 11px 8px;
    color: #4f5b65;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.nav-item[b-4bhsxjbg0x]  .nav-link {
    position: relative;
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #7f8c97;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

    .nav-item[b-4bhsxjbg0x]  .nav-link:hover {
        color: #c7d0d5;
        border-color: #202930;
        background: rgba(255, 255, 255, 0.025);
    }

    .nav-item[b-4bhsxjbg0x]  .nav-link.active {
        color: #c9f5ef;
        border-color: rgba(59, 208, 189, 0.20);
        background: linear-gradient(90deg, rgba(59, 208, 189, 0.10), rgba(59, 208, 189, 0.025));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
    }

        .nav-item[b-4bhsxjbg0x]  .nav-link.active::before {
            content: "";
            position: absolute;
            top: 9px;
            bottom: 9px;
            left: -1px;
            width: 2px;
            border-radius: 4px;
            background: #3bd0bd;
            box-shadow: 0 0 10px rgba(59, 208, 189, 0.38);
        }

.nav-icon[b-4bhsxjbg0x] {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: grid;
    place-items: center;
    color: #60707b;
}

    .nav-icon svg[b-4bhsxjbg0x] {
        width: 18px;
        height: 18px;
    }

.nav-item[b-4bhsxjbg0x]  .nav-link.active .nav-icon {
    color: #4bd6c4;
}

.nav-footer[b-4bhsxjbg0x] {
    margin-top: auto;
    padding-top: 20px;
}

.workspace-status[b-4bhsxjbg0x] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 9px 12px;
    color: #53616c;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 0.25px;
}

.workspace-dot[b-4bhsxjbg0x] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3bd0bd;
    box-shadow: 0 0 0 4px rgba(59, 208, 189, 0.07);
}

.user-menu[b-4bhsxjbg0x] {
    position: relative;
}


.user-card[b-4bhsxjbg0x] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #202830;
    border-radius: 12px;
    background: rgba(15, 20, 24, 0.82);
    color: inherit;
    font: inherit;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}


    .user-card:hover[b-4bhsxjbg0x],
    .user-card-open[b-4bhsxjbg0x] {
        border-color: #2b363f;
        background: rgba(19, 25, 30, 0.96);
    }


.user-card-open[b-4bhsxjbg0x] {
    border-color: rgba(59, 208, 189, 0.22);
    box-shadow: 0 0 0 3px rgba(59, 208, 189, 0.035);
}

.user-avatar[b-4bhsxjbg0x] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(59, 208, 189, 0.20);
    border-radius: 9px;
    background: rgba(59, 208, 189, 0.07);
    color: #83e2d6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.35px;
}

.user-copy[b-4bhsxjbg0x] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .user-copy strong[b-4bhsxjbg0x] {
        overflow: hidden;
        color: #dfe5e8;
        font-size: 10px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-copy span[b-4bhsxjbg0x] {
        color: #5a6772;
        font-size: 8px;
    }

.user-chevron[b-4bhsxjbg0x] {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: #4d5963;
}


    .user-chevron svg[b-4bhsxjbg0x] {
        width: 13px;
        height: 13px;
        transition: transform 0.15s ease;
    }


.user-card-open .user-chevron svg[b-4bhsxjbg0x] {
    transform: rotate(-90deg);
}


/* ============================================================
   USER DROPDOWN
   ============================================================ */

.user-dropdown[b-4bhsxjbg0x] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    overflow: hidden;
    border: 1px solid #26313a;
    border-radius: 12px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.018), transparent 55% ), #101519;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


    .user-dropdown[b-4bhsxjbg0x]::after {
        content: "";
        position: absolute;
        right: 18px;
        bottom: -5px;
        width: 9px;
        height: 9px;
        transform: rotate(45deg);
        border-right: 1px solid #26313a;
        border-bottom: 1px solid #26313a;
        background: #101519;
    }


.user-dropdown-header[b-4bhsxjbg0x] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
}


.user-dropdown-label[b-4bhsxjbg0x] {
    color: #56636e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.75px;
    text-transform: uppercase;
}


.user-dropdown-header strong[b-4bhsxjbg0x] {
    overflow: hidden;
    color: #dbe2e5;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.user-dropdown-email[b-4bhsxjbg0x] {
    overflow: hidden;
    color: #697781;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.user-dropdown-divider[b-4bhsxjbg0x] {
    height: 1px;
    margin: 0 8px;
    background: #222b32;
}


.logout-form[b-4bhsxjbg0x] {
    margin: 0;
    padding: 6px;
}


.user-dropdown-action[b-4bhsxjbg0x] {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 9px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #9aa6ae;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}


    .user-dropdown-action:hover[b-4bhsxjbg0x] {
        border-color: rgba(226, 93, 93, 0.12);
        background: rgba(226, 93, 93, 0.045);
        color: #e28a8a;
    }


.dropdown-action-icon[b-4bhsxjbg0x] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
}


    .dropdown-action-icon svg[b-4bhsxjbg0x] {
        width: 14px;
        height: 14px;
    }

@media (max-width: 920px) {
    .nav-shell[b-4bhsxjbg0x] {
        min-height: 0;
    }

    .nav-header[b-4bhsxjbg0x] {
        min-height: 68px;
        padding: 14px 18px;
        border-bottom: 0;
    }

    .nav-toggle[b-4bhsxjbg0x] {
        display: grid;
    }

    .nav-content[b-4bhsxjbg0x] {
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.055);
    }

    .nav-collapsed[b-4bhsxjbg0x] {
        display: none;
    }

    .nav-expanded[b-4bhsxjbg0x] {
        display: flex;
    }

    .nav-sections[b-4bhsxjbg0x] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .nav-footer[b-4bhsxjbg0x] {
        display: block;
        margin-top: 18px;
    }
}

@media (min-width: 921px) {
    .nav-collapsed[b-4bhsxjbg0x],
    .nav-expanded[b-4bhsxjbg0x] {
        display: flex;
    }
}

@media (max-width: 560px) {
    .brand-subtitle[b-4bhsxjbg0x] {
        display: none;
    }

    .nav-sections[b-4bhsxjbg0x] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 920px) {
    .user-dropdown[b-4bhsxjbg0x] {
        position: relative;
        bottom: auto;
        margin-bottom: 8px;
    }

        .user-dropdown[b-4bhsxjbg0x]::after {
            display: none;
        }
}