/**
 * mod_oeffnungszeiten – Design A (Karten-Panel)
 * (C) 2026 Würfelmedia — GPL-2.0-or-later
 *
 * Alle Farben leiten sich per color-mix aus der geerbten Textfarbe ab, sodass
 * das Modul auf hellen wie dunklen Templates funktioniert. Per-Instanz-Werte
 * (Akzentfarbe) kommen als Inline-CSS-Variable auf dem .ohz-Wrapper an – daher
 * ohne !important.
 */

.ohz {
    --ohz-accent: #4f7a28;
    --ohz-line: color-mix(in srgb, currentColor 16%, transparent);
    --ohz-surface: color-mix(in srgb, currentColor 4%, transparent);
    --ohz-muted: color-mix(in srgb, currentColor 62%, transparent);
    --ohz-radius: 14px;

    color: inherit;
    font-family: var(--ohz-font, inherit);
    font-size: var(--ohz-font-size, 1rem);
    line-height: 1.5;
    box-sizing: border-box;
}

.ohz *,
.ohz *::before,
.ohz *::after {
    box-sizing: inherit;
}

/* ---- Design A: umgebendes Panel für Tabelle/Wochenplan/Liste ---- */
.ohz--mod.ohz--table,
.ohz--mod.ohz--week,
.ohz--mod.ohz--list {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--ohz-line);
    border-radius: var(--ohz-radius);
    background: var(--ohz-surface);
}

.ohz__heading {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
}

/* ---- Live-Status-Badge ---- */
.ohz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.9em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    border: 1px solid var(--ohz-line);
    background: color-mix(in srgb, currentColor 5%, transparent);
    line-height: 1.2;
}

.ohz-badge__dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    box-shadow: 0 0 0 0.18em color-mix(in srgb, currentColor 22%, transparent);
}

