/* ==========================================================================
   GCC Asset Command — 3. Components
   Cards, buttons, forms, tables, badges, menus, modals, toasts, empties.
   ========================================================================== */

/* ------------------------------------------------------------------ Card -- */
.card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-hd {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--card-pad) var(--card-pad) 0;
  min-height: 0;
}
.card-hd + .card-bd { padding-top: var(--sp-3); }
.card-hd-title { min-width: 0; flex: 1 1 auto; }
.card-hd h2, .card-hd h3 {
  font-size: var(--fs-md); font-weight: 650; letter-spacing: -.008em;
  display: flex; align-items: center; gap: .4375rem; min-width: 0;
}
.card-hd h2 .i, .card-hd h3 .i { color: var(--ink-faint); width: 16px; height: 16px; }
.card-hd-sub { font-size: var(--fs-2xs); color: var(--ink-muted); margin-top: .125rem; }
.card-hd-act { flex: none; display: flex; align-items: center; gap: var(--sp-1); }
/* Lane headers in a side-by-side board: a subtitle that wraps makes just
   that one card's header taller, so its list starts lower than its
   row-mates'. Keep these to one line and let overflow ellipsize instead. */
.req-board .card-hd-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-bd { padding: var(--card-pad); flex: 1 1 auto; min-width: 0; }
.card-bd-flush { padding: 0; }
/* Short content (a donut) in a card stretched to its row: center it in the
   space rather than leaving it stranded at the top. */
.card-bd-center { display: grid; align-content: center; }
.card-ft {
  padding: .625rem var(--card-pad);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-muted);
  display: flex; align-items: center; gap: var(--sp-2);
}
.card-ft a { font-weight: 550; }
.card-link {
  text-decoration: none; color: inherit;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease);
}
.card-link:hover {
  text-decoration: none; border-color: var(--line-strong);
  box-shadow: var(--shadow-2); transform: translateY(-1px);
}
.card-accent { border-top: 3px solid var(--accent); }

/* Section rule — a lightweight header between grids.
   NOT sticky: .table thead th is already sticky at top:0, so a sticky section
   pins to the same offset and covers the column headers on every page that has
   both (equipment list, invoice ledger, audit, users). Making both work needs
   an offset that is only correct while a section is pinned. */
.section {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-7) 0 var(--sp-3);
}
.section:first-child { margin-top: 0; }
.section h2 { font-size: var(--fs-base); font-weight: 650; }
.section .rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.section-note { font-size: var(--fs-2xs); color: var(--ink-muted); }

/* --------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  min-height: var(--control-h); padding: 0 .875rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 550; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .13s var(--ease), border-color .13s var(--ease),
              color .13s var(--ease), box-shadow .13s var(--ease), transform .08s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn .i { width: 16px; height: 16px; }

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn-default { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-default:hover { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }

.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-3); color: var(--ink); }

.btn-danger { background: var(--crit); color: #fff; border-color: var(--crit); }
.btn-danger:hover { background: var(--crit-ink); border-color: var(--crit-ink); color: #fff; }

.btn-ok { background: var(--ok-ink); color: #fff; border-color: var(--ok-ink); }
.btn-ok:hover { filter: brightness(1.08); color: #fff; }

.btn-danger-quiet { background: transparent; color: var(--crit-ink); border-color: var(--crit-line); }
.btn-danger-quiet:hover { background: var(--crit-wash); color: var(--crit-ink); }

.btn-dark { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-dark:hover { background: var(--brand-2); color: #fff; }

.btn-sm { min-height: 30px; padding: 0 .625rem; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.btn-sm .i { width: 14px; height: 14px; }
.btn-lg { min-height: 44px; padding: 0 1.25rem; font-size: var(--fs-base); }
.btn-icon { padding: 0; width: var(--control-h); }
.btn-sm.btn-icon { width: 30px; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.btn-group .btn.on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); z-index: 1; }

/* Segmented control (view switches, density) */
.seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface-3); border-radius: var(--r-sm);
}
.seg button, .seg a {
  display: inline-flex; align-items: center; gap: .375rem;
  height: calc(var(--control-h) - 6px); padding: 0 .625rem;
  border-radius: calc(var(--r-sm) - 1px);
  font-size: var(--fs-xs); font-weight: 550; color: var(--ink-muted);
  text-decoration: none; white-space: nowrap;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.seg button:hover, .seg a:hover { color: var(--ink); text-decoration: none; }
.seg .on {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
}
.seg .i { width: 15px; height: 15px; }

/* ----------------------------------------------------------------- Forms -- */
.field { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; }
.field-row {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: .3125rem;
}
.label .req { color: var(--crit-ink); font-weight: 700; }
.hint { font-size: var(--fs-2xs); color: var(--ink-muted); }
.err { font-size: var(--fs-2xs); color: var(--crit-ink); font-weight: 550; }

.input, .select, .textarea {
  width: 100%; min-height: var(--control-h);
  padding: 0 .6875rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.4;
  transition: border-color .13s var(--ease), box-shadow .13s var(--ease);
}
.textarea { padding: .5rem .6875rem; min-height: 88px; resize: vertical; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-2); color: var(--ink-muted); cursor: not-allowed;
}
.input.bad, .select.bad, .textarea.bad { border-color: var(--crit); }

