/**
 * plg_system_oeffnungszeiten – Design B (dunkle „Pille" / Chip)
 * (C) 2026 Würfelmedia — GPL-2.0-or-later
 *
 * Das Plugin fügt seine Ausgabe inline in den Artikeltext ein, daher ist der
 * Wrapper ein <span> mit display-Umschaltung (kein <div>/<table> in <p>).
 * Signatur-Optik: dunkler, abgerundeter Chip mit farbigem Statuspunkt –
 * angelehnt an das Vorgabe-Design „HEUTE GEÖFFNET BIS 22:00 UHR".
 */

.ohz--plg {
    --ohz-accent: #8fbf42;
    --ohz-pill-bg: #1e2a17;
    --ohz-pill-text: #d7e9bb;
    --ohz-pill-border: color-mix(in srgb, var(--ohz-accent) 45%, transparent);

    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    font-size: 0.9rem;
    line-height: 1.45;
    color: inherit;
    box-sizing: border-box;
}

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

/* ---- Status-Chip (Pille) ---- */
.ohz--plg .ohz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    /* Innenabstände, Rand, Radius, Größe und Farben sind über die
       Plugin-Design-Optionen als CSS-Variablen überschreibbar. */
    padding: var(--ohz-pad-top, 0.5em) var(--ohz-pad-right, 1em) var(--ohz-pad-bottom, 0.5em) var(--ohz-pad-left, 1em);
    border-radius: var(--ohz-radius, 999px);
    background: var(--ohz-bg, var(--ohz-pill-bg));
    border: var(--ohz-border-width, 1px) solid var(--ohz-border-color, var(--ohz-pill-border));
    color: var(--ohz-badge-color, var(--ohz-accent));
    font-weight: 600;
    font-size: var(--ohz-font-size, 0.82rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    white-space: nowrap;
}

.ohz--plg .ohz-badge__dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--ohz-accent);
    flex: 0 0 auto;
    box-shadow: 0 0 0.4em 0.05em color-mix(in srgb, var(--ohz-accent) 70%, transparent);
}

/* Statusabhängige Akzente */
.ohz--plg.is-open {
    --ohz-accent: #8fbf42;
}

