:root{
  --bg:#0b0f17; --panel:#111826; --panel-2:#0e1726; --text:#e7eefc; --muted:#a0b3d1;
  --brand:#3b82f6; --brand-2:#22d3ee; --danger:#ef4444; --success:#10b981; --warning:#f59e0b;
  --card:#0f1729; --outline:#1f2a44; --ring:rgba(59,130,246,.3); --shadow:0 10px 24px rgba(0,0,0,.35);
}

/* -----------------------------
   Appointments (calendar + list)
------------------------------ */
/* Show ~7 hour rows at a time, then scroll (keeps the page tidy) */
.ap-timegrid{ display:flex; flex-direction:column; gap:10px; position:relative; max-height: 560px; overflow:auto; padding-right:4px; }
.ap-hour{ display:grid; grid-template-columns: 64px 1fr; gap:10px; align-items:stretch; }
.ap-hour-label{ font-size:12px; color: rgba(231,238,252,0.72); padding-top:6px; }
.ap-hour-lane{ border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:12px; padding:10px; min-height:54px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; align-content:start; position:relative; overflow:hidden; }
.ap-hour-lane:before{ content:''; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0)); pointer-events:none; }

.ap-hour-empty{ grid-column: 1 / -1; padding:6px 8px; border:1px dashed rgba(255,255,255,0.10); border-radius:12px; opacity:0.75; user-select:none; }

