/* ============================================================================
   FIGHTCARD.LIVE — 2026 UI REFRESH · ADMIN
   Desktop admin/staff chrome (body.fx-admin-chrome) and admin page content
   (body.fx-ui.fx-admin). See fx-core.css for tokens and the switch.
   ============================================================================ */

/* ─── Top bar: frosted glass, one line, calm until you reach for it ─────── */
body.fx-admin-chrome .admin-top-menu {
  height: 60px;
  background: color-mix(in srgb, var(--fx-chrome) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid var(--fx-line) !important;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8) !important;
  padding: 0 18px !important;
  font-family: var(--fx-font);
}
/* Hairline of accent along the bottom edge: the one signature line. */
body.fx-admin-chrome .admin-top-menu::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fx-accent-line) 18%, color-mix(in srgb, var(--fx-accent) 18%, transparent) 50%, transparent 85%);
  pointer-events: none;
}
body.fx-admin-chrome .admin-menu-left { gap: 4px !important; }
body.fx-admin-chrome .admin-menu-left > a:first-child { margin-right: 10px; }
body.fx-admin-chrome .admin-menu-right { gap: 6px !important; }
body.fx-admin-chrome .admin-logo { height: 34px !important; border-radius: 9px !important; }

body.fx-admin-chrome .admin-menu-category {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 560 !important;
  letter-spacing: -.01em;
  color: var(--fx-ink-2) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  transition: background-color var(--fx-fast) ease, color var(--fx-fast) ease !important;
}
body.fx-admin-chrome .admin-menu-category:hover {
  background-color: rgba(255, 255, 255, .06) !important;
  color: var(--fx-ink) !important;
}
body.fx-admin-chrome .admin-menu-category .menu-attention-dot {
  top: 5px !important; right: 4px !important;
  background: var(--fx-accent) !important;
  box-shadow: 0 0 0 2px var(--fx-chrome), 0 0 8px var(--fx-accent-glow) !important;
}
body.fx-admin-chrome .admin-menu-icon { color: var(--fx-ink-2) !important; font-size: 16px !important; }
body.fx-admin-chrome .admin-menu-icon:hover { color: var(--fx-ink) !important; }

/* Dropdowns: glass panel, rounded items, no rule under every row. */
body.fx-admin-chrome .admin-dropdown {
  top: calc(100% + 6px) !important;
  background: color-mix(in srgb, var(--fx-surface-2) 98%, transparent) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 0 !important;
  border-radius: 16px !important;
  padding: 6px !important;
  box-shadow: 0 0 0 1px var(--fx-line-strong), 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 70px -20px rgba(0, 0, 0, .9), 0 10px 24px -12px rgba(0, 0, 0, .6) !important;
  transform: translateY(-6px) scale(.985) !important;
  transform-origin: top left;
  transition: opacity .18s ease, transform .28s var(--fx-ease), visibility .18s !important;
}
body.fx-admin-chrome .admin-menu-category:hover > .admin-dropdown { transform: none !important; }
body.fx-admin-chrome .admin-menu-category.profile-dropdown .admin-dropdown { transform-origin: top right; }
/* A hover bridge so the 6px gap does not close the menu on the way down. */
body.fx-admin-chrome .admin-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
body.fx-admin-chrome .admin-dropdown.admin-dropdown-prep { padding: 6px !important; gap: 0; }
body.fx-admin-chrome .admin-dropdown.admin-dropdown-prep .admin-dropdown-prep-col + .admin-dropdown-prep-col { border-left: 1px solid var(--fx-line) !important; }
body.fx-admin-chrome .admin-dropdown-item {
  border: 0 !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  margin: 1px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--fx-ink-2) !important;
  transition: background-color .12s ease, color .12s ease, transform .2s var(--fx-ease) !important;
}
body.fx-admin-chrome .admin-dropdown-item i {
  color: var(--fx-muted);
  width: 18px; text-align: center;
  transition: color .12s ease;
}
body.fx-admin-chrome .admin-dropdown-item:hover {
  background: var(--fx-accent-soft) !important;
  color: var(--fx-ink) !important;
}
body.fx-admin-chrome .admin-dropdown-item:hover i { color: var(--fx-accent); }
body.fx-admin-chrome .admin-dropdown-section {
  background: transparent !important;
  border: 0 !important;
  padding: 12px 12px 4px !important;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  color: var(--fx-faint) !important;
}
body.fx-admin-chrome .admin-dropdown-divider { background: transparent !important; border: 0 !important; height: 1px !important; margin: 6px 8px; background-color: var(--fx-line) !important; }
body.fx-admin-chrome .admin-dropdown .badge { box-shadow: none; }
body.fx-admin-chrome .admin-dropdown .promo-switch-item.is-active { background: rgba(255, 255, 255, .05) !important; }

