:root{
  --bg:#f7f8fa;
  --surface:#ffffff;
  --surface-soft:#fafbfc;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e6e8ec;
  --border-strong:#d7dbe0;
  --primary:#243447;
  --primary-hover:#1c2938;
  --primary-soft:#f0f3f6;
  --success:#2f6f4e;
  --success-soft:#eef7f1;
  --warning:#8a6726;
  --warning-soft:#fbf6e9;
  --danger:#8b3a3a;
  --danger-soft:#faefef;
  --info:#3c5f87;
  --info-soft:#eef3f8;
  --radius:10px;
  --sidebar-width:250px
}

html[data-theme="dark"]{
  --bg:#111417;
  --surface:#171b20;
  --surface-soft:#1c2127;
  --text:#e8eaed;
  --muted:#9aa1aa;
  --border:#2a3037;
  --border-strong:#39414a;
  --primary:#d7dee7;
  --primary-hover:#ffffff;
  --primary-soft:#222830;
  --success:#8bc5a4;
  --success-soft:#18271f;
  --warning:#d5b36b;
  --warning-soft:#2a2417;
  --danger:#d99999;
  --danger-soft:#2b1d1d;
  --info:#9bb7d3;
  --info-soft:#1b2631
}

*{box-sizing:border-box}
html{background:var(--bg);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Tahoma,Arial,sans-serif;font-size:16px;line-height:1.7}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}

.sidebar{position:fixed;inset:0 0 0 auto;width:var(--sidebar-width);height:100vh;height:100dvh;padding:20px 16px;background:var(--surface);border-left:1px solid var(--border);z-index:20;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.brand{min-height:44px;padding:0 10px 18px;border-bottom:1px solid var(--border);color:var(--primary);font-size:20px;font-weight:700}
.nav{display:grid;gap:18px;margin-top:18px}
.nav-group{display:grid;gap:4px}
.nav-group+.nav-group{padding-top:14px;border-top:1px solid var(--border)}
.nav-group-label{padding:0 12px 6px;color:var(--muted);font-size:12px;font-weight:700;line-height:1.4}
.nav a{display:flex;align-items:center;min-height:42px;padding:9px 12px;border-radius:8px;color:var(--muted)}
.nav a:hover{background:var(--surface-soft);color:var(--text)}
.nav a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}

.main{min-height:100vh;margin-right:var(--sidebar-width)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--border)}
.topbar-start,.topbar-actions{display:flex;align-items:center;gap:12px}
.topbar h1{margin:0;font-size:21px;font-weight:700}
.topbar-user{color:var(--muted);font-size:14px}
.menu-button,.theme-toggle{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}
.menu-button{display:none}
.theme-toggle{display:inline-grid;place-items:center}
.theme-toggle:hover{background:var(--surface-soft);border-color:var(--border-strong)}
.theme-icon{font-size:18px;line-height:1}

.content{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:26px 0 40px}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.page-head h2{margin:0;font-size:20px}
.page-head p{margin:4px 0 0;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid var(--primary);border-radius:8px;background:var(--primary);color:var(--surface);font-size:14px;line-height:1.2;cursor:pointer}
.button:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--surface)}

.summary,.stats{display:grid;gap:12px;margin-bottom:18px}
.summary{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.summary-item,.stat{padding:17px}
.summary-label,.stat-label{color:var(--muted);font-size:14px}
.summary-value,.stat-value{margin-top:5px;font-size:24px;font-weight:700;color:var(--text)}

.filters{display:grid;grid-template-columns:1fr 220px auto;gap:10px;padding:14px;margin-bottom:18px}
.filters.filters-four{grid-template-columns:1fr 190px 190px auto}
.filters.items-filters{grid-template-columns:repeat(4,minmax(150px,1fr)) auto auto}
.field{width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);outline:none}
.field:hover{border-color:var(--border-strong)}
.field:focus{border-color:var(--border-strong)}

.table-wrap{overflow-x:auto}
table{width:100%;min-width:780px;border-collapse:collapse}
th,td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
th{background:var(--surface-soft);color:var(--muted);font-size:13px;font-weight:600}
tbody tr:hover{background:var(--surface-soft)}
tbody tr:last-child td{border-bottom:0}

.strong{font-weight:700}
.muted{color:var(--muted);font-size:13px}
.status{display:inline-flex;align-items:center;min-height:26px;padding:2px 9px;border-radius:999px;background:var(--surface-soft);font-size:13px}
.status.active,.status.available,.status.completed{color:var(--success);background:var(--success-soft)}
.status.low,.status.review{color:var(--warning);background:var(--warning-soft)}
.status.inactive,.status.out{color:var(--danger);background:var(--danger-soft)}
.status.new{color:var(--info);background:var(--info-soft)}

