/*
 * ============================================================
 *  TROYEN DATA — DEFAULT THEME (Light Green)
 *  theme-default.css
 *
 *  HOW THEMES WORK
 *  ─────────────────────────────────────────────────────────
 *  1. This file declares every design token the project uses.
 *  2. app.css references these tokens with var(--*). It never
 *     contains a raw hex color.
 *  3. To create a new theme (e.g. "dark-blue"), copy this file,
 *     rename it (theme-dark-blue.css) and change the values
 *     inside :root {}. Load that file instead of this one.
 *  4. Dark mode is handled separately: a [data-theme="dark"]
 *     block in the same file (or a companion file) overrides
 *     the tokens below.
 *
 *  TOKEN GROUPS
 *  ─────────────────────────────────────────────────────────
 *  A. Typography
 *  B. Brand / Primary palette
 *  C. Backgrounds
 *  D. Text
 *  E. Borders
 *  F. Semantic states  (success · warning · error · info)
 *  G. Alerts           (bg · border · text per state)
 *  H. Badges / Status chips
 *  I. Focus ring
 *  J. Navigation bar
 *  K. API status indicators
 *  L. Charts           (9 series + grid/label/tooltip)
 *  M. Shadows
 *  N. Scrollbar
 *  O. Accent palette   (icons, chart dots, KPI colours)
 *  P. Control sizing   (heights, radii — not colors)
 *  Q. Legacy --clr-* aliases  ← keep until full migration
 * ============================================================
 */