/* "Need help to get started?" tip: dark glass, not a white sticker. */
body.fx-admin-chrome .admin-dropdown,
body.fx-admin-chrome .help-start-tip { white-space: normal; }
body.fx-admin-chrome .help-start-tip {
  width: 250px !important;
  background: var(--fx-surface-3) !important;
  color: var(--fx-ink-2) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px var(--fx-line-strong), 0 20px 50px -16px rgba(0, 0, 0, .9) !important;
  animation: fx-tip-in .5s var(--fx-ease-spring) both;
}
body.fx-admin-chrome .help-start-tip::before { border-color: transparent transparent var(--fx-surface-3) transparent !important; }
body.fx-admin-chrome .help-start-tip-title { color: var(--fx-ink) !important; }
body.fx-admin-chrome .help-start-tip-close { color: var(--fx-muted) !important; }
@keyframes fx-tip-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* Event switcher pill + tier pill in the bar */
body.fx-admin-chrome .admin-menu-right [class*="event-switch"],
body.fx-admin-chrome .admin-menu-right .staff-event-switcher {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--fx-line-strong) !important;
  border-radius: 999px !important;
}

/* Public top bar (events.php etc.) mirrors the admin bar */
body.fx-ui .public-top-menu {
  background: color-mix(in srgb, var(--fx-chrome) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid var(--fx-line) !important;
  box-shadow: none !important;
}

/* ─── Admin page content ────────────────────────────────────────────────── */
body.fx-ui.fx-admin .page-content { padding-top: 6px; }
body.fx-ui.fx-admin .card.card-style { margin-left: 14px; margin-right: 14px; }
body.fx-ui.fx-admin .card.card-style h1 { margin-bottom: 4px; }

/* Control panel clock: one line, broadcast numerals that never wrap or jitter. */
body.fx-ui.fx-admin #digital-clock {
  font-family: var(--fx-display) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: clamp(1.8rem, 2.9vw, 3.4rem) !important;
  letter-spacing: .01em;
  line-height: 1;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .62));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
/* Event state buttons: break between words, not inside them */
body.fx-ui.fx-admin .btn { overflow-wrap: normal; word-break: normal; hyphens: auto; }

/* Settings-style left rail (list-group links with an active wrapper) */
body.fx-ui.fx-admin .list-group-item-action {
  border-radius: 11px !important;
  color: var(--fx-ink-2) !important;
  padding: 10px 12px !important;
  transition: background-color .14s ease, color .14s ease !important;
}
body.fx-ui.fx-admin .list-group-item-action .fw-bold { font-weight: 560 !important; }
body.fx-ui.fx-admin .list-group-item-action i { color: var(--fx-muted); font-size: 16px !important; width: 22px !important; }
body.fx-ui.fx-admin .list-group-item-action:hover { background: rgba(255, 255, 255, .05) !important; color: var(--fx-ink) !important; }
body.fx-ui.fx-admin .bg-secondary.bg-opacity-25.rounded {
  background: rgba(255, 255, 255, .06) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px var(--fx-line-strong);
  position: relative;
}
body.fx-ui.fx-admin .bg-secondary.bg-opacity-25.rounded::before {
  content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: var(--fx-accent); box-shadow: 0 0 10px var(--fx-accent-glow);
}
body.fx-ui.fx-admin .bg-secondary.bg-opacity-25.rounded .list-group-item-action,
body.fx-ui.fx-admin .bg-secondary.bg-opacity-25.rounded .list-group-item-action i { color: var(--fx-ink) !important; }
body.fx-ui.fx-admin .bg-secondary.bg-opacity-25.rounded .list-group-item-action i { color: var(--fx-accent) !important; }
body.fx-ui.fx-admin .form-text, body.fx-ui.fx-admin .text-muted { color: var(--fx-muted) !important; }

