/* ============================================================================
   FIGHTCARD.LIVE — 2026 UI REFRESH · CORE
   ----------------------------------------------------------------------------
   A presentation layer over the existing markup (StickyMobile template + W3 +
   Bootstrap 5 + the cssButton*() helpers). No markup changes: every rule is
   scoped under body.fx-ui (or body.fx-admin-chrome for the desktop admin bar),
   so switching the refresh off (functions_ui_refresh.php) removes it entirely.

   Tokens: --fx-*. The PHP token block (fcl_ui_refresh_tokens_css) overrides the
   accent and, for Elite tenants with custom colours, their palette — so new rules
   read var(--fx-*) and never hard-code the brand orange.

   Card surface stays #0f1117: fighter portraits are rendered on that exact colour
   (the _black.jpg variant), so the card must match for portraits to blend.
   ============================================================================ */

body.fx-ui,
body.fx-admin-chrome {
  --fx-bg: #07080b;
  --fx-chrome: #0d0f14;
  --fx-topbar: #0d0f14;
  --fx-bottombar: #12151b;
  --fx-surface: #0f1117;
  --fx-surface-2: #151821;
  --fx-surface-3: #1c2029;
  --fx-surface-4: #252a35;
  --fx-line: rgba(255, 255, 255, .065);
  --fx-line-strong: rgba(255, 255, 255, .11);
  --fx-ink: #f5f6f8;
  --fx-ink-2: #c8ccd4;
  --fx-muted: #8a909c;
  --fx-faint: #5b6170;

  --fx-accent: #ff7616;
  --fx-accent-ink: #ffffff;
  --fx-accent-soft: color-mix(in srgb, var(--fx-accent) 14%, transparent);
  --fx-accent-line: color-mix(in srgb, var(--fx-accent) 38%, transparent);
  --fx-accent-glow: color-mix(in srgb, var(--fx-accent) 45%, transparent);
  --fx-accent-hi: color-mix(in srgb, var(--fx-accent) 82%, #fff);

  --fx-green: #2fd17a;
  --fx-red: #f04452;
  --fx-amber: #f6b23c;
  --fx-blue: #4c8dff;
  --fx-corner-1: transparent;
  --fx-corner-2: transparent;
  /* Light behind fighter cut-outs: the event's corner colours when set (token block),
     otherwise the event's own accent, softer. */
  --fx-glow-1: var(--fx-accent);
  --fx-glow-2: var(--fx-accent);
  --fx-glow-strength: 42%;

  --fx-r-xs: 8px;
  --fx-r-sm: 10px;
  --fx-r: 14px;
  --fx-r-lg: 20px;
  --fx-r-xl: 26px;

  --fx-shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --fx-shadow-2: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 0 0 1px var(--fx-line), 0 12px 32px -14px rgba(0, 0, 0, .75);
  --fx-shadow-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 0 0 1px var(--fx-line-strong), 0 28px 64px -20px rgba(0, 0, 0, .85);
  --fx-ring: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 30%, transparent);

  --fx-ease: cubic-bezier(.22, 1, .36, 1);
  --fx-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fx-fast: .16s;
  --fx-med: .32s;

  --fx-font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fx-display: var(--wl-heading-font, "Barlow Condensed"), "Geist", ui-sans-serif, sans-serif;
}

/* ─── Canvas & type ─────────────────────────────────────────────────────── */
body.fx-ui {
  background-color: var(--fx-bg) !important;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--fx-accent) 9%, transparent), transparent 62%),
    radial-gradient(900px 600px at 105% 4%, rgba(70, 110, 255, .06), transparent 60%) !important;
  background-attachment: fixed !important;
  color: var(--fx-ink-2);
  font-family: var(--fx-font);
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.fx-ui #page,
body.fx-ui .page-content { background: transparent !important; }

/* Elements the template/W3 give their own font. Never spans or <i>: Font Awesome
   icons are spans/i with a .fa* class, and a bare element selector here would
   outrank .fas and turn icons into letters. */
body.fx-ui p, body.fx-ui td, body.fx-ui th, body.fx-ui li, body.fx-ui label,
body.fx-ui input, body.fx-ui select, body.fx-ui textarea, body.fx-ui button,
body.fx-ui .w3-container, body.fx-ui .content { font-family: var(--wl-body-font, var(--fx-font)); }

