:root {
  --primary-clr: #2196F3; /* Blau */
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #2c3e50;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  display: flex;
  gap: 20px;
  margin: 20px;
  background-color: transparent;
}

/* =====================
   LINKES WIDGET
   ===================== */
.left-panel {
  flex: 0 0 25%;
  background-color: #ecf0f1;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.welcome-section {
  /* Kleiner Farbverlauf-Hintergrund: Blau zu Violett */
  background: linear-gradient(135deg, #2196F3, #9C27B0);
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
  /* Optional: Schatten oder andere Effekte */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.welcome-section h2 {
  margin: 0;
  font-weight: 600;       /* Etwas fetterer Font-Weight */
  font-size: 1.6rem;      /* Größer als normal */
}

.welcome-section p {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 400;
}

.panel-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 10px 0;
}

.notes-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.notes {
  list-style-type: disc;
  margin-left: 20px;
}

.note-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#noteInput {
  resize: vertical;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#saveNoteBtn {
  padding: 6px 12px;
  background-color: var(--primary-clr);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#saveNoteBtn:hover {
  background-color: #1976d2;
}

/* =====================
   ZENTRALES WIDGET: KALENDER
   ===================== */
.center-panel {
  flex: 1;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.calendar .month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.calendar .month .prev,
.calendar .month .next {
  cursor: pointer;
}

.calendar .month .prev:hover,
.calendar .month .next:hover {
  color: var(--primary-clr);
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 10px;
  text-transform: capitalize;
  font-weight: 500;
}

.weekdays div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-bottom: 1px solid #ccc;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.day {
  position: relative;     /* Wichtig für absolutes Positionieren */
  min-height: 80px;       /* Höhe anpassen, wenn gewünscht */
  border: 1px solid #f5f5f5;
  color: var(--primary-clr);
  cursor: pointer;
}

/* 1) Die Tageszahl absolut im Zentrum */
.day-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 1rem;  /* ggf. anpassen */
  /* Weitere Stile (Farbe, Font-Weight etc.) */
}

/* 2) Event-Punkte ebenfalls absolut, 
   etwas unterhalb (z. B. 10-15px unter der Zahl) */
.day-event-indicators {
  position: absolute;
  top: calc(50% + 12px); /* Hier bestimmst du den Abstand unterhalb der Zahl */
  left: 50%;
  transform: translate(-50%, 0);

  display: flex;
  gap: 2px; /* Kleiner Abstand zwischen den Punkten */
  align-items: center;
  justify-content: center;
}

/* Die kleinen farbigen Punkte */
.event-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Hintergrundfarbe kommt inline aus dem JS (z. B. style="background-color:#2196F3;") */
}

.more-indicator {
  font-size: 0.7rem;
  color: #666;
}

/* Dein Hover- und Active-Effekt (kann so bleiben) */
.day:hover:not(.prev-date):not(.next-date) {
  background-color: var(--primary-clr);
  color: #fff;
}

.day.active {
  background-color: var(--primary-clr);
  color: #fff;
  font-size: 1.2rem;
}

.day.active::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  box-shadow: 0 0 8px 1px var(--primary-clr);
}

.day.today {
  font-size: 1.2rem;
}

/* Kleiner farbiger Punkt/Kreis für jedes Event */
.event-indicator {
  display: inline-block;
  width: 6px;   /* Durchmesser */
  height: 6px;
  border-radius: 50%;
  margin-right: 3px;
}

.day-event-indicators {
  /* Absolut unten in der Zelle */
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  
  /* Damit mehrere Punkte (oder +X) nebeneinander zentriert erscheinen */
  display: flex;
  gap: 4px; /* Abstand zwischen Punkten */
  align-items: center;
  justify-content: center;
}
/* Sorgt dafür, dass prev-date und next-date grau sind */
.day.prev-date .day-number,
.day.next-date .day-number {
  color: #b3b3b3; /* oder ein anderer Grauton deiner Wahl */
}

/* Optional: Wenn du den Hover-Effekt für "fremde" Tage entfernen willst, 
   kannst du diesen Teil ergänzen, damit sie beim Hovern nicht blau/weiß werden: */
.day.prev-date:hover,
.day.next-date:hover {
  background-color: transparent;
  color: #b3b3b3;
  cursor: default; /* Pfeil statt Zeigefinger */
}


