/*
 * BLACKTWENTY brand override -- colors/fonts/shapes adapted from the
 * BT Republic Events Quotation reference, keeping the BLACKTWENTY
 * name/icon. Loaded globally (see includes/header.php) AFTER theme.css
 * and user.css, so these declarations win the cascade without editing
 * the generated Falcon vendor file directly.
 *
 * Approach: Falcon/Bootstrap build every component's colors from
 * --falcon-* custom properties. Most of those properties are only
 * SET (not var()-referenced) at the component level, so overriding the
 * root tokens alone doesn't cascade everywhere -- this file overrides
 * the root tokens for broad effect, then redeclares the same
 * component-level custom property names (--falcon-btn-bg, etc.) that
 * Falcon's own rules already consume, for the specific components that
 * hardcode the primary blue (#2c7be5).
 */

@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-800.woff2") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; }

:root {
  --bt-ink: #0b0b0b;
  --bt-panel: #1a1a1a;
  --bt-panel2: #141414;
  --bt-line: #3b3b3b;
  --bt-muted: #a7a7a7;
  --bt-white: #ffffff;
  --bt-yellow: #ffdd6e;
  --bt-yellow-hover: #ffe89a;
  --bt-yellow-rgb: 255, 221, 110;
  --bt-red: #b51111;
  --bt-font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --bt-font-body: "Montserrat", Arial, sans-serif;
}

/* ---- Root design tokens: broad cascade for anything using var(--falcon-*) directly ---- */
[data-bs-theme=dark] {
  --falcon-primary: var(--bt-yellow);
  --falcon-primary-rgb: var(--bt-yellow-rgb);
  --falcon-primary-text-emphasis: var(--bt-yellow);
  --falcon-link-color: var(--bt-yellow);
  --falcon-link-color-rgb: var(--bt-yellow-rgb);
  --falcon-link-hover-color: var(--bt-yellow-hover);
  --falcon-link-hover-color-rgb: 255, 232, 154;
  --falcon-alert-link-color: var(--bt-yellow);

  --falcon-body-bg: var(--bt-ink);
  --falcon-body-bg-rgb: 11, 11, 11;
  --falcon-quaternary-bg: var(--bt-panel2);
  --falcon-quaternary-bg-rgb: 20, 20, 20;
  --falcon-emphasis-bg: var(--bt-panel);
  --falcon-emphasis-bg-rgb: 26, 26, 26;
  --falcon-body-font-family: var(--bt-font-body);
  --falcon-font-sans-serif: var(--bt-font-body);
  --falcon-font-base: var(--bt-font-body);

  --falcon-navbar-vertical-default-bg-color: var(--bt-panel2);
  --falcon-navbar-vertical-default-link-active-color: var(--bt-yellow);
  --falcon-navbar-vertical-default-link-hover-color: var(--bt-white);
  --falcon-bg-navbar-glass: rgba(11, 11, 11, .96);

  --falcon-dropdown-link-active-bg: var(--bt-yellow);
  --falcon-dropdown-link-active-color: var(--bt-ink);
}

body { font-family: var(--bt-font-body); }

h1, h2, h3, h4, h5, h6,
.card-title,
.navbar-vertical-content .navbar-brand strong,
.section-title,
.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--bt-font-display);
  letter-spacing: .02em;
}

/* ---- Buttons ---- */
.btn-primary {
  --falcon-btn-color: var(--bt-ink);
  --falcon-btn-bg: var(--bt-yellow);
  --falcon-btn-border-color: var(--bt-yellow);
  --falcon-btn-hover-color: var(--bt-ink);
  --falcon-btn-hover-bg: var(--bt-yellow-hover);
  --falcon-btn-hover-border-color: var(--bt-yellow-hover);
  --falcon-btn-active-color: var(--bt-ink);
  --falcon-btn-active-bg: #f5cf4f;
  --falcon-btn-active-border-color: #f5cf4f;
  --falcon-btn-disabled-color: var(--bt-ink);
  --falcon-btn-disabled-bg: var(--bt-yellow);
  --falcon-btn-disabled-border-color: var(--bt-yellow);
  font-weight: 700;
}
.btn-outline-primary {
  --falcon-btn-color: var(--bt-yellow);
  --falcon-btn-border-color: var(--bt-yellow);
  --falcon-btn-hover-color: var(--bt-ink);
  --falcon-btn-hover-bg: var(--bt-yellow);
  --falcon-btn-hover-border-color: var(--bt-yellow);
  --falcon-btn-active-color: var(--bt-ink);
  --falcon-btn-active-bg: var(--bt-yellow);
  --falcon-btn-active-border-color: var(--bt-yellow);
  --falcon-btn-disabled-color: var(--bt-yellow);
  --falcon-btn-disabled-border-color: var(--bt-yellow);
}
.btn-falcon-primary {
  --falcon-btn-falcon-primary-color: var(--bt-yellow);
  --falcon-btn-falcon-primary-hover-color: var(--bt-yellow-hover);
  --falcon-btn-falcon-primary-active-color: var(--bt-yellow-hover);
}

