/* ProjektZero — Hotel Russweiher Management Dashboard */
:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #232735;
  --accent: #e8a838;
  --accent2: #d4952f;
  --text: #e8e8e8;
  --text2: #9a9aa0;
  --green: #4caf50;
  --red: #e53935;
  --yellow: #ffb300;
  --blue: #2196f3;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background:var(--bg); color:var(--text); }
.layout { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
  width: 230px; background:var(--surface); padding:20px 15px;
  display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--surface2);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar h2 { font-size:1.2rem; margin-bottom:15px; color:var(--accent); }
.sidebar a {
  color:var(--text2); text-decoration:none; padding:10px 12px;
  border-radius:8px; font-size:0.92rem; transition:all 0.15s;
}
.sidebar a:hover { background:var(--surface2); color:var(--text); }
.sidebar a.active { background:var(--accent); color:#000; font-weight:600; }
.sidebar a.logout { margin-top:auto; color:var(--red); }
.sidebar hr { border-color:var(--surface2); margin:10px 0; }
.user-info { font-size:0.8rem; color:var(--text2); padding:5px 12px; }

/* Content */
.content { flex:1; padding:30px; overflow-y:auto; }
.content h1 { margin-bottom:20px; font-size:1.6rem; }

/* Stats Grid */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.stat-card {
  background:var(--surface); border-radius:12px; padding:25px;
  border:1px solid var(--surface2); text-align:center;
}
.stat-card h3 { color:var(--text2); font-size:0.9rem; margin-bottom:10px; }
.stat-num { font-size:2.2rem; font-weight:700; color:var(--accent); }

/* Badges */
.badge { padding:4px 10px; border-radius:12px; font-size:0.8rem; font-weight:500; }
.badge-frueh { background:#4caf50; color:#fff; }
.badge-spaet { background:#2196f3; color:#fff; }
.badge-nacht { background:#7b1fa2; color:#fff; }
.badge-frei { background:#757575; color:#fff; }
.badge-beantragt { background:#ff9800; color:#fff; }
.badge-genehmigt { background:#4caf50; color:#fff; }
.badge-abgelehnt { background:#f44336; color:#fff; }

/* Filter Section */
.filter-section { margin-bottom:20px; }
.filter-form { gap:10px; padding:15px; background:var(--surface); border-radius:8px; }
.week-form { display:flex; flex-direction:column; gap:16px; }
.week-table input, .week-table select {
  width:100%; padding:8px; border-radius:6px; border:1px solid var(--surface2);
  background:var(--bg); color:var(--text);
}
.checkbox-line { display:flex; align-items:center; gap:8px; color:var(--text2); }

/* Login */
.login-box {
  max-width:380px; margin:120px auto; background:var(--surface);
  border-radius:16px; padding:40px; text-align:center;
  border:1px solid var(--surface2);
}
.login-box h1 { color:var(--accent); margin-bottom:5px; }
.subtitle { color:var(--text2); margin-bottom:25px; font-size:0.9rem; }
.login-box form { display:flex; flex-direction:column; gap:12px; }
.login-box input {
  padding:12px 16px; border-radius:8px; border:1px solid var(--surface2);
  background:var(--bg); color:var(--text); font-size:1rem;
}
.login-box input:focus { outline:none; border-color:var(--accent); }
.login-box button {
  padding:12px; border:none; border-radius:8px;
  background:var(--accent); color:#000; font-weight:600; cursor:pointer;
  font-size:1rem;
}
.login-box button:hover { background:var(--accent2); }
.error { color:var(--red); margin-bottom:15px; font-size:0.9rem; }
.hint { color:var(--text2); font-size:0.8rem; margin-top:15px; }
.btn-staff {
  display:inline-block; margin-top:20px; padding:12px 24px;
  background:transparent; border:2px solid var(--accent); color:var(--accent);
  border-radius:8px; text-decoration:none; font-weight:600;
  transition:all 0.2s;
}
.btn-staff:hover { background:var(--accent); color:#000; }

/* Forms */
.add-form {
  background:var(--surface); border-radius:10px; padding:15px 20px;
  margin-bottom:20px; border:1px solid var(--surface2);
}
.add-form summary { cursor:pointer; font-size:1rem; color:var(--accent); padding:5px 0; }
.grid-form {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px; margin-top:15px;
}
.grid-form input, .grid-form select {
  padding:10px 12px; border-radius:6px; border:1px solid var(--surface2);
  background:var(--bg); color:var(--text); font-size:0.9rem;
}
.grid-form input:focus, .grid-form select:focus { outline:none; border-color:var(--accent); }
.grid-form button {
  padding:10px 20px; border:none; border-radius:6px;
  background:var(--accent); color:#000; font-weight:600; cursor:pointer;
}
.grid-form button:hover { background:var(--accent2); }

/* Tables */
.data-table { width:100%; border-collapse:collapse; background:var(--surface); border-radius:10px; overflow:hidden; }
.data-table th, .data-table td { padding:12px 15px; text-align:left; border-bottom:1px solid var(--surface2); font-size:0.9rem; }
.data-table th { background:var(--surface2); font-weight:600; color:var(--text2); }
.data-table tr:hover { background:var(--surface2); }
.data-table tr:last-child td { border-bottom:none; }
.low-stock { background:rgba(229,57,53,0.1); }

/* Buttons */
.btn-del { background:none; border:none; cursor:pointer; font-size:1.1rem; }
.btn-ok { background:var(--green); color:#fff; border:none; border-radius:4px; padding:6px 12px; cursor:pointer; }

/* Status badges */
.status-beantragt { color:var(--yellow); }
.status-genehmigt { color:var(--green); }
.status-abgelehnt { color:var(--red); }
.status-offen { color:var(--yellow); }
.status-bestellt { color:var(--blue); }
.status-geliefert { color:var(--green); }
.status-storniert { color:var(--red); }