/* ──────────────────────────────────────────────────────────────────
   HT OS shared shell - CSS tokens + shell components.
   Every tool page pulls this in. Tool-specific styles come after.
   ────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  --bg: #f3f5f8;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --card2: #eef2f7;
  --ink: #0f1b32;
  --ink-2: #4b5d79;
  --muted: #7d8ba1;
  --line: #e2e7ef;
  --line-2: #edf0f5;
  --accent: #1a88f5;
  --accent-ink: #0b5fb8;
  --accent-soft: #e6f2ff;
  --ok: #22a66b;
  --ok-soft: #ddf3e8;
  --warn: #e59b2f;
  --warn-soft: #fff4df;
  --fail: #d94848;
  --fail-soft: #fde4e4;
  --black: #0b1220;
  --shadow: 0 4px 12px rgba(0,0,0,.08);

  /* keep these synonyms so older styles on individual pages keep working */
  --text: var(--ink);
  --text2: var(--ink-2);
  --border: var(--line);
  --card: var(--panel);
  --danger: var(--fail);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.45;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
code { font-family: ui-monospace, 'SF Mono', 'Menlo', monospace; font-size: 0.8rem; }

/* ──────────────────────────────────────────────────────────────────
   Top app bar - the shared shell, shown on every tool page.
   ────────────────────────────────────────────────────────────────── */
.htos-appbar {
  position: sticky; top: 0; z-index: 80;
  background: var(--panel); border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: center;
  padding: 0 14px; min-height: 52px;
}
.htos-brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; }
.htos-brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.55rem; }
.htos-brand .logo {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: contain; display: block;
  background: rgba(255, 255, 255, 0.06);
}
.htos-brand .title { color: var(--ink); }

/* WIDE: the nav scrolls. NARROW: it wraps, exactly as it always did.
   Before 2026-08-27 this was `flex-wrap: wrap` with no overflow handling of any
   kind - no scroller, no hamburger, and not one media query touching it. That is
   ugly (the sticky appbar grows to 94px at 1024 and 328px at phone width) but it
   is FUNCTIONAL: every tab stays clickable at every size.
   A plain scroller is not a free upgrade on that, and the first version of this
   change proved it. Measured in Chrome against the real markup: the right-hand
   side of the appbar costs 688px that cannot shrink, and 11 tabs need 801px. So
   a nowrap scroller shows 8 tabs at 1280, 4 at 1024 and ZERO at 390 - and with
   the scrollbar hidden there was no cue that the rest existed. That trades a
   tall header for silently unreachable navigation, which is worse.
   So: scroll only where a scroller has room to be useful, keep the old wrapping
   behaviour below that, and never hide the scrollbar. shell.js additionally
   scrolls the active tab into view on mount, so the current page is always the
   one you can see.
   `min-width: 0` is what lets the 1fr grid track shrink at all - without it the
   flex content forces the track wider than its share and the scroller never
   engages. `flex: 0 0 auto` on the links stops them being squeezed instead. */
.htos-navlinks {
  display: flex; gap: 0.15rem; align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;            /* visible on purpose - it is the only cue */
  overscroll-behavior-x: contain;   /* don't hand a horizontal fling to the page */
}
.htos-navlinks::-webkit-scrollbar { height: 4px; }
.htos-navlinks::-webkit-scrollbar-thumb { background: var(--line-2, var(--line)); border-radius: 4px; }
.htos-navlinks::-webkit-scrollbar-track { background: transparent; }

/* Below this the nav track is too narrow for scrolling to beat wrapping.
   Measured in Chrome against this markup: 1440 -> 749px of nav and 10 of 11 tabs
   visible; 1280 -> 589px and 7; 1024 -> 333px and 4. Four tabs behind a scroll
   gesture is worse than two rows you can see, so below 1200 fall back to the
   pre-existing behaviour rather than inventing a worse one: taller header,
   everything reachable, nothing hidden.
   1200 and not 1024 on purpose - a breakpoint sitting exactly on a common
   viewport width is a coin flip. matchMedia('(max-width: 1024px)') measured
   FALSE at innerWidth 1024 here, because the media query resolves against a
   viewport that does not include the scrollbar. Keep boundaries away from real
   device widths. */
@media (max-width: 1200px) {
  /* `min-width: auto` has to come back with the wrapping. min-width:0 lets the
     1fr track collapse to ZERO once nothing is forcing it open, and with
     overflow visible the links then spill out of a 0px nav across the controls
     on the right. Measured at a 390px viewport: 0px track, links overlapping.
     Restoring min-content sizing reproduces the old behaviour exactly. */
  .htos-navlinks {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    min-width: auto;
  }
}

/* Give the nav ~100px back before it needs to scroll at all. The search field
   is the only shrinkable thing on the right-hand side. */
@media (max-width: 1400px) {
  .htos-search { min-width: 120px; }
}

.htos-navlinks a {
  padding: 0.45rem 0.7rem;
  color: var(--ink-2); border-radius: 6px;
  font-weight: 600; font-size: 0.85rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.htos-navlinks a:hover { background: var(--panel-2); text-decoration: none; }
.htos-navlinks a.active { color: var(--accent-ink); background: var(--accent-soft); }

/* The nav dropdowns (More, Payroll) hang BELOW the nav, and the scroller above
   clips them: setting overflow-x also computes overflow-y to auto, so an
   absolutely-positioned child gets cut off at the nav's own height. Switching
   them to `position: fixed` takes them out of that clip, because a fixed
   element is not clipped by an ancestor's overflow.
   It is NOT, however, positioned against the viewport here: design-system.css
   puts `backdrop-filter` on .htos-appbar, and a backdrop-filter makes that
   element the containing block for fixed descendants. The two frames happen to
   coincide today (the appbar's padding box sits at viewport 0,0), so this looks
   like it works for the obvious reason - it does not. mountShell's
   positionNavMenu measures where (0,0) actually lands and corrects by the delta,
   which is right whatever the containing block is. Do not "simplify" that back
   into writing getBoundingClientRect values straight in. */
.htos-navlinks .htos-more-menu { position: fixed; top: auto; right: auto; }

.htos-appbar-right { display: flex; align-items: center; gap: 0.55rem; }

.htos-search {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 22px; padding: 0 0.8rem;
  color: var(--muted); display: flex; align-items: center; gap: 0.5rem;
  min-width: 220px; max-width: 280px;
  font-size: 0.82rem; height: 32px;
}
.htos-search input {
  border: 0; background: transparent; outline: none; flex: 1;
  color: var(--ink); font-size: 0.85rem; font-family: inherit;
}
/* Constrain search icon so page-level CSS resets (e.g. dispatch.html's * {padding:0})
   don't let the SVG expand to its natural 300px intrinsic width. */
.htos-search svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }

.htos-iconbtn {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; font-size: 14px;
  transition: background .12s, border-color .12s, color .12s;
}
.htos-iconbtn:hover { background: var(--panel-2); color: var(--accent-ink); }
.htos-iconbtn svg { width: 16px; height: 16px; fill: currentColor; }

