:root{
    --sidebar-width:232px;
    --topbar-height:68px;

    --ink-950:#101317;
    --ink-900:#15191e;
    --ink-850:#191e24;
    --ink-800:#20262d;
    --ink-700:#2d343c;

    --canvas:#eef1f3;
    --paper:#ffffff;
    --paper-soft:#f8f9fa;

    --line:#dde2e6;
    --line-strong:#cbd2d8;

    --text:#171b20;
    --muted:#77818b;
    --muted-dark:#59636d;

    --accent:#d4a51d;
    --accent-soft:#f3e5ae;
    --accent-dark:#a87f0f;

    --success:#2f8a5d;
    --danger:#c94e4e;

    --radius-sm:7px;
    --radius-md:10px;
    --radius-lg:14px;

    --shadow-soft:
        0 1px 2px rgba(16,19,23,.05),
        0 8px 28px rgba(16,19,23,.05);
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:var(--canvas);
}

body{
    margin:0;
    min-width:320px;
    min-height:100vh;
    background:var(--canvas);
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size:14px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
}

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

button{
    color:inherit;
}

a{
    color:inherit;
}

.sidebar{
    position:fixed;
    z-index:50;
    top:0;
    left:0;
    bottom:0;
    width:var(--sidebar-width);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            #15191e 0%,
            #111419 100%
        );
    color:#fff;
    border-right:1px solid rgba(255,255,255,.035);
}

.brand{
    height:88px;
    display:flex;
    align-items:center;
    padding:0 18px;
    border-bottom:1px solid rgba(255,255,255,.075);
}

.brand-link{
    width:100%;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
    text-decoration:none;
}

.brand-mark{
    position:relative;
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border:1px solid #343b43;
    border-radius:8px;
    background:#1d2228;
    overflow:hidden;
}

.brand-mark-a{
    position:relative;
    z-index:2;
    font-size:18px;
    line-height:1;
    font-weight:900;
    font-style:italic;
}

.brand-mark-line{
    position:absolute;
    z-index:1;
    width:36px;
    height:4px;
    background:var(--accent);
    transform:rotate(-48deg);
}

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

.brand-copy strong{
    display:block;
    color:#fff;
    font-size:17px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:.09em;
}

.brand-copy small{
    display:block;
    margin-top:6px;
    color:#737d87;
    font-size:8.5px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.055em;
    text-transform:uppercase;
    white-space:nowrap;
}

.sidebar-nav{
    flex:1;
    overflow-y:auto;
    padding:14px 10px;
    scrollbar-width:thin;
    scrollbar-color:#343b43 transparent;
}

.nav-item{
    position:relative;
    height:43px;
    display:flex;
    align-items:center;
    gap:12px;
    margin:2px 0;
    padding:0 12px;
    border-radius:7px;
    color:#939ca5;
    text-decoration:none;
    font-size:13px;
    font-weight:550;
    transition:
        background .16s ease,
        color .16s ease;
}

.nav-item::before{
    content:"";
    position:absolute;
    left:-10px;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:transparent;
}

.nav-item:hover{
    background:#1c2127;
    color:#fff;
}

.nav-item.active{
    background:#232930;
    color:#fff;
}

.nav-item.active::before{
    background:var(--accent);
}

.nav-icon{
    width:19px;
    height:19px;
    flex:0 0 19px;
    color:#7f8992;
}

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

.nav-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.nav-separator{
    height:1px;
    margin:11px 9px;
    background:rgba(255,255,255,.075);
}

.sidebar-footer{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 17px;
    border-top:1px solid rgba(255,255,255,.075);
    color:#68727c;
}

.sidebar-footer > span:last-child{
    display:flex;
    flex-direction:column;
}

.sidebar-footer strong{
    color:#8d969f;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
}

.sidebar-footer small{
    margin-top:2px;
    color:#59626b;
    font-size:9px;
}

.status-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:#4d9b6f;
    box-shadow:0 0 0 3px rgba(77,155,111,.12);
}

