/* TENANT_UI_V2: the enterprise skin for the tenant facing app.
   Loaded AFTER styles.css and scoped to body.tui2, so removing the flag returns
   the previous look byte for byte. Reskin only: selectors target existing
   markup, no behaviour or structure changes.

   Direction comes from the public site (hireabba.ai): Fraunces for display,
   Hanken Grotesk for the interface, muted warm neutrals, one confident accent,
   generous whitespace, quiet depth. Both typefaces are SELF HOSTED variable
   fonts (latin subset) so no CDN is involved. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: normal;
  font-display: swap;
  src: url('/fonts/fraunces-var.woff2') format('woff2');
}

/* ------------------------------------------------ tokens (theme aware: only
   the families and the quiet depth change; the light/dark colour tokens from
   styles.css continue to flow, so dark mode comes along for free). */
body.tui2 {
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* Quieter, more expensive depth: hairlines carry structure, shadows whisper. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 8px 24px -14px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 16px 40px -18px rgba(16, 24, 40, 0.16);
  letter-spacing: 0.005em;
}

/* ------------------------------------------------ type hierarchy */
body.tui2 h1, body.tui2 h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
}
body.tui2 h1 { font-size: var(--text-2xl); }
body.tui2 h2 { font-size: var(--text-xl); }
body.tui2 h3, body.tui2 h4 { font-weight: 700; letter-spacing: -0.005em; }
body.tui2 p, body.tui2 li { line-height: 1.55; }
body.tui2 .hint, body.tui2 .small { line-height: 1.45; }

/* ------------------------------------------------ cards and surfaces */
body.tui2 .card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
body.tui2 .card + .card { margin-top: var(--space-4); }

/* ------------------------------------------------ buttons: one consistent
   control height, calm weight, honest states. */
