/* ============================================================================
   EBO TYPOGRAPHY — the brand font pairing, applied as the panel's BASE.

   Rule set (Joshua):
     SamsungOne-400  = the base font. Page text, tables (incl. headers), agent
                       names, agent counts, top-right button labels, pills, meta.
     SamsungSharpSans = headings only (H1/H2/H3) and the NON-AGENT sidebar menu
                       labels. Used narrowly, so it stays a signature rather than
                       the default.

   WHY this file loads LAST and sets font-family directly instead of writing theme
   variables: every theme block re-declares --font/--font-head, so a variable
   override loses to whichever theme is active. Assigning font-family on the
   elements themselves is the only way the choice survives a theme switch. The
   Text-style control (data-tf) still wins where it is used, because those rules
   are scoped to `html[data-tf="N"]` and carry one extra specificity point.

   'SamsungOne-400' and 'SamsungSharpSans' resolve to the self-hosted files
   declared in vendor/fonts/fonts.css. Both families were verified loading in the
   browser before this file was written.
   ============================================================================ */

/* ---------- BASE: SamsungOne everywhere ---------------------------------- */
body,
body *,
input, select, textarea, button,
table.b, table.b *,
.pill, .meta, .det, .id, .kv, .kv *,
.chat-pop, .chat-pop *,
.login, .login *,
.card, .card *,
.panel, .panel *,
.rows, .rows *,
.appear, .appear *,
td, th,
.ap-card, .ap-card *,
.bg-menu, .bg-menu *,
.ctl-menu, .ctl-menu * {
  font-family: "SamsungOne-400", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* FONT-PICKER ROWS ARE EXEMPT. The rule above matches `button` and `body *`, so every
   .ap-font/.ap-mf pill was forced into SamsungOne and each row could never preview the
   face it names — "each font has same samsung font". The JS sets an inline
   style.fontFamily on the row's <span>; this !important-free re-assert keeps that win.
   Higher specificity than the base list above, so order does not matter. */
.ap-font span, .ap-mf span, .ap-size span,
button.ap-font, button.ap-mf, button.ap-size {
  font-family: inherit;
}
button.ap-font > span, button.ap-mf > span {
  font-family: var(--row-font, inherit);
}

/* ---------- HEADINGS + non-agent sidebar labels: SharpSans ---------------- */
h1, h2, h3,
.nav-item:not([data-seat]) .lbl,
.nav-disclose .lbl,
.side-logo .lbl {
  font-family: "SamsungSharpSans", "SamsungOne-400", system-ui, -apple-system, sans-serif;
  letter-spacing: 0;
}

/* Agent LABELS stay SamsungOne (explicitly re-asserted so the heading rule above
   cannot be read as covering them by accident). */
.nav-item[data-seat] .lbl,
.nav-item[data-seat] .seat-live,
.nav-item[data-seat] .seat-bots,
.nav-item[data-seat] .seat-tasks,
.nav-item[data-seat] .seat-run {
  font-family: "SamsungOne-400", system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ---------- Top-right header controls: SharpSans glyph + SamsungOne text --
   The icon is FontAwesome, so it must keep its own icon font — the earlier
   "icon looks wrong" symptom is what happens when a font-family override lands
   on an <i class="fa-..."> and the glyph falls back to a text face. */
.theme-btn, .nav-chip, .bigbtn, .refresh button, .logout-btn {
  font-family: "SamsungOne-400", system-ui, -apple-system, sans-serif;
}
.theme-btn i, .theme-btn .fa-icon,
.nav-chip i, .nav-chip .fa-icon,
.bigbtn i, .bigbtn .fa-icon,
.refresh button i,
.logout-btn i, .logout-btn .fa-icon,
i.fa-solid, i.fa-regular, i.fa-brands, i.fas, i.far, i.fab {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
  font-style: normal;
}

/* ---------- Table headers keep the base face but the header WEIGHT ---------- */
table.b th {
  font-family: "SamsungOne-400", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Numbers stay aligned ----------------------------------------- */
.seat-live, .tab-n, .pc, .pct, td.pc, .ap-slider output, .orb-dial output {
  font-variant-numeric: tabular-nums;
}


/* ---------- table id cells ------------------------------------------------
   app.css pins `.b .id` to ui-monospace (specificity 0,1,1), which beat the base
   rule here. Digits still need to line up, so this keeps tabular-nums and drops the
   monospace face — alignment without a second typeface in the table. */
body .b .id, body .id, body table.b td.id, body table.b td.pc, body table.b td.ow {
  font-family: "SamsungOne-400", system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   MENU FONT OVERRIDE MUST WIN ON CHROME.
   This file loads LAST (deliberately — the brand pairing wins over theme vars),
   which means it was also beating typography.css's `html[data-mf] ...` menu-dial
   rules. Result: choosing a Menu font changed nothing on the sidebar labels.
   Two things beat a plain [data-mf] rule here:
     - ORDER: this file is later, so equal specificity loses.
     - SPECIFICITY: `.nav-item:not([data-seat]) .lbl` is (0,3,0) vs [data-mf] .side *
       at (0,1,1).
   So the stand-down is written with matching specificity and placed last. Scoped to
   html[data-mf] ONLY, so the brand pairing is completely untouched when no menu font
   is chosen — the default look cannot regress. */
html[data-mf] body .side, html[data-mf] body .side *,
html[data-mf] body .top, html[data-mf] body .top *,
html[data-mf] body .nav-item:not([data-seat]) .lbl,
html[data-mf] body .nav-disclose .lbl,
html[data-mf] body .side-logo .lbl,
html[data-mf] body .nav-item[data-seat] .lbl,
html[data-mf] body .theme-btn, html[data-mf] body .nav-chip,
html[data-mf] body .bigbtn, html[data-mf] body .refresh button,
html[data-mf] body .logout-btn {
  font-family: var(--font-menu) !important;
}
/* icons keep their icon font, or the glyph becomes an empty box */
html[data-mf] .side i[class*="fa-"], html[data-mf] .top i[class*="fa-"],
html[data-mf] .side .fa-icon, html[data-mf] .top .fa-icon {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
  font-style: normal;
}