.app-shell{
    min-height:100vh;
    margin-left:var(--sidebar-width);
}

.topbar{
    position:sticky;
    z-index:30;
    top:0;
    min-height:var(--topbar-height);
    display:flex;
    align-items:center;
    gap:18px;
    padding:9px 24px;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(16,19,23,.02);
    backdrop-filter:blur(10px);
}

.mobile-menu-toggle{
    display:none;
    width:40px;
    height:40px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
}

.mobile-menu-toggle span{
    display:block;
    height:2px;
    margin:4px 0;
    border-radius:2px;
    background:var(--ink-900);
}

.vehicle-search{
    height:48px;
    display:flex;
    align-items:stretch;
    overflow:hidden;
    flex:0 0 276px;
    border:2px solid #15191e;
    border-radius:7px;
    background:#fff;
}

.vehicle-search-country{
    width:47px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    background:#173c72;
    color:#fff;
}

.vehicle-search-flag{
    width:19px;
    height:4px;
    border-radius:1px;
    background:
        linear-gradient(
            90deg,
            #1f4d91 0 33.33%,
            #f0c52a 33.33% 66.66%,
            #c83d42 66.66% 100%
        );
}

.vehicle-search-country strong{
    font-size:10px;
    line-height:1;
    letter-spacing:.05em;
}

.vehicle-search-field{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:4px 10px 3px 12px;
}

.vehicle-search-caption{
    color:#8a939c;
    font-size:8px;
    line-height:1;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.vehicle-search input{
    width:100%;
    min-width:0;
    height:24px;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#11151a;
    font-size:17px;
    line-height:1;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.vehicle-search input::placeholder{
    color:#282e35;
    opacity:1;
}

.vehicle-search-icon{
    width:38px;
    display:grid;
    place-items:center;
    color:#7c858e;
}

.vehicle-search-icon svg{
    width:18px;
    height:18px;
}

.branch-switcher{
    display:flex;
    align-items:center;
    padding:3px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#f4f6f7;
}

.branch-switcher button{
    height:34px;
    padding:0 13px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#77818a;
    font-size:11px;
    font-weight:650;
    white-space:nowrap;
    opacity:1;
    cursor:default;
}

.branch-switcher button.active{
    background:var(--ink-900);
    color:#fff;
    box-shadow:0 1px 3px rgba(16,19,23,.16);
}

.topbar-user{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    padding-left:16px;
    border-left:1px solid var(--line);
}

.topbar-avatar{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#252b32;
    color:#e5bd46;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
}

.topbar-user-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.topbar-user-copy strong{
    color:#252a30;
    font-size:11px;
    line-height:1.2;
    font-weight:750;
    white-space:nowrap;
}

.topbar-user-copy small{
    margin-top:3px;
    color:#8a939c;
    font-size:9px;
    line-height:1.2;
    white-space:nowrap;
}

.topbar-chevron{
    width:14px;
    height:14px;
    color:#8b949d;
}

.page{
    width:100%;
    max-width:1540px;
    margin:0 auto;
    padding:29px 30px 70px;
}

.page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.page h1{
    margin:0;
    color:#171b20;
    font-size:27px;
    line-height:1.15;
    font-weight:760;
    letter-spacing:-.025em;
}

.page-subtitle{
    margin:7px 0 0;
    color:var(--muted);
    font-size:12px;
}

.placeholder-card{
    min-height:140px;
    display:flex;
    align-items:center;
    padding:24px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--paper);
    color:#7a848d;
    box-shadow:var(--shadow-soft);
}

.card{
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--paper);
    box-shadow:var(--shadow-soft);
}

.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:52px;
    padding:12px 16px;
    border-bottom:1px solid var(--line);
}

.card-title{
    margin:0;
    color:#22272d;
    font-size:13px;
    font-weight:750;
}

.card-body{
    padding:16px;
}

