/* =============================================================================
   Bay Area Support — UNIFIED COMPONENT SYSTEM  (single source of truth)
   -----------------------------------------------------------------------------
   Loaded on ALL THREE surfaces — marketing (site/partials/head.php), portal, and
   public auth (enqueued right after `blc-tokens`). It defines semantic --ui-* ROLE
   tokens (flipped ONCE here for dark mode) plus the canonical component primitives
   (.ui-input, .ui-btn, the one selected/active + focus treatment, .ui-card,
   .ui-chip). Because the role tokens carry EXPLICIT values (not var()s that flip
   differently per surface), the same class themes identically on marketing, auth,
   and portal in both light and dark.

   RULES (follow for every current + future feature):
     • Every form control, button, and selected/active state uses these tokens or
       classes. Never hardcode a surface/text/border hex or invent a per-feature
       input/button look.
     • Orange (--ui-primary) is reserved for PRIMARY actions only (Send, Pay,
       Submit, Continue). "Selected/active" is a pacific tint + accent ring, NOT
       orange.
     • Pacific used as TEXT/ICON/BORDER/RING = --ui-accent (legible teal in dark).
       Pacific as a solid FILL/band keeps --bas-pacific.
   The brand palette still lives in tokens.css (--bas-*); this layer maps it to
   component ROLES. See MEMORY: feedback-unified-component-system.
   ============================================================================= */

:root {
  /* Surfaces */
  --ui-page:            #fffdf4;   /* page background */
  --ui-surface:         #ffffff;   /* cards, inputs, raised content */
  --ui-surface-sunken:  #fbf8f0;   /* insets, readonly/disabled fills, secondary bands */

  /* Text */
  --ui-text:            #132025;
  --ui-text-strong:     #3c434a;
  --ui-text-muted:      #6b7280;

  /* Borders */
  --ui-border:          #e7e4d8;   /* warm hairline — dividers, card edges */
  --ui-border-strong:   #828a93;   /* input/control edge — WCAG AA 3:1 non-text */

  /* Accent — pacific as TEXT/ICON/RING (stays legible in dark → teal) */
  --ui-accent:          #0e3d4f;
  --ui-accent-contrast: #ffffff;   /* text on an accent fill */

  /* Text/icons on an ALWAYS-dark band (header, footer, CTA bands) — stays light in
     BOTH themes, since those bands are dark in both. Do NOT use --ui-text here. */
  --ui-on-dark:         #fffdf4;

  /* Primary action (orange) — PRIMARY buttons / CTAs ONLY */
  --ui-primary:         #cc3624;   /* fill; white text passes AA */
  --ui-primary-hover:   #b02f1e;
  --ui-primary-text:    #c9351f;   /* orange as text/link (AA on light) */

  /* Focus + selection — the ONE canonical treatment each. Focus = OUTER ring;
     selection = tint FILL + accent border (so the two never look alike). */
  --ui-focus-ring:      #0e3d4f;
  --ui-selected-bg:     rgba(14, 61, 79, 0.08);
  --ui-selected-border: #0e3d4f;

  /* Status */
  --ui-success:         #047857;   --ui-success-text: #047857;   --ui-success-bg: rgba(4, 120, 87, 0.10);
  --ui-danger:          #b32d2e;   --ui-danger-text:  #b32d2e;   --ui-danger-bg:  rgba(179, 45, 46, 0.08);
  --ui-amber-bg:        #fef3cd;   --ui-amber-text:   #664d03;

  /* Tooltip bubble (the standard .ui-tip popover). Dark bubble in light theme. */
  --ui-tip-bg:          #132025;   --ui-tip-text:     #ffffff;

  /* Geometry (reuse the brand tokens) */
  --ui-radius:          var(--bas-radius-btn, 8px);
  --ui-radius-lg:       var(--bas-radius-card, 16px);
  --ui-shadow:          var(--bas-shadow-card, 0 4px 16px rgba(17, 24, 39, 0.10));
}

