/* =========================================================
   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:
        radial-gradient(circle, rgba(36, 107, 254, .045), transparent 62%);

    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:#b65313; 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;
}

.status-no_fix {

    background: #334155;

    color: #fff;
}

.status-waiting_for_parts {

    background: #d7eef5;

    color: #0c6d84;
}


/* =========================================================
   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:1160px; margin:0 auto; }
.repair-form-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.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:#b6530d !important; font-size:9px !important; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.repair-form { display:grid; gap:12px; }
.form-section-card { --step-accent:#3978ae; --step-soft:#eaf3fb; position:relative; padding:16px 18px; overflow:visible; border:1px solid #dbe4ee; border-radius:10px; background:#fcfdff; box-shadow:0 3px 12px rgba(53,72,98,.06); }
.form-section-card:has(.ls-custom-select.is-open) { z-index:10; }
.form-section-blue { --step-accent:#3978ae; --step-soft:#eaf3fb; }
.form-section-indigo { --step-accent:#705aa4; --step-soft:#f0ecfa; }
.form-section-cyan { --step-accent:#347a96; --step-soft:#e7f3f7; }
.form-section-amber { --step-accent:#ad640d; --step-soft:#fff1d9; }
.form-section-red { --step-accent:#ad4d3e; --step-soft:#faebe8; }
.form-section-card .form-grid { gap:12px 16px; }
.password-input-wrap { position:relative; }
.password-input-wrap input { padding-right:46px; }
.password-visibility-toggle { position:absolute; top:50%; right:7px; display:grid; place-items:center; width:34px; height:34px; padding:0; transform:translateY(-50%); border:0; border-radius:7px; background:transparent; color:#52647c; cursor:pointer; }
.password-visibility-toggle:hover { background:#f4eadf; color:#a84b0a; }
.password-visibility-toggle:focus-visible { outline:2px solid #d86815; outline-offset:1px; }
.password-visibility-toggle .password-icon { display:grid; place-items:center; }
.password-visibility-toggle .password-icon[hidden] { display:none; }
.password-visibility-toggle svg { width:20px; height:20px; }
.form-section-header { display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.form-section-header > div { min-width:0; }
.form-section-header h2 { margin:0; color:#122038; font-size:17px; letter-spacing:-.015em; }
.form-step-heading p { margin:3px 0 0; color:#66758a; font-size:10px; line-height:1.35; }
.form-section-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:8px; background:var(--step-soft); color:var(--step-accent); }
.form-section-icon svg { width:20px; height:20px; }
.form-step-number { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border:1px solid color-mix(in srgb,var(--step-accent) 32%,white); border-radius:50%; background:var(--step-soft); color:var(--step-accent); font-size:12px; font-weight:850; }
.form-section-link { margin-left:auto; color:#a94b0b; 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:10px; }
.intake-choice-field { min-width:0; margin:0; padding:9px 10px 10px; border:1px solid #eadfcf; border-radius:8px; background:#fffdfa; }
.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:6px; margin-top:4px; }
.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:34px; border:1px solid #d9e1ea; border-radius:7px; 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:#d7781f; background:#fff0dc; color:#8e480c; box-shadow:0 0 0 2px rgba(215,120,31,.08); }
.intake-choice-group input:focus-visible + span { outline:2px solid #d7781f; outline-offset:2px; }
.fault-condition-grid textarea { min-height:78px; }
.fault-condition-grid .fault-primary,.fault-condition-grid .field:nth-child(2) textarea { min-height:90px; }

.form-submit-panel { --step-accent:#3c805b; --step-soft:#e8f4ec; border-color:#cfe1d5; background:#fbfdfb; }
.booking-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px; margin:0; }
.booking-summary > div { min-width:0; padding:8px 2px; border-bottom:1px solid #dfe8e2; background:transparent; }
.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:12px; margin-top:10px; border-top:1px solid #d8e5dc; }
.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 #create-job-button { border-color:#d75e0e; background:linear-gradient(135deg,#f47a1f,#e8610f); color:#fff; box-shadow:0 5px 12px rgba(213,91,13,.2); }
.form-submit-actions #create-job-button:hover { border-color:#bd4b05; background:linear-gradient(135deg,#e96a12,#d95308); }
.form-submit-actions button[disabled] { cursor:wait; opacity:.72; }

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

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

@media (max-width:600px) {
    .repair-form-header { align-items:flex-start; flex-direction:column; }
    .repair-form-header .btn { width:100%; }
    .repair-form-page .form-grid { grid-template-columns:1fr; }
    .form-section-card { padding:14px; border-radius:10px; }
    .form-section-header { align-items:flex-start; flex-wrap:wrap; }
    .form-section-link { width:100%; margin:2px 0 0 73px; }
    .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; }
.device-password-control { display:inline-flex; align-items:center; gap:9px; min-height:28px; }
.device-password-value { color:var(--navy); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-weight:750; letter-spacing:.045em; }
.device-password-toggle { min-height:27px; padding:4px 10px; border:1px solid #cbd9ea; border-radius:7px; background:#f4f8fd; color:#245c9e; cursor:pointer; font:inherit; font-size:9px; font-weight:850; }
.device-password-toggle:hover { border-color:#9dbbe0; background:#eaf3ff; }
.device-password-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.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; }
.return-assessment-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 12px; }
.return-option-card { display:flex; align-items:flex-start; gap:10px; margin:0; padding:12px; border:1px solid #dbe5f1; border-radius:11px; background:#fff; cursor:pointer; }
.next-action-card .return-option-card input[type=radio] { flex:none; width:16px; min-width:16px; height:16px; min-height:0; margin:2px 0 0; padding:0; accent-color:#dc7109; }
.return-option-card .return-option-text strong { display:block; color:var(--navy); font-size:13px; }
.return-option-card .return-option-text small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.5; }
.return-option-card:has(input:checked) { border-color:#ff8118; background:#fff7ee; box-shadow:0 3px 10px rgba(220,113,9,.12); }
.return-option-card:has(input:focus-visible) { outline:3px solid #bd4a00; outline-offset:2px; }
@media(max-width:480px) { .return-assessment-choices { grid-template-columns:minmax(0,1fr); } }
.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),radial-gradient(circle at 50% 72%,rgba(36,107,254,.22),transparent 38%); background-position:center; background-repeat:repeat,repeat,no-repeat; background-size:44px 44px,44px 44px,auto; opacity:.55; }
.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:#b65313; 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; }
.status-dot-closed { background:#334155; }
.status-dot-no_fix { background:#334155; }
.status-dot-waiting_for_parts { background:#1f8fa3; }

.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; }
}

/* =========================================================
   CUSTOMER BRANCHES
   ========================================================= */
