/* =========================================================
   Paleto Admin – Modern UI (Light/Dark)
   Light: unverändert   ·   Dark: grau/dunkelgrau
   Buttons: success = grün, danger = rot (gleich in beiden Modi)
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Light Mode */
  --bg: #f6f7fb;
  --bg-card: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --border: #e5e7eb;

  /* Primär (allg. Buttons/Links ohne Semantik) – Light bleibt blau */
  --primary: #d1d5db;
  --primary-600: #9ca3af;

  /* Semantische Farben – in beiden Modi IDENTISCH */
  --success: #22c55e;      /* Grün */
  --success-600: #16a34a;  /* Hover/Active */
  --danger:  #ef4444;      /* Rot */
  --danger-600: #dc2626;   /* Hover/Active */
  --warning: #f59e0b;

  --border-w: 1px;
  --shadow-color: rgba(0, 0, 0, .06);
  --shadow: 0 2px 10px var(--shadow-color);

  /* sanfte Flächen */
  --bg-soft: rgba(45,108,223, .08);
  --bg-thead: rgba(0,0,0, .03);

  /* Focus-Ring für Light */
  --ring: rgba(45,108,223, .25);

  /* Spacing & Radius */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius: 12px;
}

:root.dark {
  /* Dark Mode (neutral grau, kein Blau im Grunddesign) */
  --bg: #1e1e1e;
  --bg-card: #262626;
  --text: #ffffff;
  --muted: #c9c9c9;
  --border: #3a3a3a;

  /* Primär im Dark-Design neutraler (nicht blau) – OK, bleibt nur für .btn (ohne Semantik) */
  --primary: #d1d5db;
  --primary-600: #e5e7eb;

  /* Semantische Farben – IDENTISCH wie im Light Mode */
  --success: #22c55e;
  --success-600: #16a34a;
  --danger:  #ef4444;
  --danger-600: #dc2626;
  --warning: #f59e0b;

  --shadow-color: rgba(0, 0, 0, .4);
  --shadow: 0 2px 10px var(--shadow-color);

  --bg-soft: rgba(255,255,255, .06);
  --bg-thead: rgba(255,255,255, .05);

  /* Focus-Ring im Dark Mode heller */
  --ring: rgba(255,255,255, .22);

  /* Zusätzliche Layer */
  --hover: rgba(255,255,255, .08);
  --active: rgba(255,255,255, .12);
}

/* System-Preference als initiale Farbe (wird von JS überschrieben, falls gespeichert) */
@media (prefers-color-scheme: dark) {
  :root:not(.dark):not(.light) { color-scheme: dark; }
}
@media (prefers-color-scheme: light) {
  :root:not(.dark):not(.light) { color-scheme: light; }
}

/* ---------- Global ---------- */
* { box-sizing: border-box; }
html, body { min-height: 100%; }        /* <- war: height:100% */
body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  min-height: 100dvh;                   /* <- neu: mind. Viewporthöhe, kann wachsen */
}
a { color: var(--primary); text-decoration: none; transition: color .1s ease; }
a:hover { color: var(--primary-600); text-decoration: underline; }

/* ---------- Layout (Sidebar + Main) ---------- */
.sidebar {
  width: 240px;
  background: var(--bg-card);
  border-right: var(--border-w) solid var(--border);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;

  /* neu: Sidebar bleibt fix am Viewport-Top */
  position: sticky;
  top: 0;
  height: 100dvh;     /* volle Höhe */
  overflow: auto;     /* eigene Scrollbar, falls Inhalt zu lang */
  flex-shrink: 0;     /* nicht zusammenschieben */
}

.sidebar h2 { margin: 0 0 8px 0; font-size: 16px; color: var(--muted); }
.sidebar h3 {
  margin: 16px 0 6px 0; font-size: 13px; color: var(--muted);
  border-top: var(--border-w) solid var(--border); padding-top: 8px;
}

.navlink {
  display: block; padding: 9px 12px;
  border-radius: 10px; color: var(--text);
  border: var(--border-w) solid transparent;
  transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.navlink:hover { background: var(--bg-soft); }
:root.dark .navlink:hover { background: var(--hover); }
.navlink.active {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border);
}
:root.dark .navlink.active {
  background: var(--active);
  color: var(--text);
  border-color: #525252;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 10px 16px; background: var(--bg-card);
  border-bottom: var(--border-w) solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.content { padding: 20px; }

/* ---------- Grid & Cards ---------- */
.grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }
@media (max-width: 1100px) { .col-4 { grid-column: span 6; } }
@media (max-width: 700px) { .col-4, .col-6 { grid-column: span 12; } }

