:root{
  --asphalt:#15171A; --asphalt-2:#1E2226; --asphalt-3:#282D32;
  --paper:#FFFFFF; --concrete:#EEF1F1;
  --ink:#14181B; --steel:#5B6570; --steel-light:#8B96A1;
  --line:#DCE1E3; --line-soft:#E7EAEA;
  --amber:#E8A33D; --amber-dark:#B87A18; --amber-bg:#FCF1DE;
  --green:#276749; --green-bg:#E4F1E9;
  --alert:#B3452C; --alert-bg:#FBEAE4;
  --blue:#2C5F8A; --blue-bg:#E7EFF5;
  --radius:10px; --radius-lg:14px;
  --font-display:'Archivo',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
  --shadow-md:0 8px 24px rgba(20,24,27,.12), 0 2px 6px rgba(20,24,27,.06);
  --shadow-lg:0 20px 50px rgba(20,24,27,.22);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--font-body); background:var(--concrete); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{color:inherit;} button{font-family:inherit; cursor:pointer;} input,select,textarea{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--amber); outline-offset:1px;}
::selection{background:var(--amber); color:var(--asphalt);}

/* ============ LOGIN ============ */
#screen-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, #23282d 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #23282d 0%, transparent 45%),
    var(--asphalt);
  padding:20px;
}
.login-shell{
  width:100%; max-width:940px; min-height:600px; background:var(--paper); border-radius:22px;
  box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1.05fr 1fr; overflow:hidden;
}
.login-hero{
  background:linear-gradient(160deg, #191C20 0%, #1E2226 55%, #262B30 100%);
  color:#fff; padding:44px 42px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
}
.login-hero-rings{position:absolute; right:-70px; bottom:-70px; pointer-events:none;}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:26px; position:relative;}
.brand-mark{width:38px; height:38px; border-radius:50%; border:2.5px solid var(--amber); position:relative; flex:none;}
.brand-mark::before{content:""; position:absolute; inset:7px; border-radius:50%; border:1.5px dashed var(--amber); opacity:.7;}
.login-brand .bn{font-family:var(--font-display); font-weight:700; font-size:15.5px; line-height:1.15; color:#fff;}
.login-brand .bs{font-size:10.3px; color:#8B96A1; font-weight:600; letter-spacing:.07em; text-transform:uppercase;}
.login-hero .eyebrow{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:14px; position:relative;}
.login-hero h1{font-family:var(--font-display); font-size:27px; font-weight:800; line-height:1.18; margin-bottom:14px; position:relative;}
.login-hero p.sub{font-size:13px; color:#B7C0C8; line-height:1.6; max-width:300px; position:relative;}
.feature-list{margin-top:30px; display:flex; flex-direction:column; gap:15px; position:relative;}
.feature-item{display:flex; gap:12px; align-items:flex-start;}
.feature-item .fi-icon{width:32px; height:32px; border-radius:9px; background:rgba(232,163,61,.14); border:1px solid rgba(232,163,61,.3); display:flex; align-items:center; justify-content:center; flex:none;}
.feature-item .ft{font-size:12.8px; font-weight:600; color:#fff;}
.feature-item .fd{font-size:11.3px; color:#8B96A1; margin-top:2px;}
.hero-foot{font-size:10.8px; color:#5B6570; position:relative;}
.login-form-panel{padding:48px 44px 32px; display:flex; flex-direction:column; justify-content:center;}
.login-form-panel h2{font-family:var(--font-display); font-size:21px; margin-bottom:4px;}
.login-form-panel > p.lead{font-size:13px; color:var(--steel); margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.field input{width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:8px; font-size:13.5px;}
.field input:focus{border-color:var(--amber);}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:40px;}
.pw-toggle{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; border-radius:6px; color:var(--steel);}
.pw-toggle:hover{background:var(--concrete); color:var(--ink);}
.form-field .pw-wrap input{padding-right:38px;}
.role-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 22px;}
.role-card{
  border:1.5px solid var(--line); border-radius:10px; padding:14px 12px; text-align:center; background:var(--paper);
  transition:border-color .12s, background .12s;
}
.role-card svg{margin-bottom:8px;}
.role-card .rt{font-size:12.5px; font-weight:700;}
.role-card .rs{font-size:10.5px; color:var(--steel); margin-top:2px;}
.role-card.selected{border-color:var(--amber); background:var(--amber-bg);}
.btn-block{width:100%; justify-content:center; padding:12px;}
.login-foot{text-align:center; margin-top:16px; font-size:12px; color:var(--steel-light);}
.login-foot a{color:var(--amber-dark); font-weight:600; text-decoration:none;}
.demo-hint{
  margin-top:20px; background:var(--concrete); border-radius:8px; padding:10px 12px; font-size:11.5px; color:var(--steel);
  display:flex; gap:8px; align-items:flex-start;
}
@media (max-width:800px){
  .login-shell{grid-template-columns:1fr; max-width:440px; min-height:auto;}
  .login-hero{display:none;}
}
@media (max-width:480px){
  #screen-login{padding:14px;}
  .login-form-panel{padding:34px 22px 26px;}
}

/* ============ APP SHELL ============ */
#app{display:none;}
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh;}
.sidebar{background:var(--asphalt); color:#fff; padding:20px 14px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:40;}
.brand{display:flex; align-items:center; gap:10px; padding:0 6px;}
.brand .bn{font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.15;}
.brand .bs{font-size:10px; color:var(--steel-light); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:2px;}
.nav-group-label{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:#6B7580; font-weight:600; padding:0 10px; margin-bottom:8px;}
.nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; font-size:13.3px; font-weight:500; color:#B7C0C8; background:transparent; border:none; text-align:left; width:100%; transition:background .12s,color .12s;}
.nav-item svg{flex:none; opacity:.85;}
.nav-item:hover{background:var(--asphalt-2); color:#fff;}
.nav-item.active{background:var(--asphalt-3); color:#fff;}
.nav-item.active svg{opacity:1; stroke:var(--amber);}
.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--asphalt-3);}
.logout-btn{display:flex; align-items:center; gap:9px; color:#B7C0C8; background:transparent; border:none; font-size:12.5px; font-weight:600; padding:9px 10px; width:100%; border-radius:8px;}
.logout-btn:hover{background:var(--asphalt-2); color:#fff;}

.main{min-width:0;}
.topbar{
  background:var(--paper); border-bottom:1px solid var(--line); padding:14px 30px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30;
}
.hamburger{display:none; background:none; border:none; padding:6px;}
.topbar h1{font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.01em;}
.topbar p{color:var(--steel); font-size:12.5px; margin-top:2px;}
.topbar-right{display:flex; align-items:center; gap:8px;}
.icon-btn{position:relative; width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--paper); display:flex; align-items:center; justify-content:center;}
.icon-btn:hover{background:var(--concrete);}
.badge-dot{position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--alert); border:1.5px solid var(--paper);}
.user-chip{display:flex; align-items:center; gap:9px; background:var(--paper); border:1px solid var(--line); padding:6px 12px 6px 6px; border-radius:24px;}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--amber-bg); color:var(--amber-dark); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; font-weight:700; flex:none;}
.user-chip .name{font-size:12.5px; font-weight:600; line-height:1.1;}
.user-chip .role{font-size:10.5px; color:var(--steel);}
.content{padding:26px 30px 60px;}

/* dropdowns */
.dd-wrap{position:relative;}
.dd-panel{
  position:absolute; top:calc(100% + 10px); right:0; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-md); width:320px; z-index:60; display:none; overflow:hidden;
}
.dd-panel.open{display:block;}
.dd-head{padding:14px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.dd-head h4{font-family:var(--font-display); font-size:13px;}
.dd-head button{background:none; border:none; font-size:11.5px; font-weight:600; color:var(--amber-dark);}
.notif-item{padding:12px 16px; border-bottom:1px solid var(--line-soft); display:flex; gap:10px;}
.notif-item:last-child{border-bottom:none;}
.notif-item-clickable{cursor:pointer; transition:background .12s;}
.notif-item-clickable:hover{background:var(--concrete);}
.notif-dot{width:7px; height:7px; border-radius:50%; background:var(--amber); margin-top:5px; flex:none;}
.notif-item .nt{font-size:12.3px; font-weight:500; line-height:1.4;}
.notif-item .nw{font-size:10.5px; color:var(--steel-light); margin-top:3px;}
.profile-menu{width:200px;}
.pm-item{display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:13px; font-weight:500;}
.pm-item:hover{background:var(--concrete);}
.pm-div{height:1px; background:var(--line); margin:4px 0;}

section.panel{display:none;} section.panel.active{display:block;}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.grid-3{display:grid; grid-template-columns:2fr 1fr; gap:16px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.dash-welcome{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.dw-eyebrow{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--amber-dark);}
.dw-title{font-family:var(--font-display); font-size:19px; font-weight:700; margin-top:3px;}
.kpi-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.kpi-icon-amber{background:var(--amber-bg); color:var(--amber-dark);}
.kpi-icon-green{background:var(--green-bg); color:var(--green);}
.kpi-icon-alert{background:var(--alert-bg); color:var(--alert);}
.kpi-icon-blue{background:var(--blue-bg); color:var(--blue);}
.chart-wrap{position:relative; min-height:220px;}
.svg-chart{width:100%; min-height:220px; display:flex; align-items:center; justify-content:center;}
.svg-chart .empty-state{padding:30px 10px;}
.kpi-card{padding:18px 20px; position:relative; overflow:hidden;}
.kpi-label{font-size:11px; color:var(--steel); font-weight:600; text-transform:uppercase; letter-spacing:.06em;}
.kpi-value{font-family:var(--font-display); font-size:25px; font-weight:700; margin-top:8px;}
.kpi-sub{font-size:11.5px; color:var(--steel); margin-top:4px;}
.kpi-sub.up{color:var(--green);} .kpi-sub.warn{color:var(--alert);}
.gauge-wrap{position:absolute; right:14px; top:14px;}

.btn{border:none; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.btn-primary{background:var(--amber); color:var(--asphalt);} .btn-primary:hover{background:var(--amber-dark); color:#fff;}
.btn-ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink);} .btn-ghost:hover{border-color:var(--steel);}
.btn-dark{background:var(--asphalt); color:#fff;} .btn-dark:hover{background:var(--asphalt-3);}
.btn-danger{background:var(--alert); color:#fff;} .btn-danger:hover{background:#8f3620;}
.btn-sm{padding:7px 12px; font-size:12px; border-radius:7px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

.section-title{font-family:var(--font-display); font-size:15px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.section-title span.tag{font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--steel); background:var(--concrete); padding:4px 9px; border-radius:20px;}

/* toolbar: search + filters + add new */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
.search-box{position:relative; flex:1; min-width:200px; max-width:320px;}
.search-box svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.5;}
.search-box input{width:100%; padding:9px 12px 9px 34px; border:1.5px solid var(--line); border-radius:8px; font-size:13px;}
.search-box input:focus{border-color:var(--amber);}
.toolbar .spacer{flex:1;}
.filter-panel{display:none; gap:10px; flex-wrap:wrap; background:var(--concrete); border-radius:10px; padding:14px; margin:-4px 0 16px;}
.filter-panel.open{display:flex;}
.filter-panel select, .filter-panel input{padding:8px 10px; border:1.5px solid var(--line); border-radius:7px; font-size:12.5px; background:var(--paper);}
.report-filter-bar{flex-wrap:wrap; margin-bottom:8px;}
.report-filter-bar select{padding:8px 10px; border:1.5px solid var(--line); border-radius:7px; font-size:12.5px; background:var(--paper); max-width:170px;}
.report-filter-note{font-size:11.3px; color:var(--steel-light); margin:-2px 0 16px;}

.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -20px; padding:0 20px;}
.table-scroll table{min-width:640px;}
@media (max-width:560px){
  .table-scroll{margin:0 -16px; padding:0 16px;}
}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{text-align:left; font-size:10.3px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); font-weight:600; padding:0 12px 10px; border-bottom:1px solid var(--line); user-select:none;}
thead th.sortable{cursor:pointer;}
thead th.sortable:hover{color:var(--ink);}
thead th .arrow{opacity:.4; margin-left:3px; font-size:10px;}
tbody td{padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FAFBFB;}
td.mono{font-family:var(--font-mono); font-weight:600;}
.row-actions{display:flex; gap:6px; justify-content:flex-end;}
.icon-action{width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:var(--paper); display:flex; align-items:center; justify-content:center;}
.icon-action:hover{background:var(--concrete);}
.icon-action.danger:hover{background:var(--alert-bg); border-color:var(--alert);}

.cb{width:16px; height:16px; accent-color:var(--asphalt); cursor:pointer;}

.badge{font-size:10.8px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-block;}
.badge-admin{background:var(--asphalt); color:#fff;} .badge-staff{background:var(--blue-bg); color:var(--blue);}
.badge-have{background:var(--green-bg); color:var(--green);} .badge-missing{background:var(--alert-bg); color:var(--alert);}
.badge-draft{background:var(--concrete); color:var(--steel);} .badge-sent{background:var(--amber-bg); color:var(--amber-dark);} .badge-received{background:var(--green-bg); color:var(--green);}

.toggle{position:relative; width:38px; height:21px; border-radius:20px; background:var(--line); border:none; flex:none;}
.toggle::after{content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:2.5px; left:3px; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2);}
.toggle.on{background:var(--green);}
.toggle.on::after{transform:translateX(17px);}

.setting-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line);}
.setting-row:last-child{border-bottom:none; padding-bottom:0;}
.setting-row:first-child{padding-top:0;}
.setting-label{font-size:13.5px; font-weight:600; margin-bottom:3px; display:flex; align-items:center; gap:8px;}
.setting-row .si{width:32px; height:32px; border-radius:10px; background:var(--concrete); color:var(--steel); display:flex; align-items:center; justify-content:center; flex:none;}
.setting-row .si-amber{background:var(--amber-bg); color:var(--amber-dark);}
.setting-row .si-alert{background:var(--alert-bg); color:var(--alert);}
.setting-row .si-row{display:flex; align-items:flex-start; gap:13px;}

.danger-card{border-color:var(--alert-bg);}

/* ---------- ACCOUNT PAGE (My profile / Settings — shared tabbed layout) ---------- */
.account-wrap{max-width:none; width:100%;}
.account-banner{
  position:relative; overflow:hidden; border:none; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%);
  padding:30px 28px; margin-bottom:20px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:18px; color:#fff;
}
.account-banner::before{
  content:""; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.35);
}
.account-banner::after{
  content:""; position:absolute; right:20px; bottom:-70px; width:150px; height:150px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25);
}
.account-avatar{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:21px; font-weight:700;
  flex:none; position:relative; z-index:1;
}
.account-banner .ph-name{font-family:var(--font-display); font-size:19px; font-weight:700; margin-bottom:3px; position:relative; z-index:1;}
.account-banner .ph-email{font-size:12.5px; color:rgba(255,255,255,.85); position:relative; z-index:1;}
.account-banner .badge{margin-top:9px; display:inline-block; background:rgba(255,255,255,.9); color:var(--amber-dark); position:relative; z-index:1;}

