/*
 * theme-vars.css  ·  CSS variable integration for public frontend
 * theme-vars-pass  ·  2026-05-05
 *
 * PURPOSE:
 *   Wires the CSS custom properties injected by header.php (from Admin →
 *   Settings → Branding & Content) into the public theme components that
 *   previously used hardcoded colours.
 *
 * LOAD ORDER (set in header.php):
 *   1. bootstrap.min.css
 *   2. style-*.css  (theme — hardcoded colours, dark-mode .xxx rules)
 *   3. theme-vars.css  ← THIS FILE
 *   4. market-ui.css   (market / signals UI; --site-primary already wired)
 *   5. <style>:root{...}</style>  (injected CSS var values from branding DB)
 *
 * SPECIFICITY STRATEGY:
 *   Selectors match the style-*.css originals so same-specificity rules are
 *   resolved by load order (this file loads after the theme CSS → wins).
 *   Dark-mode overrides in style-*.css use ".dark-mode .xxx" (specificity 20+)
 *   which always beats our single-class rules (specificity 10) → dark mode
 *   stays intact WITHOUT needing extra overrides here.
 *
 * INTENTIONALLY EXCLUDED:
 *   - .ticker-bottom   (must stay yellow/gold — overrides in market-ui.css)
 *   - body colour      (--site-text too risky to apply globally)
 *   - admin panel CSS  (admin uses separate AdminLTE styles)
 *   - BTC/ETH colours  (intentionally hardcoded in market-ui.css)
 *
 * FALLBACKS:
 *   Every var() uses the original style-yellow.css value as fallback so the
 *   file is a no-op when no branding preset has been saved.
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   A. HEADER / PREHEADER / NAVBAR BACKGROUND
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Top utility bar (dom/fiat stats) */
.preheader {
  background-color: var(--site-header-bg, #18191a);
}

/* Main navigation bar */
.header {
  background-color: var(--site-header-bg, #18191a);
}

/* Navbar link hover accent — only affects hover state;
   .navbar-nav a { color:#fff } in style-*.css (specificity 0,2,1)
   keeps base nav link colour white on dark headers */
.navbar-nav a:hover,
.navbar-nav .nav-link:hover {
  color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   B. FOOTER BACKGROUND
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NOTE: .ticker-bottom is intentionally NOT touched here.
         It remains yellow/gold via market-ui.css !important rules.        */

.footer {
  background-color: var(--site-footer-bg, #18191a);
}

/* Footer link hover accent (base colour stays #fff from style-*.css) */
.footer a:hover {
  color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   C. GENERAL LINK ACCENT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Specificity (0,0,1) — lower than .footer a (0,1,1), .navbar-nav a (0,2,1),
   .mkt-footer-section-title a !important, etc., so those stay unaffected.  */

a {
  color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   D. BUTTONS — .btn-warning is the theme's primary action button
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn-warning {
  background-color: var(--site-btn, #ffc107);
  border-color:     var(--site-btn, #ffc107);
}

/* Hover / focus: use btn-hover variable; ensure readable text */
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--site-btn-hover, #18191a);
  border-color:     var(--site-btn-hover, #18191a);
  color: #fff;
}

/* .btn-dark hover uses accent as highlight colour */
.btn-dark:hover {
  background-color: var(--site-accent, #ffc107);
  border-color:     var(--site-accent, #ffc107);
}

/* btn-outline-info (hero secondary button) hover */
.btn-outline-info:hover {
  background-color: var(--site-accent, #ffc107);
  border-color:     var(--site-accent, #fff);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   E. PAGE-TITLE BANNER AND CTA BOX
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-title {
  background-color: var(--site-accent, #ffc107);
}

.cta-box {
  background-color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   F. MOBILE NAVBAR TOGGLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.navbar-toggler {
  background-color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   G. PAGINATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   .page-item.active .page-link specificity in style-yellow.css: (0,2,1)
   Matching that specificity here so load order decides.                  */

.page-item.active .page-link {
  background-color: var(--site-btn, #ffc107);
  border-color:     var(--site-btn, #ffc107);
}

/* (0,1,0) — same as style-yellow.css .page-link */
.page-link {
  color: var(--site-accent, #ffc107);
}

/* (0,1,1) — matches style-yellow.css .page-link:hover */
.page-link:hover {
  background-color: var(--site-btn-hover, #18191a);
  border-color:     var(--site-btn, #ffc107);
  color:            var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   H. DATATABLES PROCESSING INDICATOR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   style-yellow.css: div.dataTables_wrapper div.dataTables_processing
   specificity (0,2,0) — same here.                                       */

div.dataTables_wrapper div.dataTables_processing {
  background-color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   I. DATATABLE INLINE EXPAND/COLLAPSE BUTTON
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Original rule uses !important; we must match to override.              */

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
  background-color: var(--site-btn, #ffc107) !important;
  color: #fff !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   J. SOCIAL ICONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   .social.light a specificity (0,2,1) — same here.                       */

.social.light a {
  color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   K. PREHEADER TEXT ACCENT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.text-top-small {
  color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   L. BADGES (footer coin badges, search results)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Note: .dark-mode .badge-warning in market-ui.css uses !important and
   will correctly override this in dark mode.                             */

.badge-secondary,
.badge-warning {
  background-color: var(--site-accent, #ffc107);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   M. COOKIE CONSENT BUTTON
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Original .cc-btn in style-yellow.css uses !important; match it.       */

.cc-btn {
  background-color: var(--site-btn, #ffc107) !important;
  border-color:     var(--site-btn, #ffc107) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   N. FORM FOCUS STATE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Overrides Bootstrap's default blue focus ring.
   box-shadow deliberately omitted (rgba(CSS-var) unsafe cross-browser). */

.form-control:focus {
  border-color: var(--site-accent, #ffc107);
  outline: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   O. BG-WARNING HELPER (used in top-stats area)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Original uses !important; match it.                                    */

.bg-warning {
  background-color: var(--site-accent, #ffc107) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DARK MODE — preserve readability
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   style-yellow.css uses ".dark-mode .xxx" (specificity ≥ 20) which already
   beats our single-class rules (specificity ≤ 21) for MOST elements, so
   dark mode stays intact automatically.

   The exceptions below are elements where dark mode needs an explicit
   override because our !important rules above would otherwise win.      */

/* bg-warning !important fix in dark mode */
.dark-mode .bg-warning {
  background-color: #18191a !important;
  color: #fff !important;
}

/* cc-btn !important fix in dark mode */
.dark-mode .cc-btn {
  background-color: #121212 !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* datatable expand button in dark mode — keep high-contrast dark */
.dark-mode table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
  background-color: #18191a !important;
  color: #fff !important;
}

/* page-title and cta-box in dark mode */
.dark-mode .page-title {
  background-color: #18191a;
  color: #fff;
}

.dark-mode .cta-box {
  background-color: #18191a;
}

/* badge-warning in dark mode — market-ui.css already handles this with
   !important but include here for completeness */
.dark-mode .badge-warning {
  background-color: #2d3038;
  color: #aaa;
}