:root {

  /* ── A. Typography ──────────────────────────────────────── */
  --font-admin:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;


  /* ── B. Brand / Primary palette ────────────────────────── */

  /* The main interactive colour used for buttons, links, active states */
  --primary-gradient: linear-gradient(90deg, #1e5c0e 0%, #79c01a 100%);
  --primary-dark:     #1e5c0e;   /* gradient start / hover darkening */
  --primary:          #4f9a14;   /* solid primary — focus borders, icons */
  --primary-light:    #79c01a;   /* gradient end / lighter accent */


  /* ── C. Backgrounds ─────────────────────────────────────── */

  --background:    #f7fbf2;   /* page / body background */
  --surface:       #ffffff;   /* cards, panels, dropdowns */
  --surface-soft:  #edf7e6;   /* table headers, input fills, hover rows */
  --surface-hover: #e3f3d8;   /* stronger hover — row / item highlight */
  --surface-overlay: rgba(255,255,255,0.70); /* loading overlays */


  /* ── D. Text ────────────────────────────────────────────── */

  --text-main:    #17330f;   /* primary body text */
  --text-muted:   #5f7558;   /* labels, captions, secondary info */
  --text-inverse: #ffffff;   /* text placed on dark/coloured backgrounds */
  --text-heading: #17330f;   /* headings (h1–h6) */
  --text-link:    #4f9a14;   /* anchor link colour */
  --text-code:    #4f9a14;   /* <code> / monospace accent */
  --text-placeholder: #8aa880; /* input placeholder */


  /* ── E. Borders ─────────────────────────────────────────── */

  --border:        #cfe5c2;   /* default border for inputs, cards, tables */
  --border-strong: #9dcc87;   /* emphasized border — table header bottom, dividers */
  --border-focus:  #4f9a14;   /* input focus outline */


  /* ── F. Semantic states ─────────────────────────────────── */

  --success: #3f8f19;   /* positive / complete */
  --warning: #c98500;   /* caution / pending */
  --error:   #b83232;   /* failure / danger */
  --info:    #4f9a14;   /* informational — reuses primary */


  /* ── G. Alerts  (bg · border · text for each state) ─────── */

  --alert-success-bg:     rgba(63,143,25,  0.10);
  --alert-success-border: #9dcc87;
  --alert-success-text:   #2a6010;

  --alert-warning-bg:     rgba(201,133,0,  0.10);
  --alert-warning-border: #d6a21f;
  --alert-warning-text:   #7a4d00;

  --alert-error-bg:       rgba(184,50,50,  0.10);
  --alert-error-border:   #d17070;
  --alert-error-text:     #7a1a1a;

  --alert-info-bg:        rgba(79,154,20,  0.10);
  --alert-info-border:    #9dcc87;
  --alert-info-text:      #2a6010;


  /* ── H. Badges / Status chips ───────────────────────────── */

  --badge-success-bg:   rgba(63,143,25,  0.12);
  --badge-success-text: #2a6010;

  --badge-warning-bg:   rgba(201,133,0,  0.12);
  --badge-warning-text: #7a4d00;

  --badge-error-bg:     rgba(184,50,50,  0.12);
  --badge-error-text:   #7a1a1a;

  --badge-neutral-bg:   rgba(95,117,88,  0.10);
  --badge-neutral-text: #5f7558;


  /* ── I. Focus ring ──────────────────────────────────────── */

  --focus-ring: rgba(121,192,26, 0.35);


  /* ── J. Navigation bar ──────────────────────────────────── */

  --nav-top-bg:          var(--primary-gradient);  /* top header bar */
  --nav-bottom-bg:       var(--surface);           /* horizontal menu bar */
  --nav-bottom-border:   var(--border);            /* menu bar bottom line */
  --nav-text:            var(--text-main);         /* menu link text */
  --nav-text-active:     var(--primary-light);     /* active / hovered link */
  --nav-text-inverse:    var(--text-inverse);      /* text on coloured header */
  --nav-separator:       rgba(255,255,255,0.30);   /* dividers in header bar */

  /* Nav-bar icon buttons (theme toggle, user avatar pill) */
  --nav-btn-bg:          rgba(0,0,0, 0.18);
  --nav-btn-border:      rgba(0,0,0, 0.22);
  --nav-btn-text:        #ffffff;
  --nav-btn-hover-bg:    rgba(0,0,0, 0.28);

  /* Log dropdown (in header) */
  --nav-log-bg:          var(--surface);
  --nav-log-border:      var(--border);
  --nav-log-hover-bg:    var(--surface-soft);
  --nav-log-timestamp:   var(--text-muted);
  --nav-log-source:      var(--text-main);


  /* ── K. API status indicators ───────────────────────────── */

  --status-live-color:     #c98500;                  /* pending / checking */
  --status-live-glow:      rgba(201,133,0,   0.35);
  --status-ok-color:       #3f8f19;                  /* healthy */
  --status-ok-glow:        rgba(63,143,25,   0.35);
  --status-error-color:    #b83232;                  /* down */
  --status-error-glow:     rgba(184,50,50,   0.35);
  --status-checking-color: #c98500;                  /* polling */


  /* ── L. Charts (9 series + chrome) ─────────────────────── */

  /* Swap these to match any theme's accent palette */
  --chart-1:  #4f9a14;    /* primary green */
  --chart-2:  #79c01a;    /* light green */
  --chart-3:  #c98500;    /* amber */
  --chart-4:  #b83232;    /* red */
  --chart-5:  #6366f1;    /* indigo */
  --chart-6:  #8b5cf6;    /* purple */
  --chart-7:  #14b8a6;    /* teal */
  --chart-8:  #f97316;    /* orange */
  --chart-9:  #5f7558;    /* slate */

  --chart-grid-color:   rgba(0,0,0, 0.06);
  --chart-tick-color:   #5f7558;
  --chart-tooltip-bg:   #17330f;
  --chart-legend-text:  #5f7558;


  /* ── M. Shadows ─────────────────────────────────────────── */

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.09), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-modal: 0 20px 40px rgba(0,0,0,.15);


  /* ── N. Scrollbar ───────────────────────────────────────── */

  --scrollbar-track:       var(--surface-soft);
  --scrollbar-thumb:       var(--border-strong);
  --scrollbar-thumb-hover: var(--primary);


  /* ── O. Accent palette (KPI icons, chart dots) ──────────── */

  --accent-gold:    #d6a21f;   /* gold highlights */
  --accent-lime:    #b7e85a;   /* bright lime */
  --accent-forest:  #124008;   /* deep forest */
  --accent-indigo:  #6366f1;   /* indigo — chart / KPI only */
  --accent-purple:  #8b5cf6;   /* purple — chart / KPI only */
  --accent-teal:    #14b8a6;   /* teal — chart / KPI only */
  --accent-orange:  #f97316;   /* orange — chart / KPI only */
  --accent-amber:   #c98500;   /* amber — same as warning */
  --accent-red:     #b83232;   /* red — same as error */
  --accent-slate:   #5f7558;   /* slate — same as text-muted */


  /* ── P. Control sizing (no color) ──────────────────────── */

  --ctrl-height:      32px;
  --ctrl-height-sm:   26px;
  --ctrl-height-lg:   38px;
  --ctrl-padding:     0.3rem 0.7rem;
  --ctrl-padding-sm:  0.15rem 0.5rem;
  --ctrl-padding-lg:  0.45rem 1rem;
  --ctrl-radius:      0;         /* sharp corners — set to 4px for rounded */


  /* ── Q. Legacy --clr-* aliases (keep until full migration) ─
     These let existing component CSS keep working while the project
     migrates to the new --color-* naming above.
     ────────────────────────────────────────────────────────── */
  --clr-gradient:       var(--primary-gradient);
  --clr-primary-dark:   var(--primary-dark);
  --clr-primary:        var(--primary);
  --clr-primary-light:  var(--primary-light);
  --clr-accent:         var(--primary);
  --clr-accent-dark:    var(--primary-dark);

  --clr-bg:             var(--background);
  --clr-surface:        var(--surface);
  --clr-surface-soft:   var(--surface-soft);
  --clr-bg-subtle:      var(--surface-soft);

  --clr-text:           var(--text-main);
  --clr-text-muted:     var(--text-muted);
  --clr-heading:        var(--text-heading);

  --clr-border:         var(--border);
  --clr-border-dark:    var(--border-strong);

  --clr-accent-lime:    var(--accent-lime);
  --clr-accent-forest:  var(--accent-forest);
  --clr-accent-gold:    var(--accent-gold);

  --clr-focus:          var(--border-focus);
  --clr-focus-ring:     var(--focus-ring);

  --clr-success:        var(--success);
  --clr-warning:        var(--warning);
  --clr-error:          var(--error);

  --text-inverse:       #ffffff;
  --focus-ring:         rgba(121,192,26, 0.35);
  --border-strong:      #9dcc87;

  --bs-primary:         var(--primary);
  --bs-primary-rgb:     79, 154, 20;

  /* font aliases (existing component code uses --admin-font) */
  --admin-font:   var(--font-admin);
  --admin-mono:   var(--font-mono);
}


