:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --ink:#0f172a;
  --ink-soft:#475569;
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#e2e8f0;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --radius:8px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}

.tf-statusbar{
  background:#0b1220; color:#94a3b8; font-size:12px;
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding:4px 16px; font-variant-numeric:tabular-nums;
}
.tf-statusbar .tf-version{color:#64748b;}

nav{
  background:var(--ink); color:#fff; padding:0 20px;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
nav .brand{font-weight:700; font-size:17px; padding:14px 16px 14px 0; color:#fff;}
nav a{color:#cbd5e1; padding:14px 12px; font-size:14px;}
nav a:hover{color:#fff; text-decoration:none;}
nav a.active{color:#fff; border-bottom:2px solid var(--primary);}
nav .spacer{flex:1;}
nav .user{color:#94a3b8; font-size:13px; padding:14px 12px;}

.wrap{max-width:900px; margin:0 auto; padding:28px 20px 80px;}

h1{font-size:22px; margin:0 0 6px;}
h2{font-size:16px; margin:28px 0 10px; color:var(--ink);}
.sub{color:var(--ink-soft); font-size:14px; margin:0 0 20px;}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px;}

.status-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600;}
.badge.off{background:#f1f5f9; color:var(--ink-soft);}
.badge.on{background:#dcfce7; color:var(--ok);}
.badge.pause{background:#fef3c7; color:var(--warn);}
.badge dot{width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block;}

.btn{
  display:inline-block; padding:9px 16px; border-radius:6px; border:none;
  font-size:14px; font-weight:600; cursor:pointer; background:var(--primary); color:#fff;
}
.btn:hover{background:var(--primary-dark);}
.btn.secondary{background:#fff; color:var(--ink); border:1px solid var(--line);}
.btn.secondary:hover{background:var(--bg);}
.btn.danger{background:var(--danger);}
.btn.ok{background:var(--ok);}
form.inline{display:inline;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);}
th{color:var(--ink-soft); font-weight:600; font-size:12.5px;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr;}}

.stat{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
.stat .label{font-size:12.5px; color:var(--ink-soft);}
.stat .value{font-size:22px; font-weight:700; margin-top:2px;}
.stat .value.pos{color:var(--ok);}
.stat .value.neg{color:var(--danger);}

label{display:block; font-size:13px; color:var(--ink-soft); margin:10px 0 4px;}
input,select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-size:14px;
  font-family:inherit; background:#fff; color:var(--ink);
}
textarea{resize:vertical; min-height:60px;}

.pill{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600;}
.pill.offen{background:#fef3c7; color:var(--warn);}
.pill.genehmigt{background:#dcfce7; color:var(--ok);}
.pill.abgelehnt{background:#fee2e2; color:var(--danger);}
.pill.storniert{background:#f1f5f9; color:var(--ink-soft);}

.error{background:#fee2e2; color:var(--danger); padding:10px 14px; border-radius:6px; font-size:14px; margin-bottom:14px;}

.login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh;}
.login-card{width:340px;}
.login-card h1{text-align:center; margin-bottom:4px;}
.login-card .sub{text-align:center;}

.muted{color:var(--ink-soft); font-size:13px;}