/* iOS Safari zooms the page on focus for any input under 16px — bump to the
   zoom threshold on phones instead of shrinking every form for desktop's sake. */
@media (max-width: 640px) {
  .input, .select, .textarea { font-size: 16px; }
  .input-sm, .select-sm { font-size: 16px; }
}

.select {
  appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .625rem center; background-size: 15px;
}
.input-sm, .select-sm { min-height: 30px; font-size: var(--fs-xs); padding-left: .5rem; padding-right: .5rem; }
.select-sm { padding-right: 1.75rem; background-position: right .4375rem center; background-size: 13px; }

/* Input with a leading icon */
.input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.input-wrap > .i {
  position: absolute; left: .625rem; width: 16px; height: 16px;
  color: var(--ink-faint); pointer-events: none;
}
.input-wrap > .input { padding-left: 2.125rem; }
.input-wrap .clear {
  position: absolute; right: .375rem; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--r-xs); color: var(--ink-muted);
}
.input-wrap .clear:hover { background: var(--surface-3); color: var(--ink); }
.input-wrap .clear > span { display: flex; }

/* Prefix/suffix affix group */
.affix { display: flex; min-width: 0; }
.affix > .input { border-radius: 0; }
.affix > :first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.affix > :last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.affix > * + * { margin-left: -1px; }
.affix-txt {
  display: inline-flex; align-items: center; padding: 0 .625rem;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--ink-muted); font-size: var(--fs-sm); white-space: nowrap;
}

/* Checkbox / radio / switch */
.check { display: inline-flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: .1875rem; flex: none; }
.check span { font-size: var(--fs-sm); color: var(--ink-2); }

.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 36px; height: 20px; flex: none; border-radius: var(--r-pill);
  background: var(--line-strong); position: relative;
  transition: background-color .16s var(--ease);
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: var(--r-pill);
  background: #fff; box-shadow: var(--shadow-1);
  transition: transform .16s var(--spring);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* Filter bar — one row above everything it scopes */
