/* ═══════════════════════════════════════════════
   SchulUmfrage Admin – Design-System: birkensen.com
   ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f1117;--surface:#161b22;--s2:#1c2333;--s3:#21262d;
  --border:#30363d;--border-m:#21262d;
  --text:#e6edf3;--muted:#8b949e;--dim:#6e7681;
  --blue:#388bfd;--blue-d:#1f6feb;
  --green:#3fb950;--green-d:#238636;
  --amber:#d29922;--amber-d:#9e6a03;
  --red:#f85149;--red-d:#da3633;
  --purple:#bc8cff;
  --r:6px;--rl:10px;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Cascadia Code','Fira Code','Consolas',monospace;
  --nav-h:56px;
}

body.light{
  --bg:#f6f8fa;--surface:#ffffff;--s2:#f0f2f5;--s3:#e8eaed;
  --border:#d0d7de;--border-m:#e8eaed;
  --text:#1f2328;--muted:#656d76;--dim:#909499;
  --blue:#0969da;--blue-d:#0550ae;
  --green:#1a7f37;--green-d:#116329;
  --amber:#9a6700;--amber-d:#7d5300;
  --red:#cf222e;--red-d:#a40e26;
  --purple:#6639ba;
}

body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;min-height:100vh;
}
body.light{background:var(--bg)}

/* ── UTILITIES ── */
.hidden{display:none!important}
.mb-2{margin-bottom:20px}
.mt-1{margin-top:10px}

/* ── NAVBAR ── */
.navbar{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:24px;padding:0 24px;
}
.nav-brand{
  font-weight:800;font-size:.9rem;
  display:flex;align-items:center;gap:8px;
}
.nav-brand-icon{
  width:28px;height:28px;background:var(--blue-d);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex-shrink:0;
}
.nav-links{display:flex;gap:4px;flex:1}
.nav-links a{
  padding:5px 12px;border-radius:var(--r);
  text-decoration:none;color:var(--muted);
  font-size:.82rem;font-weight:600;transition:all .15s;
}
.nav-links a:hover,.nav-links a.active{
  background:rgba(56,139,253,.1);color:var(--blue);
}
.nav-user{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem}

/* ── PAGE LAYOUT ── */
.main-content{max-width:1200px;margin:0 auto;padding:24px 20px}
.page-header{
  display:flex;justify-content:space-between;
  align-items:flex-start;margin-bottom:20px;
}
.page-header h2{font-size:1.3rem;font-weight:800}
.subtitle{color:var(--muted);font-size:.82rem;margin-top:3px}
.subtitle a{color:var(--blue);text-decoration:none}
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── CARD ── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);padding:20px;margin-bottom:16px;
}
.card h3{font-size:.875rem;font-weight:700;margin-bottom:14px}
.section-header{
  display:flex;justify-content:space-between;
  align-items:center;margin-bottom:14px;
}
.section-header h3{margin:0}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:var(--r);font-size:.82rem;
  font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid var(--border);background:transparent;
  color:var(--muted);transition:all .15s;font-family:var(--sans);
}
.btn:hover{background:var(--s3);color:var(--text)}
.btn-primary{background:var(--blue-d);color:#fff;border-color:var(--blue-d)}
.btn-primary:hover{background:var(--blue);border-color:var(--blue)}
.btn-success{background:var(--green-d);color:#fff;border-color:var(--green-d)}
.btn-success:hover{background:var(--green);border-color:var(--green)}
.btn-warning{background:var(--amber-d);color:#fff;border-color:var(--amber-d)}
.btn-warning:hover{background:var(--amber)}
.btn-danger{background:transparent;color:var(--red);border-color:rgba(248,81,73,.35)}
.btn-danger:hover{background:rgba(248,81,73,.1)}
.btn-info{background:rgba(56,139,253,.12);color:var(--blue);border-color:rgba(56,139,253,.25)}
.btn-sm{padding:4px 10px;font-size:.76rem}
.btn-full{width:100%;justify-content:center}
.btn-close{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--muted);padding:4px 8px}
.btn-close:hover{color:var(--text)}

/* ── STATUS BADGES ── */
.status-badge{
  display:inline-flex;align-items:center;padding:2px 9px;
  border-radius:20px;font-size:.72rem;font-weight:700;
  font-family:var(--mono);border:1px solid transparent;
}
.status-badge.status-active{background:rgba(63,185,80,.12);color:var(--green);border-color:rgba(63,185,80,.25)}
.status-badge.status-closed{background:var(--s3);color:var(--dim);border-color:var(--border)}
.status-badge.status-draft{background:rgba(210,153,34,.12);color:var(--amber);border-color:rgba(210,153,34,.25)}
.badge{background:var(--blue-d);color:#fff;padding:2px 8px;border-radius:12px;font-size:.72rem;font-weight:700}

/* ── TIMER CHIPS ── */
.timer-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600;
  font-family:var(--mono);border:1px solid transparent;
}
.timer-pending{background:rgba(210,153,34,.12);color:var(--amber);border-color:rgba(210,153,34,.25)}
.timer-active{background:rgba(56,139,253,.12);color:var(--blue);border-color:rgba(56,139,253,.25)}
.timer-running{background:rgba(63,185,80,.12);color:var(--green);border-color:rgba(63,185,80,.25)}
.timer-closed{background:var(--s3);color:var(--dim);border-color:var(--border)}
.timer-draft{background:rgba(210,153,34,.12);color:var(--amber);border-color:rgba(210,153,34,.25)}

/* ── SURVEY LIST ── */
.survey-list{display:flex;flex-direction:column;gap:16px}

/* ── DRAG & DROP ── */
.sc-drag-handle{
  cursor:grab;color:var(--dim);font-size:1.1rem;
  user-select:none;padding:2px 6px;border-radius:4px;
  transition:color .15s;
}
.sc-drag-handle:hover{color:var(--muted)}
.sc-drag-handle:active{cursor:grabbing}
.sc.dragging{opacity:.4;border-style:dashed}
.sc.drag-over{border-color:var(--blue);box-shadow:0 0 0 2px rgba(56,139,253,.3)}

.sc{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl)}
.sc.status-active{border-top:3px solid var(--green)}
.sc.status-closed{border-top:3px solid var(--dim)}
.sc.status-draft{border-top:3px solid var(--amber)}

.sc-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 20px;gap:12px;background:var(--s3);
  border-bottom:1px solid var(--border);border-radius:var(--rl) var(--rl) 0 0;
}
.sc-topbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sc-date{font-size:.75rem;color:var(--muted);white-space:nowrap;font-family:var(--mono)}