/* Headings inside the app's cards only. Public/marketing pages (public.css ph-*)
   and the stats page have their own hero type and are left as designed. */
body.fx-ui .card-style h1, body.fx-ui .card-style h2, body.fx-ui .card-style h3,
body.fx-ui .card-style h4, body.fx-ui .card-style h5, body.fx-ui .card-style h6,
body.fx-ui .modal h1, body.fx-ui .modal h2, body.fx-ui .modal h3 {
  font-family: var(--wl-heading-font, var(--fx-font));
  color: var(--fx-ink);
  letter-spacing: -.028em;
  font-weight: 680;
}
body.fx-ui.fx-admin .card-style h1 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); line-height: 1.12; }
body.fx-ui .card-style h2 { line-height: 1.18; }
body.fx-ui .font-11.color-dark,
body.fx-ui h1 + p.color-dark { color: var(--fx-muted) !important; font-size: 13px !important; letter-spacing: 0; margin-top: 4px !important; }
body.fx-ui strong, body.fx-ui b { color: var(--fx-ink); font-weight: 650; }
body.fx-ui .color-highlight { color: var(--fx-accent) !important; }
body.fx-ui ::selection { background: var(--fx-accent-soft); color: var(--fx-ink); }

/* Numbers line up — records, scores, clocks, money. */
body.fx-ui td, body.fx-ui .badge, body.fx-ui .stat-value, body.fx-ui [class*="count"], body.fx-ui [class*="stat"] {
  font-variant-numeric: tabular-nums;
}

/* Scrollbars that belong to a dark app */
body.fx-ui * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
body.fx-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
body.fx-ui ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
body.fx-ui ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .22); }
body.fx-ui ::-webkit-scrollbar-track { background: transparent; }

/* ─── Cards (cardStart / .card-style) ───────────────────────────────────── */
body.fx-ui .card.card-style {
  background-color: var(--fx-surface) !important;
  border-radius: var(--fx-r-lg) !important;
  box-shadow: var(--fx-shadow-2) !important;
  position: relative;
  animation: fx-rise .55s var(--fx-ease) both;
}
/* No gradient wash on the card itself: fighter portraits are opaque JPGs on exactly
   #0f1117, and any tint over the surface shows each portrait as a box. The light
   comes from the 1px inset highlight in --fx-shadow-2 instead. */
body.fx-ui .card.card-style:nth-of-type(2) { animation-delay: .04s; }
body.fx-ui .card.card-style:nth-of-type(3) { animation-delay: .08s; }
body.fx-ui .card.card-style:nth-of-type(4) { animation-delay: .12s; }
body.fx-ui .card.card-style:nth-of-type(n+5) { animation-delay: .16s; }
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
body.fx-ui .card.card-style > .content { position: relative; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
body.fx-ui .btn,
body.fx-ui .large-button:not(.jump-to-current-btn),
body.fx-ui .large-button-orange,
body.fx-ui .large-button-black,
body.fx-ui .w3-button {
  font-family: var(--fx-font) !important;
  letter-spacing: -.005em;
  transition: transform var(--fx-fast) var(--fx-ease), box-shadow var(--fx-med) var(--fx-ease),
              background-color var(--fx-fast) ease, border-color var(--fx-fast) ease, color var(--fx-fast) ease, filter var(--fx-fast) ease !important;
  -webkit-tap-highlight-color: transparent;
}
body.fx-ui .btn:active:not(:disabled),
body.fx-ui .large-button:active,
body.fx-ui .large-button-orange:active,
body.fx-ui .large-button-black:active:not(:disabled),
body.fx-ui .w3-button:active { transform: scale(.97) !important; }
body.fx-ui .btn:focus-visible,
body.fx-ui .large-button:focus-visible,
body.fx-ui .large-button-black:focus-visible { outline: none; box-shadow: var(--fx-ring) !important; }

/* Primary (cssButtonSave / cssButtonLarge): solid accent, inset highlight, coloured glow. */
body.fx-ui .large-button:not(.jump-to-current-btn),
body.fx-ui .large-button-orange {
  background: linear-gradient(180deg, var(--fx-accent-hi), var(--fx-accent)) !important;
  color: var(--fx-accent-ink) !important;
  border: 0 !important;
  border-radius: var(--fx-r) !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset,
              0 10px 26px -10px var(--fx-accent-glow) !important;
}
body.fx-ui .large-button:not(.jump-to-current-btn):hover,
body.fx-ui .large-button-orange:hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset,
              0 16px 36px -12px var(--fx-accent-glow) !important;
  transform: translateY(-1px);
}