.filters {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: .625rem .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-bottom: var(--gap);
}
.filters .grow { flex: 1 1 220px; }
.filters-count {
  font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Tables -- */
.table-wrap {
  overflow-x: auto; overflow-y: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.table { width: 100%; font-size: var(--fs-md); }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  padding: .5rem .75rem;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-muted);
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.table tbody td {
  padding: var(--row-py) .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .1s var(--ease); }
.table-hover tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num { text-align: right; }
.table .shrink { width: 1%; white-space: nowrap; }
/* Give the identifying first column real room — long asset names were
   wrapping to four lines and tripling the row height. */
.table-assets { min-width: 60rem; }
.table-assets tbody td:first-child { min-width: 15rem; }
.table td .i { color: var(--ink-faint); }
.table-fixed { table-layout: fixed; }
/* :not(.btn) so a button's own color (e.g. .btn-primary's white) always wins
   over this rule's higher specificity, even inside a table cell. */
.table a:not(.btn) { color: var(--ink); font-weight: 550; }
.table a:not(.btn):hover { color: var(--accent-ink); }
.row-act { display: flex; align-items: center; gap: .25rem; justify-content: flex-end; }
/* Secondary row icons recede until the row is hovered; a primary action in
   the row (e.g. "Log it") is the point of the row and always reads full. */
.table tbody tr .row-act .btn-quiet { opacity: .5; transition: opacity .12s var(--ease); }
.table tbody tr:hover .row-act .btn-quiet,
.table tbody tr:focus-within .row-act .btn-quiet { opacity: 1; }

/* Sortable headers (progressive enhancement via table.js) */
th.sort { cursor: pointer; user-select: none; }
th.sort:hover { color: var(--ink); }
th.sort::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 0; height: 0; margin-left: .3125rem;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: .3;
}
th.sort.asc::after  { border-top: 0; border-bottom: 4px solid var(--accent); opacity: 1; }
th.sort.desc::after { border-top-color: var(--accent); opacity: 1; }

/* Definition list (detail pages) */
.dl {
  display: grid; grid-template-columns: minmax(120px, max-content) 1fr;
  gap: .5rem var(--sp-4); align-items: baseline;
}
.dl dt { font-size: var(--fs-xs); color: var(--ink-muted); }
.dl dd { font-size: var(--fs-sm); color: var(--ink); min-width: 0; word-break: break-word; }
.dl-stack { display: grid; grid-template-columns: 1fr; gap: 0; }
.dl-stack > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.dl-stack > div:last-child { border-bottom: 0; }
.dl-stack dt { font-size: var(--fs-sm); color: var(--ink-muted); flex: none; }
.dl-stack dd { font-size: var(--fs-sm); font-weight: 550; text-align: right; min-width: 0; }

/* ---------------------------------------------------- Badges & indicators -- */
.badge {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5rem; border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: 600; line-height: 1.35;
  white-space: nowrap; border: 1px solid transparent;
}
.badge .i { width: 13px; height: 13px; }
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: currentColor; flex: none;
}
.badge.no-dot::before, .badge:has(.i)::before { display: none; }

.badge-ok      { background: var(--ok-wash);      color: var(--ok-ink);      border-color: var(--ok-line); }
.badge-warn    { background: var(--warn-wash);    color: var(--warn-ink);    border-color: var(--warn-line); }
.badge-serious { background: var(--serious-wash); color: var(--serious-ink); border-color: var(--serious-line); }
.badge-crit    { background: var(--crit-wash);    color: var(--crit-ink);    border-color: var(--crit-line); }
.badge-info    { background: var(--accent-wash);  color: var(--accent-ink);  border-color: var(--accent-line); }
.badge-neutral { background: var(--neutral-wash); color: var(--neutral-ink); border-color: var(--neutral-line); }

.badge-solid-ok   { background: var(--ok-ink);   color: #fff; }
.badge-solid-crit { background: var(--crit);     color: #fff; }
.badge-solid-info { background: var(--accent);   color: #fff; }

/* Pill — a quieter, rounder tag */
.pill {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .125rem .5rem; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
  font-size: var(--fs-2xs); font-weight: 550; white-space: nowrap;
}
.pill .i { width: 12px; height: 12px; }
.pill .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* Category chip — color identifies the equipment type */
.cat {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: var(--fs-xs); color: var(--ink-2); min-width: 0;
}
.cat .swatch {
  width: 9px; height: 9px; border-radius: 2px; flex: none;
  background: var(--cat, var(--neutral));
}

/* Avatar / monogram */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .01em;
}
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-sm); }