/* ---- Forms ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--bt-yellow);
  box-shadow: var(--falcon-box-shadow-inset, inset 0 1px 2px rgba(0,0,0,.4)), 0 0 0 .25rem rgba(var(--bt-yellow-rgb), .25);
}
.form-check-input:focus {
  border-color: var(--bt-yellow);
  box-shadow: 0 0 0 .25rem rgba(var(--bt-yellow-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--bt-yellow);
  border-color: var(--bt-yellow);
}
.form-check-input:checked[type=checkbox] {
  --falcon-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0b0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  --falcon-form-check-radio-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230b0b0b'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--bt-yellow); }
.form-range::-moz-range-thumb { background-color: var(--bt-yellow); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--bt-panel2), 0 0 0 .25rem rgba(var(--bt-yellow-rgb), .25); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--bt-panel2), 0 0 0 .25rem rgba(var(--bt-yellow-rgb), .25); }

/* ---- Nav / tabs / pills ---- */
.nav-pills {
  --falcon-nav-pills-link-active-color: var(--bt-ink);
  --falcon-nav-pills-link-active-bg: var(--bt-yellow);
}
.nav-link:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(var(--bt-yellow-rgb), .25);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bt-yellow);
  border-color: var(--bt-line) var(--bt-line) var(--bt-panel);
}

/* ---- Dropdowns ---- */
.dropdown-menu {
  --falcon-dropdown-link-active-color: var(--bt-ink);
  --falcon-dropdown-link-active-bg: var(--bt-yellow);
}
.dropdown-menu-dark {
  --falcon-dropdown-link-active-color: var(--bt-ink);
  --falcon-dropdown-link-active-bg: var(--bt-yellow);
}

/* ---- Pagination ---- */
.pagination {
  --falcon-pagination-hover-color: var(--bt-ink);
  --falcon-pagination-hover-bg: var(--bt-yellow);
  --falcon-pagination-hover-border-color: var(--bt-yellow);
  --falcon-pagination-active-color: var(--bt-ink);
  --falcon-pagination-active-bg: var(--bt-yellow);
  --falcon-pagination-active-border-color: var(--bt-yellow);
}

/* ---- Progress bars ---- */
.progress, .progress-stacked {
  --falcon-progress-bar-color: var(--bt-ink);
  --falcon-progress-bar-bg: var(--bt-yellow);
}

/* ---- List group ---- */
.list-group {
  --falcon-list-group-active-color: var(--bt-ink);
  --falcon-list-group-active-bg: var(--bt-yellow);
  --falcon-list-group-active-border-color: var(--bt-yellow);
}

/* ---- Close button / accordion focus rings ---- */
.btn-close { --falcon-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--bt-yellow-rgb), .25); }
.accordion { --falcon-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bt-yellow-rgb), .25); --falcon-accordion-active-color: var(--bt-yellow); }

/* ---- Sidebar brand logo (matches login page treatment) ---- */
.navbar-vertical .navbar-brand span {
  font-family: var(--bt-font-display);
  letter-spacing: .03em;
}

.navbar-vertical-content .nav-link.active,
.navbar-vertical-content .nav-link[aria-expanded=true] {
  color: var(--bt-yellow) !important;
}

/* ---- Links / badges ---- */
a { }
.badge.bg-primary,
.bg-primary { background-color: var(--bt-yellow) !important; color: var(--bt-ink) !important; }
.text-primary { color: var(--bt-yellow) !important; }
.border-primary { border-color: var(--bt-yellow) !important; }

/* ---- Cards: subtle sharpening to match the brand's angular language ---- */
.card { border-radius: 6px; }

/*
 * Tables: Falcon's dark theme never actually overrides --falcon-table-color
 * (it's hardcoded to #5e6e82, a light-mode grey, with no [data-bs-theme=dark]
 * variant anywhere in theme.css) -- a latent contrast gap that was invisible
 * while dark mode was opt-in, but reads as unusably faint now that dark mode
 * is the permanent default.
 */