.account-tabs{display:inline-flex; background:var(--concrete); border-radius:9px; padding:4px; gap:3px; margin-bottom:20px;}
.account-tabs button{border:none; background:transparent; padding:9px 20px; border-radius:7px; font-size:13px; font-weight:600; color:var(--steel);}
.account-tabs button.active{background:var(--paper); color:var(--ink); box-shadow:var(--shadow-md);}

.account-tab-panel{display:none;}
.account-tab-panel.active{display:block;}

.acc-card{background:var(--paper); border:none; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:24px; margin-bottom:18px;}
.acc-card.danger-card{box-shadow:0 8px 24px rgba(196,60,42,.10), 0 2px 6px rgba(196,60,42,.06);}
.acc-card .form-grid{margin-top:2px;}

/* On wider screens both tabs (Profile and Settings) lay their cards out in
   two side-by-side columns that fill the width, instead of stacking one
   below another with empty space on the right. */
@media (min-width:760px){
  .account-tab-panel.active{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start;
  }
  .account-tab-panel.active .acc-card{
    margin:0;
  }
}

.card-title-row{display:flex; align-items:center; gap:11px; margin-bottom:18px;}
.card-title-row .ci{width:34px; height:34px; border-radius:10px; background:var(--amber-bg); color:var(--amber-dark); display:flex; align-items:center; justify-content:center; flex:none;}
.card-title-row .ci-red{background:var(--alert-bg); color:var(--alert);}
.card-title-row h4{font-family:var(--font-display); font-size:15px; font-weight:700; margin:0;}
.card-title-row p{font-size:11.8px; color:var(--steel); margin:2px 0 0;}