/* Icon medallion — leading glyph on list rows and empty states */
.med {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--surface-3); color: var(--ink-muted);
}
.med .i { width: 17px; height: 17px; }
.med-ok      { background: var(--ok-wash);      color: var(--ok-ink); }
.med-warn    { background: var(--warn-wash);    color: var(--warn-ink); }
.med-serious { background: var(--serious-wash); color: var(--serious-ink); }
.med-crit    { background: var(--crit-wash);    color: var(--crit-ink); }
.med-info    { background: var(--accent-wash);  color: var(--accent-ink); }
.med-sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.med-sm .i { width: 15px; height: 15px; }

/* Category art plate — the 256px category renders were being shown at 22px
   inside a 34px medallion, which read as a stray dot next to a 24px figure.
   The plate is sized to anchor a 280px-wide type tile, and the SVG fallback
   is matched to the artwork's optical size so tiles stay even either way. */
.cat-art {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cat, var(--neutral)) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cat, var(--neutral)) 26%, transparent);
  color: var(--cat, var(--ink-muted));
}
.cat-art img { width: 44px; height: 44px; object-fit: contain; }
.cat-art .i { width: 28px; height: 28px; }
/* Row thumbnail — the equipment table showed only a 9px colour swatch. */
.cat-art-sm { width: 34px; height: 34px; border-radius: var(--r-sm); }
.cat-art-sm img { width: 26px; height: 26px; }
.cat-art-sm .i { width: 17px; height: 17px; }
/* Asset detail hero — what the machine actually is, at a glance. */
.cat-art-lg { width: 88px; height: 88px; border-radius: var(--r-lg); }
.cat-art-lg img { width: 68px; height: 68px; }
.cat-art-lg .i { width: 42px; height: 42px; }
html[data-density="compact"] .cat-art-lg { width: 68px; height: 68px; }
html[data-density="compact"] .cat-art-lg img { width: 52px; height: 52px; }
/* Tiles stretch to the row height, so the status bar sits on the floor of the
   tile instead of trailing whatever the title's wrap did above it. */
.cat-tile-foot { margin-top: auto; padding-top: var(--sp-3); }

html[data-density="compact"] .cat-art { width: 46px; height: 46px; }
html[data-density="compact"] .cat-art img { width: 36px; height: 36px; }

/* --------------------------------------------------------------- Listings -- */
/* The "panel list" — the repeated row shape inside dashboard cards. */
.list { display: flex; flex-direction: column; }
.list > li, .list > a, .list > .item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: .5625rem 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; min-width: 0;
}
.list > :last-child { border-bottom: 0; }
.list > a:hover { text-decoration: none; }
.list-hover > a { margin: 0 calc(var(--card-pad) * -1); padding-left: var(--card-pad); padding-right: var(--card-pad); }
.list-hover > a:hover { background: var(--surface-2); }
/* Cards, not rows — each item is its own tile so a lane of requests reads as
   a stack sitting on the column, instead of text rules blending into it. */
