/* ui-primitives.css — shared shapes the rep dashboard used to inline.
 *
 * Reskin plan step 2 (documentation/projects/RESKIN-PLAN-2026-10-01.md): a
 * skin can only restyle what reaches a class or a token, so repeated inline
 * style attributes move here, declaration for declaration. The default look
 * is unchanged; a theme restyles these from its scoped block, e.g.
 * :root[data-theme="liveops"] .ui-seg.is-on { … }.
 *
 * State lives in classes too: JS toggles .is-on (and aria-pressed) rather
 * than painting colours inline, so a skin owns the active look as well.
 */

/* Shape role tokens, as fallbacks only. dashboard-app.css owns them (and
   Settings > Appearance > Shape overrides them there); :where() has zero
   specificity, so these apply only on a page that doesn't load it, such as
   customer.html. Same values as the dashboard defaults. */
:where(:root) {
  --r-card: 8px;
  --r-input: 6px;
  --elevation-card: none;
}

/* Segmented choice buttons (Card Density, Default Pipeline View, Comfort). */
.ui-seg {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--br);
  background: var(--s);
  color: var(--m);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.ui-seg.ui-seg-tall { padding: 9px 8px; }
/* The Comfort "Text size" choices preview their own size. */
.ui-seg.ui-seg-text-sm { font-size: 10px; }
.ui-seg.ui-seg-text-lg { font-size: 13px; }
.ui-seg.is-on {
  background: var(--orange);
  color: var(--accent-fg, #fff);
  border-color: var(--orange);
}

/* Settings toggle row: label left, control right. */
.ui-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--s2);
  border: 1px solid var(--br);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 12px;
}
/* Same box as .ui-row without the row layout (a panel that opens under one). */
.ui-row-box {
  padding: 10px 12px;
  background: var(--s2);
  border: 1px solid var(--br);
  border-radius: 6px;
  margin-bottom: 6px;
}

/* Panel and field surfaces. Only the skin trio lives here: background,
 * border, radius (and the Shape preset's elevation). Padding and margins
 * stay with each element because they're layout, not skin. The radius
 * comes from the Shape role tokens (dashboard-app.css), so Settings >
 * Appearance > Shape now reaches these surfaces too. At the default shape
 * that's 8px for panels (some were 7px) and 6px for fields (some 4–5px). */
.ui-panel {
  background: var(--s2);
  border: 1px solid var(--br);
  border-radius: var(--r-card, 8px);
  box-shadow: var(--elevation-card, none);
}
.ui-input {
  background: var(--s2);
  border: 1px solid var(--br);
  border-radius: var(--r-input, 6px);
}

/* Money and Expenses section card (money-dashboard.js, expenses.js). The
 * fallbacks match what those builders inlined; the radius stays 12px. */
