/* =========================
   THEME: LUXURY
   ========================= */
[data-theme="luxury"] {
  /* Base (deep neutral blacks for contrast) */
  --color-base-100: oklch(12% 0.06 100);
  --color-base-200: oklch(16% 0.025 70);
  --color-base-300: oklch(17% 0.02 60);
  --color-base-400: oklch(17% 0.02 60);
  --color-base-content: oklch(95% 0.01 90);

  /* Neutral grays for accents */
  --color-neutral: oklch(20% 0.05 70);
  --color-neutral-content: oklch(93% 0.089 90.861);

  /* Gold palette (true metallic yellow) */
  --color-primary-dark: oklch(42% 0.14 85);
  --color-primary-mid:  oklch(70% 0.26 95);
  --color-primary-bright: oklch(86% 0.32 100);

  --color-primary: var(--color-primary-mid);
  --color-primary-content: oklch(15% 0.02 80);

  /* Warning gold palette */
  --color-warning-dark: oklch(48% 0.18 95);
  --color-warning-mid:  oklch(78% 0.30 100);
  --color-warning-bright: oklch(92% 0.34 105);

  /* Tables */
  --tbl-grid: oklch(62% 0.04 70 / 0.55);
  --tbl-head-bg: color-mix(in oklch, var(--color-base-200) 88%, white 12%);
}

/* =========================
   TYPOGRAPHY & BUTTONS
   ========================= */