/* Dashboard */
body.fx-ui.fx-admin .dashboard-stat-card {
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, var(--fx-surface-3), var(--fx-surface-2)) !important;
  box-shadow: 0 0 0 1px var(--fx-line-strong), 0 1px 0 rgba(255, 255, 255, .05) inset !important;
  position: relative; overflow: hidden;
  transition: transform .25s var(--fx-ease), box-shadow .25s ease !important;
}
body.fx-ui.fx-admin .dashboard-stat-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--fx-accent-line), 0 16px 32px -18px var(--fx-accent-glow) !important; }
body.fx-ui.fx-admin .dashboard-stat-number {
  font-family: var(--fx-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
body.fx-ui.fx-admin .dashboard-stat-label { color: var(--fx-muted) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 11px !important; font-weight: 600; }
body.fx-ui.fx-admin .fight-card-row {
  border-radius: 10px;
  transition: background-color .14s ease;
}
body.fx-ui.fx-admin .fight-card-row:hover { background: rgba(255, 255, 255, .035); }
body.fx-ui.fx-admin .fight-card-order-badge {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--fx-muted) !important;
  border-radius: 7px !important;
  font-variant-numeric: tabular-nums;
}
/* Fight lists on dashboard / control panel were barely readable */
body.fx-ui.fx-admin .fight-card-fighter-name { color: var(--fx-ink-2) !important; opacity: 1 !important; }
body.fx-ui.fx-admin .fight-card-row.fight-completed .fight-card-fighter-name { color: var(--fx-muted) !important; }
body.fx-ui.fx-admin .fight-card-vs { color: var(--fx-faint) !important; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* Charts sit on the card, not in a box */
body.fx-ui.fx-admin canvas { filter: saturate(1.05); }

/* Big flip countdown: dark glass panels instead of grey slabs */
body.fx-ui .tick-flip-panel { background-color: var(--fx-surface-3) !important; color: var(--fx-ink) !important; }
body.fx-ui .tick-flip { border-radius: 10px !important; box-shadow: 0 0 0 1px var(--fx-line-strong), 0 10px 24px -14px rgba(0, 0, 0, .9); }
body.fx-ui .tick-label { color: var(--fx-muted) !important; letter-spacing: .1em; }

/* Notification bell dropdown */
body.fx-admin-chrome .notif-bell-dropdown .admin-dropdown { width: 380px; }

/* ═══ Round 4 · admin ═══════════════════════════════════════════════════════ */

/* ─── KPI tiles: colour by meaning ──────────────────────────────────────────
   The meaning is already in the markup (the number's text-success/danger/… class),
   so the tile reads it with :has() and takes that colour for its light and top edge.
   Tiles without a meaning stay neutral; orange stays reserved for actions. */
body.fx-ui.fx-admin .dashboard-stat-card,
body.fx-ui.fx-admin .pd-hero-card,
body.fx-ui.fx-admin .pd-insight-chip,
body.fx-ui.fx-admin .sl-stat,
body.fx-ui.fx-admin .fas-stat,
body.fx-ui.fx-admin .tkt-stat { --tile: #8a909c; }
body.fx-ui.fx-admin :is(.dashboard-stat-card, .pd-hero-card, .pd-insight-chip):has(.text-success) { --tile: var(--fx-green); }
body.fx-ui.fx-admin :is(.dashboard-stat-card, .pd-hero-card, .pd-insight-chip):has(.text-danger)  { --tile: var(--fx-red); }
body.fx-ui.fx-admin :is(.dashboard-stat-card, .pd-hero-card, .pd-insight-chip):has(.text-warning) { --tile: var(--fx-amber); }
body.fx-ui.fx-admin :is(.dashboard-stat-card, .pd-hero-card, .pd-insight-chip):has(.text-primary, .text-info) { --tile: var(--fx-blue); }

body.fx-ui.fx-admin :is(.dashboard-stat-card, .pd-hero-card, .sl-stat, .fas-stat) {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tile) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--fx-surface-3), var(--fx-surface-2)) !important;
  border: 0 !important; border-radius: 16px !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tile) 22%, var(--fx-line-strong)), 0 1px 0 rgba(255, 255, 255, .05) inset !important;
  transition: transform .25s var(--fx-ease), box-shadow .25s ease !important;
}
body.fx-ui.fx-admin :is(.dashboard-stat-card, .pd-hero-card, .sl-stat, .fas-stat)::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--tile), transparent); opacity: .85;
}
body.fx-ui.fx-admin :is(.dashboard-stat-card, .pd-hero-card):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tile) 45%, transparent), 0 18px 34px -20px color-mix(in srgb, var(--tile) 70%, transparent) !important; }
body.fx-ui.fx-admin :is(.dashboard-stat-number, .pd-hero-number, .pd-insight-number, .sl-stat .n, .fas-stat .num, .tkt-stat-num) {
  font-family: var(--fx-display) !important; font-weight: 800 !important; letter-spacing: .005em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px color-mix(in srgb, var(--tile, #fff) 35%, transparent);
}
body.fx-ui.fx-admin :is(.dashboard-stat-label, .pd-hero-label, .pd-insight-label, .sl-stat .l, .fas-stat .lbl, .tkt-stat-label) {
  color: var(--fx-muted) !important; text-transform: uppercase; letter-spacing: .09em; font-size: 11px !important; font-weight: 600 !important;
}
/* The tile tint classes (bg-success bg-opacity-10 …) are replaced by the light above. */
body.fx-ui.fx-admin .dashboard-stat-card[class*="bg-"] { --bs-bg-opacity: 0; }
/* Sales leads carry their status colour as an inline left edge: keep it. */
body.fx-ui.fx-admin .sl-stat { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
body.fx-ui.fx-admin .sl-stat::before { display: none; }
/* Ticket overview grid: hairlines instead of hard borders. */
body.fx-ui.fx-admin .tkt-stats { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--fx-line-strong); background: var(--fx-surface-2); }
body.fx-ui.fx-admin .tkt-stat { border-color: var(--fx-line) !important; }

/* ─── Wide tables ───────────────────────────────────────────────────────────── */
/* Scroll shadows: a soft edge appears on whichever side has more columns to scroll to. */
body.fx-ui.fx-admin .table-responsive {
  background:
    linear-gradient(90deg, var(--fx-surface) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--fx-surface) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .55), transparent) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .55), transparent) right center / 16px 100% no-repeat scroll;
  scrollbar-width: thin;
}
body.fx-ui.fx-admin .table-responsive > table { background: transparent; }
/* The permissions grid keeps the person in view while you scroll across the roles. */
body.fx-ui.fx-admin #usersTable > thead > tr > th:first-child,
body.fx-ui.fx-admin #usersTable > tbody > tr > td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--fx-surface) !important;
  box-shadow: 10px 0 14px -12px rgba(0, 0, 0, .8);
}
/* .page-content hides horizontal overflow; 'hidden' turns it into a scroll container and
   that silently disables every sticky header inside. 'clip' clips the same way without it. */
