:root{
  --bg:#071525;
  --card:#0b2032;
  --muted:#9bb0c6;
  --text:#e7f3ff;
  --accent:#4ac0ff;
  --accent-2:#1fb283;
  --danger:#ff6b6b;
  --border:rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.02);
  --radius:12px;
  --max-width:1100px;
  --shadow: 0 8px 24px rgba(2,6,23,0.6);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg) 0%, #031424 100%);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
}

/* Layout */
.wrap{display:flex;flex-direction:column;min-height:100vh}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-width);
  margin:20px auto 8px;
  padding:8px 14px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{border-radius:8px}
.title{font-weight:700;font-size:18px;color:var(--text)}

/* Container */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}

/* Form */
.form{
  display:grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr;
  gap:12px;
  align-items:end;
}
.form label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.form input[type="text"], .form select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  color:var(--text);
  font-size:14px;
  outline:none;
}
.form input::placeholder{color:rgba(255,255,255,0.25)}
.form input:focus, .form select:focus{
  box-shadow:0 6px 18px rgba(26,144,206,0.08);
  border-color: rgba(74,192,255,0.6);
}

/* Form actions */
.form-actions{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.03);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:rgba(74,192,255,0.08);border-color:rgba(74,192,255,0.12)}
.btn.accent{background:linear-gradient(90deg,var(--accent),#2fb5e6);color:#042233;border:none}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.02);color:var(--muted)}
.btn[disabled]{opacity:0.5;cursor:not-allowed;transform:none}

/* Suggestions */
.suggestions-card{padding:12px}
.suggestions{display:grid;gap:10px}
.suggestion{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border:1px solid rgba(255,255,255,0.02);
}

/* Table */
.table-wrap{overflow:auto;border-radius:10px}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}
.table thead{
  position:sticky;
  top:0;
  background:linear-gradient(180deg, rgba(2,10,18,0.95), rgba(2,10,18,0.90));
  backdrop-filter: blur(6px);
  z-index:1;
}
.table thead th{
  text-align:left;
  padding:12px 14px;
  font-size:13px;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.table tbody tr{
  transition:background .12s ease, transform .08s ease;
}
.table tbody tr:hover{
  background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  transform:translateY(-2px);
}
.table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.02);
  font-size:14px;
  color:var(--text);
}
.table tbody tr:nth-child(odd){ background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); }
.table .slot-free{ color:var(--muted); font-style:italic }
.table .slot-assigned{ color:var(--text); font-weight:600 }
.table .slot-highlight{ background: linear-gradient(90deg, rgba(74,192,255,0.08), rgba(31,178,131,0.04)); }

/* Message / footer */
.message{min-height:22px;margin-bottom:6px;color:var(--muted)}
.footer{max-width:var(--max-width);margin:18px auto;color:var(--muted);font-size:13px;padding:0 16px}

/* Utilities & responsive */
.muted{color:var(--muted);font-size:13px}
@media (max-width:980px){
  .form{grid-template-columns:1fr 1fr; gap:10px}
  .form-actions{grid-column:span 2}
}
@media (max-width:640px){
  .form{grid-template-columns:1fr; gap:10px}
  .topbar{padding:8px}
  .table{min-width:0}
}

/* === Snopmat: Lesbarkeits-Overrides (Kontrast) === */
:root {
  --bg-panel: #0f2033;
  --bg-panel-strong: #0b1a2b;
  --bg-panel-soft: #10263f;
  --txt-strong: #e8f1ff;
  --txt: #d6e3ff;
  --txt-dim: #a9b9d6;
  --accent-weak: rgba(74,192,255,0.35);
  --accent-weak2: rgba(74,192,255,0.18);
  --row-special: #112d4e;
  --row-special-alt: #0e2643;
  --row-hover: rgba(74,192,255,0.12);
  --divider: rgba(255,255,255,0.06);
}

/* Tabellenkopf stärker absetzen */
.table thead {
  background: linear-gradient(180deg, rgba(11,26,43,0.96), rgba(11,26,43,0.92)) !important;
  backdrop-filter: blur(6px);
}
.table thead th{
  color: #bcd3f0 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--divider) !important;
}