.customer-branches-card { margin-top:18px; padding:20px; }
.branch-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:17px; }
.branch-card-heading h2 { margin:3px 0 4px; color:var(--navy); }
.branch-card-heading p { margin:0; }
.branch-add-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; padding:14px; margin-bottom:14px; border:1px solid #dce7f3; border-radius:11px; background:#f7faff; }
.branch-add-form .field { margin:0; }
.branch-add-form .btn { min-height:41px; }
.branch-list { display:grid; gap:8px; }
.branch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid #e4eaf2; border-radius:10px; background:#fff; }
.branch-row > div { display:flex; align-items:center; gap:9px; min-width:0; }
.branch-row strong { overflow:hidden; color:var(--navy); text-overflow:ellipsis; white-space:nowrap; }
.branch-row form { margin:0; }
.branch-state { display:inline-flex; align-items:center; min-height:21px; padding:2px 8px; border-radius:999px; font-size:8px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; white-space:nowrap; }
.branch-state.is-active { background:#e4f6e9; color:#23703a; }
.branch-state.is-inactive { background:#edf0f4; color:#657387; }
.branch-empty { padding:25px 15px; border:1px dashed #d8e1ec; border-radius:10px; color:var(--muted); text-align:center; }
.branch-selection-field { padding:14px; border:1px solid #d7e5f6; border-radius:11px; background:#f8fbff; }
.branch-selection-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.inline-branch-panel { padding:12px; margin-top:10px; border:1px solid #cadcf1; border-radius:9px; background:#fff; }
.inline-branch-panel > label { display:block; margin-bottom:6px; color:#42566f; font-size:10px; font-weight:850; }
.inline-branch-panel > div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px; }
.inline-branch-panel input { min-height:37px; }
.inline-branch-status { min-height:15px; margin:7px 0 0; color:#35689f; font-size:9px; font-weight:750; }

@media (max-width:600px) {
    .branch-add-form,.inline-branch-panel > div { grid-template-columns:1fr; }
    .branch-row { align-items:flex-start; }
}

/* =========================================================
   REPAIR CENTER PROFESSIONAL UI
   ========================================================= */
:root { --navy:#0b1d36; --blue:#246bfe; --text:#25364d; --muted:#718197; --border:#e1e8f1; }
body { background:#f3f6fa; color:var(--text); font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.app-shell { min-height:100vh; }
.sidebar { width:244px; flex-basis:244px; padding:24px 17px 18px; background:linear-gradient(180deg,#091a31 0%,#102744 100%); }
.repair-brand { display:flex; align-items:center; gap:12px; min-height:64px; padding:5px 8px 20px; border-bottom:1px solid rgba(255,255,255,.09); color:#fff; text-decoration:none; }
.repair-brand > span:last-child { display:grid; gap:3px; }
.repair-brand strong { font-size:14px; font-weight:900; letter-spacing:.09em; }
.repair-brand small { color:#8fa8c8; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.repair-brand-mark { position:relative; display:inline-block; width:42px; height:38px; flex:0 0 42px; border-radius:10px; background:#246bfe; box-shadow:0 7px 18px rgba(36,107,254,.28); }
.repair-brand-mark i { position:absolute; left:9px; top:9px; width:24px; height:16px; border:2px solid #fff; border-radius:2px; }
.repair-brand-mark i::after { content:""; position:absolute; left:-5px; bottom:-6px; width:30px; height:3px; border-radius:0 0 4px 4px; background:#fff; }
.repair-brand-mark b { position:absolute; right:3px; top:2px; width:10px; height:10px; border:2px solid #9ec2ff; border-radius:50%; }
.nav-section-label { margin:22px 10px 8px; color:#6683a8; font-size:8px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.nav { gap:5px; }
.nav a { min-height:43px; padding:9px 11px; border-radius:9px; color:#aebed3; font-size:11px; font-weight:750; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a.active { background:linear-gradient(100deg,#246bfe,#3d7cff); color:#fff; box-shadow:0 8px 20px rgba(11,75,202,.25); }
.nav-glyph { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:7px; background:rgba(255,255,255,.09); font-size:8px; font-weight:950; }
.nav a.active .nav-glyph { background:rgba(255,255,255,.17); }
.sidebar-create { display:flex; align-items:center; justify-content:center; gap:8px; min-height:41px; margin:21px 4px 0; border:1px solid rgba(128,171,238,.25); border-radius:9px; background:rgba(255,255,255,.07); color:#dfeaff; font-size:10px; font-weight:850; text-decoration:none; }
.sidebar-create:hover { background:rgba(255,255,255,.12); }
.sidebar-create span { color:#76a7ff; font-size:17px; }
.sidebar-footer { display:flex; align-items:center; gap:9px; margin-top:auto; padding:16px 8px 4px; border-top:1px solid rgba(255,255,255,.08); color:#d8e5f5; }
.sidebar-footer p { margin:0; }
.sidebar-footer strong,.sidebar-footer small { display:block; }
.sidebar-footer strong { font-size:9px; }
.sidebar-footer small { margin-top:2px; color:#7892b3; font-size:8px; }
.sidebar-tool { position:relative; width:23px; height:23px; flex:0 0 23px; border:2px solid #5987c5; border-radius:50%; }
.sidebar-tool::after { content:""; position:absolute; width:11px; height:3px; right:-8px; bottom:-4px; border-radius:3px; background:#5987c5; transform:rotate(45deg); }
.content-shell { min-width:0; }
.topbar { min-height:72px; padding:12px 28px; border-bottom:1px solid #e3e9f1; background:rgba(255,255,255,.96); box-shadow:0 3px 14px rgba(24,48,82,.04); }
.topbar-context,.topbar-user { display:flex; align-items:center; gap:10px; }
.topbar-context strong,.topbar-context small,.topbar-user strong,.topbar-user small { display:block; }
.topbar-context strong,.topbar-user strong { color:#1a2c45; font-size:11px; }
.topbar-context small,.topbar-user small { margin-top:2px; color:#8390a2; font-size:8px; text-transform:capitalize; }
.topbar-status { width:8px; height:8px; border-radius:50%; background:#25ad6b; box-shadow:0 0 0 4px #e0f6eb; }
.user-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#e8f0ff; color:#1c60cf; font-size:12px; font-weight:900; }
.topbar-user form { margin:0 0 0 5px; }
.topbar-logout { min-height:32px; padding:6px 10px; font-size:9px; }
.page { max-width:1640px; width:100%; margin:0 auto; padding:26px 30px 40px; }
.page::before { display:none; }
.card { border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 24px rgba(18,43,76,.055); }
.btn { border-radius:8px; font-weight:800; }
.btn-primary { background:linear-gradient(100deg,#246bfe,#397aff); box-shadow:0 6px 15px rgba(36,107,254,.18); }
input,select,textarea { border-color:#d6e0ec; border-radius:8px; background:#fff; }
input:focus,select:focus,textarea:focus { border-color:#6d9ef7; box-shadow:0 0 0 3px rgba(36,107,254,.1); }

.repair-dashboard { display:grid; gap:20px; }
.repair-kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.repair-kpi { display:flex; align-items:center; gap:12px; min-width:0; min-height:96px; padding:16px; border:1px solid #e0e7f0; border-radius:13px; background:#fff; box-shadow:0 7px 20px rgba(15,41,75,.05); text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }
.repair-kpi:hover { transform:translateY(-2px); box-shadow:0 11px 25px rgba(15,41,75,.09); }
.repair-kpi-mark { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:#e9f1ff; color:#246bfe; font-size:13px; font-weight:950; }
.repair-kpi small,.repair-kpi strong { display:block; }
.repair-kpi small { overflow:hidden; color:#77879b; font-size:8px; font-weight:850; letter-spacing:.04em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.repair-kpi strong { margin-top:6px; color:#10233e; font-size:24px; line-height:1; }
.repair-kpi.kpi-cyan .repair-kpi-mark { background:#e4f8fb;color:#118391; }
.repair-kpi.kpi-amber .repair-kpi-mark { background:#fff2df;color:#b5680a; }
.repair-kpi.kpi-green .repair-kpi-mark { background:#e6f7eb;color:#278145; }
.repair-kpi.kpi-purple .repair-kpi-mark { background:#efeaff;color:#6848b4; }
.repair-kpi.kpi-navy .repair-kpi-mark { background:#e8edf4;color:#29496f; }
.dashboard-chart-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.analytics-card { min-width:0; padding:18px; }
.analytics-wide { grid-column:span 2; }
.analytics-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.analytics-heading p { margin:0 0 3px; color:#246bfe; font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.analytics-heading h2 { margin:0; color:#142943; font-size:15px; }
.analytics-heading > span { color:#7e8da0; font-size:9px; font-weight:800; }
.metric-bars { display:grid; gap:11px; }
.metric-row > div:first-child { display:flex; justify-content:space-between; gap:12px; margin-bottom:5px; color:#53657b; font-size:9px; font-weight:750; }
.metric-row strong { color:#243a56; }
.metric-track { height:7px; overflow:hidden; border-radius:99px; background:#edf1f6; }
.metric-track i { display:block; height:100%; min-width:3px; border-radius:inherit; background:#5e8fe6; }
.metric-track .status-fill-awaiting_quote { background:#e9a13d; }
.metric-track .status-fill-in_repair { background:#1ba4ad; }
.metric-track .status-fill-ready_for_collection { background:#37a960; }
.metric-track .status-fill-closed { background:#66758a; }
.metric-track .status-fill-cancelled { background:#d86459; }
.column-chart { display:flex; align-items:stretch; justify-content:space-around; gap:8px; height:175px; padding-top:8px; }
.column-chart-item { display:grid; grid-template-rows:16px 1fr 17px; justify-items:center; flex:1; gap:4px; color:#718197; font-size:8px; text-transform:uppercase; }
.column-chart-item strong { color:#53657b; font-size:8px; }
.column-chart-item > div { position:relative; width:100%; max-width:27px; border-radius:6px 6px 3px 3px; background:#edf2f8; }
.column-chart-item i { position:absolute; bottom:0; left:0; width:100%; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#5790ff,#246bfe); }
.compact-bars { display:grid; gap:13px; }
.compact-bars > div { display:grid; grid-template-columns:minmax(75px,1fr) minmax(55px,1.4fr) 24px; align-items:center; gap:8px; color:#5e7086; font-size:9px; }
.compact-bars b { height:6px; overflow:hidden; border-radius:99px; background:#edf1f6; }
.compact-bars b i { display:block; height:100%; border-radius:inherit; background:#3978ed; }
.compact-bars strong { color:#273e5a; text-align:right; }
.compact-bars-purple b i { background:#7555c6; }
.compact-bars-cyan b i { background:#1c9da7; }
.analytics-empty { padding:30px 10px; color:#8996a7; font-size:10px; text-align:center; }
.dashboard-attention { min-width:0; }
.dashboard-recent-card .professional-table { min-width:900px; }

@media (max-width:1280px) {
    .repair-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:950px) {
    .dashboard-chart-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .analytics-wide { grid-column:span 2; }
}
@media (max-width:700px) {
    .sidebar { width:100%; padding:12px; }
    .repair-brand { min-height:55px; padding:4px 6px 12px; }
    .repair-brand-mark { width:38px;height:35px;flex-basis:38px; }
    .nav-section-label,.sidebar-footer { display:none; }
    .sidebar-create { margin:10px 0 0; }
    .topbar { padding:11px 16px; }
    .topbar-context { display:none; }
    .topbar-user { width:100%; }
    .topbar-user form { margin-left:auto; }
    .page { padding:20px 15px 32px; }
    .repair-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-chart-grid { grid-template-columns:1fr; }
    .analytics-wide { grid-column:auto; }
}
@media (max-width:460px) {
    .repair-kpi-grid { grid-template-columns:1fr; }
    .repair-kpi { min-height:82px; }
}

.login-brand-identity { display:flex; align-items:center; gap:13px; }
.login-brand-identity > div,.login-mobile-brand > div { display:grid; gap:3px; }
.login-brand-identity strong { color:#fff; font-size:14px; letter-spacing:.1em; }
.login-brand-identity > div span { color:#8ea9cb; font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.login-repair-mark { width:48px;height:44px;flex-basis:48px; }
.login-mobile-brand > div span { color:#7a8ba1;font-size:8px;text-transform:uppercase; }

/* Dashboard refinement */
.repair-dashboard { gap:16px; }
.dashboard-header { align-items:center; margin-bottom:0; }
.dashboard-header h1 { font-size:25px; }
.dashboard-header > div > p:last-child { font-size:11px; }
.dashboard-actions { display:flex; align-items:center; gap:9px; }
.dashboard-secondary-btn { border-color:#ccd8e8; background:#fff; color:#31506f; box-shadow:0 4px 12px rgba(18,43,76,.05); }
.dashboard-secondary-btn:hover { border-color:#9cb9e4; background:#f8fbff; }
.repair-kpi { min-height:84px; padding:13px; }
.repair-kpi-mark { width:38px; height:38px; flex-basis:38px; }
.repair-kpi small { font-size:9px; }
.repair-kpi strong { margin-top:5px; font-size:23px; }
.dashboard-primary-grid { display:grid; grid-template-columns:minmax(360px,.85fr) minmax(460px,1.45fr); gap:14px; }
.dashboard-secondary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.analytics-card { padding:16px 17px; }
.analytics-heading { margin-bottom:13px; }
.analytics-heading p { font-size:9px; }
.analytics-heading h2 { font-size:16px; }
.analytics-heading > span { font-size:10px; }
.status-donut-layout { display:grid; grid-template-columns:170px minmax(0,1fr); align-items:center; gap:24px; min-height:190px; }
.status-donut { position:relative; display:grid; place-items:center; width:164px; height:164px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(15,41,75,.04); }
.status-donut::after { content:""; position:absolute; inset:31px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px #e8edf4; }
.status-donut > span { position:relative; z-index:1; text-align:center; }
.status-donut strong,.status-donut small { display:block; }
.status-donut strong { color:#112a48; font-size:29px; line-height:1; }
.status-donut small { margin-top:5px; color:#7b8b9f; font-size:9px; font-weight:800; text-transform:uppercase; }
.status-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
.status-legend > div { display:flex; align-items:center; gap:8px; min-width:0; }
.status-legend i { width:9px; height:9px; flex:0 0 9px; border-radius:3px; }
.status-legend b,.status-legend small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-legend b { color:#344b66; font-size:10px; }
.status-legend small { margin-top:2px; color:#8492a4; font-size:9px; }
.monthly-chart { height:190px; overflow:hidden; border-radius:10px; background:linear-gradient(180deg,#f9fbfe,#fff); }
.monthly-chart svg { display:block; width:100%; height:100%; overflow:visible; }
.chart-grid line { stroke:#dfe7f1; stroke-width:1; stroke-dasharray:4 5; }
.chart-area { fill:rgba(36,107,254,.09); }
.chart-line { fill:none; stroke:#246bfe; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.chart-dot { fill:#fff; stroke:#246bfe; stroke-width:4; }
.chart-value { fill:#314b69; font-size:11px; font-weight:800; text-anchor:middle; }
.chart-label { fill:#7a899c; font-size:10px; font-weight:700; text-anchor:middle; text-transform:uppercase; }
.rich-bars { gap:11px; }
.rich-bars > div { grid-template-columns:minmax(105px,1.2fr) minmax(60px,1.5fr) 28px; font-size:10px; }
.rich-bars span { display:flex; justify-content:space-between; gap:5px; }
.rich-bars span small { color:#8a98a9; font-size:8px; }
.rich-bars b { height:7px; }
.dashboard-attention { min-width:0; }
.dashboard-attention .attention-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.attention-alert { min-height:72px; padding:12px 14px; }
.attention-alert strong { font-size:11px; }
.attention-alert small { font-size:9px; }
.dashboard-recent-card .data-card-heading { padding:15px 18px; }
.dashboard-recent-card .professional-table { min-width:780px; }
.professional-table th { font-size:9px; }
.professional-table td { font-size:11px; }
.nav a { font-size:12px; }
.repair-brand small { font-size:8px; letter-spacing:.035em; }
.topbar { gap:20px; }
.topbar-search { position:relative; width:min(360px,35vw); margin-left:auto; }
.topbar-search span { position:absolute; left:12px; top:50%; width:11px; height:11px; border:2px solid #8292a5; border-radius:50%; transform:translateY(-58%); pointer-events:none; }
.topbar-search span::after { content:""; position:absolute; right:-5px; bottom:-3px; width:6px; height:2px; border-radius:2px; background:#8292a5; transform:rotate(45deg); }
.topbar-search input { width:100%; min-height:38px; padding:7px 12px 7px 34px; border-color:#dce4ed; background:#f7f9fc; font-size:10px; }

@media (max-width:1180px) {
    .dashboard-primary-grid { grid-template-columns:1fr; }
    .dashboard-secondary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-secondary-grid > :last-child { grid-column:span 2; }
}
@media (max-width:900px) {
    .topbar-search { display:none; }
    .topbar-user { margin-left:auto; }
}
@media (max-width:700px) {
    .dashboard-header { align-items:flex-start; }
    .dashboard-actions { width:100%; flex-wrap:wrap; }
    .dashboard-actions .btn { flex:1; }
    .status-donut-layout { grid-template-columns:1fr; justify-items:center; gap:18px; }
    .status-legend { width:100%; }
    .dashboard-secondary-grid { grid-template-columns:1fr; }
    .dashboard-secondary-grid > :last-child { grid-column:auto; }
    .dashboard-attention .attention-grid { grid-template-columns:1fr; }
}
@media (max-width:430px) {
    .status-legend { grid-template-columns:1fr; }
}

/* Paid closed jobs report */
.report-page { display:grid; gap:16px; }
.report-actions { display:flex; gap:8px; }
.report-filter-card { padding:16px 18px; }
.report-filters { display:grid; grid-template-columns:repeat(2,minmax(150px,.7fr)) minmax(230px,1.3fr) auto; align-items:end; gap:12px; }
.report-filters .btn { min-height:39px; }
.print-report-meta { display:none; }
.report-summary-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.report-summary-card { padding:14px; border:1px solid #dfe7f0; border-radius:11px; background:#fff; box-shadow:0 5px 15px rgba(18,43,76,.04); }
.report-summary-card small,.report-summary-card strong { display:block; }
.report-summary-card small { color:#728298; font-size:9px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.report-summary-card strong { margin-top:7px; color:#18314e; font-size:17px; }
.summary-complete { border-top:3px solid #39a462; }
.summary-incomplete { border-top:3px solid #df9a36; }
.summary-grand { border-top:3px solid #246bfe; background:#f7faff; }
.summary-grand strong { color:#1759c6; }
.report-warning { display:flex; align-items:center; gap:14px; padding:12px 15px; border:1px solid #f0d7a7; border-radius:10px; background:#fff9ed; color:#76531d; }
.report-warning strong { font-size:11px; }
.report-warning span { font-size:10px; }
.report-results-card .data-card-heading > span { color:#738398; font-size:10px; font-weight:800; }
.report-table { min-width:1080px; }
.report-table .currency { text-align:right; white-space:nowrap; }
.report-table .row-total { color:#153e78; font-weight:850; }
.metadata-badge { display:inline-flex; padding:4px 7px; border-radius:99px; font-size:9px; font-weight:850; white-space:nowrap; }
.metadata-badge.is-complete { background:#e7f7ec; color:#277c43; }
.metadata-badge.is-incomplete { background:#fff2dc; color:#9b6415; }
.incomplete-value { color:#9ba7b6; }
.report-empty { padding:48px 24px; text-align:center; }
.report-empty > span { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 13px; border-radius:14px; background:#e8f0ff; color:#246bfe; font-weight:900; }
.report-empty h2 { margin:0; color:#19324e; font-size:17px; }
.report-empty p { margin:7px 0 0; color:#7c899a; font-size:11px; }

@media (max-width:1200px) {
    .report-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .report-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
    .report-heading { align-items:flex-start; }
    .report-actions { width:100%; }
    .report-actions > * { flex:1; }
    .report-filters,.report-summary-grid { grid-template-columns:1fr; }
    .report-warning { align-items:flex-start; flex-direction:column; gap:4px; }
}
@media print {
    @page { size:landscape; margin:12mm; }
    body { background:#fff; color:#000; font-size:10pt; }
    .sidebar,.topbar,.report-actions,.report-filter-card,.flash { display:none !important; }
    .content-shell,.page { display:block; width:100%; max-width:none; margin:0; padding:0; }
    .report-page { gap:10px; }
    .report-heading { display:block; }
    .report-heading p { color:#333; }
    .print-report-meta { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #aaa; font-size:9pt; }
    .report-summary-grid { grid-template-columns:repeat(6,1fr); gap:5px; }
    .report-summary-card { padding:8px; box-shadow:none; }
    .report-warning { padding:7px; }
    .report-results-card { border:0; box-shadow:none; }
    .report-results-card .data-card-heading { padding:7px 0; }
    .table-responsive { overflow:visible; }
    .report-table { min-width:0; width:100%; }
    .report-table th,.report-table td { padding:6px 5px; font-size:8pt; }
    .report-table .btn { padding:0; border:0; background:none; color:#000; box-shadow:none; }
}

/* Paid Closed Jobs Report workspace refinement. */
.report-page { gap:18px; }
.report-heading { align-items:flex-start; padding-bottom:2px; }
.report-heading h1 { margin-bottom:5px; color:#132d4b; letter-spacing:-.025em; }
.report-heading>div:first-child>p:last-child { color:#687c94; }
.report-actions { align-items:center; flex-wrap:wrap; }
.report-actions .btn { min-height:42px; padding-inline:17px; }
.report-actions .btn-primary { border-color:#dd6108; color:#172033; background:#ff7a13; box-shadow:0 5px 12px rgba(218,91,0,.13); }
.report-actions .btn-primary:hover { border-color:#c95100; background:#ed6c09; }
.report-filter-card { padding:0; overflow:visible; }
.report-criteria-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:17px 20px 14px; border-bottom:1px solid #e3eaf2; }
.report-criteria-heading .management-eyebrow { margin-bottom:4px; color:#b65313; }
.report-criteria-heading h2 { margin:0; color:#17304d; font-size:16px; }
.report-criteria-heading>p { max-width:390px; margin:0; color:#718198; font-size:11px; text-align:right; }
.report-filters { padding:17px 20px 20px; grid-template-columns:minmax(145px,.72fr) minmax(145px,.72fr) minmax(250px,1.45fr) auto; gap:14px; }
.report-filters label { color:#2d4662; font-size:10px; letter-spacing:.025em; }
.report-filters input,.report-filters .ls-custom-select-trigger { min-height:43px; border-color:#cbd7e4; }
.report-filters>.btn-primary { min-height:43px; border-color:#dd6108; color:#172033; background:#ff7a13; }
.report-summary-grid { gap:12px; }
.report-summary-card { min-height:88px; padding:15px 16px; border-color:#dbe4ed; box-shadow:0 5px 16px rgba(18,43,76,.045); }
.report-summary-card small { color:#687b92; font-size:9px; letter-spacing:.07em; }
.report-summary-card strong { margin-top:9px; font-size:19px; letter-spacing:-.015em; }
.report-summary-card.summary-count strong,.report-summary-card.summary-complete strong,.report-summary-card.summary-incomplete strong { font-size:23px; }
.report-summary-card.summary-money { border-top:3px solid #7590ad; }
.report-summary-card.summary-money strong { color:#173b62; }
.summary-complete { border-top-color:#58a977; background:#fbfefc; }
.summary-incomplete { border-top-color:#d9a04a; background:#fffdf8; }
.summary-grand { border-top-color:#f17113; background:#fff5eb; }
.summary-grand small { color:#9a4b15; }
.summary-grand strong { color:#bd4e06; font-size:21px; }
.report-warning { border-left:3px solid #dda044; }
.report-results-card { overflow:hidden; }
.report-results-card .data-card-heading { padding-block:16px; background:#fbfcfe; }
.report-results-card .data-card-heading h2 { color:#17304d; }
.report-results-card .data-card-heading>span { padding:5px 9px; border-radius:99px; background:#eef3f8; }
.report-table { min-width:1040px; }
.report-table th { color:#64788f; font-size:9px; letter-spacing:.055em; text-transform:uppercase; }
.report-table td { color:#344c67; }
.report-table tbody tr:hover { background:#fafcff; }
.report-table .table-primary { color:#174f8d; font-weight:850; }
.report-customer-name { color:#17304d; font-weight:750; }
.report-branch-name { color:#677b92; }
.report-table .row-total { color:#173b62; font-weight:900; }
.report-table .btn-compact { border-color:#cad6e3; color:#35526f; background:#fff; box-shadow:none; white-space:nowrap; }
.report-table .btn-compact:hover { border-color:#df7629; color:#9b4308; background:#fff8f1; }
.report-empty { padding:54px 24px; border-style:dashed; box-shadow:none; }
.report-empty>span { background:#fff0e3; color:#c95508; }

@media(max-width:1200px) {
    .report-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .report-filters .field:nth-child(3) { grid-column:1 / -1; }
    .report-filters>.btn { justify-self:end; min-width:180px; }
}
@media(max-width:760px) {
    .report-heading { gap:14px; }
    .report-actions { width:100%; }
    .report-actions>* { flex:1; justify-content:center; }
    .report-criteria-heading { align-items:flex-start; flex-direction:column; gap:5px; }
    .report-criteria-heading>p { max-width:none; text-align:left; }
    .report-filters { grid-template-columns:1fr; }
    .report-filters .field:nth-child(3) { grid-column:auto; }
    .report-filters>.btn { justify-self:stretch; width:100%; }
    .report-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .report-results-card { border:0; background:transparent; box-shadow:none; overflow:visible; }
    .report-results-card .data-card-heading { padding:14px 0; border-bottom:0; background:transparent; }
    .report-results-card .table-responsive { overflow:visible; }
    .report-table { display:block; min-width:0; }
    .report-table thead { display:none; }
    .report-table tbody { display:grid; gap:12px; }
    .report-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; padding:16px; border:1px solid #dce5ef; border-radius:12px; background:#fff; box-shadow:0 5px 15px rgba(18,43,76,.04); }
    .report-table td { display:grid; align-content:start; gap:4px; padding:0; border:0; text-align:left!important; white-space:normal; min-width:0; overflow-wrap:anywhere; }
    .report-table td::before { content:attr(data-label); color:#7b8b9f; font-size:8px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
    .report-table td[data-label="Customer"],.report-table td[data-label="Invoice #"] { grid-column:1 / -1; }
    .report-table .report-invoice-action { align-self:end; }
    .report-table .report-invoice-action .btn { justify-self:start; }
    .report-table tr:has(.empty-state) { display:block; grid-column:1/-1; }
    .report-table td[colspan]::before { content:none; }
}
@media(max-width:430px) {
    .report-actions { display:grid; grid-template-columns:1fr 1fr; }
    .report-summary-grid { grid-template-columns:1fr; }
    .report-summary-card { min-height:76px; }
    .report-table tr { grid-template-columns:1fr 1fr; padding:14px; gap:11px 13px; }
}
@media print {
    .report-criteria-heading { display:none; }
    .report-summary-card { min-height:0; background:#fff; }
    .report-results-card { overflow:visible; }
    .report-table tbody { display:table-row-group; }
    .report-table tr { display:table-row; padding:0; border:0; box-shadow:none; }
    .report-table td { display:table-cell; }
    .report-table td::before { content:none!important; }
}

/* Fincon invoice metadata */
.invoice-amount-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:10px; margin-top:12px; }
.invoice-calculated-total { min-height:59px; padding:10px 12px; border:1px solid #ccdcef; border-radius:9px; background:#f4f8ff; }
.invoice-calculated-total small,.invoice-calculated-total strong { display:block; }
.invoice-calculated-total small { color:#6e8198; font-size:9px; font-weight:800; text-transform:uppercase; }
.invoice-calculated-total strong { margin-top:6px; color:#1758bc; font-size:16px; }
.invoice-metadata-panel { margin:-5px 0 12px; padding:11px 12px; border:1px solid #dce5ef; border-radius:9px; background:#f8fafc; }
.invoice-metadata-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.invoice-metadata-summary small,.invoice-metadata-summary strong { display:block; }
.invoice-metadata-summary small { color:#7d8b9d; font-size:8px; font-weight:800; text-transform:uppercase; }
.invoice-metadata-summary strong { margin-top:3px; color:#29435f; font-size:10px; }
.invoice-metadata-warning { margin:0; color:#a56714; font-size:10px; font-weight:850; }
.invoice-metadata-editor { margin-top:9px; padding-top:8px; border-top:1px solid #dce5ef; }
.invoice-metadata-editor summary { color:#2866ba; cursor:pointer; font-size:9px; font-weight:850; }
.invoice-metadata-form { display:grid; grid-template-columns:1.2fr .8fr .8fr auto; align-items:end; gap:8px; margin-top:10px; }
.invoice-metadata-form .btn { min-height:39px; }
@media (max-width:800px) {
    .invoice-amount-grid,.invoice-metadata-summary,.invoice-metadata-form { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
    .invoice-amount-grid,.invoice-metadata-summary,.invoice-metadata-form { grid-template-columns:1fr; }
}

/* User account forms share the existing field/grid and action components. */
.user-form > section + section { margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.user-form h2 { margin:0 0 18px; }
.user-form .form-grid { align-items:start; }
.user-form .credential-fields { grid-template-columns:minmax(0,1fr); width:calc((100% - 18px)/2); }
.user-form .hint { margin:8px 0 0; }
.user-form [hidden] { display:none!important; }
.user-form .actions { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px; }
@media (max-width:900px) {
    .user-form .form-grid { grid-template-columns:minmax(0,1fr); }
    .user-form .credential-fields { width:100%; }
}
@media (max-width:480px) {
    .user-form .actions .btn { flex:1 1 100%; text-align:center; }
}

.impersonation-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding:10px 14px; border:1px solid #d8a276; border-left:6px solid #df6b17; border-radius:10px; background:#fff4e8; color:#5c2f08; }
.impersonation-banner p { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; font-size:13px; }
.impersonation-banner p span { padding:2px 8px; border-radius:20px; background:#ead9c2; font-size:11px; font-weight:700; }
.impersonation-banner form { margin:0; }
@media (max-width:480px) { .impersonation-banner .btn { flex:1 1 100%; text-align:center; } }
.finance-card .finance-total { margin:4px 0 12px; padding:12px 16px; border:1px solid #e8c9a3; border-left:6px solid #df6b17; border-radius:10px; background:#fff8ef; }
.finance-card .finance-total small { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a5a22; }
.finance-card .finance-total strong { font-size:30px; font-weight:800; color:#3c2410; }
.finance-card .finance-lines { display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 4px; padding:0; }
.finance-card .finance-lines > div { min-width:0; }
.finance-card .finance-lines dt { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#7a6a58; }
.finance-card .finance-lines dd { margin:2px 0 0; font-size:15px; font-weight:600; color:#2c2318; overflow-wrap:anywhere; }
.finance-card .invoice-metadata-editor { margin-top:12px; }