.actions{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}

.section{margin-top:24px;overflow:hidden}
.section-header{padding:17px 20px;border-bottom:1px solid var(--border)}
.section-header h2{margin:0;font-size:18px}
.overlay{display:none}

@media(max-width:1000px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters.filters-four,.filters.items-filters{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .filters{grid-template-columns:1fr 1fr}
  .filters .button{grid-column:1/-1}
}
@media(max-width:760px){
  .sidebar{transform:translateX(100%);transition:transform .2s ease}
  .sidebar.open{transform:translateX(0)}
  .main{margin-right:0}
  .menu-button{display:inline-grid;place-items:center}
  .topbar{padding:10px 16px}
  .topbar h1{font-size:19px}
  .topbar-user{display:none}
  .content{width:min(100% - 24px,1200px);padding-top:20px}
  .page-head{align-items:stretch;flex-direction:column}
  .page-head>.actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    width:100%
  }
  .page-head>.actions .button{
    width:100%;
    min-height:48px;
    padding:10px 12px;
    white-space:normal;
    text-align:center
  }
  .summary,.stats{grid-template-columns:1fr}
  .overlay{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.4)}
  .overlay.show{display:block}
}
@media(max-width:560px){
  .filters,.filters.filters-four,.filters.items-filters{grid-template-columns:1fr}
}


.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid .full{grid-column:1/-1}
.field-group{display:grid;gap:6px}
.field-group label{font-size:13px;color:var(--muted)}
.notice{margin-bottom:16px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:14px}
.notice.success{color:var(--success);background:var(--success-soft)}
.notice.error{color:var(--danger);background:var(--danger-soft)}
.panel{padding:16px;margin-bottom:18px}
.panel h2{margin:0 0 14px;font-size:18px}
.inline-note{color:var(--muted);font-size:13px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}


.inline-form{display:inline;margin:0}


.autocomplete{position:relative;grid-column:span 2}
.autocomplete-menu{position:absolute;z-index:30;top:calc(100% + 4px);right:0;left:0;max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.autocomplete-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text);text-align:right;cursor:pointer}
.autocomplete-option:last-child{border-bottom:0}
.autocomplete-option:hover{background:var(--surface-soft)}
.autocomplete-option small{color:var(--muted)}
@media(max-width:1000px){.autocomplete{grid-column:1/-1}}
@media(max-width:560px){.autocomplete{grid-column:auto}}

.autocomplete-option[hidden]{display:none}


.reveal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reveal-grid[hidden]{display:none}
@media(max-width:700px){.reveal-grid{grid-template-columns:1fr}}

/* Inventory movement row states */
.movements-table tbody tr.movement-in{background:var(--success-soft)}
.movements-table tbody tr.movement-out{background:var(--danger-soft)}
.movements-table tbody tr.movement-transfer{background:var(--surface-soft)}
.movements-table tbody tr.movement-in:hover,
.movements-table tbody tr.movement-out:hover,
.movements-table tbody tr.movement-transfer:hover{filter:brightness(.985)}


.item-picker-results{display:grid;gap:6px;margin-top:8px}
.item-picker-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:inherit;text-align:right;cursor:pointer;font:inherit}
.item-picker-option:hover{background:var(--surface-soft)}
.item-picker-option span{font-size:13px;color:var(--muted)}
.sale-cart{display:grid;gap:10px}
.sale-item-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.sale-item-info{display:grid;gap:3px}
.sale-qty{display:flex;align-items:center;gap:6px}
.sale-qty .field{width:86px;text-align:center}
.sale-qty button{width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft);color:inherit;font:inherit;font-size:20px;cursor:pointer}
@media(max-width:700px){.item-picker-option{align-items:flex-start;flex-direction:column}.sale-item-card{grid-template-columns:1fr}.sale-qty{justify-content:flex-start}}

/* Vehicle inventory differences */
.inventory-difference-stats{margin-bottom:18px}
.difference-stat{display:flex;min-height:132px;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:20px}
.difference-stat span{color:var(--muted);font-size:14px;font-weight:600}
.difference-stat strong{font-size:32px;line-height:1;font-weight:700}
.difference-stat small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.difference-stat small b{color:var(--text);font-size:15px}
.difference-stat.shortage{border-top:3px solid var(--danger)}
.difference-stat.shortage strong{color:var(--danger)}
.difference-stat.surplus{border-top:3px solid var(--success)}
.difference-stat.surplus strong{color:var(--success)}
.difference-stat.matched{border-top:3px solid var(--border-strong)}
@media(max-width:760px){.difference-stat{min-height:112px;padding:16px}.difference-stat strong{font-size:28px}}