/* =====================================================================
 * NOA Partner-Portal — Erweiterungen + Gamification-Ebene
 *
 * Neu: "Partner Cockpit"-Gamification (rein visuell, basiert auf den
 * bereits vorhandenen Level-/KPI-Daten — keine neue Funktion):
 *   - Level-Hero (Status-Banner, Navy→Türkis)
 *   - Tier-Medaille + Fortschrittsring/-balken (Amber/Gold)
 *   - Achievement-Stat-Kacheln (kpi-card-Restyle)
 *   - Erfolgs-/Celebration-Zustand
 * Bestehend (verfeinert): Lead-Timeline, Status-Badges, Shop, Cart,
 *   Referral-Copy, Order-Bestätigung, Auth-Login.
 * ===================================================================== */

/* =====================================================================
 * 1 · GAMIFICATION — Level-Hero
 * ===================================================================== */
.level-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--grad-hero);
    color: #fff;
    padding: var(--space-7) var(--space-8);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 1fr minmax(220px, 320px);
    gap: var(--space-7);
    align-items: center;
}
/* Dekoratives Pin/Herz-Wasserzeichen — pointer-events off, rein Deko */
.level-hero::after {
    content: "";
    position: absolute; top: -40px; right: -30px;
    width: 260px; height: 260px;
    background:
        radial-gradient(closest-side, rgba(0,174,184,.45), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}
.level-hero__main { position: relative; z-index: 1; min-width: 0; }
.level-hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: .12em; text-transform: uppercase;
    color: #9ff0f5;
    margin-bottom: var(--space-3);
}
.level-hero__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.level-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl); line-height: 1.05;
    font-weight: var(--weight-extra); letter-spacing: -0.025em;
    color: #fff; margin: 0;
}
.level-hero__sub { margin-top: var(--space-2); color: rgba(255,255,255,.82); font-size: var(--text-sm); max-width: 52ch; }
.level-hero__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.level-hero__chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    color: #fff;
    backdrop-filter: blur(4px);
}
.level-hero__chip .material-symbols-outlined { font-size: 18px; color: #ffce86; }
.level-hero__chip b { font-variant-numeric: tabular-nums; }

/* Tier-Medaille (Amber/Gold Coin) */
.tier-medal {
    flex: none;
    width: 64px; height: 64px;
    border-radius: var(--radius-pill);
    display: grid; place-items: center;
    background: var(--grad-reward);
    box-shadow: var(--shadow-reward), inset 0 1px 0 rgba(255,255,255,.5);
    color: #5a3306;
    position: relative;
}
.tier-medal::before {
    content: ""; position: absolute; inset: 5px;
    border-radius: var(--radius-pill);
    border: 2px dashed rgba(90,51,6,.35);
}
.tier-medal .material-symbols-outlined { font-size: 32px; font-variation-settings: 'FILL' 1; }
.tier-medal__letter { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: var(--text-2xl); }

/* Fortschrittsseite des Hero */
.level-hero__progress { position: relative; z-index: 1; }
.level-hero__progress .progress-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: var(--text-sm); color: rgba(255,255,255,.85); margin-bottom: var(--space-2);
}
.level-hero__progress .progress-label b { color: #fff; font-variant-numeric: tabular-nums; }
.level-hero__nextpct { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: var(--text-lg); color: #ffce86; }

/* Reusable Gamification-Progressbar (Amber-Fill + Sheen) */
.progress {
    position: relative;
    height: 12px;
    background: rgba(255,255,255,.16);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress--onlight { background: var(--bg-muted); }
.progress__fill {
    position: relative;
    height: 100%;
    width: var(--p, 0%);
    border-radius: var(--radius-pill);
    background: var(--grad-reward);
    box-shadow: 0 0 12px rgba(245,163,59,.5);
    transition: width var(--dur-slow) var(--ease-out);
    overflow: hidden;
}
.progress__fill::after {
    content: ""; position: absolute; inset: 0;
    background: var(--grad-sheen);
    transform: translateX(-120%);
    animation: noa-sheen 2.6s var(--ease-in-out) infinite;
}

/* Max-Level Celebration */
.level-hero--max::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,206,134,.9), transparent 60%),
        radial-gradient(2px 2px at 70% 20%, rgba(159,240,245,.9), transparent 60%),
        radial-gradient(3px 3px at 85% 60%, rgba(255,206,134,.8), transparent 60%),
        radial-gradient(2px 2px at 40% 75%, rgba(255,255,255,.8), transparent 60%);
    pointer-events: none;
}
.level-hero__trophy {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px; border-radius: var(--radius-pill);
    background: var(--grad-reward); color: #5a3306;
    box-shadow: var(--shadow-reward);
    margin-bottom: var(--space-3);
}
.level-hero__trophy .material-symbols-outlined { font-size: 30px; font-variation-settings: 'FILL' 1; }