.list-cards { gap: var(--sp-2); }
.list-cards > a, .list-cards > li {
  border-bottom: 0; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: var(--sp-3);
}
.list-cards > a:hover { background: var(--surface-3); border-color: var(--line-strong); }
.item-main { min-width: 0; flex: 1 1 auto; }
.item-title {
  display: block;
  font-size: var(--fs-sm); font-weight: 550; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-sub {
  font-size: var(--fs-2xs); color: var(--ink-muted); margin-top: .0625rem;
  display: flex; align-items: center; gap: .375rem; flex-wrap: wrap;
}
.item-sub .sep { color: var(--line-strong); }
.item-end { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.item-end .v { font-size: var(--fs-sm); font-weight: 600; }
.item-end .k { font-size: var(--fs-3xs); color: var(--ink-muted); }

/* --------------------------------------------------------------- Menu pop -- */
.pop {
  position: absolute; z-index: 70; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
  padding: .25rem;
  animation: pop-in .14s var(--ease-out) both;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.pop-r { right: 0; top: calc(100% + 6px); }
.pop-l { left: 0; top: calc(100% + 6px); }
.pop-hd {
  padding: .4375rem .5625rem .3125rem; font-size: var(--fs-2xs);
  color: var(--ink-muted); font-weight: 500;
}
.pop-sep { height: 1px; background: var(--line); margin: .25rem .125rem; }

/* Topbar triggers can sit anywhere left-of-center, so a fixed-width panel
   anchored to the trigger's edge can run off the opposite side of a narrow
   phone screen. Below 640px, dock every pop as a full-width sheet under the
   topbar instead of trusting the trigger's position. */
@media (max-width: 640px) {
  .pop {
    position: fixed;
    top: calc(var(--topbar-h) + 6px);
    left: .625rem; right: .625rem;
    width: auto !important;
    max-height: calc(100dvh - var(--topbar-h) - 1rem);
    overflow-y: auto;
  }
}
.pop-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .4375rem .5625rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink); text-align: left;
  text-decoration: none; cursor: pointer;
}
.pop-item:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.pop-item .i { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.pop-item.on { background: var(--accent-wash); color: var(--accent-ink); }
.pop-item.on .i { color: var(--accent-ink); }
.pop-item.danger { color: var(--crit-ink); }
.pop-item.danger .i { color: var(--crit-ink); }
.pop-scroll { max-height: 300px; overflow-y: auto; }

/* ----------------------------------------------------------------- Modal -- */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(10, 13, 18, .5); backdrop-filter: blur(3px);
  animation: fade .16s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(560px, 100%); max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  animation: modal-in .2s var(--ease-out) both;
}
@keyframes modal-in { from { opacity: 0; transform: scale(.96) translateY(8px); } }
.modal-lg { width: min(820px, 100%); }
.modal-hd {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-2); flex: none;
}
.modal-hd h2 { font-size: var(--fs-lg); }
.modal-hd p { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: .1875rem; }
.modal-x {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-sm); color: var(--ink-muted);
}
.modal-x:hover { background: var(--surface-3); color: var(--ink); }
.modal-bd { padding: var(--sp-2) var(--sp-5); overflow-y: auto; flex: 1 1 auto; }
.modal-ft {
  display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end;
  padding: var(--sp-4) var(--sp-5); flex: none;
  border-top: 1px solid var(--line); margin-top: var(--sp-2);
}
.modal-ft .left { margin-right: auto; }

/* --------------------------------------------------------------- Toasts -- */
.toasts {
  position: fixed; bottom: 16px; right: 16px; z-index: 110;
  display: flex; flex-direction: column-reverse; gap: .5rem;
  width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem .875rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--neutral);
  border-radius: var(--r-md); box-shadow: var(--shadow-3);
  font-size: var(--fs-sm); color: var(--ink-2);
  animation: toast-in .28s var(--ease-out) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(14px); } }
.toast.out { animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(14px); height: 0; padding: 0; margin: 0; border-width: 0; } }
.toast .i { width: 17px; height: 17px; flex: none; margin-top: .0625rem; }
.toast-success { border-left-color: var(--ok); } .toast-success > .i { color: var(--ok-ink); }
.toast-danger,
.toast-error   { border-left-color: var(--crit); } .toast-danger > .i, .toast-error > .i { color: var(--crit-ink); }
.toast-warning { border-left-color: var(--warn); } .toast-warning > .i { color: var(--warn-ink); }
.toast-info    { border-left-color: var(--accent); } .toast-info > .i { color: var(--accent-ink); }
.toast-x { margin-left: auto; flex: none; color: var(--ink-faint); padding: 0 .125rem; }
.toast-x:hover { color: var(--ink); }