.ui-card {
  background: var(--s, #12223D);
  border: 1px solid var(--br, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 16px;
}

/* Customer page (customer.html, batch 3). That page doesn't load
 * dashboard-app.css, so these keep their own literal radii. */
/* Document-template tile (Documents tab). Hover lives on .doc-template-card. */
.ui-tile {
  padding: 14px;
  background: var(--s2);
  border-radius: 10px;
  border: 1px solid var(--br);
  cursor: pointer;
  transition: border-color var(--t-mid), transform var(--t-fast);
}
/* A tile's contents: icon, title, one-line description (Documents tab). */
.ui-tile-icon { font-size: 20px; margin-bottom: 6px; }
.ui-tile-title { font-size: 13px; font-weight: 700; color: var(--t); }
.ui-tile-sub { font-size: 11px; color: var(--m); margin-top: 2px; }
/* Customer page tab body: centred column (Activity, Documents, Photos …). */
.ui-page { max-width: 1200px; margin: 0 auto; padding: 20px; }
/* Small action button size (pairs with .btn / .btn-orange). */
.ui-btn-sm { font-size: 11px; padding: 6px 12px; }
/* Inline stroke icons in buttons and empty states. */
.ui-ico-14 { width: 14px; height: 14px; vertical-align: middle; }
.ui-ico-13 { width: 13px; height: 13px; vertical-align: middle; }
/* One-line muted note under a heading. */
.ui-note { font-size: 11px; color: var(--m); }
/* Count badge on a tab (shown by JS; display stays inline as state). */
.ui-count { background: var(--s3, rgba(255,255,255,.08)); color: var(--m, #9ca3af); font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; font-weight: 700; }
/* Modal heading and in-panel section title (display face). */
.ui-modal-title { margin-bottom: 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; }
.ui-sec-title { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; color: var(--t); margin-bottom: 6px; }
/* Large choice card (a button that picks a path). */
.ui-choice { text-align: left; background: var(--s2); border: 1px solid var(--br); border-radius: 12px; padding: 18px; cursor: pointer; color: var(--t); font-family: inherit; transition: border-color .15s, transform .08s; }
/* Outline pill button. */
.ui-pill { padding: 6px 10px; min-height: 36px; border: 1px solid var(--br); border-radius: 999px; background: transparent; color: var(--t); font-size: 12px; cursor: pointer; }
/* Plain (not small-caps) label above a field. */
.ui-label-plain { font-size: 11px; color: var(--m); font-weight: 600; display: block; margin-bottom: 4px; }
/* Modal form fields (product editor). The surface is the shared .ui-input
   above (Shape presets restyle it); .ui-input-box adds the size. */
.ui-input-box { width: 100%; padding: 8px 10px; font-size: 13px; box-sizing: border-box; color: var(--t); }
.ui-input-sm { width: 100%; padding: 6px; background: var(--s2); border: 1px solid var(--br); border-radius: 4px; font-size: 13px; box-sizing: border-box; color: var(--t); }
.ui-label-sm { display: block; font-size: 11px; font-weight: 600; color: var(--m); margin-bottom: 3px; }
.ui-label-strong { display: block; font-size: 12px; font-weight: 700; color: var(--t); margin-bottom: 8px; }
.ui-hint { font-size: 10px; color: var(--m); }
/* Stat tiles: a strip of equal tiles (.ui-stat) and a grid tile (.ui-stat-box)
   (Close Board header and analytics). */
.ui-stat { flex: 1; min-width: 100px; background: var(--s2); border: 1px solid var(--br); border-radius: 10px; padding: 12px; text-align: center; }
.ui-stat-box { background: var(--s2); border: 1px solid var(--br); border-radius: 10px; padding: 14px; text-align: center; }
/* Stacked form inputs under a .ui-caps-label (Close Board create form). */
.ui-field-md { width: 100%; padding: 10px; background: var(--s); border: 1px solid var(--br); border-radius: 8px; color: var(--t); font-size: 13px; margin-top: 4px; box-sizing: border-box; }
.ui-field-xs { width: 100%; padding: 8px; background: var(--s); border: 1px solid var(--br); border-radius: 6px; color: var(--t); font-size: 13px; margin-top: 3px; box-sizing: border-box; }
.ui-caps-label { font-size: 11px; font-weight: 600; color: var(--m); text-transform: uppercase; letter-spacing: .06em; }
/* Full-width form field (Edit Customer sheet). */
.ui-field {
  width: 100%;
  padding: 10px 12px;
  background: var(--s);
  border: 1px solid var(--br);
  border-radius: 8px;
  color: var(--t);
  font-size: 14px;
  box-sizing: border-box;
}
/* The small-caps label above a .ui-field. */
.ui-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--m);
  margin-bottom: 4px;
}

/* Compact select/input (pipeline bulk-edit bar). */
.ui-field-sm {
  background: var(--s3);
  border: 1px solid var(--br);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--t);
}

/* Expenses screen (2026-10-02): form inputs + their small-caps labels, list
   rows, key/value lines and card headings (expenses.js). */
.ui-input-lg { width: 100%; padding: 10px; background: var(--s2); border: 1px solid var(--br); border-radius: 8px; color: var(--t); font-size: 14px; box-sizing: border-box; }
.ui-label-caps { font-size: 11px; color: var(--m); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 4px; }
.ui-list-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--br); }
.ui-kv { display: flex; justify-content: space-between; font-size: 13px; color: var(--t); }
.ui-card-head { margin: 0 0 12px; font-size: 14px; color: var(--t); }

/* A date of loss picked from NWS storm reports — to confirm (claim-core.js). */
.dol-suggested { color: var(--gold, #f59e0b); font-size: 11px; font-weight: 600; }