.settings-tip-card{background:var(--amber-bg); border:none;}
.settings-tip-card .setting-label{color:var(--amber-dark);}

.status-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;}
.dot-green{background:var(--green);} .dot-amber{background:var(--amber-dark);} .dot-red{background:var(--alert);}

.bulk-bar{
  display:none; align-items:center; gap:12px; background:var(--asphalt); color:#fff; padding:11px 16px; border-radius:9px; margin-bottom:14px;
}
.bulk-bar.open{display:flex;}
.bulk-bar .count{font-size:12.5px; font-weight:600; margin-right:auto;}
.bulk-bar button{background:var(--asphalt-2); color:#fff; border:none; border-radius:7px; padding:7px 12px; font-size:12px; font-weight:600;}
.bulk-bar button:hover{background:var(--asphalt-3);}
.bulk-bar button.danger{background:var(--alert);}

.pagination{display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:14px;}
.pagination button{width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:var(--paper); font-size:12.5px; font-weight:600;}
.pagination button.active{background:var(--asphalt); color:#fff; border-color:var(--asphalt);}
.pagination button:disabled{opacity:.4;}
.pagination .pg-info{font-size:12px; color:var(--steel); margin-right:auto;}

.note-item{padding:10px 0; border-top:1px solid var(--line);} .note-item:first-of-type{border-top:none; padding-top:0;}
.note-item-clickable{cursor:pointer; border-radius:8px; margin:0 -8px; padding:10px 8px; transition:background .12s;}
.note-item-clickable:first-of-type{margin-top:-4px;}
.note-item-clickable:hover{background:var(--concrete);}
.note-item .who{font-size:12px; font-weight:600;} .note-item .msg{font-size:12.5px; color:var(--steel); margin-top:3px; line-height:1.4;} .note-item .when{font-size:10.3px; color:var(--steel-light); margin-top:4px;}
.mini-sale{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px;} .mini-sale:first-of-type{border-top:none;}
.mini-sale .l{color:var(--steel);} .mini-sale .r{font-family:var(--font-mono); font-weight:600;}

.size-chip{font-family:var(--font-mono); font-weight:600; font-size:13.5px; background:var(--asphalt); color:#fff; padding:7px 11px; border-radius:7px; flex:none;}
.fit-card{display:flex; align-items:center; gap:16px; padding:15px 18px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--paper); flex-wrap:wrap;}
.fit-info{flex:1; min-width:180px;} .fit-info .veh{font-weight:600; font-size:13.3px;} .fit-info .meta{font-size:11.8px; color:var(--steel); margin-top:2px;}
.stock-pill{font-size:11.3px; font-weight:600; padding:4px 10px; border-radius:20px; flex:none;}
.stock-ok{background:var(--green-bg); color:var(--green);} .stock-low{background:var(--amber-bg); color:var(--amber-dark);} .stock-out{background:var(--alert-bg); color:var(--alert);}
.price-block{text-align:right; flex:none; min-width:105px;} .price-block .sell{font-family:var(--font-mono); font-weight:600; font-size:14.5px;} .price-block .fit-fee{font-size:11.3px; color:var(--steel);}
.more-pill{display:inline-flex; align-items:center; gap:6px; background:var(--concrete); border:1px dashed var(--steel-light); color:var(--steel); font-size:12.3px; font-weight:600; padding:8px 14px; border-radius:20px; margin-top:4px;}
.mode-toggle{display:inline-flex; background:var(--concrete); border-radius:8px; padding:3px; gap:3px; margin-bottom:16px;}
.mode-toggle button{border:none; background:transparent; padding:8px 16px; border-radius:6px; font-size:13px; font-weight:600; color:var(--steel);}
.mode-toggle button.active{background:var(--asphalt); color:#fff;}
.search-row{display:flex; gap:10px; flex-wrap:wrap;}
.search-row select,.search-row input{border:1.5px solid var(--line); background:var(--paper); border-radius:8px; padding:11px 13px; font-size:13.3px;}
.search-row input.size-input{font-family:var(--font-mono); font-weight:600;}
.layout-2col{display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start;}
.rail-card{padding:18px; margin-bottom:16px;} .rail-card h3{font-family:var(--font-display); font-size:13.3px; margin-bottom:12px;}

.bar-track{background:var(--concrete); border-radius:20px; height:7px; width:100%; overflow:hidden;}
.bar-fill{background:var(--amber); height:100%; border-radius:20px;}

.placeholder{padding:50px 30px; text-align:center; color:var(--steel);}
.placeholder .ph-icon{width:44px; height:44px; border-radius:50%; background:var(--concrete); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.placeholder h4{font-family:var(--font-display); font-size:14px; color:var(--ink); margin-bottom:6px;}
.placeholder p{font-size:12.3px; max-width:340px; margin:0 auto; line-height:1.5;}

/* modals */
.modal-overlay{position:fixed; inset:0; background:rgba(20,24,27,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--paper); border-radius:var(--radius-lg); width:100%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lg);}
.modal.modal-sm{max-width:400px;}
.modal-head{padding:20px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
.modal-head h3{font-family:var(--font-display); font-size:16.5px;}
.modal-head p{font-size:12px; color:var(--steel); margin-top:3px;}
.modal-close{background:none; border:none; width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center;}
.modal-close:hover{background:var(--concrete);}
.modal-body{padding:22px 24px;}
.modal-foot{padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid .full{grid-column:1/-1;}
.form-field label{display:block; font-size:12px; font-weight:600; margin-bottom:6px;}
.form-field input, .form-field select, .form-field textarea{width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:7px; font-size:13px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--amber);}
.form-field .hint{font-size:11px; color:var(--steel-light); margin-top:4px;}
.view-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13px;}
.view-row:last-child{border-bottom:none;}
.view-row .k{color:var(--steel);} .view-row .v{font-weight:600; text-align:right;}
.confirm-icon{width:52px; height:52px; border-radius:50%; background:var(--alert-bg); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}

/* toasts */
.toast-stack{position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.toast{background:var(--paper); border-radius:9px; box-shadow:var(--shadow-md); padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; min-width:240px; border-left:4px solid var(--green); animation:toastIn .18s ease-out;}
.toast.error{border-left-color:var(--alert);}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* skeleton / empty */
.skeleton-row{display:flex; gap:12px; padding:11px 12px; align-items:center;}
.sk{background:linear-gradient(90deg,#EEF1F1 25%,#E4E7E7 37%,#EEF1F1 63%); background-size:400% 100%; animation:shimmer 1.3s infinite; border-radius:5px;}
@keyframes shimmer{0%{background-position:100% 0;} 100%{background-position:0 0;}}
.empty-state{padding:44px 20px; text-align:center;}
.empty-state svg{margin-bottom:10px; opacity:.35;}
.empty-state h4{font-family:var(--font-display); font-size:13.5px; margin-bottom:4px;}
.empty-state p{font-size:12px; color:var(--steel);}

.subnav{display:flex; gap:6px; margin-bottom:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.subnav button{border:1.5px solid var(--line); background:var(--paper); border-radius:8px; padding:8px 15px; font-size:12.3px; font-weight:600; color:var(--steel); flex:none; white-space:nowrap;}
.subnav button.active{background:var(--asphalt); color:#fff; border-color:var(--asphalt);}

.drop-zone{border:2px dashed var(--line); border-radius:10px; padding:30px; text-align:center; color:var(--steel); font-size:13px;}
.drop-zone svg{margin-bottom:10px;}

/* ============================================================
   RESPONSIVE — tablet, mobile, small-phone
   Breakpoints: 1180 (small laptop) / 1000 (tablet, sidebar becomes
   an overlay drawer) / 768 (tablet portrait / large phone) /
   560 (mobile) / 400 (small phone)
   ============================================================ */

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

@media (max-width:1000px){
  .shell{grid-template-columns:1fr;}
  .sidebar{position:fixed; top:0; left:0; bottom:0; width:236px; max-width:80vw; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--shadow-lg);}
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:flex; align-items:center; justify-content:center;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .layout-2col,.grid-3,.grid-2{grid-template-columns:1fr;}
  .content{padding:20px 16px 50px;} .topbar{padding:12px 16px;}
  .settings-layout{grid-template-columns:1fr;}
}

@media (max-width:768px){
  .topbar h1{font-size:16.5px;}
  .topbar p{font-size:11.5px;}
  .dd-panel{width:min(320px, calc(100vw - 32px)); right:-8px;}
  .modal-body,.modal-head,.modal-foot{padding-left:18px; padding-right:18px;}
  .inv-doc{padding:24px 18px 20px;}
  .inv-meta-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .account-banner{padding:22px 20px; gap:14px;}
  .account-avatar{width:52px; height:52px; font-size:17px;}
  .acc-card{padding:18px;}

  /* reports: filters need to breathe before they hit the 560px stack rules */
  .report-filter-bar select{max-width:none; flex:1 1 47%;}
  .report-filter-bar .btn-sm{flex:none;}
  .chart-wrap,.svg-chart{min-height:190px;}
}

@media (max-width:560px){
  .grid-4{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .role-pick{grid-template-columns:1fr;}
  .user-chip .name,.user-chip .role{display:none;}

  /* toolbars, filters & bulk actions never overflow the viewport */
  .toolbar{gap:8px;}
  .search-box{min-width:0; max-width:none; flex:1 1 100%;}
  .filter-panel{flex-direction:column; align-items:stretch;}
  .filter-panel select,.filter-panel input{width:100%;}
  .bulk-bar{flex-wrap:wrap; row-gap:8px;}
  .bulk-bar .count{width:100%;}
  .report-filter-bar select{max-width:none; flex:1 1 45%;}

  /* fitment lookup: make the make/model/year/size controls full-width */
  .search-row{gap:8px;}
  .search-row select,.search-row input,.search-row .btn{flex:1 1 100%; width:100%;}
  .mode-toggle{width:100%;}
  .mode-toggle button{flex:1;}

  /* pagination wraps instead of spilling off-screen */
  .pagination{flex-wrap:wrap; justify-content:center;}
  .pagination .pg-info{width:100%; text-align:center; margin-right:0; margin-bottom:4px;}

  /* setting rows stack label/description above the control */
  .setting-row{flex-direction:column; align-items:flex-start; gap:12px;}
  .setting-row > button.btn{align-self:stretch; justify-content:center;}
  .setting-row .toggle{align-self:flex-start;}

  /* modal footers stack full-width buttons on narrow screens */
  .modal-foot{flex-wrap:wrap;}
  .modal-foot .btn{flex:1 1 auto; justify-content:center;}
  .modal-head{padding:16px 18px;} .modal-body{padding:18px;} .modal-foot{padding:14px 18px;}

  /* account page */
  .account-banner{flex-wrap:wrap;}
  .account-tabs{width:100%;}
  .account-tabs button{flex:1;}
  .card-title-row{align-items:flex-start;}

  /* invoice */
  .inv-letterhead{flex-direction:column; gap:12px;}
  .inv-doc-title{text-align:left;}
  .inv-meta-grid{grid-template-columns:1fr;}
  .inv-totals{max-width:none;}

  .fit-card{padding:13px 14px;}
  .price-block{text-align:left;}
  .topbar-right{gap:6px;}
  .user-chip{padding:5px;}
}

@media (max-width:400px){
  .content{padding:16px 12px 46px;} .topbar{padding:10px 12px;}
  .kpi-value{font-size:21px;}
  .dw-title{font-size:16.5px;}
  .btn{padding:9px 14px; font-size:12.5px;}
  .account-banner{padding:18px 16px;}
  .account-tabs button{padding:8px 10px; font-size:12px;}
}

.overlay-scrim{position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:39; display:none;}
.overlay-scrim.show{display:block;}

/* ============ INVOICE DOCUMENT (letterhead-style tax invoice) ============ */
.inv-doc{ position:relative; padding:32px 34px 28px; background:#fff; }
.inv-doc-close{ position:absolute; top:14px; right:14px; }
.inv-letterhead{ display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:18px; border-bottom:3px solid var(--asphalt); margin-bottom:14px; }
.inv-brand{ display:flex; align-items:center; gap:12px; }
.inv-brand-mark{ width:42px; height:42px; border-radius:50%; border:2.5px solid var(--amber); position:relative; flex:none; }
.inv-brand-mark::before{ content:""; position:absolute; inset:7px; border-radius:50%; border:1.5px dashed var(--amber); opacity:.8; }
.inv-brand-name{ font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:.01em; color:var(--ink); }
.inv-brand-tag{ font-size:11px; color:var(--steel); font-weight:600; margin-top:2px; }
.inv-doc-title{ text-align:right; }
.inv-doc-title-label{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--amber-dark); }
.inv-doc-title-no{ font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--ink); margin-top:4px; }
.inv-business-line{ font-size:11px; color:var(--steel); text-align:center; margin-bottom:22px; line-height:1.6; }
.inv-meta-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; background:var(--concrete); border-radius:10px; padding:14px 16px; margin-bottom:20px; }
.inv-meta-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--steel); margin-bottom:4px; }
.inv-meta-value{ font-size:13px; font-weight:600; color:var(--ink); }
.inv-meta-sub{ font-size:11.5px; color:var(--steel); margin-top:2px; }
.inv-items-table{ width:100%; border-collapse:collapse; margin-bottom:4px; }
.inv-items-table thead th{ background:var(--asphalt); color:#fff; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; padding:10px 12px; text-align:left; }
.inv-items-table tbody td{ padding:11px 12px; border-bottom:1px solid var(--line-soft); font-size:13px; }
.inv-items-table tbody tr:last-child td{ border-bottom:1px solid var(--line); }
.inv-totals{ margin:16px 0 0; padding:14px 16px; background:var(--concrete); border-radius:10px; max-width:280px; margin-left:auto; }
.inv-totals-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--steel); padding:5px 0; }
.inv-totals-row.inv-totals-grand{ border-top:1.5px solid var(--line); margin-top:6px; padding-top:10px; font-size:15px; font-weight:700; color:var(--ink); }
.inv-footer{ margin-top:28px; padding-top:16px; border-top:1px solid var(--line); text-align:center; }
.inv-footer-thanks{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); margin-bottom:6px; }
.inv-footer-note{ font-size:10.8px; color:var(--steel-light); line-height:1.5; max-width:420px; margin:0 auto; }

@media print{
  .no-print{ display:none !important; }
  body *{ visibility:hidden; }
  #modal-invoice, #modal-invoice *{ visibility:visible; }
  #modal-invoice{ position:fixed; inset:0; background:#fff; padding:0; margin:0; display:block !important; align-items:flex-start; }
  #invoice-printable{ box-shadow:none; max-width:100%; max-height:none; margin:0; border-radius:0; }
  #invoice-printable .modal-foot, #invoice-printable .modal-close{ display:none !important; }
  .inv-items-table thead th{ background:var(--asphalt) !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body.printing-reports *{ visibility:hidden; }
  body.printing-reports #a-reports, body.printing-reports #a-reports *{ visibility:visible; }
  body.printing-reports #a-reports{ position:absolute; top:0; left:0; width:100%; padding:20px; }
  body.printing-reports .report-filter-bar, body.printing-reports .subnav{ display:none !important; }
}