/* ============================================================================
   MatchIQ / TechnologyMatch — Shared Component Styles
   components.css   ·   requires colors_and_type.css

   Plain-CSS recreations of the production component vocabulary (buttons,
   chips, inputs, cards, segmented control, avatars, tables). All theme-aware
   via the semantic tokens — works in light and dark mode unchanged.
   ============================================================================ */

/* ── Pointer affordance on interactive controls ────────────────────────────────
   ⛔ THIS APP HAD NO BASE CURSOR RULE AT ALL, and that is not the same defect the
   two sibling apps had. They lost `button, [role="button"] { cursor: pointer }`
   when Tailwind v4 dropped it from Preflight. This app is plain CSS with no
   Tailwind and no preflight, so it never had one to lose — every affordance here
   has always come from a hand-typed `cursor: pointer` on a specific class
   (`.mp-back`, `.mp-link`, `.mp-iconbtn`, `.mp-select`, `.mp-prep-row`, …).

   Measured in headed Chromium against the DEPLOYED app on 2026-09-11
   (dev.app.edge.evolvesuite.io), by injecting one element per category and
   reading `getComputedStyle(el).cursor`:

       button default · [role=button] auto · [role=tab] auto
       input[type=checkbox] default · select default
       plain div auto  (the control — correctly no affordance)

   ⇒ A bare `<button>` in this app renders with an ARROW. The buttons that look
   right only do so because each one carries a styled class. Add a control without
   remembering the class and it reads as plain text — which is how this defect kept
   returning in the sibling apps under a different element each time.

   ⭐ `@layer base` IS LOAD-BEARING HERE, AND FOR A DIFFERENT REASON THAN IN THE
   TAILWIND APPS. There are no other cascade layers in this codebase — measured:
   `@layer` appears in no other stylesheet in this repo. In CSS, ANY unlayered rule beats
   ANY layered one regardless of specificity, so wrapping this block makes every
   existing and future rule in every stylesheet automatically win over it. That
   gives true base semantics with zero risk to the styles already here, and it is
   why this can be added without auditing all 37 hand-typed cursors in kit.css.

   Without the layer, `button:not(:disabled)` at specificity (0,1,1) would OUTRANK a
   plain class rule at (0,1,0) and silently defeat the local overrides — including
   any `cursor: not-allowed`.

   ⛔ DELIBERATELY NOT COVERED, each for a reason:
     · `label` — a label on a TEXT field must keep the arrow; CSS cannot tell a
       toggle label from a text-field label. The toggle-input rule below already
       covers the pixel the user aims at.
     · `[tabindex='0']` — focusable is not clickable.
     · `a` without `href` — the UA gives a pointer to `a:any-link` only.

   Guarded by `web/test/pointer-affordance.test.js`.
   ──────────────────────────────────────────────────────────────────────────── */
@layer base {
  button:not(:disabled),
  [role='button']:not(:disabled):not([aria-disabled='true']),
  input:where([type='button'], [type='submit'], [type='reset']):not(:disabled),
  input:where([type='radio'], [type='checkbox']):not(:disabled),
  select:not(:disabled),
  summary {
    cursor: pointer;
  }

  /* The ARIA-role half. These match divs and spans, where `:disabled` can never
     apply — the ARIA state is their only disabled signal — so both carve-outs are
     required. `role="tab"` and `role="switch"` both have live instances here. */
  [role='menuitem']:not(:disabled):not([aria-disabled='true']),
  [role='menuitemcheckbox']:not(:disabled):not([aria-disabled='true']),
  [role='menuitemradio']:not(:disabled):not([aria-disabled='true']),
  [role='tab']:not(:disabled):not([aria-disabled='true']),
  [role='option']:not(:disabled):not([aria-disabled='true']),
  [role='switch']:not(:disabled):not([aria-disabled='true']) {
    cursor: pointer;
  }
}

/* ----------------------------------------------------------- Buttons ------ */
.tm-btn {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-subtitle-2);
  line-height: 1.25rem;
  height: 44px;                /* h-11 */
  padding: 0 1rem;
  border: none;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.tm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary — filled blue */
.tm-btn--primary { background: var(--accent); color: var(--fg-on-accent); }
.tm-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

/* Secondary — pastel fill */
.tm-btn--secondary { background: var(--bg-light-blue); color: var(--fg-1); }
.tm-btn--secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--bg-light-blue) 70%, transparent); }

