/* static/css/sidebar.css — SAFE VERSION (überschreibt Desktop nicht) */
:root{
  --tb-h: 64px;      /* Höhe deiner Topbar, falls relevant */
  --side-w: 260px;   /* Breite der Sidebar (nur Doku, Desktop kommt aus style.css) */
  --border: #24262b;
}

/* Header/Logo/Navigation – nur Feinschliff, keine Positionierung */
#sidebar .sidebar-header { padding: 1rem; text-align: center; }
#sidebar .sidebar-logo img { max-width: 160px; height: auto; }
#sidebar .sidebar-nav { padding: .5rem 0; }
#sidebar .sidebar-nav ul { list-style: none; margin: 0; padding: 0; }
#sidebar .sidebar-nav li { margin: .3rem 0; }
#sidebar .sidebar-nav a{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1.25rem; color:#f2f4f8; text-decoration:none; font-weight:500;
}
#sidebar .sidebar-nav a:hover{ background:#1a1f2d; }
#sidebar .sidebar-nav .icon{ width:20px; text-align:center; }

/* ===== Mobile: Sidebar als Drawer (Desktop bleibt fixed aus style.css) ===== */
@media (max-width: 992px){
  #sidebar{
    position: fixed;           /* Drawer */
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1100;
  }
  #sidebar.open{ transform: none; }
  .content{ margin-left: 0 !important; }
}

/* Optionaler Backdrop (falls du ihn nutzen willst) */
.sidebar-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1099; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sidebar-backdrop.show{ opacity: 1; pointer-events: all; }





/* ===== SpinMafia Neon Add-on (greift nur auf .smnav) ===================== */
:root{
  --sm-accent: #ff7a59;
  --sm-glass: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  --sm-glass-border: rgba(255,255,255,.08);
  --sm-muted: #aab6c3;
}

/* Logo größer + dezenter Glow (bleibt mittig) */
#sidebar .sidebar-logo img{
  width: 132px;                /* größer, gern 148–160 testen */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .2s ease, box-shadow .2s ease;
}
#sidebar .sidebar-logo img:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1) inset;
}

/* Gruppierung: etwas mehr Luft zum Logo */
#sidebar .sidebar-header{ padding: 1.25rem 1rem .75rem; }

.sidebar-nav.smnav ul{ display: grid; gap: 8px; padding: 10px; }

/* Link-Karte */
.sidebar-nav.smnav a{
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sm-glass);
  border: 1px solid var(--sm-glass-border);
  color: #e9eef7;
  text-decoration: none;
  font-weight: 800;                        /* wie Toolbar/Filter */
  letter-spacing: .3px;                    /* dezente Weite */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  will-change: transform;
}

/* Neon-Stripe links */
.sidebar-nav.smnav a::before{
  content:"";
  position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,122,89,.0), rgba(255,122,89,.65), rgba(255,122,89,.0));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .22s ease;
}

/* Hover/Fokus */
.sidebar-nav.smnav a:hover,
.sidebar-nav.smnav a:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  border-color: rgba(255,122,89,.35);
}
.sidebar-nav.smnav a:hover::before,
.sidebar-nav.smnav a:focus-visible::before{
  transform: scaleY(1);
}

/* Aktiver Punkt – stärkerer Akzent */
.sidebar-nav.smnav a.is-active{
  border-color: rgba(255,122,89,.55);
  box-shadow: 0 12px 34px rgba(255,122,89,.12), 0 6px 22px rgba(0,0,0,.35);
}
.sidebar-nav.smnav a.is-active::before{
  transform: scaleY(1);
}

/* Icon + Label */
.sidebar-nav.smnav .icon{ width: 22px; text-align:center; opacity:.95; }
.sidebar-nav.smnav a span{ flex:1; }

/* Tastatur-Fokus sichtbar */
.sidebar-nav.smnav a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,122,89,.22), 0 10px 28px rgba(0,0,0,.28);
}

/* Mobile Drawer unverändert (erbt deine bestehenden Regeln) */
@media (max-width: 992px){
  .sidebar-nav.smnav ul{ gap: 10px; padding: 12px; }
}