/* ==========================================================================
   Purging Falcon's navy (#0b1727)
   --------------------------------------------------------------------------
   #0b1727 is Falcon's stock "dark" -- a blue-black navy that is not a
   BLACKTWENTY colour. It leaks in from ~36 places in theme.css: some via
   design tokens, but plenty hardcoded straight into component rules where
   overriding a token alone does nothing. Every one of them is remapped
   below onto the brand's own near-black ink, in BOTH themes -- a "dark"
   accent on a light page should still be brand ink, not navy.

   Done here rather than by editing theme.css because that file is
   generated, and shipped alongside a .min and two RTL builds plus source
   maps -- four files to keep in sync, all of which a template regeneration
   would blow away. This file already loads last (see includes/header.php),
   so the cascade does the work and the vendor build stays pristine.
   ========================================================================== */

/* ---- Root tokens: the navy that IS reachable by token ---- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --falcon-dark: var(--bt-ink);
  --falcon-dark-rgb: 11, 11, 11;
  --falcon-gray-1100: var(--bt-ink);
  --falcon-gray-1100-rgb: 11, 11, 11;
  /* Falcon inverts its grey scale under dark mode, so the darkest swatch
     is gray-100 there and gray-1100 in light. Both are set, so whichever
     the active theme uses lands on brand ink. */
  --falcon-btn-disabled-custom-color: rgba(11, 11, 11, 0.3);
  --falcon-btn-disabled-custom-background: rgba(11, 11, 11, 0.65);
  --falcon-dropdown-link-hover-bg-global: rgba(11, 11, 11, 0.4);
  /* FullCalendar's own token set, seeded from the same navy. */
  --fc-button-hover-bg-color: var(--bt-ink);
  --fc-button-hover-border-color: var(--bt-ink);
  --fc-button-active-bg-color: var(--bt-ink);
  --fc-button-active-border-color: var(--bt-ink);
}

[data-bs-theme=dark] {
  --falcon-gray-100: var(--bt-ink);
  --falcon-gray-100-rgb: 11, 11, 11;
  --fc-page-bg-color: var(--bt-ink);
}

/* ---- Component rules that hardcode the navy, token or no token ---- */
.btn-dark {
  --falcon-btn-bg: var(--bt-ink);
  --falcon-btn-border-color: var(--bt-ink);
  --falcon-btn-hover-bg: var(--bt-panel);
  --falcon-btn-hover-border-color: var(--bt-panel);
  --falcon-btn-active-bg: var(--bt-panel);
  --falcon-btn-active-border-color: var(--bt-panel);
  --falcon-btn-disabled-bg: var(--bt-ink);
  --falcon-btn-disabled-border-color: var(--bt-ink);
  --falcon-btn-focus-shadow-rgb: 11, 11, 11;
}

.btn-outline-dark {
  --falcon-btn-color: var(--bt-ink);
  --falcon-btn-border-color: var(--bt-ink);
  --falcon-btn-hover-bg: var(--bt-ink);
  --falcon-btn-hover-border-color: var(--bt-ink);
  --falcon-btn-active-bg: var(--bt-ink);
  --falcon-btn-active-border-color: var(--bt-ink);
  --falcon-btn-disabled-color: var(--bt-ink);
  --falcon-btn-disabled-border-color: var(--bt-ink);
  --falcon-btn-focus-shadow-rgb: 11, 11, 11;
}

[data-bs-theme=light] .table-dark,
[data-bs-theme=dark] .table-dark,
.table-dark {
  --falcon-table-bg: var(--bt-ink);
}

/*
 * The active row of an open dropdown. Hardcoded to navy in theme.css with
 * no token in front of it, so it stayed blue-black no matter what the
 * brand layer set -- the most visible offender, since every dropdown on
 * every screen shows it. Brand yellow on ink matches how the rest of the
 * app marks a selection.
 */
[data-bs-theme=dark] .dropdown-menu .dropdown-item.active,
[data-bs-theme=dark] .dropdown-menu .dropdown-item:active {
  background-color: var(--bt-yellow);
  color: var(--bt-ink);
}

.form-check-input-dark {
  border-color: var(--bt-line) !important;
}

.form-check-input-dark:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(var(--bt-yellow-rgb), 0.25);
  box-shadow: 0 0 0 0.25rem rgba(var(--bt-yellow-rgb), 0.25);
}

.fc-timegrid .event-bg-dark-subtle .fc-event-main:after {
  background-color: var(--bt-ink) !important;
}