/* Page action buttons (top-right row): quiet glass at rest, accent on hover. */
body.fx-ui .large-button-black {
  display: inline-flex !important;
  vertical-align: middle;
  height: 44px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  background: var(--fx-surface-3) !important;
  border: 1px solid rgba(255, 255, 255, .17) !important;
  color: var(--fx-ink) !important;
  box-shadow: var(--fx-shadow-1) !important;
}
body.fx-ui .large-button-black i { color: var(--fx-accent); transition: color var(--fx-fast) ease; }
body.fx-ui .large-button-black:hover:not([disabled]):not(:disabled) {
  transform: translateY(-1px) !important;
  background: var(--fx-surface-3) !important;
  border-color: var(--fx-accent-line) !important;
  box-shadow: 0 8px 22px -12px var(--fx-accent-glow) !important;
}
/* The last button in an action row is the main one ("Add New …"): give it the accent. */
body.fx-ui .d-flex > div > .large-button-black:last-child:not(:first-child) {
  background: linear-gradient(180deg, var(--fx-accent-hi), var(--fx-accent)) !important;
  border-color: transparent !important;
  color: var(--fx-accent-ink) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset, 0 10px 24px -12px var(--fx-accent-glow) !important;
}
body.fx-ui .d-flex > div > .large-button-black:last-child:not(:first-child) i { color: inherit; }

/* Disabled stays legible: a dashed outline, not a shape the colour of the background. */
body.fx-ui .btn:disabled, body.fx-ui .btn.disabled,
body.fx-ui .large-button-black:disabled, body.fx-ui .large-button-black[disabled] {
  opacity: .55 !important;
  border: 1px dashed rgba(255, 255, 255, .22) !important;
  background: transparent !important;
  color: var(--fx-muted) !important;
  box-shadow: none !important;
}

