/* =============================================================
   transparency-pass.css v1
   =============================================================
   Owner-Wunsch 2026-05-07: Alle Tabs/Karten transparenter
   damit der Galaxy-Background besser durchscheint.
   AUSGENOMMEN: untere Sidebar (#mobile-bottom-nav) bleibt solid.
   ============================================================= */

/* Match-Cards (Hauptcontent) */
.mc,
.match-card {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}
.mc:hover,
.match-card:hover {
  background: rgba(22, 29, 38, .35) !important;
}
.mc.ft,
.match-card.ft {
  background: linear-gradient(135deg,
    rgba(22, 29, 38, .5),
    rgba(0, 230, 118, .06)) !important;
}

/* Match-Group-Header (Liga-Zeile über den Cards) */
.match-group__header {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .06) !important;
}

/* Mini-Stats Boxen oben (Spiele geladen / Trefferquote / xG / Value-Bets) */
.ms,
.sbar > div,
.mini-stat {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Sidebar-Cards (Self-Learning, Top-Markets, Terminal etc.) */
.sc,
.aside .card,
.sidebar-card {
  background: rgba(15, 20, 25, .25) !important;
  backdrop-filter: blur(7px) saturate(125%);
  -webkit-backdrop-filter: blur(7px) saturate(125%);
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Tab-Buttons oben (Desktop, Mobile hidden) */
.tb,
.tab {
  background: rgba(15, 20, 25, .18) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
.tb.on,
.tab.active {
  background: rgba(0, 230, 118, .14) !important;
  border-color: rgba(0, 230, 118, .35) !important;
}

/* Filter-Bar (Liga-Pills) */
.fb {
  background: transparent !important;
}
.filter-pill {
  background: rgba(15, 20, 25, .4) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Mobile Tag-/Liga-Filterkarte */
.mobile-filter-card {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}
.mobile-day-control,
.mobile-league-trigger {
  background: transparent !important;
}

/* Prediction-Boxen innerhalb Match-Card */
.pb {
  background: rgba(30, 40, 54, .35) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
.pb.h {
  background: linear-gradient(135deg,
    rgba(30, 40, 54, .45),
    rgba(0, 230, 118, .08)) !important;
}

/* Date-Buttons / Day-Switcher */
.db_ {
  background: rgba(15, 20, 25, .22) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Filter-Arrow (rund, Tag-Switcher) */
.filter-arr {
  background: rgba(22, 29, 38, .45) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* Team-Logo-Container (matches background of card) */
.tl {
  background: rgba(30, 40, 54, .55) !important;
}

/* Confidence-Bar Hintergrund */
.cb {
  background: rgba(15, 20, 25, .55) !important;
}

/* Costs-Tab / Smart-Kombi Sub-Cards (analoge Surfaces) */
.costs-card,
.smart-card,
.kombi-card,
.sheet-card {
  background: rgba(15, 20, 25, .22) !important;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-color: rgba(255, 255, 255, .08) !important;
}

/* ─── Single-Tip Layout (Full-width, schmal) ──────────────── */
.match-card__predictions--single {
  display: block !important;
  padding-top: 8px !important;
}
.match-card__predictions--single .pred-badge {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  background: linear-gradient(90deg,
    rgba(0, 230, 118, .1) 0%,
    rgba(0, 230, 118, .04) 60%,
    rgba(0, 230, 118, .12) 100%) !important;
  border: 1px solid rgba(0, 230, 118, .35) !important;
  border-radius: 8px !important;
}
.match-card__predictions--single .pred-badge__label {
  flex: 0 0 auto;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: rgba(255, 255, 255, .92) !important;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, .15);
  padding-right: 12px;
  text-shadow: 0 0 8px rgba(168, 255, 212, .35);
}
.match-card__predictions--single .pred-badge > div {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.match-card__predictions--single .pred-badge__value {
  font-size: 1.15rem !important;
  font-weight: 800;
  letter-spacing: .04em !important;
  white-space: nowrap;
}
.match-card__predictions--single .confidence-bar {
  display: none !important;
}

/* Mobile: kompakter */
@media (max-width: 600px) {
  .match-card__predictions--single .pred-badge {
    padding: 7px 10px !important;
    gap: 10px !important;
  }
  .match-card__predictions--single .pred-badge__label {
    font-size: .78rem !important;
    padding-right: 10px;
  }
  .match-card__predictions--single .pred-badge__value {
    font-size: 1rem !important;
  }
}

/* ─── SCHEIN-Tab / Sidebar einheitliches Layout ────────────
   Nur visuelle Normalisierung — KEINE JS/Logik-Änderung.
   Inline-styles werden via !important überschrieben.
   ============================================================= */

/* NUCLEAR: Alle Elemente in Sidebar-Cards bekommen Default-Typo */
.aside .sc *:not(.st):not(svg):not(svg *):not(.av):not(.mv):not(.scr):not(.scn):not(.scp):not(.scf):not(.sct) {
  font-size: .78rem !important;
  letter-spacing: normal !important;
  line-height: 1.42 !important;
  text-align: left !important;
}

/* Card-Title bleibt Heading-Stil */
.aside .sc .st {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--t3, #8899aa) !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* Bold/Strong behalten Gewicht aber erben Größe */
.aside .sc strong,
.aside .sc b {
  font-weight: 700 !important;
}

/* Sub-Headings (uppercase + letter-spacing 0.05-0.1em + bold) → Heading-Stil */
.aside .sc [style*="letter-spacing:.08em"],
.aside .sc [style*="letter-spacing:.1em"],
.aside .sc [style*="letter-spacing:.12em"],
.aside .sc [style*="letter-spacing:.05em"] {
  font-size: .66rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Stat-Werte (Accuracy-Ring, Mini-Stat) bleiben prominent */
.aside .sc .av,
.aside .sc .mv {
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

/* Standings-Tabelle: Spalten behalten ihre Sub-Klassen-Größen */
.aside .sc .scr,
.aside .sc .scn,
.aside .sc .scp,
.aside .sc .sct { font-size: .72rem !important; }
.aside .sc .scf { font-size: .72rem !important; }

/* Card-Padding + Margin einheitlich */
.aside .sc {
  padding: 14px !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}

/* Buttons in Sidebar einheitlich */
.aside .sc button {
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  letter-spacing: .04em !important;
}
.aside .sc button.mk-day-btn,
.aside .sc button[data-offset] {
  padding: 5px 10px !important;
  font-size: .68rem !important;
}

/* Inputs einheitlich */
.aside .sc input,
.aside .sc select,
.aside .sc textarea {
  font-size: .78rem !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* Innen-Zeilen / Picks: gleiche Padding/Radius */
.aside .sc [style*="background:var(--s2)"],
.aside .sc [style*="background: var(--s2)"] {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}

/* Kleinere Helper-Texte (Konf: 70% etc.) erlaubt */
.aside .sc [style*="font-size:.6rem"],
.aside .sc [style*="font-size:.62rem"],
.aside .sc [style*="font-size:.65rem"],
.aside .sc [style*="font-size:.68rem"] {
  font-size: .68rem !important;
}

/* Mobile-spezifisch */
@media (max-width: 600px) {
  .aside .sc { padding: 12px !important; margin-bottom: 10px !important; }
  .aside .sc *:not(.st):not(svg):not(svg *):not(.av):not(.mv):not(.scr):not(.scn):not(.scp):not(.scf):not(.sct) {
    font-size: .76rem !important;
  }
  .aside .sc .st { font-size: .64rem !important; margin-bottom: 10px !important; }
  .aside .sc .av, .aside .sc .mv { font-size: 1.3rem !important; }
}
.aside .sc {
  padding: 14px !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}

/* Card-Title (.st) konsistent */
.aside .sc .st,
.aside .sc > h2,
.aside .sc > h3 {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--t3, #8899aa) !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Body-Text einheitlich + linksbündig */
.aside .sc,
.aside .sc > div:not(.st) {
  text-align: left;
}
.aside .sc p,
.aside .sc span,
.aside .sc div {
  text-align: inherit;
}

/* Default-Body-Schrift auf konsistente Größe — gilt nur
   für reine Container-Divs ohne eigene Klasse, damit existierende
   stat-elements (.av, .mv, .stb etc.) nicht überschrieben werden */
.aside .sc > div:not(.st):not([class]),
.aside .sc > p:not([class]) {
  font-size: .82rem !important;
  line-height: 1.45 !important;
  color: var(--t1, #f0f4f8);
}

/* Sub-Headings im Body ("Markt-Performance", "Liga-Tabelle" etc.) */
.aside .sc h4,
.aside .sc h5,
.aside .sc .sub-title,
.aside .sc [class*="sub-head"],
.aside .sc [class*="section-title"] {
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--t2, #a0aab8) !important;
  margin: 10px 0 6px 0 !important;
  text-align: left !important;
}

/* Buttons in Sidebar-Cards einheitlich */
.aside .sc button {
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  letter-spacing: .04em;
}
.aside .sc button.mk-day-btn,
.aside .sc button[data-offset] {
  padding: 5px 10px !important;
  font-size: .68rem !important;
}

/* Stat-Werte etwas zähmen — riesige Nummern verkleinern */
.aside .sc .av,
.aside .sc .mv,
.aside .sc .pred-conf,
.aside .sc [class*="big-value"],
.aside .sc [class*="huge"] {
  font-size: 1.5rem !important;
  line-height: 1.1 !important;
}

/* Listen / Rows linksbündig + konsistente Höhe */
.aside .sc ul,
.aside .sc ol {
  margin: 0;
  padding-left: 18px;
  text-align: left;
}
.aside .sc li {
  font-size: .8rem;
  line-height: 1.4;
  margin-bottom: 4px;
  text-align: left;
}

/* Generic key-value rows (Label / Wert nebeneinander) */
.aside .sc [class*="row"],
.aside .sc [class*="-line"] {
  font-size: .78rem !important;
  line-height: 1.4;
}

/* Accuracy-Ring zentriert lassen, Rest linksbündig */
.aside .sc .ar { align-items: center !important; }

/* Inputs/Selects einheitlich */
.aside .sc input,
.aside .sc select,
.aside .sc textarea {
  font-size: .78rem !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* Mobile-spezifisch noch etwas kompakter */
@media (max-width: 600px) {
  .aside .sc { padding: 12px !important; margin-bottom: 10px !important; }
  .aside .sc .st { font-size: .64rem !important; margin-bottom: 10px !important; }
  .aside .sc > div:not(.st):not([class]) { font-size: .78rem !important; }
  .aside .sc .av,
  .aside .sc .mv { font-size: 1.3rem !important; }
}

/* ─── Bottom-Nav explizit AUSGENOMMEN ──────────────────────── */
/* #mobile-bottom-nav bleibt unangefasst, behält bottom-nav-glass.css */

/* ─── Mobile-spezifisch: noch stärker durchsichtig auf Handy ── */
@media (max-width: 600px) {
  .mc, .match-card,
  .ms, .sbar > div, .mini-stat,
  .sc, .aside .card,
  .mobile-filter-card {
    background: rgba(15, 20, 25, .18) !important;
    backdrop-filter: blur(5px) saturate(115%);
    -webkit-backdrop-filter: blur(5px) saturate(115%);
  }
}

/* ─── Touch-Geräte: kein Press-Highlight auf Karten ──────── */
@media (hover: none), (max-width: 768px) {
  .mc, .match-card,
  .ms, .sbar > div, .mini-stat,
  .sc, .aside .card,
  .mobile-filter-card,
  .pb, .tb, .filter-pill, .db_, .filter-arr {
    -webkit-tap-highlight-color: transparent !important;
  }
  /* :hover auf Touch nicht mehr wirken lassen — Tap würde Hover-State kleben lassen */
  .mc:hover, .match-card:hover {
    background: rgba(15, 20, 25, .18) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .mc:hover::before, .mc:hover::after,
  .match-card:hover::before, .match-card:hover::after {
    transform: none !important;
    opacity: 0 !important;
  }
  .mc:active, .match-card:active,
  .ms:active, .pb:active, .sc:active,
  .mobile-filter-card:active {
    background: rgba(15, 20, 25, .18) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* Reduced Motion: backdrop-filter teuer, weglassen */
@media (prefers-reduced-motion: reduce) {
  .mc, .match-card,
  .ms, .sbar > div, .mini-stat,
  .sc, .aside .card,
  .mobile-filter-card,
  .costs-card, .smart-card, .kombi-card, .sheet-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 20, 25, .65) !important;
  }
}

/* ─── Smart-Tab Mobile-Fix ──────────────────────────────────
   Owner-Wunsch 2026-05-08: Smart-Tab läuft auf Mobile am
   rechten Rand über + System-Header zu fett. */
@media (max-width: 600px) {
  /* NUCLEAR: alles im Smart-Tab darf nie über Viewport hinausragen */
  #smart-kombi-content,
  #smart-kombi-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #smart-kombi-content {
    overflow-x: hidden !important;
  }
  /* Alle Grids → Single-Column Stack auf Mobile */
  #smart-kombi-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Match-Cards in Safe-Bet-Section: enges Padding, full width */
  #smart-kombi-content .match-card {
    width: 100% !important;
    padding: 8px 10px !important;
  }
  /* Single-Tip pred-badge: darf wrappen */
  #smart-kombi-content .match-card__predictions--single .pred-badge {
    flex-wrap: wrap !important;
  }
  /* Heatmap-Badge kleiner */
  #smart-kombi-content .heatmap-badge,
  #smart-kombi-content [class*="heatmap"] {
    transform: scale(.8);
    transform-origin: right center;
  }
  /* Markt-Matrix Header (140px 80px 100px 1fr) → 4× 1fr */
  #smart-kombi-content [style*="140px 80px 100px"] {
    grid-template-columns: repeat(4, 1fr) !important;
    font-size: .55rem !important;
  }
  /* Risk-Slider Lightning-Icon nicht überlaufen lassen */
  #smart-kombi-content [style*="position:absolute"] {
    right: 4px !important;
  }
  #smart-kombi-content [style*="font-family:var(--fm)"],
  #smart-kombi-content [style*="font-family: var(--fm)"] {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* System-Header v2.0 — die Math-Equation ist Decoration und auf Mobile zu viel.
     Den ganzen Header schrumpfen + die Equation-Zeile ausblenden. */
  #smart-kombi-content [style*="SMART-KOMBI SYSTEM"] {
    font-size: .62rem !important;
    letter-spacing: .03em !important;
  }
  #smart-kombi-content [style*="font-size:.78rem"][style*="color:var(--a)"] {
    font-size: .62rem !important;
  }
  #smart-kombi-content [style*="font-size:.7rem"][style*="color:var(--t2)"] {
    font-size: .55rem !important;
  }
  /* Equation-Zeile (Σ-Symbol) — auf Mobile aus, ist nur Schmuck */
  #smart-kombi-content [style*="line-height:1.5"][style*="color:var(--t2)"] {
    display: none !important;
  }
  /* System-Header Kasten kompakter */
  #smart-kombi-content > div > div:first-child[style*="padding:12px 16px"],
  #smart-kombi-content > div > div:first-child[style*="padding: 12px 16px"] {
    padding: 8px 10px !important;
  }
  /* Match-Cards full width */
  #smart-kombi-content .match-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* Padding der Sektion-Container reduzieren */
  #smart-kombi-content > div > div[style*="padding:14px"],
  #smart-kombi-content > div > div[style*="padding:12px 16px"] {
    padding: 10px !important;
  }
  /* Flex-Container darf wrappen */
  #smart-kombi-content [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* =============================================================
   Owner-Wunsch 2026-05-09: Neon-Glow auf den 4 Kombi-Karten.
   In glow-accents.css definiert — wird aber von der frueheren
   .sc { border-color: rgba(255,255,255,.08) !important } Regel
   auf Zeile 51 ueberschrieben. Hier mit erhoehter Spezifitaet
   (.aside .sc#kombi-X-card) re-aktivieren — schlaegt jetzt sicher.
   ============================================================= */
.aside .sc#kombi-claude-card,
.aside .sc#kombi-conservative-card,
.aside .sc#kombi-quant-card,
.aside .sc#kombi-aggressive-card {
  border-width: 2px !important;
  border-style: solid !important;
}

.aside .sc#kombi-claude-card {
  border-color: rgba(0, 230, 118, 1) !important;
  box-shadow:
    0 0 18px rgba(0, 230, 118, .45),
    0 0 38px rgba(0, 230, 118, .20),
    inset 0 0 16px rgba(0, 230, 118, .12) !important;
  animation: tmNeonClaude 3.6s ease-in-out infinite;
}
.aside .sc#kombi-conservative-card {
  border-color: rgba(64, 196, 255, 1) !important;
  box-shadow:
    0 0 18px rgba(64, 196, 255, .45),
    0 0 38px rgba(64, 196, 255, .20),
    inset 0 0 16px rgba(64, 196, 255, .12) !important;
  animation: tmNeonConservative 3.6s ease-in-out infinite;
}
.aside .sc#kombi-quant-card {
  border-color: rgba(64, 196, 255, 1) !important;
  box-shadow:
    0 0 20px rgba(64, 196, 255, .50),
    0 0 38px rgba(168, 255, 212, .22),
    inset 0 0 18px rgba(64, 196, 255, .15) !important;
  animation: tmNeonQuant 3.6s ease-in-out infinite;
}
.aside .sc#kombi-aggressive-card {
  border-color: rgba(255, 82, 82, 1) !important;
  box-shadow:
    0 0 18px rgba(255, 82, 82, .45),
    0 0 38px rgba(255, 82, 82, .20),
    inset 0 0 16px rgba(255, 82, 82, .12) !important;
  animation: tmNeonAggressive 3.6s ease-in-out infinite;
}

/* Owner-Iter-4 2026-05-09: Linker ::before-Balken wasserdicht killen.
   Greift unabhaengig von welcher CSS-Datei sonst noch im Spiel ist. */
.aside .sc#kombi-claude-card #claude-kombi-section::before,
.aside .sc#kombi-conservative-card #conservative-kombi-section::before,
.aside .sc#kombi-quant-card #quant-kombi-section::before,
.aside .sc#kombi-aggressive-card #aggressive-kombi-section::before,
#claude-kombi-section::before,
#conservative-kombi-section::before,
#quant-kombi-section::before,
#aggressive-kombi-section::before {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  width: 0 !important;
}
.aside .sc #claude-kombi-section,
.aside .sc #conservative-kombi-section,
.aside .sc #quant-kombi-section,
.aside .sc #aggressive-kombi-section {
  padding-left: 0 !important;
  position: static !important;
}