/* ===== Luz Pura Cartel — Verwaltung ==================================== */
:root{
  --bg:#0f0f0e; --panel:#151513; --panel-2:#1c1b18; --panel-3:#232220;
  --line:#2a2825; --line-soft:#211f1d;
  --text:#e9e5dd; --muted:#8b857a; --muted-2:#655f56;
  --gold:#c0982f; --gold-2:#d9b45a; --gold-soft:rgba(192,152,47,.12);
  --red:#9b2c2c; --red-2:#cf6a6a; --green:#4a8b57; --green-2:#7bb489; --amber:#b1801f; --amber-2:#d3a248;
  --radius:6px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); font-size:14px; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
h1,h2,h3{margin:0; font-weight:600}
.muted{color:var(--muted); font-size:13px; margin:3px 0 0}
.small{font-size:12px}
.right{text-align:right}

/* ---------- Monogramm ---------- */
.mark{
  width:52px; height:52px; margin:0 auto 16px; display:grid; place-items:center;
  font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:1px; color:var(--gold-2);
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
}
.mark.small{width:34px; height:34px; font-size:13px; margin:0}

/* ---------- Login ---------- */
.login-screen{min-height:100dvh; display:grid; place-items:center; padding:24px}
.login-card{
  width:100%; max-width:360px; padding:32px 28px 26px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
}
.login-card h1{font-family:var(--serif); font-size:24px; letter-spacing:.4px}
.login-card .sub{color:var(--muted); font-size:12px; margin:6px 0 24px}
.login-card label,.modal label{display:block; text-align:left; font-size:12.5px; color:var(--muted); margin-bottom:14px}
.login-card input{margin-top:6px}

/* ---------- Formularelemente ---------- */
input,select,textarea,.input{
  width:100%; padding:9px 11px; font:inherit; font-size:14px; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  outline:none; transition:border-color .12s;
}
textarea{resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%238b857a' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6); cursor:pointer}
::placeholder{color:var(--muted-2)}

.btn{
  padding:9px 14px; font:inherit; font-size:13.5px; font-weight:500; border-radius:var(--radius);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  cursor:pointer; transition:background .12s, border-color .12s; white-space:nowrap;
}
.btn:hover{background:var(--panel-3); border-color:#38352f}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#191400; font-weight:600}
.btn-gold:hover{background:var(--gold-2); border-color:var(--gold-2)}
.btn-red{background:var(--red); border-color:var(--red); color:#fff}
.btn-red:hover{background:#b13434; border-color:#b13434}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--panel-2)}
.btn-sm{padding:5px 10px; font-size:12.5px}
.btn-quiet{background:transparent; color:var(--muted)}
.btn-quiet:hover{background:transparent; border-color:var(--red); color:var(--red-2)}
.btn-block{width:100%; margin-top:4px; padding:10px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.icon-btn{background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; padding:3px 7px; border-radius:4px; line-height:1}
.icon-btn:hover{color:var(--text)}
.link-btn{background:none; border:none; color:var(--muted); font:inherit; font-size:13px; text-align:left;
  padding:6px 2px; cursor:pointer}
.link-btn:hover{color:var(--text)}
.link-btn.danger:hover{color:var(--red-2)}
.form-error{background:rgba(155,44,44,.12); border:1px solid rgba(207,106,106,.35); color:#e5a3a3;
  padding:9px 11px; border-radius:var(--radius); font-size:13px; margin-bottom:14px}

/* ---------- Layout ---------- */
.app{display:flex; min-height:100dvh}
.sidebar{
  width:212px; flex:0 0 212px; padding:18px 12px; display:flex; flex-direction:column;
  background:var(--panel); border-right:1px solid var(--line); position:sticky; top:0; height:100dvh;
}
.brand{display:flex; align-items:center; gap:10px; padding:2px 6px 20px}
.brand-name{font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:.3px; line-height:1.2}
.brand-sub{font-size:11px; color:var(--muted); margin-top:2px}

.nav{display:flex; flex-direction:column; gap:1px; flex:1}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  background:none; border:none; border-left:2px solid transparent; border-radius:0 var(--radius) var(--radius) 0;
  color:var(--muted); font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
  transition:color .12s, background .12s;
}
.nav-item svg{width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor;
  stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round}
.nav-item:hover{color:var(--text); background:var(--panel-2)}
.nav-item.active{color:var(--text); background:var(--panel-2); border-left-color:var(--gold)}
.nav-item.active svg{stroke:var(--gold-2)}
.nav-count{margin-left:auto; font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums}

.sidebar-foot{display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--line-soft); padding-top:12px}
.user-chip{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text); padding:2px 2px 8px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--green-2)}
.burger{display:none; position:fixed; top:12px; left:12px; z-index:40; background:var(--panel);
  border:1px solid var(--line); color:var(--text); font-size:15px; padding:6px 10px; border-radius:var(--radius); cursor:pointer}

.main{flex:1; padding:26px 30px 60px; min-width:0}
.view-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line-soft)}
.view-head h2{font-size:19px; letter-spacing:.2px}
.date-nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.date-nav .input{width:auto}

