/* Web fonts matching levis4floors.com (Playfair Display headings / Montserrat
   body), for the "l4f.com" theme below. Self-hosted, latin subset only —
   same files as public/sign.html, see public/vendor/fonts/README.txt. Only
   fetched by the browser when the theme actually uses them (font-display:
   swap + not referenced unless data-theme="l4f" is set). */
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("vendor/fonts/playfairdisplay-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("vendor/fonts/playfairdisplay-italic-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("vendor/fonts/montserrat-latin-var.woff2") format("woff2");
}

:root {
  --bg: #f5f6fa;
  --panel: #ffffff;
  --panel-alt: #eef1f8;
  --border: #dfe3ec;
  --border-strong: #c7cede;
  --text: #262626;
  --muted: #5b6472;
  --muted-light: #98a1b0;
  --accent: #043276;
  --accent-dark: #021f4a;
  --accent-light: #e8edf7;
  --gold: #cda43e;
  --gold-dark: #a9822b;
  --danger: #d6455a;
  --danger-bg: #fdecee;
  --ok: #21925a;
  --ok-bg: #e9f8f0;
  --warn: #e8590c;
  --grey-chip: #8b93a3;
  --red-chip: #e0576b;
  --green-chip: #35a86e;
  --blue-chip: #4c8fe0;
  --purple-chip: #9c6bd6;
  --default-chip: #6b7688;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.09);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.18);

  --ease: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

.hidden { display: none !important; }

::selection { background: var(--accent-light); color: var(--accent-dark); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* thin, quiet scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); }

/* ---------- login ---------- */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(205, 164, 62, 0.14), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(4, 50, 118, 0.35), transparent 45%),
    linear-gradient(160deg, #051c40 0%, #02214f 100%);
}
.login-box {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 350px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.login-logo {
  margin: 0 0 18px;
  text-align: center;
}
.login-logo img {
  max-width: 190px;
  height: auto;
}
.login-sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.login-box .field { margin-bottom: 14px; }
.login-submit { width: 100%; margin-top: 8px; padding: 10px; font-size: 13.5px; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { opacity: 0.8; }
.ms-linked { color: #2f8a4e; font-weight: 600; white-space: nowrap; }
.ms-login-block { margin-bottom: 4px; }
.ms-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #8c8c8c; border-radius: 4px; background: #fff; color: #5e5e5e; font: 600 14px "Segoe UI", system-ui, sans-serif; text-decoration: none; }
.ms-login-btn:hover { background: #f3f3f3; }
.ms-login-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; color: var(--muted); font-size: 12px; }
.ms-login-divider::before, .ms-login-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border, #e2e5ec); }
.login-forgot { display: block; width: 100%; text-align: center; margin-top: 14px; }
.form-success { color: #2e8b57; font-size: 13px; margin: 8px 0; }

/* ---------- shell ---------- */

#app {
  display: flex;
  min-height: 100vh;
}

#sidebar {
  width: 252px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #06346f 0%, #021f4a 100%);
  color: #dfe2e8;
  padding: 18px 12px;
  overflow-y: auto;
  /* dvh (dynamic viewport height) tracks the *visible* viewport as a mobile
     browser's address bar shows/hides — plain vh is locked to the largest
     viewport, leaving a gap (or overflow) at the bottom that shifts as the
     chrome animates. Falls back to vh on browsers without dvh support. */
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  /* Stops an over-scroll at the top/bottom of the sidebar's own nav list
     from chaining into a rubber-band scroll of the page behind it — the
     other half of the mobile "wiggle" (the first half is the body-scroll
     lock in toggleMobileSidebar()/closeMobileSidebar() in app.js). */
  overscroll-behavior-y: contain;
}

/* #sidebar is now a flex column (for the pinned footer below) — keep the
   env badge hugging its text instead of stretching the full width. */
.env-badge { align-self: flex-start; }
/* Floor Flows prototype/demo (server/brand.js): oak, uppercase, can't be missed */
.env-badge.env-badge-demo { background: #b8742a; color: #fff; border-color: #b8742a; text-transform: uppercase; letter-spacing: .08em; }

/* Settings gear pinned to the bottom of the sidebar (pushed down by the
   auto margin when the nav doesn't fill the height). */
.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c2c7d1;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.sidebar-settings-btn:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
.sidebar-settings-btn:active { transform: translateY(1px); }

.brand {
  padding: 4px 8px 16px;
}

.brand img {
  display: block;
  width: 133px;
  height: auto;
  max-width: 100%;
}

.env-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--danger);
  padding: 3px 9px;
  border-radius: 999px;
  margin: 2px 6px 8px;
}

/* Slightly different sidebar tone + accent strip on production, so it's
   visually distinct at a glance from staging/dev. */
body.env-production #sidebar {
  background: linear-gradient(180deg, #17385c 0%, #050f24 100%);
  border-top: 3px solid var(--danger);
}

.actor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 14px;
  font-size: 12px;
  color: #9098a8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}
.actor-bar #actorLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c2c7d1; font-weight: 500; }
.actor-bar button {
  background: none;
  border: none;
  color: #7ea6f4;
  cursor: pointer;
  font-size: 11.5px;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--ease);
}
.actor-bar button:hover { color: #a9c3f7; text-decoration: underline; }

.sidebar-search { position: relative; margin-bottom: 18px; }
.sidebar-search input {
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 12.5px;
  transition: border-color var(--ease), background var(--ease);
}
.sidebar-search input::placeholder { color: #9fb0cc; }
.sidebar-search input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.11);
}
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 340px;
  overflow-y: auto;
  z-index: 40;
}
.search-results.hidden { display: none; }
.search-result-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  transition: background var(--ease);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.search-result-item:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.search-result-item:hover { background: var(--accent-light); }
.search-result-item .sr-customer { font-weight: 600; font-size: 13px; }
.search-result-item .sr-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.search-result-empty { padding: 12px; font-size: 12.5px; color: var(--muted); }

/* Address Autofill suggestion dropdown — wraps just the address field
   itself (see attachAddressAutofill in app.js), not the whole .field block,
   so it doesn't disturb the label or map link around it. */
.autofill-wrap { position: relative; }
.autofill-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 260px;
  overflow-y: auto;
  z-index: 45;
}
.autofill-results.hidden { display: none; }
.autofill-result-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--ease);
}
.autofill-result-item:last-child { border-bottom: none; }
.autofill-result-item:hover, .autofill-result-item.active { background: var(--accent-light); }
.autofill-result-item .afr-name { font-weight: 600; font-size: 13px; color: var(--text); }
.autofill-result-item .afr-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Admin Address Autofill usage page */
.mapbox-usage-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  max-width: 420px;
  margin-bottom: 20px;
}
.mapbox-usage-count { font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.mapbox-usage-bar { height: 8px; border-radius: 4px; background: var(--accent-light); overflow: hidden; margin-bottom: 10px; }
.mapbox-usage-bar-fill { height: 100%; background: var(--gold); border-radius: 4px; }
.mapbox-usage-bar-fill.over { background: var(--accent); }
.mapbox-usage-cost { font-size: 13px; color: var(--text); }

/* ---------- IT admin page ---------- */

/* At-a-glance stat tiles — compact "instrument panel" row: monospace
   readouts, a thin glow on the live gauges, tight spacing. */
.it-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 0 0 20px;
}
.it-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  box-shadow: var(--shadow-xs);
}
.it-tile-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.it-tile-value {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.it-tile-value.warn { color: var(--gold-dark); }
.it-tile-value.bad { color: var(--danger); }
.it-tile-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.it-tile-icon { margin-right: 4px; }

/* Host CPU / Host RAM: a real meter — a conic-gradient ring driven by the
   --pct custom property (set in itTile()), with the number in the center
   instead of a plain text stat. A faint matching glow + a pulsing "live"
   dot are the futuristic/HUD cues — subtle enough to hold up in every
   theme (Light/Dark/L4F.com) without any hardcoded color. */
.it-tile-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; position: relative; }
.it-tile-gauge .it-tile-label { display: flex; align-items: center; }
.it-tile-gauge .it-tile-value { font-size: 13px; color: var(--text); }
.it-gauge {
  --pct: 0;
  --gauge-color: var(--accent);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(var(--gauge-color) calc(var(--pct) * 1%), var(--border) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px -2px var(--gauge-color);
  transition: background 500ms ease, box-shadow 500ms ease;
}
.it-gauge.warn { --gauge-color: var(--gold-dark); }
.it-gauge.bad { --gauge-color: var(--danger); }
.it-gauge-inner {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border);
}
.it-tile-gauge::after {
  content: "";
  position: absolute;
  top: 2px;
  right: calc(50% - 30px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 5px 1px var(--ok);
  animation: it-live-pulse 2.2s ease-in-out infinite;
}
@keyframes it-live-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* Containers: up/total reads more naturally as a slim bar than a ring. */
.it-tile-meterbar { height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 6px; }
.it-tile-meterbar-fill { height: 100%; width: 0%; background: var(--ok); border-radius: 3px; transition: width 500ms ease, background 300ms ease; }

/* Compact stat row inside a section body (e.g. SendGrid) */
.it-mini-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 4px 0 10px;
}
.it-mini-tile {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.it-mini-value { font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.it-mini-value.bad { color: var(--danger); }
.it-alert { background: var(--danger-bg); color: var(--text, inherit); border-left: 4px solid var(--danger); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; line-height: 1.45; }
.it-alert strong { color: var(--danger); }
.ms-secret-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.it-mini-label { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Collapsible sections */
.it-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
  margin-bottom: 12px;
  overflow: hidden;
}
.it-section > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  transition: background var(--ease);
}
.it-section > summary::-webkit-details-marker { display: none; }
.it-section > summary:hover { background: var(--panel-alt); }
.it-section > summary::after {
  content: '⌄';
  margin-left: 10px;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  transition: transform var(--ease);
}
.it-section[open] > summary::after { transform: rotate(180deg); }
.it-section[open] > summary { border-bottom: 1px solid var(--border); }
.it-sec-icon { font-size: 16px; }
.it-sec-note { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--muted); }
.it-sec-note.bad { color: var(--danger); }
.it-sec-body { padding: 16px; }
.it-sec-body > .dash-section-title:first-child { margin-top: 0; }
.it-sec-body h4 { margin: 16px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.it-sec-body h4:first-of-type { margin-top: 8px; }
.it-sec-body ul { margin: 4px 0 10px; padding-left: 20px; }
.it-sec-body ul li { font-size: 13px; line-height: 1.5; margin: 4px 0; }

/* ---------- IT page: grouped layout ---------- */
/* Everything below is scoped under .it-page (the IT view's own wrapper) so
   it can't leak onto Dashboard/Insights/Training, which reuse the plain
   .it-tile / .it-section classes for their own unrelated widgets. */

.it-page .it-tile { transition: transform var(--ease), box-shadow var(--ease); }
.it-page .it-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.it-quicknav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 2px;
  margin: 0 0 22px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.it-navpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}
.it-navpill-icon { font-size: 12px; }
.it-navpill:hover { background: var(--panel-alt); color: var(--text); border-color: var(--border-strong); }
.it-navpill.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-xs); }

/* True masonry-style packing (via CSS columns) so a group card whose
   sections happen to be open doesn't leave a gap under a shorter neighbor
   the way a 2-col CSS grid would. */
.it-groups {
  column-count: 2;
  column-gap: 20px;
}
.it-group {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0 0 20px;
  scroll-margin-top: 60px;
  vertical-align: top;
}
.it-group-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 18px 15px;
}
.it-group-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.it-group-icon-blue { background: rgba(76, 143, 224, 0.16); }
.it-group-icon-green { background: rgba(53, 168, 110, 0.16); }
.it-group-icon-purple { background: rgba(156, 107, 214, 0.16); }
.it-group-icon-gold { background: rgba(205, 164, 62, 0.2); }
.it-group-head h2 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); }
.it-group-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.it-group-body { border-top: 1px solid var(--border); }

/* Sections nested inside a group render as flush list rows sharing the
   card's own border/shadow, instead of each being its own boxed panel. */
.it-group .it-section { border: none; border-radius: 0; box-shadow: none; margin: 0; border-bottom: 1px solid var(--border); }
.it-group .it-section:last-child { border-bottom: none; }
.it-group .it-section > summary { padding: 13px 18px; font-size: 13.5px; }
.it-group .it-section[open] > summary { border-bottom-color: var(--border); }
.it-group .it-sec-body { padding: 2px 18px 18px; }

/* IT › Error Log */
.error-log-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.error-log-row { border-bottom: 1px solid var(--border); }
.error-log-row:last-child { border-bottom: none; }
.error-log-row > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
}
.error-log-row > summary::-webkit-details-marker { display: none; }
.error-log-row > summary:hover { background: var(--panel-alt); }
.error-log-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-light); flex-shrink: 0; }
.error-log-row.fatal .error-log-dot { background: var(--danger); }
.error-log-when { color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.error-log-source { color: var(--muted); font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.error-log-msg { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.error-log-stack {
  margin: 0;
  padding: 10px 14px 14px 33px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel-alt);
}

@media (max-width: 900px) {
  .it-groups { column-count: 1; }
  .it-quicknav { position: static; }
}

.itsig-proscons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 4px;
}
.itsig-pro h4, .itsig-con h4 { margin-top: 0; }
.itsig-preview {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 230px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  margin: 8px 0 12px;
}
.itsig-template-pre {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
  margin: 8px 0;
}

/* Host CPU/RAM strip inside the System resources section */
.it-metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 12px 14px;
  background: var(--panel-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.it-metric { font-size: 15px; }
.it-metric strong { color: var(--accent); font-size: 16px; }

/* Container cards */
.it-container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.it-container-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--panel);
}
.it-container-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.it-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.it-container-name { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.it-container-status { font-size: 12.5px; color: var(--text); margin-bottom: 4px; }
.it-container-meta { font-size: 11.5px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }

.it-empty {
  padding: 16px;
  background: var(--ok-bg);
  color: var(--ok);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* ---------- IT › Setup (onboarding reference) ---------- */
.it-setup-cat { margin-top: 18px; }
.it-setup-cat:first-of-type { margin-top: 12px; }
.it-setup-cat-head { display: flex; align-items: baseline; gap: 10px; }
.it-setup-cat-head h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.it-setup-cat-hint { font-size: 12px; margin: 2px 0 8px; }
.it-setup-list { display: flex; flex-direction: column; gap: 8px; }
/* Training admin list only — compact metadata cards (no rendered body_html)
   fit fine side by side; Dashboard My Training keeps a plain vertical list
   and stays collapsed-by-default instead (see .mytraining-* below), since
   each row can expand into full lesson content. */
.training-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }

/* ---------- Dashboard: My Training ---------- */
.mytraining-cat { margin-top: 14px; }
.mytraining-cat:first-child { margin-top: 0; }
.mytraining-cat-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.mytraining-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.mytraining-toggle-title { font-weight: 700; font-size: 13.5px; }
.mytraining-caret { margin-left: auto; transition: transform var(--ease); color: var(--muted); }
.mytraining-toggle-open .mytraining-caret { transform: rotate(90deg); }
.mytraining-body { margin-top: 10px; }
.mytraining-body[hidden] { display: none; }
.it-setup-empty { font-size: 12.5px; padding: 8px 0; }
.it-setup-item {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--panel);
}
.it-setup-item-main { min-width: 0; }
.it-setup-item-title { font-weight: 700; font-size: 13.5px; }
.it-setup-link { display: inline-block; font-size: 12px; margin-top: 3px; word-break: break-all; }
.it-setup-notes { font-size: 12.5px; color: var(--text); margin-top: 5px; white-space: pre-wrap; line-height: 1.5; }
.it-setup-file { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.it-setup-file a { font-weight: 600; text-decoration: none; }
.it-setup-file a:hover { text-decoration: underline; }
.it-setup-item-acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  border-top: 1px solid var(--border); padding-top: 7px; margin-top: 1px;
}
.it-setup-item-acts .btn-link { font-size: 12px; padding: 1px 3px; }
.it-setup-item-acts .btn-link[disabled] { opacity: .3; cursor: default; }
.it-setup-item-acts [data-up], .it-setup-item-acts [data-down] { font-size: 13px; }
.it-setup-item-acts .it-danger, .it-setup-file .it-danger { color: var(--danger); margin-left: auto; }
.it-setup-file .it-danger { margin-left: 0; }

