:root{
  /* Gili Repairs — Garage Classic (Option 1), locked 2026-08-24 */
  --bg:#ffffff;
  --surface:#fffdf6;
  --surface-2:#ffffff;
  --ink:#2b2620;
  --ink-dim:#75695a;
  --steel:#4a5a6b;
  --steel-dark:#233248;
  --amber:#b8342b;
  --amber-dark:#8f281f;
  --danger:#7a1f1f;
  --success:#4c6b4c;
  --border:#d9cfae;
  --border-strong:#b7ab8c;
  --mustard:#b8860b;
  --mustard-bg:#e8b923;
  --radius:6px;
  --shadow:0 2px 6px rgba(35,30,20,0.12);
  --shadow-lg:0 12px 32px rgba(20,17,12,0.35);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
}
.display{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.03em;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}

/* Site-wide module switcher — separate from each module's own internal
   tabs. Flat fill, sits above header.topbar. Desktop: the toggle button
   is hidden and .site-nav-links renders as the always-visible horizontal
   row it's always been. Mobile (see the breakpoint below): a horizontal-
   scroll row of 5 labels doesn't work on a phone — some are only
   reachable by scrolling — so .site-nav-links collapses behind a
   "current module ▾" toggle instead. Same markup/JS either way; only
   the CSS display mode differs per viewport. */
.site-nav{background:#1a2536; padding:0 22px;}
.site-nav-inner{max-width:960px; margin:0 auto;}
.site-nav-toggle{display:none;}
.site-nav-links{display:flex; justify-content:center; gap:2px;}
.site-nav-link{
  display:flex; align-items:center; gap:6px;
  font-family:'Oswald',sans-serif; font-size:13.75px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:#93a1af; padding:9px 14px; text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent; border-radius:3px 3px 0 0;
}
.site-nav-link:hover{color:#fff; background:#233248;}
/* Filled background (not just a text-color swap) so the active module is
   unambiguous even if something overrides plain link text color. */
.site-nav-link.active{background:var(--amber); color:#fff8f2; border-bottom-color:var(--amber);}
.site-nav-link.active:hover{background:var(--amber);}
.site-nav-link .soon{
  background:var(--steel); color:#f2ede1; font-size:8.5px; padding:1px 5px; border-radius:2px; letter-spacing:0.04em;
}

header.topbar{
  background:var(--steel-dark);
  color:#f2ede1;
  padding:18px 22px 0 22px;
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:20;
}
.topbar-inner{max-width:960px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start;}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.brand .logo-mark{
  height:46px;
  width:auto;
  border-radius:6px;
  flex-shrink:0;
}
.brand h1{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:0.02em;
  margin:0;
  text-transform:uppercase;
  line-height:1.15;
}
.brand .tagline{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--amber);
  margin-top:2px;
}
.account-bar{display:flex; align-items:center; gap:10px; margin-bottom:14px;}

/* Consolidated header user menu (see js/accountMenu.js) — replaces what
   used to be separate "Account" link, name label, Sign Out, and (on
   RepairHub) "Task Bundles" buttons crowding the header, with one
   click-to-open dropdown. */
.account-menu{position:relative;}
.account-menu-trigger{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1px solid #4a5860; color:#f2ede1;
  font-family:'Inter',sans-serif; font-size:12.5px; padding:6px 12px;
  border-radius:4px; cursor:pointer;
}
.account-menu-trigger:hover{background:#3a4750;}
.account-menu-trigger .who{color:#c9b98f;}
.account-menu-caret{color:#c9b98f; font-size:10px; transition:transform .15s ease;}
.account-menu-trigger[aria-expanded="true"] .account-menu-caret{transform:rotate(180deg);}
.account-menu-dropdown{
  display:none; position:absolute; top:calc(100% + 6px); right:0; min-width:190px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:6px;
  box-shadow:var(--shadow-lg); overflow:hidden; z-index:50;
}
.account-menu-dropdown.open{display:block;}
.account-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none;
  border-bottom:1px solid var(--border); color:var(--ink); font-family:'Inter',sans-serif;
  font-size:13.5px; padding:11px 14px; cursor:pointer; text-decoration:none;
}
.account-menu-item:last-child{border-bottom:none;}
.account-menu-item:hover{background:var(--bg);}
.account-menu-item-danger{color:var(--danger);}
nav.tabs{display:flex; gap:2px;}
nav.tabs button{
  background:transparent;
  border:none;
  color:#b9c0c6;
  font-family:'Oswald',sans-serif;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:10px 18px;
  cursor:pointer;
  border-bottom:3px solid transparent;
}
nav.tabs button.active{color:#fff; border-bottom-color:var(--amber);}
nav.tabs button:hover{color:#fff;}

main{max-width:960px; margin:0 auto; padding:22px;}
.view{display:none;}
.view.active{display:block;}

.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap;}
.btn{
  font-family:'Oswald',sans-serif;
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--ink);
  cursor:pointer;
  transition:transform .06s ease, box-shadow .12s ease;
}
.btn:hover{box-shadow:var(--shadow);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:0.55; cursor:default; box-shadow:none; transform:none;}
.btn-primary{background:var(--amber); border-color:var(--amber-dark); color:#fff8f2; font-weight:600;}
.btn-primary:hover{background:var(--amber-dark); color:#fff;}
.btn-ghost{background:transparent; border-color:var(--border);}
.btn-danger-outline{background:transparent; border-color:var(--danger); color:var(--danger);}
.btn-sm{padding:6px 11px; font-size:11.5px;}

input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], select, textarea{
  font-family:'Inter',sans-serif;
  font-size:14px;
  padding:9px 11px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--surface-2);
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--amber);
  outline-offset:1px;
}
.search-wrap{position:relative; flex:1; min-width:180px;}
.search-wrap input{width:100%;}

select#typeFilter{min-width:150px;}

.group{margin-bottom:22px;}
.group-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--steel-dark);
  color:#f2ede1;
  font-family:'Oswald',sans-serif;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 12px 6px 10px;
  border-radius:3px 3px 0 0;
  position:relative;
}
.group-tag::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--amber); display:inline-block;}
.group-tag .count{color:#a9b2b9; font-family:'IBM Plex Mono',monospace; font-size:11px;}

.item-list{border:1px solid var(--border-strong); border-top:none; background:var(--surface); border-radius:0 4px 4px 4px; overflow:hidden;}
.item-row{
  display:grid;
  grid-template-columns:38px 1fr auto auto auto;
  gap:14px;
  align-items:center;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .1s ease;
}
.item-row:last-child{border-bottom:none;}
.item-row:hover{background:var(--surface-2);}
.swatch{
  width:34px; height:34px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  background:var(--bg);
  border:1px solid var(--border-strong);
  flex-shrink:0; margin-top:1px;
}
.item-id .brand-pn{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-dim);}
.item-id .name{font-weight:600; font-size:14.5px;}
.item-id .key-info{font-size:12px; color:var(--ink-dim); margin-top:1px;}
.col-qty{font-family:'IBM Plex Mono',monospace; text-align:right; font-size:14px; min-width:64px;}
.col-qty .unit{font-size:10.5px; color:var(--ink-dim); display:block; text-align:right;}
.col-cost{font-family:'IBM Plex Mono',monospace; text-align:right; font-size:14px; min-width:70px;}
.col-cost .label{font-size:10px; color:var(--ink-dim); display:block; text-transform:uppercase; letter-spacing:.04em;}
.oos-badge{
  background:var(--danger);
  color:#fff9f2;
  font-family:'Oswald',sans-serif;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:3px;
  white-space:nowrap;
  transform:rotate(-1deg);
  box-shadow:0 1px 0 rgba(0,0,0,0.2) inset;
}
.empty-note{padding:16px; color:var(--ink-dim); font-size:13px; text-align:center;}