.btn{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 15px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    background:#fff;
    color:#252b31;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.btn-primary{
    border-color:var(--ink-900);
    background:var(--ink-900);
    color:#fff;
}

.btn-accent{
    border-color:var(--accent);
    background:var(--accent);
    color:#16191d;
}

.app-footer{
    margin-left:var(--sidebar-width);
    display:flex;
    align-items:center;
    gap:6px;
    min-height:42px;
    padding:8px 30px;
    border-top:1px solid var(--line);
    color:#9aa2a9;
    background:#f4f6f7;
    font-size:9px;
    letter-spacing:.025em;
}

.app-footer-separator{
    color:#c4cacf;
}

.sidebar-overlay{
    display:none;
}

@media(max-width:1180px){
    .branch-switcher button{
        padding:0 9px;
    }

    .topbar{
        gap:12px;
        padding-left:18px;
        padding-right:18px;
    }

    .vehicle-search{
        flex-basis:245px;
    }
}

@media(max-width:980px){
    :root{
        --sidebar-width:220px;
    }

    .topbar-user-copy,
    .topbar-chevron{
        display:none;
    }

    .topbar-user{
        padding-left:10px;
    }

    .branch-switcher button{
        font-size:10px;
    }
}

@media(max-width:820px){
    body.sidebar-open{
        overflow:hidden;
    }

    .sidebar{
        width:260px;
        transform:translateX(-102%);
        box-shadow:20px 0 50px rgba(0,0,0,.18);
        transition:transform .22s ease;
    }

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

    .sidebar-overlay{
        position:fixed;
        z-index:45;
        inset:0;
        display:block;
        visibility:hidden;
        border:0;
        background:rgba(10,13,16,.46);
        opacity:0;
        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    body.sidebar-open .sidebar-overlay{
        visibility:visible;
        opacity:1;
    }

    .app-shell,
    .app-footer{
        margin-left:0;
    }

    .mobile-menu-toggle{
        display:block;
        flex:0 0 40px;
    }

    .topbar{
        position:sticky;
        min-height:64px;
        flex-wrap:nowrap;
        padding:8px 14px;
    }

    .vehicle-search{
        flex:1 1 auto;
        min-width:180px;
        height:45px;
    }

    .branch-switcher{
        display:none;
    }

    .topbar-user{
        flex:0 0 auto;
        border-left:0;
    }

    .page{
        padding:22px 16px 55px;
    }

    .app-footer{
        padding-left:16px;
        padding-right:16px;
    }
}

@media(max-width:520px){
    .topbar-user{
        display:none;
    }

    .vehicle-search-country{
        width:42px;
    }

    .vehicle-search{
        min-width:0;
    }

    .vehicle-search input{
        font-size:15px;
    }

    .page h1{
        font-size:23px;
    }

    .page-subtitle{
        font-size:11px;
    }

    .app-footer{
        flex-wrap:wrap;
    }
}


/* =========================================================
   AUTOROOM UI SYSTEM
   Reusable components for all CRM modules
   ========================================================= */

.ui-grid{
    display:grid;
    gap:16px;
}

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

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

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

.stat-card{
    position:relative;
    min-width:0;
    padding:17px 18px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--paper);
    box-shadow:var(--shadow-soft);
}

.stat-card-label{
    display:block;
    margin-bottom:8px;
    color:var(--muted);
    font-size:10px;
    font-weight:750;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.stat-card-value{
    display:block;
    color:#171b20;
    font-size:26px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.035em;
}

.stat-card-meta{
    display:block;
    margin-top:8px;
    color:var(--muted-dark);
    font-size:10px;
}

.stat-card-accent{
    border-top:3px solid var(--accent);
}

.panel{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--paper);
    box-shadow:var(--shadow-soft);
}

.panel-header{
    min-height:53px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    border-bottom:1px solid var(--line);
}

.panel-header-main{
    min-width:0;
}

.panel-title{
    margin:0;
    color:#21262c;
    font-size:13px;
    line-height:1.2;
    font-weight:780;
}

