/* =============================================================
 * Custom overrides for the existing markup.
 * All values are driven by CSS variables defined in :root below
 * so brand / theme tweaks happen in one place.
 * ============================================================= */

:root {
  /* Brand */
  --cx-brand: #00c2a8;
  --cx-brand-soft: #2ddcc0;
  --cx-brand-fg: #0b1020;
  --cx-brand-tint-12: rgba(0, 194, 168, 0.12);
  --cx-brand-tint-08: rgba(0, 194, 168, 0.08);
  --cx-brand-tint-25: rgba(0, 194, 168, 0.25);
  --cx-brand-tint-30: rgba(0, 194, 168, 0.30);

  /* Surfaces */
  --cx-bg: #ffffff;
  --cx-surface: #f8fafc;
  --cx-surface-alt: #f1f5f9;
  --cx-card: #ffffff;

  /* Dark surfaces (sidebar / table headers) */
  --cx-dark: #0b1228;
  --cx-darker: #070d1a;
  --cx-table-head: #0b1230;

  /* Text */
  --cx-text: #0f172a;
  --cx-text-soft: #475569;
  --cx-muted: #64748b;
  --cx-on-dark: #ffffff;
  --cx-on-dark-soft: #cbd5e1;
  --cx-on-dark-muted: #94a3b8;

  /* Borders */
  --cx-border: rgba(0, 0, 0, 0.08);
  --cx-border-soft: rgba(0, 0, 0, 0.06);
  --cx-hover-light: rgba(255, 255, 255, 0.06);
  --cx-hover-lighter: rgba(255, 255, 255, 0.04);

  /* Accents */
  --cx-accent-amber: #f59e0b;
  --cx-accent-violet: #8b5cf6;
  --cx-accent-sky: #0ea5e9;
  --cx-accent-rose: #f43f5e;
  --cx-accent-emerald: #10b981;

  /* Geometry */
  --cx-skew: -8deg;
  --cx-skew-soft: -4deg;
  --cx-skew-nav: -3deg;

  /* Legacy app vars (existing markup reads these) */
  --c-orange: var(--cx-brand) !important;
  --c-orange-soft: var(--cx-brand-soft) !important;
  --c-orange-fg: var(--cx-brand-fg) !important;
  --c-bg: var(--cx-bg) !important;
  --c-surface: var(--cx-surface) !important;
  --c-card: var(--cx-card) !important;
  --c-border: var(--cx-border) !important;
  --c-text: var(--cx-text) !important;
  --c-text-soft: var(--cx-text-soft) !important;
  --c-muted: var(--cx-muted) !important;
}

body {
  background: var(--cx-bg) !important;
  color: var(--cx-text) !important;
}

/* ---------- Layout ---------- */
.layout__frame,
.layout__main {
  max-width: 100% !important;
}

/* ---------- Skewed rectangular buttons ---------- */
button,
.btn,
[type="button"],
[type="submit"],
[type="reset"],
.cat__tab {
  border-radius: 0 !important;
  transform: skewX(var(--cx-skew));
  transition: transform 0.2s ease;
}
button > *,
.btn > *,
[type="button"] > *,
[type="submit"] > *,
[type="reset"] > *,
.cat__tab > * {
  display: inline-block;
  transform: skewX(calc(var(--cx-skew) * -1));
}
button:hover,
.btn:hover,
[type="button"]:hover,
[type="submit"]:hover,
[type="reset"]:hover,
.cat__tab:hover {
  transform: skewX(var(--cx-skew)) translateY(-1px);
}

/* ---------- Misc rebrand fixes ---------- */
.speedmap__bar {
  background: var(--cx-brand-tint-30) !important;
}

.betslip {
  background: var(--cx-surface-alt) !important;
}

/* ---------- Venue pills (single horizontal row) ---------- */
.venues {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: var(--cx-surface-alt) !important;
  overflow-x: auto !important;
}