/* Summary */
.stat-card{
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:20px 24px;
  margin-bottom:22px;
  display:flex; align-items:baseline; gap:14px;
}
.stat-card .num{font-family:'Oswald',sans-serif; font-size:36px; font-weight:600; color:var(--amber-dark);}
.stat-card .lbl{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); font-size:13px;}
.chart-card{background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); padding:20px 24px;}
.chart-card h3{margin:0 0 16px 0; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:14px; color:var(--ink-dim);}
.bar-row{display:grid; grid-template-columns:120px 1fr 76px; align-items:center; gap:10px; margin-bottom:12px;}
.bar-row .bar-label{font-size:13px; font-weight:500;}
.bar-track{background:var(--bg); border-radius:3px; height:18px; overflow:hidden; border:1px solid var(--border);}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--amber-dark), var(--amber)); border-radius:2px 3px 3px 2px;}
.bar-val{font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:right; color:var(--ink-dim);}

/* Modal */
.modal-overlay{
  display:none;
  position:fixed; inset:0; background:rgba(20,17,12,0.55);
  align-items:flex-start; justify-content:center;
  padding:34px 16px; overflow-y:auto; z-index:100;
}
.modal-overlay.active{display:flex;}
.modal{
  background:var(--surface-2);
  border-radius:8px;
  width:100%; max-width:600px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border-strong);
  overflow:hidden;
}
.modal-head{
  background:var(--steel-dark);
  color:#f2ede1;
  padding:14px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.modal-head .modal-head-titles{min-width:0;}
.modal-head h2{margin:0; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:16px; letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.modal-head .back-link{background:none; border:none; color:#c9b98f; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; padding:0 0 4px 0;}
.modal-head-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.modal-head-meta{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#d9cfae; white-space:nowrap;}
.modal-head button.close-x{background:none; border:none; color:#c9b98f; font-size:20px; cursor:pointer; line-height:1; flex-shrink:0;}
.modal-body{padding:20px 22px; max-height:72vh; overflow-y:auto;}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field{display:flex; flex-direction:column; gap:4px; margin-bottom:12px;}
.field.full{grid-column:1/-1;}
.field label{font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); font-weight:600;}
.stat-chip-row{display:flex; gap:10px; margin:14px 0 18px 0;}
.stat-chip{flex:1; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:9px 12px; text-align:center;}
.stat-chip .v{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px;}
.stat-chip .k{font-size:10px; text-transform:uppercase; color:var(--ink-dim); letter-spacing:0.05em;}
.stat-chip.oos{background:#f6e6e2; border-color:var(--danger);}
.stat-chip.oos .v{color:var(--danger);}

h3.section-h{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:13px; letter-spacing:0.06em;
  color:var(--ink-dim); margin:20px 0 10px 0; padding-top:14px; border-top:1px dashed var(--border-strong);
}
table.lots{width:100%; border-collapse:collapse; font-size:12.5px;}
table.lots th{
  text-align:left; font-family:'Oswald',sans-serif; font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--ink-dim); padding:6px 8px; border-bottom:1px solid var(--border-strong);
}
table.lots td{padding:7px 8px; border-bottom:1px solid var(--border); font-family:'IBM Plex Mono',monospace; font-size:12px;}
table.lots tr.depleted td{color:var(--ink-dim); text-decoration:line-through; text-decoration-color:var(--border-strong);}
table.lots td.notes-cell{font-family:'Inter',sans-serif; font-size:11.5px; max-width:150px; white-space:normal; text-decoration:none !important; color:var(--ink-dim);}
.lot-remove-btn{
  background:none; border:1px solid var(--border-strong); color:var(--danger);
  border-radius:4px; width:22px; height:22px; line-height:1; cursor:pointer; font-size:12px;
}
.lot-remove-btn:hover{background:var(--danger); color:#fff; border-color:var(--danger);}
table.lots tr.next-fifo td{background:#fbf0dd;}
.fifo-tag{background:var(--amber); color:#fff8f2; font-family:'Oswald',sans-serif; font-size:9px; padding:1px 5px; border-radius:2px; text-transform:uppercase; margin-left:5px;}

.lot-form{background:var(--bg); border:1px solid var(--border-strong); border-radius:6px; padding:14px; margin-top:10px;}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-top:4px;}
.checkbox-row input{width:auto;}
.checkbox-row label{font-size:12.5px; color:var(--ink); text-transform:none; letter-spacing:0; font-weight:400;}

.modal-foot{padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:10px; background:var(--surface);}
.modal-foot .foot-right{display:flex; gap:10px;}

.suggest-box{background:var(--surface); border:1px solid var(--border-strong); border-radius:5px; margin-top:4px; overflow:hidden;}
.suggest-item{padding:9px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border);}
.suggest-item:last-child{border-bottom:none;}
.suggest-item:hover{background:var(--bg);}
.suggest-item .sp{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-dim);}
.banner{
  font-size:12.5px; padding:9px 12px; border-radius:5px; margin-bottom:14px;
  background:#eaf0e6; border:1px solid var(--success); color:#3a5238;
}
.banner.error{background:#f6e6e2; border-color:var(--danger); color:var(--danger);}
.note{font-size:11.5px; color:var(--ink-dim); margin-top:-6px; margin-bottom:14px; line-height:1.4;}

/* Custom confirm dialog (replaces window.confirm, which sandboxed previews block) */
.confirm-overlay{
  position:fixed; inset:0; background:rgba(20,17,12,0.65);
  display:flex; align-items:center; justify-content:center; z-index:300; padding:20px;
}
.confirm-box{
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:8px;
  max-width:380px; padding:20px 22px; box-shadow:var(--shadow-lg);
}
.confirm-box p{margin:0 0 16px 0; font-size:14px; line-height:1.5;}
.confirm-actions{display:flex; justify-content:flex-end; gap:10px;}

/* Adjustment log */
table.adjlog{width:100%; border-collapse:collapse; font-size:12.5px;}
table.adjlog th{
  text-align:left; font-family:'Oswald',sans-serif; font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--ink-dim); padding:6px 8px; border-bottom:1px solid var(--border-strong);
}
table.adjlog td{padding:7px 8px; border-bottom:1px solid var(--border); font-size:12px;}
table.adjlog td.delta-pos{font-family:'IBM Plex Mono',monospace; color:var(--success); font-weight:600;}
table.adjlog td.delta-neg{font-family:'IBM Plex Mono',monospace; color:var(--danger); font-weight:600;}

/* ==========================================================================
   Epic 5 (Equipment) — additions on top of the shared components above
   ========================================================================== */

/* Group-by toggle (Equipment Type / Owner) */
.group-toggle{display:flex; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden;}
.group-toggle button{
  background:var(--surface-2); border:none; color:var(--ink-dim); font-family:'Oswald',sans-serif;
  font-size:12px; letter-spacing:0.05em; text-transform:uppercase; padding:9px 14px; cursor:pointer;
}
.group-toggle button + button{border-left:1px solid var(--border-strong);}
.group-toggle button.active{background:var(--steel-dark); color:#fff;}

.filter-note{font-size:11.5px; color:var(--ink-dim); margin:-4px 0 16px 0;}
.filter-note button{background:none; border:none; color:var(--amber-dark); font-weight:600; cursor:pointer; padding:0; font-size:11.5px; text-decoration:underline;}

/* Equipment list row — two-line layout, distinct from Epic 4's single-line
   grid .item-row since the content shape differs (owner/ID, dual status
   pills). Shares .item-list / .group / .group-tag / .swatch / .empty-note
   with Epic 4 as-is. */
.equipment-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s ease;
}
.equipment-row:last-child{border-bottom:none;}
.equipment-row:hover{background:var(--surface-2);}
.equipment-row .item-id{flex:1; min-width:0;}
.equipment-row .item-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.equipment-row .name{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.equipment-row .row-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim); white-space:nowrap; flex-shrink:0;}
.equipment-row .row-meta .owner{font-family:'Inter',sans-serif; margin-right:10px;}
.equipment-row .item-bottom{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:2px;}
.equipment-row .key-info{font-size:12px; color:var(--ink-dim);}
.equipment-row .row-badges{display:flex; align-items:center; gap:6px; flex-shrink:0;}

/* Status / repair-status pills */
.pill{
  display:inline-block; font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:0.05em;
  text-transform:uppercase; padding:3px 8px; border-radius:3px; white-space:nowrap; color:#fff8f2;
}
.pill-green{background:var(--success);}
.pill-amber{background:var(--amber);}
.pill-red{background:var(--danger);}
.pill-steel{background:var(--steel);}
.pill-gray{background:var(--ink-dim);}
.pill-navy{background:var(--steel-dark);}
.view-only-badge{margin-left:8px; vertical-align:middle;}
.shared-by-tag{margin-left:6px;}
.pill-black{background:#1c1a17;}

/* Reusable component: segmented chip selector — see chip-selector-component.md.
   Currently used for Fuel Type on the Equipment screen. */
.chip-group{display:flex; gap:8px;}
.chip{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase;
  padding:9px 6px; border-radius:var(--radius); cursor:pointer; background:var(--surface-2);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover{box-shadow:var(--shadow);}
.chip-emoji{font-size:14px;}
.chip-red{border:1.5px solid var(--danger); color:var(--danger);}
.chip-red.active{background:var(--danger); color:#fff8f2;}
.chip-yellow{border:1.5px solid #b8860b; color:#8a6508;}
.chip-yellow.active{background:#e8b923; color:#3d2f05;}
.chip-steel{border:1.5px solid var(--steel); color:var(--steel-dark);}
.chip-steel.active{background:var(--steel-dark); color:#fff8f2;}
.chip-green{border:1.5px solid var(--success); color:var(--success);}
.chip-green.active{background:var(--success); color:#fff8f2;}
.chip-amber{border:1.5px solid var(--amber); color:var(--amber-dark);}
.chip-amber.active{background:var(--amber); color:#fff8f2;}
.chip-navy{border:1.5px solid var(--steel-dark); color:var(--steel-dark);}
.chip-navy.active{background:var(--steel-dark); color:#f2ede1;}
.chip-gray{border:1.5px solid var(--ink-dim); color:var(--ink-dim);}
.chip-gray.active{background:var(--ink-dim); color:#fff8f2;}

.stat-chip.sum{background:#fbf0dd; border-color:var(--amber);}
.stat-chip.sum .v{color:var(--amber-dark);}

.suggest-item .stock{font-family:'IBM Plex Mono',monospace; font-size:11px; white-space:nowrap;}
.suggest-item .stock.oos{color:var(--danger); font-weight:600;}

/* Photo strip — real upload (Supabase Storage), unlike the mockup's emoji
   placeholders. Click a thumbnail to set it as cover; the small badge
   removes it. */
.photo-strip{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
.photo-thumb{
  width:56px; height:56px; border-radius:5px; border:2px solid var(--border-strong); background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; position:relative;
}
.photo-thumb img{width:100%; height:100%; object-fit:cover; border-radius:3px;}
.photo-thumb.is-cover{border-color:var(--amber);}
.photo-thumb .cover-tag{position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); background:var(--amber); color:#fff8f2; font-family:'Oswald',sans-serif; font-size:8px; padding:1px 4px; border-radius:2px; text-transform:uppercase; white-space:nowrap;}
.photo-thumb .photo-remove{
  position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--danger); color:#fff; border:1px solid var(--surface-2); font-size:10px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.photo-add{width:56px; height:56px; padding:0; border-radius:5px; border:2px dashed var(--border-strong); background:transparent; color:var(--ink-dim); font-family:inherit; font-size:20px; cursor:pointer;}

/* Reference files (service manuals, owner's manuals, specs) — Equipment
   modal only. Each row opens the file in a new tab via its signed URL. */
.reference-list{display:flex; flex-direction:column; gap:6px; margin-bottom:8px;}
.reference-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border);
  border-radius:6px; background:var(--bg); text-decoration:none; color:inherit;
}
.reference-row:hover{border-color:var(--border-strong); background:var(--surface);}
.reference-row .r-icon{font-size:18px; flex-shrink:0; width:20px; text-align:center;}
.reference-row .r-name{flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reference-row .r-remove{
  flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--danger); color:#fff;
  border:1px solid var(--surface-2); font-size:11px; line-height:1; display:flex; align-items:center;
  justify-content:center; cursor:pointer;
}

/* Parts list within Equipment modal */
.parts-list{display:flex; flex-direction:column; gap:8px;}
.part-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border);
  border-radius:6px; background:var(--bg); cursor:pointer;
}
.part-row:hover{border-color:var(--border-strong); background:var(--surface);}
.part-row .swatch{flex-shrink:0;}
.part-row .p-name{font-weight:600; font-size:13.5px;}
.part-row .p-sub{font-size:11.5px; color:var(--ink-dim); margin-top:1px;}
.part-row .p-assign-count{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-dim); text-align:right; white-space:nowrap;}
.part-row .p-assign-count .n{display:block; font-size:14px; font-weight:600; color:var(--ink);}

/* Assigned-inventory table on Part screen */
table.assign{width:100%; border-collapse:collapse; font-size:12.5px;}
table.assign th{text-align:left; font-family:'Oswald',sans-serif; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-dim); padding:6px 8px; border-bottom:1px solid var(--border-strong);}
table.assign td{padding:7px 8px; border-bottom:1px solid var(--border); font-family:'IBM Plex Mono',monospace; font-size:12px;}
table.assign td.desc-cell{font-family:'Inter',sans-serif; font-size:12px;}
.unassign-btn{background:none; border:1px solid var(--border-strong); color:var(--danger); border-radius:4px; width:22px; height:22px; line-height:1; cursor:pointer; font-size:12px;}
.unassign-btn:hover{background:var(--danger); color:#fff; border-color:var(--danger);}

/* ==========================================================================
   Epic 1 (RepairHub) — additions on top of the shared components above
   ========================================================================== */
.pill-mustard{background:var(--mustard-bg); color:#3d2f05;}
.chip-mustard{border:1.5px solid var(--mustard); color:#8a6508;}
.chip-mustard.active{background:var(--mustard-bg); color:#3d2f05;}
.chip-yellow{border:1.5px solid #b8860b; color:#8a6508;}
.chip-yellow.active{background:#e8b923; color:#3d2f05;}

.modal.modal-wide{max-width:760px;}

/* Draggable work order queue */
.queue-list{display:flex; flex-direction:column; gap:8px;}
.queue-hint{font-size:11.5px; color:var(--ink-dim); margin:-6px 0 14px 0; display:flex; align-items:center; gap:6px;}
.wo-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface);
  transition:background .1s ease, box-shadow .12s ease;
}
.wo-row:hover{box-shadow:var(--shadow);}
.wo-row.dragging{opacity:0.4;}
.wo-row.drag-over-top{border-top:3px solid var(--amber);}
.wo-row.drag-over-bottom{border-bottom:3px solid var(--amber);}
.drag-handle{
  flex-shrink:0; width:20px; text-align:center; color:var(--border-strong); font-size:16px;
  cursor:grab; align-self:stretch; display:flex; align-items:center; justify-content:center;
  letter-spacing:-2px; user-select:none;
}
.drag-handle:hover{color:var(--ink-dim);}
.wo-swatch{
  width:40px; height:40px; border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--bg); border:1px solid var(--border-strong); flex-shrink:0;
}
.wo-main{flex:1; min-width:0; cursor:pointer;}
.wo-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.wo-title{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wo-meta-right{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim); white-space:nowrap; flex-shrink:0; display:flex; align-items:center; gap:10px;}
.wo-meta-right .owner{font-family:'Inter',sans-serif;}
.wo-bottom{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:4px;}
.wo-sub{font-size:12px; color:var(--ink-dim); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.task-progress{display:flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:11px;}
.progress-dots{display:flex; gap:3px;}
.progress-dot{width:7px; height:7px; border-radius:50%; background:var(--border-strong);}
.progress-dot.todo{background:var(--steel-dark);}
.progress-dot.awaiting{background:var(--mustard-bg);}
.progress-dot.done{background:var(--success);}
.wo-cost{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; color:var(--amber-dark); flex-shrink:0;}

/* History tab */
.history-list{border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--radius); overflow:hidden;}
.history-row{
  display:flex; align-items:center; gap:14px; padding:11px 14px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .1s ease;
}
.history-row:last-child{border-bottom:none;}
.history-row:hover{background:var(--surface-2);}
.history-main{flex:1; min-width:0;}
.history-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.history-name{font-weight:600; font-size:14px;}
.history-meta{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-dim);}
.history-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:2px;}
.history-sub{font-size:12px; color:var(--ink-dim);}

/* Equipment identity strip within the Work Order modal / New Work Order flow */
.equip-strip{
  display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:16px;
  border:1px solid var(--border-strong); border-radius:6px; background:var(--bg); cursor:pointer;
}
.equip-strip:hover{box-shadow:var(--shadow);}
.equip-strip .equip-info{flex:1; min-width:0;}
.equip-strip .equip-name{font-weight:600; font-size:14.5px;}
.equip-strip .equip-sub{font-size:12px; color:var(--ink-dim); margin-top:1px;}
.equip-strip .open-hint{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--amber-dark); flex-shrink:0;}

/* Task list (inside the Work Order screen) */
.task-list{display:flex; flex-direction:column; gap:8px;}
.task-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border);
  border-radius:6px; background:var(--bg); cursor:pointer; transition:background .1s ease;
}
.task-row:hover{background:var(--surface);}
.task-row .task-status-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.task-status-dot.todo{background:var(--steel-dark);}
.task-status-dot.awaiting{background:var(--mustard-bg);}
.task-status-dot.done{background:var(--success);}
.task-desc{flex:1; min-width:0; font-size:13.5px; font-weight:500;}
.task-desc.is-done{color:var(--ink-dim); text-decoration:line-through; text-decoration-color:var(--border-strong);}
.task-inv-count{font-size:11px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
.task-cost{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-dim); flex-shrink:0; min-width:56px; text-align:right;}
.add-task-row{display:flex; gap:8px; margin-top:10px;}
.add-task-row input{flex:1;}

/* Work log */
.worklog-list{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.worklog-entry{border:1px solid var(--border); border-radius:5px; padding:9px 11px; background:var(--bg);}
.worklog-entry .wl-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px;}
.worklog-entry .wl-date{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-dim);}
.worklog-entry .wl-hours{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--amber-dark);}
.worklog-entry .wl-note{font-size:13px; line-height:1.4;}
.worklog-form{display:flex; flex-direction:column; gap:8px; border:1px dashed var(--border-strong); border-radius:6px; padding:12px;}
.worklog-form textarea{width:100%; min-height:56px; resize:vertical;}

/* Inventory-used assignments (mirrors Epic 5 Part-assignment pattern) */
.assign-list{display:flex; flex-direction:column; gap:8px; margin-bottom:8px;}
.assign-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:5px; background:var(--bg);}
.assign-row .a-name{flex:1; min-width:0; font-size:13px; font-weight:500;}
.assign-row .a-qty{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim); flex-shrink:0;}
.assign-row .a-cost{font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; flex-shrink:0; min-width:56px; text-align:right;}
.assign-row .a-remove{background:none; border:none; color:var(--danger); cursor:pointer; font-size:15px; flex-shrink:0; line-height:1;}

/* Task-bundle picker cards (New Work Order modal) */
.bundle-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px;}
.bundle-card{
  border:1.5px solid var(--border-strong); border-radius:6px; padding:11px 13px; cursor:pointer; background:var(--bg);
  transition:border-color .12s ease, background .12s ease;
}
.bundle-card:hover{background:var(--surface);}
.bundle-card.active{border-color:var(--amber); background:#fbf0dd;}
.bundle-card .bc-name{font-family:'Oswald',sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:0.03em; font-weight:600; margin-bottom:4px;}
.bundle-card .bc-count{font-size:11px; color:var(--ink-dim);}
.bundle-card.custom{display:flex; align-items:center; justify-content:center; text-align:center; color:var(--ink-dim);}

/* Admin: task bundle management */
.admin-bundle-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.admin-bundle-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border);
  border-radius:6px; background:var(--bg);
}
.admin-bundle-row .ab-name{flex:1; min-width:0; font-weight:600; font-size:13.5px;}
.admin-bundle-row .ab-count{font-size:11.5px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
.admin-bundle-row .ab-actions{display:flex; gap:6px; flex-shrink:0;}
.task-input-row{display:flex; gap:8px; margin-bottom:6px; align-items:center;}
.task-input-row input{flex:1;}
.task-input-row .ti-remove{background:none; border:none; color:var(--danger); cursor:pointer; font-size:16px; flex-shrink:0; line-height:1;}
.task-input-list{margin-bottom:8px;}

@media (max-width:640px){
  .bundle-grid{grid-template-columns:1fr;}
  .wo-meta-right{display:none;}
}

/* ==========================================================================
   Site-wide: account creation & authentication — additions
   ========================================================================== */
.card{background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:22px 24px; margin-bottom:18px;}
.card h2{margin:0 0 6px 0; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:16px; letter-spacing:0.03em;}
.card .sub{font-size:12.5px; color:var(--ink-dim); margin-bottom:16px; line-height:1.5;}
.divider{border:none; border-top:1px dashed var(--border-strong); margin:18px 0;}

.readonly-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--border);}
.readonly-row:last-child{border-bottom:none;}
.readonly-row .rr-label{font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim);}
.readonly-row .rr-value{font-family:'IBM Plex Mono',monospace; font-size:13.5px; font-weight:600; background:var(--steel-dark); color:#f2ede1; padding:4px 10px; border-radius:4px;}

.email-notice{
  display:flex; align-items:flex-start; gap:10px; background:#eef2ec; border:1px solid var(--success);
  border-radius:6px; padding:10px 12px; margin:12px 0; font-size:12.5px; color:#33472f; line-height:1.5;
}
.email-notice .icon{flex-shrink:0; font-size:15px;}
.badge-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  background:var(--amber); color:#fff8f2; border-radius:9px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; font-weight:600; margin-left:6px;
}
.required-banner{
  background:#fbf0dd; border:1px solid var(--amber); border-radius:6px; padding:10px 12px; margin-bottom:16px;
  font-size:12.5px; color:#5c4322; line-height:1.5;
}
table.accounts-table{width:100%; border-collapse:collapse; font-size:13px;}
table.accounts-table th{
  text-align:left; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:10.5px;
  letter-spacing:0.05em; color:var(--ink-dim); padding:6px 8px; border-bottom:1px solid var(--border-strong);
}
table.accounts-table td{padding:8px; border-bottom:1px solid var(--border);}
table.accounts-table td.mono{font-family:'IBM Plex Mono',monospace;}

