/* Kisure Sports Frontend v768 — flat charcoal dark theme
   Direction: FotMob-like charcoal surfaces with Kisure teal as a restrained
   accent. No decorative gradients/glow/glass. Do not invert team/league badges. */
:root {
  --ks768-bg: #000000;
  --ks768-header: #181818;
  --ks768-surface: #1c1c1c;
  --ks768-surface-2: #242424;
  --ks768-surface-3: #2a2a2a;
  --ks768-border: #303030;
  --ks768-border-soft: #292929;
  --ks768-text: #ffffff;
  --ks768-text-2: #b0b0b0;
  --ks768-text-3: #777777;
  --ks768-accent: #12b2bb;
  --ks768-accent-dark: #123f42;
  --ks768-success: #55d66b;
  --ks768-live: #ef3340;
  --ks768-radius: 10px;
}

/* Dark mode base */
html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-mode,
body[data-theme="dark"] {
  background: var(--ks768-bg) !important;
  color: var(--ks768-text) !important;
}

/* Header/nav: flat charcoal, not navy/glass. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header__bar,
html[data-theme="dark"] .site-header__inner,
html[data-theme="dark"] .football-header,
html[data-theme="dark"] .football-header-shell,
html[data-theme="dark"] .football-header-leagues,
html[data-theme="dark"] .football-header-panel,
html[data-theme="dark"] .football-scoredeck,
html[data-theme="dark"] .football-scoredeck__toolbar {
  background: var(--ks768-header) !important;
  background-image: none !important;
  border-color: var(--ks768-border-soft) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .site-header a,
html[data-theme="dark"] .football-header a {
  color: var(--ks768-text-2) !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] .site-nav a:hover,
html[data-theme="dark"] .site-header a:hover {
  color: var(--ks768-text) !important;
}

/* Only Kisure brand marks may be whitened. Never target all images. */
html[data-theme="dark"] .site-logo,
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .brand-icon,
html[data-theme="dark"] img.kisure-logo {
  filter: brightness(0) invert(1) !important;
}

html[data-theme="dark"] .team-logo,
html[data-theme="dark"] .league-logo,
html[data-theme="dark"] .club-logo,
html[data-theme="dark"] .football-team-crest,
html[data-theme="dark"] .football-club-logo,
html[data-theme="dark"] .football-league-logo,
html[data-theme="dark"] .football-competition-identity__mark img,
html[data-theme="dark"] .football-header-match-row img,
html[data-theme="dark"] .ks-match img,
html[data-theme="dark"] .article-match-scoreboard img {
  filter: none !important;
}

/* Normal surfaces: charcoal cards with subtle borders, no glow/glass. */
html[data-theme="dark"] .surface-card,
html[data-theme="dark"] .site-panel,
html[data-theme="dark"] .ad-slot,
html[data-theme="dark"] .article-content-card,
html[data-theme="dark"] .article-share-panel,
html[data-theme="dark"] .article-hero,
html[data-theme="dark"] .article-linked-data-stack,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .football-section,
html[data-theme="dark"] .football-card,
html[data-theme="dark"] .football-panel,
html[data-theme="dark"] .football-fixtures-card,
html[data-theme="dark"] .football-standings-card,
html[data-theme="dark"] .football-bracket-panel,
html[data-theme="dark"] .football-match-card,
html[data-theme="dark"] .football-match-shell,
html[data-theme="dark"] .football-match-sidebar-stack > *,
html[data-theme="dark"] .football-sidebar-stack > *,
html[data-theme="dark"] .sports-desk-panel,
html[data-theme="dark"] .sports-desk-card {
  background: var(--ks768-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ks768-border) !important;
  border-radius: var(--ks768-radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ks768-text) !important;
}