/* Tabellenzeilen mit mehr Kontrast */
.table tbody tr{
  background: rgba(255,255,255,0.035);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.table tbody tr:nth-child(odd){
  background: rgba(255,255,255,0.02);
}
.table tbody tr:hover{
  background: var(--row-hover) !important;
  transform: translateY(-1px);
}

/* Zeitspalte (2.) hervorheben */
.table tbody td:nth-child(2){
  color: var(--txt-strong);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Slot-Highlight sichtbarer machen */
.table .slot-highlight{
  background: var(--accent-weak2) !important;
  outline: 1px solid var(--accent-weak) !important;
}

/* Sektionstitel-Zeilen */
.table tbody td[colspan="5"]{
  color: var(--txt-strong);
  background: transparent !important;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Sondertermine: Gelb -> dezentes Blau */
.table tbody tr[style*="#fff9d6"],
.table tbody tr[style*="fff9d6"],
.table tbody tr[style*="#fff4b0"],
.table tbody tr[style*="fff4b0"]{
  background: var(--row-special) !important;
  color: var(--txt-strong) !important;
}
.table tbody tr[style*="fff9d6"] td,
.table tbody tr[style*="fff4b0"] td{
  color: var(--txt-strong) !important;
}
.table tbody tr[style*="fff9d6"]:hover,
.table tbody tr[style*="fff4b0"]:hover{
  background: var(--row-special-alt) !important;
}

/* Hinweis-Spalte in Sonderterminen */
.table tbody tr[style*="fff9d6"] td:last-child,
.table tbody tr[style*="fff4b0"] td:last-child{
  color: var(--txt) !important;
}

/* Vorschlagskarten */
.suggestion{
  background: var(--bg-panel-soft) !important;
  color: var(--txt-strong) !important;
  border: 1px solid var(--accent-weak) !important;
  border-radius: 8px;
}
.suggestion:hover{
  background: var(--row-hover) !important;
  border-color: var(--accent-weak) !important;
}
.suggestion input[type="radio"]{
  margin-top: 4px;
  accent-color: var(--accent);
}

/* Manuelles Zeitfenster + Strategie Select deutlich */
#slotSelect,
#strategySelect{
  background: var(--bg-panel-soft) !important;
  color: var(--txt-strong) !important;
  border: 1px solid var(--accent-weak) !important;
  font-weight: 700;
  letter-spacing: .2px;
}
#slotSelect:focus,
#strategySelect:focus{
  outline: 2px solid var(--accent-weak);
  outline-offset: 1px;
}
#slotSelect option,
#strategySelect option{
  background: #ffffff;
  color: #0f2033;
}

