/* ──────────────────────────────────────────────────────────────────────────
   ui.css — shared component layer for the neuralduct suite
   ----------------------------------------------------------------------------
   Styles for the cross-app component library in js/core/ui/*. Loaded AFTER
   tokens.css (which defines the --doc-* / --st-* colour families it reads) and
   alongside each app's own stylesheet. Purely additive: every rule is scoped
   under a `.ui-` class so it cannot collide with existing per-app CSS.

   Build order mirrors js/core/ui/. First component: StatusBadge.
   ────────────────────────────────────────────────────────────────────────── */

/* ── StatusBadge ─────────────────────────────────────────────────────────────
   One pill for every lifecycle state across Quoting, Invoicing and Scheduling.
   Colour is driven entirely by a single token per status, resolved from the
   `--_c` custom property set by [data-status]. The tinted background is derived
   from that same token via color-mix, so there is ONE source of truth per
   status (the token) instead of the old fg+bg hardcoded hex pair. color-mix in
   srgb is supported by every browser this app targets. */
.ui-badge {
  --_c: var(--doc-draft);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1, 4px);
  padding: 3px var(--sp-2_5, 10px);   /* matches the legacy .badge metrics */
  border-radius: 999px;
  font-size: var(--text-sm, 12px);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--_c);
  background: color-mix(in srgb, var(--_c) 15%, transparent);
}
/* Optional leading dot (e.g. list rows) — inherits the status colour. */
.ui-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--_c);
  flex: 0 0 auto;
}

/* Quote + invoice lifecycle → --doc-* family */
.ui-badge[data-status="draft"]          { --_c: var(--doc-draft); }
.ui-badge[data-status="sent"]           { --_c: var(--doc-sent); }
.ui-badge[data-status="viewed"]         { --_c: var(--doc-viewed); }
.ui-badge[data-status="accepted"]       { --_c: var(--doc-accepted); }
.ui-badge[data-status="open"]           { --_c: var(--doc-open); }
.ui-badge[data-status="partially_paid"] { --_c: var(--doc-partial); }
.ui-badge[data-status="paid"]           { --_c: var(--doc-paid); }
.ui-badge[data-status="overdue"]        { --_c: var(--doc-overdue); }
.ui-badge[data-status="declined"]       { --_c: var(--doc-declined); }
.ui-badge[data-status="expired"]        { --_c: var(--doc-expired); }
.ui-badge[data-status="void"]           { --_c: var(--doc-void); }

/* Dispatch job lifecycle → --st-* family (same component, one grammar) */
.ui-badge[data-status="scheduled"]      { --_c: var(--st-scheduled); }
.ui-badge[data-status="en_route"]       { --_c: var(--st-en_route); }
.ui-badge[data-status="in_progress"]    { --_c: var(--st-in_progress); }
.ui-badge[data-status="complete"]       { --_c: var(--st-complete); }
.ui-badge[data-status="no_show"]        { --_c: var(--st-no_show); }
.ui-badge[data-status="cancelled"]      { --_c: var(--st-cancelled); }
.ui-badge[data-status="invoiced"]       { --_c: var(--st-invoiced); }

/* ── AppSwitcher ─────────────────────────────────────────────────────────────
   A compact "waffle" button + dropdown injected next to each app's back arrow
   (js/core/ui/appswitcher.js). The dropdown is SELF-THEMED via local --appsw-*
   vars rather than global tokens, because the three chromes it lives in each
   define their own palette (Books uses --inv-*, the scheduler its own, the hub
   plenum's). Dark surface by default (Books + Dispatch default dark); light
   overrides key off each app's known light-mode hook. The button itself uses
   currentColor so it always matches the bar it sits in. */