.it-setup-form { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.it-setup-form h4 { margin: 0; font-size: 14px; }
.it-setup-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.it-setup-form input, .it-setup-form textarea, .it-setup-form select {
  font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--text);
}
.it-setup-form textarea { resize: vertical; }
.it-setup-form-acts { display: flex; align-items: center; gap: 12px; margin-top: 2px; }

/* ---------- IT › System Map / Marketing Map (embedded standalone docs) ---------- */
.it-embed-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.it-embed-toolbar a { font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.it-embed-toolbar a:hover { text-decoration: underline; }
.it-embed-placeholder { padding: 24px 0; text-align: center; color: var(--muted); font-size: 13px; }
.it-embed-frame {
  display: block; width: 100%; height: 760px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff;
}

/* Floor Flows: same embedded-doc frame, sized to fill the view */
.floor-flows-frame { height: calc(100vh - 170px); min-height: 520px; }

/* ---------- Contacts directory ---------- */
.contacts-view { max-width: 940px; }
.contacts-section { margin-bottom: 20px; }

/* kind header (Vendors / Staff) — small, quiet, with a count */
.contacts-kind-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.contacts-kind-head h2 {
  margin: 0; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.contacts-kind-head .btn-link { margin-left: auto; font-size: 12px; }
.contacts-count {
  font-size: 10.5px; font-weight: 800; color: var(--muted);
  background: var(--panel-alt); border-radius: 999px;
  padding: 1px 7px; font-variant-numeric: tabular-nums;
}

/* collapsible branch group — each store is its own bordered block */
.contacts-group {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
}
.contacts-group > summary {
  display: flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 12px;
  background: var(--panel-alt);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text);
}
.contacts-group[open] > summary { border-bottom: 1px solid var(--border); }
.contacts-group > summary::-webkit-details-marker { display: none; }
.contacts-group > summary::before {
  content: "\203A"; font-size: 15px; line-height: 1; color: var(--muted);
  transition: transform .15s ease;
}
.contacts-group[open] > summary::before { transform: rotate(90deg); }
.contacts-group > summary:hover { color: var(--accent); }
.contacts-group > summary .contacts-count { margin-left: auto; }

/* card grid */
.contacts-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.contacts-group .contacts-grid { padding: 10px; }
.contacts-section > .contacts-grid { padding: 5px 0 2px; }
.contacts-empty { padding: 6px 2px 10px; font-size: 12px; }
.contact-card {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color .12s, box-shadow .12s;
}
.contact-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.cc-name {
  font-weight: 700; font-size: 13px; color: var(--text);
  line-height: 1.3; overflow-wrap: anywhere;
}
.contact-card.cc-editable .cc-name { padding-right: 70px; }
.cc-tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--gold-dark); background: rgba(205, 164, 62, 0.15);
  border-radius: 999px; padding: 0 6px;
}
.cc-dials { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-line { font-size: 11.5px; color: var(--muted); }
.cc-acct-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.cc-acct-num { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.cc-note { font-size: 11px; color: var(--muted-light); line-height: 1.4; }

.contacts-dial {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; font-size: 12px; text-decoration: none;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-light); color: var(--accent-dark, var(--accent));
  transition: background .12s, color .12s;
}
.contacts-dial:hover { background: var(--accent); color: #fff; text-decoration: none; }
.contacts-dial.ghost {
  background: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.contacts-dial.ghost:hover {
  background: var(--panel-alt); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* admin actions — reveal on hover */
.cc-acts {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 1px;
  opacity: 0; transition: opacity .12s;
}
.contact-card:hover .cc-acts, .cc-acts:focus-within { opacity: 1; }
.cc-acts button {
  border: none; background: none; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 2px 3px;
  border-radius: var(--radius-sm); color: var(--muted);
}
.cc-acts button:hover { background: var(--panel-alt); color: var(--text); }
.cc-acts button[disabled] { opacity: .25; cursor: default; }
.cc-acts .cc-del:hover { background: var(--danger-bg); color: var(--danger); }
@media (hover: none) { .cc-acts { opacity: 1; } }

/* Contacts embedded as a collapsible dashboard section (#dashContactsWrap,
   inside the .dash-contacts-section <details>) — tighter than the old
   standalone page since it now shares the dashboard with everything else. */
.dash-contacts-section .it-sec-body { padding: 8px 14px 14px; }
.dash-contacts-section .contacts-view { max-width: none; }
.dash-contacts-section .contacts-section { margin-bottom: 14px; }
.dash-contacts-section .contacts-section:last-child { margin-bottom: 0; }
.dash-contacts-section .contacts-group { margin-bottom: 10px; }
.dash-contacts-section .contacts-group:last-child { margin-bottom: 0; }

/* Company + Manufacturer Links, combined into one collapsible dashboard
   section the same way (.dash-links-section) — same "kind head" label
   style as the Contacts Vendors/Staff groups for a consistent look. */
.dash-links-section .it-sec-body { padding: 8px 14px 4px; }
.dash-links-section .dash-linkgrid { margin-bottom: 14px; }
.dash-links-section .dash-links-sub2 { margin-top: 4px; }

/* Phone width: trade the shadowed card grid for one iOS-style grouped list —
   a single rounded/bordered block with thin dividers between rows instead of
   a gap+shadow per card. Same information (incl. account numbers, so a
   vendor's acct # is visible without tapping anything), less vertical space
   and fewer competing edges on a small screen. */
@media (max-width: 700px) {
  .contacts-grid {
    grid-template-columns: 1fr; gap: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    overflow: hidden; background: var(--panel);
  }
  .contacts-group .contacts-grid, .contacts-section > .contacts-grid { padding: 0; }
  .contact-card {
    border: none; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  .contact-card:last-child { border-bottom: none; }
  .contact-card:hover { box-shadow: none; }
  .contacts-dial { padding: 5px 11px; font-size: 12.5px; }
}

/* ---------- Planner (Admin) ---------- */
.planner-monthbar {
  display: flex; align-items: center; gap: 4px;
  margin: 4px 0 18px; padding: 6px 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  width: fit-content;
}
.planner-monthbar .btn-link {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: 14px;
}
.planner-monthbar #plannerToday { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; }
.planner-monthlabel { font-weight: 800; font-size: 15px; min-width: 148px; text-align: center; letter-spacing: -0.01em; }
/* Calendar is its own full-width panel above everything else — the most
   glanced-at part of the page, and full width gives its 7-day grid room to
   breathe (wider cells, less chip truncation) on every screen size. */
.planner-calendar-panel { margin-bottom: 18px; }
.planner-cols {
  display: grid; gap: 18px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 860px) { .planner-cols { grid-template-columns: 1fr; } }
.planner-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.planner-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 16px 18px;
}
.planner-panel h2 {
  margin: 0 0 12px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.planner-add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.planner-add-row input[type="text"] {
  flex: 1; min-width: 0; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px;
  transition: border-color .12s;
}
.planner-add-row input[type="text"]:focus { border-color: var(--accent); outline: none; }
.planner-add-row .btn.primary { white-space: nowrap; }
.planner-empty {
  padding: 16px 10px; font-size: 12px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
}

/* goal cards */
.planner-cards { display: flex; flex-direction: column; gap: 10px; }
.planner-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); padding: 11px 13px;
  transition: border-color .12s, box-shadow .12s;
}
.planner-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.planner-card-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.planner-card-title {
  flex: 1; min-width: 120px; font-weight: 700; font-size: 13px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 4px 6px; background: transparent; color: var(--text); font-family: inherit;
  transition: border-color .12s, background .12s;
}
.planner-card-title:hover { border-color: var(--border); }
.planner-card-title:focus { border-color: var(--accent); outline: none; background: var(--panel); }
.planner-card-notes {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 40px;
  margin-top: 8px; font-family: inherit; font-size: 12px; line-height: 1.45;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 9px; background: var(--panel); color: var(--text);
  transition: border-color .12s;
}
.planner-card-notes::placeholder { color: var(--muted-light); }
.planner-card-notes:focus { border-color: var(--accent); outline: none; }
.planner-card-acts { display: flex; justify-content: flex-end; gap: 2px; margin-top: 8px; }

/* task rows */
.planner-rows { display: flex; flex-direction: column; gap: 6px; }
.planner-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); padding: 7px 9px;
  transition: border-color .12s, box-shadow .12s;
}
.planner-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.planner-row-body {
  flex: 1; min-width: 120px; font-size: 13px; font-family: inherit;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 4px 6px; background: transparent; color: var(--text);
  transition: border-color .12s, background .12s;
}
.planner-row-body:hover { border-color: var(--border); }
.planner-row-body:focus { border-color: var(--accent); outline: none; background: var(--panel); }
.planner-row-acts { display: flex; gap: 2px; }

.planner-card-acts button, .planner-row-acts button {
  border: none; background: none; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 5px 7px;
  border-radius: var(--radius-sm); color: var(--muted);
  transition: background .12s, color .12s;
}
.planner-card-acts button:hover, .planner-row-acts button:hover { background: var(--panel-alt); color: var(--text); }
.planner-card-acts button[disabled], .planner-row-acts button[disabled] { opacity: .25; cursor: default; }
.planner-card-acts button[disabled]:hover, .planner-row-acts button[disabled]:hover { background: none; color: var(--muted); }
.planner-del:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }

/* status select — colored by current value, styled as an intentional pill */
.planner-status-select {
  appearance: none; -webkit-appearance: none;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  border: 1px solid transparent; border-radius: 999px;
  padding: 5px 24px 5px 10px;
  cursor: pointer; font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color .12s, filter .12s;
}
.planner-status-select:hover { filter: brightness(0.96); }
.planner-status-select:focus { outline: none; border-color: currentColor; }
.planner-status-select.status-grey { background-color: rgba(139, 147, 163, 0.18); color: var(--grey-chip); }
.planner-status-select.status-blue { background-color: rgba(76, 143, 224, 0.16); color: var(--blue-chip); }
.planner-status-select.status-green { background-color: var(--ok-bg); color: var(--ok); }
.planner-status-select.status-red { background-color: var(--danger-bg); color: var(--danger); }

/* calendar */
.planner-cal-dow, .planner-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.planner-cal-dow {
  margin-bottom: 4px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-light);
  text-align: center;
}
.planner-cal-cell {
  min-height: 76px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); padding: 5px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.planner-cal-cell:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.planner-cal-cell.out { visibility: hidden; }
.planner-cal-cell.today { border-color: var(--accent); background: var(--accent-light); }
.planner-cal-cell.selected { background: var(--accent); border-color: var(--accent); }
.planner-cal-cell.selected .planner-cal-daynum { color: #fff; }
.planner-cal-daynum { font-size: 11px; font-weight: 700; color: var(--muted); }
.planner-cal-cell.today .planner-cal-daynum { color: var(--accent); }
.planner-cal-events {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 54px; overflow-y: auto;
}
.planner-cal-chip {
  /* min-width: 0 overrides a flex item's default min-width:auto, which
     white-space:nowrap would otherwise set to the full unwrapped text
     width — without it the chip refuses to shrink to the column's actual
     width and visually spills into the next day, even though the day
     cells themselves are correctly equal-width grid tracks. */
  min-width: 0;
  font-size: 10px; font-weight: 600; line-height: 1.3;
  background: var(--accent-light); color: var(--accent-dark, var(--accent));
  border-radius: 4px; padding: 1px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.planner-cal-cell.selected .planner-cal-chip { background: rgba(255, 255, 255, 0.85); }
.planner-cal-chip:hover { background: var(--accent); color: #fff; }
.planner-cal-more {
  font-size: 9.5px; font-weight: 800; color: var(--muted); padding: 0 4px;
}
.planner-event-form { margin-top: 14px; }

/* files */
.planner-files-panel { margin-top: 18px; }
.planner-file-list { display: flex; flex-direction: column; gap: 6px; }
.planner-file-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); padding: 7px 11px; font-size: 12.5px;
  transition: border-color .12s;
}
.planner-file-row:hover { border-color: var(--border-strong); }
.planner-file-row a { font-weight: 600; overflow-wrap: anywhere; }
.planner-file-row span { flex: 1; min-width: 140px; font-size: 11px; }

/* mobile */
@media (max-width: 480px) {
  .planner-monthbar { width: 100%; justify-content: space-between; }
  .planner-monthlabel { min-width: 0; font-size: 13.5px; }
  .planner-panel { padding: 12px 12px; border-radius: var(--radius-md); }
  .planner-add-row { flex-direction: column; }
  .planner-add-row .btn.primary { width: 100%; }
  .planner-cal-cell { min-height: 58px; padding: 3px; gap: 2px; }
  .planner-cal-daynum { font-size: 10px; }
  .planner-cal-chip { font-size: 9px; padding: 1px 3px; }
  .planner-cal-events { max-height: 40px; }
  .planner-card-title, .planner-row-body { min-width: 90px; }
  .planner-file-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Insights (Admin) ---------- */
.insights-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.insights-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn-chip:hover { background: var(--panel-alt); border-color: var(--border-strong); }
.btn-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.insights-custom-range { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.insights-custom-range input[type="date"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
}
.insights-store-filter { display: inline-flex; align-items: center; gap: 4px; }
.insights-store-filter select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
}
.insights-scope { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; }
.insights-scope .btn-chip { padding: 3px 10px; font-size: 11.5px; }

/* Period-over-period delta pill on the headline KPI tiles. */
.insights-delta { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 700; }
.insights-delta.up { color: var(--ok); }
.insights-delta.down { color: var(--danger); }
.insights-delta.flat { color: var(--muted-light); }

.insights-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
  margin-bottom: 14px;
  overflow: hidden;
}
.insights-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.insights-section-note { margin-left: auto; font-weight: 400; font-size: 12px; }
.insights-section-body { padding: 16px; }

.insights-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.insights-chart-title { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.insights-chart { width: 100%; height: auto; display: block; }
.insights-chart-baseline { stroke: var(--border); stroke-width: 1; }
.insights-chart-avg { stroke: var(--muted-light); stroke-width: 1; stroke-dasharray: 3 3; }
.insights-chart-axis { font-size: 8px; fill: var(--muted-light); }

/* Booked-by-store table doubles as the location picker for the graphs. */
.insights-store-table tbody tr[data-store] { cursor: pointer; }
.insights-store-table tbody tr.is-selected td {
  background: var(--accent-light);
  box-shadow: inset 3px 0 0 var(--accent);
}
.insights-total-row td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  cursor: default;
}
.insights-store-table tbody tr.insights-total-row td { box-shadow: none; }

.insights-mag-track {
  height: 4px;
  background: var(--panel-alt);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.insights-mag-fill { height: 100%; border-radius: 2px; }

/* Measurement Calendars row: a normal nav-item button that jumps straight to
   the current location's calendar, plus a small trigger on the right that
   opens a native <select> (kept fully transparent, sized to match the
   visible chevron) to change which location that button points to. */
.measure-location-row { display: flex; align-items: stretch; gap: 5px; }
.measure-location-btn { flex: 1; width: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.measure-location-picker {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--ease), background var(--ease);
}
.measure-location-picker:hover { background: rgba(255, 255, 255, 0.11); border-color: var(--gold); }
.measure-location-picker-icon { pointer-events: none; color: #fff; font-size: 11px; }
.measure-location-picker select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  cursor: pointer;
  appearance: none;
}
.measure-location-picker select option { color: #1c1506; }

.nav-group { margin-bottom: 16px; }
/* Shorter nav-group labels for the mobile sidebar pop-out (below, in the
   880px media query) — the full names are too wide for the off-canvas
   panel at phone width. Both spans always exist so the flex layout of the
   collapsible groups' arrow (::after, below) doesn't shift between the two. */
.navgroup-label-short { display: none; }
.nav-group-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b3bcce;
  padding: 6px 8px 7px;
}
.nav-group-collapsible > summary.nav-group-title {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-group-collapsible > summary.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-collapsible > summary.nav-group-title::after {
  content: '⌄';
  font-size: 13px;
  line-height: 1;
  color: #6b7590;
  transition: transform 0.15s ease;
}
.nav-group-collapsible:not([open]) > summary.nav-group-title::after { transform: rotate(-90deg); }
.nav-group-collapsible > summary.nav-group-title:hover { color: #c4c9d3; }
.nav-item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #dde1ea;
  padding: 9px 8px 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.3;
  margin-bottom: 1px;
  transition: background var(--ease), color var(--ease);
}
.nav-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--gold);
  transition: height var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-item.active { background: rgba(205, 164, 62, 0.18); color: #fff; font-weight: 600; }
.nav-item.active::before { height: 60%; }
a.nav-item { text-decoration: none; }

#content {
  flex: 1;
  padding: 26px 32px;
  overflow-x: auto;
  min-width: 0;
}

/* ---------- mobile off-canvas nav (hamburger + drawer), see toggleMobileSidebar() in app.js ---------- */

.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  z-index: 110;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent-dark);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 24, 0.5);
  z-index: 99;
}