.ohz--plg.is-soon {
    --ohz-accent: #e6ab3c;
    --ohz-pill-border: color-mix(in srgb, #e6ab3c 45%, transparent);
}

.ohz--plg.is-closed {
    --ohz-accent: #d08a82;
    --ohz-pill-bg: #241a19;
    --ohz-pill-border: color-mix(in srgb, #d08a82 40%, transparent);
}

/* ---- Modus „Text mit Umrandung" ---- */
.ohz--plg .ohz-card {
    display: block;
    margin-top: 0.5em;
    padding: var(--ohz-pad-top, 0.6em) var(--ohz-pad-right, 0.95em) var(--ohz-pad-bottom, 0.6em) var(--ohz-pad-left, 0.95em);
    border-radius: var(--ohz-radius, 12px);
    background: var(--ohz-bg, var(--ohz-pill-bg));
    border: var(--ohz-border-width, 1px) solid var(--ohz-border-color, var(--ohz-pill-border));
    color: var(--ohz-badge-color, var(--ohz-pill-text));
    font-size: var(--ohz-font-size, 1em);
}

.ohz--plg .ohz-today {
    display: block;
}

.ohz--plg .ohz-today + .ohz-today {
    margin-top: 0.2em;
}

.ohz--plg .ohz-today__times {
    color: var(--ohz-times-color, var(--ohz-accent));
    font-variant-numeric: tabular-nums;
}

.ohz--plg .ohz-today__closed {
    opacity: 0.75;
}

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

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

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

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

/* ---- Volle Ansicht (Liste/Tabelle) als dunkle Karte ---- */
.ohz--plg.ohz--list,
.ohz--plg.ohz--table {
    padding: var(--ohz-pad-top, 0.95em) var(--ohz-pad-right, 1.15em) var(--ohz-pad-bottom, 0.95em) var(--ohz-pad-left, 1.15em);
    border-radius: var(--ohz-radius, 14px);
    background: var(--ohz-bg, var(--ohz-pill-bg));
    border: var(--ohz-border-width, 1px) solid var(--ohz-border-color, var(--ohz-pill-border));
    color: var(--ohz-badge-color, var(--ohz-pill-text));
    font-size: var(--ohz-font-size, 1em);
}

.ohz--plg.ohz--list .ohz-badge,
.ohz--plg.ohz--table .ohz-badge {
    margin-bottom: 0.75em;
    background: color-mix(in srgb, var(--ohz-accent) 14%, transparent);
}

.ohz--plg .ohz__heading {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
}

.ohz--plg .ohz-group {
    display: block;
}

.ohz--plg .ohz-group + .ohz-group {
    margin-top: 0.7em;
    padding-top: 0.7em;
    border-top: 1px dashed var(--ohz-pill-border);
}

.ohz--plg .ohz-group__title {
    display: block;
    color: var(--ohz-accent);
    font-weight: 700;
    margin-bottom: 0.3em;
}

.ohz--plg .ohz-rows--list {
    display: block;
}

.ohz--plg .ohz-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1em 1.2em;
    padding: 0.16em 0;
}

.ohz--plg .ohz-row__days {
    font-weight: 600;
    white-space: nowrap;
}

.ohz--plg .ohz-row__times {
    color: var(--ohz-times-color, inherit);
    font-variant-numeric: tabular-nums;
}

.ohz--plg .ohz-row.is-today {
    color: var(--ohz-accent);
    font-weight: 600;
}

.ohz--plg .ohz-row.is-closed-day .ohz-row__times {
    opacity: 0.7;
}

.ohz--plg .ohz-row__note {
    grid-column: 2;
    font-size: 0.85em;
    opacity: 0.75;
}

/* ---- Ausnahmen / Feiertage & Freitext ---- */
.ohz--plg .ohz-exceptions {
    display: block;
    margin-top: 0.55em;
    padding-top: 0.5em;
    border-top: 1px dotted var(--ohz-pill-border);
}

.ohz--plg .ohz-exception {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1em 1.2em;
    padding: 0.12em 0;
    font-size: 0.92em;
}

.ohz--plg .ohz-exception__date {
    font-weight: 600;
    white-space: nowrap;
}

.ohz--plg .ohz-exception__note {
    grid-column: 2;
    opacity: 0.75;
    font-size: 0.9em;
}

.ohz--plg .ohz-text {
    display: block;
    margin-top: 0.4em;
    opacity: 0.8;
    font-size: 0.9em;
}

/* ---- Theme-Varianten ---- */
.ohz--plg[data-theme="light"] {
    --ohz-pill-bg: #f1f4ec;
    --ohz-pill-text: #26331a;
    --ohz-pill-border: color-mix(in srgb, var(--ohz-accent) 55%, #0000);
}

.ohz--plg[data-theme="light"] .ohz-badge {
    color: color-mix(in srgb, var(--ohz-accent) 72%, #000 28%);
}

.ohz--plg[data-theme="light"].is-closed {
    --ohz-pill-bg: #f6efee;
}

.ohz--plg[data-theme="auto"] {
    --ohz-pill-bg: color-mix(in srgb, currentColor 8%, transparent);
    --ohz-pill-text: inherit;
    --ohz-pill-border: color-mix(in srgb, currentColor 22%, transparent);
    color: inherit;
}

.ohz--plg[data-theme="auto"] .ohz-badge {
    color: color-mix(in srgb, var(--ohz-accent) 65%, currentColor 35%);
}

.ohz--plg[data-theme="green"] {
    --ohz-pill-bg: #16240f;
    --ohz-pill-text: #d7e9bb;
    --ohz-accent: #9ccb4a;
}

/* ---- Responsiv ---- */
@media (max-width: 480px) {
    .ohz--plg.ohz--list,
    .ohz--plg.ohz--table {
        display: block;
    }

    .ohz--plg .ohz-badge {
        white-space: normal;
    }
}