.ui-appsw {
  --appsw-surface: #1b1e25;
  --appsw-text:    #f2f4f8;
  --appsw-muted:   #aeb6c4;
  --appsw-border:  #2c313b;
  --appsw-hover:   rgba(255, 255, 255, .07);
  --appsw-accent:  #33b1ff;
  --appsw-shadow:  0 14px 34px -10px rgba(0, 0, 0, .6);
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Light-mode hooks: Books (<html data-books-theme="light">) and the scheduler
   (<html class="sched-light">) both toggle light at the document root. */
:root[data-books-theme="light"] .ui-appsw,
:root.sched-light .ui-appsw {
  --appsw-surface: #ffffff;
  --appsw-text:    #131722;
  --appsw-muted:   #4a5568;
  --appsw-border:  #e4e9f1;
  --appsw-hover:   rgba(19, 23, 34, .06);
  --appsw-accent:  #1493e6;
  --appsw-shadow:  0 14px 34px -10px rgba(28, 26, 22, .22);
}
.ui-appsw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--r-xs, 8px);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: .85;
  transition: background var(--dur-2, 150ms) var(--ease-standard, ease),
              opacity var(--dur-2, 150ms) var(--ease-standard, ease);
}
.ui-appsw__btn:hover,
.ui-appsw__btn[aria-expanded="true"] {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.ui-appsw__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-dropdown, 100);
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  background: var(--appsw-surface);
  border: 1px solid var(--appsw-border);
  box-shadow: var(--appsw-shadow);
  color: var(--appsw-text);
}
.ui-appsw__panel[hidden] { display: none; }

.ui-appsw__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--appsw-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.ui-appsw__item i:first-child { font-size: 17px; color: var(--appsw-muted); }
.ui-appsw__item:hover { background: var(--appsw-hover); }
.ui-appsw__item.is-current { color: var(--appsw-accent); }
.ui-appsw__item.is-current i:first-child { color: var(--appsw-accent); }
.ui-appsw__tick { margin-left: auto; font-size: 15px; }

/* ── LifecycleStrip ──────────────────────────────────────────────────────────
   Quote → Job → Invoice breadcrumb (js/core/ui/lifecycle.js). Theme-agnostic:
   chips use currentColor translucency so they read on any editor surface; the
   accent is inherited from the host app (falls back to ice-blue). */
.ui-lc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
  font-size: 12.5px;
}
.ui-lc__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  white-space: nowrap;
}
.ui-lc__step i:first-child { font-size: 14px; opacity: .75; }
.ui-lc__step em { font-style: normal; opacity: .7; font-size: 11px; }
a.ui-lc__step:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.ui-lc__step.is-todo { opacity: .5; border-style: dashed; }
.ui-lc__step.is-current {
  color: var(--accent, var(--inv-accent, #1493e6));
  background: color-mix(in srgb, var(--accent, #1493e6) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent, #1493e6) 40%, transparent);
  font-weight: 600;
}
.ui-lc__sep { font-size: 13px; opacity: .4; }

/* ── SummaryBar ──────────────────────────────────────────────────────────────
   Segmented, clickable list summary (js/core/ui/summarybar.js). Each segment
   grows proportionally to its weight and carries a status accent on its lower
   edge. Theme-agnostic via currentColor; the accent is set per-segment through
   the inline --seg custom property. */
.ui-sbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  width: 100%;
  grid-column: 1 / -1;   /* span the full width if dropped into a grid container */
}
.ui-sbar__seg {
  flex: 1 1 128px;       /* equal widths that wrap on narrow screens */
  min-width: 128px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-bottom: 3px solid var(--seg, currentColor);
  transition: background var(--dur-2, 150ms) var(--ease-standard, ease),
              transform var(--dur-2, 150ms) var(--ease-standard, ease);
}
.ui-sbar__seg:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  transform: translateY(-1px);
}
.ui-sbar__seg.is-active {
  background: color-mix(in srgb, var(--seg) 16%, transparent);
  border-color: color-mix(in srgb, var(--seg) 55%, transparent);
}
.ui-sbar__val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.ui-sbar__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .68;
}