.card {
  background: var(--bg-card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease, border-color .1s ease;
}
.card:hover { transform: translateY(0px); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card);
  border: var(--border-w) solid var(--border); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 12px 14px; text-align: left; }
.table thead th { font-weight: 600; color: var(--muted); background: var(--bg-thead); }
.table tbody tr + tr td { border-top: var(--border-w) solid var(--border); }
.table tbody tr:hover td { background: var(--bg-soft); }
:root.dark .table tbody tr:hover td { background: var(--hover); }

/* ---------- Forms ---------- */
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], select, textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: var(--border-w) solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .1s ease, box-shadow .1s ease, background .1s ease, color .1s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border-radius: 12px;
  border: var(--border-w) solid transparent;
  background: var(--primary);
  color: #111827; /* Lesbarer Text auf heller Primärfarbe im Dark-Mode */
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s ease, background .1s ease, box-shadow .1s ease, border-color .1s ease, color .1s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--primary-600); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }

/* Sekundärer Button (neutral) */
.btn.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn.secondary:hover { background: var(--bg-soft); }
:root.dark .btn.secondary:hover { background: var(--hover); }

/* === Semantische Buttons (GLEICH in Light & Dark) === */
.btn.success { background: var(--success); color: #ffffff; }
.btn.success:hover { background: var(--success-600); }
.btn.danger  { background: var(--danger);  color: #ffffff; }
.btn.danger:hover  { background: var(--danger-600); }

/* ---------- Badges / Pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  border: var(--border-w) solid var(--border);
}

/* ---------- Utilities ---------- */
hr { border: none; border-top: var(--border-w) solid var(--border); margin: var(--space-4) 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---------- Page-specific helper ---------- */
.stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: var(--border-w) solid var(--border);
}

/* ---------- Navlinks Row ---------- */
.navlinks { display:flex; flex-wrap:wrap; gap:6px; }
.navlinks a {
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  color: var(--text);
  border: var(--border-w) solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.navlinks a:hover { background: var(--bg-soft); }
:root.dark .navlinks a:hover { background: var(--hover); }
.navlinks a.active {
  color: var(--text);
  background: var(--bg-soft);
  border-color: var(--border);
}
:root.dark .navlinks a.active {
  color: var(--text);
  background: var(--active);
  border-color: #525252;
}

/* ---------- Performance Hotfix ---------- */
@keyframes fadeIn { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
/* Deaktiviert Eintrittsanimation auf großen Flächen für snappier UX */
.card, .table, .topbar, .sidebar, .content > * { animation: none !important; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* ===== Rollen-Badges ===== */
.role-badge {
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: .8em;
}
.role-badge.chef {
    background: #e74c3c;
}
.role-badge.manager {
    background: #3498db;
}
.role-badge.mitarbeiter {
    background: #7f8c8d;
}
.role-badge.keine {
    background: #95a5a6;
}

/* ===== Topbar ===== */
.topbar {
    margin: 0 !important;
    padding: 10px 16px;
    background: var(--bg-card);
    color: var(--text);
    border-bottom: var(--border-w) solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 0;
}
:root.dark .topbar {
    background: var(--bg-card);
    color: var(--text);
}

.brand a {
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
}

.user-info {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--muted);
}

.auth {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.auth input {
    padding: 8px 10px;
    border-radius: 10px;
    border: var(--border-w, 1px) solid var(--border);
    background: var(--bg);
    color: var(--text);
    min-width: 160px;
}

/* --- Layout-Fix: Content füllt die Höhe und bleibt optisch durchgehend --- */
:root { --topbar-h: 56px; }           /* ggf. an reale Topbar-Höhe anpassen */

.main {
  background: var(--bg-card);         /* gleiche Fläche wie Karten/Content */
}

.content {
  flex: 1;                            /* nimmt die restliche Höhe ein */
  background: var(--bg-card);         /* verhindert andersfarbigen Body-Hintergrund */
  min-height: calc(100dvh - var(--topbar-h));
  padding-bottom: 48px;               /* Luft am Seitenende/Drawer */
}
.inline-error {
  color: var(--danger);
  font-size: .85rem;
  margin-top: 4px;
}