/* ============================================================
   MINT.FV Decap CMS Custom Admin Styles
   Zusätzliche Styles für verbesserte UX im CMS
⚠️ WICHTIG: Event-Type Farben-Synchronisation============================================================ARCHITEKTUR-HINWEIS für Wartung: - cms-static/ wird AUTARK zu Netlify deployed - Farben sind in diesem File mit CSS-Variablen definiert - Event-Type Farben MÜSSEN synchron gehalten werden mit: * _data/event_types.yml (Jekyll: event card colors) * cms-static/admin/event-types.json (JavaScript: defaults) Bei Änderungen von Event-Type Farben: 1. Ändere: _data/event_types.yml (color: value) 2. Ändere: cms-static/admin/event-types.json (color: value) 3. Ändere: custom-admin.css (:root {
        --event-color-X: ...
    }) 4. Ändere: assets/css/events.css (falls vorhanden) Aktuell definierte Event-Types: - mach-mit-mathe #E8F4F8 (hellblau) - offene-werkstatt #F0F8E8 (hellgrün) - ferienpass #FFF4E6 (hell-orange) - sonstige #F5F0F8 (hellviolett)
   ============================================================ */

:root {
    /* Event-Type Farben aus _data/event_types.yml */
    --event-color-mach-mit-mathe: #e8f4f8;
    --event-color-offene-werkstatt: #f0f8e8;
    --event-color-ferienpass: #fff4e6;
    --event-color-sonstige: #f5f0f8;
    --event-border-mach-mit-mathe: #8ec5d4;
    --event-border-offene-werkstatt: #a8d18a;
    --event-border-ferienpass: #ffd699;
    --event-border-sonstige: #c5b8d4;
}

/* Quick-Create Button Container */
#quick-create-container {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Quick-Create Buttons */
.quick-btn {
padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
transition: transform 0.1s, box-shadow 0.1s, border-color 0.2s;
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    color: #333;
    border: 2px solid;
}

.quick-btn:hover {
  transform: translateY(-1px);
box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
}

.quick-btn:active {
  transform: translateY(0);
box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
}

/* Event-Type spezifische Farben für Quick-Buttons */

/* Zentrale Quelle: _data/event_types.yml */
.quick-btn.mach-mit-mathe {
background: var(--event-color-mach-mit-mathe);
    border-color: var(--event-border-mach-mit-mathe);
}

.quick-btn.offene-werkstatt {
background: var(--event-color-offene-werkstatt);
    border-color: var(--event-border-offene-werkstatt);
}

.quick-btn.ferienpass {
background: var(--event-color-ferienpass);
    border-color: var(--event-border-ferienpass);
}

.quick-btn.sonstige {
background: var(--event-color-sonstige);
    border-color: var(--event-border-sonstige);
}

/* Color Indicator Bar - Visuelles Feedback im Editor */
#event-type-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
height: 8px;
  z-index: 9999;
  pointer-events: none;
  transition: background-color 0.3s ease;
border-bottom: 2px solid rgb(0 0 0 / 10%);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* Top-Indicator-Bar im Editor */

/* Farbe und Emoji werden via JavaScript dynamisch gesetzt (aus event-types.json) */

/* Keine Duplikation von Emojis oder Farben hier - Single Source of Truth: event-types.json */

/* Farbcodierung für Event-Karten in der Listen-Ansicht */

/* Vollflächiger Hintergrund + Border + Emoji-Badge für bessere Sichtbarkeit */

/* Positionierung für Event-Einträge */
li:has(a[href*="/events/entries/"]),
div:has(> a[href*="/events/entries/"]):not([class*="App"]) {
    position: relative !important;
}