.panel-subtitle{
    margin:4px 0 0;
    color:var(--muted);
    font-size:10px;
}

.panel-body{
    padding:16px;
}

.panel-body-flush{
    padding:0;
}

.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.toolbar-group{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.toolbar-search{
    position:relative;
    width:260px;
    max-width:100%;
}

.toolbar-search input{
    width:100%;
    height:38px;
    padding:0 12px 0 36px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    outline:0;
    background:#fff;
    color:var(--text);
}

.toolbar-search input:focus{
    border-color:#929ca5;
    box-shadow:0 0 0 3px rgba(44,52,60,.07);
}

.toolbar-search::before{
    content:"";
    position:absolute;
    top:50%;
    left:13px;
    width:12px;
    height:12px;
    border:1.8px solid #8a949d;
    border-radius:50%;
    transform:translateY(-58%);
}

.toolbar-search::after{
    content:"";
    position:absolute;
    top:22px;
    left:24px;
    width:6px;
    height:1.8px;
    background:#8a949d;
    transform:rotate(45deg);
    transform-origin:left center;
}

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

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

.data-table th{
    padding:10px 13px;
    border-bottom:1px solid var(--line);
    background:#f7f8f9;
    color:#7c858e;
    font-size:9px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.055em;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}

.data-table td{
    padding:12px 13px;
    border-bottom:1px solid #edf0f2;
    color:#333941;
    font-size:11px;
    vertical-align:middle;
}

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

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

.table-primary{
    color:#171b20;
    font-weight:700;
}

.table-secondary{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:9px;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:23px;
    padding:3px 8px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:9px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
}

.badge-neutral{
    border-color:#dde2e6;
    background:#f3f5f6;
    color:#67717a;
}

.badge-warning{
    border-color:#ead598;
    background:#faf2d7;
    color:#8b6810;
}

.badge-success{
    border-color:#bcd9ca;
    background:#e9f4ee;
    color:#347353;
}

.badge-danger{
    border-color:#e6c0c0;
    background:#f9eaea;
    color:#a84646;
}

.badge-dark{
    background:#272d34;
    color:#fff;
}

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

.form-group{
    min-width:0;
}

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

.form-label{
    display:block;
    margin-bottom:6px;
    color:#555f68;
    font-size:10px;
    font-weight:750;
}

.form-control{
    width:100%;
    min-height:40px;
    padding:8px 11px;
    border:1px solid var(--line-strong);
    border-radius:7px;
    outline:0;
    background:#fff;
    color:#20252b;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

textarea.form-control{
    min-height:90px;
    resize:vertical;
}

.form-control:focus{
    border-color:#8c969f;
    box-shadow:0 0 0 3px rgba(44,52,60,.07);
}

.form-control::placeholder{
    color:#abb2b8;
}

.form-help{
    display:block;
    margin-top:5px;
    color:#929ba3;
    font-size:9px;
}

.empty-state{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:32px 20px;
    text-align:center;
}

.empty-state-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-bottom:13px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#f7f8f9;
    color:#858f98;
}

.empty-state-icon svg{
    width:22px;
    height:22px;
}

.empty-state-title{
    margin:0;
    color:#2c3238;
    font-size:13px;
    font-weight:750;
}

.empty-state-text{
    max-width:430px;
    margin:6px 0 0;
    color:var(--muted);
    font-size:10px;
}

.section{
    margin-top:20px;
}

.section:first-child{
    margin-top:0;
}

.section-header{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:11px;
}

.section-title{
    margin:0;
    color:#252a30;
    font-size:13px;
    font-weight:780;
}

.section-description{
    margin:3px 0 0;
    color:var(--muted);
    font-size:10px;
}

.divider{
    height:1px;
    margin:17px 0;
    background:var(--line);
}

.text-muted{
    color:var(--muted);
}

.text-success{
    color:var(--success);
}

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

.text-right{
    text-align:right;
}

.text-nowrap{
    white-space:nowrap;
}

.amount{
    font-variant-numeric:tabular-nums;
    font-weight:750;
}

.progress{
    height:6px;
    overflow:hidden;
    border-radius:99px;
    background:#e9edef;
}

.progress-bar{
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

.list{
    margin:0;
    padding:0;
    list-style:none;
}

.list-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid #edf0f2;
}

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

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

.list-title{
    color:#292f35;
    font-size:11px;
    font-weight:700;
}

.list-meta{
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

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

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

@media(max-width:700px){
    .ui-grid-2,
    .ui-grid-3,
    .ui-grid-4,
    .form-grid{
        grid-template-columns:1fr;
    }

    .form-group-full{
        grid-column:auto;
    }

    .toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .toolbar-group{
        flex-wrap:wrap;
    }

    .toolbar-search{
        width:100%;
    }

    .stat-card-value{
        font-size:23px;
    }
}


/* =========================================================
   CLIENTI SI VEHICULE
   ========================================================= */

.alert{
    margin-bottom:16px;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:7px;
    font-size:11px;
}

.alert strong{
    font-weight:800;
}

.alert-success{
    border-color:#bad9c7;
    background:#eaf5ef;
    color:#316f50;
}

.alert-danger{
    border-color:#e5c0c0;
    background:#faeded;
    color:#9f4444;
}

.clients-summary{
    margin-bottom:20px;
}

.client-create-shell{
    display:none;
    margin-bottom:20px;
}

.client-create-shell.is-open{
    display:block;
}

.client-create-panel{
    border-top:3px solid var(--accent);
}

.client-form-close{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--line);
    border-radius:7px;
    background:#fff;
    color:#747e87;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

.client-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--line);
}

