/***************************************************************************
 * ICS Calendar (Pro) – Sidebar-spezifische Anpassungen
 *
 * Enthält CSS-Overrides für die Darstellung des ICS-Calendar-Plugins
 * in der Sidebar. Lädt nach dem Plugin-eigenen Stylesheet, damit die
 * Regeln in der Kaskade gewinnen.
 *
 * Plugin-Wurzelselektor: .ics-calendar
 * Verfügbare CSS-Variablen: --r34ics--color--*, --r34ics--fc--*,
 *                           --r34ics--image--max-width,
 *                           --r34ics--widget--max-width
 ***************************************************************************/

/*---------------------------------------------------------------------------
 * Konfigurationsvariablen
 *
 * Zentrale Stellschrauben für Farben, Geometrie und Dropdown-Look.
 * Alle Regeln weiter unten greifen nur noch über var(...) zu –
 * Anpassungen einer Hausfarbe oder des Eckenradius bleiben damit
 * auf diesen Block beschränkt.
 *
 * Präfix --og-cal- = "OG Werlte Calendar".
 * Werte gelten für jede .ics-calendar-Instanz auf der Seite (genug
 * Spezifität, um Plugin-Defaults in der Kaskade zu schlagen).
 *-------------------------------------------------------------------------*/
.ics-calendar {
    /* Hausfarben (eine Stelle für jede Hex-Farbe) */
    --og-cal-c-green:          #5a9e33;  /* SV-Vereinsgrün */
    --og-cal-c-blue:           #37a8df;  /* SV-Vereinsblau */
    --og-cal-c-yellow:         #fac732;  /* Highlight-Gelb (heute) */
    --og-cal-c-white:          #ffffff;
    --og-cal-c-input-border:   #898989;  /* Suchfeld-Rahmenton */

    /* Semantische Zuordnung – referenzieren die Hausfarben */
    --og-cal-today-bg:         var(--og-cal-c-yellow);  /* heutige Tageszelle */
    --og-cal-day-bg:           var(--og-cal-c-green);   /* Datums-Number-Block */
    --og-cal-day-color:        var(--og-cal-c-white);
    --og-cal-weekday-bg:       var(--og-cal-c-blue);    /* Wochentag-Header */
    --og-cal-weekday-color:    var(--og-cal-c-white);
    --og-cal-label-color:      var(--og-cal-c-green);   /* "Mai 2026"-Überschrift */
    --og-cal-listdate-color:   var(--og-cal-c-blue);    /* Tagesüberschrift Liste */

    /* Geometrie */
    --og-cal-weekday-fontsize: 90%;      /* Plugin-Default 70%; etwas größer */

    /* Monatsauswahl-Dropdown – Werte spiegeln das Suchfeld
     * (css/navigation.css → input + ::placeholder) */
    --og-cal-select-bg:           var(--og-cal-c-white);
    --og-cal-select-border:       1px solid var(--og-cal-c-input-border);
    --og-cal-select-radius:       3px;
    --og-cal-select-color:        var(--og-cal-c-green);
    --og-cal-select-font-family:  'Roboto', sans-serif;
    --og-cal-select-font-size:    12px;
    --og-cal-select-font-weight:  700;
    --og-cal-select-height:       29px;
    --og-cal-select-padding:      5px 10px;
}

/*---------------------------------------------------------------------------
 * Überschriftenfarben
 *-------------------------------------------------------------------------*/

/* Monats-/Jahres-Überschrift, z.B. "April 2026" */
.ics-calendar .ics-calendar-label,
.ics-calendar .ics-calendar-label * {
    color: var(--og-cal-label-color);
}

/* Tages-Überschrift, z.B. "Sonntag 26. April" */
.ics-calendar .ics-calendar-date,
.ics-calendar .ics-calendar-date * {
    color: var(--og-cal-listdate-color);
}

/*---------------------------------------------------------------------------
 * Kompaktere Abstände im Listeneintrag
 * Betrifft die drei Zeilen:
 *   1) Tagesüberschrift  .ics-calendar-date
 *   2) Uhrzeit           dl.events > dt.time
 *   3) Event-Titel       dl.events > dd.event (enthält .title)
 *-------------------------------------------------------------------------*/

/* Tagesüberschrift enger an den darunterliegenden Uhrzeiten */
.ics-calendar .ics-calendar-list-wrapper .ics-calendar-date {
    margin: 0.35em 0 0 0;
    line-height: 1.2;
}

/* Event-Definitionsliste direkt unter der Tagesüberschrift,
 * reduzierter Abstand zum nächsten Tag */
.ics-calendar .ics-calendar-list-wrapper dl.events {
    margin: 0 0 0.5em 0;
}

/* Uhrzeit- und Titel-Zeile dicht übereinander, keine
 * Browser-Default-Margins mehr */