/* Ghost (cssButton) */
body.fx-ui .btn.border-secondary.text-secondary {
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: var(--fx-ink) !important;
  background: rgba(255, 255, 255, .04);
}
body.fx-ui .btn.border-secondary.text-secondary:hover {
  border-color: var(--fx-accent-line) !important;
  color: var(--fx-ink) !important;
  background: var(--fx-accent-soft);
}
/* Inline row actions (cssButtonEdit/Delete/Approve/…): no more 50% opacity mush. */
body.fx-ui .btn.w-70px, body.fx-ui .btn.w-80px {
  opacity: 1 !important;
  border-radius: 9px !important;
  font-weight: 600;
  background: rgba(255, 255, 255, .03);
}
body.fx-ui .btn.w-70px.border-danger, body.fx-ui .btn.w-80px.border-danger { color: #ff8a92 !important; border-color: rgba(240, 68, 82, .35) !important; }
body.fx-ui .btn.w-70px.border-success, body.fx-ui .btn.w-80px.border-success { color: #6be3a2 !important; border-color: rgba(47, 209, 122, .35) !important; }
body.fx-ui .btn.w-70px.border-warning, body.fx-ui .btn.w-80px.border-warning { color: #ffd07a !important; border-color: rgba(246, 178, 60, .35) !important; }
body.fx-ui .btn.w-70px.border-secondary, body.fx-ui .btn.w-80px.border-secondary { color: var(--fx-ink-2) !important; border-color: var(--fx-line-strong) !important; }
body.fx-ui .btn.w-70px:hover, body.fx-ui .btn.w-80px:hover { background: rgba(255, 255, 255, .07); }

body.fx-ui .btn-primary {
  background: var(--fx-accent) !important;
  border-color: transparent !important;
  color: var(--fx-accent-ink) !important;
  border-radius: 11px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 20px -10px var(--fx-accent-glow);
}
body.fx-ui .btn-secondary {
  background: var(--fx-surface-3) !important;
  border-color: var(--fx-line-strong) !important;
  color: var(--fx-ink-2) !important;
  border-radius: 11px;
}

/* Ripple (scripts/fx-motion.js) */
body.fx-ui .fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .32);
  transform: scale(0); animation: fx-ripple .6s var(--fx-ease) forwards;
}
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ─── Inputs ────────────────────────────────────────────────────────────── */
body.fx-ui .form-control,
body.fx-ui .form-select,
body.fx-ui .w3-input,
body.fx-ui .w3-select,
body.fx-ui textarea,
body.fx-ui select,
body.fx-ui input[type="text"],
body.fx-ui input[type="email"],
body.fx-ui input[type="number"],
body.fx-ui input[type="password"],
body.fx-ui input[type="search"],
body.fx-ui input[type="tel"],
body.fx-ui input[type="url"],
body.fx-ui input[type="date"],
body.fx-ui input[type="time"],
body.fx-ui input[type="datetime-local"] {
  background-color: var(--fx-surface-2) !important;
  border: 1px solid var(--fx-line-strong) !important;
  border-radius: 12px !important;
  color: var(--fx-ink) !important;
  font-size: 15px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25) inset;
  transition: border-color var(--fx-fast) ease, box-shadow var(--fx-med) var(--fx-ease), background-color var(--fx-fast) ease !important;
}
body.fx-ui .form-control.p-3, body.fx-ui .form-select.p-3 { padding: 12px 14px !important; }
body.fx-ui .form-select, body.fx-ui select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238a909c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 40px !important;
}
@media (max-width: 600px) {
  body.fx-ui .form-select, body.fx-ui select.form-select {
    padding-left: 10px !important; padding-right: 26px !important; background-position: right 8px center !important; font-size: 14px !important;
  }
}
body.fx-ui .form-control:hover, body.fx-ui .form-select:hover, body.fx-ui textarea:hover { border-color: rgba(255, 255, 255, .18) !important; }
body.fx-ui .form-control:focus,
body.fx-ui .form-select:focus,
body.fx-ui textarea:focus,
body.fx-ui select:focus,
body.fx-ui input:focus {
  outline: none !important;
  border-color: var(--fx-accent-line) !important;
  background-color: var(--fx-surface-3) !important;
  box-shadow: var(--fx-ring) !important;
}
/* Input groups ("%" add-ons etc.): one joined control, not a rounded input next to a square box. */
body.fx-ui .input-group { flex-wrap: nowrap; align-items: stretch; }
body.fx-ui .input-group > .form-control,
body.fx-ui .input-group > .form-select { margin-bottom: 0 !important; }
body.fx-ui .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.fx-ui .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px !important; }
body.fx-ui .input-group-text {
  background: var(--fx-surface-3) !important;
  border: 1px solid var(--fx-line-strong) !important;
  color: var(--fx-muted) !important;
  border-radius: 12px;
  font-weight: 600;
}
body.fx-ui .input-group.mb-3 > .form-control.mb-3 { margin-bottom: 0 !important; }
/* Native file inputs: the browser's light grey button, in the dark theme. */
body.fx-ui input[type="file"] { color: var(--fx-muted); font-size: 14px; }
body.fx-ui input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--fx-line-strong); background: var(--fx-surface-3); color: var(--fx-ink);
  font: 600 13px var(--fx-font); transition: background .15s ease, border-color .15s ease;
}
body.fx-ui input[type="file"]::file-selector-button:hover { background: var(--fx-surface-4); border-color: var(--fx-accent-line); }
body.fx-ui ::placeholder { color: var(--fx-muted) !important; opacity: .85; }
body.fx-ui .form-label, body.fx-ui label.form-label {
  color: var(--fx-muted) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  letter-spacing: .005em;
  margin-bottom: 6px;
}
body.fx-ui input[type="checkbox"]:not(.switch input), body.fx-ui input[type="radio"] { accent-color: var(--fx-accent); }

/* switchBox(): the iOS toggle, with a springy knob and the accent when on. */
body.fx-ui .switch { width: 46px !important; height: 28px !important; }
body.fx-ui .switch .slider {
  background: var(--fx-surface-4) !important;
  box-shadow: inset 0 0 0 1px var(--fx-line-strong);
  transition: background-color .25s var(--fx-ease), box-shadow .25s ease !important;
}
body.fx-ui .switch .slider:before {
  width: 22px !important; height: 22px !important; left: 3px !important; bottom: 3px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .1);
  transition: transform .34s var(--fx-ease-spring) !important;
}
body.fx-ui .switch input:checked + .slider { background: var(--fx-green) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 16px -4px color-mix(in srgb, var(--fx-green) 70%, transparent); }
body.fx-ui .switch input:checked + .slider:before { transform: translateX(18px) !important; }
body.fx-ui .switch input:focus-visible + .slider { box-shadow: var(--fx-ring) !important; }
body.fx-ui .switch + * , body.fx-ui label[for^="switchbox_"] { color: var(--fx-ink-2); }

