/* ═══════════════════════════════════════════════════════
   Wochenprogramm v2.1 – CSS-only Checkbox-Hack
   Anpassung: .wp-woche { --wp-primary: #farbe; }
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

/* ── Variablen ── */
.wp-woche {
    --wp-bg:          var(--background-color, #ffffff);
    --wp-surface:     #f8f9fa;
    --wp-surface-2:   #eef0f3;
    --wp-border:      #dee2e8;
    --wp-text:        #1a1a2e;
    --wp-text-muted:  #6b7280;
    --wp-radius:      8px;
    --wp-mono:        'DM Mono', monospace;

    --wp-primary:     var(--color-primary, #3b6fc4);
    --wp-primary-bg:  rgba(59,111,196,.10);
    --wp-primary-bd:  rgba(59,111,196,.30);

    --wp-blue:        var(--wp-primary);
    --wp-blue-bg:     var(--wp-primary-bg);
    --wp-blue-bd:     var(--wp-primary-bd);

    --wp-red:         #c0392b;
    --wp-red-bg:      rgba(192,57,43,.10);
    --wp-red-bd:      rgba(192,57,43,.30);

    --wp-yellow:      #b7770d;
    --wp-yellow-bg:   rgba(183,119,13,.10);
    --wp-yellow-bd:   rgba(183,119,13,.30);

    --wp-nextweek-bg: rgba(183,119,13,.06);
    --wp-nextweek-bd: rgba(183,119,13,.25);
}

/* ── Radio-Inputs verstecken ── */
.wp-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}

/* ── Wrapper ── */
.wp-woche {
    font-family: inherit;
    color: var(--wp-text);
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Grid ── */
.wp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius);
    overflow: hidden;
}
@media (min-width: 900px) {
    .wp-grid {
        grid-template-columns: 1fr 360px;
        gap: 0;
        align-items: start;
    }
    .wp-left {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

/* ══════════════════════════════════════════════
   SPALTEN 1+2 – Wochentage
   ══════════════════════════════════════════════ */

.wp-days {
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.wp-day-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    border-bottom: 1px solid var(--wp-border);
    background: transparent;
    transition: background .2s;
}
.wp-day-row:last-child { border-bottom: none; }

/* Nächste Woche: kein Hintergrund */
.wp-day-row.wp-nextweek {
    background: transparent;
}

/* Heute */
.wp-day-row.wp-today .wp-col-day {
    background: var(--wp-primary-bg);
    border-right: 3px solid var(--wp-primary);
}
.wp-day-row.wp-today .wp-dayname {
    color: var(--wp-primary);
    font-weight: 700;
}

/* Spalte 1 */
.wp-col-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border-right: 1px solid var(--wp-border);
    background: transparent;
    gap: 2px;
    min-height: 52px;
}
.wp-dayname {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.wp-daydate {
    font-family: var(--wp-mono);
    font-size: 11px;
    color: var(--wp-text-muted);
}

/* nä. Wo. Badge */
.wp-nextbadge {
    font-size: 9px;
    font-style: italic;
    color: var(--wp-text-muted);
    margin-top: 1px;
    white-space: nowrap;
}

/* Spalte 2 */
.wp-col-events {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.wp-empty {
    color: var(--wp-text-muted);
    font-size: 13px;
    padding: 4px 2px;
}

/* ── Event-Chip ── */
.wp-event {
    display: flex;
    align-items: baseline;   /* baseline statt center → ermöglicht Umbruch */
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 6px;
    text-decoration: none !important;
    color: inherit !important;
    border: none;
    transition: filter .15s;
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
}
.wp-event:hover { filter: brightness(.93); }

/* Mobil/Desktop Sichtbarkeit */
.wp-event--mobile  { display: flex; }
.wp-event--desktop { display: none; }
@media (min-width: 900px) {
    .wp-event--mobile  { display: none; }
    .wp-event--desktop { display: flex; }
}

/* ── Mobile: gleiche Optik wie Desktop, aber als Link ── */
.wp-event--mobile {
    text-decoration: none !important;
    color: inherit !important;
}
.wp-event--mobile:hover {
    filter: brightness(.93);
}
.wp-event--mobile:active {
    filter: brightness(.85);
}

/* Farben – kein Rahmen, kein Hintergrund, nur farbiger Punkt */
.wp-color-none   { background: transparent; border: none; }
.wp-color-blue   { background: transparent; border: none; }
.wp-color-red    { background: transparent; border: none; }
.wp-color-yellow { background: transparent; border: none; }
.wp-color-none .wp-dot { background: var(--wp-border); }

/* Farbpunkt */
.wp-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px; /* optische Ausrichtung bei Zeilenumbruch */
}
.wp-color-blue   .wp-dot { background: var(--wp-blue);   }
.wp-color-red    .wp-dot { background: var(--wp-red);    }
.wp-color-yellow .wp-dot { background: var(--wp-yellow); }

.wp-etime {
    font-family: var(--wp-mono);
    font-size: 11px;
    color: var(--wp-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Titel: umbricht bei Bedarf, eingerückt unter Uhrzeit */
.wp-etitle {
    font-size: 13px;
    font-weight: 500;
    /* kein nowrap, kein overflow:hidden → Umbruch erlaubt */
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

.wp-live-badge {
    font-size: 10px;
    background: rgba(220,38,38,.12);
    color: #dc2626;
    border: 1px solid rgba(220,38,38,.3);
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
.wp-series {
    font-size: 11px;
    color: var(--wp-text-muted);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   AKTIVER EVENT – Checkbox-Hack
   Ausgewähltes Label bekommt linken farbigen Rand
   ══════════════════════════════════════════════ */

/* Wenn ein Radio checked ist → zugehöriges Label hervorheben
   Wir nutzen den General Sibling Combinator ~ */
.wp-radio:checked + * .wp-event--desktop,
.wp-radio:checked ~ * .wp-event--desktop {
    /* Reset aller Labels – sicherheitshalber via :not */
}

/* Aktives Label direkt selektieren über ID-Matching ist in reinem CSS
   nicht möglich, daher nutzen wir JS-freie Alternative:
   Das checked Radio liegt direkt vor .wp-grid.
   Wir generieren im PHP pro Event eine spezifische CSS-Regel via wp_add_inline_style
   ODER wir nutzen folgenden Trick:
   Jedes Label hat for="uid-id-date". Das Radio hat die gleiche ID.
   :checked ~ .wp-grid label[for="uid-id-date"] ist der richtige Selektor. */

/* Basis: alle Desktop-Labels normal */
.wp-event--desktop {
    padding-left: 6px;
    border-radius: 4px;
}

/* Aktiv-Hervorhebung – wird inline per PHP generiert (siehe build_active_css) */
/* Hintergrundfarbe für aktive Veranstaltung per color-var */

/* ══════════════════════════════════════════════
   SPALTE 3 – Detail-Panel (nur Desktop)
   ══════════════════════════════════════════════ */

.wp-detail {
    display: none;
}
@media (min-width: 900px) {
    .wp-detail {
        display: block;
        border: none;
        border-left: 1px solid var(--wp-border);
        border-radius: 0;
        background: transparent;
        overflow: hidden;
    }
}

/* Alle Detail-Items versteckt */
.wp-detail-item {
    display: none;
}

/* Sichtbarkeit per Radio:checked ~ .wp-grid .wp-detail-item
   Wird als inline CSS generiert – ein Selektor pro Event */

/* Detail-Inhalt */
.wp-detail-img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--wp-border);
}
.wp-detail-body {
    padding: 16px 18px 20px;
}
.wp-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.wp-detail-badge {
    font-size: 11px;
    font-family: var(--wp-mono);
    padding: 0;
    font-weight: 500;
    color: var(--wp-text-muted);
}
.wp-detail-badge.wp-color-blue   { color: var(--wp-blue);   }
.wp-detail-badge.wp-color-red    { color: var(--wp-red);    }
.wp-detail-badge.wp-color-yellow { color: var(--wp-yellow); }
.wp-badge-live   { color: #dc2626; }
.wp-badge-series { color: var(--wp-text-muted); }

.wp-detail-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
    word-break: break-word;
}
.wp-detail-title.wp-color-blue   { color: var(--wp-blue);   }
.wp-detail-title.wp-color-red    { color: var(--wp-red);    }
.wp-detail-title.wp-color-yellow { color: var(--wp-yellow); }

.wp-detail-desc {
    font-size: 13px;
    line-height: 1.65;
    color: var(--wp-text-muted);
    margin-bottom: 14px;
}
.wp-detail-desc * { font-size: 13px !important; color: var(--wp-text-muted) !important; }

.wp-detail-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--wp-text);
    margin-bottom: 14px;
}
.wp-detail-price * { font-size: 14px !important; }

.wp-detail-link {
    display: inline-block;
    background: var(--wp-primary);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity .15s;
}
.wp-detail-link:hover { opacity: .85; }

/* Scrollbar */
.wp-detail { transition: background .2s; }
.wp-detail::-webkit-scrollbar { width: 4px; }
.wp-detail::-webkit-scrollbar-track { background: transparent; }
.wp-detail::-webkit-scrollbar-thumb { background: var(--wp-border); border-radius: 2px; }

/* ── Legende ── */
.wp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 10px 4px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--wp-border);
}
.wp-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--wp-text-muted);
}
.wp-legend-series .wp-series {
    font-size: 13px;
    color: var(--wp-text-muted);
}
.wp-legend-item .wp-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}
.wp-legend-item .wp-color-blue   { background: var(--wp-blue);   }
.wp-legend-item .wp-color-red    { background: var(--wp-red);    }
.wp-legend-item .wp-color-yellow { background: var(--wp-yellow); }

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .wp-woche {
        --wp-bg:         #0f1117;
        --wp-surface:    #1a1d27;
        --wp-surface-2:  #22263a;
        --wp-border:     #2e3347;
        --wp-text:       #e8eaf0;
        --wp-text-muted: #6b7289;
        --wp-nextweek-bg: rgba(183,119,13,.08);
    }
}