/* ------------------------------------------------------------- Callouts -- */
.callout {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .75rem .875rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.callout .i { width: 17px; height: 17px; flex: none; margin-top: .125rem; color: var(--ink-muted); }
.callout b { color: var(--ink); font-weight: 600; }
.callout-info { background: var(--accent-wash); border-color: var(--accent-line); }
.callout-info > .i { color: var(--accent-ink); }
.callout-warn { background: var(--warn-wash); border-color: var(--warn-line); }
.callout-warn > .i { color: var(--warn-ink); }
.callout-crit { background: var(--crit-wash); border-color: var(--crit-line); }
.callout-crit > .i { color: var(--crit-ink); }
.callout-ok   { background: var(--ok-wash); border-color: var(--ok-line); }
.callout-ok > .i { color: var(--ok-ink); }

/* ---------------------------------------------------------- Empty states -- */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .375rem; text-align: center; padding: var(--sp-8) var(--sp-4);
  color: var(--ink-muted);
}
.empty-sm { padding: var(--sp-6) var(--sp-3); }
.empty .med {
  width: 48px; height: 48px; border-radius: var(--r-lg); margin-bottom: .375rem;
  border: 1px dashed var(--line-strong); background: var(--surface-2);
}
.empty .med .i { width: 22px; height: 22px; }
.empty h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.empty p { font-size: var(--fs-xs); max-width: 42ch; }
.empty .btn { margin-top: .625rem; }

/* --------------------------------------------------------------- Tabs ---- */
.tabs {
  display: flex; align-items: center; gap: .125rem;
  border-bottom: 1px solid var(--line); overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: .4375rem;
  padding: .5625rem .75rem; margin-bottom: -1px;
  font-size: var(--fs-sm); font-weight: 550; color: var(--ink-muted);
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
  transition: color .12s var(--ease), border-color .12s var(--ease);
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tab .i { width: 15px; height: 15px; }
.tab .n {
  font-size: var(--fs-3xs); font-weight: 700; padding: 0 .3125rem;
  border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tab.on .n { background: var(--accent-wash); color: var(--accent-ink); }

/* ------------------------------------------------------------- Steps ----- */
.steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: .4375rem; font-size: var(--fs-xs); color: var(--ink-muted); }
.step .n {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-size: var(--fs-3xs); font-weight: 700; background: var(--surface);
}
.step.on { color: var(--ink); font-weight: 600; }
.step.on .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.done .n { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok-ink); }
.step-line { width: 24px; height: 1px; background: var(--line-strong); flex: none; }