.goto-today {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.goto {
  display: flex;
  align-items: center;
  border: 1px solid var(--primary-clr);
  border-radius: 5px;
  overflow: hidden;
}

.goto input {
  border: none;
  outline: none;
  padding: 5px 10px;
  color: var(--primary-clr);
}

.goto button {
  border: none;
  background-color: transparent;
  padding: 5px 10px;
  color: var(--primary-clr);
  cursor: pointer;
}

.goto button:hover {
  background-color: var(--primary-clr);
  color: #fff;
}

.today-btn {
  padding: 10px 20px;
  background-color: var(--primary-clr);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 10px 0;
}

.today-btn:hover {
  background-color: #1976d2;
  transform: translateY(-2px);
}

.today-btn:active {
  transform: translateY(0);
}

/* =====================
   RECHTES WIDGET
   ===================== */
.right-panel {
  position: relative;
  flex: 0 0 25%;
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.today-todos-section,
.next-week-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.right-panel h2 {
  margin-bottom: 10px;
}

.today-tasks,
.next-week-tasks {
  max-height: 300px;
  overflow-y: auto;
}

.no-event {
  text-align: center;
  padding: 10px;
  color: #878895;
}

.add-event {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary-clr);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-clr);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.add-event-wrapper {
  position: absolute;
  bottom: 70px;
  right: 20px;
  width: 300px;
  max-height: 0;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 5px;
  transition: max-height 0.5s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 11;
}

.add-event-wrapper.active {
  max-height: 300px;
}

.add-event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  color: #333;
}

.add-event-header .close {
  cursor: pointer;
  font-size: 1.5rem;
}

.add-event-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-event-body .add-event-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.checkbox-label {
  width: 100px;
  text-align: left;
}

