/* MG13 Verwaltung - dunkles Layout mit hellblauen Akzenten */
:root{
  --bg:#0e1013; --panel:#14171b; --panel-2:#1a1e24; --panel-3:#21262d;
  --line:#272d35; --line-soft:#1f242b;
  --text:#e6e9ee; --muted:#8a919c; --muted-2:#5f6670;
  --accent:#5fb3e6; --accent-2:#8fd0f5; --accent-soft:rgba(95,179,230,.14); --accent-line:rgba(95,179,230,.45);
  --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}
a{color:var(--accent-2)}
a:hover{color:var(--text)}
code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:12.5px;
  background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:2px 6px; word-break:break-all}

/* ---------- Monogramm ---------- */
.mark{
  width:52px; height:52px; margin:0 auto 16px; display:grid; place-items:center;
  font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:1px; color:var(--accent-2);
  background:var(--panel-2); border:1px solid var(--accent-line); border-radius:var(--radius);
}
.mark.small{width:34px; height:34px; font-size:12px; 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,.form label{display:block; text-align:left; font-size:12.5px; color:var(--muted); margin-bottom:14px}
.login-card input,.modal label input,.modal label select,.modal label textarea,
.form label input,.form label select,.form label textarea{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(--accent)}
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='%238a919c' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-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:#343b45}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#06111a; font-weight:600}
.btn-accent:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-red{background:var(--red); border-color:var(--red); color:#fff}
.btn-red:hover{background:#b13434; border-color:#b13434}
.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)}
.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(--accent)}
.nav-item.active svg{stroke:var(--accent-2)}
.nav-count{margin-left:auto; font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.nav-count.hot{color:var(--accent-2)}

.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}
.view-head > div:first-child{flex:1 1 320px; min-width:0}
.view-head .muted{max-width:760px}
.view-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Kennzahlen ---------- */
.stat-row{display:flex; flex-wrap:wrap; gap:26px; padding:0 0 18px}
.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.accent .stat-val{color:var(--accent-2)}
.stat.green .stat-val{color:var(--green-2)}
.stat.muted .stat-val{color:var(--muted)}

/* ---------- Toolbar & Tabs ---------- */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar input[type=search]{flex:1; min-width:190px; max-width:340px}
.toolbar select{width:auto; min-width:140px}
.tabs{display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tabs button{padding:6px 13px; 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}
.tabs button:last-child{border-right:none}
.tabs button:hover{color:var(--text); background:var(--panel-3)}
.tabs button.on{background:var(--accent-soft); color:var(--accent-2)}

/* ---------- Tabellen ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.card + .card{margin-top:16px}
.card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px;
  background:var(--panel-2); border-bottom:1px solid var(--line)}
.card-head h3{font-size:14px}
.card-body{padding:16px}
.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 th.right,.table td.right{text-align:right}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--panel-2)}
.table tr.now td{background:rgba(95,179,230,.05)}
.name-main{font-weight:500}
.name-sub{font-size:12px; color:var(--muted-2); margin-top:2px; max-width:320px; 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}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

.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.set{border-color:var(--accent-line); color:var(--accent-2); background:var(--accent-soft)}

.badge{display:inline-block; padding:2px 8px; border-radius:3px; font-size:12.5px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.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.bad{color:var(--red-2); border-color:rgba(155,44,44,.5)}
.badge.vac{color:var(--accent-2); border-color:var(--accent-line)}
.badge.abg{color:var(--amber-2); border-color:rgba(177,128,31,.45)}

/* ---------- 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; max-height:calc(100vh - 40px); overflow-y:auto; 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:space-between; gap:8px; padding:14px 20px; border-top:1px solid var(--line); margin:20px -20px -20px}
.modal-foot .spacer{flex:1}
.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; max-width:calc(100vw - 40px)}
.toast.err{border-color:var(--red); color:#e5a3a3}

/* ---------- Einstellungen ---------- */
.form{max-width:640px}
.form .grid2{max-width:none}
.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)}
.hint{font-size:12px; color:var(--muted); margin:-8px 0 14px; line-height:1.5}
.check-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.check-list li{display:flex; gap:10px; align-items:flex-start; font-size:13px}
.check-list .ok{color:var(--green-2)}
.check-list .bad{color:var(--red-2)}
.check-list .info{color:var(--muted)}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------- Logbuch ---------- */
.log-detail{font-size:12px; color:var(--muted); white-space:pre-line; margin-top:3px}

/* ---------- 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}
  .stat-row{gap:18px}
}