/* ------------------------------------------------------- Command palette -- */
.cmdk-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 13, 18, .5); backdrop-filter: blur(3px);
  display: flex; justify-content: center;
  padding: min(12vh, 110px) var(--sp-4) var(--sp-4);
  animation: fade .13s var(--ease) both;
}
.cmdk {
  width: min(640px, 100%); max-height: min(520px, 72dvh); align-self: flex-start;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  animation: modal-in .18s var(--ease-out) both;
}
.cmdk-input-row {
  display: flex; align-items: center; gap: .625rem;
  padding: .8125rem .9375rem; border-bottom: 1px solid var(--line); flex: none;
}
.cmdk-input-row > .i { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.cmdk-input { flex: 1; border: 0; outline: none; background: none; font-size: var(--fs-base); min-width: 0; }
.cmdk-input::placeholder { color: var(--ink-faint); }
.cmdk-list { flex: 1 1 auto; overflow-y: auto; padding: .375rem; }
.cmdk-group {
  padding: .5rem .5625rem .25rem; font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.cmdk-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .5625rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink); text-decoration: none;
}
.cmdk-item .i { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.cmdk-item .sub { margin-left: auto; font-size: var(--fs-2xs); color: var(--ink-muted); flex: none; }
.cmdk-item:hover, .cmdk-item.sel { background: var(--surface-2); text-decoration: none; }
.cmdk-item.sel { box-shadow: inset 2px 0 0 var(--accent); }
.cmdk-ft {
  display: flex; gap: var(--sp-4); align-items: center;
  padding: .5rem .9375rem; border-top: 1px solid var(--line);
  font-size: var(--fs-2xs); color: var(--ink-muted); flex: none;
}

/* -------------------------------------------------------------- Skeleton -- */
.skel {
  position: relative; overflow: hidden; border-radius: var(--r-xs);
  background: var(--surface-3);
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: shimmer 1.3s var(--ease) infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --------------------------------------------------------------- Login --- */
/* One centered card over a real job-site photo, rather than a two-column
   split — a single sign-in card doesn't need a whole half of the screen to
   justify itself, and centered reads calmer at every viewport width. The
   photo is set inline (login.html) since it needs url_for; the dark scrim
   that keeps the card legible ships with it as the first background layer. */
.auth {
  position: relative; min-height: 100dvh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background-color: #151a28;
  background-size: cover;
  background-position: center;
}
.auth::before {
  /* Amber-and-blue glow, same palette as the rest of the shell's chrome. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(245, 179, 1, .10), transparent 62%),
    radial-gradient(800px 600px at 100% 100%, rgba(42, 120, 214, .16), transparent 60%);
}
.auth-panel { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  padding: var(--sp-7);
}
.auth-logo {
  display: block; width: 44px; height: 44px; margin-bottom: var(--sp-3); background: var(--amber);
  -webkit-mask: var(--logo-url) center / contain no-repeat;
  mask: var(--logo-url) center / contain no-repeat;
}
.auth-card h1 { font-size: var(--fs-2xl); letter-spacing: -.025em; }
/* Match the 44px submit button so the whole stack is one control height. */
.auth-card .input { min-height: 44px; }
/* Two compact columns instead of a 7-item inline run at line-height 1.8. */
.demo-accounts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1875rem var(--sp-3); margin-top: .375rem;
}
.demo-accounts li {
  display: flex; align-items: baseline; gap: .375rem;
  font-size: var(--fs-2xs); color: var(--ink-2); min-width: 0;
}
.demo-accounts code {
  font-size: var(--fs-3xs); font-weight: 500; flex: none;
  padding: .0625rem .25rem; border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent-ink);
}
@media (max-width: 480px) {
  .auth-card { padding: var(--sp-6) var(--sp-5); }
}

/* ------------------------------------------------------------------ FAQ -- */
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary .i { color: var(--ink-faint); flex: none; transition: transform .15s var(--ease); }
.faq-item[open] > summary .i { transform: rotate(90deg); }
.faq-item > p { margin-top: .5rem; padding-left: 1.5rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-body); }
.faq-item > ul { padding-left: 1.5rem; }

/* --------------------------------------------------------------- Errors -- */
.error-page {
  display: grid; place-items: center; min-height: 70dvh; padding: var(--sp-7) var(--sp-4);
  text-align: center;
}
.error-code {
  font-size: clamp(3.5rem, 11vw, 5.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -.04em; color: var(--ink);
}

/* --------------------------------------------------------- Print sheets -- */
/* Letterhead block for documents (e.g. an invoice) that print as an official
   sheet — swapped in for the app's own dashboard chrome, which is hidden via
   .no-print / the print media query in 2-shell.css. */
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .print-sheet-hd {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--sp-4); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
    border-bottom: 2px solid #111;
  }
  .print-sheet-hd .brand-mark { display: flex; align-items: center; gap: var(--sp-2); }
  .print-sheet-hd .brand-logo { height: 32px; width: auto; }
  .print-sheet-hd .brand-co { font-size: var(--fs-md); font-weight: 700; color: #111; }
  .print-sheet-hd .doc-title {
    font-size: var(--fs-xl); font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #111; text-align: right;
  }
  .print-sheet-bill {
    display: flex; justify-content: space-between; gap: var(--sp-4);
    padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid #ccc;
  }
  .print-sheet-bill dt { font-size: var(--fs-2xs); color: #555; }
  .print-sheet-bill dd { font-size: var(--fs-sm); color: #111; }

  /* A form field mid-edit (e.g. an invoice's job-cost splits, still a
     draft) should read as a plain value on paper, not an input box. */
  .input, .select, .textarea {
    border-color: transparent; background: transparent; padding: 0;
    min-height: 0; appearance: none;
  }
}