/* Todoist-inspiriertes Redesign auf Basis von Bootstrap 5.
   Überschreibt Bootstrap-Tokens (Farben, Radius, Schrift) und definiert
   das Sidebar-Layout + die Listen-/Karten-Komponenten, die Bootstrap
   nicht mitbringt (Kategorie-Chips, Kuchendiagramm, Aufgaben-Zeilen,
   Onboarding-Overlay, Tab-/Sidebar-Umschaltung ohne Bootstrap-JS). */

:root {
  --td-accent: #ec4899;
  --td-accent-dark: #be185d;
  --td-accent-tint: #fce7f3;
  --td-success: #21965a;
  --td-bg-sidebar: #fafaf8;
  --td-border: #e5e5e3;
  --td-text: #202020;
  --td-text-muted: #80807e;

  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-bg: #ffffff;
  --bs-body-color: var(--td-text);
  --bs-secondary-color: var(--td-text-muted);
  --bs-border-color: var(--td-border);
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
  --bs-link-color: var(--td-accent);
  --bs-link-hover-color: var(--td-accent-dark);
  --bs-link-color-rgb: 236, 72, 153;
  --bs-link-hover-color-rgb: 190, 24, 93;
  --bs-primary: var(--td-accent);
  --bs-primary-rgb: 236, 72, 153;
}

html, body { height: 100%; }
body { margin: 0; }

/* Buttons */
.btn { border-radius: var(--bs-border-radius-sm); font-weight: 500; }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--td-accent); --bs-btn-border-color: var(--td-accent);
  --bs-btn-hover-bg: var(--td-accent-dark); --bs-btn-hover-border-color: var(--td-accent-dark);
  --bs-btn-active-bg: var(--td-accent-dark); --bs-btn-active-border-color: var(--td-accent-dark);
  --bs-btn-disabled-bg: var(--td-accent); --bs-btn-disabled-border-color: var(--td-accent);
  --bs-btn-focus-shadow-rgb: 236, 72, 153;
}
.btn-outline-primary {
  --bs-btn-color: var(--td-accent); --bs-btn-border-color: var(--td-accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--td-accent); --bs-btn-hover-border-color: var(--td-accent);
  --bs-btn-active-bg: var(--td-accent); --bs-btn-active-border-color: var(--td-accent);
  --bs-btn-disabled-color: var(--td-accent); --bs-btn-disabled-border-color: var(--td-accent);
  --bs-btn-focus-shadow-rgb: 236, 72, 153;
}
.btn-outline-secondary {
  --bs-btn-color: var(--td-text-muted); --bs-btn-border-color: var(--td-border);
  --bs-btn-hover-color: var(--td-text); --bs-btn-hover-bg: #f2f2f0; --bs-btn-hover-border-color: var(--td-border);
}
.btn-link { color: var(--td-accent); }
.btn-link:hover { color: var(--td-accent-dark); }
.form-control:focus, .form-select:focus {
  border-color: var(--td-accent);
  box-shadow: 0 0 0 .2rem rgba(236, 72, 153, .15);
}

/* Tages-Auswahl-Buttons (Mehrfachauswahl beim Schicht-Anlegen) */
.date-toggle-group { display: flex; gap: .375rem; flex-wrap: wrap; }
.date-toggle-group .btn { padding: .25rem .625rem; }
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary {
  background: var(--td-accent); border-color: var(--td-accent); color: #fff;
}
.btn-check:focus-visible + .btn-outline-secondary {
  box-shadow: 0 0 0 .2rem rgba(236, 72, 153, .25);
}

/* Flache Karten statt Bootstrap-Schatten */
.card { border: 1px solid var(--td-border); box-shadow: none; border-radius: .625rem; }

/* --- App-Shell: volle Bildschirmhöhe/-breite, keine Rahmen/Ränder ---
   Sidebar links (Desktop) bzw. Kopfbereich oben (Mobile), Inhalt füllt den Rest. */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-sidebar { flex-shrink: 0; padding: 1.25rem 1rem 1rem; }
.app-main { flex: 1 1 auto; min-width: 0; padding: 0 1rem 2rem; }

