/**
 * PHASE 6 (additiv): Tabellen-Layout fuer den [ccampeltable]-Shortcode.
 *
 * Namespace: ausschliesslich .mo-cc-ampel-table* Klassen. Ueberschreibt/
 * beruehrt NICHT .cc-box / .cc-table / .cc-table-* (css/styles.css) oder
 * .mo-cc-ampel / .mo-cc-rating (css/mo-cc-ampel.css, [ccampel] bleibt
 * unveraendert). Diese Datei wird nur ueber moccMaybeLoadAmpelTableAssets()
 * geladen (includes/cc-ampel-table.php), unbedingt auf jeder Frontend-
 * Seite geladen (gleiche Begruendung wie beim Phase-4-Fix fuer
 * mo-cc-ampel.css: ACF-Flexible-Content-Seiten fuellen post_content
 * nicht, has_shortcode() waere unzuverlaessig).
 *
 * Baut auf denselben Design-Tokens wie mo-cc-ampel.css auf (Fallback-Werte
 * fuer den Fall, dass die Custom Properties aus dem MO-Designsystem an
 * dieser Stelle nicht verfuegbar sind), damit beide Ampel-Varianten
 * optisch zur selben Familie gehoeren, ohne eine Zeile CSS zu teilen.
 */

.mo-cc-ampel-table-wrap {
    --mo-cc-primary: var(--role-primary, #25325c);
    --mo-cc-secondary: var(--role-secondary, #e88e20);
    --mo-cc-secondary-hover: var(--role-secondary-hover, #d47f10);
    --mo-cc-radius-sm: var(--radius-sm, 6px);
    --mo-cc-radius-md: var(--radius-md, 10px);
    --mo-cc-radius-pill: var(--radius-pill, 999px);
    --mo-cc-shadow-sm: var(--shadow-sm, 0 2px 8px rgba(37, 50, 92, 0.10));
    --mo-cc-font-heading: var(--font-heading, inherit);
    --mo-cc-font-content: var(--font-content, inherit);
    --mo-cc-link: var(--link, var(--mo-cc-primary));
    --mo-cc-text-body: var(--text-body, #333333);
    --mo-cc-text-secondary: var(--text-secondary, #52607d);
    --mo-cc-text-muted: var(--text-muted, #64708c);
    --mo-cc-border: var(--border, #dde1ea);
    --mo-cc-border-strong: var(--border-strong, #c3c9d8);
    --mo-cc-surface-page: var(--surface-page, #ffffff);
    --mo-cc-surface-card: var(--surface-card, #f7f8fb);
    --mo-cc-surface-muted: var(--surface-muted, #eef0f5);

    /* Gleicher Ampel-Farbsatz wie mo-cc-ampel.css, bewusst dupliziert
       (kein gemeinsamer Import), damit [ccampeltable] unabhaengig von
       [ccampel] bleibt. */
    --mo-cc-status-green: #2e9b57;
    --mo-cc-status-green-bg: #e5f5eb;
    --mo-cc-status-amber: #b9820e;
    --mo-cc-status-amber-bg: #fbf1da;
    --mo-cc-status-neutral: var(--mo-cc-text-muted);
    --mo-cc-status-neutral-bg: var(--mo-cc-surface-muted);
    --mo-cc-status-red: #c6433d;
    --mo-cc-status-red-bg: #fbeae9;

    box-sizing: border-box;
    font-family: var(--mo-cc-font-content);
    max-width: 100%;
    margin: 1.5rem 0;
}

.mo-cc-ampel-table-wrap *,
.mo-cc-ampel-table-wrap *::before,
.mo-cc-ampel-table-wrap *::after {
    box-sizing: inherit;
}

/* --- Legende --------------------------------------------------------- */

.mo-cc-ampel-table-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--mo-cc-surface-card);
    border-radius: var(--mo-cc-radius-md);
    font-size: 0.875rem;
    color: var(--mo-cc-text-secondary);
}

.mo-cc-ampel-table-legend-item {
    display: inline-flex;
    align-items: center;
}

/* --- Land-Filter-Toolbar (Phase 7, 01.09.2026) -------------------------
   Eigene .mo-cc-ampel-table-* Klassen, bewusst dupliziert statt
   [ccampel]'s .mo-cc-ampel-toolbar/-chip/-filter-* wiederzuverwenden —
   gleiche Begründung wie beim übrigen Farbsatz dieser Datei: eigener
   Namespace, kein gemeinsamer Import, [ccampeltable] bleibt unabhängig
   von [ccampel]. ----------------------------------------------------- */

.mo-cc-ampel-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.75rem;
    background: var(--mo-cc-surface-page);
    border: 1px solid var(--mo-cc-border);
    border-radius: var(--mo-cc-radius-md);
    box-shadow: var(--mo-cc-shadow-sm);
}

/* PHASE 8 (02.09.2026): wraps one label + its chips (Land, Kontotyp) as
   one unit, so the two filter rows break cleanly onto separate lines on
   narrow screens instead of interleaving. */
.mo-cc-ampel-table-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.mo-cc-ampel-table-filter-label {
    font-family: var(--mo-cc-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mo-cc-text-muted);
    margin-right: 0.25rem;
}

.mo-cc-ampel-table-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: var(--mo-cc-surface-page);
    border: 1px solid var(--mo-cc-border);
    border-radius: var(--mo-cc-radius-pill);
    color: var(--mo-cc-text-secondary);
    font-family: var(--mo-cc-font-content);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
}

.mo-cc-ampel-table-chip:hover { border-color: var(--mo-cc-border-strong); }

.mo-cc-ampel-table-chip[aria-pressed="true"] {
    background: var(--mo-cc-primary);
    border-color: var(--mo-cc-primary);
    color: #ffffff;
}

.mo-cc-ampel-table-row[hidden] { display: none; }

/* PHASE 9 (03.09.2026): Ergebniszähler über der Tabelle. */
.mo-cc-ampel-table-result-count {
    margin: 0 0 0.6rem;
    color: var(--mo-cc-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.mo-cc-ampel-table-empty-state {
    padding: 1.5rem;
    margin: 0.75rem 0 0;
    text-align: center;
    color: var(--mo-cc-text-muted);
    background: var(--mo-cc-surface-card);
    border: 1px dashed var(--mo-cc-border-strong);
    border-radius: var(--mo-cc-radius-md);
    font-size: 0.9rem;
}

.mo-cc-ampel-table-empty-state[hidden] { display: none; }

/* PHASE 9 (03.09.2026): "Filter zurücksetzen"-Button im Empty-State. */
.mo-cc-ampel-table-reset-filters {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--mo-cc-link);
    font-family: var(--mo-cc-font-content);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.mo-cc-ampel-table-reset-filters:hover,
.mo-cc-ampel-table-reset-filters:focus-visible {
    color: var(--mo-cc-primary);
}

/* --- Rating-Pille (geteilt mit [ccampel]'s Markup-Struktur, eigene
       Deklaration da eigener Namespace) ------------------------------- */

.mo-cc-ampel-table-wrap .mo-cc-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--mo-cc-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.mo-cc-ampel-table-wrap .mo-cc-rating-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
}

.mo-cc-ampel-table-wrap .mo-cc-rating--green {
    color: var(--mo-cc-status-green);
    background: var(--mo-cc-status-green-bg);
}

.mo-cc-ampel-table-wrap .mo-cc-rating--green .mo-cc-rating-dot {
    background: var(--mo-cc-status-green);
}

.mo-cc-ampel-table-wrap .mo-cc-rating--yellow {
    color: var(--mo-cc-status-amber);
    background: var(--mo-cc-status-amber-bg);
}

.mo-cc-ampel-table-wrap .mo-cc-rating--yellow .mo-cc-rating-dot {
    background: var(--mo-cc-status-amber);
}

.mo-cc-ampel-table-wrap .mo-cc-rating--grey {
    color: var(--mo-cc-status-neutral);
    background: var(--mo-cc-status-neutral-bg);
}

.mo-cc-ampel-table-wrap .mo-cc-rating--grey .mo-cc-rating-dot {
    background: var(--mo-cc-status-neutral);
}

.mo-cc-ampel-table-wrap .mo-cc-rating--red {
    color: var(--mo-cc-status-red);
    background: var(--mo-cc-status-red-bg);
}

.mo-cc-ampel-table-wrap .mo-cc-rating--red .mo-cc-rating-dot {
    background: var(--mo-cc-status-red);
}

/* --- Tabelle ----------------------------------------------------------- */

.mo-cc-ampel-table-scroll {
    overflow-x: auto;
}

.mo-cc-ampel-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mo-cc-surface-page);
    border-radius: var(--mo-cc-radius-md);
    overflow: hidden;
    box-shadow: var(--mo-cc-shadow-sm);
    font-size: 0.9375rem;
    color: var(--mo-cc-text-body);
}

.mo-cc-ampel-table thead th {
    text-align: left;
    font-family: var(--mo-cc-font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mo-cc-text-secondary);
    background: var(--mo-cc-surface-card);
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--mo-cc-border);
    white-space: nowrap;
}

.mo-cc-ampel-table-row {
    border-bottom: 1px solid var(--mo-cc-border);
}

.mo-cc-ampel-table-row:last-child {
    border-bottom: none;
}

.mo-cc-ampel-table-row:hover {
    background: var(--mo-cc-surface-card);
}

.mo-cc-ampel-table-cell {
    padding: 0.65rem 0.9rem;
    vertical-align: middle;
}

.mo-cc-ampel-table-cell--art {
    width: 4.5rem;
}

.mo-cc-ampel-table-art {
    display: block;
    width: 3.5rem;
    height: 2.3125rem;
    object-fit: contain;
    border-radius: var(--mo-cc-radius-sm);
    background: var(--mo-cc-surface-card);
}

.mo-cc-ampel-table-cell--name {
    min-width: 12rem;
}

.mo-cc-ampel-table-name-row {
    display: block;
    font-weight: 600;
}

.mo-cc-ampel-table-name-row a {
    color: var(--mo-cc-link);
    text-decoration: none;
}

.mo-cc-ampel-table-name-row a:hover,
.mo-cc-ampel-table-name-row a:focus-visible {
    text-decoration: underline;
}

.mo-cc-ampel-table-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.mo-cc-ampel-table-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--mo-cc-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--mo-cc-surface-muted);
    color: var(--mo-cc-text-secondary);
    border: 1px solid transparent;
}

/* PHASE 12 (03.09.2026, additiv): bewusst NICHT dieselbe gedämpfte
   color-mix-Optik wie --status (auch --mo-cc-secondary-Farbfamilie) — bei
   gleicher Behandlung wären "Empfehlung" und "Status" nebeneinander kaum
   zu unterscheiden. Solide Füllung (wie .mo-cc-ampel-table-button) statt
   gedämpftem Hintergrund macht die Empfehlung als einzigen "vollen" Badge
   in der Reihe erkennbar, bleibt aber in derselben Markenfarbe wie die
   "Empfehlung"-Pille in [ccampelmini]. */
.mo-cc-ampel-table-badge--featured {
    background: var(--mo-cc-secondary);
    color: #ffffff;
}

/* PHASE 8 (02.09.2026, Feedback): Business/Status hatten zuvor einen
   eigenfarbigen border-color (--mo-cc-primary bzw. --mo-cc-secondary),
   Privat (Basisstil oben) keinen sichtbaren — dadurch wirkten die Badges
   uneinheitlich, Business/Status "härter" als Privat. Jetzt tragen alle
   drei denselben randlosen Look, nur die Hintergrund-/Textfarbe
   unterscheidet sie noch. */
.mo-cc-ampel-table-badge--business {
    color: var(--mo-cc-primary);
    background: color-mix(in srgb, var(--mo-cc-primary) 10%, var(--mo-cc-surface-page));
}

.mo-cc-ampel-table-badge--status {
    color: var(--mo-cc-secondary-hover);
    background: color-mix(in srgb, var(--mo-cc-secondary) 12%, var(--mo-cc-surface-page));
}

.mo-cc-ampel-table-cell--bonus {
    min-width: 10rem;
}

.mo-cc-ampel-table-bonus-text {
    display: inline;
}

.mo-cc-ampel-table-enddate {
    display: inline-block;
    color: var(--mo-cc-text-muted);
    font-size: 0.8125rem;
}

/* PHASE 10 (03.09.2026): "Voraussetzung für den Bonus" — eigene Zeile
   unter dem Bonus-Text/Enddatum, gedämpft statt gleichrangig, da es sich
   um eine Nebenbedingung handelt, nicht um den Bonus-Wert selbst. */
.mo-cc-ampel-table-requirement {
    display: block;
    margin-top: 0.2rem;
    color: var(--mo-cc-text-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.mo-cc-ampel-table-cell--history {
    min-width: 14rem;
    max-width: 22rem;
    color: var(--mo-cc-text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.mo-cc-ampel-table-cell--fee {
    white-space: nowrap;
    color: var(--mo-cc-text-secondary);
}

/* Keep the amount together, but let longer fee conditions wrap. */
.mo-cc-ampel-table-cell--fee .mo-cc-ampel-table-requirement {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 12rem;
}

.mo-cc-ampel-table-cell--cta {
    text-align: right;
    white-space: nowrap;
}

.mo-cc-ampel-table-button {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: var(--mo-cc-radius-pill);
    background: var(--mo-cc-secondary);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.mo-cc-ampel-table-button:hover,
.mo-cc-ampel-table-button:focus-visible {
    background: var(--mo-cc-secondary-hover);
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .mo-cc-ampel-table-button {
        transition: none;
    }
}

/* --- Mobil: horizontal scrollbar statt Umbruch ------------------------ */

@media (max-width: 640px) {
    .mo-cc-ampel-table {
        font-size: 0.875rem;
    }

    .mo-cc-ampel-table-cell,
    .mo-cc-ampel-table thead th {
        padding: 0.55rem 0.6rem;
    }

    .mo-cc-ampel-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
}