.ics-calendar .ics-calendar-list-wrapper dl.events dt,
.ics-calendar .ics-calendar-list-wrapper dl.events dd {
    margin: 0;
    padding: 0;
    line-height: 1.25;
}

/*---------------------------------------------------------------------------
 * Aktueller Tag – Hintergrundfarbe der Tageszelle (#fac732)
 *
 * Hintergrund:
 *   ICS-Calendar-Pro liefert ZWEI Monats-Grid-Implementierungen:
 *     1) FullCalendar-Variante (Klassen .fc-…, .fc-day-today …)
 *     2) Plugin-eigene Tabelle .ics-calendar-month-grid mit Klassen
 *        .today, .day (oberer Datums-Block) und ul.events (Event-
 *        Liste) – Quelle: vendors/ics-calendar/assets/style.css.
 *
 *   Diese Site nutzt Variante 2 (das eigene Grid). Erkennbar daran,
 *   dass nur dort die CSS-Variable
 *     --r34ics--element--month--today-day--background
 *   für das Datumsfeld ausgewertet wird – ein früheres Override dieser
 *   Variable hat den oberen Datums-Block tatsächlich gelb gefärbt,
 *   während ein Override von .fc-day-today wirkungslos blieb.
 *
 * Strategie:
 *   Das <td class="today"> selbst hat im Plugin keine eigene
 *   Hintergrundfarbe (siehe vendors/ics-calendar/assets/style.css
 *   Zeile 614–617) – wir setzen sie direkt. Der innere .day-Block
 *   (oberes Datumsfeld) behält seine eigene Hintergrundfarbe aus
 *   --r34ics--element--month--today-day--background (Plugin-Default
 *   ≈ grau) und überdeckt das Gelb dort wie gewünscht. Die
 *   Eventliste (ul.events / li) hat keinen eigenen Hintergrund und
 *   zeigt das Gelb der Zelle durch.
 *
 *   <tbody><tr> trägt im Plugin "background: transparent !important"
 *   (Zeile 723–725); das wirkt nur auf tr selbst, nicht auf td, und
 *   stört unsere Regel daher nicht.
 *-------------------------------------------------------------------------*/
.ics-calendar .ics-calendar-month-grid td.today {
    background-color: var(--og-cal-today-bg);
}

/*---------------------------------------------------------------------------
 * Datumsfelder (oberer Datums-Block .day in jeder Tageszelle)
 *
 * Das Plugin stellt jeder Tageszelle einen .day-Block voran, der die
 * Tagesnummer zeigt. Standard-Look:
 *   .ics-calendar-month-grid .day {
 *     background-color: var(--r34ics--element--month--day--background);
 *     color:            var(--r34ics--element--month--day--color);
 *   }
 *   .ics-calendar-month-grid .today .day {
 *     background-color: var(--r34ics--element--month--today-day--background);
 *   }
 *   .ics-calendar-month-grid .today .day * {
 *     color: var(--r34ics--element--month--today-day--color);
 *   }
 *
 * Vorgabe: alle Datumsfelder einheitlich im SV-Vereinsgrün (#5a9e33)
 * mit weißer Schrift – auch das heutige Datum, off-Days und der
 * aktive Monat.
 *
 * Spezifität:
 *   Plugin "today"-Regel:    .ics-calendar-month-grid .today .day → (0,3,0)
 *   Unsere Hintergrund-Regel: .ics-calendar .ics-calendar-month-grid td .day → (0,3,1)
 *     → schlägt Plugin-Regel.
 *   Plugin "today *"-Regel:  .ics-calendar-month-grid .today .day * → (0,3,1)
 *   Unsere Schrift-Regel:    .ics-calendar .ics-calendar-month-grid td .day,
 *                            .ics-calendar .ics-calendar-month-grid td .day * → (0,3,1) bzw. (0,3,2)
 *     → über das nachladende Stylesheet bzw. höhere Spezifität abgesichert.
 *-------------------------------------------------------------------------*/
.ics-calendar .ics-calendar-month-grid td .day {
    background-color: var(--og-cal-day-bg);
}

.ics-calendar .ics-calendar-month-grid td .day,
.ics-calendar .ics-calendar-month-grid td .day * {
    color: var(--og-cal-day-color);
}