h1.view-title { font-size: 23px; font-weight: 700; font-family: var(--font-display); font-style: italic; color: var(--accent); letter-spacing: -0.005em; margin: 0 0 4px; }
.view-sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.week-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.week-toolbar button {
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), border-color var(--ease);
}
.week-toolbar button:hover { background: var(--panel-alt); border-color: var(--border-strong); }
.week-range { font-weight: 700; letter-spacing: -0.01em; }

.rm-sync-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: 13px;
}
.rm-sync-bar-label { font-weight: 700; }
.rm-sync-bar-note { color: var(--muted); font-size: 12px; }
.rm-sync-toggle { display: inline-flex; gap: 4px; }
.rm-sync-opt {
  padding: 5px 16px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.rm-sync-opt:disabled { opacity: 0.5; cursor: default; }
.rm-sync-opt.active[data-on="1"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.rm-sync-opt.active[data-on="0"] { background: var(--muted); border-color: var(--muted); color: #fff; }

.view-mode-toggle { margin-left: auto; display: flex; gap: 4px; }

/* Staff / Training / Review Contest tab strip — same look as .view-mode-btn
   (reused as-is) but its own standalone row rather than pushed into a
   toolbar with margin-left:auto. */
.staff-group-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 18px; }

/* .view-mode-btn previously had no unselected style at all (bare native
   button) — only .active was styled. Added so every toggle using this class
   (Calendar/List, Manage/Training, and this new tab strip) gets a proper
   pill look in both states, not just when selected. */
.view-mode-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.view-mode-btn:hover { background: var(--panel-alt); color: var(--text); border-color: var(--border-strong); }
.view-mode-btn.active {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-color: var(--accent-dark);
}
.view-mode-btn.active:hover { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }

.week-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 10px;
}

.day-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease), border-color var(--ease);
}
.day-col:hover { box-shadow: var(--shadow-sm); }
.day-col.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.day-col.locked { background: rgba(205, 164, 62, 0.08); border-color: #e3d3a0; }
.day-col.locked.today { box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }

.day-col-header {
  position: relative;
  padding: 10px 26px 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.day-lock-btn, .day-lock-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  line-height: 1;
}
.day-lock-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity var(--ease), background var(--ease);
}
.day-lock-btn:hover { opacity: 1; background: var(--panel-alt); }
.day-lock-btn.locked { opacity: 0.9; }
.day-col-body.locked-body:empty::after {
  content: "🔒 Day locked";
  display: block;
  color: var(--muted-light);
  font-size: 12px;
  padding: 6px 4px;
}
.day-col-header .dow { font-weight: 700; letter-spacing: -0.005em; }
.day-col-header .cap-badge {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--muted);
}
.day-col-header .cap-badge.over {
  background: var(--danger-bg);
  border-color: #f6cdd2;
  color: var(--danger);
  font-weight: 700;
}
.day-col-body { padding: 7px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.day-col-body.clickable-body { cursor: pointer; }
.day-col-body.clickable-body:hover { background: var(--panel-alt); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.day-col-body.clickable-body:empty::after {
  content: "+ Add appointment";
  display: block;
  color: var(--muted-light);
  font-size: 12px;
  padding: 6px 4px;
  transition: color var(--ease);
}
.day-col-body.clickable-body:empty:hover::after { color: var(--accent); }

.chip {
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 12.5px;
  cursor: pointer;
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
  transition: filter var(--ease), transform var(--ease), box-shadow var(--ease);
}
.chip:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.chip .chip-meta { opacity: 0.88; font-size: 11px; display: block; }
.chip .chip-split { color: var(--gold); font-size: 11px; font-weight: 700; display: block; }
.chip .chip-tag {
  display: inline-block;
  margin: 3px 0 0 5px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #1b5a86;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.chip .chip-time { font-weight: 700; }
.chip .chip-map-pin {
  float: right;
  text-decoration: none;
  filter: grayscale(0) brightness(1.3);
  font-size: 13px;
  line-height: 1;
}
.chip .chip-map-pin:hover { opacity: 0.75; }
.chip.color-grey { background: var(--grey-chip); }
.chip.color-red { background: var(--red-chip); }
.chip.color-green { background: var(--green-chip); }
.chip.color-blue { background: var(--blue-chip); }
/* Carpet-tuck / "Reattach Carpet" bookings — a deeper, more teal blue so the
   install manager can tell them apart from a full carpet install at a glance
   (see chipColorClass + the Reattach Carpet chip tag). */
.chip.chip-carpet-tuck { background: #2f7fb0; }
.chip.color-purple { background: var(--purple-chip); }
.chip.color-default { background: var(--default-chip); }
.chip.color-status-scheduled { background: #6b7688; }
.chip.color-status-confirmed { background: #2f9e8f; }
.chip.color-status-complete { background: var(--green-chip); }
.chip.color-status-cancelled { background: var(--red-chip); }
.chip.color-status-closed { background: #4d5566; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
table.data-table th, table.data-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
table.data-table th {
  background: var(--panel-alt);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
table.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}
table.data-table th.sortable:hover {
  color: var(--text);
}
table.data-table tr.group-header td {
  background: var(--panel-alt);
  font-weight: 700;
}
table.data-table tr.group-header .flag-over { color: var(--danger); margin-left: 8px; }
.flag-over { color: var(--danger); font-weight: 600; }
table.data-table tr:hover td { background: var(--accent-light); cursor: pointer; }
table.data-table tr:last-child td { border-bottom: none; }
tr.problem-row td { background: var(--danger-bg); }
tr.problem-row:hover td { background: #fbdfe2; }

.badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.over { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }

.announcement-bar-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.announcement-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--accent-light);
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
.announcement-bar .announcement-text { font-size: 14px; color: var(--text); font-weight: 600; }
.announcement-bar .announcement-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.announcement-bar .announcement-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  flex-shrink: 0;
}
.announcement-bar .announcement-close:hover { color: var(--danger); }

.cs-status { font-size: 12px; }
.cs-status.over { color: var(--danger); font-weight: 600; }

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(12, 14, 20, 0.5);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px; overflow-y: auto; z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--panel);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  padding: 26px 28px;
  box-shadow: var(--shadow-lg);
  animation: modal-in 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h2 { margin-top: 0; font-size: 20px; font-weight: 700; font-family: var(--font-display); font-style: italic; color: var(--accent); letter-spacing: -0.005em; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}
.field label .req { color: var(--danger); }
.field label .lock-hint {
  font-weight: 400;
  font-style: italic;
  color: var(--muted-light);
  font-size: 11px;
  margin-left: 4px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  background: var(--panel);
  color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.field input:disabled, .field select:disabled, .field input[readonly], .field textarea[readonly] {
  background: var(--panel-alt);
  color: var(--muted);
  cursor: not-allowed;
}
.field textarea { min-height: 56px; resize: vertical; }
.map-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.map-link:hover { text-decoration: underline; }
.field.hidden { display: none; }
.quick-duration-row { display: flex; gap: 6px; margin-top: 6px; }
.quick-duration-row.hidden { display: none; }
.quick-duration-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.quick-duration-btn:hover { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.ampm-toggle { display: flex; gap: 6px; margin-top: 6px; }
.ampm-btn {
  flex: 1;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.ampm-btn:hover { background: var(--panel-alt); border-color: var(--border-strong); }
.ampm-btn.active { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
/* Job # + Sync, and Start date + AM/PM — pairs an input with a small
   control on the Book Install panel. Below 880px this switches to a
   column (see the mobile section at the end of this file) so the input
   never has to share its row with a button. */
.field-row { display: flex; gap: 6px; }
.field-row input { flex: 1; min-width: 0; }

/* Sits beside the date input instead of stacked below it — Book Install panel only. */
.ampm-toggle.ampm-toggle-compact { margin-top: 0; gap: 4px; flex-shrink: 0; }
.ampm-toggle.ampm-toggle-compact .ampm-btn { flex: none; padding: 6px 10px; font-size: 12px; }

/* Required single-select rows (House Status, Carpet Type) on the Carpet
   Install booking panel — same active/hover language as .ampm-btn, but
   smaller ("little buttons") since there are 3 options instead of 2. */
.choice-toggle { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.choice-btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.choice-btn:hover { background: var(--panel-alt); border-color: var(--muted-light); }
.choice-btn.active { background: var(--accent); border-color: var(--accent-dark); color: #fff; box-shadow: var(--shadow-xs); }

/* Grouped RollMaster-synced carpet job details on the Book Carpet Install
   panel — one bordered card instead of a loose stack of fields that each
   carried their own "(synced from RollMaster…)" note in the label. */
.rm-detail-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-alt);
  padding: 13px 15px 15px;
}
.rm-detail-group.hidden { display: none; }
.rm-detail-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 13px;
}
.rm-detail-head span {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 11.5px;
  color: var(--muted);
}
.rm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 16px;
}
.rm-detail-grid .full { grid-column: 1 / -1; }
.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text) !important;
}
.checkbox-label input[type="checkbox"] {
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  accent-color: var(--accent);
}
.login-remember-field { margin-bottom: 18px !important; }
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.photo-empty { font-size: 12.5px; color: var(--muted); }
.photo-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-alt);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.photo-delete:hover { background: rgba(0, 0, 0, 0.85); }
.photo-thumb-clickable { cursor: pointer; }
.photo-note-card { display: flex; flex-direction: column; gap: 4px; width: 84px; }
.photo-note-input {
  width: 84px;
  font-size: 11px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
}
.photo-note-input:focus { outline: none; border-color: var(--accent); }
.photo-note-view { font-size: 11px; color: var(--muted); width: 84px; word-break: break-word; }

.sample-history-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.sample-history-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.sample-history-item:last-child { border-bottom: none; }
.sample-history-item .a-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.sample-history-item .a-changes { margin-top: 4px; font-size: 12.5px; color: var(--text); }

.lightbox-overlay { z-index: 200; align-items: center; padding: 24px 16px; }
.lightbox-modal {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 100%;
  max-width: 720px;
  box-shadow: var(--shadow-lg);
  animation: modal-in 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--panel-alt);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--border); color: var(--text); }
.lightbox-image-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.lightbox-image {
  max-width: 100%;
  max-height: 62vh;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--panel-alt);
  display: block;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(0, 0, 0, 0.8); }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-counter { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.lightbox-note-section { margin-top: 16px; }
.lightbox-note-section label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.lightbox-note-section input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: #fff;
  color: var(--text);
}
.lightbox-note-section input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.lightbox-note-readonly { font-size: 14px; color: var(--text); }
.capacity-hint {
  grid-column: 1 / -1;
  font-size: 12.5px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--muted);
}
.capacity-hint:empty { display: none; }
.capacity-hint.over { background: var(--danger-bg); border-color: #f6cdd2; color: var(--danger); font-weight: 600; }
.capacity-hint #capNextDayBtn { margin-top: 6px; font-weight: 600; }
.overflow-day-ctl { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.overflow-day-ctl input[type="date"] { width: auto; padding: 4px 6px; font-size: 12px; }
.overflow-day-ctl .btn { padding: 3px 12px; font-size: 12px; font-weight: 600; }

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.modal-actions .right { display: flex; gap: 8px; }
.btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn:hover { background: var(--panel-alt); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-color: var(--accent-dark);
  box-shadow: 0 2px 8px rgba(4, 50, 118, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 12.5px;
}
.btn.primary:hover { filter: brightness(1.15); background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }
.btn.danger { background: #fff; color: var(--danger); border-color: #f0c6cb; }
.btn.danger:hover { background: var(--danger-bg); }

/* Icon-only buttons (currently just the trash-can Delete in the Sample
   Checkout and Job/Measurement forms) — a fixed square instead of the
   padded text-button box, so it doesn't eat into the modal-actions row
   next to Cancel/Save on a narrow phone screen. */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; flex: none; }
.btn-icon svg { width: 17px; height: 17px; }

/* Login Access on/off switch — Staff table (renderStaffTable in app.js).
   Green track = login on, red track = login off. */
.access-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.access-toggle .access-toggle-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--danger);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: background var(--ease);
}
.access-toggle .access-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform var(--ease);
}
.access-toggle .access-toggle-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--danger);
}
.access-toggle.on .access-toggle-track { background: var(--ok); }
.access-toggle.on .access-toggle-knob { transform: translateX(18px); }
.access-toggle.on .access-toggle-label { color: var(--ok); }
.access-toggle:hover:not(:disabled) .access-toggle-track { filter: brightness(1.08); }
.access-toggle:disabled { opacity: 0.55; cursor: default; }

