/*
  Neues Schichtplaner-Design für das alte Flask-Projekt
  Quelle/Stil: neues Next.js Projekt vom 14.05.2026
  Ziel: Professioneller Dark-Look statt Neon/Cyber-Overlay
  - dunkle matte Flächen
  - grüner Primary-Akzent
  - ruhige Cards
  - Header/Toolbar wie Dashboard
  - Mobile bleibt funktional
*/
:root {
  --bg-dark: #171717 !important;
  --bg-card: #242424 !important;
  --bg-hover: #303030 !important;
  --bg-active: #333333 !important;
  --border: #3f3f46 !important;
  --border-bright: #22c55e !important;
  --text: #f5f5f5 !important;
  --text-muted: #a3a3a3 !important;
  --accent: #22c55e !important;
  --accent-glow: rgba(34, 197, 94, 0.24) !important;
  --accent-dim: rgba(34, 197, 94, 0.12) !important;
  --success: #22c55e !important;
  --success-glow: rgba(34, 197, 94, 0.22) !important;
  --warning: #eab308 !important;
  --warning-glow: rgba(234, 179, 8, 0.22) !important;
  --danger: #ef4444 !important;
  --danger-glow: rgba(239, 68, 68, 0.22) !important;
  --header-h: 64px !important;
  --toolbar-h: 48px !important;
  --r-card: 12px !important;
  --r-md: 10px !important;
  --r-sm: 8px !important;
  --r-xs: 6px !important;
}