/*---------------------------------------------------------------------------
 * Monatsauswahl-Dropdown (.ics-calendar-select) im Look des Suchfelds
 *
 * Quelle der Werte: css/navigation.css
 *   - .below-menu-search input[type="search"]
 *       border: 1px solid #898989; border-radius: 3px (links);
 *       height: 29px; padding: 5px 10px;
 *   - .below-menu-search input[type="search"]::placeholder
 *       color: #5a9e33; font-size: 12px; font-weight: 700;
 *
 * Begründung:
 *   - Rahmen/Radius/Maße kommen vom Input. border-radius rundum 3px,
 *     weil das Dropdown alleine steht und – anders als das Suchfeld –
 *     nicht nahtlos an den Such-Button anschließt.
 *   - Schrift kommt vom Placeholder, weil dieser die dauerhaft sichtbare
 *     Suchfeld-Optik bestimmt. Der Dropdown zeigt analog dauerhaft den
 *     aktuellen Monatsnamen.
 *   - Body-Font ist 'Roboto', sans-serif (typography.css). Das Suchfeld
 *     erbt diesen Font; wir setzen ihn am Dropdown explizit, damit er
 *     nicht durch ein evtl. abweichendes Plugin- oder Widget-Container-
 *     Font überschrieben wird.
 *
 * Plugin-Default:
 *   .ics-calendar-select { font-size: 80%; background: ...select--background; }
 *   wird durch die expliziten Werte hier überschrieben.
 *
 * <option>-Hinweis:
 *   Browser rendern <option>-Elemente teilweise in System-UI und
 *   ignorieren CSS. Wir setzen die Werte trotzdem zusätzlich auf
 *   .ics-calendar-select option als Best-Effort – Chromium-basierte
 *   Browser übernehmen sie für die ausgeklappte Liste.
 *-------------------------------------------------------------------------*/
.ics-calendar .ics-calendar-select {
    background-color: var(--og-cal-select-bg);
    border: var(--og-cal-select-border);
    border-radius: var(--og-cal-select-radius);
    color: var(--og-cal-select-color);
    font-family: var(--og-cal-select-font-family);
    font-size: var(--og-cal-select-font-size);
    font-weight: var(--og-cal-select-font-weight);
    height: var(--og-cal-select-height);
    padding: var(--og-cal-select-padding);
}

.ics-calendar .ics-calendar-select option {
    background-color: var(--og-cal-select-bg);
    color: var(--og-cal-select-color);
    font-family: var(--og-cal-select-font-family);
    font-size: var(--og-cal-select-font-size);
    font-weight: var(--og-cal-select-font-weight);
}

/*---------------------------------------------------------------------------
 * Wochentag-Header (Mo, Di, Mi, ...)
 *
 * Plugin-Defaults (vendors/ics-calendar/assets/style.css):
 *   .ics-calendar-month-grid th, .ics-calendar-month-grid td {
 *       font-size: 70%;       (Zeile 583)
 *   }
 *   .ics-calendar-month-grid th {
 *       background-color: var(--r34ics--element--month--th--background);
 *       color: var(--r34ics--element--month--th--color);
 *       text-transform: uppercase;   (Zeile 599–605)
 *   }
 *
 * Vorgaben:
 *   - Schreibweise normal (kein Uppercase, keine Kapitälchen).
 *   - Hintergrund SV-Blau #37a8df (Ton aus typography/Listen-Header).
 *   - Schriftfarbe Weiß.
 *   - Schrift etwas größer (von 70% auf 90% des Eltern-Font-Size; bei
 *     Body 17px: ~11.9px → ~15.3px).
 *
 * Spezifitäten:
 *   Plugin "th"-Regel:                (0,1,1)
 *   Unsere th-Regel:                  (0,2,1) → schlägt Plugin-Werte.
 *
 * :not(.week-number) klammert den optionalen "KW"-Spaltenkopf aus
 * (vom Plugin separat als th.week-number eingeführt) – falls die
 * Kalenderwochen-Spalte aktiviert wird, behält sie ihr Standard-
 * Aussehen.
 *-------------------------------------------------------------------------*/
.ics-calendar .ics-calendar-month-grid th:not(.week-number) {
    background-color: var(--og-cal-weekday-bg);
    color: var(--og-cal-weekday-color);
    font-size: var(--og-cal-weekday-fontsize);
    text-transform: none;
}

/* Inline-Kinder (z.B. <a>, <span>) ebenfalls weiß, falls das Plugin
 * den Wochentagsnamen in ein verschachteltes Element verpackt. */
.ics-calendar .ics-calendar-month-grid th:not(.week-number) * {
    color: var(--og-cal-weekday-color);
}

/* Horizontales Padding der Wochentag-Header reduzieren, damit lange
 * Tagesnamen ("Donnerstag") in eine Zeile passen.
 *
 * Plugin-Default (vendors/ics-calendar/assets/style.css Zeile 602):
 *   padding: 0.5em 0.8em 0.2em 0.8em !important;
 *
 * Mit Body-Font 17px sind 0.8em ≈ 13.6px Polster auf jeder Seite – bei
 * 7 Spalten in einer Sidebar bleibt kaum Platz für lange Wochentage.
 * Wir reduzieren auf 0.2em links/rechts (≈ 3.4px); top/bottom bleiben
 * auf 0.5em / 0.2em wie im Plugin, damit die optische Höhe gleich bleibt.
 *
 * !important ist Pflicht, weil die Plugin-Regel selbst !important nutzt.
 */
.ics-calendar .ics-calendar-month-grid th:not(.week-number) {
    padding: 0.5em 0.2em 0.2em 0.2em !important;
}