.ohz-badge--open {
    color: #2f7d32;
    border-color: color-mix(in srgb, #2f7d32 40%, transparent);
    background: color-mix(in srgb, #2f7d32 12%, transparent);
}

.ohz-badge--soon {
    color: #b7791f;
    border-color: color-mix(in srgb, #b7791f 40%, transparent);
    background: color-mix(in srgb, #b7791f 12%, transparent);
}

.ohz-badge--closed {
    color: #b5382f;
    border-color: color-mix(in srgb, #b5382f 38%, transparent);
    background: color-mix(in srgb, #b5382f 10%, transparent);
}

/* Abstand zwischen Badge und Tabelle */
.ohz--table .ohz-badge,
.ohz--week .ohz-badge,
.ohz--list .ohz-badge {
    margin-bottom: 1rem;
}

/* ---- Blöcke ---- */
.ohz-group + .ohz-group {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px dashed var(--ohz-line);
}

.ohz-group__title {
    font-weight: 700;
    color: var(--ohz-accent);
    margin-bottom: 0.5rem;
}

/* ---- Wochentabelle ---- */
.ohz-rows--table {
    width: 100%;
    border-collapse: collapse;
}

.ohz-rows--table .ohz-row > * {
    padding: 0.35rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ohz-line);
}

.ohz-rows--table .ohz-row:last-child > * {
    border-bottom: 0;
}

.ohz-row__days {
    font-weight: 600;
    white-space: nowrap;
    padding-right: 1.5rem !important;
}

.ohz-row__times {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.ohz-row.is-today > * {
    background: color-mix(in srgb, var(--ohz-accent) 12%, transparent);
}

.ohz-row.is-today .ohz-row__days::after {
    content: " •";
    color: var(--ohz-accent);
}

.ohz-row.is-closed-day .ohz-row__times {
    color: var(--ohz-muted);
}

.ohz-row__note {
    color: var(--ohz-muted);
    font-size: 0.88em;
}

/* ---- Wochenplan (alle Tage einzeln) ---- */
.ohz-rows--week {
    width: 100%;
    border-collapse: separate; /* nötig, damit der Eckenradius der heutigen Zeile greift */
    border-spacing: 0;
}

.ohz-rows--week .ohz-row > * {
    padding: 0.55rem 0.65rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--ohz-line);
}

.ohz-rows--week .ohz-row:last-child > * {
    border-bottom: 0;
}

.ohz-rows--week .ohz-row__times {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ohz-rows--week .ohz-row.is-today > * {
    color: var(--ohz-accent);
    border-bottom-color: transparent;
}

.ohz-rows--week .ohz-row.is-today > :first-child {
    border-radius: 10px 0 0 10px;
}

.ohz-rows--week .ohz-row.is-today > :last-child {
    border-radius: 0 10px 10px 0;
}

/* Die ganze Zeile ist bereits hervorgehoben – kein zusätzlicher Punkt. */
.ohz-rows--week .ohz-row.is-today .ohz-row__days::after {
    content: none;
}

/* "Geschlossen"-Kennzeichnung als dezente Pille. */
.ohz-chip {
    display: inline-block;
    padding: 0.1em 0.8em;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 0.92em;
    line-height: 1.5;
}

/* ---- Listen-Variante ---- */
.ohz-rows--list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ohz-rows--list .ohz-row {
    padding: 0.3rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    align-items: baseline;
}

.ohz-rows--list .ohz-row.is-today {
    font-weight: 600;
}

.ohz-row__sep {
    color: var(--ohz-muted);
}

/* ---- Ausnahmen / Feiertage ---- */
.ohz-exceptions {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.6rem 0 0;
    border-top: 1px dotted var(--ohz-line);
}

.ohz-exception {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.2rem 0;
    font-size: 0.94em;
}

.ohz-exception__date {
    font-weight: 600;
}

.ohz-exception__note,
.ohz-text {
    color: var(--ohz-muted);
}

.ohz-text {
    margin: 0.5rem 0 0;
    font-size: 0.94em;
}

/* ---- Modus "Text mit Umrandung" ---- */
.ohz--bordered .ohz-card {
    margin-top: 0.6rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--ohz-line);
    border-radius: var(--ohz-radius);
    background: var(--ohz-surface);
}

.ohz--bordered .ohz-today + .ohz-today {
    margin-top: 0.25rem;
}

.ohz-today__closed {
    color: var(--ohz-muted);
}

/* Heutige Zeile hervorheben (Punkt hinter dem Präfix). */
.ohz--bordered .ohz-today.is-today > strong {
    color: var(--ohz-accent);
}

.ohz--bordered .ohz-today.is-today > strong::after {
    content: " •";
}

/* Block-Überschrift, wenn ein Block mehrere Regeln enthält. */
.ohz--bordered .ohz-today--label {
    margin-top: 0.35rem;
}

.ohz--bordered .ohz-today--label:first-child {
    margin-top: 0;
}

/* ---- Fußbereich: Icon zwischen Zierlinien + Textzeile ---- */
.ohz__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.15rem;
}

.ohz__footer-rule {
    flex: 1 1 auto;
    border-top: 1px solid var(--ohz-line);
}

.ohz__footer-icon {
    max-height: 2.2em;
    width: auto;
}

.ohz__footer-text {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.78em;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ohz-muted);
}

/* ---- Theme-Varianten ---- */
.ohz[data-theme="light"] {
    color: #1d2733;
}

.ohz[data-theme="dark"] {
    color: #eef1f4;
}

.ohz[data-theme="dark"] .ohz-badge--open {
    color: #86e08a;
}

.ohz[data-theme="dark"] .ohz-badge--closed {
    color: #f2938c;
}

.ohz[data-theme="green"] {
    color: #23331d;
    --ohz-accent: #5c8a2c;
}

/* ---- Responsiv ---- */
@media (max-width: 480px) {
    .ohz--mod.ohz--table,
    .ohz--mod.ohz--week,
    .ohz--mod.ohz--list {
        padding: 1rem;
    }

    .ohz-row__days {
        padding-right: 0.8rem !important;
    }
}