.ap-mini{ width:100%; text-align:left; border-radius:14px; padding:10px 10px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.ap-mini:active{ transform: scale(.99); }
.ap-mini-title{ font-weight:800; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-mini-sub{ font-size:11px; opacity:0.85; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-mini.more{ background: rgba(255,255,255,0.02); border-style:dashed; opacity:0.9; display:flex; align-items:center; justify-content:center; font-weight:700; }

.ap-color-1{ background: rgba(34, 211, 238, 0.14); }
.ap-color-2{ background: rgba(59, 130, 246, 0.14); }
.ap-color-3{ background: rgba(16, 185, 129, 0.14); }
.ap-color-4{ background: rgba(245, 158, 11, 0.14); }
.ap-color-5{ background: rgba(239, 68, 68, 0.14); }
.ap-color-6{ background: rgba(168, 85, 247, 0.14); }

.ap-card.ap-color-1, .ap-mini.ap-color-1{ border-color: rgba(34, 211, 238, 0.25); }
.ap-card.ap-color-2, .ap-mini.ap-color-2{ border-color: rgba(59, 130, 246, 0.25); }
.ap-card.ap-color-3, .ap-mini.ap-color-3{ border-color: rgba(16, 185, 129, 0.25); }
.ap-card.ap-color-4, .ap-mini.ap-color-4{ border-color: rgba(245, 158, 11, 0.25); }
.ap-card.ap-color-5, .ap-mini.ap-color-5{ border-color: rgba(239, 68, 68, 0.25); }
.ap-card.ap-color-6, .ap-mini.ap-color-6{ border-color: rgba(168, 85, 247, 0.25); }

}

.ap-block{ position:absolute; left:10px; right:10px; border-radius:12px; padding:8px 10px; cursor:pointer; box-shadow: 0 12px 30px rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.10); }
.ap-block-title{ font-weight:800; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-block-sub{ font-size:11px; opacity:0.85; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-st-pending{ background: rgba(245, 158, 11, 0.20); }
.ap-st-confirmed{ background: rgba(34, 197, 94, 0.20); }
.ap-st_in_service, .ap-st-in_service{ background: rgba(59, 130, 246, 0.20); }
.ap-st-missed{ background: rgba(239, 68, 68, 0.20); }
.ap-st-completed{ background: rgba(148, 163, 184, 0.20); }
.ap-st-canceled{ background: rgba(148, 163, 184, 0.10); opacity:0.75; }

.ap-list{ display:flex; flex-direction:column; gap:10px; }
.ap-card{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:16px; padding:12px; }
.ap-card-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* Appointments: list + details split */
.ap-split{ display:grid; grid-template-columns: 1.05fr .95fr; gap:12px; align-items:start; }
.ap-split-left{ min-width:0; }
.ap-split-right{ min-width:0; border-left:1px solid rgba(255,255,255,0.06); padding-left:12px; overflow:hidden; }
.ap-detail-title{ font-weight:800; font-size:14px; }
.ap-detail-kv{ display:grid; grid-template-columns: 110px 1fr; gap:10px; margin-top:10px; }
.ap-detail-k{ font-size:12px; color: rgba(231,238,252,0.70); }
.ap-detail-v{ font-size:13px; overflow-wrap:anywhere; word-break:break-word; }
.ap-detail-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ap-detail-actions .btn{ padding:8px 10px; border-radius:12px; }
.ap-card.is-selected{ outline: 2px solid rgba(59,130,246,0.45); box-shadow: 0 0 0 4px rgba(59,130,246,0.12); }

/* Appointment history timeline */
.ap-history{ display:flex; flex-direction:column; gap:12px; padding:10px 0; }
.ap-hitem{ display:grid; grid-template-columns: 14px 1fr; gap:12px; align-items:start; }
.ap-hdot{ width:10px; height:10px; border-radius:999px; margin-top:6px; background: rgba(59,130,246,0.65); box-shadow: 0 0 0 4px rgba(59,130,246,0.12); }
.ap-hmain{ min-width:0; }
.ap-htop{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ap-hdetail{ margin-top:6px; font-size:13px; overflow-wrap:anywhere; word-break:break-word; }

.ap-card-actions .btn{ white-space:nowrap; }

.ap-loadmore{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid rgba(255,255,255,0.06); border-radius:14px; margin-top:10px; background: rgba(255,255,255,0.02); }

.ap-services{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.ap-service{ border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:16px; padding:10px; text-align:left; color: inherit; cursor:pointer; }
.ap-service.active{ border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.12); }

.ap-slots{ display:flex; flex-wrap:wrap; gap:8px; }
.ap-slot{ border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:999px; padding:8px 10px; color:inherit; cursor:pointer; font-size:12px; }
.ap-slot.active{ border-color: rgba(59,130,246,0.6); background: rgba(59,130,246,0.15); }
.ap-slot:disabled{ opacity:0.45; cursor:not-allowed; }

.ap-cus-results{ display:flex; flex-direction:column; gap:8px; }
.ap-cus-hit{ text-align:left; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius:14px; padding:10px; color:inherit; cursor:pointer; }
.ap-cus-hit:hover{ border-color: rgba(255,255,255,0.14); }

@media (max-width: 980px){
  .kb-board{ grid-template-columns: 1fr !important; }
  .ap-hour{ grid-template-columns: 56px 1fr; }
  .ap-services{ grid-template-columns: 1fr; }
  .ap-split{ grid-template-columns: 1fr; }
  .ap-split-right{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,0.06); padding-top:12px; }
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 1200px at 90% -10%, rgba(34,211,238,.08), transparent 40%),
              radial-gradient(1000px 1000px at -20% 110%, rgba(59,130,246,.10), transparent 55%),
              var(--bg); color:var(--text);
  /* Keep the header truly fixed/sticky by preventing window scrolling.
     Only the main content area should scroll. */
  overflow:hidden}
a{color:inherit; text-decoration:none} .container{max-width:1200px; margin:0 auto; padding:24px}
.app-shell{display:grid; grid-template-columns:260px 1fr; height:100vh; overflow:hidden}
.sidebar{background:linear-gradient(180deg, var(--panel), var(--panel-2)); border-right:1px solid var(--outline);
  position:sticky; top:0; height:100vh; padding:18px 16px}
.brand{display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:16px;
  background:linear-gradient(135deg, rgba(59,130,246,.15), rgba(34,211,238,.10)); border:1px solid var(--outline);
  box-shadow:var(--shadow)}
.brand img{width:38px; height:38px} .brand h1{font-size:18px; margin:0; font-weight:800; letter-spacing:.3px}
.nav{margin-top:16px; display:flex; flex-direction:column; gap:6px}
.nav a{padding:12px 12px; border-radius:12px; display:flex; align-items:center; gap:10px; border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.04); border-color:var(--outline)}
.nav a.active{background:linear-gradient(90deg, rgba(59,130,246,.15), transparent); border-color:var(--outline)}
.main{height:100vh; min-width:0; overflow:hidden; display:flex; flex-direction:column}
.header{display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50;
  padding:16px 20px; background:rgba(15,23,41,.8); backdrop-filter: blur(8px); border-bottom:1px solid var(--outline)}
.header .right{display:flex; align-items:center; gap:10px}
/* Header standardization */
.header .left{display:flex; flex-direction:column; gap:2px; min-width:0}
.header .left strong{font-size:16px; line-height:1.2}
.header .left .muted{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.header .right{min-width:0}
.search{display:flex; align-items:center; gap:8px; background:#0d1423; border:1px solid var(--outline);
  padding:10px 12px; border-radius:12px; width:380px}
.search input{flex:1; background:transparent; border:0; outline:none; color:var(--text)}
.btn{padding:10px 14px; border-radius:12px; border:1px solid var(--outline); background:linear-gradient(180deg,#0e1726,#0b1220);
  color:var(--text); cursor:pointer; transition:.2s transform}
.btn.mini{padding:7px 10px; border-radius:10px}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(180deg,#2563eb,#1d4ed8); border-color:#1d4ed8}
.btn.danger{background:linear-gradient(180deg,#ef4444,#b91c1c); border-color:#b91c1c}
.btn.success{background:linear-gradient(180deg,#10b981,#059669); border-color:#059669}
.btn.warn{background:linear-gradient(180deg,#f59e0b,#d97706); border-color:#d97706}
.content{padding:20px 24px; min-width:0; overflow:auto; flex:1 1 auto; min-height:0}

/* ==============================
   Premium page transitions
   Prevents the "jump" feeling when switching pages by:
   1) hiding content while scroll is restored
   2) revealing with a consistent micro-transition
   ============================== */
html.page-loading .content{
  opacity:0;
  transform: translateY(8px);
  filter: blur(3px);
  pointer-events:none;
}
html.page-ready .content{
  opacity:1;
  transform:none;
  filter:none;
  transition: opacity 160ms ease, transform 180ms ease, filter 220ms ease;
}
@media (prefers-reduced-motion: reduce){
  html.page-loading .content,
  html.page-ready .content{
    transform:none;
    filter:none;
    transition:none;
  }
}

/* ==============================
   Responsive safety net
   Prevent horizontal overflow from taking over the sidebar on small screens.
   ============================== */
.main, .content{min-width:0}
.content{overflow-x:hidden}

/* Media elements should never exceed their containers */
img, video, canvas{max-width:100%; height:auto}

/* Tables: keep them from forcing the layout wider than the viewport */
.table{table-layout:fixed}
.table th,.table td{overflow-wrap:anywhere; word-break:break-word}

/* Prevent wide boards/cards from pushing under/over the sidebar */
.kb-board{min-width:0}
.card{min-width:0}
.grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-6{grid-column:span 6} .col-8{grid-column:span 8} .col-12{grid-column:span 12}
.card{background:var(--card); border:1px solid var(--outline); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px} .kpi{display:flex; align-items:center; justify-content:space-between}
.kpi .value{font-size:28px; font-weight:800} .kpi .muted{color:var(--muted); font-size:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px; border-bottom:1px solid var(--outline); text-align:left; font-size:14px}
.table th{color:var(--muted); font-weight:600}
.form{display:grid; gap:12px}
.input, select, textarea{width:100%; padding:10px 12px; background:#0b1220; border:1px solid var(--outline); border-radius:12px; color:var(--text)}
label{font-size:12px; color:var(--muted)}
.badge{padding:6px 10px; border-radius:999px; border:1px solid var(--outline); font-size:12px}
.badge.warn{background:rgba(245,158,11,.1); border-color:#7c5a15}
.badge.ok{background:rgba(16,185,129,.1); border-color:#1a734f}
.badge.danger{background:rgba(239,68,68,.1); border-color:#7a1c1c}
.footer{padding:20px; text-align:center; color:var(--muted); border-top:1px solid var(--outline); margin-top:40px}
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr} .sidebar{position:relative; height:auto} .search{width:100%}
  .grid{grid-template-columns:repeat(6,1fr)} .col-8,.col-6,.col-4{grid-column:span 6} .col-3{grid-column:span 3}

  /* Responsive header: wrap instead of overflowing on smaller screens */
  .header{flex-wrap:wrap; gap:12px; align-items:flex-start}
  .header .left{width:100%}
  .header .right{width:100%; flex-wrap:wrap; justify-content:space-between}
  .search{flex:1; min-width:240px}
}

@media (max-width:520px){
  .header .right{flex-direction:column; align-items:stretch}
  .btn{width:100%}
  .search{width:100%}
}

/* Smooth transitions */
body{opacity:0; transition:opacity .16s ease-in-out}
body.page-enter{opacity:1}
.fade-out{opacity:.0; transition:opacity .12s ease-in-out}

@media (prefers-reduced-motion: reduce){
  body{opacity:1 !important; transition:none !important}
  .fade-out{opacity:1 !important; transition:none !important}
}

/* DVI status chips */
.status-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #cfd6e6;font-size:12px}
.dot{width:10px;height:10px;border-radius:50%}
.dot.g{background:#16a34a}.dot.y{background:#f59e0b}.dot.r{background:#ef4444}
.badge.ok{border-color:#16a34a;color:#16a34a;background:#ecfdf5}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.photo-grid img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:1px solid #cfd6e6}

/* DVI editor: keep primary add action reachable (bottom-sticky inside the items card) */
.dvi-items-footer{
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: linear-gradient(180deg, rgba(11,18,32,0), rgba(11,18,32,0.92) 20%, rgba(11,18,32,0.98));
  border-top: 1px solid rgba(255,255,255,.08);
}

.status-chip.selected{border-color:#93c5fd;background:#0b1220; box-shadow:0 0 0 2px rgba(147,197,253,.2) inset}

/* subtle buttons for secondary actions */
.btn.subtle{background:transparent;border:1px solid rgba(255,255,255,.12);} .btn.subtle:hover{background:rgba(255,255,255,.06);} 

/* ==========================
   Insights (Reports) page
   ========================== */
.ins-head{display:flex; flex-direction:column; gap:2px}
.ins-title{font-size:18px; font-weight:800; letter-spacing:.2px}
.ins-sub{font-size:12px; color:var(--muted)}
.ins-head-actions{gap:12px}
.ins-range{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.ins-field{display:flex; flex-direction:column; gap:6px; min-width:160px}
.ins-field .input{height:40px}
.ins-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.ins-kpi-card{padding:14px}
.ins-kpi-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px}
.ins-kpi{border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:14px; padding:12px; min-height:86px}
.ins-kpi .label{font-size:12px; color:var(--muted)}
.ins-kpi .value{font-size:20px; font-weight:900; margin-top:6px}
.ins-kpi .hint{font-size:12px; color:rgba(231,238,252,.72); margin-top:6px}

.ins-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px}
.ins-card-head h3{margin:0}
.ins-mini{font-size:12px; color:var(--muted)}

.table-wrap{width:100%; overflow:auto; border-radius:14px}
.table-wrap .table{min-width:520px}

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

@media (max-width:980px){
  .ins-range{width:100%}
  .ins-field{min-width:140px}
}


/* --- Sidebar scroll behavior: hide on scroll down, show on scroll up --- */
.sidebar{ overflow-y:auto; will-change:transform; transition:transform .18s ease; }

/* ==========================
   Customers (Split View)
   ========================== */
.cus-split{display:grid; grid-template-columns:360px 1fr; gap:16px; align-items:start}
.cus-left{min-width:0}
.cus-right{min-width:0}
.cus-list{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.cus-list-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}

.cus-item{width:100%; text-align:left; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
  border-radius:16px; padding:12px; cursor:pointer; box-shadow:none; transition:.12s transform, .12s background}
.cus-item:hover{background:rgba(255,255,255,.05)}
.cus-item:active{transform:scale(.99)}
.cus-item.selected{border-color:rgba(59,130,246,.55); box-shadow:0 0 0 2px rgba(59,130,246,.22) inset}
.cus-item .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cus-item .title{font-weight:900; font-size:14px}
.cus-item .meta{margin-top:6px; color:rgba(231,238,252,.72); font-size:12px; display:flex; gap:8px; flex-wrap:wrap}
.cus-item .sep{opacity:.6}

.cus-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.cus-name{font-size:22px; font-weight:950; letter-spacing:.2px}
.cus-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:13px; display:flex; gap:8px; flex-wrap:wrap}
.cus-sub .sep{opacity:.6}
.cus-kpis{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.cus-actions{display:flex; gap:10px; align-items:center}

.cus-tabs{display:flex; gap:8px; margin-top:14px; border-bottom:1px solid var(--outline); padding-bottom:10px; flex-wrap:wrap}
.cus-tabs .tab{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); color:var(--text);
  border-radius:999px; padding:8px 12px; font-weight:700; font-size:13px; cursor:pointer}
.cus-tabs .tab.active{border-color:rgba(59,130,246,.55); background:rgba(59,130,246,.12)}

.cus-pane-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:12px; margin-bottom:10px; flex-wrap:wrap}

.veh-list{display:flex; flex-direction:column; gap:10px}
.veh-card{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:16px; padding:12px}
.veh-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap}
.veh-title{font-weight:900}
.veh-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:12px; line-height:1.35}
.veh-actions{display:flex; gap:8px}

.job-list{display:flex; flex-direction:column; gap:10px}
.job-row{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:16px; padding:12px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.job-title{font-weight:900}
.job-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:12px; line-height:1.35; max-width:720px}

/* dialogs */
.mb-dialog{border:none; border-radius:16px; background:#0b1220; color:#e7eefc; padding:0; max-width:720px; width:calc(100% - 24px)}
.mb-dialog::backdrop{background:rgba(0,0,0,.6)}

@media (max-width:980px){
  .cus-split{grid-template-columns:1fr}
}

/* ==========================
   Invoices (Split View)
   ========================== */
.inv-split{display:grid; grid-template-columns:380px 1fr; gap:16px; align-items:start}
.inv-left,.inv-right{min-width:0}
.inv-left-top{position:sticky;top:0;z-index:6}
.inv-left-top .card{backdrop-filter:saturate(1.2) blur(6px)}
.inv-list{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.inv-list-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap}

.inv-item{width:100%; text-align:left; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
  border-radius:16px; padding:12px; cursor:pointer; box-shadow:none; transition:.12s transform, .12s background}
.inv-item:hover{background:rgba(255,255,255,.05)}
.inv-item:active{transform:scale(.99)}
.inv-item.selected{border-color:rgba(59,130,246,.55); box-shadow:0 0 0 2px rgba(59,130,246,.22) inset}
.inv-item .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.inv-item .title{font-weight:950; font-size:14px}
.inv-item .meta{margin-top:6px; color:rgba(231,238,252,.72); font-size:12px; display:flex; gap:8px; flex-wrap:wrap}
.inv-item .sep{opacity:.6}

.inv-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.inv-no{font-size:22px; font-weight:950; letter-spacing:.2px}
.inv-sub{margin-top:4px; color:rgba(231,238,252,.72); font-size:13px; display:flex; gap:8px; flex-wrap:wrap}
.inv-sub .sep{opacity:.6}
.inv-kpis{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.inv-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.inv-panels{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.inv-panel{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:16px; padding:12px}
.inv-panel-title{font-weight:900; margin-bottom:8px}
.inv-totals .row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0}
.inv-veh{font-weight:900; line-height:1.2}

.inv-section{margin-top:14px}
.inv-section-title{font-weight:950; margin-bottom:8px}
.inv-items,.inv-payments{display:flex; flex-direction:column; gap:10px}
.inv-item-row{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:14px; padding:12px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.inv-pay-row{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:14px; padding:12px}

.inv-filter.active{border-color:rgba(59,130,246,.55); background:rgba(59,130,246,.12)}

@media (max-width:980px){
  .inv-split{grid-template-columns:1fr}
  .inv-panels{grid-template-columns:1fr}
}

/* ==========================
   Invoice detail tabs + More menu (click-safe)
   ========================== */
.ar-section-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;position:relative;z-index:5}
.ar-section-tabs .tab{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  font-weight:750;
  cursor:pointer;
  user-select:none;
  pointer-events:auto;
}
.ar-section-tabs .tab:hover{background:rgba(255,255,255,.05)}
.ar-section-tabs .tab.is-active{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.12)}
.ar-section-tabs .tab:focus{outline:2px solid rgba(59,130,246,.35);outline-offset:2px}

/* More actions dropdown (details/summary) */
details.ar-more{position:relative;z-index:10}
details.ar-more > summary{list-style:none;cursor:pointer}
details.ar-more > summary::-webkit-details-marker{display:none}
.ar-more-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:190px;
  padding:10px;
  display:none;
  flex-direction:column;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,16,30,.98);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
details.ar-more[open] .ar-more-menu{display:flex}
.ar-more-menu .btn{width:100%;justify-content:flex-start}

/* Safety: decorative pseudo elements should never block clicks */
.card::before,.card::after{pointer-events:none}
.app-shell{ transition:grid-template-columns .18s ease; }

/* When hidden: collapse sidebar column and slide sidebar out
   Desktop-only safety: on small screens we use a different layout (drawer/stack),
   and collapsing the grid column can cause the "blank/disaster" behavior. */
@media (min-width: 961px){
  body.sidebar-hidden .app-shell{ grid-template-columns:0 1fr; }
  body.sidebar-hidden .sidebar{ transform:translateX(-100%); }
  body.sidebar-hidden .main{ margin-left:0 !important; }
}



/* ==========================
   Professional Sidebar v2
   ========================== */
:root{
  --sb-width: 280px;
  --sb-collapsed: 84px;
  --sb-radius: 16px;
  --sb-pad: 14px;
}

.app-shell{
  grid-template-columns: var(--sb-width) 1fr;
}

/* Sidebar container */
.sidebar{
  padding: var(--sb-pad);
  overflow-y: auto;
  background: var(--panel);
}
.sidebar::-webkit-scrollbar{ width:10px; }
.sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

/* Brand */
.sidebar .brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: var(--sb-radius);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--outline);
  box-shadow: none;
}
.brand-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand img{ width:38px; height:38px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-name{ font-weight: 800; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub{ font-size:12px; opacity:.7; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Search */
.sb-search{ margin-top: 12px; }
.sb-search-input{
  width:100%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.02);
  color: inherit;
  outline: none;
}
.sb-search-input::placeholder{ opacity:.65; }
.sb-search-input:focus{ border-color: rgba(59,130,246,.55); }

/* Groups */
.nav{ margin-top: 14px; display:flex; flex-direction:column; gap: 12px; }
.sb-group{ padding: 0; }
.sb-group-title{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
  margin: 2px 6px 8px 6px;
}

/* Items */
.sb-group-items{ display:flex; flex-direction:column; gap: 6px; }
.nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  position: relative;
}
.nav-item:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}
.nav-item.active{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.22);
}
.nav-item.active::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(59,130,246,.9);
}

.nav-ic{ width: 18px; height: 18px; display:inline-flex; }
.nav-ic svg{ width:18px; height:18px; fill: currentColor; opacity:.9; }
.nav-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Footer */
.sb-footer{
  margin-top: auto;
  padding-top: 12px;
}

/* Sidebar AI Assistant button */
.sb-ai{ margin-top: 12px; }
.sb-ai-btn{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.12);
  color: inherit;
  cursor: pointer;
}
.sb-ai-btn:hover{ background: rgba(59,130,246,.16); }
.sb-ai-txt{ font-weight: 800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-ai-pill{
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.sb-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.02);
}
.sb-foot-label{ font-size:12px; opacity:.7; }
.sb-foot-value{ font-size:12px; font-weight:700; opacity:.9; }

/* Mobile drawer */
.sb-mobile-btn{
  display:none;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.02);
  color: inherit;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  margin-right: 10px;
}
.sb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 80;
}

@media (max-width: 900px){
  .app-shell{ grid-template-columns: 1fr; }
  .sb-mobile-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(var(--sb-width), 86vw);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 90;
    border-right: 1px solid var(--outline);
  }
  body.sb-open .sidebar{ transform: translateX(0); }
  body.sb-open .sb-overlay{ display:block; }
}

/* Works with your existing scroll hide/show class */
body.sidebar-hidden .sidebar{ transform: translateY(-12px); opacity:0; pointer-events:none; }
@media (max-width: 900px){
  body.sidebar-hidden .sidebar{ transform: translateX(-105%); opacity:1; pointer-events:auto; }
}

/* Careers form: file upload feedback */
.file-status{margin-top:8px;min-height:0}
.file-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.file-chip img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.10)}
.file-doc{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.file-name{font-weight:700;font-size:13px;line-height:1.1;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-sub{font-size:12px;opacity:.9;margin-top:2px}
.file-ok{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:rgba(34,197,94,.95);font-weight:900}


/* ===== Backup banner + toast (no-backend safety) ===== */
.backup-banner{
  margin: 14px 18px 0;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
.backup-banner .bb-title{ font-weight: 800; letter-spacing: .2px; }
.backup-banner .bb-sub{ font-size: .92rem; opacity: .9; margin-top: 2px; max-width: 70ch; }
.backup-banner .bb-actions{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.backup-banner .bb-btn{ white-space: nowrap; }

.toast-host{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast{
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  max-width: 320px;
}
.toast.show{ opacity: 1; transform: translateY(0); }

@media (max-width: 720px){
  .backup-banner{ margin: 10px 10px 0; flex-direction: column; align-items: stretch; }
  .backup-banner .bb-sub{ max-width: none; }
  .backup-banner .bb-actions{ justify-content: flex-start; }
}

/* --- Work Orders: Kanban + Slide Editor --- */
.kb-board{display:grid; grid-template-columns:repeat(3, minmax(240px, 1fr)); gap:14px; align-items:start}
@media (max-width: 980px){.kb-board{grid-template-columns:1fr}}
.kb-col{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px; min-height:200px}
.kb-col-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 2px 10px 2px}
.kb-col-title{font-weight:900; letter-spacing:0.2px}
.kb-col-meta{font-size:12px}
.kb-cards{display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 210px); overflow:auto; padding-right:6px}
.kb-cards::-webkit-scrollbar{width:10px}
.kb-card{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px; cursor:grab}
.kb-card:active{cursor:grabbing}
.kb-card-top{display:flex; gap:10px; align-items:center}
.kb-wo{font-weight:900; min-width:92px}
.kb-title{font-weight:900}
.kb-sub{font-size:12px}
.kb-badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.kb-badge{font-size:11px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10)}
.kb-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap}

.drawer{position:fixed; inset:0; z-index:50; pointer-events:none}
.drawer.open{pointer-events:auto}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.55); opacity:0; transition:opacity 160ms ease}
.drawer.open .drawer-backdrop{opacity:1}
.drawer-panel{position:absolute; top:0; right:-520px; height:100%; width:min(520px, 92vw); background:rgba(18,18,22,0.98); border-left:1px solid rgba(255,255,255,0.10); box-shadow:-24px 0 60px rgba(0,0,0,0.5); transition:right 200ms ease; display:flex; flex-direction:column}
.drawer.open .drawer-panel{right:0}
.drawer-body{padding:14px; overflow:auto}
.drawer-body .card{margin:0}