html[data-theme="dark"] {
  --ui-page:            #0e3d4f;
  --ui-surface:         #123f52;
  --ui-surface-sunken:  #0c3644;

  --ui-text:            #f2f7f8;
  --ui-text-strong:     #cfdade;
  --ui-text-muted:      #9aacb5;

  --ui-border:          #1e5164;
  --ui-border-strong:   #6690a3;

  --ui-accent:          #6bbfdb;   /* pacific-as-text becomes sky/teal */
  --ui-accent-contrast: #08222c;   /* dark text on a teal fill */

  --ui-primary:         #cc3624;   /* orange fill unchanged (AA with white text) */
  --ui-primary-hover:   #b02f1e;
  --ui-primary-text:    #ff8a7a;   /* orange as text on navy (AA) */

  --ui-focus-ring:      #6bbfdb;
  --ui-selected-bg:     rgba(107, 191, 219, 0.16);
  --ui-selected-border: #6bbfdb;

  --ui-success:         #047857;   --ui-success-text: #34d399;   --ui-success-bg: rgba(52, 211, 153, 0.16);
  --ui-danger:          #b32d2e;   --ui-danger-text:  #ef8b8b;   --ui-danger-bg:  rgba(239, 139, 139, 0.16);
  --ui-amber-bg:        rgba(252, 211, 77, 0.16);   --ui-amber-text: #f5d98a;

  /* Tooltip flips to a light bubble on the dark theme so it stays high-contrast. */
  --ui-tip-bg:          #e9f1f2;   --ui-tip-text:     #10222a;
}

/* ── Form controls ─────────────────────────────────────────────────────────── */
.ui-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.8rem;
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
textarea.ui-input { min-height: 5rem; resize: vertical; }
.ui-input::placeholder { color: var(--ui-text-muted); opacity: 1; }
.ui-input:focus,
.ui-input:focus-visible {
  outline: none;
  border-color: var(--ui-focus-ring);
  box-shadow: 0 0 0 2px var(--ui-focus-ring);
}
.ui-input[readonly],
.ui-input:disabled { background: var(--ui-surface-sunken); color: var(--ui-text-muted); cursor: default; }
/* ── Field validation — the ONE standard (pairs with the blcValidate helper) ─── */
/* Invalid control: red border + danger ring, on any input/select/textarea. The
   !important overrides per-form control borders of equal specificity. */
input.is-invalid, select.is-invalid, textarea.is-invalid, .ui-input.is-invalid {
  border-color: var(--ui-danger) !important; box-shadow: 0 0 0 2px var(--ui-danger-bg);
}
/* Invalid field wrapper: red label (covers .ui-field and label-wrapped fields). */
.is-invalid > label:first-child, .is-invalid > legend:first-child, .is-invalid > span:first-child,
.ui-field.is-invalid .ui-label { color: var(--ui-danger-text); }
/* Inline error message, inserted after the field and tied to the control via
   aria-describedby. Hidden until it has text. */
.ui-field-error { margin: 0.3rem 0 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--ui-danger-text); display: flex; align-items: flex-start; gap: 0.35rem; }
.ui-field-error:empty { display: none; }
.ui-field-error::before { content: "!"; flex: 0 0 auto; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--ui-danger); color: #fff; font-size: 0.72em; font-weight: 700; line-height: 1.08em; text-align: center; }

/* ── Tooltip — the ONE standard hover/focus tooltip (from the /pricing feature tips) ── */
/* Wrap a trigger: <span class="ui-tip"><button…></button><span class="ui-tip__pop"
   role="tooltip" id="x">text</span></span>, and point the trigger's aria-describedby
   at the pop. Shows on hover AND keyboard focus (focus-within). Default opens ABOVE
   centered; add .ui-tip--br to open BELOW-right (for a right-aligned trigger inside an
   overflow-hidden card, where an above bubble would be clipped). */