.sc-body{display:grid;grid-template-columns:1fr 260px}
.sc-left{padding:20px;border-right:1px solid var(--border);min-width:0}
.sc-title{font-size:1.05rem;font-weight:700;margin-bottom:5px}
.sc-desc{color:var(--muted);font-size:.82rem;margin-bottom:16px;line-height:1.5}

.sc-stats{
  display:flex;flex-wrap:wrap;gap:20px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border-m);
}
.sc-stat{display:flex;flex-direction:column;gap:2px}
.sc-stat-val{font-size:1rem;font-weight:800;color:var(--text);font-family:var(--mono)}
.sc-stat-lbl{font-size:.67rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sc-actions{display:flex;flex-wrap:wrap;gap:8px}

.sc-right{
  padding:16px;display:flex;flex-direction:column;gap:12px;
  background:var(--s2);border-radius:0 0 var(--rl) 0;min-width:0;
}
.sc-code-block{text-align:center}
.sc-code-label{
  font-size:.67rem;font-weight:700;color:var(--green);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;display:block;
}
.sc-code-value{
  display:block;font-size:1.8rem;font-weight:900;letter-spacing:.2em;
  color:var(--text);font-family:var(--mono);
  background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.25);
  border-radius:var(--r);padding:8px 12px;margin-bottom:8px;
}
.sc-qr-block{text-align:center}
.sc-qr{
  display:block;margin:0 auto 4px;width:140px;height:140px;
  border:1px solid var(--border);border-radius:var(--r);
  padding:6px;background:var(--surface);
}
.sc-qr-label{font-size:.72rem;color:var(--muted)}
.sc-link-block{display:flex;flex-direction:column;gap:6px}
.link-input{
  width:100%;padding:5px 9px;border:1px solid var(--border);
  border-radius:var(--r);font-size:.78rem;background:var(--s3);
  color:var(--text);box-sizing:border-box;font-family:var(--mono);
}

/* ── FORMS ── */
.form-group{margin-bottom:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row>*{min-width:0}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-row-3>*{min-width:0}
.flex-2{grid-column:span 2}

label{
  display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);margin-bottom:5px;
}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=datetime-local],textarea,select{
  width:100%;padding:7px 11px;background:var(--s3);
  border:1px solid var(--border);border-radius:var(--r);
  font-size:.875rem;color:var(--text);font-family:var(--sans);
  transition:border-color .15s,box-shadow .15s;box-sizing:border-box;appearance:none;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(56,139,253,.15);
}
textarea{resize:vertical}
select option{background:var(--s2)}

/* ── ALERTS ── */
.alert{padding:10px 14px;border-radius:var(--r);margin-bottom:14px;font-size:.82rem;border:1px solid transparent}
.alert-error{background:rgba(248,81,73,.1);color:var(--red);border-color:rgba(248,81,73,.3)}
.alert-success{background:rgba(63,185,80,.1);color:var(--green);border-color:rgba(63,185,80,.3)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-state span{font-size:2.5rem;display:block;margin-bottom:12px}
.empty-state a{color:var(--blue)}

/* ── QUESTION ITEMS ── */
.question-item{border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}
.question-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.q-text{font-size:.9rem;font-weight:600}
.q-type-badge{
  padding:2px 8px;border-radius:4px;font-size:.72rem;font-weight:700;
  background:rgba(56,139,253,.12);color:var(--blue);border:1px solid rgba(56,139,253,.25);
}
.q-required{font-size:.72rem;color:var(--muted);margin-left:auto}
.q-actions{display:flex;gap:4px}
.q-options{list-style:disc;padding-left:20px;margin-top:8px;color:var(--muted);font-size:.82rem}
.q-hint{font-size:.78rem;color:var(--dim);margin-top:6px}

/* ── MODAL ── */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-box{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);width:520px;max-width:95vw;max-height:90vh;
  overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}