body.tui2 .btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
body.tui2 .btn--primary { box-shadow: none; }
body.tui2 .btn--primary:hover { box-shadow: var(--shadow-accent); }
body.tui2 .btn--ghost { border-color: var(--line); }
body.tui2 .btn--ghost:hover { border-color: var(--accent-line); color: var(--accent-readable); }
body.tui2 .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ------------------------------------------------ inputs */
body.tui2 .input, body.tui2 .textarea, body.tui2 select.input {
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
body.tui2 .input:hover, body.tui2 .textarea:hover { border-color: var(--accent-line); }

/* ------------------------------------------------ accessibility: a real,
   visible focus ring on every interactive control, keyboard only (focus-visible),
   so pointer users are not shouted at but keyboard users always know where they are. */
body.tui2 :focus { outline: none; }
body.tui2 :focus-visible {
  outline: 2px solid var(--accent-readable);
  outline-offset: 2px;
  border-radius: 6px;
}
body.tui2 .input:focus-visible, body.tui2 .textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ------------------------------------------------ enterprise tables: dense,
   aligned, quiet. Header whispers in small caps, rows separate on hairlines,
   numbers align right where the markup marks them. */
body.tui2 table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
body.tui2 th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
body.tui2 td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
body.tui2 tbody tr:hover { background: var(--accent-softer); }
body.tui2 td[data-num], body.tui2 th[data-num] { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ badges and chips: calmer,
   bordered, no shouting. */
body.tui2 .badge { font-weight: 600; letter-spacing: 0.02em; }
body.tui2 .chip, body.tui2 .pill { transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }

/* ------------------------------------------------ designed empty states: an
   honest, considered moment rather than a bare sentence. Markup opts in via
   .empty-state; the plain p.muted fallbacks remain untouched elsewhere. */
body.tui2 .empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
}
body.tui2 .empty-state svg { opacity: 0.45; margin-bottom: var(--space-3); }
body.tui2 .empty-state strong { display: block; color: var(--ink-soft); font-size: var(--text-base); margin-bottom: var(--space-1); }
body.tui2 .empty-state p { margin: 0 auto; max-width: 46ch; font-size: var(--text-sm); }
body.tui2 .empty-state .btn { margin-top: var(--space-4); }

/* ------------------------------------------------ loading states: the shared
   skeleton shimmer, honoured under reduced motion. */
body.tui2 .skeleton {
  background: linear-gradient(100deg, var(--surface-2) 40%, var(--surface) 50%, var(--surface-2) 60%);
  background-size: 200% 100%;
  animation: tui2-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  min-height: 14px;
}
@keyframes tui2-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.tui2 .skeleton { animation: none; }
  body.tui2 * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------ navigation: the active item
   is confident, everything else recedes. Works for both the app bar and the
   desktop side nav that styles.css already lays out. */
body.tui2 .appbar { box-shadow: none; border-bottom: 1px solid var(--line); }
body.tui2 .tabbar a, body.tui2 .nav a { transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }

/* ------------------------------------------------ footer: quiet, single line */
body.tui2 .footer { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
body.tui2 .footer .container { font-size: var(--text-xs); }

/* ------------------------------------------------ DARK MODE REPAIR (bug fix).
   This overlay loads after styles.css and its body.tui2 rules outweigh the
   [data-theme=dark] rules there, which silently flattened dark mode: the quiet
   light-tuned shadow tokens replaced the strong dark shadows, and the plain
   hairline border replaced the designed accent-tinted card framing. Restore
   both, scoped to dark only, so light mode stays byte for byte identical. */
[data-theme="dark"] body.tui2 {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 32px -14px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.6), 0 26px 56px -18px rgba(0, 0, 0, 0.9);
}
[data-theme="dark"] body.tui2 .card {
  border-color: color-mix(in srgb, var(--accent-vivid) 30%, var(--line));
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] body.tui2 .card--accent { border-color: color-mix(in srgb, var(--accent-vivid) 55%, var(--line)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.tui2 {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 32px -14px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.6), 0 26px 56px -18px rgba(0, 0, 0, 0.9);
  }
  :root:not([data-theme="light"]) body.tui2 .card {
    border-color: color-mix(in srgb, var(--accent-vivid) 30%, var(--line));
    box-shadow: var(--shadow-sm);
  }
  :root:not([data-theme="light"]) body.tui2 .card--accent { border-color: color-mix(in srgb, var(--accent-vivid) 55%, var(--line)); }
}

/* ------------------------------------------------ E2 polish (impeccable audit): the twelve
   pixel floor for functional text, readable colour on small labels (cyan only at 14px and up),
   and no coloured stripes on cards. Client app only. */
body.tui2 .appbar__powered { font-size: 0.75rem; letter-spacing: 0.05em; }
body.tui2 .appbar__powered span { font-size: 0.75rem; }
body.tui2 .sidenav__badge, body.tui2 .tab__badge { font-size: 0.75rem; }
body.tui2 .sidenav__group { font-size: 0.75rem; }
body.tui2 .tab__label { font-size: 0.75rem; }
body.tui2 .flow-head .kicker, body.tui2 .page-head .kicker { color: var(--muted); font-size: 0.78rem; }
body.tui2 .flow-head .kicker a, body.tui2 .page-head .kicker a { color: var(--ink-soft); }
body.tui2 .insight-row__k { font-size: 0.75rem; color: var(--ink-soft); }
body.tui2 .insight-row--gap .insight-row__k { color: var(--ink-soft); }
body.tui2 .comp-chip, body.tui2 .comp-chip__n, body.tui2 .comp-chip__note { font-size: 0.78rem; color: var(--ink-soft); }
body.tui2 .comp-chip--is-found { color: var(--ink); }
body.tui2 .comp-action__k { font-size: 0.75rem; color: var(--ink-soft); }
body.tui2 .comp-news__tag { font-size: 0.75rem; }
body.tui2 .comp-plat__name { font-size: 0.75rem; color: var(--ink-soft); }
body.tui2 .rival__sub { font-size: 0.75rem; }
body.tui2 .beat__tie { font-size: 0.8rem; color: var(--ink-soft); }
body.tui2 .listen__ico { font-size: 12px; }
body.tui2 .briefing::before { display: none; }
body.tui2 .briefing { border-top: 1px solid var(--accent-line); }
body.tui2 .enterprise .create-card--primary::before, body.tui2 .create-card--primary::before { display: none; }
body.tui2 .create-card--primary { border-color: var(--accent-line); }
body.tui2 .digest-sec { border-color: var(--line); background: var(--surface); }
body.tui2 .listen { color: var(--ink-soft); }