.btn-add-photo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-style: dashed;
  background: var(--panel-alt);
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.btn-add-photo svg { width: 16px; height: 16px; flex: none; }
.btn-add-photo:hover { background: #fff; border-color: var(--accent); border-style: solid; }
.btn-add-photo:active { transform: translateY(1px); }

.form-error { color: var(--danger); font-size: 12.5px; margin-top: 8px; }
.muted { color: var(--muted); font-size: 12.5px; }

.rm-flow { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.rm-flow-box {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-alt);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.rm-flow-arrow {
  flex: 1;
  text-align: center;
  font-size: 20px;
  color: var(--border-strong);
  position: relative;
}
.rm-flow-arrow .muted { display: block; font-size: 11px; margin-top: 2px; }
.rm-match-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 3px 0; }
.rm-match-row:not(:last-child) { border-bottom: 1px dashed var(--border); }
.deploy-history-commits { margin: 0; padding-left: 18px; }
.deploy-history-commits li { font-size: 12.5px; }

.toolbar-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search-input {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 220px;
  font-size: 13.5px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

.staff-active-off { opacity: 0.5; }

.history-section {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}
.history-section summary {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.history-list { margin-top: 9px; max-height: 180px; overflow-y: auto; }
.history-item { font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.history-item:last-child { border-bottom: none; }

.rip-up-line-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rip-up-line-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.rip-up-line-item:last-child { border-bottom: none; }
.rip-up-line-list li.muted { padding: 6px 10px; }

.synced-detail-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.synced-detail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.synced-detail-item:last-child { border-bottom: none; }
.synced-detail-item.stacked { flex-direction: column; align-items: stretch; gap: 2px; }
.synced-detail-item.stacked > span:last-child { white-space: pre-line; }
/* Address: keep the label on the left but drop the (often multi-line) value
   directly under the clickable phone number on the right, right-aligned. */
.synced-detail-item.align-right { align-items: flex-start; }
.synced-detail-item.align-right > span:last-child { text-align: right; white-space: pre-line; }
.synced-detail-label { color: var(--muted); font-weight: 600; }
.history-item .h-when { color: var(--muted); }
.history-item .h-actor { font-weight: 700; }
.history-item .h-changes { margin-top: 2px; }
.history-item .h-change-row { color: var(--text); }
.history-empty { font-size: 12px; color: var(--muted); }

.activity-item {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  transition: background var(--ease);
}
.activity-item:hover { background: var(--panel-alt); }
.activity-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.activity-item:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: none; }
.activity-item .a-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.activity-item .a-summary { font-size: 13.5px; margin-top: 4px; }
.activity-item .a-changes { margin-top: 5px; font-size: 12px; color: var(--muted); }
.activity-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-xs); }
.action-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 8px; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.action-badge.create { background: var(--ok-bg); color: var(--ok); }
.action-badge.update { background: var(--panel-alt); color: var(--muted); border: 1px solid var(--border); }
.action-badge.delete { background: var(--danger-bg); color: var(--danger); }
.action-badge.sync { background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent); }

.activity-filter-bar { display: flex; gap: 8px; margin: 10px 0 14px; }
.activity-filter-btn {
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
  background: var(--panel-alt); color: var(--muted); border: 1px solid var(--border);
  opacity: 0.5; transition: opacity var(--ease), background var(--ease), color var(--ease), border-color var(--ease);
}
.activity-filter-btn:hover { opacity: 0.8; }
.activity-filter-btn.active { opacity: 1; }
.activity-filter-btn.create.active { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.activity-filter-btn.update.active { background: var(--panel-alt); color: var(--muted); border-color: var(--border-strong); }
.activity-filter-btn.delete.active { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.activity-filter-btn.sync.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

/* ---------- dashboard ---------- */

.nav-item-dashboard {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.nav-item-dashboard:hover { background: rgba(255, 255, 255, 0.12); }
.nav-item-dashboard.active { background: rgba(205, 164, 62, 0.22); }

.dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.dash-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.dash-hero + .dash-section-title { border-top: none; padding-top: 0; }

.dash-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}
.dash-quicklink {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.dash-quicklink:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dash-quicklink-icon { font-size: 16px; }

/* ---------- Dashboard external-link cards (Manufacturer / Company links) ---------- */
.dash-linkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}
.dash-linkcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.dash-linkcard:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.dash-linkcard-icon {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}
.dash-linkcard-mono {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mono, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.dash-linkcard-favicon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 7px;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
  box-shadow: inset 0 0 0 1px var(--border);
}
.dash-linkcard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-linkcard-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-linkcard-host {
  font-size: 11.5px;
  color: var(--muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-linkcard-arrow {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--muted-light);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity var(--ease), transform var(--ease), color var(--ease);
}
.dash-linkcard:hover .dash-linkcard-arrow {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--accent);
}

/* Warranties — collapsible dropdown section on the Dashboard, same pattern
   as the Links and Contacts sections (see renderWarrantiesSection). */
.dash-warranties-section .it-sec-body { padding: 10px 14px 14px; }
#dashWarrantySearch { width: 100%; }
.warranty-list {
  margin: 10px 0 0;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.warranty-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.warranty-row:last-child { border-bottom: 0; }
.warranty-row:hover { background: var(--panel-alt); }
.warranty-mono {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
}
.warranty-name { font-weight: 600; flex: 1; min-width: 0; }
.warranty-open { color: var(--accent); font-size: 12px; flex-shrink: 0; opacity: 0; transition: opacity var(--ease); }
.warranty-row:hover .warranty-open { opacity: 1; }

/* ---------- Dashboard polish (scoped so the IT page's reused
   .dash-section-title is untouched) ---------- */
.dash-view .dash-section-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-top: none;
  padding: 0 0 6px;
  margin: 30px 0 14px;
  font-size: 12px;
  letter-spacing: 0.07em;
  border-bottom: 2px solid var(--gold);
}
.dash-view .dash-section-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.dash-view .dash-hero + .dash-section-title { margin-top: 6px; }

.dash-view .dash-linkgrid {
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
  gap: 12px;
}
.dash-view .dash-linkcard {
  position: relative;
  overflow: hidden;
  padding: 13px 15px;
  border-radius: var(--radius-lg);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.dash-view .dash-linkcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--mono, var(--accent));
  opacity: 0;
  transition: opacity var(--ease);
}
.dash-view .dash-linkcard:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dash-view .dash-linkcard:hover::before { opacity: 0.85; }
.dash-view .dash-linkcard-icon { width: 40px; height: 40px; }
.dash-view .dash-linkcard-mono {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--mono, var(--accent)) 88%, #fff), var(--mono, var(--accent)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 3px rgba(0, 0, 0, 0.14);
}
.dash-view .dash-linkcard-favicon { border-radius: 10px; padding: 8px; }
.dash-view .dash-linkcard-label { font-size: 14px; }
.dash-view .dash-linkcard-host {
  color: var(--muted);
  letter-spacing: 0.01em;
  text-transform: none;
}
.dash-view .dash-linkcard-arrow {
  opacity: 0.4;
  transform: none;
  color: var(--muted-light);
}
.dash-view .dash-linkcard:hover .dash-linkcard-arrow {
  opacity: 1;
  transform: none;
  color: var(--accent);
}

/* "Jump to a schedule" — read as buttons (pill shape, centered, solid
   accent fill on hover/press) instead of the list-item look shared with
   the plain .dash-quicklink used elsewhere (e.g. IT page). */
.dash-view .dash-quicklinks {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.dash-view .dash-quicklink {
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: none;
}
.dash-view .dash-quicklink:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dash-view .dash-quicklink:active { transform: translateY(0); box-shadow: none; }

.upcoming-list { margin-bottom: 30px; }
.upcoming-day-group { margin-bottom: 16px; }
.upcoming-day-group:last-child { margin-bottom: 0; }
.upcoming-day-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
}
.upcoming-day-label.today { color: var(--accent); }
.upcoming-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.upcoming-card:last-child { margin-bottom: 0; }
.upcoming-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
.upcoming-card.job-type-measure { border-left-color: var(--gold); }
.upcoming-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  min-width: 76px;
  text-align: center;
  flex-shrink: 0;
}
.upcoming-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.upcoming-main { flex: 1; min-width: 0; }
.upcoming-customer { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming-meta { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming-phone { font-size: 12px; margin-top: 2px; }
.upcoming-status { flex-shrink: 0; cursor: pointer; }

.phone-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.phone-link:hover { text-decoration: underline; }
.upcoming-empty {
  background: var(--panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 30px;
}
.upcoming-empty-icon { font-size: 26px; display: block; margin-bottom: 8px; }

/* ---------- RollMaster embedded webtop (renderRollmasterWebtopView) ----------
   Fills the whole area to the right of the sidebar with the RollMaster iframe.
   position:fixed so it ignores #content's 26px 32px padding and can't add
   page scroll; left offset = #sidebar width (252px, border-box). */
.rm-embed {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 252px;
  display: flex;
  flex-direction: column;
  background: #1f1f1f;
  z-index: 40;
}
.rm-embed-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 16px;
  background: linear-gradient(180deg, #06346f 0%, #04275a 100%);
  color: #fff;
  font-size: 13px;
}
.rm-embed-title { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 15px; }
.rm-embed-hint { color: #cda43e; font-size: 12px; }
.rm-embed-tabs { display: flex; gap: 4px; }
.rm-embed-tab {
  background: rgba(255, 255, 255, 0.08);
  color: #cdd6e4;
  border: 0;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.6;
}
.rm-embed-tab:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.rm-embed-tab.active { background: #cda43e; color: #04275a; font-weight: 600; }
.rm-embed-actions { margin-left: auto; display: flex; gap: 8px; }
.rm-embed-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  padding: 4px 11px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.6;
  text-decoration: none;
}
.rm-embed-btn:hover { background: rgba(255, 255, 255, 0.22); }
.rm-embed-frame { flex: 1; width: 100%; border: 0; display: block; background: #1f1f1f; }

/* ---------- mobile (phone-width) overrides ----------
   Kept at the end of the file on purpose: every selector below already has
   an earlier, unconditional base rule elsewhere in this file, and CSS
   resolves same-specificity conflicts by *source order*, not by which rule
   sits inside a matching @media block. Putting this section anywhere but
   last means the base rule wins even while the media query matches — that
   bug shipped once already (the whole block used to sit right after
   #content, before .week-grid/table.data-table/.modal/.form-grid/.dash-hero
   were defined, silently no-oping every override below that also touches
   those selectors). Verified for real with a 390px-wide iframe (window
   resize doesn't affect this sandboxed browser's viewport), not just by
   widening the breakpoint at desktop width — that trick only proves the
   selectors match, not that they win the cascade. */
@media (max-width: 880px) {
  .mobile-menu-toggle { display: flex; }

  .navgroup-label-full { display: none; }
  .navgroup-label-short { display: inline; }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    /* Room for a notch/status bar (top) and the home-indicator bar (bottom,
       via .sidebar-footer below) on iOS/Android devices with cutouts —
       needs viewport-fit=cover in index.html's <meta viewport> to resolve
       to anything nonzero; harmless 0px fallback everywhere else. */
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
  }
  .sidebar-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Locks background scroll while the drawer is open (paired with the
     position:fixed + scrollY offset set/restored in app.js's
     openMobileSidebar()/closeMobileSidebar()) — without this, iOS Safari
     still lets the page behind the drawer rubber-band on touch, which is
     the "wiggle" a phone user feels. width:100% keeps the now-fixed body
     from collapsing to the sidebar's own intrinsic width. */
  body.sidebar-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  body.sidebar-open .mobile-menu-toggle { display: none; }

  #app { display: block; min-height: 100vh; min-height: 100dvh; }

  #content {
    padding: calc(66px + env(safe-area-inset-top, 0px)) 14px 24px;
    width: 100%;
  }

  /* sidebar is off-canvas at this width — the embed takes the full viewport.
     The bar itself (title + tabs + hint + 3 action buttons) had no wrap at
     all and overflowed badly on a phone; let it wrap onto multiple rows and
     drop the auto-margin push so wrapped rows stay left-aligned instead of
     splitting oddly. The embedded RollMaster desktop stream itself is a
     fixed 1600x840 Wine virtual desktop (see project-rollmaster-webtop) —
     that can't be made responsive by CSS, it'll just render small/pannable
     on a phone regardless; only this toolbar can actually be fixed here. */
  .rm-embed { left: 0; }
  .rm-embed-bar { padding: 8px 12px 8px 56px; flex-wrap: wrap; row-gap: 6px; gap: 8px; }
  .rm-embed-actions { margin-left: 0; flex-wrap: wrap; }
  .rm-embed-tabs { flex-wrap: wrap; }

  .form-grid { grid-template-columns: 1fr; }
  .rm-detail-grid { grid-template-columns: 1fr; }

  .modal-overlay { padding: 60px 8px 16px; align-items: flex-start; }
  .modal { max-width: 100%; padding: 20px 16px; }

  .dash-hero { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }

  /* Smaller, tighter quick-link buttons and section spacing so the
     dashboard's "fold" (what's visible before scrolling) fits more on a
     phone screen. */
  .dash-view .dash-quicklinks { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 20px; }
  .dash-view .dash-quicklink { padding: 8px 6px; gap: 5px; font-size: 11px; }
  .dash-quicklink-icon { font-size: 14px; }
  .dash-view .dash-section-title { margin: 20px 0 10px; }
  .dash-view .dash-linkgrid { grid-template-columns: 1fr; }

  .week-toolbar { flex-wrap: wrap; }
  .view-mode-toggle { margin-left: 0; }

  /* One day fills the screen and snaps into place on swipe, rather than
     showing thin unreadable slices of several days at once. */
  .week-grid {
    grid-template-columns: repeat(6, minmax(85vw, 1fr));
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .day-col { scroll-snap-align: start; }

  /* Data tables squish into unreadable wrapped columns at this width
     otherwise — force a scrollable min-width instead (#content already has
     overflow-x: auto). */
  table.data-table { min-width: 620px; }

  /* Bigger touch target for the sidebar's nav items — the one navigation
     surface that's still comfortable to size up on a phone. */
  .nav-item { padding: 11px 8px 11px 14px; }

  /* Prev/Today/Next + Calendar/List (Measurement Calendars and every other
     week view) and the Sample Checkout toolbar/modal buttons: run smaller
     and tighter here than at desktop, not bigger, so the whole row fits
     without crowding a phone-width screen. */
  .week-toolbar { gap: 6px; }
  .week-toolbar button, .view-mode-btn { padding: 6px 10px; font-size: 12px; }
  .week-range { font-size: 12.5px; }
  .toolbar-row .btn { padding: 7px 12px; font-size: 12px; }
  .modal-actions .btn { padding: 7px 12px; font-size: 12px; }
  .modal-actions .btn-icon { width: 32px; height: 32px; }

  /* Upcoming/activity cards pack a time column, icon, and status chip into
     one row — fine at 160px+ of slack, cramped at 360px. Let them wrap. */
  .upcoming-card { flex-wrap: wrap; }
  .upcoming-time { text-align: left; }
  .upcoming-main { flex-basis: 100%; order: 3; }

  .toolbar-row .search-input { min-width: 0; flex: 1 1 160px; }

  /* Job # + Sync, and Start date + AM/PM: side by side they leave the
     input too narrow to read what was just typed (this is what was
     reported as the Job # field "not visible" on a phone) — stack them so
     the input always gets the full row width, and let the Sync button and
     AM/PM toggle stretch to match rather than staying thumbnail-sized. */
  .field-row { flex-direction: column; }
  .field-row .btn { width: 100%; }
  .ampm-toggle.ampm-toggle-compact { width: 100%; }
  .ampm-toggle.ampm-toggle-compact .ampm-btn { flex: 1; }

  /* Below 16px, iOS Safari auto-zooms the whole page on focus — which is
     what actually made the Job # field feel like it "disappears" while
     typing (the zoomed viewport recenters on the input, shifted from
     wherever the layout had it). 16px sidesteps that entirely. */
  .field input, .field select, .field textarea,
  .search-input, .sidebar-search input, .login-box input {
    font-size: 16px;
  }

  /* Small supporting text reads fine at desktop's tighter sizes but gets
     genuinely hard to read at arm's length on a phone. */
  .view-sub { font-size: 14px; }
  .field label { font-size: 13px; }

  /* .modal-actions had no flex-wrap — fine with 2-3 buttons, but a modal
     with a full button set (e.g. Sample Checkout edit: Delete, Schedule
     Measurement, Mark Returned, Cancel, Save) overflowed the narrow modal
     width instead of wrapping. Let both rows wrap and let buttons size to
     content rather than staying rigid-width. */
  .modal-actions { flex-wrap: wrap; row-gap: 10px; }
  .modal-actions .right { flex-wrap: wrap; row-gap: 8px; }
  .modal-actions .btn { flex: 1 1 auto; }
}

/* ----------------------------------------------------------------------
   Responsive "card" tables — mobile only, OPT-IN via a `data-table-rt`
   class (renderJobsTable() in app.js adds it, plus a data-label="<column
   label>" on every <td>). This is the ONLY table-building function that
   opts in as of 2026-09-24 (used by All Jobs, Cust Service Request List,
   and one more caller — search "renderJobsTable(" in app.js for the exact
   list). Every other `.data-table` in the app (Staff, IT sections, Sample
   Checkouts, etc.) does NOT have this class and keeps the older
   horizontal-scroll-with-a-min-width behavior from the block above,
   completely unaffected by anything here.

   WHY: a wide multi-column table squeezed into a phone's width either
   wraps into unreadable slivers or forces sideways scrolling to read one
   row. This turns each row into a bordered card, one "LABEL  value" line
   per column, using the existing column labels — no separate mobile
   template to maintain per table.

   TO REVERSE if this doesn't work out well: delete this whole block, then
   in app.js's renderJobsTable() remove " data-table-rt" from the table's
   class list and remove the `data-label="${escapeHtml(c.label)}"` from
   the <td> line — three small edits total, nothing else in the app
   references data-table-rt or reads a <td>'s data-label. The table falls
   straight back to a normal (horizontally-scrolling) table with no other
   side effects. Placed after the main 880px block on purpose — same
   cascade-order reason explained in that block's own opening comment
   (identical selector specificity, so whichever rule is LAST in the file
   wins at this width, regardless of which @media block it's in). ---- */
@media (max-width: 880px) {
  table.data-table-rt { min-width: 0; width: 100%; }
  table.data-table-rt thead { display: none; }
  table.data-table-rt, table.data-table-rt tbody, table.data-table-rt tr { display: block; width: 100%; }
  table.data-table-rt tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
    box-shadow: var(--shadow-xs);
    padding: 2px 12px;
    margin-bottom: 10px;
  }
  table.data-table-rt tr:last-child { margin-bottom: 0; }
  table.data-table-rt tr:hover td { background: transparent; } /* row-hover highlight reads oddly on a card; :active feedback below covers tap instead */
  table.data-table-rt tr:active { background: var(--panel-alt); }
  table.data-table-rt td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    text-align: right;
    font-size: 13px;
  }
  table.data-table-rt td:last-child { border-bottom: none; }
  table.data-table-rt td:empty { display: none; } /* an empty action-column cell shouldn't render a blank labeled row */
  table.data-table-rt td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: left;
  }
}

/* ---------- e-signature (Experimental) ---------- */
.esign-head { display: flex; flex-direction: column; gap: 4px; }

/* admin-only "is this legally binding?" help tip next to the E-Signature title */
.esign-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esign-help { position: relative; display: inline-flex; }
.esign-help-btn {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-style: normal;
  cursor: help; display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.esign-help-btn:hover,
.esign-help:focus-within .esign-help-btn {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.esign-help-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: 360px; max-width: min(360px, 86vw);
  padding: 15px 16px 16px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-style: normal;
  font-size: 12.5px; line-height: 1.5; color: var(--text); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.esign-help-pop::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px;
  background: var(--gold); border-radius: 0 0 2px 2px;
}
.esign-help:hover .esign-help-pop,
.esign-help:focus-within .esign-help-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.esign-help-title {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 14px; color: var(--accent);
}
.esign-help-intro { display: block; margin-bottom: 9px; color: var(--muted); }
.esign-help-item { display: block; margin-bottom: 6px; }
.esign-help-item:last-child { margin-bottom: 0; }
.esign-help-item b { color: var(--accent); font-weight: 700; }
@media (max-width: 560px) { .esign-help-pop { left: auto; right: 0; } }

/* the esign views use .btn-primary / .btn-link (no matching global rule);
   give .btn-primary the same treatment as the app's .btn.primary */
.btn-primary {
  padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--accent-dark);
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)); color: #fff;
  cursor: pointer; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(4, 50, 118, 0.3); transition: filter var(--ease), transform var(--ease);
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: default; }

