/* Urlaubsplaner – Basis-Styles */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f5f6f8; color: #1f2937; }
body { min-height: 100vh; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
a.danger { color: #dc2626; }

.topbar { background: #1f2937; color: #fff; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.topbar .brand { font-weight: 700; font-size: 18px; }
.topbar nav a { color: #fff; margin-left: 16px; }
.topbar .who { color: #9ca3af; margin-right: 16px; }

.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

h1 { margin: 0 0 16px; font-size: 24px; }
h2 { margin: 32px 0 12px; font-size: 18px; color: #374151; }

.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.row.gap { gap: 12px; }
.row .grow { flex: 1; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { display: inline-block; padding: 8px 14px; border-radius: 8px; background: #fff; border: 1px solid #d1d5db; color: #1f2937; cursor: pointer; font-size: 14px; text-decoration: none; }
.btn:hover { background: #f9fafb; text-decoration: none; }
.btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn.primary:hover { background: #1d4ed8; }
.btn.big { padding: 14px 22px; font-size: 16px; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
th { background: #f9fafb; font-weight: 600; color: #4b5563; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }

.card { background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card.narrow { max-width: 480px; margin: 32px auto; }
form label { display: block; margin: 12px 0; font-size: 14px; color: #374151; }
form input, form select { display: block; width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; margin-top: 4px; background: #fff; }
form input:focus, form select:focus { outline: 2px solid #2563eb; outline-offset: -1px; }
form label.check { display: flex; align-items: center; gap: 8px; }
form label.check input { width: auto; margin: 0; }
form .inline { display: inline-flex; align-items: center; }

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.hero { text-align: center; padding: 60px 16px; }
.hero h1 { font-size: 32px; }
.choice { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.stat { background: #fff; padding: 16px; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.stat .lbl { display: block; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat .val { display: block; font-size: 28px; font-weight: 700; margin-top: 4px; }
.stat.highlight { background: #2563eb; color: #fff; }
.stat.highlight .lbl { color: #bfdbfe; }

.error { color: #b91c1c; background: #fee2e2; padding: 10px 14px; border-radius: 8px; }
.ok    { color: #166534; background: #dcfce7; padding: 10px 14px; border-radius: 8px; }
.muted { color: #6b7280; }
small  { color: #6b7280; }
hr     { border: 0; border-top: 1px solid #e5e7eb; margin: 16px 0; }
.inline { display: inline-flex; gap: 8px; align-items: center; }

/* ===== Theme-Toggle Button ===== */
.theme-toggle {
    margin-left: 16px;
    background: transparent;
    border: 1px solid #4b5563;
    color: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
}
.theme-toggle:hover { background: rgba(255,255,255,0.08); }

/* ===== Dark Mode ===== */
html[data-theme="dark"] { background: #0f172a; color-scheme: dark; }
html[data-theme="dark"] body { min-height: 100vh; background: #0f172a; color: #e5e7eb; }
html[data-theme="dark"] .container { background: transparent; }
html[data-theme="dark"] a { color: #60a5fa; }
html[data-theme="dark"] a.danger { color: #f87171; }
html[data-theme="dark"] .topbar { background: #020617; }
html[data-theme="dark"] .topbar .who { color: #94a3b8; }

html[data-theme="dark"] h2 { color: #cbd5e1; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] table { background: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,0.4); color: #e5e7eb; }
html[data-theme="dark"] th { background: #0f172a; color: #cbd5e1; }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-bottom-color: #334155; }
html[data-theme="dark"] .stat .lbl { color: #94a3b8; }
html[data-theme="dark"] .stat.highlight { background: #1d4ed8; color: #fff; }
html[data-theme="dark"] .stat.highlight .lbl { color: #bfdbfe; }

html[data-theme="dark"] .btn { background: #334155; color: #e5e7eb; border-color: #475569; }
html[data-theme="dark"] .btn:hover { background: #3f4a5f; }
html[data-theme="dark"] .btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
html[data-theme="dark"] .btn.primary:hover { background: #1d4ed8; }

html[data-theme="dark"] form label { color: #cbd5e1; }
html[data-theme="dark"] form input,
html[data-theme="dark"] form select,
html[data-theme="dark"] form textarea {
    background: #0f172a; color: #e5e7eb; border-color: #475569;
}
html[data-theme="dark"] form input::placeholder { color: #64748b; }

html[data-theme="dark"] .muted,
html[data-theme="dark"] small { color: #94a3b8; }
html[data-theme="dark"] hr { border-top-color: #334155; }

html[data-theme="dark"] .error { color: #fecaca; background: #7f1d1d; }
html[data-theme="dark"] .ok    { color: #bbf7d0; background: #14532d; }

/* ===== v4 Komfort-Update: Status, Anträge, Kalender, mobile Tabellen ===== */
.badge { display:inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge.okb { background:#dcfce7; color:#166534; }
.badge.warnb { background:#fef3c7; color:#92400e; }
.badge.badb { background:#fee2e2; color:#991b1b; }
.request-list { display:grid; gap:12px; margin: 12px 0 24px; }
.request-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px; display:flex; justify-content:space-between; gap:12px; align-items:center; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.approve-form { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.approve-form input { min-width: 180px; }
.filterbar { gap:8px; flex-wrap:wrap; align-items:end; }
.filterbar label { margin:0; min-width:130px; }
.linklike { background:none; border:0; padding:0; color:#2563eb; cursor:pointer; font:inherit; }
.linklike:hover { text-decoration:underline; }

.calendar-grid { display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:8px; }
.calendar-grid.head { margin-bottom:8px; color:#6b7280; font-weight:700; font-size:12px; text-transform:uppercase; }
.calendar-grid.head div { padding:0 6px; }
.cal-day { min-height:110px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px; overflow:hidden; }
.cal-day.muted-day { opacity:.45; }
.cal-day.holiday { background:#fff7ed; }
.cal-num { font-weight:700; margin-bottom:6px; display:flex; justify-content:space-between; gap:4px; align-items:center; }
.cal-num small { font-weight:500; font-size:10px; }
.cal-item { display:block; margin:4px 0; padding:4px 6px; border-radius:8px; background:#dbeafe; color:#1e40af; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-item.pending { background:#fef3c7; color:#92400e; }

html[data-theme="dark"] .badge.okb { background:#14532d; color:#bbf7d0; }
html[data-theme="dark"] .badge.warnb { background:#78350f; color:#fde68a; }
html[data-theme="dark"] .badge.badb { background:#7f1d1d; color:#fecaca; }
html[data-theme="dark"] .request-card,
html[data-theme="dark"] .cal-day { background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .cal-day.holiday { background:#2b2118; }
html[data-theme="dark"] .calendar-grid.head { color:#94a3b8; }
html[data-theme="dark"] .cal-item { background:#1e3a8a; color:#bfdbfe; }
html[data-theme="dark"] .cal-item.pending { background:#78350f; color:#fde68a; }

@media (max-width: 760px) {
  .topbar { align-items:flex-start; gap:8px; padding:12px 14px; }
  .topbar, .topbar nav { flex-direction:column; display:flex; }
  .topbar nav a, .topbar .who, .theme-toggle { margin-left:0; margin-top:6px; }
  .row.gap { flex-direction:column; align-items:stretch; }
  .request-card { flex-direction:column; align-items:stretch; }
  .approve-form { justify-content:flex-start; }
  .calendar-grid { gap:4px; }
  .cal-day { min-height:82px; padding:5px; border-radius:8px; }
  .cal-item { font-size:11px; padding:3px 4px; }
  table.responsive-table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr { display:block; }
  .responsive-table thead { display:none; }
  .responsive-table tr { background:#fff; border:1px solid #e5e7eb; border-radius:12px; margin-bottom:10px; padding:8px; }
  .responsive-table td { border-bottom:0; display:flex; justify-content:space-between; gap:14px; padding:7px 4px; text-align:right; }
  .responsive-table td::before { content: attr(data-label); font-weight:700; color:#6b7280; text-align:left; }
  html[data-theme="dark"] .responsive-table tr { background:#1e293b; border-color:#334155; }
  html[data-theme="dark"] .responsive-table td::before { color:#94a3b8; }
}
.cal-item.unpaid { background:#e9d5ff; color:#6b21a8; }
html[data-theme="dark"] .cal-item.unpaid { background:#581c87; color:#f3e8ff; }

/* Hinweis, wenn genehmigter bezahlter Urlaub den erlaubten Anspruch überschreitet */
.overlimit-alert { margin: 8px 0 14px; }
.overlimit-row td { background: #fff7f7; }
html[data-theme="dark"] .overlimit-row td { background: #331a1a; }