/* Force Manrope in der Sidebar */
#sidebar .sidebar-nav.smnav a,
#sidebar .sidebar-nav.smnav a span,
#sidebar .sidebar-nav.smnav .badge{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight:800;
  letter-spacing:.3px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}



/* ===== Flat list style like the screenshot ===== */
:root{
  --nav-hover: rgba(255,193,79,.12);   /* goldig, Hover */
  --nav-active: #4b2f00;               /* brauner Active-Balken */
  --nav-text: #e9eef7;
  --nav-muted: #aab6c3;
}

/* Container */
.sidebar-nav.smnav.smnav--flat ul{
  display:flex; flex-direction:column;
  gap:0; padding:6px 0; margin:0;
}
.sidebar-nav.smnav.smnav--flat li{ list-style:none; }

/* Link-Zeile */
.sidebar-nav.smnav.smnav--flat a{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  color:var(--nav-text);
  text-decoration:none;
  border-radius:0; border:none; background:transparent;
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800; letter-spacing:.3px;
  transition:background .18s ease, color .18s ease;
}
.sidebar-nav.smnav.smnav--flat a:hover{ background:var(--nav-hover); }
.sidebar-nav.smnav.smnav--flat a.is-active{
  background:var(--nav-active);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* kleine linke Akzentlinie nur bei Hover/Active */
.sidebar-nav.smnav.smnav--flat a::before{
  content:""; width:3px; height:100%; margin-right:6px; border-radius:2px;
  background:transparent; transform:translateX(-9px);
}
.sidebar-nav.smnav.smnav--flat a:hover::before,
.sidebar-nav.smnav.smnav--flat a.is-active::before{
  background:linear-gradient(180deg, rgba(255,193,79,0), rgba(255,193,79,.9), rgba(255,193,79,0));
}

/* Icon: SVG per CSS-Mask, Farbe über currentColor */
.sidebar-nav.smnav .icon{
  width:24px; height:24px; flex:0 0 24px; display:inline-block;
  background-color: currentColor;
  -webkit-mask-size: contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-size: contain; mask-repeat:no-repeat; mask-position:center;
}

/* Farben der einzelnen Icons (wie im Screenshot) */
.sidebar-nav.smnav .icon.home     { color:#ffffff; }
.sidebar-nav.smnav .icon.gift     { color:#ffbf47; } /* gold */


/* Masken (leichtgewichtige SVGs via data-URI) */
.sidebar-nav.smnav .icon.home{
  -webkit-mask-image: url("/static/img/nav/home.png");
          mask-image: url("/static/img/nav/home.png");
}

/* GIFT */
.sidebar-nav.smnav .icon.gift{
  -webkit-mask-image: url("/static/img/nav/giveaway2.png");
          mask-image: url("/static/img/nav/giveaway2.png");
}



/* === SpinMafia Sidebar: sequenzieller Shine/Glow === */
.sidebar-nav.smnav--flat a{
  position: relative;
  overflow: hidden;                 /* für den Shine-Sweep */
}

/* aktiver Scheinwerfer (vom JS gesetzt) */
.sidebar-nav.smnav--flat a.is-spot{
  background:
    linear-gradient(90deg,
      rgba(255,61,61,.10) 0%,       /* rot links */
      rgba(255,61,61,.04) 14%,
      transparent 28% 72%,
      rgba(255,193,79,.04) 86%,     /* gold rechts */
      rgba(255,193,79,.10) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,193,79,.20),      /* goldene feine Kante */
    0 10px 26px rgba(255,193,79,.12),          /* äußerer goldener Glow */
    0 0 24px rgba(255,61,61,.10);              /* roter Zusatzglow */
  border-color: rgba(255,193,79,.35);
}

/* Shine-Sweep (glänzender Streifen, der über den Link läuft) */
.sidebar-nav.smnav--flat a.is-spot::after{
  content:"";
  position:absolute;
  top:-20%; bottom:-20%;
  left:-35%;
  width:40%;
  transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: sm-shine 900ms ease-out forwards;
  pointer-events:none;
}

/* linke Neonlinie bei Spot etwas kräftiger */
.sidebar-nav.smnav--flat a.is-spot::before{
  background: linear-gradient(180deg, rgba(255,61,61,0), rgba(255,61,61,.9), rgba(255,61,61,0));
}

@keyframes sm-shine {
  to { left: 135%; }
}

/* Zugänglichkeit: Nutzer mit reduzierter Bewegung => nur Glow, kein Sweep */
@media (prefers-reduced-motion: reduce){
  .sidebar-nav.smnav--flat a.is-spot::after{ animation: none; opacity:.18; left:0; right:0; transform:none; }
}




/* ===== Sidebar: Divider/Label ===== */
#sidebar .smnav__divider{
  height: 1px;
  margin: 10px 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-radius: 999px;
}
#sidebar .smnav__label{
  margin: 6px 14px 4px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #aab6c3;
  opacity: .9;
}

/* ===== Live Channels: Icon + Badge ===== */
#sidebar .smnav .icon-img{
  width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

#sidebar .smnav .smnav__live{
  display: flex; align-items: center; gap: 10px;
  position: relative;
}

