:root{--bg:#0b0f19;--card:#121a2b;--text:#e7ecff;--muted:#aab3d6;--border:#24314f;--accent:#7aa2ff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:linear-gradient(180deg,#070a12 0%, #0b0f19 60%, #070a12 100%);color:var(--text)}
a{color:var(--accent);text-decoration:none}
/* Default links underline on hover (except header/nav buttons, see below) */
 a:hover{text-decoration:underline}
.container{max-width:980px;margin:0 auto;padding:16px}
.topbar{position:sticky;top:0;background:rgba(11,15,25,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
.topbar .container{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{font-weight:700}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.card{background:rgba(18,26,43,.9);border:1px solid var(--border);border-radius:14px;padding:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:10px}
.btn{display:inline-block;background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#0b0f19;font-weight:650}
.btn.danger{border-color:#ff6b6b;color:#ffb4b4}
input,select{background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:8px 10px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--muted);font-weight:600;text-align:left}
.small{color:var(--muted);font-size:.9rem}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:3px 9px;color:var(--muted);font-size:.85rem}
.progress{height:10px;background:#0b1223;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress>div{height:100%;background:var(--accent);width:0%}
.song-title{font-weight:650}
.vote-options{display:flex;gap:10px;flex-wrap:wrap}
.vote-options label{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;cursor:pointer}
.vote-options input{margin:0}
.footer{border-top:1px solid var(--border);margin-top:24px;color:var(--muted)}
.notice{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(122,162,255,.08)}
.error{border-color:#ff6b6b;color:#ffb4b4;background:rgba(255,107,107,.08)}
.success{border-color:#2dd4bf;color:#bff7ef;background:rgba(45,212,191,.08)}


/* Floating toast (better contrast on red header, doesn't shift layout) */
#toast{
  position:fixed;
  top:84px;
  right:16px;
  z-index:9999;
  min-width:220px;
  max-width:min(420px, calc(100vw - 32px));
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  transform:translateY(-6px);
  opacity:0;
  pointer-events:none;
}
#toast.show{opacity:1; transform:translateY(0); pointer-events:auto; transition:opacity .14s ease, transform .14s ease;}
#toast.notice.success{border-left:6px solid var(--success, #067647);}
#toast.notice.error{border-left:6px solid var(--danger, #E30613);}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filterbar .btn{padding:6px 10px}
.filterbar .btn.active{background:rgba(156,175,13,.20);border-color:var(--accent)}


/* --- Vote highlighting (shows selection clearly, even when frozen/disabled) --- */
tr.vote-ja { background: rgba(46, 125, 50, 0.12); }
tr.vote-nein { background: rgba(198, 40, 40, 0.12); }
tr.vote-egal, tr.vote-neutral { background: rgba(120, 120, 120, 0.10); }

body.frozen tr.vote-ja { background: rgba(46, 125, 50, 0.22); }
body.frozen tr.vote-nein { background: rgba(198, 40, 40, 0.22); }
body.frozen tr.vote-egal, body.frozen tr.vote-neutral { background: rgba(120, 120, 120, 0.18); }

/* Make radio buttons easier to see/tap */
input[type="radio"] { transform: scale(1.25); margin-right: 6px; }

/* Optional: dim controls when frozen */
body.frozen .vote-controls { opacity: 0.85; }


/* --- Branding theme (Musikschule) --- */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0d1b2a;
  --muted:#4a5b6b;
  --border:#d7e0ea;
  /* Musikschule Hildesheim Farben */
  --accent:#9CAF0D;   /* Gruen */
  --accent2:#E30613;  /* Rot */
  --danger:#E30613;
  --success:#067647;
}

body{background:var(--bg); color:var(--text);}
.topbar{background:#E30613;border-bottom:1px solid rgba(0,0,0,.15);}
.topbar a{color:#fff;}
/* No underline in header/navigation */
.topbar a:hover{opacity:.9;text-decoration:none;}
.brand-wrap{display:flex; align-items:center; gap:12px;}
.brand-logo{
  height:64px;
  width:auto;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  padding:10px 14px;
  border-radius:14px;

  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
}

.brand-logo.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  height:60px;
  width:60px;
  font-size:24px;
  color:#9CAF0D;
  font-weight:700;
}
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-app{font-weight:800; letter-spacing:.2px; font-size:16px; color:#fff;}
.brand-org{font-size:12px; opacity:.85; color:#fff;}

.card{background:var(--card); border:1px solid var(--border); box-shadow:0 10px 30px rgba(10,43,76,.06);}
.table th{color:var(--muted);}

.vote-row{border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--card);}
.vote-row + .vote-row{margin-top:10px;}
.vote-row.is-frozen{opacity:.92; filter:saturate(.85);}

/* Make selected radios more visible (especially when frozen) */
.choice input[type="radio"]{
  width:18px;height:18px; accent-color:var(--accent);
}
.choice label{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background:#fff;
}
.choice input[type="radio"]:checked + span{font-weight:800; color:var(--accent2);}
.choice label:has(input[type="radio"]:checked){
  border-color:rgba(11,74,162,.35);
  box-shadow:0 0 0 3px rgba(11,74,162,.12);
}

/* Freeze notice */
.freeze-banner{
  border:1px solid rgba(180,35,24,.35);
  background:rgba(180,35,24,.08);
  color:var(--danger);
  padding:12px 14px;
  border-radius:14px;
  font-weight:800;
}
.freeze-banner strong{font-weight:900;}

/* Prevent table jump when showing toast messages */




/* Admin dashboard layout */
.admin-sections{grid-template-columns:1fr;}
@media (min-width: 820px){.admin-sections{grid-template-columns:1fr 1fr;}}


/* Modal dialog for admin edits (prevents table from jumping) */
dialog.sv-dialog{
  border: none;
  padding: 0;
  background: transparent;
  width: min(720px, calc(100vw - 24px));
}
dialog.sv-dialog::backdrop{
  background: rgba(0,0,0,.45);
}
.sv-dialog__panel{
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}




/* Header navigation as pills (readable + touch friendly) */
.topnav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.navbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  line-height:1;
  border:2px solid rgba(156,175,13,.35);
  background:#ffffff;
  color:#111 !important;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}

.navbtn .navicon{
  font-size: 1.05em;
  line-height: 1;
}

.navbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border-color: rgba(156,175,13,.65);
  text-decoration:none;
}

.navbtn.active{
  background:#9CAF0D;
  border-color:#9CAF0D;
  color:#fff !important;
}

.navbtn.active .navicon{ filter: saturate(1.1); }

.navbtn.danger{
  border-color: rgba(227,6,19,.45);
  color:#E30613 !important;
}

.navbtn.danger:hover{
  border-color: rgba(227,6,19,.75);
}

.navbtn.danger:active{
  transform: translateY(0);
}

.navbtn.danger:hover,
.navbtn.danger:focus{
  /* keep text readable on hover */
}

.navbtn.danger.active{
  background:#E30613;
  border-color:#E30613;
  color:#fff !important;
}

@media (max-width: 640px){
  .topnav{ justify-content:flex-start; gap:8px; }
  .navbtn{ padding:10px 12px; }
}
.brand-badge{
  display:flex;
  align-items:center;
  gap:12px;

  background:#fff;
  padding:10px 14px;
  border-radius:14px;

  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.brand-badge .brand-logo{
  height:52px;
  width:auto;
  display:block;
  padding:0;            /* wichtig: falls du vorher padding am img hattest */
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

.brand-text{ line-height:1.05; }

.brand-app{
  font-weight:900;
  font-size:18px;
  color:#111;
}

.brand-org{
  font-weight:700;
  font-size:13px;
  color:#333;
  opacity:.9;
}

@media (max-width: 520px){
  .brand-org{ display:none; }
  .brand-app{ font-size:16px; }
}

/* Login-Seite zentrieren + großes Logo */
.auth-page{
  min-height: calc(100vh - 60px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:40px;
}

.auth-card{
  width: min(520px, 100%);
  padding: 22px;
}

.auth-logo-wrap{
  display:flex;
  justify-content:center;
  margin-bottom: 10px;
}

.auth-logo{
  width:140px;
  height:auto;
}

.auth-title{
  margin: 0;
  text-align: center;
}

.auth-card{
  width:420px;
  max-width:92%;
  padding:28px;

  display:flex;
  flex-direction:column;
  gap:14px;
}

.auth-card form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.auth-card form label{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.auth-card form input{
  width:260px;
  max-width:100%;
  margin-top:4px;
}

/* --- Top 5 heatbar --- */
.heatbar{
  height:10px;
  background: rgba(0,0,0,.08);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
  min-width: 120px;
}
.heatbar > div{ height:100%; }
.heatbar .heat-pos{ background: rgba(156,175,13,.9); }
.heatbar .heat-neg{ background: rgba(227,6,19,.85); }


/* --- Responsive header navigation (single line + burger on small screens) --- */
.topbar .container{flex-wrap:nowrap; position:relative;}
.topnav{flex-wrap:nowrap;}

.navtoggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.navtoggle:hover{background:rgba(255,255,255,.20);}

@media (max-width: 980px){
  .navbtn{padding:9px 12px; font-size:14px;}
  .navbtn .navicon{font-size:1em;}
}

/* Switch to burger menu at <= 780px */
@media (max-width: 780px){
  /* keep the brand visible, move nav into a dropdown */
  .navtoggle{display:inline-flex;}
  .topnav{display:none;}
  .topnav.open{
    display:flex;
    position:absolute;
    right:16px;
    top:68px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:#fff;
    padding:12px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px;
    box-shadow:0 18px 50px rgba(0,0,0,.25);
    z-index:999;
  }
  .topnav.open .navbtn{width:100%; justify-content:flex-start;}
}


/* Global Toast (Voting + Admin) */
.toast{
  position:fixed;
  right:16px;
  top:90px;
  z-index:9999;
  max-width:min(420px, calc(100vw - 32px));
}

.toast .msg{
  margin:0;
  padding:12px 14px 12px 16px;
  background:#ffffff;
  color:#111;
  border:1px solid rgba(0,0,0,.08);
  border-left:6px solid #9CAF0D;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  font-weight:600;
}

.toast .notice.success.msg{
  border-left-color:#9CAF0D;
}

.toast .notice.error.msg{
  border-left-color:#E30613;
}

/* Notiz speichern Button – subtil hervorgehoben */
.btn-note{
  border:1px solid #9CAF0D;
  color:#6f8209;
  background:#f6f9e6;
  padding:6px 12px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}

.btn-note:hover{
  background:#e9f1c6;
  border-color:#9CAF0D;
  transform:translateY(-1px);
}

.btn-note:active{
  transform:translateY(0);
}