/* Sub-surfaces and hover states */
html[data-theme="dark"] .surface-card:hover,
html[data-theme="dark"] .news-card:hover,
html[data-theme="dark"] .football-header-match-row:hover,
html[data-theme="dark"] .fixture-row:hover,
html[data-theme="dark"] .football-fixture-row:hover,
html[data-theme="dark"] .football-table-row:hover,
html[data-theme="dark"] .football-standings-row:hover {
  background: var(--ks768-surface-2) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .football-fixture-row,
html[data-theme="dark"] .fixture-row,
html[data-theme="dark"] .football-header-match-row,
html[data-theme="dark"] .football-header-tablemini__row,
html[data-theme="dark"] .football-table-row,
html[data-theme="dark"] .football-standings-row,
html[data-theme="dark"] tr.football-standings-row,
html[data-theme="dark"] .standing-row {
  background: var(--ks768-surface) !important;
  background-image: none !important;
  border-color: var(--ks768-border-soft) !important;
  box-shadow: none !important;
  color: var(--ks768-text) !important;
}

/* Tables and standings: simple hierarchy. */
html[data-theme="dark"] table,
html[data-theme="dark"] .football-standings-table,
html[data-theme="dark"] .standings-table,
html[data-theme="dark"] .football-tablemini,
html[data-theme="dark"] .football-header-tablemini {
  background: var(--ks768-surface) !important;
  border-color: var(--ks768-border) !important;
  color: var(--ks768-text) !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] .standings-header,
html[data-theme="dark"] .football-standings-table thead,
html[data-theme="dark"] .football-table-header {
  background: var(--ks768-surface-2) !important;
  background-image: none !important;
  color: var(--ks768-text) !important;
  border-color: var(--ks768-border) !important;
}

/* League navigation/tabs: transparent by default; active uses subtle teal only. */
html[data-theme="dark"] .football-header-league,
html[data-theme="dark"] .football-league-chip,
html[data-theme="dark"] .league-item,
html[data-theme="dark"] .competition-chip,
html[data-theme="dark"] .football-tabs a,
html[data-theme="dark"] .football-tabs button,
html[data-theme="dark"] .article-share-action,
html[data-theme="dark"] .tag-chip {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: var(--ks768-text-2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .football-header-league.is-active,
html[data-theme="dark"] .football-league-chip.is-active,
html[data-theme="dark"] .league-item.active,
html[data-theme="dark"] .competition-chip.is-active,
html[data-theme="dark"] .football-tabs a.active,
html[data-theme="dark"] .football-tabs button.active,
html[data-theme="dark"] .article-share-action:hover,
html[data-theme="dark"] .tag-chip:hover {
  background: var(--ks768-surface-2) !important;
  border-color: var(--ks768-accent) !important;
  color: var(--ks768-text) !important;
}

/* Inputs/search */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-field,
html[data-theme="dark"] .site-search,
html[data-theme="dark"] .football-search {
  background: var(--ks768-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--ks768-border) !important;
  color: var(--ks768-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--ks768-text-3) !important;
}

/* Buttons: teal only for primary actions, neutral for normal controls. */
html[data-theme="dark"] .site-button,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .football-scoredeck__arrow:not([aria-disabled="true"]),
html[data-theme="dark"] .article-match-summary-block__cta {
  background: var(--ks768-accent) !important;
  background-image: none !important;
  border-color: var(--ks768-accent) !important;
  color: #001012 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] button,
html[data-theme="dark"] .football-scoredeck__tab,
html[data-theme="dark"] .football-header-panel__pager button {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .football-scoredeck__tab:not(.is-active),
html[data-theme="dark"] .football-header-panel__pager button:not(.is-active) {
  background: var(--ks768-surface-2) !important;
  border-color: var(--ks768-border) !important;
  color: var(--ks768-text-2) !important;
}

html[data-theme="dark"] .football-scoredeck__tab.is-active,
html[data-theme="dark"] .football-header-panel__pager button.is-active {
  background: var(--ks768-accent-dark) !important;
  border-color: var(--ks768-accent) !important;
  color: var(--ks768-text) !important;
}

/* Status colours remain semantic, not charcoal. */
html[data-theme="dark"] .is-live,
html[data-theme="dark"] .live-story-pill.is-live,
html[data-theme="dark"] .football-status--live,
html[data-theme="dark"] .status-live {
  color: #ffffff !important;
  background: var(--ks768-live) !important;
  border-color: var(--ks768-live) !important;
}

html[data-theme="dark"] .status-win,
html[data-theme="dark"] .is-success,
html[data-theme="dark"] .football-status--finished {
  color: #06150a !important;
  background: var(--ks768-success) !important;
  border-color: var(--ks768-success) !important;
}

/* Typography */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] .headline-title,
html[data-theme="dark"] .news-card__title,
html[data-theme="dark"] .article-hero__title {
  color: var(--ks768-text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .sidebar-muted,
html[data-theme="dark"] .story-meta,
html[data-theme="dark"] .article-hero__dek,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .muted {
  color: var(--ks768-text-2) !important;
}

/* Remove decorative glow/transparent overlays on common pseudo-elements. */
html[data-theme="dark"] .surface-card::before,
html[data-theme="dark"] .surface-card::after,
html[data-theme="dark"] .site-panel::before,
html[data-theme="dark"] .site-panel::after,
html[data-theme="dark"] .football-section::before,
html[data-theme="dark"] .football-section::after,
html[data-theme="dark"] .football-card::before,
html[data-theme="dark"] .football-card::after,
html[data-theme="dark"] .news-card::before,
html[data-theme="dark"] .news-card::after,
html[data-theme="dark"] .article-hero::before,
html[data-theme="dark"] .article-hero::after,
html[data-theme="dark"] .football-header-panel::before,
html[data-theme="dark"] .football-header-panel::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Keep FE767 sidebar restore intact in dark mode. */
html[data-theme="dark"] body.is-news-article-page .article-rail.sticky-sidebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}