body.fx-ui.fx-admin .page-content { overflow-x: clip !important; overflow-y: visible !important; }
/* The person's avatar + name (first two columns) stay put; --fx-c1 is the avatar column's
   width, measured by fx-motion.js. */
body.fx-ui.fx-admin #usersTable > thead > tr > th:nth-child(2),
body.fx-ui.fx-admin #usersTable > tbody > tr > td:nth-child(2) {
  position: sticky; left: var(--fx-c1, 56px); z-index: 2; background: var(--fx-surface) !important;
  box-shadow: 10px 0 14px -12px rgba(0, 0, 0, .8);
}
body.fx-ui.fx-admin #usersTable > thead > tr > th:first-child,
body.fx-ui.fx-admin #usersTable > tbody > tr > td:first-child { box-shadow: none; }
/* Long lists outside a scroll container: the column headings follow you down. */
body.fx-ui.fx-admin #fightersTable > thead > tr > th {
  position: sticky; top: 60px; z-index: 3; background: var(--fx-surface) !important;
  box-shadow: 0 1px 0 var(--fx-line-strong);
}
@media (max-width: 600px) { body.fx-ui.fx-admin #fightersTable > thead > tr > th { top: 50px; } }

/* ─── Motion ───────────────────────────────────────────────────────────────── */
/* Rows glide in once when a list first loads (fx-motion.js adds .fx-rows-in for ~1 s,
   so sorting and filtering never replay it). */
body.fx-ui.fx-admin tbody.fx-rows-in > tr { animation: fx-row-in .45s var(--fx-ease) both; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(2) { animation-delay: .03s; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(3) { animation-delay: .06s; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(4) { animation-delay: .09s; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(5) { animation-delay: .12s; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(6) { animation-delay: .15s; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(7) { animation-delay: .18s; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(8) { animation-delay: .21s; }
body.fx-ui.fx-admin tbody.fx-rows-in > tr:nth-child(n+9) { animation-delay: .24s; }
@keyframes fx-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Menu items arrive in a quick cascade when a top-menu dropdown opens. */
body.fx-admin-chrome .admin-menu-category:hover > .admin-dropdown .admin-dropdown-item,
body.fx-admin-chrome .admin-menu-category:hover > .admin-dropdown .admin-dropdown-section { animation: fx-item-in .28s var(--fx-ease) both; }
body.fx-admin-chrome .admin-menu-category:hover > .admin-dropdown :is(.admin-dropdown-item, .admin-dropdown-section):nth-child(2) { animation-delay: .015s; }
body.fx-admin-chrome .admin-menu-category:hover > .admin-dropdown :is(.admin-dropdown-item, .admin-dropdown-section):nth-child(3) { animation-delay: .03s; }
body.fx-admin-chrome .admin-menu-category:hover > .admin-dropdown :is(.admin-dropdown-item, .admin-dropdown-section):nth-child(4) { animation-delay: .045s; }
body.fx-admin-chrome .admin-menu-category:hover > .admin-dropdown :is(.admin-dropdown-item, .admin-dropdown-section):nth-child(n+5) { animation-delay: .06s; }
@keyframes fx-item-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.fx-ui.fx-admin tbody.fx-rows-in > tr, body.fx-admin-chrome .admin-dropdown * { animation: none !important; }
}

/* "Add attendance" (admin dashboard): until a number is recorded it is an action, not a
   statistic, so it looks like a button: dashed outline, accent label, no tile light. */
body.fx-ui.fx-admin .dashboard-stat-card:has(#specChipNumber .fa-plus) {
  background: transparent !important;
  box-shadow: none !important;
  border: 1.5px dashed color-mix(in srgb, var(--fx-accent) 55%, transparent) !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
body.fx-ui.fx-admin .dashboard-stat-card:has(#specChipNumber .fa-plus)::before { display: none; }
body.fx-ui.fx-admin .dashboard-stat-card:has(#specChipNumber .fa-plus) #specChipNumber {
  font-family: var(--fx-font) !important; text-shadow: none; line-height: 1;
}
body.fx-ui.fx-admin #specChipNumber > span:has(.fa-plus) {
  opacity: 1 !important; font-size: 14px !important; font-weight: 650; color: var(--fx-accent-hi) !important;
  letter-spacing: .01em;
}
body.fx-ui.fx-admin .dashboard-stat-card:has(#specChipNumber .fa-plus) #specChipLabel { font-size: 10.5px !important; }
body.fx-ui.fx-admin .dashboard-stat-card:has(#specChipNumber .fa-plus):hover {
  background: var(--fx-accent-soft) !important; border-style: solid !important; transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px var(--fx-accent-glow) !important;
}