.htos-newbtn {
  background: var(--black); color: #fff; border: 0;
  padding: 0 14px; height: 32px; border-radius: 999px;
  font-weight: 700; cursor: pointer;
  font-size: 0.83rem; display: inline-flex; align-items: center; gap: 0.3rem;
  position: relative;
}
.htos-newbtn:hover { filter: brightness(1.1); }
.htos-newbtn .caret { opacity: 0.8; font-size: 0.7rem; }

.htos-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  min-width: 180px; padding: 4px; display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.htos-menu.open { display: block; }
.htos-menu button, .htos-menu a {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--ink);
  padding: 8px 12px; border-radius: 4px; cursor: pointer;
  font-size: 0.85rem; font-family: inherit; text-decoration: none;
}
.htos-menu button:hover, .htos-menu a:hover { background: var(--panel-2); text-decoration: none; }

.htos-avatar {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 0.78rem;
  cursor: pointer; flex-shrink: 0;
  overflow: hidden; padding: 0; border: none;
}
/* Photo always covers the full circle - position:absolute removes it from
   the grid flow so the img fills edge-to-edge regardless of source ratio. */
.htos-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.htos-who { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }

.htos-logout {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); padding: 0 10px; height: 26px; border-radius: 13px;
  font-size: 0.72rem; cursor: pointer; font-family: inherit;
}
.htos-logout:hover { color: var(--fail); border-color: var(--fail); }