.esign-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 18px 0 6px; }
.esign-actionbar-main { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.esign-actionbar-filters { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.esign-upload-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font-size: 13px; border-radius: var(--radius-md);
}
.esign-upload-btn svg { display: block; }

/* admin scope toggle (All e-signatures / Just mine) */
.esign-scope { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.esign-scope button {
  border: none; background: var(--panel); color: var(--muted); cursor: pointer;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600;
}
.esign-scope button + button { border-left: 1px solid var(--border-strong); }
.esign-scope button:hover { background: var(--panel-alt); color: var(--text); }
.esign-scope button.active { background: var(--accent); color: #fff; }

.esign-showclosed { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; }
.esign-showclosed input { cursor: pointer; }

.esign-search {
  width: 260px; max-width: 100%; padding: 8px 11px; font-size: 13.5px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.esign-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
@media (max-width: 720px) {
  .esign-actionbar-main, .esign-actionbar-filters { width: 100%; align-items: stretch; }
  .esign-actionbar-main .esign-search { flex: 1 1 180px; width: auto; }
  .esign-actionbar-filters { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* status board — compact icon tiles */
.esign-statboard { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 10px; margin: 16px 0; }
.esign-stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 9px 12px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-xs);
}
.esign-stat-icon { flex: none; color: var(--muted); }
.esign-stat-num { font-size: 18px; font-weight: 700; line-height: 1; color: var(--text); font-family: var(--font-display); }
.esign-stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.esign-stat.is-zero { opacity: .5; }
.esign-stat.is-info { border-color: var(--accent); background: var(--accent-light); }
.esign-stat.is-info .esign-stat-num, .esign-stat.is-info .esign-stat-icon { color: var(--accent); }
.esign-stat.is-ok { border-color: var(--green-chip); background: var(--ok-bg); }
.esign-stat.is-ok .esign-stat-num, .esign-stat.is-ok .esign-stat-icon { color: var(--ok); }
@media (max-width: 720px) { .esign-statboard { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .esign-statboard { grid-template-columns: 1fr; } }

.esign-attention {
  background: rgba(232, 89, 12, 0.10); border: 1px solid var(--warn); color: #8a3908;
  border-radius: var(--radius-md); padding: 10px 14px; margin: 0 0 18px; font-size: 13px; line-height: 1.5;
}
.esign-attention strong { display: block; color: var(--warn); }

.esign-table-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; box-shadow: var(--shadow-xs); }
.esign-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.esign-table th, .esign-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.esign-table tbody tr:last-child td { border-bottom: none; }
.esign-table tbody tr:hover { background: var(--panel-alt); }
.esign-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; background: var(--panel-alt); }
.esign-table td:nth-child(1), .esign-table td:nth-child(8) { white-space: nowrap; }
.esign-table td.esign-nowrap { white-space: nowrap; }
.esign-check-col { width: 34px; text-align: center; padding-left: 8px; padding-right: 8px; }
.esign-check-col input { cursor: pointer; margin: 0; vertical-align: middle; }

/* bulk-select action bar above the table (admins) */
.esign-bulkbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-light); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 8px 14px; margin: 0 0 12px;
}
.esign-bulkbar-count { font-size: 13px; color: var(--text); }
.esign-bulkbar .esign-danger {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid #f0c6cb; background: var(--panel); color: var(--danger); cursor: pointer;
}
.esign-bulkbar .esign-danger:hover { background: var(--danger-bg); }
.esign-bulkbar .esign-danger:disabled { opacity: .55; cursor: default; }
.esign-signer-email { font-size: 13px; }
.esign-signer-email a { color: var(--muted); text-decoration: none; }
.esign-signer-email a:hover { color: var(--accent); text-decoration: underline; }
.esign-row-attn { background: rgba(232, 89, 12, 0.06); }
.esign-row-attn:hover { background: rgba(232, 89, 12, 0.11) !important; }
.esign-row-closed td { color: var(--muted); }
.esign-row-closed .esign-signer-email a { color: var(--muted); }
.esign-row-acts button.esign-danger { color: var(--danger); border-color: #f0c6cb; }
.esign-row-acts button.esign-danger:hover { background: var(--danger-bg); }
.esign-rm { font-size: 12px; font-weight: 600; white-space: nowrap; }
.esign-rm-filed { color: var(--ok); }
.esign-rm-todo { color: var(--warn); }
.esign-rm-none { color: var(--muted); font-weight: 500; }
.esign-row-acts { white-space: normal; text-align: right; min-width: 160px; }
.esign-row-acts button, .btn-link {
  background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 4px 9px; margin: 2px 0 2px 4px; cursor: pointer; font-size: 12.5px; color: var(--accent); white-space: nowrap;
}
.esign-row-acts button:hover, .btn-link:hover { background: var(--accent-light); }
.esign-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.esign-pill-muted { background: var(--panel-alt); color: var(--muted); }
.esign-pill-info { background: var(--accent-light); color: var(--accent); }
.esign-pill-ok { background: var(--ok-bg); color: var(--ok); }
.esign-pill-bad { background: var(--danger-bg); color: var(--danger); }

.esign-editor-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.esign-editor-body { display: flex; gap: 20px; align-items: flex-start; }
.esign-side { flex: 0 0 290px; display: flex; flex-direction: column; gap: 16px; }
.esign-side section { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.esign-side h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

/* collapsed "Add field (optional)" section — signature lines are auto-placed,
   so hand-adding a box is the exception, not the default */
.esign-collapse-summary {
  cursor: pointer; list-style: none; margin: 0; display: flex; align-items: center; gap: 6px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600;
}
.esign-collapse-summary::-webkit-details-marker { display: none; }
.esign-collapse-summary::before { content: "\25B8"; font-size: 10px; transition: transform var(--ease); }
.esign-addfield-details[open] > .esign-collapse-summary::before,
.esign-note-details[open] > .esign-collapse-summary::before { transform: rotate(90deg); }
.esign-addfield-details[open] > .esign-collapse-summary,
.esign-note-details[open] > .esign-collapse-summary { margin-bottom: 10px; }
.esign-summary-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-light); }
/* the Send panel stacks Email message + Add-field collapsibles — separate them */
.esign-note-details + .esign-addfield-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.esign-side input[type=text], .esign-side input[type=email], .esign-side select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  margin-bottom: 6px; font-size: 14px;
}
.esign-side textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; min-height: 58px; margin-bottom: 4px;
}
.esign-side textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.esign-note-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 4px 0; }
.esign-note-actions { display: flex; align-items: center; gap: 10px; }
/* mini render of the outbound email so the rep sees exactly what's sent */
.esign-email-preview {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-alt);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.55; color: var(--text); margin-bottom: 10px;
}
.esign-email-preview p { margin: 0 0 8px; }
.esign-email-preview p:last-child { margin-bottom: 0; }
.esign-email-meta {
  font-size: 11px; color: var(--muted); padding-bottom: 6px; margin-bottom: 8px !important;
  border-bottom: 1px solid var(--border);
}
.esign-email-howto { background: var(--surface-2, rgba(4,50,118,.04)); border-radius: var(--radius-sm); padding: 8px 10px; }
.esign-email-note {
  border-left: 3px solid var(--gold, #cda43e); background: #f7f5ee; color: #4a4636;
  padding: 8px 10px; margin: 0 0 8px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.esign-email-note-from {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 3px;
}
.esign-email-btn {
  display: inline-block; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 2px;
}
.esign-fieldtypes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.esign-ft { border: 1px solid var(--border-strong); background: var(--panel); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-size: 13px; }
.esign-ft.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.esign-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0; }
.esign-check-strong { font-weight: 700; font-size: 13px; }
.esign-hint { font-size: 12px; margin: 6px 0 10px; }
.esign-send-opts { margin: 12px 0; padding: 10px 12px; background: var(--surface-2, rgba(4,50,118,.04)); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.esign-guide-view-link { font-weight: 400; font-size: 12px; color: var(--accent); margin-left: 4px; }
.esign-guide-note { font-size: 12px; margin: 0 0 8px; line-height: 1.5; }
.esign-guide-note a { color: var(--accent); }
.esign-events { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.esign-events li { padding: 3px 0; border-bottom: 1px solid var(--border); }
.esign-ok { color: var(--ok); font-size: 13px; }
.esign-linkfield { width: 100%; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 12px; margin: 6px 0; }

.esign-canvas-wrap { flex: 1; min-width: 0; overflow: auto; background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; max-height: 78vh; }
.esign-page { position: relative; margin: 0 auto 16px; box-shadow: var(--shadow-md); background: #fff; }
.esign-page canvas { display: block; }
.esign-overlay { position: absolute; inset: 0; }
.esign-box { position: absolute; border: 2px solid var(--accent); background: rgba(4, 50, 118, 0.10); border-radius: 3px; cursor: move; box-sizing: border-box; }
.esign-box-optional { border-style: dashed; border-color: var(--warn); background: rgba(232, 89, 12, 0.10); }
.esign-box-tag { position: absolute; top: -16px; left: 0; font-size: 10px; background: var(--accent); color: #fff; padding: 1px 5px; border-radius: 3px; white-space: nowrap; pointer-events: none; }
.esign-box-optional .esign-box-tag { background: var(--warn); }
.esign-box-del { position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; line-height: 14px; text-align: center; background: var(--danger); color: #fff; border-radius: 50%; font-size: 12px; cursor: pointer; }
.esign-box-rz { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; background: var(--accent); border: 2px solid #fff; border-radius: 2px; cursor: nwse-resize; }

@media (max-width: 900px) {
  .esign-editor-body { flex-direction: column; }
  .esign-side { flex-basis: auto; width: 100%; }
}
.esign-detect { font-size: 12px; margin: 4px 0 8px; line-height: 1.4; }
.esign-rm-status { font-size: 12px; margin: 8px 0; line-height: 1.4; }
.esign-backbtn { display: block; width: 100%; margin-top: 10px; text-align: center; }
.esign-ordno-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0 2px; color: var(--muted); }
.esign-ordno-row input { flex: 1; }

/* sidebar nav badge (E-Signature: signed forms not yet in RollMaster) */
.nav-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 8px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 999px; background: var(--gold); color: var(--accent-dark); vertical-align: middle;
}

/* ============================================================
   User preferences — text size + alternate (dark) theme.
   Driven by the sidebar ⚙ Settings panel (openSettingsModal in app.js),
   persisted per-browser in localStorage, applied to <html> before first
   paint by the inline script in index.html and by applyUiPrefs().
   ============================================================ */

/* Text size: zoom the whole app uniformly. The stylesheet is almost
   entirely px-based, so scaling a root font-size wouldn't carry; zoom
   scales layout and type together. */
body { zoom: var(--ui-font-scale, 1); }

/* Settings panel controls */
.settings-section { margin-bottom: 18px; }
.settings-section:last-of-type { margin-bottom: 6px; }
.settings-label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.settings-hint { font-size: 11.5px; color: var(--muted-light); margin-top: 6px; }
.settings-seg {
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.settings-seg button {
  background: var(--panel); border: none; border-right: 1px solid var(--border);
  padding: 8px 14px; font: inherit; font-size: 13px; color: var(--text);
  cursor: pointer; transition: background var(--ease), color var(--ease);
}
.settings-seg button:last-child { border-right: none; }
.settings-seg button:hover { background: var(--panel-alt); }
.settings-seg button.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ---- Dark theme ---------------------------------------------------------
   Keeps the Levi's 4 Floors identity after dark: every surface is tinted
   toward the brand navy (not neutral slate) so it sits under the fixed
   navy sidebar as one piece, warm gold stays the single accent, and text
   is a warm off-white that's easy on the eyes for a long shift. Override
   the design tokens, then patch the handful of spots that hardcode a
   light value. ---- */
:root[data-theme="dark"] {
  --bg: #0e1826;            /* deep navy ink */
  --panel: #16233a;         /* lifted navy surface */
  --panel-alt: #1f2f49;     /* header rows / hover */
  --border: #2c3e58;
  --border-strong: #3d5474;
  --text: #e8eaf1;          /* warm off-white */
  --muted: #a0abbf;
  --muted-light: #6d7c93;
  --accent: #6398d3;        /* brand navy, lightened for contrast on dark */
  --accent-dark: #4a7bba;
  --accent-light: #17293f;  /* selected row / soft navy fill */
  --gold: #d9b45c;          /* the accent — kept rich and warm */
  --gold-dark: #b28c37;
  --danger: #e46980;
  --danger-bg: #371f28;
  --ok: #45b381;
  --ok-bg: #112e23;
  --warn: #e68f4e;
  --grey-chip: #7d8a9c;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.62);
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] ::selection { background: var(--accent); color: #fff; }
:root[data-theme="dark"] a { color: #8fb6e6; }
:root[data-theme="dark"] .btn { background: var(--panel); color: var(--text); }
:root[data-theme="dark"] .btn.danger { background: var(--panel); border-color: var(--danger); }
:root[data-theme="dark"] .ampm-btn,
:root[data-theme="dark"] .photo-note-input,
:root[data-theme="dark"] .lightbox-note-section input { background: var(--panel); color: var(--text); }
:root[data-theme="dark"] tr.problem-row:hover td { background: var(--danger-bg); }
/* Quiet scrollbars: the light-mode thumb is a near-black wash that
   vanishes on a dark ground — lift it to a faint white instead. */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.13); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }
/* Document/PDF surfaces stay light — they render a white page underneath. */
:root[data-theme="dark"] .esign-page { background: #f4f4f4; }
/* Sidebar nav: it's a fixed navy gradient in every theme (not driven by
   --panel/--text), so dark mode's own contrast bump doesn't reach it —
   brighten the label text a touch and make the hover/active highlight
   noticeably more visible against the darker overall page. */
:root[data-theme="dark"] .nav-item { color: #f1f4fa; }
:root[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
:root[data-theme="dark"] .nav-item.active { background: rgba(217, 180, 92, 0.3); }
:root[data-theme="dark"] .nav-item-dashboard:hover { background: rgba(255, 255, 255, 0.2); }

/* ----------------------------------------------------------------------
   "l4f.com" theme — Playfair Display headings / Montserrat body match the
   site's typography, and the accent colors are pulled straight from
   levis4floors.com's live theme CSS (checked 2026-09-24): #013475 is the
   site's actual link/button-primary blue (the app's default --accent,
   #043276, is already a near-exact match), and #9ea6ca is the brighter
   periwinkle blue the site uses for hover/active states — lightened here
   for use as a background wash so hovers/selections read as a real,
   brighter blue instead of the default theme's near-white tint. A thin
   gold rule under the sidebar logo echoes the site's header gold bar (see
   public/sign.html .goldbar). ---- */
:root[data-theme="l4f"] {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --accent: #013475;
  --accent-dark: #011f47;
  --accent-light: #d4dbf1;
}
:root[data-theme="l4f"] .brand { border-bottom: 3px solid var(--gold); padding-bottom: 13px; }

/* ---------- Experimental: Order Rebuild ---------- */
.order-rebuild-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.order-rebuild-bar label { font-weight: 600; color: var(--muted); }
.order-rebuild-bar input { padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 14px; min-width: 200px; }
.or-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.or-pulled { color: var(--muted); font-size: 12px; }
.or-caveats { background: var(--danger-bg); border: 1px solid #f0c6cb; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.or-caveats strong { color: var(--warn); display: block; margin-bottom: 4px; }
.or-caveats ul { margin: 0; padding-left: 18px; }
.or-caveats li { margin: 3px 0; font-size: 13px; }
.or-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; }
.or-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.or-card h3 { margin: 6px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.or-card h3:first-child { margin-top: 0; }
table.or-kv { width: 100%; border-collapse: collapse; }
table.or-kv th { text-align: right; padding: 3px 10px 3px 0; color: var(--muted); font-weight: 600; white-space: nowrap; width: 42%; vertical-align: top; }
table.or-kv td { padding: 3px 0; }
.or-addr { font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
table.or-lines { width: 100%; border-collapse: collapse; margin: 12px 0; background: var(--card, #fff); border: 1px solid var(--border); }
table.or-lines th, table.or-lines td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
table.or-lines thead th { background: var(--accent-light); color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
table.or-lines .or-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.or-line-style { font-weight: 600; }
.or-line-color { color: var(--muted); }
.or-line-cmt { color: var(--muted); font-size: 12px; padding-left: 14px; }
.or-line-cmt.or-req { color: #7a4a00; }
table.or-lines tfoot th { text-align: right; color: var(--muted); font-weight: 600; }
table.or-lines tfoot .or-grand th, table.or-lines tfoot .or-grand td { font-weight: 700; color: var(--ink, #111); border-top: 2px solid var(--border-strong); }
.or-foot { margin: 8px 0 4px; font-size: 12px; }
pre.or-raw { max-height: 340px; overflow: auto; background: #0d1526; color: #d6e2ff; padding: 12px; border-radius: 6px; font-size: 11px; }
@media (max-width: 720px) { .or-grid { grid-template-columns: 1fr; } }

/* ---------- Experimental: MeasureSquare Bridge ---------- */
.ms-actionbar { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
table.ms-table { width: 100%; border-collapse: collapse; margin: 10px 0; background: var(--card, #fff); border: 1px solid var(--border); }
table.ms-table th, table.ms-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
table.ms-table thead th { background: var(--accent-light); color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.ms-row { cursor: pointer; }
.ms-row:hover { background: var(--accent-light); }
.ms-row-acts { white-space: nowrap; }
.ms-backbtn { margin: 8px 0 14px; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; align-items: start; }
.ms-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.ms-card h3 { margin: 6px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.ms-card h3:first-child { margin-top: 0; }
.ms-card .btn { margin: 8px 8px 0 0; }
.ms-danger { color: var(--danger); border-color: var(--danger); }
.ms-link-row { display: flex; gap: 8px; margin: 8px 0; }
.ms-link-row input { flex: 1; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 14px; }
#msNote { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 13px; font-family: inherit; margin-bottom: 8px; resize: vertical; }
.ms-pdf-frame { width: 100%; height: 640px; border: 1px solid var(--border); border-radius: 6px; }
@media (max-width: 720px) { .ms-grid { grid-template-columns: 1fr; } }

.ms-flowcard { margin: 14px 0 18px; }
.ms-flow-row { display: flex; align-items: center; gap: 14px; margin: 12px 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.ms-flow-row:first-of-type { margin-top: 4px; }
.ms-flow-label { display: flex; flex-direction: column; gap: 4px; min-width: 190px; flex: 0 0 190px; }
.ms-flow-name { font-weight: 700; font-size: 13px; }
.ms-flow-badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 10px; width: fit-content; }
.ms-flow-badge-active { background: var(--ok-bg); color: var(--ok); }
.ms-flow-badge-pending { background: var(--accent-light); color: var(--accent); }
.ms-flow-steps { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ms-flow-step { background: var(--bg, #f5f6fa); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 11px; font-size: 12px; white-space: nowrap; }
.ms-flow-step-end { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ms-flow-arrow { color: var(--muted); font-size: 14px; flex: 0 0 auto; }
.ms-flow-foot { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 720px) { .ms-flow-label { min-width: 150px; flex-basis: 150px; } }

/* ---- E-Doc Sandbox (job # -> e-signature launcher) ---- */
.edb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.edb-bar label { font-weight: 600; color: var(--muted); }
.edb-bar input { padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 14px; min-width: 200px; }
.edb-lookup-ok { font-size: 13.5px; color: var(--text); background: var(--accent-light); border-radius: 6px; padding: 6px 10px; display: inline-block; }
.edb-check { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 8px 0 2px; }
.edb-note { color: var(--muted); font-size: 12px; margin: 6px 0 10px; max-width: 640px; }
.edb-note a { color: var(--accent); }
.edb-field { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 8px 0 2px; }
.edb-field > span { font-weight: 600; color: var(--muted); min-width: 108px; }
.edb-field input, .edb-field select { padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 13px; }
.edb-field input[type="email"] { min-width: 280px; }
.edb-recent-head { display: flex; align-items: baseline; justify-content: space-between; max-width: 100%; }
.edb-recent-head .edb-recent-title { margin-bottom: 8px; }
.edb-recent-acts { display: flex; gap: 14px; white-space: nowrap; }
.btn-link.edb-del { color: var(--danger); }
.btn-link.edb-del:hover { text-decoration: underline; }
.edb-terminal-head { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 0; padding: 4px 10px; background: #1b2433; color: #9fb3c8; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 6px 6px 0 0; }
.edb-terminal-actions { display: flex; gap: 12px; }
.edb-terminal-actions .btn-link { color: #9fb3c8; font-size: 11px; }
pre.edb-terminal { margin: 0 0 14px; max-height: 320px; overflow: auto; background: #0d1526; color: #cfe0f5; padding: 10px 12px; border-radius: 0 0 6px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
pre.edb-terminal:empty::before { content: "waiting for a build…"; color: #5b6b82; }
.edb-term-line { display: block; }
.edb-term-in { color: #cfe0f5; }
.edb-term-srv { color: #a9c9e8; }
.edb-term-ok { color: #7ee0a8; }
.edb-term-err { color: #ff9aa6; }
.edb-built-ok { margin: 10px 0 4px; font-size: 13px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.edb-open-btn { padding: 6px 12px; font-size: 13px; }
.edb-deposit-amt.hidden { display: none; }
.edb-deposit-amt input { padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 13px; }

/* "clear payment against RollMaster A/R (test)" action under the log terminal */
.edb-log-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.edb-log-actions:empty { display: none; }
.edb-notes { margin: 26px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, #fff); max-width: 860px; }
.edb-notes > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
.edb-notes[open] > summary { border-bottom: 1px solid var(--border); }
.edb-notes > h4, .edb-notes > p, .edb-notes > ul { padding: 0 16px; }
.edb-notes > h4 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.edb-notes > p { margin: 4px 0; font-size: 13px; line-height: 1.55; color: var(--fg, #1e2430); }
.edb-notes > ul { margin: 4px 0 10px; }
.edb-notes > ul li { font-size: 13px; line-height: 1.5; margin: 4px 0; }
.edb-notes code { background: var(--accent-light); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.edb-recent-title { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
table.edb-recent { width: 100%; border-collapse: collapse; background: var(--card, #fff); border: 1px solid var(--border); }
table.edb-recent th, table.edb-recent td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; }
table.edb-recent thead th { background: var(--accent-light); color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.edb-pay-cell, .edb-diag-cell { white-space: nowrap; }
.edb-diag-cell-open { white-space: normal; }
.edb-diag-picker { max-width: 560px; }
.edb-diag-thumbs { display: flex; flex-wrap: wrap; gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.edb-diag-thumb { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 112px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card, #fff); cursor: pointer; }
.edb-diag-thumb:hover { border-color: var(--accent); }
.edb-diag-thumb-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-light); }
.edb-diag-thumb-img { display: flex; align-items: center; justify-content: center; width: 96px; height: 120px; background: #f4f4f4; border-radius: 3px; overflow: hidden; }
.edb-diag-thumb-img img, .edb-diag-thumb-img canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
.edb-diag-thumb-loading, .edb-diag-thumb-err { font-size: 11px; color: var(--text-muted, #888); }
.edb-diag-thumb-name { font-size: 10px; line-height: 1.2; max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edb-diag-thumb-name em { font-style: normal; color: var(--accent); font-weight: 600; }
.edb-diag-actions { margin-top: 6px; display: flex; gap: 10px; }
.edb-pay-pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.edb-pay-pending { background: #fdf1d8; color: #8a6100; }
.edb-pay-paid { background: #fbeccf; color: #7a5600; }   /* card cleared, pending A/R post */
.edb-pay-cleared { background: #dcefe2; color: #17603c; } /* posted to RollMaster A/R */
.edb-pay-failed { background: #fdecee; color: #b23142; }

/* ===== Upload Workflow (Experimental) ===== */
.uw-view { max-width: 1120px; }
.uw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.uw-intro { max-width: 760px; margin: 6px 0 20px; line-height: 1.55; }

.uw-listbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.uw-listbar-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.uw-showall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.uw-list-title { font-family: var(--font-display); font-size: 18px; margin: 0; color: var(--text); }
.uw-past-list { display: flex; flex-direction: column; gap: 8px; }
.uw-past-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 14px; box-shadow: var(--shadow-sm);
}
.uw-past-open { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.uw-past-open > .uw-case { align-self: stretch; }

/* --- case cards --- */
.uw-cases { display: flex; flex-direction: column; gap: 16px; }
.uw-empty {
  background: var(--panel); border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 34px 20px; text-align: center; color: var(--muted);
}
.uw-case {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.uw-case-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--panel-alt); border-bottom: 1px solid var(--border);
}
.uw-order-chip {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  border-radius: var(--radius-sm); padding: 4px 12px; white-space: nowrap;
}
.uw-order-chip.is-none { background: var(--grey-chip); }
.uw-cust { font-weight: 600; color: var(--text); }
.uw-cust.is-none { font-weight: 400; color: var(--muted-light); }
.uw-case-spacer { flex: 1 1 auto; }
.uw-created { font-size: 12px; color: var(--muted); white-space: nowrap; }
.uw-ready-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.uw-ready-badge.is-ready { background: var(--ok-bg); color: var(--ok); }
.uw-ready-badge.is-partial { background: var(--accent-light); color: var(--accent); }
.uw-case-del {
  border: none; background: none; cursor: pointer; color: var(--muted-light);
  font-size: 16px; line-height: 1; padding: 4px; border-radius: var(--radius-sm);
}
.uw-case-del:hover { color: var(--danger); background: var(--danger-bg); }

/* --- three stage tiles --- */
.uw-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
@media (max-width: 860px) { .uw-stages { grid-template-columns: 1fr; } }
.uw-soon { font-weight: 400; font-size: 12px; color: var(--muted); }
.uw-case-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
.uw-case-foot .uw-stage-hint { margin-right: auto; }
.uw-case-foot.is-pushed { justify-content: flex-start; color: var(--ok); font-weight: 600; font-size: 13px; background: var(--ok-bg); }
.uw-stage { background: var(--panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.uw-stage-top { display: flex; align-items: center; gap: 8px; }
.uw-stage-ico {
  width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--accent-light); color: var(--accent); font-size: 12px;
}
.uw-stage-top h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex: 1; }
.uw-stage-pill {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.uw-stage-pill.is-todo { background: var(--panel-alt); color: var(--muted); border: 1px solid var(--border); }
.uw-stage-pill.is-progress { background: #fdf1d8; color: var(--gold-dark); }
.uw-stage-pill.is-done { background: var(--ok-bg); color: var(--ok); }
.uw-stage-body { display: flex; gap: 12px; align-items: flex-start; min-height: 64px; }
.uw-stage-main { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.uw-stage-line { font-size: 12.5px; color: var(--text); }
.uw-stage-hint { font-size: 11.5px; color: var(--muted); }
.uw-stage-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.uw-sig-linkout { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.uw-sig-linkout:empty { display: none; }
.uw-sig-linkout .esign-linkfield { width: 100%; font-size: 12px; }

/* compact buttons used inside stage tiles + pickers */
.uw-btn {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.uw-btn:hover { background: var(--panel-alt); border-color: var(--accent); }
.uw-btn:active { transform: translateY(1px); }
.uw-btn:disabled { opacity: .5; cursor: default; }
.uw-btn.is-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)); color: #fff;
  border-color: var(--accent-dark); text-transform: uppercase; letter-spacing: .03em; font-size: 11px;
}
.uw-btn.is-primary:hover { filter: brightness(1.12); }
.uw-btn.is-danger { color: var(--danger); border-color: #f0c6cb; }
.uw-btn.is-danger:hover { background: var(--danger-bg); }

/* inline amount / note form (manual deposit + custom payment link) */
.uw-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uw-inline-form input {
  padding: 5px 8px; font-size: 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--text);
}
.uw-inline-form .uw-amt { width: 92px; }
.uw-inline-form .uw-note { width: 150px; }

/* generated payment / signing link readout */
.uw-linkbox {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.uw-linkbox code {
  font-size: 11px; word-break: break-all; color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* --- new-case panel --- */
.uw-newcase { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 20px; max-width: 820px; }
.uw-newcase-thumbs { display: flex; flex-wrap: wrap; gap: 10px; max-height: 380px; overflow-y: auto; margin: 12px 0; padding: 2px; }
.uw-newcase-order { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; }
.uw-newcase-order input { padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); min-width: 220px; }
.uw-newcase-actions { display: flex; gap: 10px; margin-top: 4px; }

.uw-thumb-zoom { font-size: 10px; color: var(--accent); cursor: pointer; text-align: center; }
.uw-thumb-zoom:hover { text-decoration: underline; }
.uw-tag-btns { display: flex; gap: 3px; width: 100%; }
.uw-tag-btn { flex: 1; font-size: 9px; padding: 1px 2px; border: 1px solid var(--border); border-radius: 3px; text-align: center; cursor: pointer; color: var(--muted); background: var(--panel); }
.uw-tag-btn:hover { border-color: var(--accent); }
.uw-tag-btn-active-order { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
.uw-tag-btn-active-diagram { background: #fdf1d8; border-color: var(--gold); color: var(--gold-dark); font-weight: 600; }
.uw-diag-typecheck { margin: 8px 0 0; font-size: 11.5px; }

.uw-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.uw-lightbox-inner { position: relative; max-width: 92vw; max-height: 92vh; background: var(--panel, #fff); border-radius: var(--radius-md); padding: 14px; overflow: auto; box-shadow: var(--shadow-md); }
.uw-lightbox-close { position: absolute; top: 6px; right: 8px; font-size: 22px; line-height: 1; background: none; border: none; cursor: pointer; color: var(--muted); }
.uw-lightbox-close:hover { color: var(--text); }
.uw-lightbox-name { font-size: 12px; color: var(--muted); margin-bottom: 8px; padding-right: 24px; }
.uw-lightbox-body img, .uw-lightbox-body canvas { display: block; max-width: 82vw; max-height: 80vh; border: 1px solid var(--border); }

/* stage thumbnail (bigger than the old row thumb) */
.uw-row-thumb { display: inline-block; width: 54px; height: 68px; flex: none; cursor: zoom-in; }
.uw-row-thumb-img { display: flex; align-items: center; justify-content: center; width: 54px; height: 68px; background: var(--panel-alt); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.uw-row-thumb-img img, .uw-row-thumb-img canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
.uw-row-thumb:hover .uw-row-thumb-img { border-color: var(--accent); }


/* ---- Workflow Tests hub (Experimental) ---- */
.wf-tests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 8px 0 24px;
}
.wf-test-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold, #cda43e);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.wf-test-card:hover,
.wf-test-card:focus-visible {
  border-color: var(--accent);
  border-left-color: var(--gold, #cda43e);
  box-shadow: var(--shadow-sm, var(--shadow-xs));
  transform: translateY(-1px);
}
.wf-test-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-test-title .nav-badge { font-family: var(--font-body, inherit); font-style: normal; }
.wf-test-desc { font-size: 13px; line-height: 1.45; color: var(--muted); flex: 1; }
.wf-test-open { font-size: 13px; font-weight: 600; color: var(--accent); }

/* Workflow Tests: per-test notes (downsides / potential issues) */
.wf-notes-heading {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-size: 20px;
  margin: 8px 0 2px;
}
.wf-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin: 10px 0 32px;
}
.wf-notes-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}
.wf-notes-panel h3 { margin: 0 0 8px; font-size: 15px; color: var(--accent); }
.wf-notes-list { list-style: none; margin: 0 0 10px; padding: 0; flex: 1; }
.wf-notes-list > li.muted { font-size: 13px; padding: 4px 0; }
.wf-note { border-left: 3px solid var(--gold); padding: 6px 0 6px 10px; margin-bottom: 8px; }
.wf-note-body { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.wf-note-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.wf-note-del { background: none; border: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; }
.wf-note-del:hover, .wf-note-del.confirming { color: var(--danger); }
.wf-notes-form { display: flex; flex-direction: column; gap: 6px; }
.wf-notes-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); resize: vertical; }
.wf-notes-form .btn { align-self: flex-end; }

/* Sample Checkout — n8n label reader results under the photo grid */
.slr-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.slr-list:empty { display: none; }
.slr-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-alt); }
.slr-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex: none; background: var(--border); }
.slr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.slr-status { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.slr-ok { color: var(--ok); }
.slr-warn { color: var(--warn); }
.slr-bad { color: var(--danger); }
.slr-muted, .slr-msg { color: var(--muted); font-weight: normal; font-size: 0.9em; }
.slr-spinner { width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: slr-spin 0.8s linear infinite; }
@keyframes slr-spin { to { transform: rotate(360deg); } }
.slr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.slr-field { display: flex; flex-direction: column; gap: 2px; font-size: 0.85em; color: var(--muted); }
.slr-field input, .slr-field select { width: 100%; min-width: 0; box-sizing: border-box; }
.slr-field.slr-low input, .slr-field.slr-low select { border-color: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 25%, transparent); }
.slr-field.slr-low span { color: var(--warn); font-weight: 600; }
.slr-summary { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 0.9em; }
.slr-summary dt { color: var(--muted); }
.slr-summary dd { margin: 0; overflow-wrap: anywhere; }
.slr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) { .slr-fields { grid-template-columns: 1fr; } }
.slr-label { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); }
.slr-candidates { display: flex; flex-wrap: wrap; gap: 6px; }
.slr-field[hidden] { display: none; }

/* Sample Checkout: per-sample items list */
.si-list { display: flex; flex-direction: column; gap: 8px; }
.si-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-alt); }
.si-main { min-width: 0; flex: 1 1 200px; }
.si-type { font-size: 0.85em; color: var(--muted); }
.si-summary { overflow-wrap: anywhere; }
.si-form { margin-top: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px; }
#wrap_sample_items > .slr-actions { margin-top: 8px; }
.si-photo { display: flex; gap: 10px; align-items: flex-start; }
.si-photo-thumb:empty { display: none; }
.si-photo-thumb .slr-thumb { width: 72px; height: 72px; }
.si-photo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.si-read { display: flex; flex-direction: column; gap: 6px; }
.si-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); flex: none; background: var(--border); }
/* Phones: label photo on its own row, big enough to read the label. */
@media (max-width: 560px) {
  .si-photo { flex-direction: column; align-items: stretch; }
  .si-photo-thumb .slr-thumb { width: 100%; height: auto; max-height: 240px; object-fit: contain; }
  .slr-item { flex-direction: column; }
  .slr-item > .slr-thumb { width: 100%; height: auto; max-height: 200px; object-fit: contain; }
  .slr-body { width: 100%; }
  #samplePhotoGrid .photo-note-card { width: calc(50% - 4px); }
  #samplePhotoGrid .photo-thumb { width: 100%; height: auto; aspect-ratio: 1; }
  #samplePhotoGrid .photo-note-input { width: 100%; box-sizing: border-box; }
}
.si-type-pick { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 6px 0; font-weight: normal; }


/* ---------- Ask the Coach (Sales section) ---------- */
.sc-wrap { display: flex; flex-direction: column; height: calc(100vh - 64px); max-width: 860px; }
.sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sc-head .btn { flex-shrink: 0; margin-top: 6px; }
.sc-log { flex: 1; min-height: 240px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.sc-msg { display: flex; gap: 8px; align-items: flex-end; }
.sc-user { justify-content: flex-end; }
.sc-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sc-avatar img { width: 100%; height: 100%; display: block; }
.sc-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; font-size: 14px; overflow-wrap: anywhere; }
.sc-user .sc-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.sc-bot .sc-bubble { background: var(--panel-alt); color: var(--text); border-bottom-left-radius: 4px; }
.sc-bubble.sc-error { background: var(--danger-bg); color: var(--danger); }
.sc-followup { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); font-style: italic; }
.sc-followup.sc-solo { margin: 0; padding: 0; border: 0; }
.sc-typing { display: flex; gap: 4px; padding: 14px; }
.sc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-light); animation: sc-blink 1.2s infinite ease-in-out; }
.sc-typing span:nth-child(2) { animation-delay: .2s; }
.sc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sc-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sc-empty { margin: auto; text-align: center; }
.sc-empty-title { font-family: var(--font-display); font-size: 20px; color: var(--accent); margin-bottom: 14px; }
.sc-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sc-chip { border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.sc-chip:hover { background: var(--accent-light); border-color: var(--accent); }
.sc-compose { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.sc-compose textarea { flex: 1; resize: none; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--panel); color: var(--text); }
.sc-compose .btn { min-width: 84px; }
.sc-foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 700px) {
  .sc-wrap { height: calc(100vh - 110px); }
  .sc-bubble { max-width: 88%; }
}

/* ---------- week calendars: stacked day rows on phone + tablet ----------
   Six side-by-side day columns need ~1000px of content width; below that the
   week used to scroll/swipe sideways. Here each day becomes a full-width row
   (day + capacity on the left, appointments flowing to the right) so the
   whole week reads top-to-bottom with no horizontal scrolling. Must stay
   after the 880px mobile block above, which sets the old swipe layout. */
@media (max-width: 1180px) {
  .week-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .day-col { flex-direction: row; min-height: 0; }
  .day-col-header {
    flex: 0 0 130px;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .day-col-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    align-content: start;
    min-height: 48px;
  }
  .day-col-body.clickable-body:hover { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
}
@media (max-width: 600px) {
  /* Phone: day header becomes a slim strip above that day's appointments. */
  .day-col { flex-direction: column; }
  .day-col-header {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 32px 8px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .day-col-header .cap-badge { margin-top: 0; }
  .day-col-body { grid-template-columns: 1fr; min-height: 0; }
  .day-col-body.clickable-body:hover { border-radius: 0 0 var(--radius-md) var(--radius-md); }
}

/* ---------- Floor Flows demo: dashboard welcome card ---------- */
.demo-welcome-card {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  margin: 0 0 18px; padding: 14px 18px; border-radius: 12px;
  background: #e0f0f2; color: #13233b; border: 1px solid #b9dde2; border-left: 4px solid #1d7486;
}
.demo-welcome-card:hover { border-color: #1d7486; }
[data-theme="dark"] .demo-welcome-card { background: #12303a; color: #eef1f6; border-color: #2a3a55; border-left-color: #5cc3d4; }

/* ---------- Team Chat (Experimental) ----------
   People list (online first) on the left, the open thread on the right.
   ≤760px shows one pane at a time: the list, or a thread with a ‹ back
   button (.tc-show-thread on .tc-wrap switches between them). */
.tc-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 190px);
  height: calc(100dvh - 190px);
  min-height: 440px;
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.tc-people { border-right: 1px solid var(--border); overflow-y: auto; padding: 8px; background: var(--panel-alt); }
.tc-people-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 14px 8px 6px; }
.tc-people-empty { font-size: 12.5px; color: var(--muted-light); padding: 4px 8px 8px; }
.tc-person {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border: none; border-radius: var(--radius-md);
  background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.tc-person:hover { background: var(--panel); }
.tc-person.active { background: var(--accent-light); }
.tc-person .nav-badge { margin-left: auto; }
.tc-avatar {
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--accent); color: #fff;
}
.tc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.tc-person-row { position: relative; }
.tc-person.has-call { padding-right: 40px; }
.tc-person-row > .tc-call { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.tc-person.has-call .nav-badge { margin-right: 4px; }
.tc-call {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--accent);
  background: var(--panel); border: 1px solid var(--border); line-height: 1.2;
}
.tc-call:hover { background: var(--accent-light); }
.tc-thread-title .tc-call { margin-left: 6px; vertical-align: 1px; font-size: 12px; }
.tc-avatar-team { background: var(--gold); color: var(--accent-dark); font-size: 16px; }
/* Ask Tom, pinned at the top of the people list */
.tc-avatar-tom, .tc-tom-msg .tc-avatar { background: none; }
.tc-avatar-tom img, .tc-tom-mini img, .tc-tom-hero img { border-radius: 50%; width: 100%; height: 100%; display: block; }
.tc-tom { margin-bottom: 4px; border: 1px solid var(--border); background: var(--panel); }
.tc-tom:hover { border-color: var(--gold); }
.tc-tom.active { border-color: var(--gold); }
.tc-pin { margin-left: auto; font-size: 11px; opacity: 0.6; }
.tc-tom-new { margin-left: 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; vertical-align: 2px; }
.tc-tom-new:hover { background: var(--accent-light); }
.tc-tom-open #tcAttach, .tc-tom-open #tcGif { display: none; }
.tc-tom-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tc-tom-empty strong { color: var(--text); font-size: 15px; }
.tc-tom-hero { width: 84px; height: 84px; }
.tc-bubble.sc-error { background: var(--danger-bg); color: var(--danger); padding: 6px 10px; border-radius: var(--radius-md); }
.tc-msg .sc-typing { padding: 6px 0; }
.tc-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--muted-light); border: 2px solid var(--panel-alt);
}
.tc-dot.on { background: var(--ok); }
.tc-dot-inline { position: static; display: inline-block; width: 8px; height: 8px; border: none; margin-right: 5px; vertical-align: 0; }
.tc-person-main { display: flex; flex-direction: column; min-width: 0; }
.tc-person-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-person-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tc-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tc-thread-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.tc-thread-title { display: flex; flex-direction: column; min-width: 0; }
.tc-thread-title strong { font-size: 15px; }
.tc-thread-sub { font-size: 12px; color: var(--muted); }
.tc-back { display: none; border: none; background: none; font-size: 26px; line-height: 1; padding: 0 6px 2px 0; color: var(--accent); cursor: pointer; }
.tc-log { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.tc-empty { margin: auto; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.tc-earlier { align-self: center; margin-bottom: 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); border-radius: 999px; padding: 5px 14px; font-size: 12px; cursor: pointer; }
.tc-day { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.tc-day::before, .tc-day::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* Slack-style rows: everyone left-aligned, avatar gutter, no bubbles */
.tc-msg { position: relative; display: flex; gap: 10px; align-items: flex-start; margin: 6px -16px 0; padding: 4px 16px; }
.tc-msg .tc-react-add { position: absolute; top: 2px; right: 16px; }
.tc-msg:hover { background: var(--panel-alt); }
.tc-msg.tc-grouped { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.tc-msg-gutter { flex-shrink: 0; width: 36px; display: flex; justify-content: center; }
.tc-msg-gutter .tc-avatar { width: 36px; height: 36px; border-radius: 8px; }
.tc-msg-gutter .tc-avatar img { border-radius: 8px; }
.tc-msg-time { visibility: hidden; font-size: 10.5px; color: var(--muted); line-height: 21px; white-space: nowrap; }
.tc-msg:hover .tc-msg-time { visibility: visible; }
.tc-msg-main { flex: 1; min-width: 0; }
.tc-msg-head { font-size: 11.5px; color: var(--muted); margin-bottom: 1px; }
.tc-msg-head strong { color: var(--text); font-size: 14px; margin-right: 4px; }
.tc-bubble {
  color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tc-error { color: var(--danger); font-size: 12.5px; padding: 0 16px; }
.tc-error:empty { display: none; }
.tc-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border); }
.tc-compose textarea {
  flex: 1; resize: none; font: inherit; font-size: 14px; line-height: 1.4; padding: 9px 12px; max-height: 140px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--panel); color: var(--text);
}
.tc-compose .btn { min-width: 76px; }

/* attachments, reactions, pickers */
.tc-msg-row { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.tc-msg-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tc-react-add {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--ease);
}
.tc-msg:hover .tc-react-add, .tc-react-add:focus-visible { opacity: 1; }
@media (hover: none) { .tc-react-add { opacity: 0.6; } }
.tc-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 2px 0; }
.tc-react {
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 1px 8px; font-size: 13px; line-height: 20px; cursor: pointer;
}
.tc-react.mine { border-color: var(--accent); background: var(--accent-light); }
.tc-image { display: block; line-height: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.tc-image img { display: block; width: auto; height: auto; max-width: 320px; max-height: 240px; }
.tc-file {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-width: 200px; max-width: 320px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--panel);
  color: var(--text); text-decoration: none;
}
.tc-file:hover { border-color: var(--accent); }
.tc-file-icon { font-size: 24px; }
.tc-file-main { display: flex; flex-direction: column; min-width: 0; }
.tc-file-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-file-size { font-size: 11.5px; color: var(--muted); }
.tc-tool {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--panel); font-size: 18px; line-height: 1; cursor: pointer;
}
.tc-tool:hover { background: var(--panel-alt); border-color: var(--border-strong); }
.tc-status { color: var(--muted); font-size: 12.5px; padding: 0 16px; }
.tc-status:empty { display: none; }
.tc-thread.tc-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.tc-popover {
  position: fixed; z-index: 300; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.tc-emoji-grid { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; }
.tc-pop-emoji { width: 34px; height: 34px; border: none; border-radius: 8px; background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.tc-pop-emoji:hover { background: var(--panel-alt); }

/* Team GIFs */
.tc-tool-gif { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); }
.tc-gifpick { width: min(380px, calc(100vw - 32px)); height: min(440px, 62vh); display: flex; flex-direction: column; gap: 8px; }
.tc-gifpick-head { display: flex; gap: 6px; }
.tc-gifpick-head input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 6px); background: var(--panel); color: var(--text);
}
.tc-gifpick-add { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--radius-sm, 6px); padding: 0 12px; font-weight: 600; cursor: pointer; }
.tc-gifpick-tabs { display: flex; gap: 4px; }
.tc-gifpick-tabs button { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; cursor: pointer; }
.tc-gifpick-tabs button.active { border-color: var(--accent); background: var(--accent-light); color: var(--text); font-weight: 600; }
.tc-gifpick-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; align-content: start; }
.tc-gifpick-grid.hidden, .tc-gifpick-addform.hidden { display: none; }
.tc-gifpick-empty { grid-column: 1 / -1; color: var(--muted); font-size: 13px; text-align: center; padding: 30px 10px; line-height: 1.5; }
.tc-gif-tile { position: relative; height: 96px; border-radius: 8px; overflow: hidden; background: var(--panel-alt); cursor: pointer; border: 1px solid var(--border); }
.tc-gif-tile:hover { border-color: var(--accent); }
.tc-gif-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-gif-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 4px; font-size: 11.5px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-gif-uses { position: absolute; top: 4px; left: 4px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: 1px 6px; }
.tc-gif-tools { position: absolute; top: 3px; right: 3px; display: none; gap: 2px; }
.tc-gif-tile:hover .tc-gif-tools { display: flex; }
@media (hover: none) { .tc-gif-tools { display: flex; } }
.tc-gif-tools button { width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.tc-gif-rename { width: calc(100% - 8px); margin: 34px 4px 0; font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid var(--accent); border-radius: 6px; }
.tc-gifpick-addform { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tc-gifpick-chosen { flex: 1; min-height: 0; display: grid; place-items: center; background: var(--panel-alt); border-radius: 8px; overflow: hidden; }
.tc-gifpick-chosen img { max-width: 100%; max-height: 220px; }
.tc-gifpick-addform input[type=text], .tc-savegif input {
  font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 6px); background: var(--panel); color: var(--text);
}
.tc-gifpick-row { display: flex; justify-content: flex-end; gap: 6px; }
.tc-gifpick-err { color: var(--danger); font-size: 12.5px; }
.tc-gifpick-err:empty { display: none; }
.tc-savegif { width: 260px; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.tc-savegif-title { font-weight: 700; font-size: 13.5px; }
.tc-gifmsg { display: flex; flex-direction: column; gap: 3px; }
.tc-image-gif { position: relative; }
.tc-image-gif img { max-width: 260px; max-height: 220px; }
.tc-gif-badge { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 4px; padding: 1px 5px; line-height: 1.5; }
.tc-gifmsg-foot { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); padding: 0 2px; }
.tc-gif-save { border: none; background: none; color: var(--accent); font-size: 11.5px; font-weight: 600; padding: 0; cursor: pointer; }
.tc-gif-save:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .tc-wrap { grid-template-columns: 1fr; height: calc(100dvh - 170px); min-height: 360px; }
  .tc-wrap .tc-thread { display: none; }
  .tc-wrap.tc-show-thread .tc-people { display: none; }
  .tc-wrap.tc-show-thread .tc-thread { display: flex; }
  .tc-people { border-right: none; }
  .tc-back { display: block; }
  .tc-msg { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .tc-image img { max-width: 220px; max-height: 200px; }
  .tc-image-gif img { max-width: 220px; max-height: 180px; }
  .tc-gifpick-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .tc-log { padding: 10px 12px; }
  /* 16px stops iOS Safari zooming the page when the box is focused. */
  .tc-compose textarea { font-size: 16px; }
  .tc-compose { gap: 6px; padding: 8px; }
  .tc-tool { width: 36px; height: 36px; }
  .tc-compose .btn { min-width: 0; padding-left: 12px; padding-right: 12px; }

  /* Open conversation = full screen, like a phone's messages app. Sized to
     the visible viewport (--tc-vh/--tc-vtop from chatSyncViewport) so the
     keyboard never hides the message box. Kept under modals (50) so
     Settings etc. still open on top; the ☰ button is hidden instead, and
     the back arrow returns to the people list where it shows again. */
  .tc-wrap.tc-show-thread {
    position: fixed; left: 0; right: 0;
    top: var(--tc-vtop, 0px);
    height: var(--tc-vh, 100dvh); min-height: 0;
    margin: 0; border: none; border-radius: 0; box-shadow: none;
    z-index: 40;
  }
  body:has(.tc-wrap.tc-show-thread) .mobile-menu-toggle { display: none; }
  .tc-show-thread .tc-thread-head { padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 4px; }
  .tc-back { min-width: 44px; height: 44px; padding: 0; font-size: 32px; }
  .tc-show-thread .tc-compose { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .tc-log { overscroll-behavior: contain; }
  .tc-page-sub { display: none; }
  .tc-wrap { height: calc(100dvh - 120px); }

  /* Room for the message box: phone keyboards have emoji, and Send is an icon. */
  #tcEmoji { display: none; }
  .tc-send-label { display: none; }
  .tc-compose .tc-send-icon { display: block; margin: 0 auto; }
  .tc-compose .btn { width: 44px; height: 40px; padding: 0; }
}
.tc-send-icon { display: none; }
@media (hover: none) {
  .tc-react-add { display: none; }
  .tc-show-react .tc-react-add { display: inline-flex; opacity: 1; }
}

/* ---------- Floor Flows demo theme (body.brand-demo, set by server/brand.js) ----------
   Colours from the Floor Flows icon: deep navy, teal wave, oak wave, cream. */
body.brand-demo {
  --bg: #f6f2ea;
  --panel: #ffffff;
  --panel-alt: #efe8dc;
  --border: #e2d9c9;
  --border-strong: #cfc3ae;
  --text: #13233b;
  --muted: #5a6577;
  --accent: #1d7486;
  --accent-dark: #13233b;
  --accent-light: #e0f0f2;
  --gold: #d38f3f;
  --gold-dark: #b8742a;
}
:root[data-theme="dark"] body.brand-demo {
  --bg: #0d1522;
  --panel: #141f31;
  --panel-alt: #1a2740;
  --border: #2a3a55;
  --border-strong: #3a4e6e;
  --text: #eef1f6;
  --muted: #9aa6ba;
  --accent: #5cc3d4;
  --accent-dark: #3fa6b8;
  --accent-light: #12303a;
  --gold: #e2a65e;
  --gold-dark: #c98a42;
}
body.brand-demo #sidebar { background: linear-gradient(180deg, #1a2d4a 0%, #13233b 100%); }
body.brand-demo .demo-welcome-card { background: var(--accent-light); color: var(--text); border-color: var(--border); border-left-color: var(--accent); }
body.brand-demo .login-screen {
  background:
    radial-gradient(circle at 20% 20%, rgba(92, 195, 212, 0.16), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(226, 166, 94, 0.18), transparent 45%),
    linear-gradient(160deg, #13233b 0%, #0d1522 100%);
}

/* Settings → My profile */
.settings-profile { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; }
.settings-avatar { width: 64px; height: 64px; font-size: 20px; }
.settings-profile-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-avatar-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 12px; }
.settings-avatar-opt { padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.settings-avatar-opt img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.settings-avatar-opt:hover, .settings-avatar-opt:focus-visible { border-color: var(--gold); }
.settings-avatar-opt:disabled { opacity: 0.5; cursor: wait; }
@media (max-width: 520px) { .settings-avatar-grid { grid-template-columns: repeat(4, 1fr); } }
.settings-ext { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.settings-ext input { width: 110px; }
.settings-error { color: var(--danger, #b42318); }

/* ★ Welcome & Tour (Levi's) — renderWelcomeTourView */
.wt-view { max-width: 1000px; }
.wt-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 18px 0 14px; }
.wt-map-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.wt-map-item span { font-size: 12.5px; color: var(--muted); }
.wt-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 18px; font-size: 13px; color: var(--muted); }
.wt-guide { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 18px 20px; margin-bottom: 18px; scroll-margin-top: 16px; }
.wt-start { border-left: 4px solid var(--gold); }
.wt-guide-head { display: flex; align-items: center; gap: 10px; }
.wt-guide-head h2 { margin: 0; font-size: 18px; }
.wt-icon { font-size: 22px; }
.wt-why { margin: 8px 0 12px; color: var(--muted); }
.wt-guide-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.wt-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
.wt-steps code { background: var(--panel-alt); padding: 1px 5px; border-radius: 4px; }
.wt-example-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.wt-mock { background: var(--panel-alt); border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.wt-mock-title { font-weight: 700; }
.wt-mock-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wt-mock-label { color: var(--muted); min-width: 110px; }
.wt-mock-input { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
.wt-mock-btn { border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-weight: 600; background: var(--panel); }
.wt-mock-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.wt-mock-ok { color: var(--ok); }
.wt-bubble { background: var(--panel); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 6px 10px; max-width: 90%; }
.wt-bubble strong { display: block; font-size: 11.5px; color: var(--muted); }
.wt-bubble.me { align-self: flex-end; background: var(--accent-light); border-radius: 12px 12px 4px 12px; }
.wt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); vertical-align: 0; }
.wt-tip { margin-top: 14px; padding: 9px 12px; background: var(--accent-light); border-radius: var(--radius-md); font-size: 13px; }
.wt-go { margin-top: 12px; }
@media (max-width: 760px) {
  .wt-guide { padding: 14px; }
  .wt-guide-body { grid-template-columns: 1fr; }
}