/* ======================================================================
   MEETMATE – Gemeinsames Grid-Layout & Bänderung (Organizer + Vote)
   -> Einzige Quelle für Tabelle, Linien, Bänderung, Sticky-Header
   -> Keine ansichts-spezifischen Vote-Farben (Ja/Nein/Vielleicht) hier!
   ====================================================================== */

/* Slot Counter Styling */
.mm-slot-counter {
  font-size: 16px !important;
  font-weight: bold !important;
}

.mm-slot-number {
  font-size: 18px !important;
}

.meetmate-scope {
  /* Tuning-Variablen – zentral anpassbar */
  --mm-grid-border: #d8dde2;
  --mm-grid-line:   #ccd3da;
  --mm-halfhour-line: #8a9ba8;
  --mm-head-bg:     #fafafa;
  --mm-band-a:      #f8fafc;
  --mm-band-b:      #edf2f7;
  --mm-time-a:      #f3f6f9;
  --mm-time-b:      #e5ebf1;
}

/* Scroll-Container mit Rahmen/Rundung */
.meetmate-scope .mm-grid-wrap{
  overflow: auto !important; /* Sowohl horizontal als auch vertikal - native Scrollbars */
  border: 1px solid var(--mm-grid-border) !important;
  border-radius: 12px !important;
  max-height: 520px !important;
  background: #fff !important;
  position: relative !important;
  width: 100% !important; /* Nimmt die ganze verfügbare Breite ein */
  box-sizing: border-box !important;
}

/* Grid: Zeitspalte (64px fest) + 60 Tages-Spalten (2 Monate) */
/* JavaScript berechnet die Tag-Breite dynamisch basierend auf Container-Breite */
.meetmate-scope .mm-grid{
  display: grid !important;
  position: relative !important;
  /* Grid-Template wird dynamisch per JavaScript gesetzt */
}

/* Kopfzeile (Wochentage) */
.meetmate-scope .mm-grid .head{
  position: sticky !important;
  top: 0 !important;
  background: var(--mm-head-bg) !important;
  z-index: 2 !important;
  border-bottom: 1px solid var(--mm-grid-line) !important;
}

/* Rasterlinien für alle Zellen */
.meetmate-scope .mm-grid .time,
.meetmate-scope .mm-grid .headcell,
.meetmate-scope .mm-grid .cell{
  border-right: 1px solid #b8c2ca !important;
  border-bottom: 1px solid #b8c2ca;
  min-height: 14px !important; /* Halbiert für Viertelstunden */
  box-sizing: border-box !important;
}

/* Halbstundenlinien: Standardgrau */
.meetmate-scope .mm-grid .cell[data-m="15"],
.meetmate-scope .mm-grid .cell[data-m="45"] {
  border-bottom: 1px solid #b8c2ca !important;
}

/* Viertelstundenlinien: Standardgrau mit 30% Transparenz */
.meetmate-scope .mm-grid .cell[data-m="0"],
.meetmate-scope .mm-grid .cell[data-m="30"] {
  border-bottom: 1px solid rgba(184, 194, 202, 0.3) !important;
}