/* Right-side AI team drawer placeholder - collapsed by default */
.htos-aidrawer {
  position: fixed; top: 60px; right: 10px; z-index: 60;
  width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; display: none; flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: calc(100vh - 80px);
}
.htos-aidrawer.open { display: flex; }
.aidrawer-head {
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between;
}
.aidrawer-head h4 { margin: 0; font-size: 0.9rem; color: var(--ink); }
.aidrawer-tabs {
  display: flex; border-bottom: 1px solid var(--line-2);
  padding: 0 0.5rem;
}
.aidrawer-tab {
  flex: 1; padding: 0.65rem 0.75rem; background: transparent; border: 0;
  color: var(--muted); font-weight: 600; font-size: 0.82rem; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.aidrawer-tab:hover { color: var(--ink); }
.aidrawer-tab.active { color: var(--accent, #1a88f5); border-bottom-color: var(--accent, #1a88f5); }
.aidrawer-body { flex: 1; overflow-y: auto; padding: 1rem; }
.ai-welcome { text-align: center; padding: 1rem 0; }
.ai-welcome-icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.ai-welcome h5 { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--ink); }
.ai-welcome p { color: var(--muted); font-size: 0.82rem; line-height: 1.45; margin: 0 0 1rem; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.75rem; }
.ai-chip {
  background: var(--panel-2, #f7f9fc); border: 1px solid var(--line, #e0e6ef);
  color: var(--ink-2); padding: 5px 10px; border-radius: 999px;
  font-size: 0.78rem; cursor: pointer;
}
.ai-chip:hover { background: var(--accent-soft, #e0efff); color: var(--accent-ink, #0d4b8a); }
.aidrawer-input {
  padding: 0.75rem 1rem; border-top: 1px solid var(--line-2);
  display: flex; gap: 0.5rem; align-items: flex-end;
}
.aidrawer-input textarea {
  flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--line);
  border-radius: 6px; font-family: inherit; font-size: 0.85rem; resize: vertical;
  min-height: 60px; max-height: 160px;
}

/* Notifications bell - sits to the right of the AI bell. Hidden until
   the widget initializes, so it never flashes empty on page load. */
.htos-notif-btn { position: relative; }
.htos-notif-btn[hidden] { display: none; }
/* The bell button uses htos-bell-unified (not htos-notif-btn), so give it
   position:relative so the absolute badge anchors to the bell, not to the
   nearest positioned ancestor (which was the avatar wrapper). */
.htos-bell-unified { position: relative; }
.htos-notif-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--fail, #ef4444); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; display: grid; place-items: center;
  border: 2px solid var(--bg, #fff);
  pointer-events: none;
}
.htos-notif-badge[hidden] { display: none; }

.htos-notifdrawer {
  position: fixed; top: 60px; right: 10px; z-index: 70;
  width: 380px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; display: none; flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: calc(100vh - 80px);
}
.htos-notifdrawer.open { display: flex; }
.htos-notifdrawer-head {
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.htos-notifdrawer-head h4 { margin: 0; font-size: 0.9rem; color: var(--ink); }
.htos-notifdrawer-actions {
  display: flex; gap: 0.4rem; align-items: center;
}
.htos-notifdrawer-actions button {
  background: transparent; border: 0; color: var(--muted);
  font-size: 0.78rem; font-family: inherit; cursor: pointer;
  padding: 4px 8px; border-radius: 4px;
}
.htos-notifdrawer-actions button:hover { color: var(--ink); background: var(--panel-2); }
.htos-notifdrawer-body { flex: 1; overflow-y: auto; padding: 0.4rem 0; }

.htos-notif-item {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.7rem 1rem; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.htos-notif-item:hover { background: var(--panel-2); }
.htos-notif-item.unread { border-left-color: var(--accent, #1a88f5); background: var(--panel-soft, var(--panel)); }
.htos-notif-item-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; background: var(--panel-2);
  display: grid; place-items: center; font-size: 14px;
}
/* Token soft-pairs (they carry dark-mode values) so the notification dropdown,
   which shell.js renders on EVERY page, stops showing light pastel islands in
   dark mode. */
.htos-notif-item-icon.high { background: var(--danger-soft); color: var(--danger); }
.htos-notif-item-icon.normal { background: var(--accent-soft); color: var(--accent-ink); }
.htos-notif-item-body { flex: 1; min-width: 0; }
.htos-notif-item-title {
  font-size: 0.85rem; color: var(--ink); font-weight: 600;
  margin: 0 0 0.15rem; line-height: 1.3;
}
.htos-notif-item-text {
  font-size: 0.78rem; color: var(--muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.htos-notif-item-time {
  font-size: 0.7rem; color: var(--muted-2, var(--muted));
  margin-top: 0.2rem;
}
.htos-notif-empty {
  padding: 2rem 1rem; text-align: center; color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .htos-notifdrawer { width: calc(100vw - 20px); right: 10px; }
}

.htos-aidrawer .aicard {
  background: var(--panel-2); border-radius: 6px; padding: 8px 10px;
  margin-bottom: 6px; font-size: 0.8rem; color: var(--ink-2);
}

/* ──────────────────────────────────────────────────────────────────
   Login overlay - always dark, branded
   The login screen is the first thing users see. Force the dark palette
   regardless of system colour-scheme so it looks sharp everywhere.
   ────────────────────────────────────────────────────────────────── */
.htos-login {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, #0e1e3a 0%, #060d1c 100%);
  display: none; place-items: center; z-index: 500;
}
.htos-login.open { display: grid; }

.htos-login-card {
  background: #14233c;
  border: 1px solid rgba(61,124,201,.28);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  width: 380px;
  max-width: calc(100vw - 2rem);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(61,124,201,.07);
}

.htos-login-logo {
  display: block; margin: 0 auto 1.25rem;
  max-width: 200px; width: 100%; height: auto;
}

.htos-login-icon {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.htos-login-card h2 {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #EAF0FA;
}

.htos-2fa-email-display {
  text-align: center;
  font-size: 0.87rem;
  color: #8695B1;
  margin: 0 0 1.25rem;
  line-height: 1.55;
}
.htos-2fa-email-display strong {
  color: #5A9AE6;
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 3px;
  word-break: break-all;
}

.htos-2fa-notice {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.45);
  color: #f59e0b;
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 0 0 1rem;
  text-align: center;
  line-height: 1.4;
}

.htos-login-card .field { margin-bottom: 0.75rem; }

.htos-login-card label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  color: #8695B1;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.htos-login-card input[type="email"],
.htos-login-card input[type="password"],
.htos-login-card input[type="text"] {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: #0c1828;
  border: 1.5px solid #273d62;
  border-radius: 8px;
  color: #EAF0FA;
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.htos-login-card input[type="email"]::placeholder,
.htos-login-card input[type="password"]::placeholder,
.htos-login-card input[type="text"]::placeholder { color: #3d5278; }
.htos-login-card input[type="email"]:focus,
.htos-login-card input[type="password"]:focus,
.htos-login-card input[type="text"]:focus {
  outline: none;
  border-color: #3D7CC9;
  box-shadow: 0 0 0 3px rgba(61,124,201,.22);
}

.htos-2fa-code-input {
  font-family: 'SFMono-Regular', Consolas, monospace !important;
  font-size: 1.65rem !important;
  letter-spacing: 0.55em;
  text-align: center;
  padding: 0.75rem 1rem !important;
}

.htos-login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #8695B1;
  cursor: pointer;
  font-weight: 400;
  margin: 0.25rem 0 0;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.htos-login-remember input[type="checkbox"] {
  width: 15px; height: 15px;
  flex-shrink: 0; cursor: pointer;
  accent-color: #3D7CC9;
  padding: 0 !important; margin: 0 !important;
  background: unset !important; border: unset !important;
  border-radius: unset !important; box-shadow: none !important;
}

.htos-login-card .submit {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #3D7CC9 0%, #00A0DF 100%);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 12px rgba(0,160,223,.32);
  transition: filter .15s, box-shadow .15s;
}
.htos-login-card .submit:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 18px rgba(0,160,223,.48);
}

.htos-login-card .error { color: #FF6B6B; font-size: 0.8rem; margin-top: 0.5rem; min-height: 1em; }
.htos-login-card .muted { color: #8695B1; font-size: 0.85rem; }

.htos-login-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.85rem;
  font-size: 0.83rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.htos-login-links a { color: #5A9AE6; text-decoration: none; }
.htos-login-links a:hover { color: #00A0DF; text-decoration: underline; }

.htos-login-recovery-pre {
  background: #0c1828;
  border: 1px solid #273d62;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #BBC7DB;
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────────────
   Reusable customer sidebar card (used on job + estimate + elsewhere)
   ────────────────────────────────────────────────────────────────── */
.htos-custcard { background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(15,27,50,.02); }
.htos-custcard-head {
  padding: 0.75rem 1rem; display: flex; align-items: center;
  gap: 0.55rem; border-bottom: 1px solid var(--line-2); cursor: pointer; user-select: none;
}
.htos-custcard-head .icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
}
.htos-custcard-head h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); flex: 1; }
.htos-custcard-body { padding: 1rem; }

.htos-streetview {
  background: linear-gradient(120deg, #b5c3dc 0%, #98abcc 100%);
  color: #fff; padding: 1rem; border-radius: 6px; margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 500;
}
.htos-streetview .google {
  font-size: 0.7rem; background: rgba(255,255,255,.25);
  padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 700;
}
/* Live Street View - Google Static API image with an overlay badge,
   clickable to open the address in Google Maps in a new tab. */
.htos-streetview-live {
  display: block; position: relative; overflow: hidden;
  padding: 0; margin-bottom: 0.8rem; border-radius: 8px;
  background: var(--panel-2); aspect-ratio: 10 / 3;
  cursor: pointer; text-decoration: none;
  border: 1px solid var(--line);
  transition: filter .15s;
}
.htos-streetview-live img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s;
}
.htos-streetview-live:hover img { transform: scale(1.02); }
.htos-streetview-live .htos-streetview-overlay {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  padding: 2px 8px; border-radius: 12px;
  font-size: 0.7rem; font-weight: 700;
  backdrop-filter: blur(4px);
}
.htos-streetview-live .htos-streetview-overlay .google {
  background: transparent; padding: 0; color: #fff;
}

/* Property data overlay - fades in after async RentCast fetch */
.htos-prop-data {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);
  padding: 1.2rem 0.75rem 0.5rem;
  color: #fff; display: flex; flex-direction: column; gap: 0.15rem;
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
  border-radius: 0 0 8px 8px;
}
.htos-prop-data.loaded { opacity: 1; }
.htos-prop-val {
  font-size: 0.95rem; font-weight: 700; line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.htos-prop-chips {
  display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem;
}
.htos-prop-chips span {
  font-size: 0.7rem; font-weight: 600;
  background: rgba(255,255,255,0.18);
  padding: 0.1rem 0.45rem; border-radius: 10px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.htos-prop-data.unavail .htos-prop-unavail {
  font-size: 0.72rem; opacity: 0.8;
}

/* Address note - gate codes, dog warnings, access info. Surfaced right
   under the address line so techs see it before they roll out. */
.htos-custcard .cust-addr-note {
  display: flex; gap: 0.55rem; align-items: flex-start;
  padding: 0.55rem 0.7rem; margin: 0 0 0.5rem;
  background: var(--warn-soft, rgba(212, 169, 74, 0.10));
  border-left: 3px solid var(--warn, #d4a94a);
  border-radius: 6px;
  font-size: 0.82rem; line-height: 1.4;
}
.htos-custcard .cust-addr-note-label {
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--warn, #b8861a); flex-shrink: 0;
  padding-top: 0.1rem;
}
.htos-custcard .cust-addr-note-body {
  color: var(--ink); flex: 1; white-space: pre-wrap; word-wrap: break-word;
}

/* Editable customer tags mount - block-level container so the chip
   widget grows naturally with however many tags the customer has. */
.htos-custcard .cust-tags-block {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-2);
}

.htos-custcard .cust-name-row {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-2); margin-bottom: 0.5rem;
}
.htos-custcard .cust-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.htos-custcard .view-details-btn {
  background: transparent; border: 1px solid var(--accent);
  color: var(--accent-ink); padding: 0.25rem 0.75rem; border-radius: 18px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.htos-custcard .view-details-btn:hover { background: var(--accent-soft); }

.htos-custcard .cust-field {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
  align-items: start; padding: 0.6rem 0; border-bottom: 1px solid var(--line-2);
  font-size: 0.85rem;
}
.htos-custcard .cust-field:last-of-type { border-bottom: 0; }
.htos-custcard .cf-value { color: var(--ink); }
.htos-custcard .cf-value.muted { color: var(--muted); }
.htos-custcard .cf-actions { display: flex; gap: 0.25rem; }
.htos-custcard .cf-action {
  width: 26px; height: 26px; border: 0; background: var(--panel-2);
  color: var(--ink-2); border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; text-decoration: none; font-size: 0.75rem;
}
.htos-custcard .cf-action:hover { background: var(--accent-soft); color: var(--accent-ink); }
.htos-custcard .cf-action svg { width: 12px; height: 12px; fill: currentColor; }

.htos-custcard .notif-chip {
  display: inline-block; padding: 0.18rem 0.6rem; border-radius: 12px;
  font-size: 0.72rem; font-weight: 700; margin-top: 0.4rem;
}
.htos-custcard .notif-chip.on { background: var(--ok-soft); color: var(--ok); }

.htos-custcard .cust-tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line-2);
}
.htos-custcard .c-tag {
  background: var(--ok); color: #fff; border-radius: 16px;
  padding: 0.2rem 0.7rem; font-size: 0.72rem; font-weight: 600;
}
.htos-custcard .c-tag.alt-orange { background: #f2a236; }
.htos-custcard .c-tag.alt-purple { background: #8a5bd9; }

.htos-custcard .profile-link {
  display: block; text-align: left;
  padding: 0.75rem 0 0;
  color: var(--accent-ink); font-weight: 600; font-size: 0.85rem;
  border-top: 1px solid var(--line-2); margin-top: 0.75rem;
}

/* ──────────────────────────────────────────────────────────────────
   Price book picker modal
   ────────────────────────────────────────────────────────────────── */
.htos-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,27,50,.45);
  z-index: 400; display: none; align-items: flex-start; justify-content: center;
  padding-top: 5vh;
}
.htos-modal-backdrop.open { display: flex; }
.htos-modal {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; width: min(940px, 96vw); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
}
.htos-modal-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.htos-modal-head h3 { margin: 0; flex: 1; font-size: 1.05rem; color: var(--ink); }
.htos-modal-head .close {
  background: transparent; border: 0; color: var(--muted);
  font-size: 1.4rem; cursor: pointer; padding: 2px 8px;
}
.htos-modal-head .close:hover { color: var(--ink); }

.htos-modal-toolbar {
  padding: 12px 18px; border-bottom: 1px solid var(--line-2);
  background: var(--panel-2);
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center;
}
@media (max-width: 760px) {
  .htos-modal-toolbar { grid-template-columns: 1fr; }
}
.htos-modal-toolbar .pb-search {
  width: 100%; padding: 0.55rem 0.85rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink);
  font-size: 0.9rem; font-family: inherit; outline: none;
}
.htos-modal-toolbar .pb-search:focus { border-color: var(--accent); }
.htos-modal-toolbar select {
  padding: 0.5rem 0.75rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink); font-size: 0.85rem; font-family: inherit;
  cursor: pointer;
}

.htos-modal-body {
  flex: 1; overflow: auto; padding: 0;
}
.pb-list { list-style: none; margin: 0; padding: 0; }
.pb-item {
  padding: 10px 18px; border-bottom: 1px solid var(--line-2);
  cursor: pointer; display: grid;
  grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center;
}
.pb-item-thumb {
  width: 40px; height: 40px; border-radius: 4px; object-fit: cover; display: block; flex-shrink: 0;
}
.pb-item-thumb-empty {
  width: 40px; height: 40px; border-radius: 4px; background: var(--panel-2); flex-shrink: 0;
}
.pb-item:hover, .pb-item.hilite { background: var(--accent-soft); }
.pb-item .name { color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.pb-item .sub {
  color: var(--muted); font-size: 0.76rem; margin-top: 0.15rem;
}
.pb-item .pb-price {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink);
  font-size: 0.92rem;
}
.pb-item .pb-cost {
  color: var(--muted); font-size: 0.72rem; margin-top: 2px; text-align: right;
}
.pb-item .pb-kind {
  color: var(--ink-2); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 8px; background: var(--panel-2); border-radius: 12px;
}

.pb-empty { padding: 2rem; text-align: center; color: var(--muted); }
.pb-loading { padding: 1rem; text-align: center; color: var(--muted); font-style: italic; }

/* ──────────────────────────────────────────────────────────────────
   Attachment composer (shared: customer, job, estimate, invoice)
   ────────────────────────────────────────────────────────────────── */
.att-list { display: flex; flex-direction: column; gap: 6px; }
.att-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 8px 10px; font-size: 0.85rem;
  transition: border-color .1s, box-shadow .1s;
}
.att-row:hover { border-color: var(--accent, #1a88f5); }
.att-row .att-name { color: var(--accent-ink, #0d4b8a); font-weight: 600; text-decoration: none; word-break: break-word; }
.att-row .att-name:hover { text-decoration: underline; }
.att-row .meta { color: var(--muted); font-size: 0.75rem; margin-top: 2px; }
.att-row .att-body { min-width: 0; }
.att-thumb {
  width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
  background: var(--panel); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; text-decoration: none;
}
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-thumb-icon { font-size: 1.6rem; background: var(--panel-2); border: 1px dashed var(--line-2); }
/* Video thumbs: the browser paints the first frame from <video preload=metadata>.
   A play-button overlay signals it's clickable. */
.att-thumb-video { position: relative; background: #000; }
.att-thumb-video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.att-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem; text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.18); transition: background .15s;
}
.att-thumb-video:hover .att-thumb-play { background: rgba(0,0,0,0.35); }

/* ──────────────────────────────────────────────────────────────────
   Attachment grid (replaces the long list for per-option attachments).
   Cards are square-ish with a cover thumbnail on top and the file
   name + size below. 4 per row on desktop, auto-fits down to 2 on
   narrow viewports.
   ────────────────────────────────────────────────────────────────── */
.att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 0.75rem;
}
.att-grid-empty {
  padding: 1rem; color: var(--muted); font-style: italic;
}
.att-card {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.att-card:hover {
  border-color: var(--accent, #1a88f5);
  box-shadow: 0 2px 10px rgba(15,27,50,0.08);
  transform: translateY(-1px);
}
.att-card-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--panel);
  text-decoration: none;
  overflow: hidden;
  border-bottom: 1px solid var(--line-2);
}
.att-card-thumb img,
.att-card-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
}
.att-card-thumb-icon {
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--muted);
  background: var(--panel-2);
  aspect-ratio: 1 / 1;
}
.att-card-thumb-video { position: relative; background: #000; }
.att-card-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.18); transition: background .15s;
}
.att-card-thumb-video:hover .att-card-play { background: rgba(0,0,0,0.32); }

.att-card-body { padding: 8px 10px; min-width: 0; }
.att-card-name {
  display: block;
  font-size: 0.82rem; font-weight: 600;
  color: var(--accent-ink, #0d4b8a);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.att-card-name:hover { text-decoration: underline; }
.att-card-meta {
  color: var(--muted); font-size: 0.72rem; margin-top: 2px;
}
/* × delete pinned to the top-right of the card, sits over the thumbnail.
   Visible by default at low opacity, full opacity on card hover or
   focus-within for keyboard users. */
.att-card-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--ink-2); font-size: 1rem; line-height: 1;
  border-radius: 50%; cursor: pointer;
  opacity: 0.55; transition: opacity .12s, background .12s, color .12s;
  z-index: 2;
}
.att-card:hover .att-card-del,
.att-card:focus-within .att-card-del { opacity: 1; }
.att-card-del:hover { background: var(--danger, #b1281c); color: #fff; border-color: var(--danger, #b1281c); }

/* Customer-visibility pill: click to flip the attachment between staff-only
   and customer-visible. Off state = subtle grey (lock icon), on state = brand
   blue with a faint background (eye icon). The button stretches to the card
   width below the size meta so it's easy to spot from across the screen. */
.att-card-vis {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 3px 8px;
  font-size: 0.72rem; font-weight: 600;
  background: var(--panel-2, #eef1f6);
  color: var(--ink-2, #3b4865);
  border: 1px solid var(--line-2, #dde2eb);
  border-radius: 999px;
  cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.att-card-vis:hover {
  background: var(--accent-soft, #e9f1fc);
  color: var(--accent-ink, #1a4fa8);
  border-color: var(--accent, #3D7CC9);
}
.att-card-vis.is-on {
  background: var(--accent, #3D7CC9);
  color: #fff;
  border-color: var(--accent, #3D7CC9);
}
.att-card-vis.is-on:hover { background: var(--accent-ink, #1a4fa8); }
.att-card-vis:disabled { opacity: 0.5; cursor: wait; }

.att-grid-expand {
  display: block; width: 100%;
  padding: 0.55rem 0.8rem;
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--accent-ink, #0d4b8a); font-weight: 600;
  font-family: inherit; font-size: 0.84rem;
  cursor: pointer; text-align: center;
  margin-bottom: 0.75rem;
  transition: background .12s, border-color .12s;
}
.att-grid-expand:hover { border-color: var(--accent, #1a88f5); background: var(--accent-soft, #e8f1ff); }

/* Bulk-selection header row above the grid */
.att-grid-hdr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 2px; margin-bottom: 8px; min-height: 28px;
}
.att-sel-all-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--ink-2); cursor: pointer; user-select: none;
}
.att-sel-all-wrap input[type=checkbox] {
  width: 15px; height: 15px; accent-color: var(--accent, #3D7CC9); cursor: pointer; flex-shrink: 0;
}
.att-bulk-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.att-bulk-btn {
  padding: 3px 10px; font-size: 0.78rem; font-weight: 600; font-family: inherit;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--line-2);
  transition: background .12s, border-color .12s, color .12s;
}
.att-bulk-vis {
  background: var(--accent, #3D7CC9); color: #fff; border-color: var(--accent, #3D7CC9);
}
.att-bulk-vis:hover { background: var(--accent-ink, #1a4fa8); border-color: var(--accent-ink, #1a4fa8); }
.att-bulk-int {
  background: var(--panel-2); color: var(--ink-2); border-color: var(--line-2);
}
.att-bulk-int:hover { background: var(--panel); border-color: var(--ink-2); }
.att-bulk-clear {
  background: transparent; color: var(--muted); border-color: transparent; padding-left: 6px; padding-right: 6px;
}
.att-bulk-clear:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line-2); }

/* Checkbox pinned to the top-left corner of each card - mirrors att-card-del (top-right) */
.att-card-cb-wrap {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.att-card-cb-wrap input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--accent, #3D7CC9); cursor: pointer;
}
/* Selected card - accent border + subtle glow so selection state is obvious */
.att-card.is-selected {
  border-color: var(--accent, #3D7CC9);
  box-shadow: 0 0 0 2px var(--accent-soft, #e9f1fc);
}

/* Dropzone is the <label> wrapping the hidden file input - click/tap opens
   the system file picker, drop-drop fires upload. One control, one mental model. */
.att-dropzone {
  display: block; cursor: pointer; user-select: none;
  margin-top: 0.75rem;
  border: 2px dashed var(--line, #d0d7e2); border-radius: 10px;
  padding: 18px 14px; text-align: center; color: var(--muted, #5a6b85);
  background: var(--panel-2, #f7f9fc);
  transition: border-color .12s, background .12s, transform .12s;
}
.att-dropzone:hover { border-color: var(--accent, #1a88f5); background: #f0f7ff; color: var(--accent, #1a88f5); }
.att-dropzone.att-dz-active {
  border-color: var(--accent, #1a88f5); background: #e0efff; color: var(--accent, #1a88f5);
  transform: scale(1.01);
}
.att-dz-icon { font-size: 1.8rem; margin-bottom: 4px; }
.att-dz-title { font-size: 0.92rem; font-weight: 600; color: var(--ink, #1a2b4a); }
.att-dz-sub { font-size: 0.76rem; margin-top: 2px; }

.att-hidden-input { display: none; }

.att-queue { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 4px; }
.att-upq-row {
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 6px 10px; font-size: 0.78rem;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
}
.att-upq-name { grid-column: 1 / 2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-upq-size { color: var(--muted); margin-left: 6px; font-weight: 500; }
.att-upq-status { grid-column: 2 / 3; align-self: center; color: var(--muted); font-size: 0.72rem; }
.att-upq-bar { grid-column: 1 / 3; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.att-upq-fill { height: 100%; width: 0%; background: var(--accent, #1a88f5); transition: width .15s; }
.att-upq-ok .att-upq-fill { background: #0b6a3f; }
.att-upq-ok .att-upq-status { color: #0b6a3f; }
.att-upq-fail .att-upq-fill { background: #c1392b; width: 100%; }
.att-upq-fail .att-upq-status { color: #c1392b; }

/* ──────────────────────────────────────────────────────────────────
   Notes composer
   ────────────────────────────────────────────────────────────────── */
.htos-notes-composer { display: flex; flex-direction: column; gap: 0.75rem; }
.htos-notes-form {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.htos-notes-form textarea {
  width: 100%; min-height: 48px; resize: vertical;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: 0.9rem; color: var(--ink);
  outline: none;
}
.htos-notes-form textarea:focus { border-color: var(--accent); }
.htos-notes-form-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.htos-checkbox {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; color: var(--ink-2); cursor: pointer;
}
.htos-checkbox input { accent-color: var(--accent); cursor: pointer; }
.htos-notes-list { display: flex; flex-direction: column; gap: 8px; }
.htos-note {
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 10px 12px;
}
.htos-note-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--muted); margin-bottom: 6px;
}
.htos-note-meta strong { color: var(--ink); font-weight: 600; }
.htos-pinned { background: var(--warn-soft); color: var(--warn); padding: 1px 6px; border-radius: 8px; font-weight: 600; }
.htos-internal { background: var(--panel-2); color: var(--ink-2); padding: 1px 6px; border-radius: 8px; }
.htos-note-actions { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.htos-note:hover .htos-note-actions { opacity: 1; }
.htos-note-actions button {
  background: transparent; border: 0; cursor: pointer;
  padding: 2px 6px; border-radius: 4px; color: var(--muted); font-size: 0.85rem;
}
.htos-note-actions button:hover { background: var(--panel-2); color: var(--ink); }
.htos-note-actions button.danger:hover { color: var(--fail); background: var(--fail-soft); }
.htos-note-body { color: var(--ink); white-space: pre-wrap; font-size: 0.88rem; }
.htos-note-editor {
  width: 100%; min-height: 60px; resize: vertical;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: 0.88rem; color: var(--ink); outline: none;
}
.htos-empty { padding: 16px; text-align: center; color: var(--muted); font-style: italic; font-size: 0.85rem; }

/* ──────────────────────────────────────────────────────────────────
   Activity feed - HCP-parity rebuild (2026-05-14)
   Layout: avatar · user name · icon · label+summary · timestamp · chevron
   Expanding shows a structured key-value detail panel below the body.
   ────────────────────────────────────────────────────────────────── */
.htos-activity { display: flex; flex-direction: column; }
.htos-activity-item {
  display: grid;
  grid-template-columns: 36px 110px 32px 1fr 88px 28px;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.88rem;
}
.htos-activity-item:last-child { border-bottom: 0; }
.htos-activity-item.is-expanded { background: var(--panel-2); border-radius: 6px; }
.htos-activity-item:hover:not(.is-expanded) { background: var(--panel-2); }

/* Avatar bubble - 32px circle, photo or 2-letter initials */
.htos-activity-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2);
  overflow: hidden; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem; color: var(--ink);
  border: 1px solid var(--border-subtle);
}
.htos-activity-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.htos-activity-avatar-initials {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
  color: var(--accent-ink, var(--ink));
}
.htos-activity-avatar-initials.is-system {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.95rem;
}

.htos-activity-user-name {
  font-weight: 600; color: var(--ink-2);
  font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Action icon - 28px circular badge */
.htos-activity-icon-cell { display: flex; align-items: center; justify-content: center; }
.htos-activity-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem; line-height: 1;
  border: 1px solid var(--border-subtle);
}
.htos-activity-icon-email,
.htos-activity-icon-sms { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }
.htos-activity-icon-approval { background: rgba(34, 161, 94, 0.12); color: #166b3b; }
.htos-activity-icon-decline { background: var(--danger-soft, rgba(232,81,55,0.12)); color: var(--danger, #b1281c); }
.htos-activity-icon-job_link { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }

.htos-activity-body { min-width: 0; cursor: pointer; }
.htos-activity-main {
  color: var(--ink);
  word-break: break-word; line-height: 1.4;
}
.htos-activity-main strong { color: var(--ink); font-weight: 700; }

/* Expandable detail panel under the body */
.htos-activity-detail {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--ink-2);
  display: flex; flex-direction: column; gap: 4px;
}
.htos-activity-detail .kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px;
  align-items: baseline;
}
.htos-activity-detail .kv > span {
  color: var(--muted); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600;
}
.htos-activity-detail .kv > strong { color: var(--ink); font-weight: 600; word-break: break-word; }
.htos-activity-detail a { color: var(--accent); }
.htos-activity-bodypreview {
  background: var(--surface-2);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.htos-activity-tl {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 2px;
}
.htos-activity-tl-row {
  font-size: 0.78rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Timestamp - two lines (date, time) */
.htos-activity-when {
  color: var(--ink-2);
  font-size: 0.76rem;
  line-height: 1.3;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Chevron toggle */
.htos-activity-chev {
  background: transparent; border: 0; cursor: pointer;
  padding: 4px; border-radius: 4px;
  color: var(--muted); font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.htos-activity-chev:hover { background: var(--surface-2); color: var(--ink); }
.htos-activity-chev.is-hidden { visibility: hidden; }
.htos-activity-chev-glyph { display: inline-block; transition: transform .15s; }

/* Mobile collapse - drop the user name column, stack timestamp inline */
@media (max-width: 720px) {
  .htos-activity-item {
    grid-template-columns: 32px 28px 1fr 76px 24px;
  }
  .htos-activity-user-name { display: none; }
}
/* Activity feed toolbar - search + date range, global pagination */
.htos-activity-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  padding-bottom: 0.7rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--line, var(--border-subtle, #e3e8ef));
}
.htos-activity-search {
  flex: 1 1 240px; min-width: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line, #e3e8ef); border-radius: 7px;
  background: var(--surface, #fff); color: var(--ink, #1a2b4a);
  font-family: inherit; font-size: 0.88rem; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.htos-activity-search:focus {
  border-color: var(--accent, #3D7CC9);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(61,124,201,0.20));
}
.htos-activity-date {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--ink-2);
  white-space: nowrap;
}
.htos-activity-date > span { font-weight: 600; }
.htos-activity-date input[type="date"] {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line, #e3e8ef); border-radius: 6px;
  background: var(--surface, #fff); color: var(--ink, #1a2b4a);
  font-family: inherit; font-size: 0.82rem; outline: none;
  color-scheme: light dark;
}
.htos-activity-date input[type="date"]:focus {
  border-color: var(--accent, #3D7CC9);
}
.htos-activity-clear {
  background: transparent; border: 1px solid transparent;
  color: var(--ink-2); font-family: inherit; font-size: 0.78rem;
  font-weight: 600; cursor: pointer; padding: 0.35rem 0.6rem;
  border-radius: 6px;
}
.htos-activity-clear:hover {
  background: var(--danger-soft, rgba(232,81,55,0.10));
  color: var(--danger, #b1281c);
}
.htos-activity-meta {
  color: var(--muted, #6b7a90); font-size: 0.78rem;
  margin-bottom: 0.5rem;
}
.htos-activity-more-wrap {
  display: flex; justify-content: center;
  padding-top: 0.8rem;
}
@media (max-width: 540px) {
  .htos-activity-toolbar { flex-direction: column; align-items: stretch; }
  .htos-activity-date { justify-content: space-between; }
}

/* ──────────────────────────────────────────────────────────────────
   Tag chips + searchable picker
   ────────────────────────────────────────────────────────────────── */
.htos-tagchips {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px 0;
  min-height: 10px;
}
.htos-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ok); color: #fff; padding: 3px 10px; border-radius: 14px;
  font-size: 0.75rem; font-weight: 600;
}
.htos-chip-x {
  background: transparent; border: 0; color: #fff; opacity: 0.75;
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px;
}
.htos-chip-x:hover { opacity: 1; }

.htos-chip-picker { position: relative; margin-top: 6px; }
.htos-chip-input {
  width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; font-family: inherit; font-size: 0.8rem;
  color: var(--ink); outline: none;
}
.htos-chip-input::placeholder { color: var(--muted); }
.htos-chip-input:focus { border-color: var(--accent); }
.htos-chip-dropdown {
  display: none;
  position: absolute; top: calc(100% + 3px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  max-height: 220px; overflow-y: auto; z-index: 50;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
.htos-chip-dropdown.open { display: block; }
.htos-chip-dd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; cursor: pointer; font-size: 0.82rem;
  border-bottom: 1px solid var(--line-2);
}
.htos-chip-dd-item:last-child { border-bottom: 0; }
.htos-chip-dd-item:hover, .htos-chip-dd-item.hi { background: var(--accent-soft); color: var(--accent-ink); }
.htos-chip-dd-name { color: var(--ink); font-weight: 600; }
.htos-chip-dd-category {
  color: var(--muted); font-size: 0.7rem; font-family: ui-monospace, monospace;
  background: var(--panel-2); padding: 1px 6px; border-radius: 8px;
}
.htos-chip-dd-create {
  color: var(--accent-ink); font-weight: 600;
  border-bottom: 2px solid var(--line);
}
.htos-chip-dd-create strong { color: var(--accent); }

/* Sidebar cards are compact */
.sidebar-card .card-head { padding: 0.55rem 0.85rem; }
.sidebar-card .card-head h3 { font-size: 0.82rem; letter-spacing: 0.02em; }
.sidebar-card .card-body.tight { padding: 0.6rem 0.85rem 0.75rem; }

/* ──────────────────────────────────────────────────────────────────
   Lead source picker
   ────────────────────────────────────────────────────────────────── */
.htos-leadsrc {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 10px; font-family: inherit;
  font-size: 0.85rem; color: var(--ink); cursor: pointer; outline: none;
}
.htos-leadsrc:focus { border-color: var(--accent); }
.pb-footer {
  padding: 10px 18px; border-top: 1px solid var(--line-2);
  background: var(--panel-2); display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 0.78rem;
}
.pb-footer .hint { color: var(--muted); }

/* ──────────────────────────────────────────────────────────────────
   Header clock chip
   ────────────────────────────────────────────────────────────────── */
#htos-clock-chip { position: relative; display: inline-flex; align-items: center; }

.htos-clock-chip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 0.82rem;
  font-family: 'Syne', system-ui, sans-serif; font-weight: 600;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.htos-clock-chip-btn:hover { background: var(--surface-2); }

.chip-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.chip-dot-green  { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.25); }
.chip-dot-amber  { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.chip-dot-gray   { background: var(--muted); }

.chip-pending-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #f59e0b; color: #fff; font-size: 0.65rem; font-weight: 800;
}

.htos-clock-menu {
  position: fixed; top: 58px; right: 14px; /* overridden by JS on open */
  min-width: 168px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.18);
  padding: 6px; z-index: 9000; display: flex; flex-direction: column; gap: 2px;
}
.htos-clock-menu[hidden] { display: none !important; }

.htos-clock-action {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: none; border-radius: 6px;
  background: none; color: var(--ink); font-size: 0.85rem;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background .1s;
}
.htos-clock-action:hover { background: var(--surface-2); }
.htos-clock-action:disabled { opacity: .5; cursor: not-allowed; }

/* ──────────────────────────────────────────────────────────────────
   Employee clock.js - pending banner + lunch modal
   ────────────────────────────────────────────────────────────────── */
.clock-pending-banner {
  margin: 0.75rem 0; padding: 0.6rem 1rem;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
  border-radius: 8px; color: #92400e; font-size: 0.85rem; font-weight: 600;
}

.clock-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 3000; padding: 0;
}
.clock-modal {
  background: var(--panel); border-radius: 16px 16px 0 0;
  padding: 1.5rem; width: 100%; max-width: 480px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
.clock-modal-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; color: var(--ink); }
.clock-modal-body { font-size: .85rem; color: var(--ink-2); margin: 0 0 1rem; }
.clock-modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.clock-modal-label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.clock-modal-label input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: .9rem; font-family: inherit; }
.clock-modal-actions { display: flex; flex-direction: column; gap: .5rem; }

/* ──────────────────────────────────────────────────────────────────
   Exceptions tab - cards, banners, break row editor
   ────────────────────────────────────────────────────────────────── */
.exc-badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700;
  padding: 0 4px; margin-left: 3px; vertical-align: middle;
}

.exc-list {
  display: flex; flex-direction: column; gap: 12px; padding: 1rem;
}

.exc-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.exc-card-open-entry   { border-left: 4px solid #ef4444; }
.exc-card-auto-closed  { border-left: 4px solid #94a3b8; }
.exc-card-overtime-pending { border-left: 4px solid #f59e0b; }
.exc-card-out-of-shift-pending { border-left: 4px solid #8b5cf6; }
.exc-card-missing-lunch { border-left: 4px solid #f97316; }
.exc-card-no-clock-in  { border-left: 4px solid #64748b; }

.exc-card-head { display: flex; align-items: center; gap: .6rem; }
.exc-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.exc-meta { display: flex; flex-direction: column; gap: .2rem; }
.exc-name { font-weight: 600; font-size: .9rem; color: var(--ink); }

.exc-type-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.exc-type-open-entry           { background: rgba(239,68,68,.12);  color: #b91c1c; }
.exc-type-auto-closed          { background: rgba(148,163,184,.15); color: #64748b; }
.exc-type-overtime-pending     { background: rgba(245,158,11,.12);  color: #92400e; }
.exc-type-out-of-shift-pending { background: rgba(139,92,246,.12);  color: #5b21b6; }
.exc-type-missing-lunch        { background: rgba(249,115,22,.12);  color: #9a3412; }
.exc-type-no-clock-in          { background: rgba(100,116,139,.12); color: #475569; }

.exc-desc { font-size: .85rem; color: var(--ink-2); margin: 0; }

.exc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }

/* Exceptions toolbar: search input + item count */
.exc-toolbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem .25rem; flex-wrap: wrap;
}

/* Entries tab - Time Entries Manager toolbar + table. Mirrors .exc-toolbar
   styles so the two admin tabs feel like one family. */
.ent-toolbar {
  display: flex; align-items: flex-end; gap: .6rem;
  padding: .75rem 1rem .5rem; flex-wrap: wrap;
}
.ent-search {
  flex: 1 1 200px; min-width: 180px; max-width: 280px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink); font-size: .875rem; font-family: inherit;
}
.ent-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ent-field { display: inline-flex; flex-direction: column; gap: 3px; font-size: .75rem; color: var(--ink-2); }
.ent-field span { font-weight: 600; }
.ent-field input, .ent-field select {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink); font-size: .85rem; font-family: inherit;
  min-width: 120px;
}
.ent-field select { min-width: 150px; }
.ent-table-wrap { padding: .5rem 1rem 1rem; overflow-x: auto; }
.ent-table tbody tr:hover { background: var(--panel-2); }
@media (max-width: 720px) {
  .ent-toolbar { flex-direction: column; align-items: stretch; }
  .ent-search, .ent-field, .ent-field select { max-width: none; width: 100%; }
}
.exc-search {
  flex: 1; min-width: 160px; max-width: 300px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink); font-size: .875rem; font-family: inherit;
}
.exc-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.exc-pg-label { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }

/* Dismiss (✕) button on each exception card */
.exc-dismiss-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink-3, #94a3b8); font-size: .9rem; line-height: 1;
  padding: 2px 5px; border-radius: 4px; flex-shrink: 0;
}
.exc-dismiss-btn:hover { background: var(--line); color: var(--ink); }

/* Pagination bar */
.exc-pagination {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .75rem 1rem; border-top: 1px solid var(--line);
}

/* Status banner inside edit modal. Default = pending (amber). Variants
   surface non-pending states so the admin sees why hours / status look
   the way they do without having to read the row before opening Edit. */
.exc-modal-banner {
  margin-bottom: .75rem; padding: .6rem .9rem;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
  border-radius: 7px; color: #92400e; font-size: .84rem; font-weight: 600;
}
.exc-modal-banner-info {
  background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.35);
  color: #1e40af;
}
.exc-modal-banner-warn {
  background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.35);
  color: #991b1b;
}

/* Break row editor inside time entry edit modal */
.exc-break-row {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem;
  flex-wrap: wrap;
}
.exc-break-label {
  font-size: .8rem; color: var(--ink-2, #5a6b85);
  min-width: 56px; font-weight: 600;
}
.exc-break-row input[type="time"],
.exc-break-row input[type="datetime-local"],
.form-grid input[type="datetime-local"],
.form-grid input[type="date"] {
  background: var(--surface, #fff); color: var(--ink, #1a2b4a);
  border: 1px solid var(--line, #e3e8ef); border-radius: 6px;
  font-size: .875rem; font-family: inherit;
  color-scheme: light dark;
}
/* Time/date inputs inside the break-row editor get 44px touch height
   (design-system.md §5). Width is sized so Chrome's 12-hour "10:32 AM"
   with its AM/PM spinner fits without clipping the meridiem - the old
   90px clipped it to "10:32 A". */
.exc-break-row input[type="time"],
.exc-break-row input[type="datetime-local"] {
  width: 120px; padding: 9px 10px; min-height: 44px; box-sizing: border-box;
}
.form-grid input[type="datetime-local"],
.form-grid input[type="date"] { padding: 9px 10px; min-height: 44px; box-sizing: border-box; }
.exc-rm-break, .exc-rm-lunch {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3, #94a3b8); font-size: 1.1rem; line-height: 1;
  padding: 2px 8px; border-radius: 4px;
}
.exc-rm-break:hover, .exc-rm-lunch:hover {
  background: var(--line, #e3e8ef); color: var(--ink, #1a2b4a);
}

/* ──────────────────────────────────────────────────────────────────
   Discount picker widget (H.discountPicker)
   Used by estimate option line items + job line items
   ────────────────────────────────────────────────────────────────── */
.htos-discount-picker .htos-modal-body { padding: 1.1rem 1.4rem 0.6rem; }
.htos-discount-sub {
  margin: 0 0 1rem; color: var(--ink-2);
  font-size: 0.86rem;
}
.htos-discount-mode-row { margin: 0.4rem 0 0.4rem; }
.htos-discount-mode {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
  background: var(--surface, #fff);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.htos-discount-mode:hover { border-color: var(--accent, #3D7CC9); }
.htos-discount-mode.is-active {
  border-color: var(--accent, #3D7CC9);
  background: var(--accent-soft, rgba(61,124,201,0.08));
  box-shadow: 0 0 0 1px var(--accent, #3D7CC9);
}
.htos-discount-mode input[type="radio"] {
  margin: 0; accent-color: var(--accent, #3D7CC9); cursor: pointer;
  flex-shrink: 0;
}
.htos-discount-mode-label {
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.htos-discount-new[hidden],
.htos-discount-standard[hidden] { display: none; }
.htos-discount-new, .htos-discount-standard {
  padding: 0.4rem 0 0.6rem 1.8rem;
}
.htos-discount-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0.7rem; align-items: end;
}
@media (max-width: 540px) {
  .htos-discount-grid { grid-template-columns: 1fr; }
  .htos-discount-new, .htos-discount-standard { padding-left: 0.5rem; }
}
.htos-discount-field { display: flex; flex-direction: column; gap: 0.3rem; }
.htos-discount-field-name { grid-column: 1 / -1; }
@media (min-width: 541px) {
  .htos-discount-field-name { grid-column: 1 / -1; }
}
.htos-discount-field-label {
  color: var(--ink-2); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.htos-discount-field input,
.htos-discount-field select {
  padding: 0.55rem 0.7rem; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface, #fff); color: var(--ink);
  font-family: inherit; font-size: 0.95rem; outline: none;
  transition: border-color .12s;
}
.htos-discount-field input:focus,
.htos-discount-field select:focus {
  border-color: var(--accent, #3D7CC9);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(61,124,201,0.20));
}
.htos-discount-amount-wrap {
  position: relative; display: flex; align-items: center;
}
.htos-discount-amount-wrap input { width: 100%; padding-right: 2rem; }
.htos-discount-amount-suffix {
  position: absolute; right: 0.7rem;
  color: var(--ink-2); font-weight: 600;
  pointer-events: none;
}
.htos-discount-preview {
  margin-top: 0.6rem; min-height: 1.2rem;
  font-size: 0.84rem; color: var(--ink-2);
}
.htos-discount-preview.is-set {
  color: var(--danger, #b1281c); font-weight: 600;
}
.htos-discount-tpl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; width: 100%;
  padding: 0.7rem 0.9rem; margin-bottom: 0.4rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface, #fff); color: var(--ink);
  font-family: inherit; font-size: 0.92rem; cursor: pointer;
  text-align: left; transition: border-color .12s, background .12s;
}
.htos-discount-tpl:hover { border-color: var(--accent, #3D7CC9); }
.htos-discount-tpl.is-selected {
  border-color: var(--accent, #3D7CC9);
  background: var(--accent-soft, rgba(61,124,201,0.08));
  box-shadow: 0 0 0 1px var(--accent, #3D7CC9);
}
.htos-discount-tpl-info { display: flex; flex-direction: column; gap: 0.15rem; }
.htos-discount-tpl-info strong { font-size: 0.95rem; }
.htos-discount-tpl-meta {
  color: var(--ink-2); font-size: 0.78rem;
}
.htos-discount-tpl-amount {
  color: var(--danger, #b1281c); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.htos-discount-templates-empty {
  padding: 0.9rem 1rem; color: var(--ink-2); font-size: 0.86rem;
  text-align: center; border: 1px dashed var(--line); border-radius: 8px;
}
.htos-discount-templates-empty a { color: var(--accent-ink, #3D7CC9); font-weight: 600; }
.htos-discount-foot {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  padding: 0.9rem 1.4rem; border-top: 1px solid var(--line);
}