.sidebar-brand { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.brand-mark {
  width: 32px; height: 32px; border-radius: .5rem; background: var(--td-accent);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; letter-spacing: .02em; flex-shrink: 0;
}
.brand-title { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.brand-subtitle { font-size: .75rem; color: var(--td-text-muted); }

.sidebar-nav {
  display: flex; gap: .25rem; overflow-x: auto;
  border-bottom: 1px solid var(--td-border); padding-bottom: .625rem; margin-bottom: 1rem;
}
.sidebar-nav .nav-item { display: flex; }
.sidebar-nav .tab-btn {
  display: block; width: 100%;
  border: none; background: none; color: var(--td-text-muted); font-weight: 500; font-size: .9rem;
  padding: .5rem .75rem; border-radius: .5rem; white-space: nowrap; text-align: left;
}
.sidebar-nav .tab-btn:hover { background: var(--td-accent-tint); color: var(--td-accent); }
.sidebar-nav .tab-btn.active { background: var(--td-accent-tint); color: var(--td-accent); font-weight: 600; }

.sidebar-footer { display: flex; flex-direction: column; gap: .5rem; }
.sidebar-footer .btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.sidebar-footer .btn-row .btn { flex: 1 1 auto; }

@media (min-width: 992px) {
  .app-shell { flex-direction: row; align-items: stretch; }
  .app-sidebar {
    width: 260px; flex-shrink: 0;
    background: var(--td-bg-sidebar); border-right: 1px solid var(--td-border);
    padding: 2rem 1.5rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .app-main { padding: 2rem 3rem 3rem; overflow-y: auto; }
  .sidebar-nav { flex-direction: column; border-bottom: none; padding-bottom: 0; overflow-x: visible; }
}

/* Login-Seite (Admin) */
.login-shell { max-width: 380px; margin: 3rem auto 0; }
.login-brand { display: flex; justify-content: center; margin-bottom: 1rem; }

/* Begrüßungsleiste */
#greeting-bar { background: var(--td-bg-sidebar); border: 1px solid var(--td-border); border-radius: .5rem; padding: .5rem .75rem !important; }

/* Kategorie-Chips */
#category-list, #bring-category-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.chip {
  display: flex; align-items: center; gap: .375rem;
  background: #fff; border: 1px solid var(--td-border);
  border-radius: 999px; padding: .3rem .4rem .3rem .7rem; font-size: .83rem; color: var(--td-text);
}
.chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; flex-shrink: 0; }
.chip-btn { border: none; background: none; padding: 2px 4px; font-size: .8rem; color: var(--td-text-muted); }
.chip-btn:hover { color: var(--td-text); }
.chip-edit { display: flex; align-items: center; gap: .375rem; border: 1px dashed var(--td-border); border-radius: 999px; padding: .25rem .5rem; }
.chip-edit .edit-name { width: 130px; }
.chip-edit .edit-color { width: 42px; padding: 2px; }

/* Tages-Überschriften */
#plan > h2.collapse-toggle, #bring-plan > h2.collapse-toggle,
#overview-status h2, #overview-week h2 {
  font-size: 1.05rem; font-weight: 700; border-bottom: 1px solid var(--td-border) !important; padding-bottom: .5rem;
}

/* Schicht-Karte: dezenter Rahmen + farbiger linker Akzent nach Kategorie */
.shift-card {
  border: 1px solid var(--td-border); border-left: 3px solid var(--c);
  border-radius: .625rem; box-shadow: none; transition: box-shadow .15s ease, border-color .15s ease;
}
.shift-card:hover { box-shadow: 0 1px 8px rgba(0, 0, 0, .06); }
.shift-card .card-body { padding: .9rem 1rem; }

/* Aufgaben / Bring-Artikel: kompakte Listenzeile im Todoist-Stil */
.task-row {
  background: #fff; border: 1px solid var(--td-border);
  border-radius: .5rem; padding: .6rem .8rem; transition: border-color .15s ease;
}
.task-row:hover { border-color: #d3d3d1; }
.task-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.task-name { font-weight: 600; flex: 1; color: var(--td-text); }

/* Kapazitäts-Kuchendiagramm */
.pie-wrap { display: inline-flex; align-items: center; gap: .375rem; margin-left: auto; }
.pie { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.pie-label { font-size: .72rem; color: var(--td-text-muted); white-space: nowrap; }
.pie-check {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--td-success); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}

/* Onboarding-Overlay (kein Bootstrap-JS nötig) */
.onboarding-overlay {
  position: fixed; inset: 0; background: rgba(32, 32, 32, .45);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.onboarding-overlay.visible { display: flex; }
.onboarding-box {
  background: var(--bs-body-bg); border-radius: .75rem; padding: 1.75rem;
  max-width: 380px; width: 100%; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .15);
  text-align: center;
}
/* Foto im Willkommens-Screen: einfaches rundes Foto, Namen/Event stehen als
   normaler Text darunter. */
.onboarding-photo {
  position: relative; width: 200px; height: 200px; margin: 0 auto 1.25rem;
  border-radius: 50%;
}
.onboarding-photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.onboarding-title {
  font-family: "Fredoka", "Segoe UI", sans-serif; font-weight: 700;
  font-size: 1.6rem; color: var(--td-text); margin-bottom: .125rem;
}
.onboarding-subtitle {
  font-family: "Fredoka", "Segoe UI", sans-serif; font-weight: 600;
  font-size: 1.05rem; color: var(--td-text); margin-bottom: .125rem;
}
.onboarding-tagline {
  font-family: "Fredoka", "Segoe UI", sans-serif; font-weight: 600;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--td-accent); margin-bottom: .75rem;
}