/* Completed Work Hub: overlay detail drawer (keeps list width stable) */
.cw-hub{position:relative}
.cw-detail-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity 160ms ease; z-index:4}
.cw-detail-backdrop.open{opacity:1; pointer-events:auto}
.cw-detail-overlay{position:absolute; top:0; right:0; bottom:0; width:min(420px, 92vw); transform:translateX(110%); opacity:0; pointer-events:none; transition:transform 220ms ease, opacity 200ms ease; z-index:5}
.cw-detail-overlay.open{transform:translateX(0); opacity:1; pointer-events:auto}
@media (min-width: 1000px){
  /* On large screens, keep the grid visible by reserving space via padding (no flex squeeze). */
  #completed-drawer .cw-body.detail-open .cw-left{padding-right:calc(min(420px, 40vw) + 12px)}
}
@media (max-width: 999px){
  /* On small screens, detail overlay becomes full width. */
  .cw-detail-overlay{width:100%}
}

/* Completed Work Hub — polish: pinned mode + smoother motion */
.cw-detail-overlay{will-change: transform, opacity}
.cw-detail-overlay{transition:transform 260ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease}
.cw-detail-backdrop{backdrop-filter: blur(2px)}
.cw-detail-overlay.open{box-shadow:-24px 0 60px rgba(0,0,0,0.55)}
.cw-detail-overlay.pinned{transform:translateX(0); opacity:1; pointer-events:auto}
#completed-drawer .cw-body.detail-open .cw-left{transition:padding-right 200ms ease}