#sidebar .smnav .live-badge{
  margin-left: auto;
  font-size: .72rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
}

/* States */
#sidebar .smnav .smnav__live.is-live .live-badge{
  background: rgba(30, 214, 101, .16);
  border-color: rgba(30, 214, 101, .45);
  color: #9ff5c7;
}
#sidebar .smnav .smnav__live.is-off .live-badge{
  background: rgba(255, 61, 61, .12);
  border-color: rgba(255, 61, 61, .35);
  color: #ffb3b3;
}
#sidebar .smnav .smnav__live.is-unk .live-badge{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #cbd5e1;
}





/* === LEADERBOARD / CROWN ================================== */
/* Basismask-Defaults – einmal global (falls noch nicht gesetzt) */
.sidebar-nav.smnav .icon{
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-mode: alpha;       mask-mode: alpha;
}

/* Krone/Leaderboard: nutzt /static/img/nav/leaderboard.png */
.sidebar-nav.smnav .icon.crown,
.sidebar-nav.smnav .icon.leaderboard{
  color: #ffd36e; /* gold */
  -webkit-mask-image: url("/static/img/nav/leaderboard.png");
          mask-image: url("/static/img/nav/leaderboard.png");
}




/* --- PNG-Icons direkt rendern (ohne Mask) --- */
.sidebar-nav.smnav .icon{
  display:inline-block; width:28px; height:28px; flex:0 0 28px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-color: transparent !important;
  -webkit-mask: none !important; mask: none !important;
}

/* Pfade zu DEINEN PNGs */
.sidebar-nav.smnav .icon.home        { background-image:url("/static/img/nav/home.png"); }
.sidebar-nav.smnav .icon.gift        { background-image:url("/static/img/nav/giveaway.png"); }
.sidebar-nav.smnav .icon.leaderboard { background-image:url("/static/img/nav/leaderboard.png"); }
.sidebar-nav.smnav .icon.dashboard 	 { background-image:url("/static/img/nav/hometest2.png"); }
.sidebar-nav.smnav .icon.faq 	 { background-image:url("/static/img/nav/faq.png"); }
.sidebar-nav.smnav .icon.policies 	 { background-image:url("/static/img/nav/policies.png"); }
.sidebar-nav.smnav .icon.settings 	 { background-image:url("/static/img/nav/admin.png"); }
.sidebar-nav.smnav .icon.contact 	 { background-image:url("/static/img/nav/contact.png"); }


contact


/* === NAV + HAMBURGER: Schwarz→Rot Degradé + Glanz (global, mobil & desktop) === */

/* 1) Navigation – alle Varianten (.sidebar-nav, .smnav, .smnav--flat) */
#sidebar .sidebar-nav a{ position: relative; overflow: hidden; }