/* Ghost / tertiary */
.tm-btn--ghost { background: transparent; color: var(--fg-1); }
.tm-btn--ghost:hover:not(:disabled) { background: var(--bg-light-blue); }

/* Pill variants (wizard nav) */
.tm-btn--pill { border-radius: var(--radius-full); padding: 0 1.5rem; }

/* Link button */
.tm-link { color: var(--link); font-weight: 700; cursor: pointer; text-decoration: none; }
.tm-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Chips ------ */
.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-subtitle-3);
  line-height: 1.125rem;
}
.tm-chip--has-icon { padding-left: 0.5rem; padding-right: 0.5rem; }
.tm-chip img, .tm-chip svg { width: 16px; height: 16px; flex-shrink: 0; }

.tm-chip--neutral { background: var(--neutral-5); color: var(--fg-1); }
.tm-chip--green   { background: var(--bg-light-green);  color: var(--green-0); }
.tm-chip--blue    { background: var(--bg-light-blue);   color: var(--blue-0); }
.tm-chip--gold    { background: var(--bg-light-gold);   color: var(--gold-0); }
.tm-chip--red     { background: var(--bg-light-pink);   color: var(--red-1); }
.tm-chip--purple  { background: var(--bg-light-purple); color: var(--purple-0); }

/* Dark mode: dark family-text reads poorly on translucent dark fills.
   Lift text to the bright shades and strengthen the background fill. */
[data-theme='dark'] .tm-chip--neutral { background: rgba(255,255,255,0.10); color: var(--fg-1); }
[data-theme='dark'] .tm-chip--green   { background: rgba(95,197,117,0.20);  color: var(--green-4); }
[data-theme='dark'] .tm-chip--blue    { background: rgba(124,196,242,0.20); color: var(--blue-4); }
[data-theme='dark'] .tm-chip--gold    { background: rgba(253,210,101,0.20); color: var(--gold-4); }
[data-theme='dark'] .tm-chip--red     { background: rgba(212,84,99,0.22);   color: var(--red-4); }
[data-theme='dark'] .tm-chip--purple  { background: rgba(174,93,228,0.22);  color: var(--purple-4); }

/* The status glyphs ship with dark stroke colors that matched light-mode
   text. Brighten them in dark mode so they track the lifted text color. */
[data-theme='dark'] .tm-chip img { filter: brightness(1.9) saturate(1.15); }

/* ------------------------------------------------------------ Inputs ------ */
.tm-field { display: flex; flex-direction: column; gap: 0.5rem; }
.tm-label { font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); padding: 0 0.5rem; }
.tm-input {
  height: 44px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--fg-1);
  font-family: var(--font-primary);
  font-size: var(--fs-body-2);
  width: 100%;
  outline: none;
  transition: border-color var(--transition-fast);
}
.tm-input::placeholder { color: var(--fg-3); }
.tm-input:focus { border-color: var(--accent); }
.tm-input--error { border-color: var(--danger); }

/* ------------------------------------------------------------- Cards ------ */
.tm-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tm-card__body { padding: 1rem 1.5rem; }

/* 4px gradient accent bar that tops many cards */
.tm-accent-bar { height: 4px; width: 100%; }
.tm-accent-bar--gold   { background: linear-gradient(to right, var(--gold-4),   var(--bg-light-gold)); }
.tm-accent-bar--blue   { background: linear-gradient(to right, var(--blue-4),   var(--bg-light-blue)); }
.tm-accent-bar--green  { background: linear-gradient(to right, var(--green-3),  var(--bg-light-green)); }
.tm-accent-bar--purple { background: linear-gradient(to right, var(--purple-1), var(--bg-light-purple)); }

/* --------------------------------------------------- Segmented control ---- */
.tm-segmented { display: inline-flex; align-items: center; gap: 0.25rem; }
.tm-segmented button {
  border: none;
  background: transparent;
  color: var(--fg-1);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-subtitle-1);
  padding: 0.375rem 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.tm-segmented button:hover { background: color-mix(in srgb, var(--bg-light-blue) 50%, transparent); }
.tm-segmented button[aria-selected='true'] { background: var(--bg-light-blue); }