.text-primary {
  background: linear-gradient(90deg,
    var(--color-primary-dark) 0%,
    var(--color-primary-mid) 30%,
    var(--color-primary-bright) 50%,
    var(--color-primary-mid) 70%,
    var(--color-primary-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-warning {
  background: linear-gradient(90deg,
    var(--color-warning-dark) 0%,
    var(--color-warning-mid) 30%,
    var(--color-warning-bright) 50%,
    var(--color-warning-mid) 70%,
    var(--color-warning-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-primary {
  -webkit-text-fill-color: unset;
  color: var(--color-base-100);
  border: none;
  background: linear-gradient(90deg,
    oklch(48% 0.16 100) 0%,
    oklch(72% 0.20 100) 28%,
    oklch(88% 0.26 100) 52%,
    oklch(72% 0.20 100) 76%,
    oklch(48% 0.16 100) 100%);
  box-shadow:
    0 2px 6px oklch(20% 0.03 100 / 0.5),
    inset 0 1px 2px oklch(92% 0.04 100 / 0.4);
}
.btn-primary:hover { filter: brightness(1.07) contrast(1.05); }
/* tiny extra sheen on hover */
.btn-primary:hover { filter: brightness(1.05) saturate(1.02); }

@supports not (color: oklch(0 0 0)) {
  .btn-primary {
    background: linear-gradient(90deg,#b08a2e 0%,#d7b74a 30%,#f2df7a 50%,#d7b74a 70%,#b08a2e 100%);
    box-shadow:
      0 2px 6px rgba(160,140,60,0.5),
      inset 0 1px 2px rgba(255,255,200,0.3);
  }
}

.btn-gold-plain {
  background: linear-gradient(
    90deg,
    oklch(58% 0.12 85) 0%,      /* darker antique gold edge */
    oklch(72% 0.16 95) 30%,     /* warm mid-gold */
    oklch(82% 0.20 95) 50%,     /* soft metallic center */
    oklch(72% 0.16 95) 70%,     /* back to warm gold */
    oklch(58% 0.12 85) 100%     /* darker edge for depth */
  ) !important;
  color: var(--color-base-100) !important;
  border: none !important;
  box-shadow:
    0 2px 6px oklch(50% 0.08 85 / 0.25),
    inset 0 1px 1px oklch(92% 0.04 90 / 0.4),
    0 0 10px 2px oklch(78% 0.14 95 / 0.25);
  transition: all 0.25s ease;
}
.btn-gold-plain:hover {
  filter: brightness(1.04) contrast(1.02);
  transform: translateY(-1px);
}
.btn-gold-plain:active {
  transform: translateY(0.5px);
}
.btn-gold-plain:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px oklch(12% 0.045 42),
    0 0 0 4px oklch(80% 0.20 90 / 0.5),
    0 2px 6px oklch(50% 0.08 85 / 0.25),
    0 0 10px 2px oklch(78% 0.14 95 / 0.25);
}

/* Fallback for browsers without oklch() */
@supports not (color: oklch(0 0 0)) {
  .btn-gold-plain {
    background: linear-gradient(
      90deg,
      #b88a30 0%,   /* warm antique gold edge */
      #d4b04d 30%,  /* mid gold */
      #e6cf79 50%,  /* soft highlight */
      #d4b04d 70%,
      #b88a30 100%
    ) !important;
    box-shadow:
      0 2px 6px rgba(184,138,48,0.25),
      inset 0 1px 1px rgba(255,255,220,0.3),
      0 0 10px 2px rgba(214,179,85,0.25);
  }
}

/* Subtle gold aura */
.gold-glow {
  --tw-shadow:
    0 1px 4px 0 oklch(20% 0.05 85 / 0.18),
    0 0 8px -2px var(--color-warning-mid),
    0 0 14px -4px var(--color-warning-dark);
  box-shadow: var(--tw-shadow);
  transition: box-shadow .3s ease, transform .2s ease;
}
.gold-glow:hover {
  --tw-shadow:
    0 2px 8px 0 oklch(20% 0.05 85 / 0.25),
    0 0 12px -2px var(--color-warning-mid),
    0 0 18px -4px var(--color-warning-bright);
  transform: translateY(-2px);
}

.border-gold-subtle { border-color: color-mix(in oklch, var(--color-warning-mid) 28%, transparent) !important; }
.hover\:border-gold:hover { border-color: var(--color-warning-mid) !important; }

/* Gilded surfaces */
.lux-gilded {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--color-base-200) 88%, oklch(52% 0.16 100) 12%) 0%,
    color-mix(in oklch, var(--color-base-200) 84%, oklch(80% 0.24 100) 16%) 100%);
  border: 1px solid color-mix(in oklch, oklch(80% 0.24 100) 28%, transparent);
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklch, oklch(92% 0.28 100) 14%, transparent),
    0 2px 10px -6px color-mix(in oklch, oklch(52% 0.16 100) 18%, transparent);
}
@supports not (color: oklch(0 0 0)) {
  .lux-gilded {
    background: linear-gradient(180deg,#14140f 0%,#12120d 100%);
    border: 1px solid rgba(228,200,90,0.28);
    box-shadow:
      inset 0 1px 0 0 rgba(247,230,144,0.14),
      0 2px 10px -6px rgba(195,155,53,0.18);
  }
}

/* Gold outline */
.lux-outline {
  background: transparent;
  border: 1px solid color-mix(in oklch, oklch(80% 0.24 100) 38%, transparent);
  box-shadow:
    inset 0 1px 1px 0 color-mix(in oklch, oklch(92% 0.28 100) 16%, transparent),
    0 0 6px 1px color-mix(in oklch, oklch(80% 0.24 100) 22%, transparent),
    0 0 14px 3px color-mix(in oklch, oklch(52% 0.16 100) 20%, transparent);
  transition: box-shadow .3s ease, transform .2s ease;
}
.lux-outline:hover {
  box-shadow:
    inset 0 1px 1px 0 color-mix(in oklch, oklch(92% 0.28 100) 26%, transparent),
    0 0 8px 2px color-mix(in oklch, oklch(80% 0.24 100) 28%, transparent),
    0 0 18px 4px color-mix(in oklch, oklch(92% 0.28 100) 26%, transparent),
    0 0 24px 6px color-mix(in oklch, oklch(52% 0.16 100) 18%, transparent);
  transform: translateY(-2px);
}
@supports not (color: oklch(0 0 0)) {
  .lux-outline {
    border: 1px solid rgba(228,200,90,0.4);
    box-shadow:
      inset 0 1px 1px 0 rgba(247,230,144,0.2),
      0 0 6px 1px rgba(228,200,90,0.3),
      0 0 14px 3px rgba(195,155,53,0.25);
  }
  .lux-outline:hover {
    box-shadow:
      inset 0 1px 1px 0 rgba(247,230,144,0.3),
      0 0 8px 2px rgba(228,200,90,0.35),
      0 0 18px 4px rgba(242,223,122,0.30),
      0 0 24px 6px rgba(195,155,53,0.25);
  }
}

/* =========================
   ANIMATIONS
   ========================= */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp .6s ease-out forwards; }

@keyframes gradient-x {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.animate-gradient-x { background-size: 200% 200%; animation: gradient-x 8s ease infinite; }

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 767.98px) {
  .arb-row .odds-dd { min-width: 3.25rem; }
  .arb-row .btn.btn-xs { line-height: 1.2rem; height: 1.4rem; padding-inline: .6rem; }
  .arb-row .leading-snug { line-height: 1.25rem; }
}

.only-mobile { display: block; }
@media (min-width: 768px) { .only-mobile { display: none !important; } }

.only-desktop { display: none; }
@media (min-width: 768px) { .only-desktop { display: flex !important; } }

@media (max-width: 767px) {
  .tool-title { font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.1; }
  .tool-divider { display: none !important; }
  .tool-subtitle { width: 100% !important; }
}

/* Header ordering helpers */
@media (max-width: 767px) {
  .hdr-search { order: 1 !important; }
  .hdr-left   { order: 2 !important; }
  .hdr-tabs   { order: 3 !important; }
}
@media (min-width: 768px) {
  .hdr-left   { order: 1 !important; }
  .hdr-tabs   { order: 2 !important; }
  .hdr-search { order: 3 !important; }
}

/* =========================
   FILTER DIALOG
   ========================= */

/* Overlay */
#bookie-filter-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: none;
}
#bookie-filter-dialog[open] {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
#bookie-filter-dialog::backdrop { background: rgba(0,0,0,0.5); }

/* Sheet */
#bookie-filter-dialog .filter-sheet {
  width: min(92vw, 820px);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-base-200);
  overflow: hidden; /* contain scroll inside */
}
#bookie-filter-dialog .sheet-header,
#bookie-filter-dialog .sheet-footer { flex: 0 0 auto; }
#bookie-filter-dialog .flex-1 {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Grid: rail + content */
#bookie-filter-dialog .filter-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  grid-auto-rows: unset;      /* allow 1fr track to work on desktop */
  gap: 1rem;
  position: relative; /* anchor divider */
  z-index: 0;         /* ensure divider sits under footer */
}
@media (min-width: 768px) {
  #bookie-filter-dialog .filter-grid {
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;  /* fill available height */
    align-items: stretch;
  }
}