/*
 * Falcon's dark-mode utility pairs, all four hardcoded to navy with
 * !important. dark__bg-1100 in particular is the standard way to give a
 * panel a dark-mode background (it's what the Accounting queue's Details
 * dropdown and the Players page's info panels use), so leaving these
 * navy would have put a blue-black slab on otherwise-brand-ink screens.
 */
[data-bs-theme=dark] .dark__bg-dark,
[data-bs-theme=dark] .dark__bg-1100 {
  background-color: var(--bt-ink) !important;
}

[data-bs-theme=dark] .dark__text-dark,
[data-bs-theme=dark] .dark__text-1100 {
  color: var(--bt-ink) !important;
}

/*
 * footer_section.php locks its own <section data-bs-theme="light">. The
 * --falcon-dark override above already reaches it, but .bg-dark is
 * declared !important in theme.css, so it needs an !important of its own
 * to win rather than merely matching specificity.
 */
footer .bg-dark,
section.bg-dark {
  background-color: var(--bt-ink) !important;
}

[data-bs-theme=dark] .table {
  --falcon-table-color: var(--bt-muted);
  --falcon-table-striped-color: var(--bt-muted);
  --falcon-table-active-color: var(--bt-white);
  --falcon-table-hover-color: var(--bt-white);
}

/*
 * Custom properties inherit through the DOM regardless of an element's own
 * data-bs-theme attribute -- a light-scoped "island" nested inside a table
 * that lives under the dark root (e.g. the display-board pages' bg-white
 * cells) still inherits --falcon-table-color from the dark override above,
 * turning its text an unreadable grey-on-white. Redeclare Falcon's own
 * light-mode default here so it wins for anything under a light island.
 */
[data-bs-theme=light] {
  --falcon-table-color: #5e6e82;
  --falcon-table-striped-color: #5e6e82;
}

/* ---- Auth pages (login / magic-link) ---- */
.bt-auth-theme {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 78% 0%, rgba(255, 221, 110, .16), transparent 20rem),
    radial-gradient(ellipse at 96% 12%, rgba(255, 255, 255, .08), transparent 15rem),
    linear-gradient(#111, #181818 58%, #0b0b0b);
}
.bt-auth-theme .bg-auth-circle-shape,
.bt-auth-theme .bg-auth-circle-shape-2,
.bt-auth-theme .bg-auth-card-shape {
  display: none;
}
.bt-auth-theme .card {
  border: 1px solid var(--bt-line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.bt-auth-theme .bg-card-gradient {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #1c1c1c, #0e0e0e) !important;
  border-right: 1px solid var(--bt-line);
  border-top: 4px solid var(--bt-red);
}
.bt-auth-theme .bg-card-gradient::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -60px;
  width: 260px;
  height: 140px;
  opacity: .5;
  background:
    linear-gradient(155deg, transparent 42%, var(--bt-red) 43% 45%, transparent 46%),
    linear-gradient(25deg, transparent 55%, var(--bt-yellow) 56% 57%, transparent 58%);
  pointer-events: none;
}
.bt-auth-theme .bg-card-gradient a.link-light {
  color: var(--bt-yellow) !important;
  font-family: var(--bt-font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bt-auth-theme .bg-card-gradient a.link-light img { filter: none; }
.bt-auth-theme .bg-card-gradient p { color: var(--bt-muted) !important; font-size: 12px; line-height: 1.6; }
.bt-auth-theme .bg-card-gradient a:not(.link-light) { color: var(--bt-yellow) !important; }
.bt-auth-theme .bt-eyebrow {
  margin: 0 0 6px;
  color: var(--bt-yellow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--bt-font-body);
}
.bt-auth-theme h3 {
  font-size: 40px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bt-white);
}
.bt-auth-theme .form-control {
  border: 1px solid #465158;
  background: #080c0e;
  color: var(--bt-white);
}
.bt-auth-theme .form-control:focus { background: #080c0e; color: var(--bt-white); }
.bt-auth-theme .col-md-7 p.text-center { color: var(--bt-muted); }

/* CSR notes rendered inside a compact panel (the Accounting queue's
   per-row Details dropdown). Notes are authored in TinyMCE, so they
   arrive wrapped in <p> tags carrying the default body margin - which
   reads as stray blank space in a dense two-line cell. Only the trailing
   margin is dropped, so multi-paragraph notes still separate. */
.jo-csr-note > *:last-child {
  margin-bottom: 0;
}

.jo-csr-note p {
  margin-bottom: 0.25rem;
}