/* Placeholder ("Coming Soon") module pages */
.coming-soon{padding:60px 20px; text-align:center; color:var(--ink-dim);}
.coming-soon h2{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink); margin-bottom:8px;}

/* ==========================================================================
   Responsive tables — every data table in the app (lots, adjustment log,
   assigned-inventory, pending-signups) can have more columns than a phone
   screen can show at a readable size. `display:block` on the table element
   itself (children keep their normal table layout) plus overflow-x lets
   the table scroll horizontally in place, at any viewport width — this
   is unconditional, not just under the mobile breakpoint, since it's
   harmless when the table already fits and only kicks in when it doesn't.
   ========================================================================== */
table.lots, table.adjlog, table.assign, table.accounts-table{
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
}
table.lots thead, table.adjlog thead, table.assign thead, table.accounts-table thead,
table.lots tbody, table.adjlog tbody, table.assign tbody, table.accounts-table tbody{display:table; width:100%;}

/* ==========================================================================
   Mobile (confirmed 2026-08-29: phone is the PRIMARY device this app is
   used on — see CLAUDE.md "Non-functional requirements"). Applies
   site-wide: every page shares this stylesheet, so this one block covers
   Inventory, Equipment, RepairHub, and Account Settings at once.
   ========================================================================== */
@media (max-width:640px){
  /* Site-nav module switcher: collapsed "current module ▾" toggle
     instead of the desktop horizontal row — see the comment above
     .site-nav for why. Light background + navy text here (unlike the
     dark desktop bar) per explicit feedback 2026-08-29: the original
     light-gray-on-navy text read as nearly invisible on a phone screen;
     navy-on-cream is the same high-contrast pairing used everywhere
     else in the app. Centered, with generous padding so nothing sits
     against the screen edge. */
  .site-nav{padding:0 14px;}
  .site-nav-toggle{
    display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
    background:var(--surface); border:none; color:var(--steel-dark); font-family:'Oswald',sans-serif;
    font-size:14px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    padding:14px 16px; cursor:pointer;
  }
  .site-nav-caret{color:var(--amber-dark); font-size:12px; transition:transform .15s ease;}
  .site-nav-toggle[aria-expanded="true"] .site-nav-caret{transform:rotate(180deg);}
  .site-nav-links{display:none; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); padding-bottom:4px;}
  .site-nav-links.open{display:flex;}
  .site-nav-link{
    border-bottom:1px solid var(--border); border-radius:0; padding:14px 16px;
    color:var(--steel-dark); justify-content:center; text-align:center;
  }
  .site-nav-link:hover{background:var(--bg);}
  .site-nav-link:last-child{border-bottom:none;}
  .site-nav-link.active{background:var(--amber); color:#fff8f2; border-bottom-color:var(--amber);}
  .site-nav-link.active:hover{background:var(--amber);}

  main{padding:14px;}
  .topbar{padding:14px 14px 0 14px;}
  .topbar-inner{flex-direction:column; align-items:stretch; gap:2px;}
  .brand{margin-bottom:10px;}
  .brand .logo-mark{height:38px;}
  .brand h1{font-size:18px;}
  .account-bar{flex-wrap:wrap; margin-bottom:10px; gap:8px;}
  nav.tabs{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  nav.tabs button{padding:10px 12px; font-size:12px; white-space:nowrap;}

  .toolbar{gap:8px;}
  .search-wrap{min-width:0; flex-basis:100%;}

  /* Every modal form field-grid — Equipment, Add Inventory, New Work
     Order, Task, Add New Equipment, Account Settings, etc. — was two
     fixed columns at every width, squeezing inputs unusably narrow on a
     phone. This single rule fixes every form in the app at once. */
  .field-grid{grid-template-columns:1fr;}
  .bundle-grid{grid-template-columns:1fr;}

  .modal-overlay{padding:0;}
  .modal{max-width:100%; min-height:100%; border-radius:0; border-left:none; border-right:none;}
  .modal-body{padding:16px; max-height:none;}
  .modal-foot{flex-wrap:wrap; padding:12px 16px;}
  .modal-foot .foot-right{flex-wrap:wrap; width:100%;}
  .modal-foot .foot-right .btn{flex:1;}
  .modal-head{padding:12px 14px;}

  .stat-chip-row{flex-wrap:wrap;}
  .stat-chip{flex:1 1 40%;}

  .bar-row{grid-template-columns:78px 1fr 60px; gap:6px;}

  /* Inventory list row: 6 real children in a fixed DOM order (swatch,
     item-id, qty, unit cost, total cost, then either an OOS badge or an
     empty placeholder div) laid out via a rigid 5-column desktop grid
     that can't fit a phone width. Reflow to 3 lines via CSS Grid areas,
     selecting children by position (all are <div>s, so :nth-of-type
     reliably means "Nth child") — no markup/JS changes needed. The OOS
     badge's row collapses to ~0 height on in-stock items, since the
     placeholder div in that slot is always empty. */
  .item-row{
    grid-template-columns:34px 1fr 1fr;
    grid-template-areas:
      "swatch name name"
      "empty qty unitcost"
      "badge badge totalcost";
    row-gap:4px; column-gap:8px;
  }
  .item-row > .swatch{grid-area:swatch;}
  .item-row > .item-id{grid-area:name;}
  .item-row > .col-qty{grid-area:qty; text-align:right;}
  .item-row > .col-cost:nth-of-type(4){grid-area:unitcost; text-align:right;}
  .item-row > .col-cost:nth-of-type(5){grid-area:totalcost; text-align:right;}
  .item-row > .oos-badge{grid-area:badge; justify-self:start;}
  .item-row > div:empty{display:none;}

  .chip-group{flex-wrap:wrap;}
  .chip{flex:1 1 40%;}

  .wo-row, .history-row{padding:10px;}
  .wo-title{max-width:60vw;}

  .card{padding:16px;}
}