/* Eigene Tab-Umschaltung (ohne Bootstrap-JS-Bundle) */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Ein-/Ausklappen (Tage, Schichten, Bring-Kategorien) — nutzt Bootstraps eigene
   .collapse/.show-Klassen, aber ohne dessen JS-Bundle: wir toggeln .show selbst. */
.collapse-toggle { cursor: pointer; user-select: none; }
.collapse-toggle .caret { display: inline-block; transition: transform .15s ease; font-size: .75em; color: var(--td-text-muted); }
.collapse-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }

/* Wochenkalender (Admin-Übersicht) */
.week-grid { display: flex; gap: 2px; overflow-x: auto; padding-bottom: .5rem; }
.week-gutter { flex-shrink: 0; width: 46px; }
.week-day { flex: 1 1 0; min-width: 110px; }
.week-day-label {
  font-size: .75rem; font-weight: 600; text-align: center; padding: .25rem 0;
  border-bottom: 1px solid var(--td-border); white-space: nowrap;
}
.week-hour-col, .week-day-col { position: relative; }
.week-day-col {
  background: var(--td-bg-sidebar); border-left: 1px solid var(--td-border);
  border-radius: 0 0 .25rem .25rem;
}
.week-hour-label {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: .7rem; color: var(--td-text-muted); white-space: nowrap;
}
.week-shift-box {
  position: absolute; border-radius: .25rem; color: #fff; overflow: hidden;
  padding: 2px 4px; font-size: .68rem; line-height: 1.2; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
  cursor: pointer; transition: filter .1s ease, box-shadow .1s ease; outline: none;
}
.week-shift-box:hover, .week-shift-box:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset, 0 2px 8px rgba(0, 0, 0, .25);
  z-index: 3;
}
.week-shift-time { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-shift-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hover-/Fokus-Tooltip für Schicht-Boxen in der Wochenansicht */
.week-tooltip {
  position: absolute; z-index: 2000; background: #fff; border: 1px solid var(--td-border);
  border-radius: .5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: .625rem .75rem;
  font-size: .8rem; max-width: 260px; pointer-events: none; color: var(--td-text);
  opacity: 0; transform: translateY(4px); transition: opacity .1s ease, transform .1s ease;
}
.week-tooltip.visible { opacity: 1; transform: translateY(0); }
.week-tooltip-head { display: flex; align-items: center; gap: .375rem; margin-bottom: .25rem; }
.week-tooltip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.week-tooltip-cat { color: var(--td-text-muted); margin-left: auto; font-size: .72rem; }
.week-tooltip-title { font-weight: 600; margin-bottom: .25rem; }
.week-tooltip-notes { color: var(--td-text-muted); margin-bottom: .375rem; }
.week-tooltip-tasks { list-style: none; margin: .375rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.week-tooltip-task { display: flex; justify-content: space-between; gap: .75rem; }
.week-tooltip-task.is-done { color: var(--td-text-muted); text-decoration: line-through; }
.week-tooltip-task-count { font-variant-numeric: tabular-nums; color: var(--td-text-muted); flex-shrink: 0; }
.week-tooltip-empty { color: var(--td-text-muted); font-style: italic; margin-top: .375rem; }

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .shift-card { break-inside: avoid; }
  .sidebar-nav { display: none !important; }
  .app-shell { display: block !important; min-height: 0; }
  .app-sidebar { width: auto !important; height: auto !important; position: static !important; }
  .tab-panel { display: block !important; }
  .collapse { display: block !important; }
  .week-tooltip { display: none !important; }
}