/* ---------- Kennzahlen ---------- */
.stat-row{display:flex; flex-wrap:wrap; gap:26px; padding:0 0 18px; margin-bottom:0}
.stat{min-width:74px}
.stat-val{font-size:19px; font-weight:600; font-variant-numeric:tabular-nums}
.stat-lbl{font-size:12px; color:var(--muted); margin-top:1px}
.stat.green .stat-val{color:var(--green-2)}
.stat.red .stat-val{color:var(--red-2)}
.stat.amber .stat-val{color:var(--amber-2)}

/* ---------- Toolbar ---------- */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar #search{flex:1; min-width:190px; max-width:340px}
.toolbar select{width:auto; min-width:140px}
.bulk{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.save-area{margin-left:auto; display:flex; align-items:center; gap:12px}
.chip{padding:6px 11px; font:inherit; font-size:12.5px; border-radius:var(--radius); cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted); transition:color .12s, border-color .12s}
.chip:hover{color:var(--text); border-color:#38352f}
.chip-green:hover{color:var(--green-2)}
.chip-amber:hover{color:var(--amber-2)}
.chip-red:hover{color:var(--red-2)}

/* ---------- Tabellen ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.table-wrap{overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px}
.table th{
  text-align:left; padding:10px 14px; font-size:12px; font-weight:500; color:var(--muted);
  background:var(--panel-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td{padding:10px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--panel-2)}
.name-main{font-weight:500}
.name-sub{font-size:12px; color:var(--muted-2); margin-top:2px; max-width:300px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.empty{padding:36px 20px; text-align:center; color:var(--muted); font-size:13.5px}
.row-actions{display:flex; gap:6px; justify-content:flex-end}

/* Rang */
.rank{display:inline-block; padding:2px 8px; border-radius:3px; font-size:12.5px; white-space:nowrap;
  background:var(--panel-3); border:1px solid var(--line); color:var(--muted)}
.rank.t1{border-color:rgba(192,152,47,.5); color:var(--gold-2); background:var(--gold-soft)}
.rank.t2{border-color:rgba(192,152,47,.28); color:#bda468}
.rank.t3{border-color:rgba(155,44,44,.4); color:#c98d8d}
.rank.t4{color:#9a938a}

.badge{display:inline-block; padding:2px 8px; border-radius:3px; font-size:12.5px; border:1px solid var(--line); color:var(--muted)}
.badge.ok{color:var(--green-2); border-color:rgba(74,139,87,.45)}
.badge.off{color:var(--muted)}
.badge.warn{color:var(--amber-2); border-color:rgba(177,128,31,.45)}
.badge.eye{color:var(--red-2); border-color:rgba(155,44,44,.5)}

/* Anwesenheits-Auswahl */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.seg button{padding:5px 11px; font:inherit; font-size:12.5px; border:none; border-right:1px solid var(--line);
  background:var(--bg); color:var(--muted); cursor:pointer; white-space:nowrap; transition:background .12s, color .12s}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--text); background:var(--panel-3)}
.seg button.on[data-s=anwesend]{background:rgba(74,139,87,.2); color:var(--green-2)}
.seg button.on[data-s=abgemeldet]{background:rgba(177,128,31,.2); color:var(--amber-2)}
.seg button.on[data-s=unabgemeldet]{background:rgba(155,44,44,.25); color:var(--red-2)}
.note-input{background:transparent; border-color:transparent; padding:6px 8px; font-size:13px}
.note-input:hover{border-color:var(--line)}

.bar{height:5px; background:var(--panel-3); border-radius:2px; overflow:hidden; min-width:80px}
.bar span{display:block; height:100%; background:var(--green)}
.quote{display:flex; align-items:center; gap:9px; font-size:13px; font-variant-numeric:tabular-nums}

/* ---------- Modal ---------- */
.modal-back{position:fixed; inset:0; background:rgba(0,0,0,.62); display:grid; place-items:center; padding:20px; z-index:50}
.modal{width:100%; max-width:520px; background:var(--panel); border:1px solid var(--line); border-radius:8px}
.modal.small{max-width:380px}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15px; font-weight:600}
.modal form,.modal-body{padding:20px}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); margin:20px -20px -20px}
.modal-body + .modal-foot{margin:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.grid2 .full{grid-column:1/-1}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:99;
  background:var(--panel-3); border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:var(--radius); font-size:13.5px}