#sidebar .sidebar-nav a:hover,
#sidebar .sidebar-nav a:focus-visible,
#sidebar .sidebar-nav.smnav a:hover,
#sidebar .sidebar-nav.smnav a:focus-visible,
#sidebar .sidebar-nav.smnav.smnav--flat a:hover,
#sidebar .sidebar-nav.smnav.smnav--flat a:focus-visible{
  background: linear-gradient(135deg, #090b10 0%, #140a0a 48%, #2a0e0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 10px 24px rgba(64, 8, 8, .28);
  outline: none;
}

/* dezenter Glanz-Sweep beim Hover/Focus */
#sidebar .sidebar-nav a:hover::after,
#sidebar .sidebar-nav a:focus-visible::after{
  content: "";
  position: absolute; top: -30%; bottom: -30%; left: -40%;
  width: 45%; transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: sb-sheen 900ms ease-out forwards;
  pointer-events: none;
}

/* linke Akzentlinie etwas rötlicher */
#sidebar .sidebar-nav a:hover::before,
#sidebar .sidebar-nav a:focus-visible::before{
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,71,71,0), rgba(255,71,71,.75), rgba(255,71,71,0));
}

/* aktiver Eintrag im gleichen Look */
#sidebar .sidebar-nav a.is-active{
  background: linear-gradient(135deg, #0c0e14 0%, #1a0d0d 55%, #321010 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 34px rgba(96, 12, 12, .22);
}
#sidebar .sidebar-nav a.is-active::before{
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,61,61,0), rgba(255,61,61,.9), rgba(255,61,61,0));
}

@keyframes sb-sheen { to { left: 130%; } }
@media (prefers-reduced-motion: reduce){
  #sidebar .sidebar-nav a:hover::after,
  #sidebar .sidebar-nav a:focus-visible::after{ animation: none; opacity: .16; left: 0; right: 0; transform: none; }
}

/* 2) Hamburger-Button (.sidebar-toggle in deiner CSS ist der aktive Button) */
.sidebar-toggle{
  background: linear-gradient(180deg, #0b0c10 0%, #1a0d0d 100%);
  border: 1px solid #24262b;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.sidebar-toggle:hover{
  background: linear-gradient(180deg, #10131a 0%, #2a0e0e 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar-toggle:active{ transform: translateY(1px); }

/* Glanz-Sweep auch auf dem Button */
.sidebar-toggle{ position: relative; overflow: hidden; }
.sidebar-toggle:hover::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:-40%; width:45%;
  transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: sb-sheen 900ms ease-out forwards;
}

/* Burger-Linien etwas wärmer */
.sidebar-toggle span{ background: #ffe3da; }




/* Sidebar-Grundfläche: fast schwarz + dezenter Rot-Schimmer */
.sidebar, #sidebar{
  background:
    radial-gradient(900px 600px at 8% 0%, rgba(160, 24, 24, .06), transparent 60%),
    linear-gradient(180deg, #060708 0%, #09090c 100%);
}

/* mobil sicherstellen (überschreibt alte Mobile-Regeln) */
@media (max-width: 992px){
  #sidebar{
    background:
      radial-gradient(900px 600px at 8% 0%, rgba(160, 24, 24, .06), transparent 60%),
      linear-gradient(180deg, #060708 0%, #09090c 100%);
  }
}



/* === Desktop: Sidebar etwas breiter + größere Nav-Icons === */
@media (min-width: 993px){
  /* Breite/Versätze konsistent anheben */
  .sidebar, #sidebar { width: 272px !important; }
  .content           { margin-left: 272px !important; }
  .topbar            { left: 272px !important; }

  /* Icons leicht größer (greift für alle Nav-Varianten) */
  #sidebar .sidebar-nav .icon{
    width: 40px; height: 40px; flex: 0 0 32px;
  }
}



/* Sidebar: Scrollbar ausblenden (Scroll bleibt aktiv) */
#sidebar{
  overflow-y: auto;           /* weiter scrollen */
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
#sidebar::-webkit-scrollbar{  /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
  display: none;
}