/* Zeitspalte links (sticky) */
.meetmate-scope .mm-grid .time{
  text-align: right !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Zeitangaben über 2 Viertelstunden-Zellen spannen */
.meetmate-scope .mm-grid .time[data-m="0"],
.meetmate-scope .mm-grid .time[data-m="30"] {
  height: 28px !important; /* Doppelte Höhe für Halbstunden */
  margin-bottom: -14px !important; /* Überlappung mit nächster Zelle */
  z-index: 2 !important; /* Über der nächsten Zelle */
}

/* Deutlichere Stunden-Bänderung (wechselnd pro Stunde) */
.meetmate-scope .mm-grid .cell.band-a { background: var(--mm-band-a) !important; }
.meetmate-scope .mm-grid .cell.band-b { background: var(--mm-band-b) !important; }
.meetmate-scope .mm-grid .time.band-a { background: var(--mm-time-a) !important; }
.meetmate-scope .mm-grid .time.band-b { background: var(--mm-time-b) !important; }

/* Kopfzellen (Tagesnamen) */
.meetmate-scope .mm-grid .headcell{
  font-weight: 600 !important;
  text-align: center !important;
  padding: 10px 6px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

@media (max-width: 768px){
  /* Nur für Vote-Ansicht (.mmv-mode): Wochenkalender auf mobilen Geräten ausblenden */
  .meetmate-scope.mmv-mode .mm-grid-wrap,
  .meetmate-scope.mmv-mode .mm-grid {
    display: none !important;
  }
  
  /* Nur für Vote-Ansicht (.mmv-mode): Tabs auf mobilen Geräten ausblenden */
  .meetmate-scope.mmv-mode .mmv-viewtabs,
  .meetmate-scope.mmv-mode .mmv-tabs-left,
  .meetmate-scope.mmv-mode .mm-tabs,
  .meetmate-scope.mmv-mode .mm-tab-buttons {
    display: none !important;
  }
  
  /* Nur für Vote-Ansicht (.mmv-mode): Listenansicht auf mobilen Geräten optimieren */
  .meetmate-scope.mmv-mode .mm-list-view {
    display: block !important;
  }
  
  /* Nur für Vote-Ansicht (.mmv-mode): Desktop-Listenansicht auf mobilen Geräten ausblenden */
  .meetmate-scope.mmv-mode .mm-desktop-list {
    display: none !important;
  }
  
  /* Nur für Vote-Ansicht (.mmv-mode): Kleinere Schriften für mobile Listenansicht */
  .meetmate-scope.mmv-mode .mm-list-item {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-time {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-date {
    font-size: 12px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
  }
  
  /* Nur für Vote-Ansicht (.mmv-mode): Auswahlmöglichkeiten nebeneinander auf mobilen Geräten */
  .meetmate-scope.mmv-mode .mm-list-options {
    display: flex !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-option {
    flex: 1 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    background: #f8f9fa !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-option:hover {
    background: #e9ecef !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-option.selected {
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-option.v-yes.selected {
    background: #28a745 !important;
    border-color: #28a745 !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-option.v-maybe.selected {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
  }
  
  .meetmate-scope.mmv-mode .mm-list-option.v-no.selected {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
  }
}

/* Desktop: Nur für Vote-Ansicht (.mmv-mode): Mobile-Listenansicht ausblenden, Desktop-Listenansicht anzeigen */
@media (min-width: 769px){
  .meetmate-scope.mmv-mode .mm-list-view {
    display: none !important;
  }
  .meetmate-scope.mmv-mode .mm-desktop-list {
    display: block !important;
  }
}

/* Mobile: Organizer-Ansicht (ohne .mmv-mode) responsive machen */
@media (max-width: 768px){
  /* Organizer-Ansicht: Grid auf mobilen Geräten anpassen */
  .meetmate-scope:not(.mmv-mode) .mm-grid-wrap {
    max-height: 400px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  
  .meetmate-scope:not(.mmv-mode) .mm-grid {
    /* Mobile: Wird dynamisch per JavaScript gesetzt, aber Fallback-Werte */
    font-size: 12px !important;
  }
  
  .meetmate-scope:not(.mmv-mode) .mm-grid-wrap {
    /* Nimmt 100% der verfügbaren Breite ein */
    width: 100% !important;
  }
  
  .meetmate-scope:not(.mmv-mode) .mm-grid .time,
  .meetmate-scope:not(.mmv-mode) .mm-grid .headcell,
  .meetmate-scope:not(.mmv-mode) .mm-grid .cell {
    min-height: 12px !important; /* Halbiert für Viertelstunden */
    padding: 2px 1px !important; /* Auch Padding halbiert */
  }
  
  .meetmate-scope:not(.mmv-mode) .mm-grid .time {
    font-size: 11px !important;
  }
  
  .meetmate-scope:not(.mmv-mode) .mm-grid .headcell {
    font-size: 11px !important;
  }
}

/* Klick-Hinweis nur für klickbare Felder (Organizer & Vote) */
.meetmate-scope .mm-grid .cell.is-clickable:hover{
  filter: brightness(0.98);
  transition: filter .08s ease-in-out;
}

/* Zellen müssen relativ sein (für Rahmen-/Overlay-Berechnungen) */
.meetmate-scope .mm-grid .cell{
  position: relative !important;
}

/* Vergangene Zellen: Visuell deaktiviert und nicht klickbar */
.meetmate-scope .mm-grid .cell.cell-past {
  background: #f5f5f5 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* =========================================================
   Organizer: Auswahl-Visualisierung (gemeinsam genutzt)
   - Blaue Füllung für selektierte Halbstunden
   - Außenkanten-Rahmen über gesamten Block (sel-*)
   (In der Teilnehmeransicht werden andere Farben überlagert)
   ========================================================= */
.meetmate-scope .mm-grid .cell.sel {
  background: rgba(71, 171, 219, 0.8) !important; /* Primäres Blau mit 80% Deckkraft */
  border: none !important; /* Kein Rahmen für einzelne Zellen */
  border-radius: 0 !important; /* Keine Abrundung für einzelne Zellen */
  animation: cellFadeIn 0.15s ease-out !important; /* Elegante Markierungs-Animation */
  pointer-events: auto !important; /* Mausinteraktion sicherstellen */
}

/* Erweiterungsansicht: Gleiche Spezifität wie Neu-Umfrage */
.meetmate-scope .mm-card .mm-grid .cell.sel {
  background: rgba(71, 171, 219, 0.8) !important; /* Primäres Blau mit 80% Deckkraft */
  border: none !important; /* Kein Rahmen für einzelne Zellen */
  border-radius: 0 !important; /* Keine Abrundung für einzelne Zellen */
  animation: cellFadeIn 0.15s ease-out !important; /* Elegante Markierungs-Animation */
  pointer-events: auto !important; /* Mausinteraktion sicherstellen */
}

/* Animation für das Markieren von Zellen */
@keyframes cellFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Dunklerer Blau-Rahmen nur um den gesamten Block herum */
.meetmate-scope .mm-grid .cell.sel.sel-left {   border-left:   1px solid #2c5aa0 !important; }
.meetmate-scope .mm-grid .cell.sel.sel-right {  border-right:  1px solid #2c5aa0 !important; }
.meetmate-scope .mm-grid .cell.sel.sel-top {    border-top:    1px solid #2c5aa0 !important; }
.meetmate-scope .mm-grid .cell.sel.sel-bottom { border-bottom: 1px solid #2c5aa0 !important; }

/* Erweiterungsansicht: Gleiche Spezifität wie Neu-Umfrage */
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-left {   border-left:   1px solid #2c5aa0 !important; }
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-right {  border-right:  1px solid #2c5aa0 !important; }
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-top {    border-top:    1px solid #2c5aa0 !important; }
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-bottom { border-bottom: 1px solid #2c5aa0 !important; }
/* Abrundung nur an den äußeren Ecken des gesamten Blocks */
.meetmate-scope .mm-grid .cell.sel.sel-left.sel-top {     border-top-left-radius:     8px !important; }
.meetmate-scope .mm-grid .cell.sel.sel-right.sel-top {    border-top-right-radius:    8px !important; }
.meetmate-scope .mm-grid .cell.sel.sel-left.sel-bottom {  border-bottom-left-radius:  8px !important; }
.meetmate-scope .mm-grid .cell.sel.sel-right.sel-bottom { border-bottom-right-radius: 8px !important; }

/* Erweiterungsansicht: Gleiche Spezifität wie Neu-Umfrage */
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-left.sel-top {     border-top-left-radius:     8px !important; }
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-right.sel-top {    border-top-right-radius:    8px !important; }
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-left.sel-bottom {  border-bottom-left-radius:  8px !important; }
.meetmate-scope .mm-card .mm-grid .cell.sel.sel-right.sel-bottom { border-bottom-right-radius: 8px !important; }