/* C & L Backline — hand-rolled UI. No frameworks. */
:root {
  --teal: #1f9bb5; --teal-dark: #15768a; --ink: #1c2530; --muted: #5d6b7a;
  --bg: #f3f5f7; --card: #ffffff; --line: #dde3e9;
  --good: #1e8a4c; --warn: #b97a08; --bad: #c0392b;
  --radius: 8px; --shadow: 0 1px 3px rgba(20, 30, 40, .08);
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; line-height: 1.45; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* nav */
.nav { display: flex; align-items: center; gap: .75rem; background: var(--ink);
  color: #fff; padding: 0 1rem; position: sticky; top: 0; z-index: 50; }
.brand { color: #fff; font-weight: 800; font-size: 1.1rem; padding: .6rem 0; }
.brand span { color: var(--teal); }
.nav-links { display: flex; align-items: center; gap: .25rem; flex: 1; flex-wrap: wrap; }
.nav-links > a { color: #cfd8e0; padding: .6rem .6rem; border-radius: 4px; }
.nav-links > a.active, .nav-links > a:hover { color: #fff; background: #2a3644;
  text-decoration: none; }
.nav-spacer { flex: 1; }
.nav-toggle { display: none; background: none; border: 0; color: #fff;
  font-size: 1.3rem; cursor: pointer; }
.nav-bell { color: #cfd8e0; padding: .5rem .45rem; position: relative;
  font-size: 1.05rem; text-decoration: none; }
.nav-bell:hover { color: #fff; text-decoration: none; }
.nav-bell .badge-count { position: relative; top: -.5rem; left: -.3rem;
  padding: 0 .35rem; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; color: #cfd8e0; padding: .5rem; }
.usermenu-pop { position: absolute; right: 0; top: 100%; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 180px; display: flex; flex-direction: column; }
.usermenu-pop a, .usermenu-pop button { padding: .55rem .9rem; color: var(--ink);
  text-align: left; white-space: nowrap; }
.usermenu-pop a:hover, .usermenu-pop button:hover { background: var(--bg);
  text-decoration: none; }
.usermenu-pop a.active { background: var(--bg); color: var(--ink); font-weight: 600; }
/* Reports nav dropdown — a left-aligned <details> menu styled like a nav link */
.navmenu { position: relative; }
.navmenu > summary { list-style: none; cursor: pointer; color: #cfd8e0;
  padding: .6rem .6rem; border-radius: 4px; white-space: nowrap; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary:hover, .navmenu > summary.active, .navmenu[open] > summary {
  color: #fff; background: #2a3644; }
.navmenu .usermenu-pop { left: 0; right: auto; margin-top: .15rem; z-index: 50;
  max-height: 75vh; overflow-y: auto; overflow-x: hidden;
  /* The vertical scrollbar used to steal width from the nowrap links and spawn
     a horizontal bar; reserve its gutter up front instead. */
  scrollbar-gutter: stable; }
.usermenu-pop .menu-group { padding: .5rem .9rem .15rem; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.usermenu-pop .menu-group:not(:first-child) { border-top: 1px solid var(--line);
  margin-top: .25rem; }
.linklike { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; }
/* inside a table the linklike button (e.g. "reset MFA") must hug its text, not
   stretch full-width and wrap onto its own line. */
td .linklike { width: auto; }
.nowrap { white-space: nowrap; }

.page { max-width: 1200px; margin: 1.25rem auto 4rem; padding: 0 1rem; }

/* messages / form-error banners */
.msg { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: .5rem;
  border: 1px solid var(--line); background: var(--card); }
.msg-success { border-color: #bfe3cd; background: #eaf7ef; }
.msg-warning { border-color: #f0ddb3; background: #fdf6e4; }
.msg-error { border-color: #efc4bd; background: #fdeeec; }
.msg-info { border-color: #bcd9f2; background: #eaf3fb; }

/* toast notifications (Django messages) */
.toasts { position: fixed; top: .8rem; right: .8rem; z-index: 200;
  display: flex; flex-direction: column; gap: .5rem; max-width: 400px; }
.toast { padding: .7rem 2rem .7rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 6px 18px rgba(20, 30, 40, .16); cursor: pointer; position: relative;
  animation: toast-in .18s ease-out; transition: opacity .3s; }
.toast.msg-success { border-color: #bfe3cd; background: #eaf7ef; }
.toast.msg-warning { border-color: #f0ddb3; background: #fdf6e4; }
.toast.msg-error { border-color: #efc4bd; background: #fdeeec; }
.toast.msg-info { border-color: #bcd9f2; background: #eaf3fb; }
.toast .x { position: absolute; top: .35rem; right: .55rem; color: var(--muted);
  font-size: 1.1rem; line-height: 1; }
@keyframes toast-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* form-error summary (top of a form that failed validation) */
.form-errors ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.form-errors li { margin: .1rem 0; }

/* layout pieces */
.page-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem; }
.page-head h1 { margin: 0; font-size: 1.45rem; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; align-items: start; margin-bottom: 1rem;
  /* cards hug their content; bottom margin matches .stat-row/.page-head rhythm */ }
/* opt-in: paired cards stretch to equal height so columns line up (dashboard) */
.grid-stretch { align-items: stretch; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
/* masonry: cards of unequal height pack tightly into columns instead of locking
   to the tallest card in each row (used by the account-security settings page) */
.settings-grid { columns: 2 480px; column-gap: 1rem; margin-bottom: 1rem; }
.settings-grid > .card { break-inside: avoid; margin-bottom: 1rem; }
@media (max-width: 560px) { .settings-grid { columns: 1; } }
.email-prefs { margin: .4rem 0 .2rem; }
.watcher-list { list-style: none; margin: 0 0 .7rem; padding: 0; }
.watcher-list li { display: flex; align-items: center; gap: .4rem; padding: .18rem 0;
  border-bottom: 1px solid var(--line); }
.watcher-list li:last-child { border-bottom: 0; }
.watcher-list .inline { margin-left: auto; }
.email-prefs > p { margin: .5rem 0 .35rem; }
.email-prefs .checkline { margin: .3rem 0; text-transform: none; letter-spacing: 0; }
/* grid items default to min-width:auto, so a wide table would force its card to
   overflow the grid track — allow shrinking and scroll inside the card instead */
.grid > * { min-width: 0; }
.card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem;
  overflow-x: auto; margin-bottom: 1rem; }
.grid .card { margin-bottom: 0; }   /* inside a grid the gap handles spacing */
/* but cards STACKED within a grid column (e.g. Manage + People on the ticket
   detail) need their own spacing since the grid gap only separates columns */
.grid > div > .card + .card { margin-top: 1rem; }
/* report-index section labels grouping cards by purpose */
.report-group { margin: 1.5rem 0 .6rem; font-size: 1rem; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
/* Reports index: filterable compact list rows (scales as reports grow) */
.report-filter { margin-bottom: .5rem; }
.report-filter-input { width: 100%; max-width: 26rem; }
.report-empty { margin: .2rem 0 0; }
.report-rows { list-style: none; margin: .35rem 0 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.report-row + .report-row { border-top: 1px solid var(--line); }
.report-row > a { display: flex; gap: 1rem; align-items: baseline; padding: .6rem .95rem;
  color: inherit; text-decoration: none; }
.report-row > a:hover { background: rgba(31, 155, 181, .07); }
.rr-name { font-weight: 600; color: var(--ink); flex: 0 0 14rem; }
.rr-desc { color: var(--muted); font-size: .9rem; }
.report-section[hidden], .report-row[hidden] { display: none; }
@media (max-width: 600px) {
  .report-row > a { flex-direction: column; gap: .15rem; }
  .rr-name { flex-basis: auto; }
}
/* Win/loss summary tiles (#36) */
.wl-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem; margin-bottom: 1rem; }
.wl-summary .card { margin: 0; padding: .7rem .9rem; }
.wl-stat { font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.filterbar .checkline { min-width: 0; }   /* checkbox+label sits inline, not in a 130px column */
.filterbar .checkline input { margin: 0; }
.card h2 { margin: 0 0 .6rem; font-size: 1.02rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
/* a section heading right after a table (e.g. Expense sheet under Rental lines)
   needs breathing room from the table above it */
.card table.data + h2 { margin-top: 1.3rem; }
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem 1.1rem; min-width: 150px; }
.stat .label { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.stat .value { font-size: 1.35rem; font-weight: 700; }

/* tables */
table.data { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.data th, table.data td { padding: .45rem .6rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top; }
table.data th { background: #eef1f4; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #f8fafb; }
/* opt-in zebra for line-item tables (e.g. quote detail); header is row 1 (odd),
   so striping starts on the first data row. Hover rule follows to keep winning. */
table.data.striped tr:nth-child(even) > td { background: #f1f5f8; }
table.data.striped tr:hover > td { background: #e8eef3; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.neg { color: var(--bad); }
.pos { color: var(--good); }
.dim { color: var(--muted); }
.small { font-size: .85rem; }

/* badges */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; border: 1px solid transparent; }
.badge-count { background: var(--teal); color: #fff; }
.badge-draft { background: #eceff2; color: var(--muted); }
.badge-sent { background: #e3f0fb; color: #1761a0; }
.badge-pending { background: #fdf2d9; color: #8a6312; }
.badge-confirmed { background: #e2f5ea; color: var(--good); }
.badge-completed { background: #e8e9f8; color: #4a4fa3; }
.badge-declined, .badge-cancelled { background: #f7e4e1; color: var(--bad); }
.badge-legacy { background: #f0ece4; color: #7a6a4f; }
.badge-active { background: #e2f5ea; color: var(--good); }
.badge-sold { background: #f7e4e1; color: var(--bad); }
.badge-retired { background: #eceff2; color: var(--muted); }
.badge-open { background: #fdf2d9; color: #8a6312; }
.badge-in_progress { background: #e3f0fb; color: #1761a0; }
.badge-waiting { background: #f0e8fb; color: #6b3fa0; }
.badge-stalled { background: #fbe4dd; color: #9a4521; }
.badge-validation { background: #d8eef3; color: #0f6e80; }
.badge-resolved, .badge-closed { background: #e2f5ea; color: var(--good); }
.badge-dup { background: var(--bad); color: #fff; }
.badge-info { background: #e3f0fb; color: #1761a0; }
.badge-warning { background: #fdf2d9; color: #8a6312; }
.badge-error { background: #f7e4e1; color: var(--bad); }
.badge-listed { background: #e8f6f9; color: var(--teal-dark); }
.badge-sublease { background: #fdf0e3; color: #9a5b1a; }
.status-legend { list-style: none; padding-left: 0; margin: .2rem 0 0; }
.status-legend li { margin: .35rem 0; }
.status-legend .badge { margin-right: .5rem; }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions a { color: var(--muted); padding: .15rem .25rem; }
.row-actions a:hover { color: var(--teal); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-head h2 { margin: 0; }
.contact-section { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.subhead { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.contact-row { margin-bottom: .5rem; }
.contact-fields { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.contact-fields > input, .contact-fields > select { flex: 1 1 7rem; min-width: 6rem; width: auto; }
.contact-fields .checkline.pri { flex: 0 0 auto; text-transform: none; letter-spacing: 0; font-size: .85rem; gap: .3rem; }
.contact-fields .btn-x { flex: 0 0 auto; }
.btn-x { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .3rem; }
.btn-x:hover { color: var(--bad); }
.dn { display: none; }
tr.row-conflict td { background: #fdecec; }
/* The raw formset "DELETE" checkbox is redundant with the ✕ button (which ticks it
   for you on save). Hide it but keep it in the DOM so the ✕ can still set it. */
.row-del { display: none; }
/* Per-line note rows collapse unless they have text; the note icon toggles one. */
.line-note-row.note-hidden { display: none; }
/* Compact icon-only row buttons (note / add-sub-item) to save space. */
.btn-sm.icon-btn { padding: .28rem .42rem; }
.note-toggle { color: var(--muted); }
.note-toggle.active { color: var(--teal); border-color: var(--teal); }   /* line has a note */
/* packs (ticket #14): grouped sub-items */
.pack-child td:nth-child(2) { padding-left: 1.6em; }
.pack-header td { font-weight: 600; }
.linetable tr.pack-header-row { background: #f5fafc; }
.linetable tr.pack-header-row > td:first-child,
.linetable tr.pack-child-row > td:first-child { border-left: 4px solid var(--pack-accent, var(--teal)); }
/* combo grouping on the quote detail: a coloured left rail per pack, mirroring the
   builder (same palette as PACK_COLORS in formset.js). Colour set as a CSS class
   server-side so there's no inline style (CSP 'self'). */
.data tr.pack-header > td { background: #f5fafc; }
.data tr.line-divider td { background: #eef3f7; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; border-top: 2px solid var(--teal); }
.data tr.line-divider:hover td { background: #eef3f7; }
.data tr.pack-c0 > td:first-child { border-left: 4px solid #1f9bb5; }
.data tr.pack-c1 > td:first-child { border-left: 4px solid #9a4fbf; }
.data tr.pack-c2 > td:first-child { border-left: 4px solid #d98324; }
.data tr.pack-c3 > td:first-child { border-left: 4px solid #3a9d4f; }
.data tr.pack-c4 > td:first-child { border-left: 4px solid #c0457a; }
.data tr.pack-c5 > td:first-child { border-left: 4px solid #5b6bd6; }

/* buttons & forms */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem;
  border-radius: 7px; border: 1px solid var(--line); background: var(--card);
  color: var(--teal-dark); cursor: pointer; font: inherit; font-weight: 500;
  line-height: 1.1; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .05s; }
.btn:hover { background: #eef8fb; border-color: var(--teal); text-decoration: none;
  box-shadow: 0 1px 3px rgba(31, 155, 181, .18); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark);
  box-shadow: 0 2px 7px rgba(31, 155, 181, .35); }
.btn-danger { background: #fff; color: var(--bad); border-color: #e7b6af; }
.btn-danger:hover { background: #fdeeec; border-color: var(--bad);
  box-shadow: 0 1px 3px rgba(193, 58, 42, .18); }
.btn-sm { padding: .28rem .6rem; font-size: .85rem; gap: .3rem; }
/* line-icon system (sprite in partials/_icons.svg) */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.125em; }
.btn .ic { width: 1.05em; height: 1.05em; }

/* contextual help: native <details>, no JS (CSP-safe) */
.help { margin: 0 0 1rem; }
.help > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; color: var(--teal-dark); font-size: .85rem; font-weight: 600; }
.help > summary::-webkit-details-marker { display: none; }
.help > summary::before { content: "?"; flex: none; display: inline-flex;
  align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: .8rem;
  font-weight: 700; }
.help[open] > summary { margin-bottom: .45rem; }
.help-body { background: #eef8fb; border: 1px solid #cfe9f0; border-radius: var(--radius);
  padding: .75rem .95rem; width: 100%; font-size: .9rem; line-height: 1.5; }
.help-body :first-child { margin-top: 0; }
.help-body :last-child { margin-bottom: 0; }
.help-body ul { margin: .4rem 0; padding-left: 1.2rem; }
.help-body strong { color: var(--ink); }
/* the central guide page */
.guide h2 { margin-top: 0; }
.guide h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.guide p, .guide li { line-height: 1.55; }
form.inline { display: inline; }
.inline-input { width: 7rem; display: inline-block; }
.checkline { display: flex; align-items: center; gap: .5rem; }
.checkline label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .9rem; }
.checkline input { width: auto; }

/* modal dialog (native <dialog>, opened by modal.js — CSP-clean) */
dialog.modal { width: min(680px, 94vw); max-height: 92vh; padding: 0; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card);
  color: var(--ink); }
/* multi-field forms (2-column .formgrid) get more room — modal.js sets this */
dialog.modal.modal-wide { width: min(880px, 94vw); }
dialog.modal::backdrop { background: rgba(18, 26, 36, .55); }
.modal [data-modal-body] { display: flex; flex-direction: column; max-height: 92vh; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid #d5edf2;
  background: #eef9fb;
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.modal-head h2 { margin: 0; font-size: 1.05rem; text-transform: none;
  letter-spacing: 0; color: var(--teal-dark); }
/* destructive modals (delete, disable 2FA) wear a red header so colour signals intent */
.modal-head.danger { background: #fdeeec; border-bottom-color: #f3c9c2; }
.modal-head.danger h2 { color: var(--bad); }
.modal-x { background: none; border: 0; font-size: 1.6rem; line-height: 1;
  padding: 0 .25rem; cursor: pointer; color: var(--muted); }
.modal-x:hover { color: var(--teal-dark); }
.modal-head.danger .modal-x:hover { color: var(--bad); }
.modal-form { padding: 1.1rem; overflow-y: auto; }
.modal-actions { margin-top: 1.1rem; display: flex; gap: .5rem; }

.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .65rem 1rem; align-items: start; }
/* Pasted-screenshot preview chips on ticket attachment inputs */
.paste-previews { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.paste-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem;
  color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .2rem .45rem; background: var(--card); }
.paste-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 3px; }
/* Read-only contact card modal (clicked from the quote page) */
.contact-card .kv { margin: 0; }
.contact-card .kv dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); margin-top: .7rem; }
.contact-card .kv dt:first-child { margin-top: 0; }
.contact-card .kv dd { margin: .1rem 0 0; }
/* Collapsible "advanced" sub-sections inside a form card (declutter the header) */
.adv-section { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.adv-section > summary { cursor: pointer; font-weight: 600; color: var(--teal-dark);
  list-style: none; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem 0; }
.adv-section > summary::-webkit-details-marker { display: none; }
.adv-section > summary::before { content: "▸"; font-size: .75rem; color: var(--muted);
  transition: transform .15s; }
.adv-section[open] > summary::before { transform: rotate(90deg); }
.adv-section > summary .dim { font-weight: 400; }
.adv-section .formgrid, .adv-section > .helptext { margin-top: .5rem; }
.formgrid p, .formgrid .form-field, .rate-grid .form-field, form p {
  margin: 0 0 .65rem;
}
.form-field { min-width: 0; }
/* textareas (Notes, terms, etc.) — and fields tagged .field-wide — span the full
   grid width rather than a single column */
.formgrid p:has(textarea), .formgrid p:has(.field-wide), .formgrid p.field-wide,
.formgrid .form-field:has(textarea), .formgrid .form-field.field-wide {
  grid-column: 1 / -1;
}
label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .15rem;
  text-transform: uppercase; letter-spacing: .03em; }
input, select, textarea { width: 100%; padding: .42rem .55rem; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; background: #fff; }
input[type="checkbox"] { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal);
  outline-offset: 0; border-color: var(--teal); }
.errorlist { color: var(--bad); margin: .1rem 0 .3rem; padding-left: 1rem;
  font-size: .85rem; }
.field-has-errors > label { color: var(--bad); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--bad);
}
.helptext { color: var(--muted); font-size: .78rem; display: block; }

/* mileage auto-fill button next to the Miles input on the expense sheet */
.miles-cell { white-space: nowrap; }
.miles-cell input[name$='-miles'] { width: 4rem; }
.calc-miles { margin-left: .2rem; padding: .2rem .45rem; }
.rt-label { margin-left: .3rem; font-size: .72rem; color: var(--muted); cursor: pointer; }
.rt-label input { vertical-align: middle; width: auto; }

/* formset line tables */
.linetable { width: 100%; border-collapse: collapse; }
.linetable thead th { border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.linetable tr.zebra > td { background: #e9eef3; }
.linetable th { font-size: .75rem; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: .3rem .35rem; }
.linetable td { padding: .2rem .35rem; vertical-align: top; }
.line-note { font-size: .8rem; }
.linetable tr.line-note-row td { border-top: 0; padding-top: 0; padding-bottom: .35rem; }
.linetable input, .linetable select { padding: .3rem .4rem; }
.linetable .days-input { width: 3.4rem; }
/* size number boxes to their purpose; the Item/name box takes the freed space */
.linetable input[name$='-quantity'] { width: 4.6rem; }
.linetable input[name$='-rate'],
.linetable input[name$='-customer_price'],
.linetable input[name$='-amount'] { width: 6.6rem; }
/* Give the Item/name column all the free width: every other column shrinks to fit,
   which also pulls the action icons in next to the price. Keep those icons inline.
   On the line-items table the Item box is the 3rd column (a "#" column leads, #50). */
.lines-table td:nth-child(3) { width: 100%; }
.linetable .asset-search { min-width: 13rem; }
.linetable select[name$='-kind'] { width: 9rem; }   /* don't let Type collapse to the arrow */
/* Same trap as Type above (#86): the sublease Item select sat in a cell with no
   width of its own and collapsed to a square barely wider than its arrow, so the
   option text was unreadable. Wide enough for "SUB169 · Nord Electro 3 Keyboard",
   and allowed to shrink rather than overflow on a narrow screen. */
.linetable .sublease-search { width: 18rem; max-width: 100%; }
/* Typed something that isn't a real item — the row still saves as a general
   cost, so this is a nudge rather than an error. */
.linetable .sublease-search.unmatched { border-color: var(--amber, #c98a00); }
.linetable td:last-child { white-space: nowrap; text-align: right; }
/* #50: line-number cell doubles as the drag-to-reorder handle (a grip + the number),
   so reordering costs no extra column width. */
.lines-table th.rownum, .lines-table td.rownum { width: 2.4rem; text-align: center;
  color: var(--muted); font-size: .8rem; white-space: nowrap; }
.lines-table td.rownum { vertical-align: middle; }
.drag-handle { display: inline-flex; vertical-align: middle; margin-right: .15rem;
  color: var(--muted); cursor: grab; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.drag-handle .ic { width: 1rem; height: 1rem; fill: currentColor; stroke: none; }
/* Drag feedback: the placeholder gap + the row being dragged. */
.lines-table tr.row-ghost > td { background: #d7eef3; }
.lines-table tr.row-chosen { box-shadow: 0 1px 6px rgba(0,0,0,.18); }
/* #58: "already booked in this window" flag on a rental line in the builder. */
.occ-flag { display: inline-block; margin-left: .4rem; font-size: .72rem; font-weight: 600;
  padding: .05rem .4rem; border-radius: 4px; white-space: nowrap; vertical-align: middle; }
.occ-flag.occ-warn { background: #fdf2d6; color: #8a5a00; }
.occ-flag.occ-over { background: #fbd5d5; color: #a11414; }
.lines-table tr.occ-over > td { background: #fff4f4; }
/* #53: full-width section divider row in the line editor. */
.lines-table tr.divider-row > td { background: #eef3f7; border-top: 2px solid var(--teal); }
.divider-cell .divider-input { width: 100%; box-sizing: border-box; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; }
/* Drop the number spinner arrows in the line/expense editors (you can still type). */
.linetable input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.linetable input[type="number"]::-webkit-inner-spin-button,
.linetable input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.row-removed { display: none; }
/* Formset section header (heading left, typed add-buttons right) + a foot row that
   pushes the running total to the bottom-right. */
.sheet-head { display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; flex-wrap: wrap; }
.sheet-head h2 { margin: 0; }
.exp-types { display: flex; gap: .4rem; flex-wrap: wrap; }
/* Expense Sheet split into five type-specific sections, each hidden until it has a row. */
.exp-section { margin-top: 1rem; }
.exp-section[hidden] { display: none; }
.exp-section-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); margin: 0 0 .3rem; }
/* A sentence of guidance shouted in uppercase is unreadable — let hints inside a
   section heading keep normal case and weight. */
.exp-section-head .exp-section-hint { text-transform: none; letter-spacing: 0;
  font-weight: 400; }
/* Each section sets its own free-width column via .exp-grow; neutralise the line-items
   table's generic 2nd-column rule (Amount sits there in Fuel/Misc and must stay narrow). */
.exp-section .linetable td:nth-child(2),
.exp-section .linetable th:nth-child(2) { width: auto; }
.exp-section .linetable td.exp-grow,
.exp-section .linetable th.exp-grow { width: 100%; }
.exp-section input[name$='-company'],
.exp-section input[name$='-travel_from'],
.exp-section input[name$='-travel_to'] { min-width: 11rem; }
/* Mileage: stack From over To, each full-width, so long addresses are easy to type/read. */
.mileage-trip .mini-label { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); margin: .4rem 0 .1rem; }
.mileage-trip .mini-label:first-of-type { margin-top: 0; }
.mileage-trip input[name$='-travel_from'],
.mileage-trip input[name$='-travel_to'],
.mileage-trip select[name$='-trip_purpose'] { display: block; width: 100%; box-sizing: border-box; min-width: 0; }
[data-exp-section="mileage"] td:not(.mileage-trip) { vertical-align: middle; }
.formset-foot { display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; }
.table-scroll { overflow-x: auto; }   /* wide data grids (e.g. the 1099 month grid) */
.filterbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end;
  margin-bottom: .9rem; }
.filterbar label { margin: 0; }
.filterbar > div { min-width: 130px; }
.filterbar .search-col { flex: 2 1 16rem; min-width: 12rem; }   /* roomy search, others stay compact */
/* single roomy search row (contacts/customers/venues) */
.searchbar { display: flex; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.searchbar input { flex: 1 1 auto; min-width: 0; }
.searchbar .btn { flex: 0 0 auto; }
.tabstrip { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tabstrip a { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font-size: .85rem; }
.tabstrip a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* conflict / warning panels */
.panel-conflict { border: 1px solid #efc4bd; background: #fdeeec; border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1rem; }
.panel-conflict h3 { margin: 0 0 .4rem; color: var(--bad); font-size: 1rem; }

/* calendar */
.cal { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); table-layout: fixed; }
.cal th { padding: .4rem; font-size: .75rem; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); }
.cal td { width: 14.28%; height: 118px; vertical-align: top; border: 1px solid var(--line);
  padding: .25rem; }
.cal td.weekend { background: #fafbfc; }
.cal td.out { background: #f4f6f8; }
.cal td.out .daynum { opacity: .45; }
.cal .daynum { font-size: .8rem; font-weight: 600; color: var(--muted); }
.cal td.today { background: #eef9fb; box-shadow: inset 0 0 0 2px var(--teal); }
.cal td.today .daynum { background: var(--teal); color: #fff; border-radius: 999px;
  padding: 0 .42rem; }
.cal .ev { display: block; font-size: .72rem; line-height: 1.18; padding: .14rem .34rem;
  margin-top: .18rem; border-radius: 4px; border-left: 3px solid var(--line);
  background: #eef1f4; color: var(--ink); overflow: hidden; }
.cal .ev:hover { filter: brightness(.97); text-decoration: none; }
.cal .ev .ev-name { display: block; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cal .ev .ev-client { display: block; font-size: .64rem; opacity: .78; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* #63: coverage line on a calendar chip — lead tech / Customer Pickup / uncovered. */
.cal .ev .ev-tech { display: block; font-size: .64rem; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .ev .ev-uncovered { color: #a11414; font-weight: 700; font-style: normal; }
.cal .ev-confirmed { background: #e2f5ea; color: #176b3a; border-left-color: var(--good); }
.cal .ev-pending { background: #fdf2d9; color: #8a6312; border-left-color: var(--warn); }
.cal .ev-sent { background: #e3f0fb; color: #1761a0; border-left-color: #1761a0; }
.cal-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .1rem 0 .7rem;
  font-size: .82rem; color: var(--muted); }
.cal-legend .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px;
  margin-right: .35rem; vertical-align: middle; }
.dot-confirmed { background: var(--good); }
.dot-pending { background: var(--warn); }
.dot-sent { background: #1761a0; }

.mfa-steps li { margin-bottom: .65rem; line-height: 1.5; }
code.feed-url { display: inline-block; word-break: break-all; background: #f4f7f9;
  border: 1px solid var(--line); border-radius: 4px; padding: .2rem .4rem; margin-top: .15rem; }

/* dashboard top */
.dash-top { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 1rem; }
/* Stretch the stat tiles to fill the row evenly (no packed-left gap / orphan tile). */
.dash-top .stat-row { flex: 1 1 60%; margin-bottom: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 1rem; align-content: start; }
.dash-month { flex: 1 1 16rem; min-width: 15rem; display: flex; flex-direction: column;
  justify-content: center; gap: .2rem; }
/* dash refresh: tiles in labelled groups (flex rows stretch — no grid orphans),
   right rail = needs-attention + this-month stacked to full column height */
.dash-cols { flex: 1 1 60%; display: flex; flex-direction: column; gap: .65rem; }
.stat-group-label { color: var(--muted); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 .3rem .1rem; }
.dash-top .stat-flex { display: flex; flex-wrap: wrap; gap: 1rem; align-content: start; }
.dash-top .stat-flex .stat { flex: 1 1 9rem; }
.dash-rail { flex: 1 1 16rem; min-width: 15rem; display: flex;
  flex-direction: column; gap: 1rem; }
.dash-rail .card { margin-bottom: 0; }
.dash-rail .dash-attn { flex: 1 1 auto; }
.dash-rail .dash-month { flex: 0 0 auto; min-width: 0; }
.attn-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.attn-list li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.attn-list li:last-child { border-bottom: 0; }
.attn-list a { text-decoration: none; }
.attn-list a:hover { text-decoration: underline; }
.attn-clear { color: var(--good); font-weight: 600; padding: .6rem 0; }
.dash-sub { color: var(--muted); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; margin: 1.1rem 0 .4rem; }
.hbars-month .hbar .amt { font-size: .78rem; }
.dash-month .dm-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.dash-month .dm-big { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.dash-month .dm-next { font-size: .85rem; }

/* business settings */
.fg-settings { grid-template-columns: repeat(auto-fill, minmax(15rem, 20rem));
  justify-content: start; }
.fg-settings p:has(textarea), .fg-settings .form-field:has(textarea) { max-width: 46rem; }
.set-sec { margin: 1.4rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.set-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: .2rem; }
.sig-block { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.sig-preview { max-width: 260px; max-height: 100px; border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem; background: #fff; object-fit: contain; }
.sig-preview.sig-empty { display: flex; align-items: center; justify-content: center;
  width: 180px; height: 64px; color: var(--muted); font-size: .85rem; }
.sig-controls { flex: 1 1 16rem; }
.rate-grid { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.rate { min-width: 150px; }
.rate > label { display: block; }
.rate .affix { display: inline-flex; align-items: center; gap: .3rem; }
.rate .affix input { width: 6rem; }
.rate .affix .pre, .rate .affix .post { color: var(--muted); }
/* The tax dialog is intentionally wide. Let its paired fields consume that width
   instead of inheriting Business Settings' capped 20rem columns. */
.modal .tax-profile-form .fg-settings,
.modal .tax-profile-form .rate-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1rem; justify-content: stretch;
}
.modal .tax-profile-form .fg-settings p:has(textarea),
.modal .tax-profile-form .fg-settings .form-field:has(textarea) { max-width: none; }
@media (max-width: 680px) {
  .modal .tax-profile-form .fg-settings,
  .modal .tax-profile-form .rate-grid { grid-template-columns: 1fr; }
}

/* collapsible Help guide sections */
.guide-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: .65rem; overflow: hidden; }
.guide-sec > summary { cursor: pointer; padding: .8rem 1rem; font-size: 1.04rem;
  font-weight: 600; color: var(--ink); list-style: none;
  display: flex; align-items: center; gap: .55rem; border-left: 3px solid var(--teal); }
.guide-sec > summary::-webkit-details-marker { display: none; }
.guide-sec > summary:hover { background: rgba(31, 155, 181, .06); }
.guide-sec > summary::after { content: "▾"; margin-left: auto; color: var(--muted);
  font-size: .85rem; transition: transform .15s; }
.guide-sec[open] > summary { border-bottom: 1px solid var(--line); background: rgba(31, 155, 181, .05); }
.guide-sec[open] > summary::after { transform: rotate(180deg); }
.gs-ico { font-size: 1.15rem; line-height: 1; }
.guide-body { padding: .9rem 1.1rem 1.1rem; }
.guide-body h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; color: var(--teal-dark); }
.guide-body h3:first-child { margin-top: 0; }
.guide-body p, .guide-body li { line-height: 1.55; }
.guide-body ul { margin: .3rem 0; }
.guide-tip { background: #eef8fb; border: 1px solid #cfe9f0; border-radius: var(--radius);
  padding: .6rem .85rem; margin: 0 0 1rem; font-size: .9rem; }
.guide-tip strong { color: var(--teal-dark); }

/* ticket thread */
.thread { display: flex; flex-direction: column; gap: .75rem; }
.comment { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .9rem; }
.comment .meta { color: var(--muted); font-size: .8rem; margin-bottom: .35rem; }
.attachment-thumb { max-width: 260px; max-height: 180px; border-radius: 6px;
  border: 1px solid var(--line); display: block; margin-top: .35rem; cursor: zoom-in; }
/* Lightbox: full image in an overlay (no page redirect) */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw;
  max-height: 96vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .82); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 96vh;
  border-radius: var(--radius); box-shadow: 0 6px 30px rgba(0,0,0,.5); cursor: zoom-out; }
dialog.lightbox .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.7rem; line-height: 1; }
dialog.lightbox .lightbox-nav:hover { background: rgba(0, 0, 0, .75); }
dialog.lightbox .lightbox-nav.prev { left: .6rem; }
dialog.lightbox .lightbox-nav.next { right: .6rem; }
dialog.lightbox .lightbox-count { position: absolute; bottom: .6rem; left: 50%;
  transform: translateX(-50%); background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .8rem; padding: .1rem .65rem; border-radius: 999px; }

/* #74 public claim page: phone-first single card, no app chrome. */
body.claim-page { display: flex; justify-content: center; align-items: flex-start;
  min-height: 100vh; background: var(--bg); padding: 1.2rem; }
.claim-card { max-width: 30rem; width: 100%; margin-top: 4vh; }
.claim-card h1 { font-size: 1rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .4rem; }
.claim-card .btn-big { font-size: 1.05rem; padding: .7rem 1.2rem; width: 100%;
  margin: .35rem 0; }
.checklist { columns: 2; max-width: 34rem; }
.checklist label { display: block; padding: .15rem 0; }
.attach-chip { display: inline-block; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; margin: .15rem .25rem 0 0; }

.pager { display: flex; align-items: center; gap: .75rem; margin: .9rem 0; }

.notif { display: block; padding: .6rem .85rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); margin-bottom: .45rem;
  color: var(--ink); }
.notif:hover { background: var(--bg); text-decoration: none; }
.notif.unread { border-left: 3px solid var(--teal); background: #f2fbfd; }
.notif .meta { color: var(--muted); font-size: .78rem; margin-top: .15rem; }
.notif-row { display: flex; align-items: stretch; gap: .4rem; margin-bottom: .45rem; }
.notif-row .notif { flex: 1; margin-bottom: 0; }
.notif-del { display: flex; }
.btn-icon { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); width: 2.3rem; cursor: pointer; color: var(--muted);
  font-size: 1.35rem; line-height: 1; }
.btn-icon:hover { background: var(--bg); color: var(--bad); border-color: var(--bad); }

.backup-codes { columns: 2; list-style: none; padding: 0; }
.backup-codes code { font-size: 1.05rem; letter-spacing: .06em; }
.badge-admin { background: #e8e9f8; color: #4a4fa3; }
.badge-support { background: #e8f6f9; color: var(--teal-dark); }
.badge-client { background: #f0ece4; color: #7a6a4f; }

/* horizontal bar rows (per-year revenue): no label collisions by construction */
.hbars { display: flex; flex-direction: column; gap: .5rem; }
.hbar { display: grid; grid-template-columns: 3.2rem 1fr 6.5rem;
  align-items: center; gap: .6rem; }
.hbar .yr { color: var(--muted); font-size: .85rem; }
.hbar .track { background: #edf1f4; border-radius: 4px; height: 18px;
  /* revenue + profit bars stack inside one track */
  display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.hbar .fill { background: var(--teal); height: 8px; border-radius: 4px;
  min-width: 3px; }
.hbar .fill-profit { background: var(--good); height: 5px; }
.hbar .amt { text-align: right; font-variant-numeric: tabular-nums;
  font-size: .88rem; }
.amt-profit { color: var(--good); font-size: .78rem; display: block; }
/* chart legend: inline color words matching their bars — NOT .amt-profit,
   whose display:block exists for stacking amounts and breaks a sentence */
.bar-legend { margin-top: .35rem; }
.bar-legend .legend-teal { color: var(--teal); font-weight: 600; }
.bar-legend .legend-good { color: var(--good); font-weight: 600; }
.dash-lifetime { margin-top: .8rem; border-top: 1px solid var(--line);
  padding-top: .6rem; }

/* dashboard-density tables */
table.data.compact th, table.data.compact td { padding: .3rem .5rem;
  font-size: .88rem; }
th.sortable a { color: inherit; }
th.sortable.active a { color: var(--teal-dark); }

/* utilities (no inline styles anywhere — CSP style-src 'self') */
.auth-wrap { max-width: 420px; }
.auth-card { margin-top: 14vh; }
.card-narrow { max-width: 540px; }
.card-medium { max-width: 700px; }
.mt0 { margin-top: 0; }
.h-sub { margin-top: 0; font-size: 1.2rem; }
.w100 { width: 100%; }
.brand-accent { color: var(--teal); }

@media (max-width: 760px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links { display: none; width: 100%; flex-direction: column;
    align-items: stretch; padding-bottom: .5rem; }
  .nav-links.show { display: flex; }
  .nav-spacer { display: none; }
  .cal td { height: 64px; }
}