/* ─── Tables ────────────────────────────────────────────────────────────── */
body.fx-ui .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, .018);
  --bs-table-hover-bg: rgba(255, 255, 255, .035);
  --bs-table-color: var(--fx-ink-2);
  --bs-table-striped-color: var(--fx-ink-2);
  color: var(--fx-ink-2);
  border-collapse: separate !important;
  border-spacing: 0;
}
body.fx-ui .table > thead > tr > th,
body.fx-ui .table > tbody > tr:first-child > th,
body.fx-ui table.table th {
  background: transparent !important;
  color: var(--fx-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fx-line-strong) !important;
  padding-top: 12px !important; padding-bottom: 12px !important;
  line-height: 1.3;
}
/* Admin tables can have 20+ columns (permissions grid): uppercase tracking costs width. */
body.fx-ui.fx-admin table.table th { font-size: 10.5px !important; letter-spacing: .045em; padding-left: 6px !important; padding-right: 6px !important; }
/* Geist is wider than the Roboto the tables were laid out for: dense tables get a
   slightly smaller size and tighter tracking so columns keep their old width. */
body.fx-ui.fx-admin .table > tbody > tr > td,
body.fx-ui.fx-admin table td { font-size: 14px; letter-spacing: -.012em; }
body.fx-ui.fx-admin .card.card-style .content { font-size: 15px; }
/* Row lines and hover only on real data tables: the spectator fight card is laid
   out with a borderless .table, and a hover tint there reads as a stray box. */
body.fx-ui .table:not(.table-borderless) > tbody > tr > td {
  border-bottom: 1px solid var(--fx-line) !important;
  transition: background-color var(--fx-fast) ease;
}
body.fx-ui .table:not(.table-borderless) > tbody > tr:last-child > td { border-bottom: 0 !important; }
body.fx-ui.fx-admin .table:not(.table-borderless) > tbody > tr:hover > td { --bs-table-accent-bg: rgba(255, 255, 255, .035); }
body.fx-ui .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255, 255, 255, .016); }
body.fx-ui th.sortable:hover { background-color: rgba(255, 255, 255, .04) !important; color: var(--fx-ink) !important; }
body.fx-ui th.sortable.asc, body.fx-ui th.sortable.desc { color: var(--fx-accent) !important; }
body.fx-ui .table img.rounded-circle, body.fx-ui .table td img[width="40"], body.fx-ui .table td img[style*="border-radius: 50%"] {
  box-shadow: 0 0 0 2px var(--fx-surface), 0 0 0 3px var(--fx-line-strong);
}

