/**
 * Hub-Components — Single Source of Truth für Hub-typische Layout-Bausteine
 *
 * Wird von BEIDEN Builds importiert:
 *   - resources/css/portal.css         (FluxUI-Portal)
 *   - resources/css/web/shared-styles.css (Web/Hub-Frontend)
 *
 * Dadurch DRY für Customer-Dashboard (Phase 2), Admin-Dashboard (Phase 3),
 * Listen/Detail-Pages (Phase 4) und perspektivisch auch die Hub-Landing.
 *
 * Tokens kommen aus shared/design-tokens.css — diese Datei darf KEINE
 * Hex-Literale enthalten (außer wo bewusst alpha-overlays via `rgba`
 * gegen White/Black gerechnet werden).
 *
 * Vorlage: dev/frontend/tailwind_v3/User Dashboard presseportale.html
 * Dokumentation: dev/frontend/hub-flux/04-PHASE-2-CUSTOMER-DASHBOARD.md
 */

@layer components {
    /* ============================================================
     * Panels (Karten-Container mit Hub-Charakter)
     * ============================================================ */

    .panel {
        background: var(--color-bg-card);
        border: 1px solid var(--color-bg-rule);
        border-radius: 6px;
    }
    .panel-warm {
        background: var(--color-bg-elev);
        border: 1px solid var(--color-bg-rule);
        border-radius: 6px;
    }
    .panel-dark {
        /* KONSTANTES Dark-Hub-Blau — bleibt auch im Dark Mode dunkel
           (sonst würde `var(--color-hub)` zum hellen #5a78c2 werden).
           Tokens `--color-panel-dark` und `--color-panel-dark-2` sind
           in beiden Modi identisch. */
        background: var(--color-panel-dark-2);
        border: 1px solid var(--color-panel-dark);
        border-radius: 6px;
        color: var(--color-ink-on-dark);
    }

    .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--color-bg-rule);
    }
    .panel-dark .panel-head {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    /* ============================================================
     * Stat-Cards (KPI-Karten mit farbigem Strip links)
     * ============================================================ */

    .stat-card {
        position: relative;
        background: var(--color-bg-card);
        border: 1px solid var(--color-bg-rule);
        border-radius: 6px;
        padding: 18px 20px;
        transition:
            border-color 0.12s,
            box-shadow 0.12s;
    }
    .stat-card .stat-strip {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--color-hub-soft-2);
        border-radius: 6px 0 0 6px;
    }
    .stat-card.is-primary .stat-strip {
        background: var(--color-hub);
    }
    .stat-card.is-ok .stat-strip {
        background: var(--color-ok);
    }
    .stat-card.is-warn .stat-strip {
        background: var(--color-warn);
    }
    .stat-card.is-muted .stat-strip {
        background: var(--color-ink-4);
    }

    .stat-label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-ink-3);
    }
    .stat-card.is-primary .stat-label {
        color: var(--color-hub);
    }
    .stat-card.is-ok .stat-label {
        color: var(--color-ok);
    }
    .stat-card.is-warn .stat-label {
        color: var(--color-warn);
    }
    .stat-card.is-muted .stat-label {
        color: var(--color-ink-4);
    }

    .stat-num {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        font-size: 36px;
        font-weight: 600;
        color: var(--color-ink);
        letter-spacing: -0.5px;
        line-height: 1;
        margin-top: 14px;
    }
    .stat-card.is-ok .stat-num {
        color: var(--color-ok);
    }
    .stat-card.is-warn .stat-num {
        color: var(--color-warn);
    }
    .stat-card.is-muted .stat-num {
        color: var(--color-ink-3);
    }

    .stat-meta {
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-ink-3);
    }

    .stat-trend {
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        color: var(--color-ink-3);
    }

    /* ============================================================
     * Hint-Cards (Datenqualitäts-Hinweise mit Progress-Bar)
     * ============================================================ */

    .hint-card {
        display: grid;
        gap: 14px;
        grid-template-columns: auto 1fr;
        align-items: start;
        /* Im Light Mode warmes Buchpapier-elev; im Dark Mode der wärmere
           Card-Ton (`--color-bg-card-warm` schaltet automatisch um). */
        background: var(--color-bg-card-warm);
        border: 1px solid var(--color-bg-rule);
        /* `--color-accent-warm` bleibt KONSTANT Bernstein (Phase 5):
           Im Portal mappt --color-accent auf Hub-Blau, hier wollen wir
           aber den klassischen Bernstein-Border behalten. */
        border-left: 3px solid var(--color-accent-warm);
        border-radius: 5px;
        padding: 16px 18px;
    }
    .hint-card .hint-ico {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        background: var(--color-accent-soft);
        color: var(--color-accent-deep);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .hint-card .hint-bar {
        margin-top: 8px;
        height: 4px;
        width: 100%;
        border-radius: 999px;
        background: var(--color-bg-rule-2);
        overflow: hidden;
    }
    .hint-card .hint-bar > span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--color-accent-warm);
    }
    .hint-card .hint-action {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--color-accent-deep);
        text-decoration: none;
        text-underline-offset: 3px;
    }
    .hint-card .hint-action:hover {
        text-decoration: underline;
        text-decoration-color: color-mix(
            in oklab,
            var(--color-accent-deep),
            transparent 60%
        );
    }

    /* ============================================================
     * Badges (Status-Pillen)
     * ============================================================ */

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .badge.warn {
        background: var(--color-warn-soft);
        color: var(--color-accent-deep);
    }
    .badge.ok {
        background: var(--color-ok-soft);
        color: var(--color-gain-deep);
    }
    .badge.hub {
        background: var(--color-hub-soft);
        color: var(--color-hub);
    }
    .badge.err {
        background: var(--color-err-soft);
        color: var(--color-loss);
    }
    .badge.dot::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
    }

    /* ============================================================
     * Brand-Bridge (presseecho + businessportal24 Indikatoren)
     * ============================================================ */

    .bridge-row {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-ink-3);
    }
    .dot-pe {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--color-bridge-presseecho);
    }
    .dot-bp {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--color-bridge-businessportal);
    }

    /* ============================================================
     * Section-Eyebrow VARIANTE (für panel-head)
     * ============================================================
     * Die Basis-`.section-eyebrow` liegt in theme-pressekonto.css.
     * Im Portal-Bundle haben wir die Klasse heute NOCH NICHT — hier
     * eine portable Definition, die im Web-Build vom Original-Layer
     * überschrieben wird (gleiche Werte → idempotent).
     */
    .section-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-hub);
    }
    .section-eyebrow::after {
        content: "";
        display: block;
        width: 30px;
        height: 1px;
        background: var(--color-hub);
        opacity: 0.45;
    }
    .section-eyebrow.on-dark {
        color: var(--color-hub-line);
    }
    .section-eyebrow.on-dark::after {
        background: var(--color-hub-line);
        opacity: 0.55;
    }

    /* ============================================================
     * Eyebrow VARIANTE (für Portal)
     * ============================================================
     * Basis liegt in theme-pressekonto.css. Hier portabel für Portal-Build.
     */
    .eyebrow {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--color-hub);
    }
    .eyebrow.muted {
        color: var(--color-ink-3);
        letter-spacing: 0.16em;
        font-weight: 600;
        font-size: 10.5px;
    }
    .eyebrow.accent {
        color: var(--color-accent-deep);
    }
    .eyebrow.on-dark {
        color: var(--color-hub-line);
    }
}