@media (max-width: 860px) {
    .level-hero { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6); }
}

/* =====================================================================
 * 2 · GAMIFICATION — Achievement-Stat-Kacheln  (kpi-grid / kpi-card)
 *     (genutzt von Dashboard / Finance / Reporting — gleiche Klassen)
 * ===================================================================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (min-width: 1100px) { .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kpi-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--space-5);
    overflow: hidden;
    isolation: isolate;
}
/* feiner Marken-Strich oben + Hover-Lift */
.kpi-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-brand);
    opacity: .9;
    transform: scaleX(.0); transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.kpi-card:hover::before { transform: scaleX(1); }
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.kpi-card-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    display: inline-grid;
    place-items: center;
    margin-bottom: var(--space-3);
    box-shadow: inset 0 0 0 1px rgba(0,174,184,.18);
    transition: transform var(--dur-base) var(--ease-spring);
}
.kpi-card:hover .kpi-card-icon { transform: translateY(-1px) scale(1.04); }
.kpi-card-icon .material-symbols-outlined { font-size: 24px; }

.kpi-card-headline {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.kpi-card-primary {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.05;
    font-weight: var(--weight-extra);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: var(--space-1) 0 0;
    font-variant-numeric: tabular-nums;
}
.kpi-card-secondary { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.kpi-growth { margin-left: var(--space-1); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.kpi-growth-up   { color: var(--color-success-700); }
.kpi-growth-down { color: var(--color-danger-700); }

/* Sanfter, gestaffelter Auftritt (reduced-motion neutralisiert das via tokens.css) */
.reveal > * { opacity: 0; animation: noa-rise var(--dur-slow) var(--ease-out) forwards; }
.reveal > *:nth-child(1) { animation-delay: 30ms; }
.reveal > *:nth-child(2) { animation-delay: 70ms; }
.reveal > *:nth-child(3) { animation-delay: 110ms; }
.reveal > *:nth-child(4) { animation-delay: 150ms; }
.reveal > *:nth-child(5) { animation-delay: 190ms; }
.reveal > *:nth-child(6) { animation-delay: 230ms; }

/* =====================================================================
 * 3 · Lead-Timeline
 * ===================================================================== */
.lead-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.lead-timeline::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
    background: var(--border-subtle);
}
.lead-timeline li {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.lead-timeline li::before {
    content: ""; position: absolute; left: 0; top: calc(var(--space-3) + 5px);
    width: 12px; height: 12px; border-radius: var(--radius-pill);
    background: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}
.lead-timeline li:last-child { border-bottom: 0; }
.lead-timeline__head {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-semibold);
}
.lead-timeline__time { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.lead-timeline__note { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); }

/* =====================================================================
 * 4 · Lead-/Partner-/Order-Status-Badges
 * ===================================================================== */
.lead-status-new         { background: var(--color-info-100);    color: var(--color-info-700); }
.lead-status-in_progress { background: var(--color-warning-100); color: var(--color-warning-700); }
.lead-status-contacted   { background: #e7e2fd; color: #5b3cc4; }
.lead-status-won         { background: var(--color-success-100); color: var(--color-success-700); }
.lead-status-lost        { background: var(--bg-muted);          color: var(--text-secondary); }

.lead-priority {
    display: inline-flex; align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.lead-priority-low    { background: var(--bg-muted);          color: var(--text-secondary); }
.lead-priority-normal { background: var(--color-info-100);    color: var(--color-info-700); }
.lead-priority-high   { background: var(--color-warning-100); color: var(--color-warning-700); }
.lead-priority-urgent { background: var(--color-danger-100);  color: var(--color-danger-700);  font-weight: var(--weight-bold); }

.partner-status-pending   { background: var(--color-info-100);    color: var(--color-info-700); }
.partner-status-active    { background: var(--color-success-100); color: var(--color-success-700); }
.partner-status-suspended { background: var(--color-warning-100); color: var(--color-warning-700); }
.partner-status-deleted   { background: var(--bg-muted);          color: var(--text-secondary); }

.order-status-pending   { background: var(--color-warning-100); color: var(--color-warning-700); }
.order-status-paid      { background: var(--color-info-100);    color: var(--color-info-700); }
.order-status-shipped   { background: #e7e2fd; color: #5b3cc4; }
.order-status-delivered { background: var(--color-success-100); color: var(--color-success-700); }
.order-status-cancelled,
.order-status-refunded  { background: var(--bg-muted);          color: var(--text-secondary); }

/* =====================================================================
 * 5 · Shop-Karten
 * ===================================================================== */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
}
.shop-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.shop-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--color-primary-200);
}
.shop-card__image {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--color-primary-50), var(--bg-muted));
    display: grid;
    place-items: center;
    color: var(--color-primary-300);
    overflow: hidden;
}
.shop-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.shop-card:hover .shop-card__image img { transform: scale(1.04); }
.shop-card__image .material-symbols-outlined { font-size: 48px; }
.shop-card__body {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-4); flex: 1;
}
.shop-card__title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-primary); }
.shop-card__sku { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.shop-card__desc {
    font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-sm);
    flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.shop-card__price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-extra); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.shop-card__stock { font-size: var(--text-xs); color: var(--text-muted); }