@media (prefers-reduced-motion: reduce){
  .drawer-backdrop, .drawer-panel, .cw-detail-backdrop, .cw-detail-overlay, #completed-drawer .cw-body.detail-open .cw-left{transition:none !important}
}



/* Drag reschedule polish */
.ap-mini[draggable="true"]{ cursor: grab; }
.ap-mini.dragging{ opacity: 0.65; cursor: grabbing; }
.ap-hour-lane.drag-over{ outline: 2px solid rgba(59,130,246,0.55); outline-offset: 2px; }


/* =============================
   Cashier Split (Queue + Detail)
   ============================= */
.cashier-split-shell{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  align-items:start;
}
@media (max-width: 960px){
  .cashier-split-shell{ grid-template-columns: 1fr; }
}
.cashier-queue{
  position: sticky;
  top: 84px; /* header + padding */
  height: calc(100vh - 110px);
  overflow:auto;
}
@media (max-width: 960px){
  .cashier-queue{ position: relative; top: auto; height: auto; }
}
.cashier-detail{ min-width: 0; }
.cashier-detail-grid{
  /* Keep Cashier POS to a clean 2-column layout overall:
     Left = Queue, Right = Payment (with receipt stacked). */
  display:flex;
  flex-direction: column;
  gap: 12px;
}
/* (Previously this used a third column for the receipt panel.) */
.tab-btn.small{ padding: 6px 10px; font-size: 12px; border-radius: 999px; }
.queue-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.queue-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.queue-list{ display:flex; flex-direction:column; gap:10px; padding-bottom:12px; }
.queue-item{
  border: 1px solid #1f2a44;
  background: #0b1020;
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
}
.queue-item:hover{ border-color:#2b3a63; box-shadow: 0 10px 22px rgba(0,0,0,.20); transform: translateY(-1px); }
.queue-item[aria-selected="true"]{ border-color:#4b6bff; box-shadow: 0 0 0 2px rgba(75,107,255,.20) inset; }
.queue-item .row{ display:flex; justify-content:space-between; gap:10px; }
.queue-item .title{ font-weight:700; overflow-wrap:anywhere; }
.queue-item .sub{ opacity:.8; font-size: 12px; margin-top:4px; overflow-wrap:anywhere; }
.queue-item .tag{ font-size:12px; opacity:.9; padding:4px 8px; border-radius:999px; border:1px solid #1f2a44; background:#0d1423; white-space:nowrap; }

/* ------------------------------
   Appointments: inline validation
   ------------------------------ */
.ap-drawer .field-error{
  display:none;
  margin-top:6px;
  font-size:12px;
  line-height:1.2;
  color:#ffb4b4;
}
.ap-drawer .field-error.show{display:block;}
.ap-drawer .input.invalid,
.ap-drawer select.input.invalid,
.ap-drawer textarea.input.invalid{
  border-color: rgba(255, 106, 106, .65) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 106, .12);
}

/* ===============================
   Sidebar: pinned header + fixed footer
   Fixes header moving on Cashier/Appointments and prevents sidebar scroll hijack.
   =============================== */
.sidebar{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden !important; /* only nav area should scroll */
}

/* Header block (logo + search) pinned */
.sidebar .sidebar-top{
  position:sticky;
  top:0;
  z-index:20;
  background: var(--panel);
  padding-bottom: 10px;
  border-bottom: 1px solid transparent; /* premium separator handles the visible edge */
  backdrop-filter: blur(8px);
  overflow: visible;
}

/* Premium separator: hairline + soft depth + glass fade.
   It only appears after the nav scrolls (controlled by .nav-scrolled). */
.sidebar .sidebar-separator{
  height: 12px;
  margin-top: -1px;
  position: relative;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 19;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.22),
    rgba(0,0,0,.08) 40%,
    rgba(0,0,0,0)
  );
  backdrop-filter: blur(7px);
}
.sidebar .sidebar-separator::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.10);
}
.sidebar .sidebar-separator::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.sidebar.nav-scrolled .sidebar-separator{ opacity: 1; }

/* Nav becomes the scroll container */
.sidebar nav.nav{
  flex:1 1 auto;
  min-height:0;              /* required for flex+overflow */
  overflow-y:auto;
  padding-top: 10px;
  overscroll-behavior: contain;
}
.sidebar nav.nav::-webkit-scrollbar{ width:10px; }
.sidebar nav.nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

/* Keep AI button + footer always visible */
.sidebar .sb-ai,
.sidebar .sb-footer{
  flex:0 0 auto;
}

/* When sidebar is collapsed, keep stickiness sane */
body.sidebar-collapsed .sidebar .sidebar-top{
  padding-left: 10px;
  padding-right: 10px;
}