.modal-header h3{font-size:.9rem;font-weight:700}
.modal-body{padding:16px 20px}
.modal-footer{padding:0 20px 16px;display:flex;gap:8px;justify-content:flex-end}
.option-row{display:flex;gap:8px;margin-bottom:6px}
.option-row input{flex:1}
.hint-box{
  background:rgba(56,139,253,.08);border:1px solid rgba(56,139,253,.25);
  border-radius:var(--r);padding:10px 14px;font-size:.82rem;color:var(--blue);margin-top:4px;
}

/* ── TABLE ── */
.table{width:100%;border-collapse:collapse}
.table th{
  text-align:left;padding:8px 12px;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  border-bottom:1px solid var(--border);
}
.table td{padding:10px 12px;border-bottom:1px solid var(--border-m);font-size:.84rem}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(56,139,253,.03)}

/* ── RESULTS ── */
.result-card{margin-bottom:14px}
.result-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.q-num{
  width:26px;height:26px;border-radius:50%;
  background:var(--blue-d);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;flex-shrink:0;
}
.q-meta{font-size:.78rem;color:var(--muted);margin-left:8px}
.text-answers{display:flex;flex-direction:column;gap:8px}
.text-answer{
  background:var(--s3);border-left:3px solid var(--blue-d);
  padding:10px 14px;border-radius:0 var(--r) var(--r) 0;font-size:.84rem;
}
.avg-display{font-size:1.8rem;font-weight:800;color:var(--blue);margin-bottom:14px;font-family:var(--mono)}
.avg-scale{font-size:.9rem;color:var(--muted)}
.avg-labels{font-size:.78rem;color:var(--muted);margin-left:8px}
.bar-chart{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-label{min-width:120px;font-size:.82rem;text-align:right;color:var(--text)}
.bar-track{flex:1;height:16px;background:var(--s3);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.bar-fill{height:100%;background:var(--blue-d);border-radius:4px;transition:width .3s;min-width:2px}
.bar-val{min-width:70px;font-size:.82rem;color:var(--muted);font-family:var(--mono)}
.bar-val small{font-size:.72rem}

/* ── LOGIN ── */
.login-page{
  min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:40px 16px;background:var(--bg);
}
.login-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);padding:32px;width:100%;max-width:400px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo .logo-icon{font-size:2.5rem;display:block}
.login-logo h1{font-size:1.3rem;font-weight:800;margin-top:8px}
.login-logo p{color:var(--muted);font-size:.82rem}

/* ── PROFILE ── */
.profile-layout{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start}
.profile-left{display:flex;flex-direction:column;gap:16px}
.profile-right{min-width:0}
.tl{color:var(--muted);width:130px;font-size:.82rem}

/* ── USER LIST ── */
.user-list{display:flex;flex-direction:column;gap:0}
.user-row{padding:12px 0;border-bottom:1px solid var(--border)}
.user-row:last-child{border-bottom:none}
.user-row-me{background:rgba(63,185,80,.05);margin:0 -20px;padding:12px 20px}
.user-row-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.user-row-name{display:flex;align-items:center;gap:8px;font-size:.88rem}
.user-dname{color:var(--muted);font-size:.8rem;font-weight:400}
.user-row-meta{font-size:.75rem;color:var(--muted);font-family:var(--mono)}
.user-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.role-select{
  padding:3px 8px;border:1px solid var(--border);border-radius:var(--r);
  font-size:.8rem;cursor:pointer;background:var(--s3);color:var(--text);
}
.reset-form{border-top:1px dashed var(--border);padding-top:10px}

/* ── THEME BUTTON ── */
.theme-btn{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:var(--r);padding:4px 10px;font-size:.7rem;font-weight:600;
  cursor:pointer;transition:background .1s,color .1s;font-family:var(--sans);letter-spacing:.02em;
}
.theme-btn:hover{background:var(--s3);color:var(--text)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sc-body{grid-template-columns:1fr}
  .sc-left{border-right:none;border-bottom:1px solid var(--border)}
  .sc-right{border-radius:0 0 var(--rl) var(--rl)}
  .sc-code-value{font-size:1.4rem}
  .sc-qr{width:110px;height:110px}
}
@media(max-width:600px){
  .form-row,.form-row-3,.grid-2col{grid-template-columns:1fr}
  .modal-box{width:95vw}
  .navbar{padding:0 12px;gap:12px}
}
@media(max-width:900px){.profile-layout{grid-template-columns:1fr}}