/* =========================================================
   LAPTOP SOLUTION
   PROFESSIONAL REPAIR MANAGEMENT UI
   ========================================================= */

:root {

    --navy: #062b73;
    --navy-dark: #031b4a;

    --blue: #1464ff;
    --cyan: #20b8f2;

    --green: #42bd20;
    --orange: #f36a17;

    --background: #f4f7fb;

    --white: #ffffff;

    --text: #10213f;
    --muted: #687992;

    --border: #d9e3ef;

    --radius: 11px;

    --shadow:
        0 5px 18px rgba(6, 43, 115, .07);
}


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

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {

    margin: 0;

    min-height: 100vh;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.5;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

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


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

.app-shell {

    display: flex;

    min-height: 100vh;
}


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

.sidebar {

    width: 258px;

    flex: 0 0 258px;

    min-height: 100vh;

    padding: 18px 12px;

    background:
        linear-gradient(
            180deg,
            #073783 0%,
            #041f55 100%
        );

    color: #fff;

    position: sticky;

    top: 0;

    height: 100vh;

    overflow: hidden;

    box-shadow:
        4px 0 18px rgba(0, 25, 70, .15);

    z-index: 100;
}


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

.brand {

    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;

    height: 112px;

    text-decoration: none !important;

    overflow: hidden;
}

.brand-mark {

    width: 210px;

    height: 105px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.brand-logo {

    width: 205px;

    height: 100px;

    max-width: 205px;

    max-height: 100px;

    object-fit: contain;

    object-position: center;

    display: block;
}


/* =========================================================
   TAGLINE
   ========================================================= */

.tagline {

    margin: 2px 0 24px;

    text-align: center;

    color:
        rgba(255,255,255,.78);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .025em;

    text-transform: uppercase;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav {

    display: flex;

    flex-direction: column;

    gap: 6px;
}

.nav a {

    display: flex;

    align-items: center;

    min-height: 48px;

    padding: 11px 14px;

    border-radius: 9px;

    color:
        rgba(255,255,255,.88);

    font-size: 13px;

    font-weight: 700;

    transition:
        background .15s ease,
        transform .15s ease;
}

.nav a:hover {

    background:
        rgba(255,255,255,.08);

    color: #fff;

    transform: translateX(2px);
}

.nav a.active {

    background:
        linear-gradient(
            90deg,
            #1470ff,
            #197cff
        );

    color: #fff;

    box-shadow:
        0 5px 16px
        rgba(20,100,255,.28);
}


/* =========================================================
   CONTENT SHELL
   ========================================================= */

.content-shell {

    flex: 1;

    min-width: 0;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {

    min-height: 66px;

    padding: 12px 28px;

    background: #fff;

    border-bottom:
        1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 20;
}

.topbar strong {

    color: var(--navy);

    font-size: 14px;

    font-weight: 800;
}

.user-meta {

    color: var(--muted);

    font-size: 11px;
}

.topbar .user-meta strong {

    margin-right: 6px;
}


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

.page {

    position: relative;

    min-height:
        calc(100vh - 66px);

    padding: 28px 30px;

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   LARGE CENTER WATERMARK
   ========================================================= */

.page::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 54%;

    width: 720px;

    height: 720px;

    transform:
        translate(-50%, -50%);

    background-image:
        url("../images/laptop-solution-logo.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    /*
     * Very faint watermark.
     * The logo is intentionally large.
     */

    opacity: .080;

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   KEEP CONTENT ABOVE WATERMARK
   ========================================================= */

.page > * {

    position: relative;

    z-index: 2;
}


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

.dashboard-page {

    max-width: 1450px;

    margin: 0 auto;
}

.page.dashboard-surface::before { opacity: .032; }

.dashboard-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.dashboard-header h1 { margin:2px 0 5px; color:var(--navy); font-size:30px; line-height:1.1; letter-spacing:-.025em; }
.dashboard-header p { margin:0; color:var(--muted); font-size:12px; }
.dashboard-eyebrow,.dashboard-section-kicker { color:var(--blue) !important; font-size:9px !important; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }

.dashboard-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:20px; }
.dashboard-kpi-card { position:relative; display:flex; align-items:center; gap:13px; min-height:108px; padding:17px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 7px 22px rgba(15,35,65,.065); color:inherit; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.dashboard-kpi-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--kpi-accent); }
a.dashboard-kpi-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--kpi-accent) 40%,#dce4ee); box-shadow:0 11px 28px rgba(15,35,65,.11); }
.dashboard-kpi-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:var(--kpi-soft); color:var(--kpi-accent); font-size:18px; font-weight:900; }
.dashboard-kpi-copy { display:grid; gap:5px; min-width:0; }
.dashboard-kpi-copy small { color:var(--muted); font-size:10px; font-weight:750; line-height:1.25; }
.dashboard-kpi-copy strong { color:var(--navy); font-size:27px; line-height:1; font-weight:900; }
.dashboard-kpi-arrow { margin-left:auto; color:var(--kpi-accent); font-size:15px; font-weight:900; }
.kpi-blue { --kpi-accent:#1464ff; --kpi-soft:#e9f1ff; }
.kpi-cyan { --kpi-accent:#1397b7; --kpi-soft:#e6faff; }
.kpi-amber { --kpi-accent:#d97706; --kpi-soft:#fff2df; }
.kpi-teal { --kpi-accent:#16837a; --kpi-soft:#e5f7f4; }
.kpi-green { --kpi-accent:#329248; --kpi-soft:#eaf8ed; }
.kpi-red { --kpi-accent:#c34b35; --kpi-soft:#fff0ed; }
.kpi-purple { --kpi-accent:#6747a8; --kpi-soft:#eee9fa; }

.dashboard-content-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; align-items:start; }
.dashboard-primary-column { min-width:0; }
.dashboard-secondary-column { min-width:0; }
.dashboard-section + .dashboard-section { margin-top:20px; }
.dashboard-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:11px; }
.dashboard-section-heading h2 { margin:2px 0 0; color:var(--navy); font-size:17px; }
.dashboard-section-heading p { margin:0; }
.dashboard-text-link { color:var(--blue); font-size:11px; font-weight:800; text-decoration:none; }
.dashboard-text-link:hover { text-decoration:underline; }

.attention-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.attention-alert,.attention-clear { display:flex; align-items:center; gap:10px; min-height:72px; padding:12px 14px; border:1px solid var(--attention-border,#dce4ed); border-radius:12px; background:rgba(255,255,255,.94); color:var(--navy); text-decoration:none; }
.attention-alert:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,35,65,.08); }
.attention-count { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--attention-soft); color:var(--attention-color); font-size:16px; font-weight:900; }
.attention-alert > span:nth-child(2),.attention-clear > div { display:grid; gap:2px; min-width:0; }
.attention-alert > span:last-child { margin-left:auto; color:var(--attention-color); }
.attention-alert strong,.attention-clear strong { font-size:11px; }
.attention-alert small,.attention-clear small { color:var(--muted); font-size:9px; }
.attention-amber { --attention-color:#b96304; --attention-soft:#fff1df; --attention-border:#f2d4a8; }
.attention-green { --attention-color:#287b3b; --attention-soft:#e9f7ec; --attention-border:#c9e6cf; }
.attention-red { --attention-color:#ae432f; --attention-soft:#fff0ed; --attention-border:#f0cec7; }
.attention-clear { grid-column:1/-1; --attention-color:#287b3b; }
.attention-clear > span { color:#287b3b; font-size:18px; }

.dashboard-table-wrap { padding:0; overflow:hidden; border-radius:14px; }
.recent-jobs-table th { padding:11px 13px; background:#f5f8fc; color:#607086; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.recent-jobs-table td { padding:11px 13px; }
.recent-jobs-table tbody tr { transition:background .15s ease; }
.recent-jobs-table tbody tr:hover { background:#f6f9ff; }
.recent-jobs-table td:nth-child(3) { color:#526174; }
.recent-job-action { text-align:right; }
.recent-view-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 9px; border:1px solid #dbe4ef; border-radius:7px; background:#fff; color:var(--blue); font-size:10px; font-weight:800; text-decoration:none; }
.recent-view-btn:hover { border-color:#aec8f4; background:#f2f7ff; }

.quick-actions-card { padding:17px; border-radius:14px; }
.quick-action-list { display:grid; gap:8px; }
.quick-action-list a { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid #e3e9f1; border-radius:10px; color:var(--navy); text-decoration:none; }
.quick-action-list a:hover { border-color:#bcd0ef; background:#f6f9ff; }
.quick-action-list a > span:first-child { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#edf3ff; color:var(--blue); font-weight:900; }
.quick-action-list a > span:nth-child(2) { display:grid; gap:2px; }
.quick-action-list strong { font-size:10px; }
.quick-action-list small { color:var(--muted); font-size:9px; line-height:1.3; }
.quick-action-list b { color:var(--blue); font-size:12px; }

.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

@media (max-width:1100px) {
    .dashboard-content-grid { grid-template-columns:1fr; }
    .quick-action-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

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

@media (max-width:620px) {
    .dashboard-header { align-items:flex-start; flex-direction:column; }
    .dashboard-header .btn { width:100%; }
    .dashboard-kpi-grid,.quick-action-list { grid-template-columns:1fr; }
    .dashboard-kpi-card { min-height:94px; }
    .dashboard-table-wrap { overflow:visible; border:0; background:transparent; box-shadow:none; }
    .recent-jobs-table,.recent-jobs-table tbody,.recent-jobs-table tr,.recent-jobs-table td { display:block; width:100%; }
    .recent-jobs-table thead { display:none; }
    .recent-jobs-table tbody { display:grid; gap:10px; }
    .recent-jobs-table tbody tr { padding:12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); }
    .recent-jobs-table td { display:grid; grid-template-columns:92px minmax(0,1fr); gap:8px; padding:5px 0; border:0; text-align:left; }
    .recent-jobs-table td::before { content:attr(data-label); color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
    .recent-jobs-table .recent-job-action { display:block; margin-top:5px; }
    .recent-view-btn { width:100%; justify-content:center; }
}


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

.dashboard-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 26px;
}

.dashboard-heading h1 {

    margin: 0;

    color: var(--navy);

    font-size: 29px;

    line-height: 1.1;

    font-weight: 850;
}

.dashboard-heading p {

    margin: 7px 0 0;

    font-size: 12px;
}


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

.btn {

    min-height: 38px;

    padding: 8px 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    background: #fff;

    color: var(--navy);

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    text-decoration: none !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.btn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px
        rgba(6,43,115,.10);
}

.btn-primary {

    background:
        linear-gradient(
            135deg,
            #1464ff,
            #1476ff
        );

    border-color: var(--blue);

    color: #fff;

    box-shadow:
        0 5px 12px
        rgba(20,100,255,.22);
}

.btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            #0b55dc,
            #1464ff
        );

    color: #fff;
}

.dashboard-create-btn {

    min-height: 42px;

    padding-left: 16px;

    padding-right: 16px;
}

.btn-icon {

    font-size: 20px;

    line-height: 1;

    font-weight: 400;
}


/* =========================================================
   STATISTICS
   ========================================================= */

.stats {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 28px;
}

.stat {

    min-height: 124px;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 20px 18px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid var(--border);

    border-radius: 11px;

    box-shadow: var(--shadow);

    position: relative;

    overflow: hidden;
}


/* colored left edge */

.stat::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 5px;
}


/* =========================================================
   STAT COLORS
   ========================================================= */

.stat-blue::before {
    background: var(--blue);
}

.stat-cyan::before {
    background: var(--cyan);
}

.stat-orange::before {
    background: var(--orange);
}

.stat-green::before {
    background: var(--green);
}

.stat-navy::before {
    background: var(--navy);
}


/* =========================================================
   STAT ICON
   ========================================================= */

.stat-icon {

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;
}

.stat-icon svg {

    width: 29px;

    height: 29px;

    fill: none;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.stat-blue .stat-icon {

    background: #e9f1ff;

    color: var(--blue);
}

.stat-blue .stat-icon svg {
    stroke: var(--blue);
}

.stat-cyan .stat-icon {

    background: #e6faff;

    color: var(--cyan);
}

.stat-cyan .stat-icon svg {
    stroke: var(--cyan);
}

.stat-orange .stat-icon {

    background: #fff0e5;

    color: var(--orange);
}

.stat-orange .stat-icon svg {
    stroke: var(--orange);
}

.stat-green .stat-icon {

    background: #eaf9e5;

    color: var(--green);
}

.stat-green .stat-icon svg {
    stroke: var(--green);
}

.stat-navy .stat-icon {

    background: #e9edff;

    color: var(--navy);
}

.stat-navy .stat-icon svg {
    stroke: var(--navy);
}


/* =========================================================
   STAT TEXT
   ========================================================= */

.stat-content {

    min-width: 0;
}

.stat label {

    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 12px;

    font-weight: 600;
}

.stat strong {

    display: block;

    color: var(--navy);

    font-size: 30px;

    line-height: 1;

    font-weight: 850;
}


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

.section {

    margin-top: 20px;
}

.section-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
}

.section-title h2 {

    margin: 0;

    color: var(--navy);

    font-size: 17px;

    font-weight: 850;
}

.view-icon {

    color: var(--blue);

    font-size: 13px;
}


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

.card {

    background:
        rgba(255,255,255,.96);

    border:
        1px solid var(--border);

    border-radius: 11px;

    box-shadow: var(--shadow);

    padding: 20px;
}


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

.table-wrap {

    overflow-x: auto;

    padding: 0;
}

.data-table {

    width: 100%;

    border-collapse: collapse;
}

.data-table th {

    padding: 13px 15px;

    background:
        #f7f9fc;

    border-bottom:
        1px solid var(--border);

    color: #456080;

    text-align: left;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: .04em;

    text-transform: uppercase;
}

.data-table td {

    padding: 15px;

    border-bottom:
        1px solid #e9eef5;

    color: #243a59;

    font-size: 12px;

    vertical-align: middle;
}

.data-table tbody tr:last-child td {

    border-bottom: 0;
}

.data-table tbody tr:hover {

    background:
        rgba(20,100,255,.025);
}

.data-table td strong {

    color: var(--blue);

    font-weight: 850;
}


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

.badge {

    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 850;

    text-transform: capitalize;

    white-space: nowrap;
}

.status-received {

    background: #e7f0ff;

    color: #1452b8;
}

.status-under_diagnosis {

    background: #e5f9ff;

    color: #08799f;
}

.status-awaiting_quote {

    background: #fff0dd;

    color: #b45a00;
}

.status-approved_proceed {

    background: #e7f8df;

    color: #2e7816;
}

.status-in_repair {

    background: #e5edff;

    color: #164ca8;
}

.status-ready_for_collection {

    background: #e6f8e8;

    color: #267a37;
}

.status-collected {

    background: #eeeaff;

    color: #6043a5;
}

.status-closed {

    background: #e9edf2;

    color: #405066;
}

.status-quote_declined,
.status-cancelled {

    background: #ffe9e7;

    color: #b42318;
}


/* =========================================================
   PAYMENT BADGES
   ========================================================= */

.payment-not_applicable {

    background: #edf1f5;

    color: #536174;
}

.payment-payment_pending {

    background: #fff0dd;

    color: #b45a00;
}

.payment-paid {

    background: #e6f8e8;

    color: #267a37;
}


/* =========================================================
   MUTED
   ========================================================= */

.muted {

    color: var(--muted);
}


/* =========================================================
   FLASH
   ========================================================= */

.flash {

    margin-bottom: 20px;

    padding: 12px 15px;

    border:
        1px solid #bde4c5;

    border-radius: 9px;

    background: #edf9ef;

    color: #267239;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   FORMS
   ========================================================= */

/* Repair intake form */
.repair-form-page { max-width:1120px; margin:0 auto; }
.repair-form-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.repair-form-header h1 { max-width:720px; margin:3px 0 7px; color:var(--navy); font-size:clamp(25px,3vw,34px); letter-spacing:-.025em; }
.repair-form-header p { margin:0; color:var(--muted); font-size:12px; }
.repair-form-eyebrow { color:var(--blue) !important; font-size:9px !important; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.repair-form { display:grid; gap:17px; }
.form-section-card { position:relative; padding:20px; overflow:hidden; border-width:1px 1px 1px 4px; border-radius:15px; }
.form-section-blue { border-color:#8bb6f2; }
.form-section-indigo { border-color:#9fa7e8; }
.form-section-cyan { border-color:#72bed3; }
.form-section-amber { border-color:#e8ae58; background:rgba(255,252,246,.96); }
.form-section-red { border-color:#de8d7e; }
.form-section-card .form-grid { gap:16px 18px; }
.form-section-header { display:flex; align-items:center; gap:11px; margin-bottom:17px; }
.form-section-header > div { min-width:0; }
.form-section-header p { margin:0 0 1px; color:var(--blue); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.form-section-header h2 { margin:0; color:var(--navy); font-size:18px; }
.form-section-icon { display:grid; place-items:center; width:35px; height:35px; flex:0 0 35px; border-radius:10px; background:#edf3ff; color:var(--blue); font-size:15px; font-weight:900; }
.form-section-amber .form-section-icon { background:#fff0d8; color:#a95800; }
.form-section-red .form-section-icon { background:#fff0ed; color:#ad412e; }
.form-section-link { margin-left:auto; color:var(--blue); font-size:11px; font-weight:800; text-decoration:none; }
.form-section-link:hover { text-decoration:underline; }
.required-mark { color:#c9382b; font-weight:900; }

.validation-summary { display:flex; align-items:flex-start; gap:12px; margin-bottom:17px; padding:15px; border:1px solid #efbbb4; border-radius:12px; background:#fff3f1; color:#8e2d22; }
.validation-summary-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:#c74434; color:#fff; font-weight:900; }
.validation-summary strong { font-size:12px; }
.validation-summary ul { margin:7px 0 0; padding-left:17px; font-size:11px; line-height:1.6; }
.is-invalid { border-color:#d95848 !important; box-shadow:0 0 0 3px rgba(217,88,72,.08) !important; }
.error { margin:6px 0 0; color:#b43728; font-size:10px; font-weight:700; }

.customer-preview { padding:14px; border:1px solid #d7e5fa; border-radius:11px; background:#f4f8ff; }
.customer-preview[hidden] { display:none; }
.customer-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.customer-preview-heading strong { color:var(--navy); font-size:13px; }
.customer-preview-heading span { padding:4px 8px; border-radius:999px; background:#e4eeff; color:#285ca6; font-size:9px; font-weight:850; }
.customer-preview dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; }
.customer-preview dl > div { min-width:0; }
.customer-preview dt { color:var(--muted); font-size:9px; font-weight:750; }
.customer-preview dd { margin:3px 0 0; overflow-wrap:anywhere; color:var(--navy); font-size:11px; font-weight:700; }

.intake-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.intake-choice-field { min-width:0; margin:0; padding:13px; border:1px solid #eadfcf; border-radius:11px; background:rgba(255,255,255,.82); }
.intake-choice-field legend { padding:0 3px; color:var(--navy); font-size:11px; font-weight:800; }
.intake-choice-group { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:6px; }
.intake-choice-group label { cursor:pointer; }
.intake-choice-group input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.intake-choice-group span { display:grid; place-items:center; min-height:38px; border:1px solid #d9e1ea; border-radius:9px; background:#fff; color:#536174; font-size:11px; font-weight:800; transition:border-color .15s ease,background .15s ease,color .15s ease; }
.intake-choice-group input:checked + span { border-color:var(--blue); background:#eaf2ff; color:#124fae; box-shadow:0 0 0 2px rgba(20,100,255,.08); }
.intake-choice-group input:focus-visible + span { outline:2px solid var(--blue); outline-offset:2px; }
.fault-primary { min-height:135px; }

.form-submit-panel { border-color:#82a9e8; background:linear-gradient(135deg,rgba(246,249,255,.98),rgba(255,255,255,.98)); }
.booking-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:0; }
.booking-summary > div { min-width:0; padding:10px; border:1px solid #e1e8f2; border-radius:9px; background:rgba(255,255,255,.88); }
.booking-summary dt { color:var(--muted); font-size:9px; font-weight:750; }
.booking-summary dd { margin:4px 0 0; overflow-wrap:anywhere; color:var(--navy); font-size:11px; font-weight:800; }
.form-submit-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:16px; margin-top:16px; border-top:1px solid #dce5f2; }
.form-submit-actions > p { max-width:520px; margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.form-submit-actions .actions { flex:0 0 auto; margin:0; }
.form-submit-actions button[disabled] { cursor:wait; opacity:.72; }

@media (max-width:800px) {
    .intake-check-grid { grid-template-columns:1fr; }
    .booking-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:600px) {
    .repair-form-header { align-items:flex-start; flex-direction:column; }
    .repair-form-header .btn { width:100%; }
    .form-section-card { padding:16px; border-radius:12px; }
    .form-section-header { align-items:flex-start; flex-wrap:wrap; }
    .form-section-link { width:100%; margin:3px 0 0 46px; }
    .customer-preview dl,.booking-summary { grid-template-columns:1fr; }
    .form-submit-actions { align-items:stretch; flex-direction:column; }
    .form-submit-actions .actions { display:grid; grid-template-columns:1fr; }
    .form-submit-actions .btn { width:100%; }
}

.form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.field {

    min-width: 0;
}

.field.full {

    grid-column: 1 / -1;
}

.field label {

    display: block;

    margin-bottom: 6px;

    color: var(--navy);

    font-size: 12px;

    font-weight: 750;
}

input,
select,
textarea {

    width: 100%;

    padding: 10px 12px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    background: #fff;

    color: var(--text);

    outline: none;
}

input,
select {

    min-height: 41px;
}

textarea {

    min-height: 105px;

    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(20,100,255,.10);
}


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

.actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;
}


/* =========================================================
   DETAIL / JOB PAGES
   ========================================================= */

.detail-grid {

    display: grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(320px,.8fr);

    gap: 20px;

    align-items: start;
}

.split {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap: 20px;
}


/* =========================================================
   DETAIL LIST
   ========================================================= */

.detail-list {

    display: grid;

    grid-template-columns:
        minmax(150px,.7fr)
        minmax(0,1.3fr);
}

.detail-list dt,
.detail-list dd {

    margin: 0;

    padding: 9px 0;

    border-bottom:
        1px solid #edf1f6;
}

.detail-list dt {

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;
}

.detail-list dd {

    color: var(--text);

    font-size: 12px;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {

    margin: 0;

    padding-left: 22px;
}

.timeline li {

    margin-bottom: 16px;

    padding-left: 4px;
}

.timeline li::marker {

    color: var(--blue);

    font-weight: 800;
}


/* =========================================================
   FILE INPUT
   ========================================================= */

input[type="file"] {

    padding: 8px;

    background: #f8fafc;

    cursor: pointer;
}

input[type="file"]::file-selector-button {

    margin-right: 9px;

    padding: 7px 11px;

    border: 0;

    border-radius: 6px;

    background: var(--blue);

    color: #fff;

    font-size: 11px;

    font-weight: 750;

    cursor: pointer;
}


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

.empty {

    padding: 40px 20px !important;

    color: var(--muted);

    text-align: center;
}


/* =========================================================
   HR
   ========================================================= */

hr {

    border: 0;

    border-top:
        1px solid var(--border);

    margin: 22px 0;
}


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

/* =========================================================
   REPAIR JOB WORKSPACE
   ========================================================= */

.job-page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.job-page-header h1 { margin:2px 0 7px; color:var(--navy); font-size:clamp(27px,3vw,38px); letter-spacing:-.03em; }
.job-page-header p { margin:0; }
.job-page-eyebrow,.job-card-kicker { color:var(--blue); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.job-page-badges { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.job-page-badges .badge { padding:7px 12px; font-size:11px; }

.job-workspace { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(330px,1fr); gap:22px; align-items:start; }
.job-main-column,.job-side-column { display:grid; gap:18px; min-width:0; }
.job-card,.workflow-card { overflow:hidden; border-radius:15px; padding:20px; }
.job-card-heading,.workflow-card-heading { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.job-card-heading h2,.workflow-card-heading h2 { margin:0; color:var(--navy); font-size:18px; }
.job-card-heading p { margin:0 0 2px; }
.job-card-icon,.workflow-card-icon { display:inline-grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:#edf3ff; color:var(--blue); font-size:16px; font-weight:900; }

.job-detail-group + .job-detail-group { margin-top:22px; }
.job-detail-group h3,.repair-readonly-grid h3,.history-summary h3,.action-intro h3,.conditional-upload h3,.document-upload-panel h3 { margin:0 0 9px; color:var(--navy); font-size:13px; }
.job-detail-list { grid-template-columns:minmax(145px,.68fr) minmax(0,1.32fr); }
.job-detail-list dd { overflow-wrap:anywhere; font-weight:620; }
.detail-subtext { display:block; margin-top:3px; color:var(--muted); font-weight:500; }
.field-spaced { margin-top:14px; }
.repair-readonly-grid { display:grid; gap:18px; }
.repair-copy { padding:14px; border:1px solid #e5eaf1; border-radius:10px; background:#f9fbfd; line-height:1.6; }

.workflow-history-card { background:rgba(255,255,255,.94); }
.job-timeline { margin-bottom:12px; }
.timeline-meta { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.job-timeline p,.compact-timeline p { margin:6px 0 0; }
.history-summary { padding-top:17px; margin-top:17px; border-top:1px solid #e7ecf3; }
.history-summary p { margin:5px 0; }
.compact-timeline { margin-top:12px; }

.workflow-card { border-width:1px 1px 1px 4px; box-shadow:0 8px 24px rgba(15,35,65,.07); }
.current-stage-card { border-color:#8ab7f4; background:#f3f8ff; }
.next-action-card { border-color:#f1aa50; background:#fff9ef; }
.payment-card { border-color:#78bd89; background:#f3fbf5; }
.documents-card { border-color:#a994dc; background:#f8f5ff; }
.email-history-card { border-color:#71b9d4; background:#f2fbfe; }
.next-action-card .workflow-card-icon { background:#fff0d8; color:#b85e00; }
.payment-card .workflow-card-icon { background:#e2f5e6; color:#28753a; }
.documents-card .workflow-card-icon { background:#ece6fb; color:#6747a8; }
.email-history-card .workflow-card-icon { background:#dff4fb; color:#147391; }

.current-stage-panel { padding:17px; border:1px solid transparent; border-radius:12px; font-size:clamp(18px,2vw,24px); font-weight:900; text-align:center; }
.status-panel-received { background:#e7f0ff; color:#1452b8; border-color:#c6dafa; }
.status-panel-under_diagnosis { background:#e5f9ff; color:#08799f; border-color:#b8e6f2; }
.status-panel-awaiting_quote { background:#fff0dd; color:#a95300; border-color:#f4cf9e; }
.status-panel-approved_proceed,.status-panel-in_repair { background:#e5edff; color:#164ca8; border-color:#c6d5f7; }
.status-panel-ready_for_collection { background:#e6f8e8; color:#267a37; border-color:#bce2c4; }
.status-panel-collected { background:#eeeaff; color:#6043a5; border-color:#d4caf1; }
.status-panel-closed { background:#e9edf2; color:#405066; border-color:#ced6df; }
.status-panel-cancelled,.status-panel-quote_declined { background:#ffe9e7; color:#b42318; border-color:#f4c3bf; }

.stage-meta,.card-help,.action-intro p,.conditional-upload p,.document-upload-panel p { margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.action-intro { margin-bottom:15px; }
.conditional-upload { margin-top:15px; padding:15px; border:1px solid #edcf9f; border-radius:11px; background:rgba(255,255,255,.72); }
.conditional-upload[hidden] { display:none; }
.btn-workflow { background:#dc7109; color:#fff; border-color:#dc7109; }
.btn-workflow:hover { background:#bd5e03; border-color:#bd5e03; }
.btn-payment { background:#2c8441; color:#fff; border-color:#2c8441; }
.btn-payment:hover { background:#246f36; border-color:#246f36; }
.btn-document { background:#7252b1; color:#fff; border-color:#7252b1; }
.btn-document:hover { background:#60449a; border-color:#60449a; }
.next-action-card .actions .btn,.payment-card .actions .btn { width:100%; justify-content:center; }
.workflow-complete-message { padding:14px; border-radius:10px; background:rgba(255,255,255,.7); color:var(--muted); text-align:center; }
.payment-state { display:inline-flex; margin-bottom:9px; padding:9px 14px; border-radius:999px; font-size:12px; font-weight:900; box-shadow:0 3px 10px rgba(31,92,47,.09); }
.payment-card .card-help { margin:5px 0 12px; }
.payment-card .field-spaced { margin-top:10px; }
.payment-card .actions { margin-top:13px; }
.direct-action-stage { display:inline-flex; margin:0 0 8px; padding:6px 10px; border-radius:8px; background:#fff0d8; color:#9b4e00; font-size:11px; font-weight:850; }
.direct-action-copy { margin:0 0 12px; color:#5c6470; font-size:12px; line-height:1.55; }
.history-toggle { padding:0; border:0; background:transparent; color:var(--blue); cursor:pointer; font-size:11px; font-weight:800; }
.history-toggle:hover { text-decoration:underline; }
.email-toggle { margin-top:11px; color:#147391; }
.collapsible-extra.is-collapsed { display:none; }

.document-list,.email-list { display:grid; gap:10px; }
.document-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid #e2d9f4; border-radius:11px; background:rgba(255,255,255,.82); }
.document-row-main { display:grid; gap:2px; min-width:0; }
.document-row-main strong { color:var(--navy); font-size:12px; }
.document-row-main span { overflow:hidden; color:#394a62; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.document-row-main small,.email-row small { color:var(--muted); font-size:10px; }
.document-row .btn { flex:0 0 auto; min-height:32px; padding:7px 10px; font-size:10px; }
.document-upload-panel { margin-top:16px; padding-top:16px; border-top:1px solid #ded4f0; }
.email-row { display:grid; gap:2px; padding:8px 0; border-bottom:1px solid #dcecf2; }
.email-row:last-child { border-bottom:0; }
.email-row strong { color:var(--navy); font-size:11px; line-height:1.4; }
.email-row span { color:#3c6171; font-size:11px; }

@media (max-width:1000px) { .job-workspace { grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr); } }
@media (max-width:850px) { .job-workspace { grid-template-columns:1fr; } .job-side-column { grid-row:1; } }
@media (max-width:560px) {
    .job-page-header { align-items:flex-start; flex-direction:column; }
    .job-page-badges { justify-content:flex-start; }
    .job-card,.workflow-card { padding:16px; border-radius:12px; }
    .job-detail-list { grid-template-columns:1fr; }
    .job-detail-list dt { padding-bottom:2px; border-bottom:0; }
    .job-detail-list dd { padding-top:2px; }
    .document-row { align-items:stretch; flex-direction:column; }
    .document-row .btn { width:100%; justify-content:center; }
}

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

.login-body { min-width:0; margin:0; overflow-x:hidden; background:#f2f6fb; }
.login-page { display:grid; grid-template-columns:minmax(420px,46%) minmax(0,54%); min-height:100vh; }
.login-brand-panel { position:relative; display:flex; min-height:100vh; overflow:hidden; background:linear-gradient(145deg,#041b42 0%,#062b65 60%,#073579 100%); color:#fff; isolation:isolate; }
.login-brand-panel::before,.login-brand-panel::after { content:""; position:absolute; border:1px solid rgba(71,143,255,.16); border-radius:50%; pointer-events:none; }
.login-brand-panel::before { width:520px; height:520px; right:-260px; top:-150px; }
.login-brand-panel::after { width:360px; height:360px; left:-190px; bottom:-150px; }
.login-brand-watermark { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),url("../images/laptop-solution-logo.png"); background-position:center,center,center 72%; background-repeat:repeat,repeat,no-repeat; background-size:44px 44px,44px 44px,70% auto; opacity:.34; }
.login-brand-content { display:flex; flex-direction:column; width:100%; max-width:720px; min-height:100%; padding:clamp(34px,4.5vw,66px); }
.login-brand-identity { display:flex; align-items:center; flex-direction:column; gap:10px; width:100%; padding-top:clamp(12px,2vh,28px); text-align:center; }
.login-brand-logo { width:min(72%,310px); height:clamp(105px,16vh,160px); object-fit:contain; object-position:center; }
.login-brand-identity > span { color:#91b9f8; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.login-brand-message { max-width:560px; margin-top:clamp(34px,5vh,62px); }
.login-brand-kicker { margin:0 0 13px; color:#70a8ff; font-size:9px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.login-brand-message h1 { margin:0; color:#fff; font-size:clamp(34px,4.1vw,58px); line-height:1.08; letter-spacing:-.04em; }
.login-brand-message h1 span { color:#4b94ff; }
.login-brand-message > p:last-child { max-width:520px; margin:22px 0 0; color:#b8cce8; font-size:12px; line-height:1.75; }
.login-feature-list { display:grid; grid-template-columns:1fr; gap:0; margin-top:clamp(28px,4vh,45px); }
.login-feature-list article { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid rgba(151,187,239,.14); }
.login-feature-list article:first-child { border-top:1px solid rgba(151,187,239,.14); }
.login-feature-list article > span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid rgba(110,164,248,.28); border-radius:9px; background:rgba(54,116,216,.13); color:#70a8ff; font-size:9px; font-weight:900; }
.login-feature-list strong { display:block; font-size:12px; }
.login-feature-list p { margin:4px 0 0; color:#9fb8da; font-size:10px; line-height:1.5; }
.login-security-note { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:30px; color:#b7cae5; }
.login-security-note > span { color:#4f97ff; font-size:9px; }
.login-security-note strong { display:block; color:#e5eefb; font-size:10px; }
.login-security-note p { margin:3px 0 0; font-size:9px; }

.login-main { display:grid; place-items:center; min-width:0; min-height:100vh; padding:clamp(24px,5vw,70px); background:radial-gradient(circle at 90% 10%,rgba(20,100,255,.055),transparent 28%),#f3f7fc; }
.login-card { width:min(100%,560px); padding:clamp(42px,4.5vw,54px); border:1px solid #dce5f0; border-radius:21px; background:rgba(255,255,255,.98); box-shadow:0 22px 55px rgba(8,36,78,.12); }
.login-icon { display:grid; place-items:center; width:86px; height:86px; margin:0 auto 24px; border-radius:50%; background:#e9f2ff; box-shadow:0 8px 22px rgba(20,100,255,.09); }
.login-icon span,.login-lock-mini { position:relative; display:block; width:22px; height:17px; border:2px solid #1464ff; border-radius:4px; }
.login-icon span::before,.login-lock-mini::before { content:""; position:absolute; width:14px; height:12px; left:2px; top:-13px; border:2px solid #1464ff; border-bottom:0; border-radius:9px 9px 0 0; }
.login-card h2 { margin:0; color:var(--navy); font-size:34px; line-height:1.15; letter-spacing:-.025em; text-align:center; }
.login-subtitle { margin:10px 0 0; color:var(--muted); font-size:16px; text-align:center; }
.login-accent { width:48px; height:3px; margin:19px auto 34px; border-radius:99px; background:var(--blue); }
.login-alert { display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; padding:12px; border:1px solid #efc1bb; border-radius:10px; background:#fff3f1; color:#932f23; }
.login-alert > span { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:7px; background:#c74737; color:#fff; font-size:11px; font-weight:900; }
.login-alert strong { font-size:11px; }
.login-alert ul { margin:4px 0 0; padding-left:15px; font-size:10px; line-height:1.5; }
.login-form { display:grid; gap:22px; }
.login-field label { display:block; margin-bottom:9px; color:var(--navy); font-size:14px; font-weight:800; }
.login-input-wrap { position:relative; }
.login-input-wrap input { min-height:52px; padding-left:45px; border-radius:10px; font-size:14px; }
.login-password-wrap input { padding-right:64px; }
.login-input-icon { position:absolute; left:15px; top:50%; z-index:2; transform:translateY(-50%); color:#6b7d94; font-size:14px; font-weight:800; pointer-events:none; }
.login-lock-mini { width:13px; height:11px; left:16px; border-width:1.5px; border-color:#6b7d94; }
.login-lock-mini::before { width:8px; height:7px; left:1px; top:-8px; border-width:1.5px; border-color:#6b7d94; }
.login-password-toggle { position:absolute; right:8px; top:50%; min-height:36px; padding:0 11px; transform:translateY(-50%); border:0; border-radius:7px; background:#eef4fc; color:#315b91; cursor:pointer; font-size:11px; font-weight:850; }
.login-password-toggle:hover { background:#e2edfb; }
.login-password-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.login-field-error { margin:6px 0 0; color:#b43728; font-size:10px; font-weight:700; }
.login-submit { width:100%; min-height:54px; margin-top:4px; border-radius:10px; font-size:15px; }
.login-submit[disabled] { cursor:wait; opacity:.75; }
.login-footer { padding-top:21px; margin-top:24px; border-top:1px solid #e7ecf2; text-align:center; }
.login-footer p { margin:0; color:#7a889a; font-size:9px; }
.login-footer span { display:block; margin-top:4px; color:#9ba6b4; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.login-mobile-brand { display:none; }

@media (max-width:1050px) {
    .login-page { grid-template-columns:42% 58%; }
    .login-brand-content { padding:36px; }
    .login-feature-list { grid-template-columns:1fr; }
}

@media (max-width:850px) {
    .login-page { display:block; min-height:100vh; }
    .login-brand-panel { display:none; }
    .login-main { align-content:center; min-height:100vh; padding:26px; }
    .login-mobile-brand { display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:18px; color:var(--navy); }
    .login-mobile-brand img { width:68px; height:42px; object-fit:contain; }
    .login-mobile-brand strong { font-size:13px; }
}

@media (max-width:480px) {
    .login-main { padding:18px; }
    .login-card { padding:25px 20px; border-radius:17px; }
    .login-card h2 { font-size:24px; }
}

@media (max-width: 1150px) {

    .stats {

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

    .sidebar {

        width: 230px;

        flex-basis: 230px;
    }

    .brand-logo {

        width: 185px;

        max-width: 185px;
    }
}


@media (max-width: 850px) {

    .detail-grid,
    .split {

        grid-template-columns: 1fr;
    }

    .page {

        padding: 22px;
    }

    .topbar {

        padding:
            12px 20px;
    }
}


@media (max-width: 700px) {

    .app-shell {

        display: block;
    }

    .sidebar {

        position: relative;

        width: 100%;

        height: auto;

        min-height: auto;

        padding: 12px;
    }

    .brand {

        height: 90px;
    }

    .brand-mark {

        height: 85px;
    }

    .brand-logo {

        width: 170px;

        height: 80px;
    }

    .nav {

        flex-direction: row;

        flex-wrap: wrap;
    }

    .nav a {

        flex: 1 1 auto;

        justify-content: center;
    }

    .dashboard-heading {

        flex-direction: column;
    }

    .stats {

        grid-template-columns: 1fr;
    }

    .page::before {

        width: 480px;

        height: 480px;

        opacity: .018;
    }
}


@media (max-width: 480px) {

    .page {

        padding: 16px;
    }

    .topbar {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

    .dashboard-heading h1 {

        font-size: 24px;
    }

    .stat {

        min-height: 105px;
    }

    .stat-icon {

        width: 48px;

        height: 48px;

        flex-basis: 48px;
    }

    .stat-icon svg {

        width: 25px;

        height: 25px;
    }
}/* =========================================================
   JOBS FILTER BAR
   ========================================================= */

.filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 18px;
}

.filters .search {
    flex: 2;
    min-width: 220px;
}

.filters select {
    flex: 1;
    min-width: 150px;
}

.filters button {
    flex: 0 0 auto;
    margin-left: 2px;
}

/* =========================================================
   MANAGEMENT LIST PAGES
   ========================================================= */
.management-page { display:grid; gap:18px; }
.management-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.management-header h1 { margin:2px 0 5px; color:var(--navy); font-size:clamp(25px,3vw,34px); line-height:1.1; letter-spacing:-.025em; }
.management-header p { margin:0; color:var(--muted); }
.management-eyebrow { margin:0 !important; color:var(--blue) !important; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.management-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.management-count { color:#687a91; font-size:12px; font-weight:800; }

.status-filter-strip { display:flex; align-items:center; gap:8px; max-width:100%; overflow-x:auto; padding:2px 1px 5px; scrollbar-width:thin; }
.status-filter-chip { display:inline-flex; align-items:center; gap:7px; min-height:35px; flex:0 0 auto; padding:0 13px; border:1px solid #dbe5f1; border-radius:999px; background:#fff; box-shadow:0 3px 10px rgba(19,45,78,.04); color:#53677f; font-size:11px; font-weight:800; text-decoration:none; }
.status-filter-chip:hover { border-color:#abc6ed; color:var(--blue); }
.status-filter-chip.is-active { border-color:var(--blue); background:#eaf2ff; color:#0b55ce; box-shadow:0 5px 15px rgba(20,100,255,.11); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#91a0b2; }
.status-dot-received { background:#2e7be8; }
.status-dot-under_diagnosis { background:#8d63e8; }
.status-dot-awaiting_quote { background:#e69a28; }
.status-dot-in_repair { background:#24a3a8; }
.status-dot-ready_for_collection { background:#24a065; }
.status-dot-collected { background:#64748b; }

.filter-card { padding:17px; margin:0; }
.filter-grid { display:grid; grid-template-columns:minmax(210px,1.65fr) repeat(3,minmax(135px,1fr)) auto; align-items:end; gap:12px; }
.filter-grid .field { margin:0; }
.filter-grid label { display:block; margin:0 0 6px; color:#42566f; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.055em; }
.filter-grid input,.filter-grid select { min-height:41px; }
.filter-actions { display:flex; gap:8px; }
.filter-actions .btn { min-height:41px; white-space:nowrap; }

.data-card { min-width:0; padding:0; overflow:hidden; }
.data-card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-bottom:1px solid #e6edf5; }
.data-card-heading h2 { margin:3px 0 0; color:var(--navy); font-size:17px; }
.data-card-heading > span { color:#718198; font-size:11px; font-weight:800; }
.table-responsive { width:100%; overflow-x:auto; }
.professional-table { width:100%; min-width:850px; border-collapse:collapse; }
.professional-table th { padding:12px 15px; border-bottom:1px solid #dce6f1; background:#f5f8fc; color:#617289; font-size:9px; font-weight:900; letter-spacing:.075em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.professional-table td { padding:14px 15px; border-bottom:1px solid #edf1f6; color:#40536b; font-size:11px; vertical-align:middle; }
.professional-table tbody tr:last-child td { border-bottom:0; }
.professional-table tbody tr:hover { background:#fbfdff; }
.professional-table td small { display:block; max-width:230px; margin-top:3px; overflow:hidden; color:#8290a2; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.table-primary { color:#135fcf; font-weight:900; text-decoration:none; }
.table-primary:hover { text-decoration:underline; }
.row-actions { display:flex; align-items:center; gap:6px; }
.row-actions form { margin:0; }
.btn-compact { min-height:31px; padding:6px 10px; font-size:9px; }
.btn-danger-soft { border-color:#efc9c4; background:#fff5f3; color:#aa3a2e; }
.btn-danger-soft:hover { border-color:#dc948b; background:#ffeae7; }

.empty-state { display:grid; justify-items:center; gap:8px; padding:44px 20px; text-align:center; }
.empty-state > span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#edf4fe; color:#4c83cf; font-size:21px; font-weight:900; }
.empty-state h2 { margin:0; color:var(--navy); font-size:16px; }
.empty-state p { max-width:430px; margin:0; color:var(--muted); }

.summary-grid { display:grid; gap:13px; }
.summary-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.summary-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.summary-card { display:flex; align-items:center; gap:13px; min-width:0; padding:16px; border:1px solid #dfe8f2; border-radius:13px; background:#fff; box-shadow:0 7px 19px rgba(13,40,74,.055); }
.summary-card > span { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:#eaf2ff; color:#1c68d5; font-size:14px; font-weight:950; }
.summary-card small { display:block; margin-bottom:3px; overflow:hidden; color:#76869a; font-size:9px; font-weight:850; letter-spacing:.045em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.summary-card strong { color:var(--navy); font-size:22px; line-height:1; }
.summary-cyan > span { background:#e5f8fa; color:#16818a; }
.summary-purple > span { background:#f1ebff; color:#7149bd; }
.summary-navy > span { background:#e8edf5; color:#203c64; }

.type-badge,.role-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:999px; font-size:8px; font-weight:900; letter-spacing:.035em; white-space:nowrap; }
.type-individual { background:#e8f2ff; color:#1761c2; }
.type-company { background:#eee9ff; color:#6943b5; }
.role-administrator { background:#e8edf5; color:#203c64; }
.role-technician { background:#e5f8fa; color:#147d86; }
.role-company_manager { background:#eee9ff; color:#6943b5; }
.info-banner { display:flex; align-items:center; gap:11px; padding:12px 15px; border:1px solid #cfe1f8; border-radius:11px; background:#edf6ff; color:#315a85; }
.info-banner > span { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:#2473d9; color:#fff; font-size:10px; font-weight:900; }
.info-banner p { margin:0; font-size:10px; }
.role-guide { padding:0; overflow:hidden; }
.role-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.role-guide-grid article { padding:17px 20px; border-right:1px solid #e7edf4; }
.role-guide-grid article:last-child { border-right:0; }
.role-guide-grid p { margin:9px 0 0; color:#718096; font-size:10px; line-height:1.55; }

@media (max-width:1100px) {
    .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .filter-search { grid-column:span 2; }
    .filter-actions { justify-content:flex-end; }
    .summary-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:700px) {
    .management-header { align-items:flex-start; flex-direction:column; gap:14px; }
    .management-header-actions { width:100%; justify-content:space-between; }
    .filter-grid { grid-template-columns:1fr; }
    .filter-search { grid-column:auto; }
    .filter-actions { justify-content:stretch; }
    .filter-actions .btn { flex:1; }
    .summary-grid-three,.summary-grid-four,.role-guide-grid { grid-template-columns:1fr; }
    .role-guide-grid article { border-right:0; border-bottom:1px solid #e7edf4; }
    .role-guide-grid article:last-child { border-bottom:0; }
    .professional-table { min-width:760px; }
}