/* Rail */
#bookie-filter-dialog .filter-rail {
  display: none;
}
@media (min-width: 768px) {
  #bookie-filter-dialog .filter-rail {
    display: block;
    grid-column: 1;
    align-self: stretch;
    height: 100%;
    padding-right: 1rem;
    border-right: 1px solid var(--tbl-grid);
    overflow: auto;
    min-height: 0;
    border-right-color: color-mix(in oklch, var(--color-base-content) 30%, var(--tbl-grid));
  }
}

/* Mobile rail */
#bookie-filter-dialog .filter-rail-mobile { display: block; }
@media (min-width: 768px) { #bookie-filter-dialog .filter-rail-mobile { display: none; } }

/* Panels (scroller lives here) */
#bookie-filter-dialog .filter-panel {
  grid-column: 1; /* mobile */
  min-height: 0;
  height: auto;
  overflow: auto;
  background: var(--color-base-200);
  border-radius: 0.75rem;
  padding: 1rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
@media (min-width: 768px) { #bookie-filter-dialog .filter-panel { grid-column: 2; } }

/* Compact panel spacing */
@media (max-width: 767.98px) {
  #bookie-filter-dialog .sheet-header { padding: .6rem .9rem; }
  #bookie-filter-dialog .sheet-footer { padding: .6rem .9rem; }
  #bookie-filter-dialog .filter-panel { padding: .75rem; }
  #bookie-filter-dialog h3, #bookie-filter-dialog h4 { font-size: .95rem; }
  #bookie-filter-dialog h5 { font-size: .875rem; }
  #bookie-filter-dialog .btn { min-height: 2rem; height: 2rem; }
  #bookie-filter-dialog .btn.btn-xs { min-height: 1.5rem; height: 1.5rem; }
}

/* Divider line (desktop) — keep it under the footer */
@media (min-width: 768px) {
  #bookie-filter-dialog .filter-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 220px;
    width: 1px;
    background: var(--tbl-grid);
    pointer-events: none;
    z-index: 0; /* stays below footer */
  }
  #bookie-filter-dialog .filter-rail { border-right: 0 !important; }
}

/* Footer pinned + above everything */
#bookie-filter-dialog .sheet-footer {
  background: var(--color-base-200);
  position: sticky;
  bottom: 0;
  z-index: 10;            /* higher than divider/panel */
  border-top: 1px solid var(--tbl-grid);
}