.toast.err{border-color:var(--red); color:#e5a3a3}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .sidebar{position:fixed; z-index:35; left:0; top:0; transform:translateX(-100%); transition:transform .18s ease}
  .sidebar.open{transform:none}
  .burger{display:block}
  .main{padding:56px 14px 50px}
  .grid2{grid-template-columns:1fr}
  .save-area{margin-left:0; width:100%; justify-content:flex-end}
  .stat-row{gap:18px}
}

/* ---------- Passwortfelder ---------- */
.pw-field{position:relative; margin-top:6px}
.pw-field .input{padding-right:78px}
.pw-toggle{position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); font:inherit; font-size:12.5px;
  padding:4px 7px; border-radius:4px; cursor:pointer}
.pw-toggle:hover{color:var(--text)}
.pw-field .input[type=text]{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:.3px}
.pw-tools{display:flex; gap:6px; margin:-6px 0 14px}

/* ---------- Sanktionsliste ---------- */
.rule-section{background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:14px; overflow:hidden}
.rule-head{display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.rule-sec-no{font-family:var(--serif); font-size:15px; color:var(--gold-2); white-space:nowrap}
.rule-sec-title{font-weight:500; flex:1; min-width:0}
.rule-head .row-actions{flex:0 0 auto}
.rule-row{display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--line-soft)}
.rule-row:last-child{border-bottom:none}
.rule-row:hover{background:var(--panel-2)}
.rule-no{color:var(--muted); font-size:13px; white-space:nowrap; min-width:52px}
.rule-text{flex:1; min-width:0}
.rule-amount{font-variant-numeric:tabular-nums; color:var(--gold-2); white-space:nowrap}
.rule-amount.none{color:var(--muted-2)}
.rule-foot{padding:9px 14px; border-top:1px solid var(--line-soft)}
.rule-empty{padding:14px; color:var(--muted); font-size:13px}

/* ---------- Sanktionen ---------- */
.money{font-variant-numeric:tabular-nums; white-space:nowrap}
.src{font-size:11.5px; color:var(--muted-2)}
.badge.auto{color:var(--amber-2); border-color:rgba(177,128,31,.45)}
.wh-ok{color:var(--green-2); font-size:12.5px}
.wh-err{color:var(--red-2); font-size:12.5px}
.wh-off{color:var(--muted-2); font-size:12.5px}

pre{margin:0; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:12.5px; line-height:1.6;
  color:var(--text); white-space:pre-wrap; word-break:break-word; overflow-x:auto}
.preview-box{margin:4px 0 14px}
.preview-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.check{display:flex !important; align-items:center; gap:8px; font-size:13px; color:var(--text) !important; margin-bottom:14px}
.check input{width:auto; margin:0}