/* Basis-Styling für alle Event-Links */
a[href*="/events/entries/"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ferienpass */
a[href*="/events/entries/"][data-event-type="ferienpass"],
a[href*="ferienpass"] {
    background: var(--event-color-ferienpass) !important;
        border: 2px solid var(--event-border-ferienpass) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

a[href*="/events/entries/"][data-event-type="ferienpass"]:hover,
a[href*="ferienpass"]:hover {
    box-shadow: 0 2px 8px rgb(255 214 153 / 40%) !important;
    transform: translateX(2px) !important;
}

/* Mach mit Mathe */
a[href*="/events/entries/"][data-event-type="mach-mit-mathe"],
a[href*="mach-mit-mathe"] {
    background: var(--event-color-mach-mit-mathe) !important;
        border: 2px solid var(--event-border-mach-mit-mathe) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

a[href*="/events/entries/"][data-event-type="mach-mit-mathe"]:hover,
a[href*="mach-mit-mathe"]:hover {
    box-shadow: 0 2px 8px rgb(142 197 212 / 40%) !important;
    transform: translateX(2px) !important;
}

/* Offene Werkstatt */
a[href*="/events/entries/"][data-event-type="offene-werkstatt"],
a[href*="offene-werkstatt"] {
    background: var(--event-color-offene-werkstatt) !important;
        border: 2px solid var(--event-border-offene-werkstatt) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

a[href*="/events/entries/"][data-event-type="offene-werkstatt"]:hover,
a[href*="offene-werkstatt"]:hover {
    box-shadow: 0 2px 8px rgb(168 209 138 / 40%) !important;
    transform: translateX(2px) !important;
}

/* Sonstige */
a[href*="/events/entries/"][data-event-type="sonstige"],
a[href*="sonstige"] {
    background: var(--event-color-sonstige) !important;
        border: 2px solid var(--event-border-sonstige) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

a[href*="/events/entries/"][data-event-type="sonstige"]:hover,
a[href*="sonstige"]:hover {
    box-shadow: 0 2px 8px rgb(197 184 212 / 40%) !important;
    transform: translateX(2px) !important;
}

/* Editor-Hintergrund: Subtiler Pastellfarb-Hintergrund für Formularbereich */

/* Färbt den kompletten Editor-Bereich basierend auf Event-Typ */

/* Wrapper für Formular-Bereich (wenn Event-Typ erkennbar ist) */
div[class*="ControlPane"],
div[class*="EditorContainer"],
div[class*="EditorInterface"],
main[class*="main"] {
    transition: background-color 0.5s ease;
}

/* Wird via JavaScript dynamisch gesetzt basierend auf Event-Typ in URL */
body[data-event-type="mach-mit-mathe"] div[class*="ControlPane"],
body[data-event-type="mach-mit-mathe"] div[class*="EditorContainer"],
body[data-event-type="mach-mit-mathe"] div[class*="EditorInterface"],
body[data-event-type="mach-mit-mathe"] main[class*="main"] {
    background-color: rgb(232 244 248 / 30%) !important;
}

body[data-event-type="offene-werkstatt"] div[class*="ControlPane"],
body[data-event-type="offene-werkstatt"] div[class*="EditorContainer"],
body[data-event-type="offene-werkstatt"] div[class*="EditorInterface"],
body[data-event-type="offene-werkstatt"] main[class*="main"] {
    background-color: rgb(240 248 232 / 30%) !important;
}

body[data-event-type="ferienpass"] div[class*="ControlPane"],
body[data-event-type="ferienpass"] div[class*="EditorContainer"],
body[data-event-type="ferienpass"] div[class*="EditorInterface"],
body[data-event-type="ferienpass"] main[class*="main"] {
    background-color: rgb(255 244 230 / 30%) !important;
}

body[data-event-type="sonstige"] div[class*="ControlPane"],
body[data-event-type="sonstige"] div[class*="EditorContainer"],
body[data-event-type="sonstige"] div[class*="EditorInterface"],
body[data-event-type="sonstige"] main[class*="main"] {
    background-color: rgb(245 240 248 / 30%) !important;
}