/* ----------------------------------------------------------- Avatars ------ */
.tm-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-weight: 900; font-size: 0.75rem;
  color: #fff;
  border: 2px solid var(--bg-surface);
}
.tm-avatar--purple { background: var(--purple-1); }
.tm-avatar--green  { background: var(--green-1); }
.tm-avatar--blue   { background: var(--blue-1); }
.tm-avatar--gold   { background: var(--gold-2); }
.tm-avatar--orange { background: var(--orange-1); }
.tm-avatar--pink   { background: var(--pink-1); }
.tm-avatar--gray   { background: var(--neutral-2); }
.tm-avatar-group { display: inline-flex; }
.tm-avatar-group .tm-avatar + .tm-avatar { margin-left: -8px; }

/* ------------------------------------------------------------ Tables ------ */
.tm-table { width: 100%; border-collapse: collapse; }
.tm-table th {
  text-align: left;
  font-size: var(--fs-subtitle-3);
  font-weight: 700;
  color: var(--fg-2);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--border-1);
}
.tm-table td {
  padding: 1rem;
  font-size: var(--fs-body-2);
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-1);
}
.tm-table tbody tr { transition: background-color var(--transition-fast); cursor: pointer; }
.tm-table tbody tr:hover { background: var(--bg-sunken); }

/* --------------------------------------------------- Data table ----------- */
/* Full pattern: card shell + toolbar (search / filter) + sortable headers +
   pagination + empty state. Built on .tm-table. Theme-aware. */
.tm-datatable { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }

.tm-dt-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 2px solid var(--border-1); flex-wrap: wrap; }
.tm-dt-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; height: 40px; padding: 0 14px; background: var(--bg-surface); border: 2px solid var(--border-2); border-radius: var(--radius-lg); transition: border-color var(--transition-fast); }
.tm-dt-search:focus-within { border-color: var(--accent); }
.tm-dt-search svg { flex-shrink: 0; color: var(--fg-3); }
.tm-dt-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--fs-body-2); color: var(--fg-1); width: 100%; }
.tm-dt-search input::placeholder { color: var(--fg-3); }
.tm-dt-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-dt-filter { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 2px solid var(--border-2); background: var(--bg-surface); color: var(--fg-1); border-radius: var(--radius-full); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-subtitle-3); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; }
.tm-dt-filter:hover { border-color: var(--blue-4); }
.tm-dt-filter.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tm-dt-filter .tm-dt-count { font-family: var(--font-numbers); font-size: 12px; opacity: .8; }

/* Sortable headers */
.tm-table th.tm-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--transition-fast); }
.tm-table th.tm-th-sortable:hover { color: var(--fg-1); }
.tm-th-inner { display: inline-flex; align-items: center; gap: 6px; }
.tm-th-num .tm-th-inner { justify-content: flex-end; }
.tm-th-arrow { display: inline-flex; flex-direction: column; line-height: 0; gap: 1px; }
.tm-th-arrow span { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .35; transition: opacity var(--transition-fast); }
.tm-th-arrow span.up { border-bottom: 5px solid currentColor; }
.tm-th-arrow span.down { border-top: 5px solid currentColor; }
.tm-table th[aria-sort='ascending'] { color: var(--accent); }
.tm-table th[aria-sort='ascending'] .tm-th-arrow span.up { opacity: 1; }
.tm-table th[aria-sort='descending'] { color: var(--accent); }
.tm-table th[aria-sort='descending'] .tm-th-arrow span.down { opacity: 1; }
.tm-td-num { text-align: right; font-family: var(--font-numbers); }

/* Empty state */
.tm-dt-empty { padding: 48px 16px; text-align: center; color: var(--fg-2); font-size: var(--fs-body-1); }
.tm-dt-empty strong { display: block; color: var(--fg-1); font-weight: 900; margin-bottom: 4px; }

/* Footer / pagination */
.tm-dt-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 2px solid var(--border-1); flex-wrap: wrap; }
.tm-dt-summary { font-size: var(--fs-body-3); color: var(--fg-2); }
.tm-dt-summary b { color: var(--fg-1); font-weight: 700; }
.tm-dt-pager { display: inline-flex; align-items: center; gap: 4px; }
.tm-dt-pagebtn { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--fg-1); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-subtitle-3); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition-fast); }
.tm-dt-pagebtn:hover:not(:disabled) { background: var(--bg-sunken); }
.tm-dt-pagebtn.is-current { background: var(--accent); color: var(--fg-on-accent); }
.tm-dt-pagebtn:disabled { opacity: .35; cursor: not-allowed; }
.tm-dt-ellipsis { padding: 0 4px; color: var(--fg-3); }