/* Buttons: Fokus */
.btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Karten/Container leicht anheben */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)) !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* Status-Meldungen lesbar */
.message{ color: var(--txt); }
.success{ color: #7fe3b5 !important; }
.alert{ color: #ffdf7e !important; }
.error{ color: #ff8a8a !important; }
.note{ color: var(--txt) !important; }

/* ========================= */
/*        MODAL DARK         */
/* ========================= */

/* 1) Overlay selbst */
div[style*="position:fixed"][style*="inset:0"][style*="z-index"]{
  background: rgba(3,10,18,0.65) !important;
  backdrop-filter: blur(2px);
}

/* 2) Alle weißen Modal-Container im Overlay auf dunkel drehen */
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] > *[style*="background:#fff"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] *[style*="background:#fff"][style*="border-radius:8px"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* 3) Spezifisch: große Kalender-Modal und kleine Unter-Modalen */
div[style*="max-width:900px"][style*="border-radius:8px"],
div[style*="max-width:480px"][style*="border-radius:8px"],
div[style*="max-width:420px"][style*="border-radius:8px"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* 4) Überschriften und Hinweise im Modal */
div[style*="max-width:900px"] h3,
div[style*="max-width:480px"] h4,
div[style*="max-width:420px"] h3,
div[style*="max-width:480px"] h3{
  color: var(--txt-strong) !important;
}
div[style*="max-width:900px"] .note,
div[style*="max-width:480px"] .note{
  color: var(--muted) !important;
}

/* 5) Kalender-Grid im Modal */
div[style*="max-width:900px"] table{
  width:100%;
  border-collapse: collapse;
}
div[style*="max-width:900px"] thead th{
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 6px;
}
div[style*="max-width:900px"] tbody td{
  border: 1px solid rgba(255,255,255,0.06);
  padding: 4px;
}

/* 6) Day-Buttons */
button.dayBtn{
  width:34px;height:34px;
  border-radius:6px !important;
  border:1px solid var(--accent-weak) !important;
  background: var(--bg-panel-soft) !important;
  color: var(--txt-strong) !important;
  cursor:pointer;
}
button.dayBtn.selected{
  background: #1a3e62 !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(74,192,255,0.25) inset;
}

/* 7) Inputs in Modalen (Monat/Zeit/Datum) */
input[type="month"],
input[type="time"],
input[type="date"]{
  background: var(--bg-panel-soft) !important;
  color: var(--txt-strong) !important;
  border: 1px solid var(--accent-weak) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
}

/* 8) Modal-Buttons – gute Lesbarkeit auch im disabled-State */
div[style*="max-width:900px"] .btn.primary,
div[style*="max-width:480px"] .btn.primary,
div[style*="max-width:420px"] .btn.primary{
  background: rgba(74,192,255,0.20) !important;
  border-color: rgba(74,192,255,0.32) !important;
  color: var(--text) !important;
}
div[style*="max-width:900px"] .btn.secondary,
div[style*="max-width:480px"] .btn.secondary,
div[style*="max-width:420px"] .btn.secondary{
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
div[style*="max-width:900px"] .btn.primary:disabled,
div[style*="max-width:480px"] .btn.primary:disabled,
div[style*="max-width:420px"] .btn.primary:disabled{
  opacity: 1 !important;
  background: rgba(74,192,255,0.12) !important;
  border-color: rgba(74,192,255,0.22) !important;
  color: #a9d6ff !important;
  cursor: not-allowed !important;
}
div[style*="max-width:900px"] .btn.ghost,
div[style*="max-width:480px"] .btn.ghost,
div[style*="max-width:420px"] .btn.ghost{
  border-color: var(--accent-weak) !important;
  color: var(--txt) !important;
  background: rgba(74,192,255,0.06) !important;
}

/* 9) Texte/Labels im kleinen Unter-Modal (Zeitbereiche) */
div[style*="max-width:480px"] label,
div[style*="max-width:420px"] label{
  color: var(--muted) !important;
}

/* 10) Link-ähnliche Controls wie „Entfernen“ */
div[style*="max-width:480px"] button.btn.secondary,
div[style*="max-width:420px"] button.btn.secondary{
  color: #c9d8ee !important;
  border-color: rgba(255,255,255,0.10) !important;
}
/* ========= Modal: hartes Dark-Theme erzwingen (über Inline-Styles) ========= */
/* Overlay selbst dunkler */
div[style*="position:fixed"][style*="inset:0"][style*="z-index"]{
  background: rgba(3,10,18,0.70) !important;
  backdrop-filter: blur(2px);
}

/* 1) Großes Kalender-Modal (scheduleOverlay) – Container dunkel */
#scheduleOverlay > div{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* 2) Fallback: beliebige weiße Karten im Overlay dunkel färben
   (deckt auch das kleine "Zeiten für …"-Modal ohne ID ab) */
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] *[style*="background:#fff"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] *[style*="background: #fff"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] *[style*="background:#ffffff"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] *[style*="background: #ffffff"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] *[style*="background:white"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* 3) Modale Titel/Typografie hell */
#scheduleOverlay h3,
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] h3,
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] h4{
  color: var(--txt-strong) !important;
}

/* 4) Kalender-Tabelle im Modal in dunkel/weiß */
#scheduleOverlay table{
  width:100%;
  border-collapse: collapse;
}
#scheduleOverlay thead th{
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
#scheduleOverlay tbody td{
  border: 1px solid rgba(255,255,255,0.08);
}

/* 5) Day-Buttons im Modal deutlich dunkel/hell */
#scheduleOverlay button.dayBtn{
  width:34px;height:34px;
  border-radius:6px !important;
  border:1px solid rgba(74,192,255,0.45) !important;
  background: #0f2033 !important;
  color: #e8f1ff !important;
}
#scheduleOverlay button.dayBtn.selected{
  background: #1a3e62 !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(74,192,255,0.25) inset;
}