.form-error{
    display:block;
    margin-top:5px;
    color:var(--danger);
    font-size:9px;
    font-weight:650;
}

.clients-toolbar{
    margin-bottom:0;
}

.clients-search-group{
    width:100%;
}

.clients-search-group .toolbar-search{
    width:390px;
}

.clients-table td:first-child{
    min-width:190px;
}

.clients-table td:nth-child(2){
    min-width:150px;
}

.clients-table td:nth-child(3){
    min-width:145px;
}

.clients-empty{
    border-top:1px solid var(--line);
}

[hidden]{
    display:none !important;
}

@media(max-width:700px){
    .client-form-actions{
        flex-direction:column-reverse;
    }

    .client-form-actions .btn{
        width:100%;
    }

    .clients-search-group .toolbar-search{
        width:100%;
    }
}


/* =========================================================
   DOSAR CLIENT + VEHICULE
   ========================================================= */

.back-link{
    display:inline-block;
    margin-bottom:8px;
    color:#7b858e;
    font-size:10px;
    font-weight:700;
    text-decoration:none;
}

.back-link:hover{
    color:#282e34;
}

.client-detail-summary{
    margin-bottom:20px;
}

.client-detail-stat-text{
    display:block;
    overflow:hidden;
    color:#20252b;
    font-size:16px;
    line-height:1.2;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.vehicle-create-shell{
    display:none;
    margin-bottom:20px;
}

.vehicle-create-shell.is-open{
    display:block;
}

.vehicle-create-panel{
    border-top:3px solid var(--accent);
}

.client-detail-layout{
    display:grid;
    grid-template-columns:
        minmax(0,2fr)
        minmax(260px,1fr);
    gap:16px;
}

.client-contact-list{
    padding-top:4px;
    padding-bottom:4px;
}

.client-contact-row{
    padding:12px 0;
    border-bottom:1px solid #edf0f2;
}

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

.client-contact-row span{
    display:block;
    color:var(--muted);
    font-size:9px;
    font-weight:700;
}

.client-contact-row strong{
    display:block;
    margin-top:4px;
    overflow-wrap:anywhere;
    color:#2b3137;
    font-size:11px;
}

.vehicle-vin{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    letter-spacing:.02em;
}

.client-history-empty{
    min-height:130px;
}

.client-open-btn{
    min-height:31px;
    padding:0 10px;
    font-size:10px;
}

@media(max-width:980px){
    .client-detail-layout{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   EDIT CLIENT / VEHICLE
   ========================================================= */

.client-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.client-edit-panel,
.vehicle-edit-panel{
    margin-bottom:20px;
    border-top:3px solid var(--accent);
}

.client-form-close{
    text-decoration:none;
}

@media(max-width:700px){
    .client-header-actions{
        width:100%;
        flex-wrap:wrap;
    }

    .client-header-actions .btn{
        flex:1 1 auto;
    }
}


/* =========================================================
   CLIENT CONSENT OPTIONS
   ========================================================= */

.client-consent-box{
    padding-top:4px;
}

.client-consent-options{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    min-height:40px;
}

.client-check{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
}

.client-check input{
    width:17px;
    height:17px;
    margin:0;
}

.form-help{
    display:block;
    margin-top:6px;
    font-size:12px;
    opacity:.68;
}


/* =========================================================
   AUTOROOM DEMO RECEPTION
   ========================================================= */

.demo-kicker{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.62;
}

.reception-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 330px;
    gap:20px;
    align-items:start;
}

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

.reception-panel{
    margin-bottom:18px;
}

.reception-step{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
    background:rgba(255,255,255,.07);
}

.reception-readonly{
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.025);
    font-weight:700;
}

.reception-small-link{
    display:inline-block;
    margin-top:7px;
    font-size:12px;
    text-decoration:none;
}

.reception-textarea{
    min-height:90px;
    resize:vertical;
}

.reception-lines{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.reception-line{
    display:grid;
    grid-template-columns:minmax(220px, 1fr) 90px 120px 120px 32px;
    gap:10px;
    align-items:end;
    padding:12px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    background:rgba(255,255,255,.018);
}

.reception-line-total{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:42px;
}

.reception-line-total strong{
    white-space:nowrap;
}

.reception-line-remove{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:42px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    font-size:22px;
    opacity:.55;
}

.reception-line-remove:hover{
    opacity:1;
}

.reception-summary{
    position:sticky;
    top:84px;
}

.reception-summary-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.reception-summary-row span{
    opacity:.66;
}

.reception-summary-total{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.11);
}

.reception-summary-total span{
    font-weight:700;
}

.reception-summary-total strong{
    font-size:22px;
}

.reception-submit{
    width:100%;
    margin-top:22px;
    min-height:48px;
    font-weight:800;
}

.reception-summary-help{
    margin:10px 0 0;
    text-align:center;
    font-size:12px;
    opacity:.55;
}

.order-detail-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.5fr) minmax(280px, .7fr);
    gap:20px;
    margin-top:20px;
}

.order-note-row{
    align-items:flex-start;
}

.order-note-row strong{
    max-width:58%;
    text-align:right;
    white-space:normal;
}

.order-history{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.order-history-entry{
    display:flex;
    align-items:center;
    gap:12px;
}

.order-history-entry > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.order-history-entry span:not(.order-history-dot){
    font-size:12px;
    opacity:.55;
}

.order-history-dot{
    width:10px;
    height:10px;
    flex:0 0 10px;
    border-radius:50%;
    background:currentColor;
    opacity:.7;
}

.table-secondary{
    display:block;
    margin-top:3px;
    font-size:11px;
    opacity:.55;
}

.order-empty-state{
    padding:55px 20px;
}

@media (max-width:1100px){
    .reception-layout,
    .order-detail-grid{
        grid-template-columns:1fr;
    }

    .reception-summary{
        position:static;
    }
}

@media (max-width:760px){
    .reception-line{
        grid-template-columns:1fr 80px 105px;
    }

    .reception-line-name{
        grid-column:1 / -1;
    }

    .reception-line-total{
        grid-column:1 / 3;
    }
}