:root{
  --accent:#6C62E3;
  --bg:#121212;
  --panel:#1A1A1A;
  --panel2:#161616;
  --hover:#202020;
  --line:#2A2A2A;
  --white:#fff;
  --grey:#b0b0ad;
  --grey2:#8c8c89;
  --input-bg:#1E1E1E;
  --green:#7fce6a;
  --red:#e0796a;
  --amber:#e0b95a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--white);
  display:flex;
  height:100vh;
  overflow:hidden; /* the page itself never scrolls — .main does, below */
}

/* ---------- sidebar ---------- */
/* A plain flex column pinned to the full viewport height, not position:sticky —
   sticky's containing block is the body box, and once .main's content runs past
   one screen, sticky has nothing left inside that box to stick to and the
   sidebar visibly runs out and scrolls away. Making body itself the fixed-height,
   non-scrolling frame (overflow:hidden above) and letting .main scroll on its own
   means .side just sits there at full height regardless of how long a list gets. */
.side{
  width:230px;
  flex:0 0 230px;
  background:var(--accent);
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:2px;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  transition:width .15s,flex-basis .15s;
}
.side .side-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 4px 18px;
}
.side .logo{
  flex:1;
  min-width:0;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
}
.side .collapse-btn{
  flex:0 0 auto;
  width:26px;
  height:26px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  border-radius:6px;
  color:rgba(255,255,255,.8);
  cursor:pointer;
}
.side .collapse-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.side .collapse-btn svg{width:15px;height:15px;transition:transform .15s}
.side nav{display:flex;flex-direction:column;gap:2px}
.side a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 10px;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
}
.side a svg{flex:0 0 18px;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side a:hover{background:rgba(255,255,255,.12)}
.side a.on{background:rgba(255,255,255,.2);font-weight:600}
/* icon-only rail: toggled by JS (see /js/sidebar.js) adding .collapsed to .side */
.side.collapsed{width:62px;flex:0 0 62px}
.side.collapsed .logo,.side.collapsed .lbl{display:none}
.side.collapsed .side-head{justify-content:center}
.side.collapsed .collapse-btn svg{transform:rotate(180deg)}
.side.collapsed a{justify-content:center;padding:10px}

/* ---------- main content ---------- */
/* A flex COLUMN, not a scrolling block: fixed-size content (the title, a card,
   a search box) keeps its natural height, and each list gets to fill whatever
   room is left and scroll on its own — see .table-wrap below. No max-width: a
   fixed cap here was leaving a dead strip of empty background on wide monitors
   instead of letting tables use the screen. */
.main{
  flex:1;
  min-width:0;
  height:100vh;
  overflow:hidden;
  padding:32px 44px 28px;
  display:flex;
  flex-direction:column;
}
.main>*{flex:0 0 auto}

h1{font-size:24px;margin:0 0 6px;letter-spacing:-.3px}
h2{font-size:13px;color:var(--grey2);margin:28px 0 12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
p{color:var(--grey)}

/* ---------- page header row (title + actions) ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}

/* ---------- summary stat cards ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stat-card .k{font-size:24px;font-weight:700;letter-spacing:-.3px}
.stat-card .l{color:var(--grey2);font-size:12px;margin-top:4px}

/* ---------- tables ---------- */
/* Each table scrolls in its own box instead of dragging the whole page down
   with it — a .table-wrap is a flex item that grows to fill whatever space
   .main has left after its fixed-size siblings (the title, a card, a search
   box), then scrolls internally once its rows run past that. min-height:0
   overrides flexbox's default (a flex item won't shrink below its content
   size otherwise), which is what actually lets the scrollbar appear instead
   of the box just growing to fit every row. th's position:sticky now pins
   against this element, since it's the nearest scrolling ancestor. */
.table-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  flex:1 1 auto;
  min-height:140px;
  overflow:auto;
}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
th{
  color:var(--grey2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  background:var(--panel2);
  position:sticky;
  top:0;
}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--hover)}

/* ---------- forms / inputs ---------- */
input,select,textarea{
  background:var(--input-bg);
  border:1px solid var(--line);
  color:var(--white);
  padding:9px 11px;
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
button{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
button:hover{filter:brightness(1.08)}
button.ghost{background:var(--input-bg);color:var(--grey)}
button.ghost:hover{color:var(--white);filter:none;background:var(--hover)}
form div{margin-bottom:12px}
label{display:block;font-size:12.5px;color:var(--grey);margin-bottom:5px}

/* ---------- cards / panels ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:18px}

/* ---------- two-column layout for wide screens (detail pages) ---------- */
.split{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
}

/* ---------- row-list (card rows instead of a dense table) ---------- */
/* A section like "Vehicles" or "Quotes": a heading with a count and an
   optional action, a search box, then a list of clickable rows — each row a
   small label/date line, a bold title, a muted subtitle, and a trailing
   chevron. Used where a record's own sub-lists are more "things to open" than
   "a grid of columns to compare" — the plain <table> stays for genuinely
   tabular data (Invoices' numeric columns, the top-level Invoices list). */
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.section-head h2{margin:0;flex:1}
.section-head .count{color:var(--grey2);font-weight:600;font-size:13px}
.search-box{position:relative;margin-bottom:10px}
.search-box svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;stroke:var(--grey2);fill:none;stroke-width:2;
  pointer-events:none;
}
.search-box input{width:100%;padding-left:36px}
.rowlist-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  flex:1 1 auto;
  min-height:120px;
  overflow:auto;
}
.rowlist{display:flex;flex-direction:column}
.rlrow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.rlrow:last-child{border-bottom:none}
.rlrow:hover{background:var(--hover)}
.rlrow .rl-main{flex:1;min-width:0}
.rlrow .rl-date{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.03em;margin-bottom:3px}
.rlrow .rl-title{font-size:14.5px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlrow .rl-sub{color:var(--grey);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlrow .rl-chev{flex:0 0 auto;color:var(--grey2);font-size:18px;line-height:1}
.rowlist-wrap .empty-row{padding:24px 16px;color:var(--grey2);text-align:center;font-size:13px}

/* two side-by-side sections on wide screens (e.g. Vehicles next to Quotes),
   stacking on narrow ones */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;flex:1 1 auto;min-height:0}
.cols-2>div{display:flex;flex-direction:column;min-height:0}
@media (max-width:900px){
  .cols-2{grid-template-columns:1fr;flex:0 0 auto}
}

/* ---------- pills / status badges ---------- */
.pill{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600}
.pill.green{background:rgba(127,206,106,.15);color:var(--green)}
.pill.red{background:rgba(224,121,106,.15);color:var(--red)}
.pill.amber{background:rgba(224,185,90,.15);color:var(--amber)}
.pill.grey{background:rgba(140,140,137,.15);color:var(--grey)}

@media (max-width:760px){
  /* stack instead of side-by-side, and let the whole page scroll normally —
     the fixed-height split-pane layout above is a desktop-only affordance */
  body{flex-direction:column;height:auto;overflow:visible}
  .side{width:100%;flex:none;height:auto;overflow-y:visible}
  .main{height:auto;overflow-y:visible;padding:20px 18px 40px;max-width:none}
  /* the icon-only rail is a desktop affordance — always show full labels on mobile */
  .side.collapsed{width:100%;flex:none}
  .side.collapsed .logo,.side.collapsed .lbl{display:block}
  .side.collapsed .side-head{justify-content:space-between}
  .side.collapsed a{justify-content:flex-start;padding:9px 10px}
  .side .collapse-btn{display:none}
}