.venue {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: var(--cx-card) !important;
  border: 1px solid var(--cx-border-soft) !important;
  cursor: pointer !important;
  text-align: left !important;
  transform: skewX(var(--cx-skew-soft)) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.venue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cx-brand);
  transition: width 0.25s ease;
}

.venue:hover {
  transform: skewX(var(--cx-skew-soft)) translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.venue:hover::before { width: 5px; }

.venue__avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: var(--cx-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: skewX(calc(var(--cx-skew-soft) * -1)) !important;
}

.venue__avatar img { display: none !important; }

.venue__avatar::after {
  content: "🏁";
  font-size: 11px;
  line-height: 1;
}

.venue:nth-child(1)::before { background: var(--cx-accent-amber); }
.venue:nth-child(2)::before { background: var(--cx-brand); }
.venue:nth-child(3)::before { background: var(--cx-accent-violet); }
.venue:nth-child(4)::before { background: var(--cx-accent-sky); }
.venue:nth-child(5)::before { background: var(--cx-accent-rose); }
.venue:nth-child(6)::before { background: var(--cx-accent-emerald); }

.venue__name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--cx-text) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transform: skewX(calc(var(--cx-skew-soft) * -1)) !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .venues { gap: 6px !important; padding: 8px 12px !important; }
  .venue { padding: 5px 10px !important; gap: 6px !important; }
  .venue__name { font-size: 11px !important; }
  .venue__avatar { width: 18px !important; height: 18px !important; }
  .venue__avatar::after { font-size: 10px !important; }
}

/* ---------- Table-style headers ---------- */
.race-list__heading,
.section-title__h,
.f-split__right > .f-art__head {
  background: var(--cx-table-head) !important;
  color: var(--cx-on-dark) !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
}

/* ---------- Table body backgrounds ---------- */
.race-list,
.fcard,
.f-split__right,
.insights,
.race-list__item,
.f-art,
.f-row,
.srm-card {
  background: var(--cx-surface-alt) !important;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--cx-dark) !important;
  padding: 12px 10px !important;
}

.sidebar__nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sidebar__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 0 !important;
  color: var(--cx-on-dark-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  transform: skewX(var(--cx-skew-nav)) !important;
}

.sidebar__item > * {
  transform: skewX(calc(var(--cx-skew-nav) * -1)) !important;
}

.sidebar__item:hover {
  background: var(--cx-hover-light) !important;
  color: var(--cx-on-dark) !important;
  border-left-color: var(--cx-brand) !important;
}

.sidebar__item.active {
  background: var(--cx-brand-tint-12) !important;
  color: var(--cx-brand) !important;
  border-left-color: var(--cx-brand) !important;
}

.sidebar__heading {
  padding: 16px 14px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cx-muted) !important;
  background: transparent !important;
  border: none !important;
}
.runner__odd {
    background: #dfdfdf;
}
.runner__odd:hover {
    background: #ccc;
}
.cat__group {
    padding: 0px;
}
.cat__tab--active {
    background: var(--c-orange);
}
.race-list__item {
    width: 100%;transform:none;
}
.sidebar__featured {
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  margin: 2px 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--cx-on-dark-muted) !important;
  background: transparent !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: left !important;
  transform: skewX(var(--cx-skew-nav)) !important;
}

.sidebar__featured:hover {
  background: var(--cx-hover-lighter) !important;
  color: var(--cx-on-dark) !important;
  border-left-color: var(--cx-accent-amber) !important;
}

.race-sub-menu,
.sport-sub-menu {
  background: var(--cx-darker) !important;
  padding: 6px 0 !important;
  margin: 0 0 4px !important;
  border-left: 2px solid var(--cx-brand-tint-25) !important;
}

.sidebar__sublink {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px 8px 22px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--cx-on-dark-muted) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.sidebar__sublink:hover {
  color: var(--cx-on-dark) !important;
  background: var(--cx-brand-tint-08) !important;
}

.racing-menu { background: transparent !important; }

.sidebar__item-label {
  flex: 1 !important;
  text-align: left !important;
}