/* Lock page scroll when dialog is open */
body:has(#bookie-filter-dialog[open]) { overflow: hidden; }

/* Mobile sizing for leagues + events */
@media (max-width: 767.98px) {
  /* League header row */
  #bookie-filter-dialog .league-block > summary {
    padding: .55rem .7rem !important;
    font-size: .9rem !important;
  }

  /* Event items */
  #bookie-filter-dialog .event-list label {
    padding: .45rem .55rem !important;
    font-size: .85rem !important;
  }

  /* Event secondary text (time, etc.) */
  #bookie-filter-dialog .event-list .opacity-70 {
    font-size: .72rem !important;
  }
}

/* caret rotates when open */
#bookie-filter-dialog .league-block[open] .league-toggle .caret {
  transform: rotate(90deg);
  transition: transform .2s ease;
}
#bookie-filter-dialog .league-toggle .caret {
  transition: transform .2s ease;
}

/* make the toggle button small & unobtrusive */
#bookie-filter-dialog .league-toggle.btn {
  min-height: 1.5rem;
  height: 1.5rem;
  line-height: 1.2rem;
  padding-inline: .4rem;
}

@media (max-width: 767.98px) { .hide-under-md { display:none !important; } }  /* < md */
@media (max-width: 1279.98px){ .hide-under-xl { display:none !important; } }  /* < xl */


/* ===== Multi index tweaks ===== */

/* ~32px space below the "Top multi for {bookie}" heading */

/* Compact base text inside the multi cards */
.multi-static { font-size: 0.95rem; }
@media (min-width: 768px) { .multi-static { font-size: 1rem; } }

/* Headers inside the multi cards */
.multi-static .title { font-size: 1rem !important; line-height: 1.15; }
@media (min-width: 768px) { .multi-static .title { font-size: 1.1rem !important; } }

/* Per-leg big odds on the right */
.multi-static .single-odds { font-size: 1rem !important; }

/* Footer numbers (“True odds”, “Total edge”) */
.multi-static .value,
.multi-static .edge-value { font-size: 1rem !important; }

/* Small metadata rows (league/time/player/market) */
.multi-static .multi-leg-row .text-sm { font-size: 0.85rem !important; }

/* Bet card inputs + readouts */
.multi-static .bet-card .bet-amount-input,
.multi-static .bet-card .pot-winnings,
.multi-static .bet-card .exp-returns { font-size: 0.95rem !important; }

/* Align True odds + Total edge on one horizontal level */
.multi-static .stats-wrap > .grid { align-items: center; }           /* vertical centering within the row */
@media (min-width: 640px) { /* sm */
  .multi-static .stats-wrap .edge-box { justify-self: end; }         /* push right card to the right */
}

/* Normalise inner spacing so values align */
.multi-static .stats-wrap .value,
.multi-static .stats-wrap .edge-value {
  margin: 0 !important;
  line-height: 1.1;
}

/* Slightly reduce top/bottom padding so heights match */
.multi-static .stats-wrap .true-odds-box,
.multi-static .stats-wrap .edge-box {
  padding-top: .375rem;   /* ~6px */
  padding-bottom: .375rem;
}

/* only the grid bits, only at small+ (≥640px) */
@media (max-width: 768px){
  .stats-grid{
    display:grid;
    grid-template-columns:max-content max-content;
    justify-content:space-between;
    justify-items:start;
    align-items:center;
    gap:.75rem; /* ≈ gap-3 */
  }
}