.ui-tip { position: relative; display: inline-flex; }
.ui-tip__pop {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(3px);
  width: max-content; max-width: 240px;
  background: var(--ui-tip-bg); color: var(--ui-tip-text);
  font-size: 0.78rem; line-height: 1.45; font-weight: 400; text-align: left;
  letter-spacing: normal; text-transform: none; white-space: normal;
  padding: 0.6rem 0.7rem; border-radius: 9px; box-shadow: 0 8px 26px rgba(0,0,0,0.24);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 300;
  transition: opacity .12s ease, transform .12s ease;
}
.ui-tip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ui-tip-bg); }
.ui-tip:hover .ui-tip__pop, .ui-tip:focus-within .ui-tip__pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Below-right variant: opens under the trigger, right edges aligned (extends leftward). */
.ui-tip--br .ui-tip__pop { top: calc(100% + 9px); bottom: auto; left: auto; right: 0; transform: translateY(-3px); }
.ui-tip--br .ui-tip__pop::after { top: auto; bottom: 100%; left: auto; right: 12px; margin-left: 0; border-top-color: transparent; border-bottom-color: var(--ui-tip-bg); }
.ui-tip--br:hover .ui-tip__pop, .ui-tip--br:focus-within .ui-tip__pop { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ui-tip__pop { transition: none; } }

/* ── Theme segmented control (Light / Dark) — used in the user menu ─────────── */
.ui-theme-seg { display: inline-flex; width: 100%; gap: 2px; padding: 2px; background: var(--ui-surface-sunken); border: 1px solid var(--ui-border); border-radius: 9px; }
.ui-theme-seg__opt { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem 0.5rem; border: 0; background: transparent; border-radius: 7px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ui-text); cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; }
.ui-theme-seg__opt:hover:not([aria-checked="true"]) { color: var(--ui-accent); }
.ui-theme-seg__opt[aria-checked="true"] { background: var(--ui-selected-bg); color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-selected-border); }
.ui-theme-seg__opt:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
.ui-theme-seg__opt svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Native tick controls pick up the accent (not orange) site-wide on the front end. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--ui-radius);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s, border-color .15s, color .15s, filter .15s, transform .05s;
}
.ui-btn:active { transform: translateY(1px); }
.ui-btn:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }
.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Compact — smaller helper/navigational buttons in tight contexts. */
.ui-btn--sm { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
/* Primary — the ONLY orange fill. */
.ui-btn--primary { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
.ui-btn--primary:hover:not(:disabled) { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
/* Secondary — neutral surface button. */
.ui-btn--secondary { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border-strong); }
.ui-btn--secondary:hover:not(:disabled) { background: var(--ui-surface-sunken); }
/* Accent — brand teal fill. Secondary-emphasis solid button; NOT the orange
   primary. Text uses --ui-accent-contrast (white on light, dark on teal in dark). */
.ui-btn--accent { background: var(--ui-accent); color: var(--ui-accent-contrast); border-color: var(--ui-accent); }
.ui-btn--accent:hover:not(:disabled) { filter: brightness(1.1); }
/* Ghost — text-only accent. */
.ui-btn--ghost { background: transparent; color: var(--ui-accent); }
.ui-btn--ghost:hover:not(:disabled) { background: var(--ui-selected-bg); }
/* Danger — irreversible actions. */
.ui-btn--danger { background: var(--ui-danger); color: #fff; border-color: var(--ui-danger); }
.ui-btn--danger:hover:not(:disabled) { filter: brightness(0.95); }

/* ── Text links — the ONE standard for "clarity"/navigational inline links ───── */
/* An accent-colored text link (e.g. "Assign in Team →", "View", "Support Plan").
   Accent, NOT orange (orange is reserved for primary actions). Underline appears
   on hover; a visible focus ring on :focus-visible (WCAG 2.2). Inherits font-size
   so it sits at the size of its context; add .ui-link--sm for footnote-scale. */
.ui-link {
  color: var(--ui-accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ui-link:hover { text-decoration: underline; }
.ui-link:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; border-radius: 4px; }
.ui-link--sm { font-size: 0.78rem; }

/* ── Selected / active — ONE canonical treatment (tint fill + accent border) ─── */
/* Deliberately distinct from focus (an OUTER ring): a selection carries a fill. */
.ui-selected,
.is-selected.ui-selectable,
.ui-selectable[aria-pressed="true"],
.ui-selectable[aria-selected="true"] {
  background: var(--ui-selected-bg);
  border-color: var(--ui-selected-border);
  box-shadow: 0 0 0 1px var(--ui-selected-border);
  color: var(--ui-accent);
}
/* Compact icon/text toggle pressed (e.g. a rich-text Bold button). */
.ui-toggle.is-active,
.ui-toggle[aria-pressed="true"] {
  background: var(--ui-selected-bg);
  border-color: var(--ui-selected-border);
  color: var(--ui-accent);
}

/* ── Surfaces ──────────────────────────────────────────────────────────────── */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow); }
.ui-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--ui-surface-sunken); color: var(--ui-text-strong); border: 1px solid var(--ui-border); }