html, body {
  background: #171717 !important;
  color: #f5f5f5 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before,
body::after {
  display: none !important;
  content: none !important;
}

/* Header wie neues Dashboard */
.header {
  height: 64px !important;
  background: #242424 !important;
  border-bottom: 1px solid #3f3f46 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 24px !important;
  position: sticky !important;
}
.logo-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #22c55e !important;
  border: none !important;
  color: #171717 !important;
  box-shadow: none !important;
}
.logo h1 {
  background: none !important;
  -webkit-text-fill-color: #f5f5f5 !important;
  color: #f5f5f5 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.header-actions { gap: 8px !important; }

/* Toolbar ruhiger wie neue Navigation */
.quick-actions {
  height: 48px !important;
  top: 64px !important;
  background: #1f1f1f !important;
  border-bottom: 1px solid #3f3f46 !important;
  backdrop-filter: none !important;
  padding: 0 24px !important;
  gap: 8px !important;
}
.qa-label,
.section-title,
.card-title,
.stat-label,
.week-progress-label,
.mobile-drawer-title {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0.06em !important;
}
.qa-label {
  color: #a3a3a3 !important;
  font-size: 11px !important;
}
.qa-sep { background: #3f3f46 !important; }

/* Layout bleibt alt-funktional, bekommt aber neues Spacing */
.main {
  max-width: none !important;
  padding: 24px !important;
  gap: 24px !important;
  grid-template-columns: 280px minmax(0, 1fr) 320px !important;
  background: #171717 !important;
}

/* Cards im Stil shadcn/new project */
.card,
.modal,
.mobile-drawer {
  background: #242424 !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.card:not(.calendar-container):hover,
.kollege-card:hover,
.week-day-card:hover,
.year-month-card:hover {
  border-color: #52525b !important;
  box-shadow: none !important;
}
.card-header,
.calendar-card-header,
.section-header {
  background: #242424 !important;
  border-bottom: 1px solid #3f3f46 !important;
  min-height: 52px !important;
}
.card-title,
.calendar-month,
.section-title {
  color: #f5f5f5 !important;
  opacity: 1 !important;
}
.card-title-meta,
.section-title-year,
.stat-label,
.muster-details,
.schichttyp-zeit,
.overtime-labels,
.week-progress-label,
.day-tooltip,
.form-help {
  color: #a3a3a3 !important;
}
.card-icon,
.section-icon { opacity: 0.9 !important; }
.card-body { padding: 16px !important; }
.section-sep { background: #3f3f46 !important; }

/* Buttons */
.btn,
.calendar-nav button,
.card-action,
.muster-toggle,
.form-control,
.form-input,
select,
input,
textarea {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}
.btn,
.card-action,
.calendar-nav button,
.mobile-drawer-item {
  border-radius: 8px !important;
  box-shadow: none !important;
}
.btn-primary,
.mobile-fab {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #171717 !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.mobile-fab:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #0a0a0a !important;
  transform: translateY(-1px) !important;
}
.btn-secondary,
.calendar-nav button,
.card-action,
.mobile-drawer-item {
  background: #303030 !important;
  border-color: #3f3f46 !important;
  color: #f5f5f5 !important;
}
.btn-secondary:hover,
.calendar-nav button:hover,
.card-action:hover,
.mobile-drawer-item:hover,
.muster-toggle:hover {
  background: #3a3a3a !important;
  border-color: #52525b !important;
  color: #22c55e !important;
  box-shadow: none !important;
}
.btn-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #f87171 !important;
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.20) !important;
  color: #fecaca !important;
}

/* Listen/Sidebar */
.schichttyp-item,
.muster-item,
.stat-item,
.kollege-card,
.week-day-card,
.year-month-card {
  background: #303030 !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.schichttyp-item:hover,
.muster-item:hover,
.stat-item:hover {
  background: #383838 !important;
  border-color: #52525b !important;
}
.schichttyp-item.selected {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.65) !important;
  box-shadow: none !important;
}
.schichttyp-color { box-shadow: none !important; border-radius: 999px !important; }
.stat-value { color: #22c55e !important; }
.stat-item-urlaub { background: rgba(236,72,153,0.10) !important; border-color: rgba(236,72,153,0.35) !important; }
.stat-item-urlaub .stat-value { color: #f472b6 !important; }
.stat-item-krank { background: rgba(239,68,68,0.10) !important; border-color: rgba(239,68,68,0.35) !important; }
.stat-item-krank .stat-value { color: #f87171 !important; }

/* Kalender */
.calendar-container { overflow: hidden !important; }
.calendar-weekdays {
  background: #1f1f1f !important;
  border-bottom: 1px solid #3f3f46 !important;
}
.weekday { color: #a3a3a3 !important; }
.calendar-days { background: #3f3f46 !important; gap: 1px !important; }
.calendar-day {
  background: #242424 !important;
  border: none !important;
  transition: background .15s ease, outline-color .15s ease !important;
}
.calendar-day:hover { background: #303030 !important; }
.calendar-day.today {
  background: rgba(34, 197, 94, 0.12) !important;
  outline: 1px solid rgba(34, 197, 94, 0.45) !important;
  outline-offset: -1px !important;
}
.calendar-day.today .day-number,
.calendar-day.current-week .day-number { color: #22c55e !important; }
.calendar-day.current-week {
  background: rgba(34, 197, 94, 0.06) !important;
  border-top: none !important;
}
.calendar-day.feiertag { background: rgba(239,68,68,0.08) !important; }
.calendar-day.feiertag .day-number { color: #f87171 !important; }
.shift-badge,
.schicht-badge,
.day-shift,
.markierung-badge {
  border-radius: 7px !important;
  box-shadow: none !important;
}
.day-number { color: #f5f5f5 !important; }
.day-tooltip {
  background: #242424 !important;
  border-color: #52525b !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}

/* Formulare/Modal */
.modal-overlay { background: rgba(0,0,0,0.72) !important; backdrop-filter: blur(4px) !important; }
.modal-title { color: #f5f5f5 !important; }
.modal-title::before { color: #22c55e !important; opacity: 1 !important; }
.form-input,
.form-control,
input,
select,
textarea {
  background: #303030 !important;
  border: 1px solid #3f3f46 !important;
  color: #f5f5f5 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.form-input:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(34,197,94,0.35) !important;
  outline-offset: 1px !important;
  border-color: #22c55e !important;
  box-shadow: none !important;
}
.form-label,
label { color: #d4d4d4 !important; }
.message.success { background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.45) !important; color: #86efac !important; }
.message.error { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.45) !important; color: #fca5a5 !important; }

/* Login-Seite */
.login-container .card,
body:has(.login-container) .card {
  background: #242424 !important;
  border: 1px solid #3f3f46 !important;
  box-shadow: 0 20px 70px rgba(0,0,0,0.45) !important;
}
.login-container .logo-icon { background: #22c55e !important; color: #171717 !important; }
.login-container .logo h1 { -webkit-text-fill-color: #f5f5f5 !important; color: #f5f5f5 !important; background: none !important; }
.login-container .logo-sub { color: #a3a3a3 !important; }
.tab.active { background: rgba(34,197,94,0.16) !important; color: #22c55e !important; border-color: rgba(34,197,94,0.45) !important; box-shadow: none !important; }
.tab:hover:not(.active) { background: #303030 !important; color: #f5f5f5 !important; }

/* Mobile: neue Optik, alte Bedienung behalten */
.mobile-nav {
  background: #242424 !important;
  border-top: 1px solid #3f3f46 !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.35) !important;
}
.mobile-nav-item { color: #a3a3a3 !important; }
.mobile-nav-item.active { color: #22c55e !important; }
.mobile-nav-item.active::after { background: #22c55e !important; box-shadow: none !important; }
.mobile-drawer-handle { background: #52525b !important; }
.mobile-drawer-overlay { background: rgba(0,0,0,0.65) !important; }
.mobile-fab { border-color: #171717 !important; }

@media (max-width: 1200px) {
  .main { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .header { padding: 0 14px !important; }
  .quick-actions { display: none !important; }
  .main { padding: 12px 12px calc(var(--mobile-nav-h) + 28px + env(safe-area-inset-bottom)) !important; gap: 12px !important; }
  .card, .modal, .mobile-drawer { border-radius: 12px !important; }
  .calendar-day { min-height: 62px !important; }
}