.repeat-options {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.repeat-row,
.repeat-dates-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.weekly-days-chips {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.day-chip {
  padding: 5px 8px;
  border-radius: 15px;
  border: 1px solid var(--primary-clr);
  color: var(--primary-clr);
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  text-align: center;
}

.day-chip:hover {
  background-color: var(--primary-clr);
  color: #fff;
}

.day-chip.selected {
  background-color: var(--primary-clr);
  color: #fff;
}

.add-event-footer {
  padding: 10px 20px;
  display: flex;
  justify-content: center;
}

.add-event-footer .add-event-btn {
  padding: 8px 15px;
  border: 1px solid var(--primary-clr);
  background-color: var(--primary-clr);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.add-event-footer .add-event-btn:hover {
  background-color: transparent;
  color: var(--primary-clr);
}

.right-panel .event {
  background: #f1f1f1;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.right-panel .event.done {
  text-decoration: line-through;
  opacity: 0.6;
}

.right-panel .event .title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.right-panel .event .event-title {
  font-size: 1rem;
  font-weight: 400;
}

.right-panel .event .event-time {
  font-size: 0.8rem;
  font-weight: 400;
  color: #878895;
}

.right-panel .event .actions {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.right-panel .event .actions button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--primary-clr);
}

.right-panel .event .actions button:hover {
  color: #fff;
}

.edit-detail-btn {
  padding: 8px 15px;
  border: 1px solid var(--primary-clr);
  background-color: var(--primary-clr);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.edit-detail-btn:hover {
  background-color: transparent;
  color: var(--primary-clr);
}

/* Inline-Bearbeitungsformular */
.inline-edit-wrapper {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin-top: 10px;
}

.inline-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  color: #333;
}

.inline-edit-body {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-edit-footer {
  display: flex;
  justify-content: center;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

.inline-edit-close {
  cursor: pointer;
  font-size: 1.2rem;
}

.inline-edit-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inline-edit-btn {
  padding: 8px 15px;
  border: 1px solid var(--primary-clr);
  background-color: var(--primary-clr);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.inline-edit-btn:hover {
  background-color: transparent;
  color: var(--primary-clr);
}

/* Trenner */
.details-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

/* Mobile-Ansicht für iPhones etc. bis max. 767px */
@media (max-width: 767px) {
  /* Gesamtes Body/HTML nicht breiter als Viewport, kein horizontales Scrollen */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0; /* sicherstellen, dass kein extra Rand entsteht */
    padding: 0;
  }

  /* Der Haupt-Container soll statt row nun column verwenden */
  .container {
    flex-direction: column; /* Widgets untereinander */
    width: 100%;           /* Breite auf 100% begrenzen */
    margin: 0 auto;        /* zentriert sich in der Mitte (ggf. optional) */
    padding: 10px;         /* etwas innerer Rand, damit es nicht am Rand klebt */
    box-sizing: border-box;
  }

  /* Panels (Widgets) verkleinern, damit sie „kartenartig“ wirken */
  .left-panel,
  .center-panel,
  .right-panel {
    width: 100%;
    margin-bottom: 20px;   /* Abstand zwischen den "Blöcken" */
    padding: 15px;         /* etwas kompakter als Desktop */
    box-sizing: border-box; 
    border-radius: 8px;    /* "Widget-Look" */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* etwas schwächerer Schatten */
  }

  /* Der Plus-Button (Ereignis hinzufügen) 
     soll nicht mehr unten rechts kleben, 
     sondern z. B. in der Mitte unter den Panels auftauchen.
  */
  .add-event {
    position: static;   /* nicht mehr absolute/fixed */
    margin: 0 auto;     /* zentriert sich horizontal */
    display: block;     /* falls inline-block war, hier block */
    width: 50px;        /* ggf. anpassen */
    height: 50px;
    margin-bottom: 10px; /* kleiner Abstand nach unten */
  }

  /* Das Formular zum Hinzufügen nicht mehr "bottom:70px; right:20px;" 
     sondern normal fließend. Wir wollen es 
     geschlossen starten (max-height:0) und bei .active öffnen. 
  */
  .add-event-wrapper {
    position: static;
    max-height: 0;               /* Start: geschlossen */
    overflow: hidden;            /* Inhalt ausblenden */
    transition: max-height 0.5s ease;
    width: 100%;                 /* volle Breite */
    margin: 0 auto;              /* zentriert */
    box-sizing: border-box;
  }

  .add-event-wrapper.active {
    max-height: 600px; /* oder so groß, dass der Inhalt komplett reinpasst */
  }
}

.delete-detail-btn {
  background-color: #ff5252;  /* kräftiges Rot */
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.delete-detail-btn:hover {
  background-color: #ff3131;
}

/* Farbpalette im Hinzufügen-Formular */
.color-palette {
  margin-bottom: 10px;
}

.color-palette label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.color-options {
  display: flex;
  gap: 5px;
}

.color-option {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.color-option.selected {
  border-color: #000;
}

/* Im Kalender: visuelle Markierung (linke Rahmenlinie) */
.event {
  border-left: 5px solid transparent; /* wird per inline-style überschrieben */
  padding-left: 10px; /* etwas Abstand zum Rahmen */
}
.day-details {
  /* Was du bereits hast */
  margin-top: 20px;

  /* NEU: Begrenzte Höhe + Scrollen */
  max-height: 300px; /* Höhe anpassen, wie du möchtest */
  overflow-y: auto;
}

/* Einheitlicher Stil für Abschnittsüberschriften */
.today-todos-section h2,
.next-week-section h2,
.notes-section h3 {
  font-family: 'Poppins', sans-serif;  /* Moderne Schriftart */
  font-weight: 600;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #2196F3, #9C27B0);
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 15px;
}
/* Gemeinsamer Button-Stil für Formular-Buttons (Inline-Bearbeitung & Ereignis hinzufügen) */
.inline-edit-btn,
.add-event-btn {
  border: none;
  background-color: transparent;
  padding: 5px 10px;
  color: var(--primary-clr);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover-Effekt, analog zum Go-To Button */
.inline-edit-btn:hover,
.add-event-btn:hover {
  background-color: var(--primary-clr);
  color: #fff;
}

/* Modern gestylte Formularfelder, ohne das Layout grundlegend zu verändern */
.add-event-wrapper input,
.add-event-wrapper select,
.inline-edit-wrapper input,
.inline-edit-wrapper select {
  /* Keine 100% Breite, damit das ursprüngliche Layout erhalten bleibt */
  padding: 8px 10px;
  margin: 4px 0; /* leichte Anpassung, aber nicht zu groß */
  border: 1px solid var(--primary-clr);
  border-radius: 4px;
  background-color: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: var(--primary-clr);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Placeholder-Farbe anpassen */
.add-event-wrapper input::placeholder,
.inline-edit-wrapper input::placeholder {
  color: var(--primary-clr);
  opacity: 0.7;
}

/* Fokussierungseffekt – subtil, um das bestehende Layout nicht zu stören */
.add-event-wrapper input:focus,
.add-event-wrapper select:focus,
.inline-edit-wrapper input:focus,
.inline-edit-wrapper select:focus {
  outline: none;
  border-color: var(--primary-clr);
  box-shadow: 0 0 3px var(--primary-clr);
}