/* ── Standard tooltip (window.bas-tip.js) ──────────────────────────────────────
   One floating bubble on <body>; positioned/flipped by bas-tip.js. Shared across
   marketing, auth and portal. Navy fill + white text = high contrast in both
   themes; the arrow x is set per-show via --bas-tip-arrow. */
.bas-tooltip { position: fixed; z-index: 100000; max-width: 260px; background: var(--bas-pacific, #0e3d4f); color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1.3; padding: 0.35rem 0.55rem; border-radius: 6px; box-shadow: 0 4px 14px rgba(19, 32, 37, 0.28); opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; }
.bas-tooltip.is-on { opacity: 1; transform: none; }
.bas-tooltip::after { content: ''; position: absolute; top: 100%; left: var(--bas-tip-arrow, 50%); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bas-pacific, #0e3d4f); }
.bas-tooltip.bas-tooltip--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--bas-pacific, #0e3d4f); }
@media (prefers-reduced-motion: reduce) { .bas-tooltip { transition: none; transform: none; } }

/* ── Portal lightbox (.blc-lb) ─────────────────────────────────────────────────
   Shared modal used by company notes, request lists, dashboard tools + widgets
   (Useful Links, etc.). Navy header to match the account + seat-management modals;
   cream footer. Single source — was duplicated inline across several blocks. Tool
   lightboxes (.blc-tool-lb) keep a LIGHT header so their animated navy icon stays
   visible; everything else gets the navy header. blcLightbox() confirm dialogs are
   a separate component (.blc-portal-lightbox) and unaffected. */
.blc-lb { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(17, 24, 39, 0.5); align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow: auto; }
.blc-lb.open { display: flex; }
.blc-lb-box { background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: 14px; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25); margin: auto; overflow: hidden; }
.blc-lb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--bas-pacific, #0e3d4f); color: var(--bas-on-dark, #fffdf4); }
.blc-lb-title { font-size: 1.05rem; font-weight: 600; color: var(--bas-on-dark, #fffdf4); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.blc-lb-close { background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, 0.8); font-size: 1.6rem; line-height: 1; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 6px; }
.blc-lb-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.blc-lb-body { padding: 1.25rem; max-height: min(68vh, 540px); overflow: auto; }
.blc-lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.85rem 1.25rem; border-top: 1px solid var(--bas-border); background: var(--bas-cream, #fffdf4); }
.blc-lb-intro { margin: 0 0 1rem; color: var(--ui-text-muted); font-size: 0.85rem; }
.blc-lb-empty { color: var(--ui-text-muted); text-align: center; padding: 1.5rem 0.5rem; margin: 0; }
.blc-lb-linkbtn { background: none; border: 0; color: var(--ui-text-muted); font-size: 0.9rem; cursor: pointer; text-decoration: underline; padding: 0; }
.blc-lb-linkbtn:hover { color: var(--ui-text); }
.blc-lb-lottie { width: 26px; height: 26px; flex: 0 0 auto; }
.blc-tool-lb .blc-lb-head { background: var(--ui-surface); color: var(--ui-text); border-bottom: 1px solid var(--bas-border); }
.blc-tool-lb .blc-lb-title { color: var(--ui-text); }
.blc-tool-lb .blc-lb-close { color: var(--ui-text-muted); }
.blc-tool-lb .blc-lb-close:hover { background: var(--ui-surface-sunken); color: var(--ui-text); }