/* ─── Badges & pills ────────────────────────────────────────────────────── */
body.fx-ui .badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: .015em;
  padding: .38em .72em;
  line-height: 1.1;
}
body.fx-ui .badge.bg-success { background: color-mix(in srgb, var(--fx-green) 18%, transparent) !important; color: #7af0b0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-green) 35%, transparent); }
body.fx-ui .badge.bg-danger  { background: color-mix(in srgb, var(--fx-red) 18%, transparent) !important;   color: #ff9aa2 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-red) 38%, transparent); }
body.fx-ui .badge.bg-warning { background: color-mix(in srgb, var(--fx-amber) 18%, transparent) !important; color: #ffd27f !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-amber) 36%, transparent); }
body.fx-ui .badge.bg-info    { background: color-mix(in srgb, var(--fx-blue) 18%, transparent) !important;  color: #9cc0ff !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-blue) 36%, transparent); }
body.fx-ui .badge.bg-secondary { background: rgba(255, 255, 255, .07) !important; color: var(--fx-ink-2) !important; box-shadow: inset 0 0 0 1px var(--fx-line-strong); }
/* bg-primary means "blue/info" across the admin (gender, tier, …), not the brand:
   orange stays reserved for actions. */
body.fx-ui .badge.bg-primary { background: color-mix(in srgb, var(--fx-blue) 20%, transparent) !important; color: #a9c7ff !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-blue) 40%, transparent); }
body.fx-ui .badge.bg-dark { background: rgba(0, 0, 0, .45) !important; color: var(--fx-ink-2) !important; box-shadow: inset 0 0 0 1px var(--fx-line-strong); }
body.fx-ui .badge[style*="background"] { box-shadow: none; }

/* ─── Alerts (alert() helper + Bootstrap) ───────────────────────────────── */
body.fx-ui .alert {
  border-radius: var(--fx-r) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--fx-line-strong);
  backdrop-filter: blur(8px);
}
body.fx-ui .alert-warning { background: color-mix(in srgb, var(--fx-amber) 12%, var(--fx-surface)) !important; color: #ffe0a3 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-amber) 30%, transparent); }
body.fx-ui .alert-danger  { background: color-mix(in srgb, var(--fx-red) 12%, var(--fx-surface)) !important;   color: #ffc0c5 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-red) 30%, transparent); }
body.fx-ui .alert-success { background: color-mix(in srgb, var(--fx-green) 11%, var(--fx-surface)) !important; color: #b2f5d0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-green) 28%, transparent); }
body.fx-ui .alert-info    { background: color-mix(in srgb, var(--fx-blue) 11%, var(--fx-surface)) !important;  color: #c7dcff !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-blue) 28%, transparent); }

/* alert() helper: coloured slab → dark glass card with a tinted icon tile. */
body.fx-ui .alert.rounded-s[class*="bg-"] {
  --fx-al: var(--fx-amber);
  background: color-mix(in srgb, var(--fx-al) 10%, var(--fx-surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-al) 32%, transparent), 0 14px 34px -20px color-mix(in srgb, var(--fx-al) 60%, transparent) !important;
  border-radius: 18px !important;
  animation: fx-rise .5s var(--fx-ease) both !important;
  transition: transform .25s var(--fx-ease), box-shadow .25s ease;
}
body.fx-ui .alert.rounded-s.bg-green-dark { --fx-al: var(--fx-green); }
body.fx-ui .alert.rounded-s.bg-red-dark { --fx-al: var(--fx-red); }
body.fx-ui .alert.rounded-s.bg-blue-dark { --fx-al: var(--fx-blue); }
body.fx-ui .alert.rounded-s.bg-secondary { --fx-al: #9aa1ad; }
body.fx-ui .alert.rounded-s[class*="bg-"] .alert-icon {
  background: color-mix(in srgb, var(--fx-al) 16%, transparent) !important;
  color: var(--fx-al) !important;
  border-right: 1px solid color-mix(in srgb, var(--fx-al) 22%, transparent);
}
body.fx-ui .alert.rounded-s[class*="bg-"] .alert-icon i { color: var(--fx-al) !important; }
body.fx-ui .alert.rounded-s[class*="bg-"] h4 { color: var(--fx-ink) !important; font-size: 15px !important; letter-spacing: .06em; font-weight: 700 !important; }
body.fx-ui .alert.rounded-s[class*="bg-"] .alert-message,
body.fx-ui .alert.rounded-s[class*="bg-"] .alert-message a { color: var(--fx-ink-2) !important; font-size: 14.5px; }
body.fx-ui .alert.rounded-s[class*="bg-"]:has(a):hover { transform: translateY(-2px); }
body.fx-ui .alert.rounded-s[class*="bg-"]:has(a) .alert-title::after {
  content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 26px; line-height: 1; color: var(--fx-muted); transition: transform .25s var(--fx-ease);
}
body.fx-ui .alert.rounded-s[class*="bg-"]:has(a):hover .alert-title::after { transform: translate(3px, -50%); color: var(--fx-ink); }

/* ─── Modals ────────────────────────────────────────────────────────────── */
body.fx-ui .modal-backdrop.show { opacity: 1 !important; background: rgba(4, 5, 8, .62) !important; backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
body.fx-ui .modal-content {
  background: color-mix(in srgb, var(--fx-surface-2) 96%, transparent) !important;
  border: 0 !important;
  border-radius: var(--fx-r-xl) !important;
  box-shadow: var(--fx-shadow-3) !important;
  overflow: hidden;
}
body.fx-ui .modal.fade .modal-dialog { transform: translateY(14px) scale(.98); transition: transform .38s var(--fx-ease), opacity .25s ease !important; }
body.fx-ui .modal.show .modal-dialog { transform: none; }
body.fx-ui .modal-header { border-bottom: 1px solid var(--fx-line) !important; padding: 18px 22px !important; }
body.fx-ui .modal-footer { border-top: 1px solid var(--fx-line) !important; padding: 14px 22px !important; }
body.fx-ui .modal-body { padding: 20px 22px !important; }
body.fx-ui .modal-title { font-size: 1.15rem !important; font-weight: 680 !important; letter-spacing: -.02em; }
body.fx-ui .modal-header .close, body.fx-ui .modal-header span.close {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); color: var(--fx-ink-2) !important;
  font-size: 20px !important; line-height: 1 !important; opacity: 1 !important; cursor: pointer;
  transition: background var(--fx-fast) ease, transform var(--fx-fast) var(--fx-ease);
}
body.fx-ui .modal-header .close:hover, body.fx-ui .modal-header span.close:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }

/* Bootstrap dropdowns, list groups, nav tabs */
body.fx-ui .dropdown-menu {
  background: color-mix(in srgb, var(--fx-surface-2) 98%, transparent) !important;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 0 !important; border-radius: 14px !important; padding: 6px !important;
  box-shadow: var(--fx-shadow-3) !important;
}
body.fx-ui .dropdown-item { border-radius: 9px; color: var(--fx-ink-2) !important; padding: 8px 12px; }
body.fx-ui .dropdown-item:hover, body.fx-ui .dropdown-item:focus { background: rgba(255, 255, 255, .06) !important; color: var(--fx-ink) !important; }
body.fx-ui .nav-tabs { border-bottom: 1px solid var(--fx-line) !important; gap: 4px; }
body.fx-ui .nav-tabs .nav-link { border: 0 !important; border-radius: 10px 10px 0 0; color: var(--fx-muted) !important; position: relative; }
body.fx-ui .nav-tabs .nav-link.active { background: transparent !important; color: var(--fx-ink) !important; }
body.fx-ui .nav-tabs .nav-link.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--fx-accent); }
body.fx-ui .nav-pills .nav-link.active { background: var(--fx-accent-soft) !important; color: var(--fx-ink) !important; box-shadow: inset 0 0 0 1px var(--fx-accent-line); }

/* Progress bars */
body.fx-ui .progress { background: rgba(255, 255, 255, .06) !important; border-radius: 999px !important; overflow: hidden; }
body.fx-ui .progress-bar { border-radius: 999px; background-image: linear-gradient(90deg, color-mix(in srgb, currentColor 0%, transparent), rgba(255, 255, 255, .18)); }

/* Toasts */
body.fx-ui .toast, body.fx-ui .toast-tiny {
  border-radius: 14px !important;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--fx-shadow-3) !important;
}

/* Page loading bar (Turbo + page-progress-bar) */
body.fx-ui .turbo-progress-bar, body.fx-ui ~ .turbo-progress-bar, .fx-ui .page-progress-bar {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--fx-accent) 30%, var(--fx-accent-hi)) !important;
  box-shadow: 0 0 12px var(--fx-accent-glow);
}

/* Custom tooltip panel (data-status-tip) — whatever id the page uses */
body.fx-ui #fclTooltipPanel, body.fx-ui #statusTooltipPanel, body.fx-ui .fcl-tip-panel {
  background: color-mix(in srgb, var(--fx-surface-3) 92%, transparent) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 0 !important; border-radius: 12px !important; box-shadow: var(--fx-shadow-3) !important;
}

/* Skeleton shimmer for anything that opts in */
body.fx-ui .fx-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .09) 37%, rgba(255, 255, 255, .04) 63%);
  background-size: 400% 100%; animation: fx-shimmer 1.4s ease infinite; border-radius: 10px;
}
@keyframes fx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ─── Page transitions (Turbo + View Transitions API already wired in header.php) ─ */
::view-transition-old(root) { animation: fx-vt-out .18s var(--fx-ease, ease) both; }
::view-transition-new(root) { animation: fx-vt-in .32s var(--fx-ease, ease) both; }
@keyframes fx-vt-out { to { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
@keyframes fx-vt-in  { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.fx-ui *, body.fx-ui *::before, body.fx-ui *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}