.shop-card__stock--out { color: var(--color-danger-700); }

/* =====================================================================
 * 6 · Cart-Tabelle
 * ===================================================================== */
.cart-summary {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--topbar-h) + var(--catbar-h) + var(--subbar-h) + var(--space-4));
}
.cart-summary__row { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-secondary); }
.cart-summary__row--total {
    font-family: var(--font-display);
    font-size: var(--text-md); font-weight: var(--weight-extra); color: var(--text-primary);
    border-top: 1px solid var(--border-subtle); margin-top: var(--space-2); padding-top: var(--space-3);
}

/* =====================================================================
 * 7 · Referral-Code Inline-Copy
 * ===================================================================== */
.code-pill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 5px var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-primary-800);
}
.code-pill__btn {
    background: transparent; border: 0; padding: 2px; cursor: pointer;
    color: var(--color-primary-600); display: inline-flex; align-items: center;
    transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.code-pill__btn:hover { color: var(--color-primary-800); }
.code-pill__btn:active { transform: scale(.9); }
.code-pill__btn .material-symbols-outlined { font-size: 16px; }

/* =====================================================================
 * 8 · Order-Bestätigung (Celebration)
 * ===================================================================== */
.order-confirm-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-10) var(--space-8);
    background: linear-gradient(160deg, var(--color-success-50), var(--bg-surface));
    border: 1px solid var(--color-success-100);
    border-radius: var(--radius-xl);
    text-align: center; margin-bottom: var(--space-6);
}
.order-confirm-hero__icon {
    width: 76px; height: 76px; border-radius: var(--radius-pill);
    background: var(--color-success-500); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 12px 26px -12px rgba(21,163,74,.6);
    animation: noa-pop var(--dur-slow) var(--ease-spring);
}
.order-confirm-hero__icon .material-symbols-outlined { font-size: 42px; font-variation-settings: 'FILL' 1; }

/* =====================================================================
 * 9 · Profil-Status-Hinweis (pending)
 * ===================================================================== */
.profile-status-note {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-4);
    background: var(--color-info-50);
    border: 1px solid var(--color-info-100);
    border-radius: var(--radius-md);
    color: var(--color-info-700);
    margin-bottom: var(--space-4);
}
.profile-status-note .material-symbols-outlined { font-size: 22px; color: var(--color-info-500); }

/* =====================================================================
 * 10 · Form-Grid (zweispaltig)
 * ===================================================================== */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* =====================================================================
 * 11 · Auth-Layout (Login-Card) — NOA-Brand
 * ===================================================================== */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--grad-hero);
    position: relative; overflow: hidden;
    display: grid; place-items: center; padding: var(--space-6);
}
.auth-shell::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(700px 360px at 15% 10%, rgba(0,174,184,.35), transparent 60%),
        radial-gradient(600px 320px at 85% 90%, rgba(245,163,59,.18), transparent 60%);
    pointer-events: none;
}
.auth-card {
    position: relative; z-index: 1;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8) var(--space-7);
    width: 100%; max-width: 420px;
    border: 1px solid rgba(255,255,255,.5);
}
.auth-brand {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: var(--weight-extra); font-size: var(--text-xl); letter-spacing: -0.02em;
}
.auth-brand__sub {
    display: block; text-align: center;
    color: var(--color-primary-700);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-top: 0; margin-bottom: var(--space-5);
}