/* ============================================================
   DARK MODE OVERRIDE BLOCK
   Copy this block into every theme file you create.
   Only the values that differ from the light theme are listed.
   ============================================================ */
html[data-theme="dark"] {

  /* B. Brand — keep gradient but invert brightness is fine */
  --primary:          #79c01a;
  --primary-light:    #b7e85a;

  /* C. Backgrounds */
  --background:    #0f140d;
  --surface:       #151c12;
  --surface-soft:  #1c2518;
  --surface-hover: #1f2b1a;
  --surface-overlay: rgba(15,20,13,0.80);

  /* D. Text */
  --text-main:     #f3f8ee;
  --text-muted:    #a7b39d;
  --text-inverse:  #0f140d;
  --text-heading:  #f3f8ee;
  --text-link:     #b7e85a;
  --text-code:     #b7e85a;
  --text-placeholder: #5f7558;

  /* E. Borders */
  --border:        #2a3525;
  --border-strong: #415438;
  --border-focus:  #79c01a;

  /* F. Semantic states */
  --success: #58b52d;
  --warning: #d38a00;
  --error:   #d14a4a;

  /* G. Alerts */
  --alert-success-bg:     rgba(88,181,45,   0.12);
  --alert-success-border: #415438;
  --alert-success-text:   #a3d97a;

  --alert-warning-bg:     rgba(211,138,0,   0.12);
  --alert-warning-border: #6b4500;
  --alert-warning-text:   #fbd97a;

  --alert-error-bg:       rgba(209,74,74,   0.12);
  --alert-error-border:   #6b1a1a;
  --alert-error-text:     #f5a0a0;

  --alert-info-bg:        rgba(88,181,45,   0.12);
  --alert-info-border:    #415438;
  --alert-info-text:      #a3d97a;

  /* H. Badges */
  --badge-success-bg:   rgba(88,181,45,   0.14);
  --badge-success-text: #a3d97a;

  --badge-warning-bg:   rgba(211,138,0,   0.14);
  --badge-warning-text: #fbd97a;

  --badge-error-bg:     rgba(209,74,74,   0.14);
  --badge-error-text:   #f5a0a0;

  --badge-neutral-bg:   rgba(167,179,157, 0.12);
  --badge-neutral-text: #a7b39d;

  /* I. Focus ring */
  --focus-ring: rgba(183,232,90, 0.35);

  /* J. Navigation */
  --nav-bottom-bg:     var(--surface);
  --nav-bottom-border: var(--border);
  --nav-text:          var(--text-main);
  --nav-log-bg:        var(--surface);
  --nav-log-border:    var(--border);
  --nav-log-hover-bg:  var(--surface-soft);

  /* L. Charts */
  --chart-grid-color:   rgba(255,255,255, 0.06);
  --chart-tick-color:   #a7b39d;
  --chart-tooltip-bg:   #1c2518;
  --chart-legend-text:  #a7b39d;

  /* M. Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -1px rgba(0,0,0,.20);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.40), 0 4px 6px -2px rgba(0,0,0,.20);
  --shadow-modal: 0 20px 40px rgba(0,0,0,.55);

  /* N. Scrollbar */
  --scrollbar-track:       var(--surface-soft);
  --scrollbar-thumb:       #415438;
  --scrollbar-thumb-hover: var(--primary);

  color-scheme: dark;
}


/* ============================================================
   FILTER MANAGER
   Filter bar layout, toggle buttons, Select2 sizing.
   Previously: common/filter-manager.css
   ============================================================ */

.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    padding: 8px;
    width: 100%;
}

.filter-item {
    display: flex;
    flex-direction: column;
    min-width: 170px;
}