/* 6) Inputs im/unter Modal (Monat, Zeit, Datum) dunkel */
#scheduleOverlay input[type="month"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] input[type="time"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] input[type="date"]{
  background: #10263f !important;
  color: #e8f1ff !important;
  border: 1px solid rgba(74,192,255,0.45) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
}

/* 7) Modal-Buttons: gut lesbar, auch disabled */
#scheduleOverlay .btn.primary,
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] .btn.primary{
  background: rgba(74,192,255,0.22) !important;
  border-color: rgba(74,192,255,0.36) !important;
  color: var(--text) !important;
}
#scheduleOverlay .btn.secondary,
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] .btn.secondary{
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
#scheduleOverlay .btn.primary:disabled,
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] .btn.primary:disabled{
  opacity: 1 !important;
  background: rgba(74,192,255,0.14) !important;
  border-color: rgba(74,192,255,0.26) !important;
  color: #cfe9ff !important;
  cursor: not-allowed !important;
}

/* 8) Der kleine "Zeiten für …"-Dialog (max-width 480/420px) explizit */
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] div[style*="max-width:480px"],
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] div[style*="max-width:420px"]{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] div[style*="max-width:480px"] .note,
div[style*="position:fixed"][style*="inset:0"][style*="z-index"] div[style*="max-width:420px"] .note{
  color: var(--muted) !important;
}
/* ==== Dark-Theme für Modalfenster (am Ende der styles.css anhängen) ==== */

/* Overlay etwas dunkler */
#scheduleOverlay{
  background: rgba(3,10,18,0.70) !important;
  backdrop-filter: blur(2px);
}

/* Alle modalen Karten dunkel mit heller Typo */
.modal-card{
  background: #0b2032 !important;         /* dunkel */
  color: #e8f1ff !important;              /* hell */
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45) !important;
}

/* Überschriften / Hinweise */
.modal-card h3, .modal-card h4 { color:#e8f1ff !important; }
.modal-card .note { color:#9bb0c6 !important; }

/* Kalender-Tabelle */
.modal-card table { width:100%; border-collapse:collapse; }
.modal-card thead th{
  color:#9bb0c6 !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
  padding:6px;
}
.modal-card tbody td{
  border:1px solid rgba(255,255,255,0.08) !important;
  padding:4px;
}

/* Day-Buttons (Kalendertage) */
.modal-card button.dayBtn{
  width:34px;height:34px;
  border-radius:6px !important;
  border:1px solid rgba(74,192,255,0.45) !important;
  background:#10263f !important;
  color:#e8f1ff !important;               /* Zahlen weißlich */
  cursor:pointer;
}
.modal-card button.dayBtn.selected{
  background:#1a3e62 !important;
  border-color:#4ac0ff !important;
  color:#ffffff !important;
  box-shadow:0 0 0 2px rgba(74,192,255,0.25) inset;
}

/* Inputs im Modal (Monat / Zeit / Datum) dunkel */
.modal-card input[type="month"],
.modal-card input[type="time"],
.modal-card input[type="date"]{
  background:#10263f !important;
  color:#e8f1ff !important;
  border:1px solid rgba(74,192,255,0.45) !important;
  border-radius:8px !important;
  padding:6px 8px !important;
}

/* Modal-Buttons gut lesbar (auch disabled) */
.modal-card .btn.primary{
  background:rgba(74,192,255,0.22) !important;
  border-color:rgba(74,192,255,0.36) !important;
  color:#e7f3ff !important;
}
.modal-card .btn.secondary{
  background:transparent !important;
  border-color:rgba(255,255,255,0.12) !important;
  color:#9bb0c6 !important;
}
.modal-card .btn.primary:disabled{
  opacity:1 !important;
  background:rgba(74,192,255,0.14) !important;
  border-color:rgba(74,192,255,0.26) !important;
  color:#cfe9ff !important;
  cursor:not-allowed !important;
}

/* Strategie-Select zusätzlich gut lesbar */
#strategySelect{
  background:#10263f !important;
  color:#e8f1ff !important;
  border:1px solid rgba(74,192,255,0.45) !important;
  font-weight:700;
  letter-spacing:.2px;
}
#strategySelect:focus{
  outline:2px solid rgba(74,192,255,0.45);
  outline-offset:1px;
}