/* =====================================================================
 * 12 · Komponenten-Bridge (Klassen, die die Partner-Views direkt nutzen)
 * ===================================================================== */

/* Card: rohe Überschriften */
.card h2 { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-bold); letter-spacing: -0.01em; margin: 0 0 var(--space-3); }
.card h3 { font-size: var(--text-sm); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }

/* Status-Badge-Basis (Farb-Modifier siehe oben) */
.status-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/* Daten-Tabelle */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table thead th {
    text-align: left; padding: var(--space-3);
    background: var(--bg-muted); color: var(--text-secondary);
    font-weight: var(--weight-bold); font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.data-table tbody td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.data-table tbody tr:hover { background: var(--color-primary-50); }

/* Empty-State Icon-Kreis */
.empty-state-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    display: inline-grid; place-items: center;
    margin-bottom: var(--space-3);
    box-shadow: inset 0 0 0 1px rgba(0,174,184,.18);
}
.empty-state-icon .material-symbols-outlined { font-size: 32px; }
.empty-state h3 { color: var(--text-primary); font-size: var(--text-md); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }
.empty-state p  { margin: 0 0 var(--space-4); }

/* Buttons: nicht-BEM-Varianten */
.btn-primary   { background: var(--color-primary-600); background-image: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.btn-primary:hover   { filter: brightness(1.05); color: #fff; }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-muted); }
.btn-accent    { background: var(--color-accent-500); background-image: var(--grad-reward); color: #5a3306; border-color: transparent; box-shadow: var(--shadow-reward); }
.btn-accent:hover    { filter: brightness(1.04); color: #5a3306; }
/* BEM-Varianten */
.btn--warning  { background: var(--color-warning-500); color: var(--text-inverse); border-color: var(--color-warning-500); }
.btn--warning:hover  { background: var(--color-warning-700); border-color: var(--color-warning-700); color: var(--text-inverse); }
.btn--accent { background: var(--color-accent-500); background-image: var(--grad-reward); color: #5a3306; border-color: transparent; box-shadow: var(--shadow-reward); }
.btn--accent:hover { filter: brightness(1.04); color: #5a3306; }

/* Seiten-Grids */
.confirm-grid-2,
.reporting-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .confirm-grid-2, .reporting-grid-2 { grid-template-columns: 1fr; } }

/* Utility-Ergänzung */
.u-col-span-6 { grid-column: span 6; }
@media (max-width: 1023px) { .u-col-span-6 { grid-column: 1; } }

/* =====================================================================
 * 13 · Support-Tickets (zugewiesen vom Admin)
 *      Status-Badges (.badge-Basis siehe components.css) + Nachrichten-Thread
 * ===================================================================== */
.ticket-status-open             { background: var(--color-info-100);    color: var(--color-info-700); }
.ticket-status-in_progress      { background: var(--color-warning-100); color: var(--color-warning-700); }
.ticket-status-waiting_customer { background: #e7e2fd; color: #5b3cc4; }
.ticket-status-resolved         { background: var(--color-success-100); color: var(--color-success-700); }
.ticket-status-closed           { background: var(--bg-muted);          color: var(--text-secondary); }

.ticket-thread { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ticket-msg {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.ticket-msg__meta {
    display: flex; align-items: baseline; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1);
}
.ticket-msg__meta strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.ticket-msg__time { margin-left: auto; font-variant-numeric: tabular-nums; }
.ticket-msg__body { font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-sm); white-space: pre-wrap; }

/* Absender-Akzente */
.ticket-msg--admin    { background: var(--color-info-50);    border-color: var(--color-info-100); }
.ticket-msg--partner  { background: var(--color-success-50); border-color: var(--color-success-100); }
.ticket-msg--system   { background: var(--bg-muted); }


/* ===== DARK MODE · partner-extras.css (auto-generated aus CSS-Audit, gezielte Flächen/Text-Korrekturen) ===== */
[data-theme="dark"] .lead-status-contacted { background: rgba(123,92,196,.22); color: #cdbcf7; }
[data-theme="dark"] .order-status-shipped { background: rgba(123,92,196,.22); color: #cdbcf7; }
[data-theme="dark"] .ticket-status-waiting_customer { background: rgba(123,92,196,.22); color: #cdbcf7; }
[data-theme="dark"] .auth-card { border-color: var(--border-subtle); }