.filter-item label {
    margin-bottom: 3px;
    font-weight: 500;
    font-size: 12px;
    color: var(--clr-text-muted, #5f7558);
    white-space: nowrap;
}

.filter-item select,
.filter-item input {
    height: var(--ctrl-height, 32px);
    padding: 0 0.6rem;
    border: 1px solid var(--clr-border, #cfe5c2);
    border-radius: 0;
    font-size: var(--fs-base, 13px);
    font-family: var(--admin-font, 'Inter', sans-serif);
    color: var(--clr-text, #17330f);
    background-color: var(--clr-surface, #fff);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-item select:focus,
.filter-item input:focus {
    border-color: var(--clr-focus, #4f9a14);
    box-shadow: 0 0 0 3px var(--clr-focus-ring, rgba(79,154,20,0.20));
    outline: none;
}

.filter-item .toggle-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding-left: 0;
    height: 100%;
}

.filter-item .toggle-container label {
    margin-bottom: 3px;
    font-weight: 500;
    font-size: 12px;
    color: var(--clr-text-muted, #5f7558);
    display: block;
    width: 100%;
    text-align: left;
}

.filter-item .toggle-button {
    background-color: var(--clr-bg-subtle, #edf7e6);
    color: var(--clr-text-muted, #5f7558);
    border: 1px solid var(--clr-border, #cfe5c2);
    border-radius: 0;
    padding: 0 10px;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-admin, 'Inter', sans-serif);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 32px;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.filter-item .toggle-button i {
    margin-right: 4px;
    font-size: 11px;
}

.filter-item .toggle-button.active {
    background: var(--primary-gradient, linear-gradient(90deg, #1e5c0e 0%, #79c01a 100%));
    color: var(--text-inverse, #ffffff);
    border-color: transparent;
    box-shadow: 0 1px 3px var(--focus-ring, rgba(121,192,26,0.35));
}

.filter-item .toggle-button:hover:not(.active) {
    background-color: var(--clr-border, #cfe5c2);
    border-color: var(--clr-border-dark, #9dcc87);
}

.filter-item .toggle-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.filter-item .toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.date-range-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.date-range-container input {
    width: 128px;
}

.filter-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-buttons button,
.filter-buttons .btn {
    height: var(--ctrl-height, 32px);
    padding: 0 0.75rem;
    font-size: var(--fs-base, 13px);
    font-family: var(--admin-font, 'Inter', sans-serif);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    line-height: 1;
}

.filter-buttons .btn-sm {
    height: var(--ctrl-height-sm, 26px);
    padding: 0 0.5rem;
    font-size: var(--fs-sm, 12px);
}

.control-button {
    height: var(--ctrl-height, 32px);
    box-sizing: border-box;
}

.row .filter-container { padding: 0; }

.col-md-3 .filter-item,
.col-md-4 .filter-item,
.col-md-6 .filter-item { width: 100%; }

/* Select2 — matched to 32px input standard */
.filter-item .select2-container {
    width: 100% !important;
    height: 32px !important;
}

.standard-select .select2-selection {
    border-radius: 0;
    border: 1px solid var(--clr-border, #cfe5c2) !important;
    height: 32px !important;
}

.standard-select .select2-selection__rendered {
    line-height: 30px !important;
    padding-left: 8px !important;
    font-size: 13px !important;
    color: var(--clr-text, #17330f) !important;
}

.standard-select .select2-selection__arrow { height: 30px !important; }
.standard-select .select2-selection__clear { display: none !important; }

.select2-container--default .select2-selection--single {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--clr-border, #cfe5c2);
    border-radius: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    padding-left: 0;
    font-size: 13px;
    color: var(--clr-text, #17330f);
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; }

.select-dropdown-standard.select2-dropdown {
    border: 1px solid var(--clr-border, #cfe5c2);
    border-radius: 0;
    font-size: 13px;
}

.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-search--dropdown .select2-search__field {
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid var(--clr-border, #cfe5c2);
    border-radius: 0;
}

.select2-results__option {
    font-size: 13px;
    padding: 5px 10px;
}

@media (max-width: 768px) {
    .filter-item { width: 100%; }
    .filter-buttons { width: 100%; margin-top: 12px; }
}


/* ============================================================
   API STATUS INDICATOR
   Dropdown in the nav header showing service health.
   Previously: api-status.css
   ============================================================ */

.api-status-dropdown-container {
    position: relative;
}

.api-status-toggle {
    padding: 0.375rem 0.75rem;
    vertical-align: middle;
}

.api-status-toggle #apiStatusIndicator {
    font-weight: 600;
    padding: 0.35em 0.65em;
    vertical-align: baseline;
    margin-left: 0.3rem !important;
    text-align: center;
    display: inline-block;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#apiStatusIndicator.bg-warning { color: var(--badge-warning-text); }
#apiStatusIndicator.bg-success { color: var(--text-inverse); }
#apiStatusIndicator.bg-danger  { color: var(--text-inverse); }

.api-status-dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
    min-width: 260px;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
    padding-top: 0;
    margin-top: 0.125rem;
    position: absolute;
    left: 0;
    z-index: 1000;
}

.api-status-dropdown-container:hover .api-status-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.api-status-dropdown-menu .dropdown-header {
    font-size: 0.9rem;
    font-weight: 600;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: var(--surface-soft);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

.api-status-dropdown-menu .dropdown-divider {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.api-status-dropdown-menu .dropdown-item-text {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease-in-out;
}

.api-status-dropdown-menu .dropdown-item-text:hover {
    background-color: var(--surface-soft);
}

.api-status-dropdown-menu .dropdown-item-text i {
    margin-right: 0.5rem;
    width: 16px;
    text-align: center;
}

.api-status-dropdown-menu .status-icon-up       { color: var(--status-ok-color); }
.api-status-dropdown-menu .status-icon-down     { color: var(--status-error-color); }
.api-status-dropdown-menu .status-icon-checking { color: var(--status-checking-color); }
.api-status-dropdown-menu .status-icon-error    { color: var(--status-error-color); }

.api-status-dropdown-menu .ping-time {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-left: auto;
    padding-left: 0.5rem;
}

.api-status-dropdown-menu .error-message {
    font-size: 0.8em;
    color: var(--status-error-color);
    margin-left: auto;
    padding-left: 0.5rem;
    font-style: italic;
}


/* ============================================================
   JOCKEY SILKS V2
   Tab bar, race summary panel, stats strip, service badges.
   Previously: silkv2.css
   ============================================================ */

#tabLayout .tab-solid {
    border-bottom: 2px solid var(--clr-accent);
    margin-bottom: 12px;
}
#tabLayout .tab-solid .nav-item .nav-link {
    padding: 5px 16px;
    border: 1px solid var(--clr-border-dark);
    border-bottom: none;
    border-radius: 0;
    background: var(--clr-bg-subtle);
    color: var(--clr-text);
    font-weight: 500;
    margin-right: 3px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
#tabLayout .tab-solid .nav-item .nav-link:hover:not(.active) {
    background: var(--clr-border);
    color: var(--clr-heading);
    border-color: var(--clr-border-dark);
}
#tabLayout .tab-solid .nav-item .nav-link.active {
    background: var(--clr-accent) !important;
    color: var(--text-inverse) !important;
    border-color: var(--clr-accent);
    font-weight: 600;
    position: relative;
    bottom: -1px;
}

#raceSummaryPanel .card { overflow: hidden; }

.race-headline {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--clr-border);
    flex-wrap: wrap;
}
.race-headline .race-name {
    font-size: 0.95rem; font-weight: 700; color: var(--clr-heading); flex: 1;
}
.race-number-pill {
    background: var(--clr-accent); color: var(--text-inverse); border-radius: 0;
    padding: 2px 10px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.trial-pill {
    background: var(--accent-gold); color: var(--text-inverse); border-radius: 0;
    padding: 2px 8px; font-size: 0.75rem; font-weight: 600;
}

.key-stats {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--clr-border);
}
.stat-block {
    flex: 1; padding: 6px 12px; border-right: 1px solid var(--clr-border);
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.stat-block:last-child { border-right: none; }
.stat-block .stat-label {
    font-size: 0.65rem; font-weight: 700; color: var(--clr-text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
}
.stat-block .stat-value {
    font-size: 0.85rem; font-weight: 700; color: var(--clr-heading);
}
.stat-block .stat-icon {
    font-size: 0.75rem; color: var(--clr-accent); margin-bottom: 1px;
}
.stat-block .stat-value.summary-weather { font-size: 0.75rem; }

.detail-row {
    display: flex; gap: 0; flex-wrap: wrap; padding: 0;
}
.detail-group {
    flex: 1; min-width: 180px; padding: 6px 12px;
    border-right: 1px solid var(--clr-border);
}
.detail-group:last-child { border-right: none; }
.detail-group .group-title {
    font-size: 0.65rem; font-weight: 700; color: var(--clr-accent);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
}
.detail-item {
    display: flex; align-items: baseline; gap: 5px;
    font-size: 0.78rem; margin-bottom: 2px; line-height: 1.4;
}
.detail-item .dl { color: var(--clr-text-muted); white-space: nowrap; min-width: 70px; }
.detail-item .dv { color: var(--clr-text); font-weight: 500; }

.svc-badge {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 0; padding: 2px 7px; font-size: 0.72rem; font-weight: 600;
    border: 1px solid transparent;
}
.svc-ok   { background: var(--badge-success-bg); color: var(--success);  border-color: var(--border-strong); }
.svc-fail { background: var(--badge-error-bg);  color: var(--error);    border-color: var(--alert-error-border); }

/* DataTable column alignment */
table.dataTable thead th { text-align: center; }
table.dataTable tbody td { text-align: left; }
table.dataTable tbody td:nth-child(1) { text-align: center !important; }
table.dataTable tbody td:nth-child(2) { text-align: center !important; }
table.dataTable tbody td:nth-child(6),
table.dataTable tbody td:nth-child(7),
table.dataTable tbody td:nth-child(8),
table.dataTable tbody td:nth-child(9),
table.dataTable tbody td:nth-child(12) { text-align: right; }


/* ============================================================
   BASE STYLES & COMPONENTS
   Typography, forms, buttons, tables, cards, nav, DataTables.
   Previously: app.css
   ============================================================ */

/* ── Base typography ── */
body {
    font-family: var(--admin-font);
    font-size: var(--fs-base);
    line-height: 1.5;
    background-color: var(--background);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--admin-font);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    color: var(--clr-heading);
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: 17px; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

p { font-size: var(--fs-base); margin-bottom: 0.75rem; }
small, .small { font-size: var(--fs-sm); }

a { font-size: inherit; color: var(--primary); }
a:hover { color: var(--primary-dark); }

input, textarea, select {
    background: var(--surface);
    color: var(--text-main);
    border: 1px solid var(--border);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
code, pre, kbd, .monospace { font-family: var(--admin-mono); font-size: 12px; }

/* ── Form controls ── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="url"],
input[type="tel"],
select {
    font-family: var(--admin-font);
    font-size: var(--fs-base);
    height: var(--ctrl-height);
    padding: var(--ctrl-padding);
    border: 1px solid var(--clr-border);
    border-radius: var(--ctrl-radius);
    color: var(--clr-text);
    background-color: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.4;
    box-sizing: border-box;
}

textarea, textarea.form-control {
    font-family: var(--admin-font);
    font-size: var(--fs-base);
    height: auto;
    min-height: 72px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--clr-border);
    border-radius: var(--ctrl-radius);
    color: var(--clr-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: vertical;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--clr-focus);
    box-shadow: 0 0 0 3px var(--clr-focus-ring);
    outline: none;
}

.form-control-sm, .form-select-sm { font-size: var(--fs-sm); height: var(--ctrl-height-sm); padding: var(--ctrl-padding-sm); }
.form-control-lg, .form-select-lg { font-size: var(--fs-md); height: var(--ctrl-height-lg); padding: var(--ctrl-padding-lg); }

.form-label, label {
    font-family: var(--admin-font);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 3px;
    display: inline-block;
}

.form-text { font-size: var(--fs-xs); color: var(--clr-text-muted); }

.input-group-text {
    font-family: var(--admin-font);
    font-size: var(--fs-base);
    height: var(--ctrl-height);
    padding: var(--ctrl-padding);
    border-color: var(--clr-border);
    background-color: var(--clr-bg-subtle);
    color: var(--clr-text-muted);
}

/* ── Buttons ── */
.btn {
    font-family: var(--admin-font);
    font-size: var(--fs-base);
    font-weight: 500;
    height: var(--ctrl-height);
    padding: var(--ctrl-padding);
    line-height: 1;
    border-radius: var(--ctrl-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.btn-sm { font-size: var(--fs-sm); height: var(--ctrl-height-sm); padding: var(--ctrl-padding-sm); border-radius: 0; }
.btn-lg { font-size: var(--fs-md); height: var(--ctrl-height-lg); padding: var(--ctrl-padding-lg); border-radius: 0; }

.btn-primary { background: var(--primary-gradient); border-color: transparent; color: var(--text-inverse); }
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--primary-gradient); border-color: transparent;
    color: var(--text-inverse); filter: brightness(0.88);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn-primary:active { background: var(--primary-gradient); border-color: transparent; color: var(--text-inverse); filter: brightness(0.78); }
.btn-primary:disabled, .btn-primary.disabled { background: var(--primary-gradient); border-color: transparent; opacity: 0.5; }

.btn-outline-primary { color: var(--primary-light); border-color: var(--primary-light); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible {
    background: var(--primary-gradient); border-color: transparent; color: var(--text-inverse);
}

.btn-success { background: var(--primary-light); border-color: var(--primary-light); color: var(--text-inverse); }
.btn-success:hover { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }

/* ── Tables ── */
.table { font-family: var(--admin-font); font-size: var(--fs-base); color: var(--clr-text); }

.table th {
    font-family: var(--admin-font);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.5rem !important;
    white-space: nowrap;
    background-color: var(--clr-bg-subtle);
    border-bottom: 2px solid var(--clr-border-dark) !important;
    vertical-align: bottom;
}

.table td {
    font-family: var(--admin-font);
    font-size: var(--fs-base);
    padding: 0.5rem !important;
    vertical-align: middle;
    border-color: var(--clr-border);
}

.table td select, .table td .form-select, .table td .form-select-sm,
.table td .form-control, .table td .form-control-sm,
.table td input[type="text"], .table td input[type="number"],
.table td input[type="time"], .table td input[type="date"] {
    height: 22px !important; padding: 1px 5px !important;
    font-size: var(--fs-sm) !important; min-width: 70px;
}

.table td .btn-sm { height: 22px !important; padding: 1px 5px !important; font-size: var(--fs-sm) !important; }

.badge-icon { width: 22px !important; height: 22px !important; border-radius: 0; font-size: 11px !important; }
table tbody [class^="bi bi-"] { font-size: 13px !important; }
.table .btn.btn-icons { width: 24px !important; height: 24px !important; }
.table-sm th { padding: 0.3rem 0.5rem; }
.table-sm td { padding: 0.2rem 0.5rem; }

/* ── Cards ── */
.card { border: 1px solid var(--clr-border); border-radius: 0; box-shadow: var(--shadow-sm); }
.card-header { font-size: var(--fs-sm); font-weight: 600; background-color: var(--clr-bg-subtle); border-bottom: 1px solid var(--clr-border); padding: 0.6rem 1rem; }
.card-title { font-size: var(--fs-md); font-weight: 600; }
.card-body { padding: 1rem; }

/* ── Badges ── */
.badge { font-family: var(--admin-font); font-size: var(--fs-xs); font-weight: 500; padding: 0.25em 0.55em; letter-spacing: 0.02em; }

/* ── Dropdowns ── */
.dropdown-menu { font-family: var(--admin-font); font-size: var(--fs-base); }
.dropdown-item { font-size: var(--fs-base); padding: 0.35rem 0.9rem; }
.dropdown-header { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-text-muted); }

/* ── Modals ── */
.modal-title { font-size: var(--fs-md); font-weight: 600; }
.modal-body { font-size: var(--fs-base); }

/* ── Alerts ── */
.alert { font-size: var(--fs-base); padding: 0.6rem 1rem; border-radius: var(--ctrl-radius); }

/* ── Nav / Tabs ── */
.nav-link { font-size: var(--fs-base); font-weight: 500; }
.nav-tabs .nav-link { font-size: var(--fs-sm); }

.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link { color: var(--text-main); }
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-title {
    font-size: var(--fs-base); font-weight: 600; color: var(--text-main); letter-spacing: 0.01em;
}
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-arrow { color: var(--text-muted); }

.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover > .nav-link .menu-title,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.show-submenu > .nav-link .menu-title,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.active > .nav-link .menu-title { color: var(--primary-light); }

.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a {
    font-size: var(--fs-base); font-weight: 500; color: var(--text-main);
}
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a:hover,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li.active > a { color: var(--primary-light); }

/* ── Pagination ── */
.page-link { font-size: var(--fs-sm); padding: 0.3rem 0.6rem; }

/* ── Bootstrap blue → brand green overrides ── */
.text-primary { color: var(--clr-accent) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--clr-accent-dark) !important; }
.bg-primary { background-color: var(--clr-accent) !important; }
.border-primary { border-color: var(--clr-accent) !important; }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--clr-accent); color: var(--text-inverse); }
.tab-solid-primary .nav-link.active, .tab-solid-info .nav-link.active { background: var(--clr-accent); }

.page-item.active .page-link { background-color: var(--clr-accent); border-color: var(--clr-accent); }
.page-link { color: var(--clr-accent); }
.page-link:hover { color: var(--clr-accent-dark); }
.page-link:focus { box-shadow: 0 0 0 0.2rem var(--focus-ring); }

/* ── Utilities ── */
.cell-wrap-text { white-space: normal !important; max-width: 500px; word-break: break-word; overflow-wrap: break-word; }
.col-compact { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
.icon-container { display: flex; justify-content: center; align-items: center; height: 100%; }
.discipline-icon { height: 24px; object-fit: contain; }
.nowrap { white-space: nowrap; }

/* ── Loading overlay ── */
.page-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--surface-overlay);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
}
body.loading { overflow: hidden; }
body.loading > *:not(.page-overlay) { filter: blur(4px); }

/* ── DataTables ── */
.dataTables_wrapper .ui.dimmer { background-color: transparent; }
.dataTables_wrapper .ui.inverted.dimmer .ui.loader { color: rgba(0,0,0,0.8); }

table.dataTable { font-family: var(--admin-font); border: 1px solid var(--clr-border); border-collapse: collapse; }

table.dataTable thead th {
    font-family: var(--admin-font);
    background-color: var(--clr-surface-soft);
    color: var(--clr-text-muted);
    font-weight: 600; font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 2px solid var(--clr-border-dark) !important;
    border-right: 1px solid var(--clr-border) !important;
    padding: 10px 14px; white-space: nowrap; vertical-align: middle;
}
table.dataTable thead th:last-child { border-right: none !important; }
table.dataTable tbody tr { border-top: none !important; }

table.dataTable tbody td {
    font-family: var(--admin-font); font-size: var(--fs-base);
    padding: 10px 14px; border-top: none !important;
    border-bottom: 1px solid var(--clr-border);
    border-right: 1px solid var(--clr-border);
    vertical-align: middle; color: var(--clr-text);
}
table.dataTable tbody td:last-child { border-right: none; }
table.dataTable tbody tr:last-child td { border-bottom: none; }
table.dataTable tbody tr:nth-child(even) { background-color: var(--clr-surface-soft); }
table.dataTable tbody tr:hover { background-color: var(--clr-surface-soft); }

table.dataTable th.col-compact, table.dataTable td.col-compact { padding-left: 0.35rem; padding-right: 0.35rem; }
table.dataTable td.cell-wrap-text { white-space: normal; max-width: 500px; word-break: break-word; overflow-wrap: break-word; }

/* ── .v2-tbl ── */
.v2-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.v2-tbl thead th {
    background: var(--clr-surface-soft); padding: 10px 14px;
    font-size: var(--fs-xs); font-weight: 600; color: var(--clr-text-muted);
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 2px solid var(--clr-border-dark); border-right: 1px solid var(--clr-border);
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.v2-tbl thead th:last-child { border-right: none; }
.v2-tbl tbody td {
    padding: 10px 14px; color: var(--clr-text);
    border-bottom: 1px solid var(--clr-border); border-right: 1px solid var(--clr-border);
    vertical-align: middle;
}
.v2-tbl tbody td:last-child { border-right: none; }
.v2-tbl tbody tr:last-child td { border-bottom: none; }
.v2-tbl tbody tr:hover td { background: var(--clr-surface-soft); }

/* DataTable controls */
.dataTables_length label, .dataTables_filter label, .dataTables_info, .dataTables_paginate {
    font-family: var(--admin-font); font-size: var(--fs-sm); color: var(--clr-text-muted);
}
.dataTables_length select, .dataTables_filter input {
    font-family: var(--admin-font); font-size: var(--fs-sm);
    height: var(--ctrl-height-sm); padding: 0.15rem 0.5rem;
    border: 1px solid var(--clr-border); border-radius: 0;
}

#horseTable_wrapper { margin: 0 auto; overflow-x: auto; }
#horseTable { width: 100% !important; }

/* Child / expandable rows */
.child-table { width: 100%; margin: 0 !important; background-color: var(--surface-soft); }
.child-table td { border-top: none !important; font-size: var(--fs-sm); }
td.details-control { cursor: pointer; }
.race-id-cell { white-space: nowrap; }
.race-id-cell .input { width: 10%; }
.race-id-cell .action.input { display: flex; align-items: center; }
.race-id-cell .button { margin: 0 !important; height: 100%; }
tr.shown { background-color: var(--clr-surface-soft); }

/* .table-bordered double-border fix */
.table-bordered tbody tr:last-child td, .table-bordered tbody tr:last-child th { border-bottom: none; }
.table-bordered thead tr th:last-child, .table-bordered tbody tr td:last-child, .table-bordered tbody tr th:last-child { border-right: none; }

/* Logout button */
.logout-btn {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; padding: 0.3rem 0.9rem !important;
    gap: 6px !important; font-size: var(--fs-sm) !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    background-color: transparent !important; white-space: nowrap !important;
}
.logout-btn .button-content { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px; }
.logout-btn:hover { background-color: rgba(255,255,255,0.12) !important; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.15); }
.logout-btn .icon { margin: 0 !important; }

/* Log table */
#logTable { width: 100% !important; }
.table-wrapper { margin-top: 0.75rem; overflow-x: auto; }
#logTable td { word-break: break-word; }
#logTable th { white-space: nowrap; }
#logTable pre { margin: 0; white-space: pre-wrap; font-size: 11px; }

/* Silk Generator */
.silk-preview-container {
    min-height: 280px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--clr-border); border-radius: var(--ctrl-radius);
    background-color: var(--surface-soft); padding: 1rem; margin-bottom: 1rem;
}
.silk-preview-container svg { max-width: 100%; max-height: 260px; }
#silkCode { font-family: var(--admin-mono); font-size: 12px; resize: vertical; background-color: var(--surface-soft); }

/* Nav top bar */
.navbar.horizontal-layout .nav-top { background: var(--primary-gradient) !important; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Nav-bottom bar & menu ─────────────────────────────────────────────────── */

/* Bar background + border (override hardcoded #fff from Flare Admin) */
.navbar.horizontal-layout .nav-bottom,
.navbar.horizontal-layout .nav-bottom .page-navigation {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

/* Top-level nav link — match dropdown-item font style */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-main);
    padding: 10px 10px;
    line-height: 1;
    transition: color 0.15s;
}
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-title {
    font-size: var(--fs-base);
    font-weight: 500;
    color: inherit;
    letter-spacing: 0;
}
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item > .nav-link .menu-arrow {
    color: var(--text-muted);
    font-size: 0.5rem;
    transition: transform 0.2s, color 0.15s;
}

/* Hover / active top-level link */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover > .nav-link .menu-title,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.show-submenu > .nav-link .menu-title,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.active > .nav-link .menu-title,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:hover > .nav-link .menu-arrow,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.show-submenu > .nav-link .menu-arrow {
    color: var(--primary);
}

/* ── Submenu panel — match .dropdown-menu look ─────────────────────────────── */
@media (min-width: 768px) {
    .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu,
    .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu {
        top: 100%;
        background: var(--surface) !important;
        border: 1px solid var(--border);
        border-radius: 0;
        box-shadow: var(--shadow-lg);
        padding: 4px 0;
        min-width: 160px;
    }

    /* Bridge gap so submenu doesn't close between trigger and panel */
    .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu::before,
    .navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item.mega-menu .submenu::before {
        content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
    }
}

/* ── Submenu items — match .dropdown-item style ────────────────────────────── */
/* Remove the legacy dash bullet */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item:not(.mega-menu) .submenu li a::before {
    display: none !important;
}

/* Item base */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a {
    font-family: var(--admin-font);
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-main);
    padding: 0.35rem 0.9rem;
    border-radius: 0;
    margin: 0;
    transition: background 0.12s, color 0.12s;
}

/* Item hover / active */
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li a:hover,
.navbar.horizontal-layout .nav-bottom .page-navigation > .nav-item .submenu ul li.active > a {
    background: var(--surface-soft);
    color: var(--primary);
}

   PUBLIC SITE
   Styles for _Layout.cshtml (public-facing pages).
   Extracted from site.css; vendor Flare Admin block removed.
   ══════════════════════════════════════════════════════ */

/* Particles.js token */
:root { --dot-spacing: 10px; }

/* Particles.js container */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.section-content { position: relative; z-index: 2; }

.bg-dynamic {
  position: relative;
  overflow: hidden;
}

/* Code display blocks */
.code-window { background-color: #1e293b; }
.code-content { color: #48bb78; }

/* API-keys modal — scoped to specific IDs to avoid conflicting with Bootstrap's .modal class */
#apiKeysModal,
#apiKeysSuccessModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
}

#apiKeysModal[style*="display: block"],
#apiKeysSuccessModal[style*="display: block"] {
  display: flex !important;
}

#apiKeysModal .modal-content,
#apiKeysSuccessModal .modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  position: relative;
  margin: auto;
  transform: translateY(120px);
}

#apiKeysModal .close,
#apiKeysSuccessModal .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#apiKeysModal .close:hover,
#apiKeysModal .close:focus,
#apiKeysSuccessModal .close:hover,
#apiKeysSuccessModal .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.success-modal {
  background-color: #f0fdf4;
  border-color: #86efac;
}

.success-icon {
  color: #22c55e;
  font-size: 48px;
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME — STYLE.CSS CORRECTIONS
   style.css (Flare Admin vendor) uses hardcoded colours or
   wrong token mappings in a few places. These rules fix them
   for light mode. Dark mode equivalents live in theme-dark.css.
   ══════════════════════════════════════════════════════ */

/* Nav-top header bar: style.css ended up with var(--success) after
   the #00b297 → var(--success) sed pass. Correct it to the gradient. */
.navbar.horizontal-layout .nav-top {
  background: var(--primary-gradient) !important;
}

/* Primary button: use gradient + correct hover/focus colours.
   style.css has solid var(--primary) and hardcoded blue hover/shadow. */
.btn-primary,
.wizard > .actions a {
  background: var(--primary-gradient) !important;
  border-color: transparent !important;
  color: var(--text-inverse) !important;
}

.btn-primary:hover,
.wizard > .actions a:hover {
  background: var(--primary-dark) !important;
  border-color: transparent !important;
  color: var(--text-inverse) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.wizard > .actions a:focus,
.wizard > .actions a.focus {
  box-shadow: 0 0 0 0.2rem var(--focus-ring) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.wizard > .actions a:not(:disabled):not(.disabled):active,
.wizard > .actions a:not(:disabled):not(.disabled).active {
  background: var(--primary-dark) !important;
  border-color: transparent !important;
  color: var(--text-inverse) !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.wizard > .actions a:not(:disabled):not(.disabled):active:focus,
.wizard > .actions a:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem var(--focus-ring) !important;
}