:root {
    color-scheme: light;
    --navy-950: #0a1527;
    --navy-900: #101d33;
    --navy-800: #192943;
    --blue-600: #2463eb;
    --blue-100: #dce9ff;
    --slate-950: #172033;
    --slate-700: #465267;
    --slate-500: #748095;
    --slate-300: #d6dce6;
    --slate-200: #e8ecf2;
    --slate-100: #f3f5f8;
    --white: #ffffff;
    --green: #16855b;
    --amber: #ae6b04;
    --violet: #7357c9;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--slate-100); color: var(--slate-950); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #91b5ff; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 242px minmax(0, 1fr); }

.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 17px; display: flex; flex-direction: column; color: #dce6f6; background: linear-gradient(160deg, var(--navy-950), #0d223c 70%, #123051); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 28px; color: white; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-weight: 900; font-size: 21px; background: linear-gradient(145deg, #fff, #bfd2f2); color: var(--navy-950); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: .02em; }
.brand small { margin-top: 1px; color: #9eb3d0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.main-nav { display: grid; gap: 5px; }
.main-nav a, .sidebar-bottom > a { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 13px; border-radius: 9px; color: #afbdd2; text-decoration: none; font-size: 14px; font-weight: 600; }
.main-nav a span, .sidebar-bottom a span { width: 18px; text-align: center; color: #8296b4; }
.main-nav a:hover, .sidebar-bottom > a:hover { color: white; background: rgba(255,255,255,.06); }
.main-nav a.active { color: white; background: rgba(61,116,224,.24); box-shadow: inset 3px 0 #4d85ff; }
.main-nav a.active span { color: #79a3ff; }
.main-nav b { margin-left: auto; min-width: 25px; padding: 3px 7px; border-radius: 20px; background: rgba(255,255,255,.1); color: #dbe8ff; text-align: center; font-size: 11px; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 4px; }
.license-card { margin-top: 16px; padding: 13px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.045); }
.license-card strong, .license-card small { display: block; }
.license-card strong { color: #e9f0fa; font-size: 12px; }
.license-card small { margin-top: 3px; color: #8498b5; font-size: 10px; line-height: 1.35; }
.status-dot { width: 8px; height: 8px; margin-top: 3px; flex: 0 0 auto; border-radius: 50%; background: #52d39a; box-shadow: 0 0 0 4px rgba(82,211,154,.12); }

.main-content { min-width: 0; }
.topbar { height: 70px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--slate-200); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.dealership { display: flex; align-items: center; gap: 10px; }
.dealer-logo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--navy-800); font-size: 12px; font-weight: 800; }
.dealership strong, .dealership small { display: block; }
.dealership strong { font-size: 13px; }
.dealership small { margin-top: 2px; color: var(--slate-500); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.clock-chip { min-height: 38px; padding: 6px 11px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; border: 1px solid #d7e0eb; border-radius: 9px; color: #2e3a4d; background: white; }
.clock-chip .status-dot { grid-row: 1 / 3; }
.clock-chip strong, .clock-chip small { display: block; text-align: left; line-height: 1.15; }.clock-chip strong { font-size: 10px; }.clock-chip small { color: var(--slate-500); font-size: 9px; }
.icon-button, .profile-button, .mobile-menu { border: 0; }
.icon-button { position: relative; width: 39px; height: 39px; border-radius: 9px; background: transparent; color: #6d778a; font-size: 9px; }
.notification-dot { position: absolute; top: 9px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: #ef5350; border: 1px solid white; }
.profile-button { width: 37px; height: 37px; border-radius: 50%; background: #d9e5fb; color: #294f90; font-size: 12px; font-weight: 800; }
.mobile-menu { display: none; background: transparent; font-size: 24px; }

.content-wrap { max-width: 1460px; margin: 0 auto; padding: 38px 38px 64px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 8px; color: var(--blue-600); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 3vw, 37px); line-height: 1.08; letter-spacing: -.035em; }
.page-heading p:last-child { margin-bottom: 0; color: var(--slate-500); font-size: 14px; }
.primary-button, .secondary-button { min-height: 42px; padding: 0 16px; border-radius: 8px; font-weight: 700; font-size: 13px; }
.primary-button { border: 1px solid #1c57d8; color: white; background: linear-gradient(#2b6cf4, #215bd6); box-shadow: 0 5px 13px rgba(36,99,235,.2); }
.primary-button:hover { background: #1952d0; }
.primary-button span { font-size: 18px; vertical-align: -1px; }
.secondary-button { border: 1px solid var(--slate-300); color: #3d485b; background: white; }

.stats { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stats article { min-height: 112px; padding: 20px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--slate-200); border-radius: 12px; background: white; box-shadow: 0 2px 5px rgba(20,35,60,.025); }
.stat-card-link { color: inherit; text-decoration: none; }.stat-card-link article { height: 100%; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }.stat-card-link:hover article { transform: translateY(-2px); border-color: #b7c9e8; box-shadow: 0 8px 20px rgba(20,35,60,.08); }
.stat-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 800; }
.stat-icon.blue { color: #2865d9; background: #e5eeff; }.stat-icon.green { color: var(--green); background: #dff6eb; }.stat-icon.amber { color: var(--amber); background: #fff0cf; }.stat-icon.violet { color: var(--violet); background: #eee8ff; }
.stats small, .stats strong, .stats em { display: block; }
.stats small { color: var(--slate-500); font-size: 11px; font-weight: 700; }
.stats strong { margin-top: 4px; font-size: 24px; letter-spacing: -.03em; }
.stats em { margin-top: 3px; color: #9aa3b2; font-size: 10px; font-style: normal; }

.inventory-panel { margin-top: 18px; overflow: hidden; border: 1px solid var(--slate-200); border-radius: 13px; background: white; box-shadow: 0 4px 15px rgba(20,35,60,.035); }
.inventory-toolbar { padding: 15px; display: grid; grid-template-columns: minmax(240px, 1fr) auto auto auto; gap: 9px; border-bottom: 1px solid var(--slate-200); }
.inventory-toolbar select, .search-box { height: 40px; border: 1px solid var(--slate-300); border-radius: 8px; background: white; }
.inventory-toolbar select { min-width: 150px; padding: 0 33px 0 11px; color: #4c576a; font-size: 12px; }
.search-box { display: flex; align-items: center; gap: 9px; padding: 0 12px; color: #8b95a5; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--slate-950); font-size: 12px; }
.search-box input::placeholder { color: #929baa; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 17px; color: #7e8899; background: #fafbfc; text-align: left; font-size: 10px; letter-spacing: .045em; text-transform: uppercase; }
td { padding: 14px 17px; border-top: 1px solid #edf0f4; color: #566175; font-size: 12px; white-space: nowrap; }
td strong, td small { display: block; }
td strong { color: #283347; font-size: 12px; }
td small { margin-top: 4px; color: #8b95a4; font-size: 9px; }
.vehicle-cell { min-width: 250px; display: flex; align-items: center; gap: 12px; }
.vehicle-thumb { width: 67px; height: 44px; flex: 0 0 auto; display: grid; place-items: end start; padding: 7px; border-radius: 7px; overflow: hidden; color: rgba(255,255,255,.9); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 -20px 25px rgba(0,0,0,.25); }
.vehicle-thumb.truck { background: linear-gradient(145deg, #5e7186, #1d2b3e); }.vehicle-thumb.suv { background: linear-gradient(145deg, #b3a88e, #554e42); }.vehicle-thumb.pickup { background: linear-gradient(145deg, #5f7692, #25354c); }.vehicle-thumb.car { background: linear-gradient(145deg, #a54f4b, #492321); }
.pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 20px; font-size: 9px; font-weight: 800; }
.pill.available { color: #16714e; background: #e1f5eb; }.pill.pending { color: #97600d; background: #fff1d6; }.pill.draft { color: #647085; background: #edf0f4; }
.row-menu { border: 0; background: transparent; color: #8892a2; font-weight: 800; letter-spacing: 1px; }
.empty-state { padding: 45px; color: var(--slate-500); text-align: center; }
.table-footer { min-height: 60px; padding: 11px 17px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--slate-200); color: #8993a3; font-size: 10px; }
.table-footer div { display: flex; gap: 4px; }.table-footer button { min-width: 31px; height: 31px; border: 1px solid var(--slate-300); border-radius: 6px; color: #647085; background: white; font-size: 10px; }.table-footer button.current { color: white; background: var(--blue-600); border-color: var(--blue-600); }.table-footer button:disabled { opacity: .45; cursor: default; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(7,16,30,.52); backdrop-filter: blur(2px); }
.vehicle-drawer { position: fixed; z-index: 30; top: 0; right: 0; width: min(620px, 100%); height: 100vh; overflow-y: auto; background: white; box-shadow: -20px 0 50px rgba(7,16,30,.2); transform: translateX(105%); transition: transform .25s ease; }
.vehicle-drawer.open { transform: translateX(0); }
.vehicle-drawer > header { padding: 26px 29px 22px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--slate-200); }
.vehicle-drawer h2 { margin-bottom: 5px; font-size: 26px; letter-spacing: -.03em; }.vehicle-drawer header p:last-child { margin-bottom: 0; color: var(--slate-500); font-size: 12px; }
.close-button { width: 36px; height: 36px; border: 0; border-radius: 8px; color: #6c7789; background: var(--slate-100); font-size: 24px; }
.text-button { min-height: 40px; padding: 0 10px; border: 0; color: #647085; background: transparent; font-weight: 700; font-size: 12px; }
.vehicle-drawer form { padding: 25px 29px; }
.vin-panel { padding: 17px; border: 1px solid #cddcf6; border-radius: 10px; background: #f5f8fe; }
.vin-panel label, .form-grid label { display: grid; gap: 7px; color: #3a4659; font-size: 11px; font-weight: 800; }
.vin-row { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.vin-row input, .vin-row button, .form-grid input, .form-grid select { height: 41px; border: 1px solid var(--slate-300); border-radius: 7px; background: white; }
.vin-row input, .form-grid input, .form-grid select { min-width: 0; padding: 0 11px; color: #2c3749; font-size: 12px; }
.vin-row button { padding: 0 14px; color: #2258ba; font-size: 11px; font-weight: 800; }
.vin-panel p { margin: 9px 0 0; color: #6f7d91; font-size: 10px; line-height: 1.45; }
.form-grid { margin-top: 21px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.photo-progress { margin-top: 22px; padding: 17px; border: 1px solid var(--slate-200); border-radius: 10px; }
.photo-progress div { display: flex; justify-content: space-between; color: #364155; font-size: 12px; }.photo-progress span { color: #8a94a4; font-size: 10px; }
.photo-progress progress { width: 100%; height: 7px; margin-top: 12px; accent-color: var(--blue-600); }.photo-progress p { margin: 8px 0 0; color: #8a94a4; font-size: 10px; line-height: 1.5; }
.vehicle-drawer form > footer { margin: 27px -29px -25px; padding: 17px 29px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--slate-200); background: #fafbfc; }
.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; padding: 13px 17px; border-radius: 9px; color: white; background: #183b2e; box-shadow: 0 10px 28px rgba(0,0,0,.22); font-size: 12px; font-weight: 700; }

@media (max-width: 1060px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-toolbar { grid-template-columns: 1fr 1fr; }
    .search-box { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: fixed; z-index: 40; left: 0; width: 242px; transform: translateX(-105%); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .mobile-menu { display: block; }
    .topbar { padding: 0 18px; }
    .content-wrap { padding: 25px 17px 50px; }
    .page-heading { align-items: flex-start; }
    .stats { grid-template-columns: 1fr 1fr; }
    .inventory-toolbar { grid-template-columns: 1fr; }
    .search-box { grid-column: auto; }
    .inventory-toolbar select, .secondary-button { width: 100%; }
}

@media (max-width: 520px) {
    .dealership div { display: none; }
    .page-heading { display: grid; }
    .clock-chip { display: none; }
    .primary-button { width: 100%; }
    .stats { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .vehicle-drawer form, .vehicle-drawer > header { padding-left: 19px; padding-right: 19px; }
    .vehicle-drawer form > footer { margin-left: -19px; margin-right: -19px; padding-left: 19px; padding-right: 19px; }
    .vin-row { grid-template-columns: 1fr; }
    .table-footer { align-items: flex-start; gap: 12px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}