/*
 * Partnerportal – eigenes CSS ohne Build-Schritt (#1662).
 *
 * Filament liefert vorkompiliertes CSS mit genau den Tailwind-Klassen, die es
 * selbst benutzt. Eigene Views können sich auf andere Klassen nicht verlassen
 * (so verschwand der Benchmark-Strich im Themen-Drilldown). Was die eigenen
 * Views brauchen, steht deshalb hier oder als Inline-Style.
 *
 * Farben nur über Filaments CSS-Variablen (--primary-600 usw.), damit Hell-
 * und Dunkelmodus stimmen. Keine Farbverläufe.
 *
 * Eingebunden über einen Render-Hook im PartnerPanelProvider; nach Änderungen
 * dort STYLESHEET_VERSION hochzählen.
 */

/* ── Login ───────────────────────────────────────────────────────────────── */

.fh-login-intro {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(var(--gray-600));
    text-align: center;
}

.fh-login-intro p + p {
    margin-top: 0.5rem;
}

.fh-login-intro a {
    font-weight: 600;
    color: rgb(var(--primary-600));
}

.fh-login-intro a:hover {
    text-decoration: underline;
}

.dark .fh-login-intro {
    color: rgb(var(--gray-400));
}

.dark .fh-login-intro a {
    color: rgb(var(--primary-400));
}

/* ── Themen-Drilldown (#1665) ────────────────────────────────────────────── */

.fh-tree-card {
    overflow: hidden;
    border: 1px solid rgb(var(--gray-200));
    border-radius: 0.75rem;
    background: #fff;
}

.dark .fh-tree-card {
    border-color: rgb(var(--gray-700));
    background: rgb(var(--gray-900));
}

.fh-tree-card + .fh-tree-card {
    margin-top: 1rem;
}

.fh-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-right: 1rem;
    border-bottom: 1px solid rgb(var(--gray-100));
    font-size: 0.875rem;
    color: rgb(var(--gray-700));
}

.dark .fh-row {
    border-bottom-color: rgb(var(--gray-800));
    color: rgb(var(--gray-300));
}

.fh-row--l0 {
    background: rgb(var(--gray-50));
    font-weight: 600;
    color: rgb(var(--gray-950));
}

.dark .fh-row--l0 {
    background: rgb(var(--gray-800));
    color: #fff;
}

.fh-row--l1 {
    font-weight: 500;
}

.fh-row--toggle {
    cursor: pointer;
    user-select: none;
}

.fh-row__chevron {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: rgb(var(--gray-400));
    transition: transform 0.15s;
}

.fh-row__name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fh-row__stats {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
}

/* Balken: Füllung in einer Spur mit overflow hidden, Strich außerhalb, damit
   er oben und unten übersteht und nicht abgeschnitten wird. */
.fh-bar {
    position: relative;
    width: 12rem;
    height: 0.5rem;
}

.fh-bar__track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(var(--gray-200));
}

.dark .fh-bar__track {
    background: rgb(var(--gray-700));
}

.fh-bar__fill {
    height: 100%;
    border-radius: 9999px;
}

.fh-bar__marker {
    position: absolute;
    top: -0.3125rem;
    bottom: -0.3125rem;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: rgb(var(--gray-950));
}

.dark .fh-bar__marker {
    background: #fff;
}

.fh-rate {
    display: inline-flex;
    min-width: 4.5rem;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fh-rate--good { background: #d1fae5; color: #047857; }
.fh-rate--mid  { background: #fef3c7; color: #b45309; }
.fh-rate--low  { background: #fee2e2; color: #b91c1c; }
.fh-rate--none { background: rgb(var(--gray-100)); color: rgb(var(--gray-500)); font-weight: 500; }

.dark .fh-rate--good { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.dark .fh-rate--mid  { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.dark .fh-rate--low  { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.dark .fh-rate--none { background: rgb(var(--gray-800)); color: rgb(var(--gray-400)); }

/* Abweichung vom Schnitt in Prozentpunkten – sichtbar statt nur im Tooltip,
   damit sie auch per Touch und Screenreader ankommt. */
.fh-delta {
    min-width: 4.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.fh-delta--up   { color: #047857; }
.fh-delta--down { color: #b91c1c; }
.fh-delta--even { color: rgb(var(--gray-500)); }

.dark .fh-delta--up   { color: #6ee7b7; }
.dark .fh-delta--down { color: #fca5a5; }

/* Legende */
.fh-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.75rem;
    color: rgb(var(--gray-600));
}

.dark .fh-legend {
    color: rgb(var(--gray-400));
}

.fh-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.fh-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.1875rem;
}

.fh-swatch--marker {
    width: 2px;
    height: 0.875rem;
    border-radius: 1px;
    background: rgb(var(--gray-950));
}

.dark .fh-swatch--marker {
    background: #fff;
}

@media (max-width: 640px) {
    .fh-bar { width: 5rem; }
    .fh-delta { display: none; }
    .fh-row__name { white-space: normal; }
}

/* ── Übersicht: Start-Checkliste (#1670) ─────────────────────────────────── */

.fh-checklist {
    display: grid;
    gap: 0.25rem;
}

.fh-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgb(var(--gray-100));
    font-size: 0.875rem;
}

.fh-checklist__item:last-child {
    border-bottom: 0;
}

.dark .fh-checklist__item {
    border-bottom-color: rgb(var(--gray-800));
}

.fh-checklist__icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    color: rgb(var(--gray-400));
}

.fh-checklist__item--done .fh-checklist__icon {
    color: #059669;
}

.fh-checklist__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fh-checklist__label {
    font-weight: 600;
    color: rgb(var(--gray-950));
}

.dark .fh-checklist__label {
    color: #fff;
}

.fh-checklist__item--done .fh-checklist__label {
    font-weight: 500;
    color: rgb(var(--gray-500));
    text-decoration: line-through;
}

.fh-checklist__link {
    color: rgb(var(--primary-600));
}

.fh-checklist__link:hover {
    text-decoration: underline;
}

.dark .fh-checklist__link {
    color: rgb(var(--primary-400));
}

.fh-checklist__hint {
    color: rgb(var(--gray-500));
}

/* ── Übersicht: Start-Assistent Kursverzeichnis (#1745) ──────────────────── */

.fh-checklist__number {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    border-radius: 9999px;
    border: 1.5px solid rgb(var(--gray-300));
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(var(--gray-500));
}

.fh-checklist__item--current .fh-checklist__number {
    border-color: rgb(var(--primary-600));
    background: rgb(var(--primary-600));
    color: #fff;
}

.fh-checklist__item--later .fh-checklist__label {
    font-weight: 500;
    color: rgb(var(--gray-500));
}

.dark .fh-checklist__item--later .fh-checklist__label {
    color: rgb(var(--gray-400));
}

.fh-checklist__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Übersicht: Verlauf im Kursverzeichnis (#1767) ───────────────────────── */
/*
 * Farben der Reihen wie OfferTrendChartWidget::COLORS: hell die Akzente der
 * Webseite (hero-primary, hero-accent, hero-gold), dunkel die Ursprungstöne
 * der App. Bei Änderungen beide Stellen anpassen.
 */

.fh-trend-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fh-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0 0 1rem;
}

.fh-trend-legend__item dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgb(var(--gray-500));
}

.fh-trend-legend__item dd {
    margin: 0.125rem 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--gray-950));
}

.dark .fh-trend-legend__item dt {
    color: rgb(var(--gray-400));
}

.dark .fh-trend-legend__item dd {
    color: #fff;
}

.fh-trend-swatch {
    flex: none;
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.1875rem;
}

.fh-trend-swatch--list_views   { background: #1D4ED8; }
.fh-trend-swatch--detail_views { background: #0E8478; }
.fh-trend-swatch--inquiries    { background: #A16207; }

.dark .fh-trend-swatch--list_views   { background: #3B82F6; }
.dark .fh-trend-swatch--detail_views { background: #00BFA5; }
.dark .fh-trend-swatch--inquiries    { background: #F59E0B; }

/* Chart.js mit maintainAspectRatio: false braucht eine feste Höhe. */
.fh-trend-canvas {
    position: relative;
    height: 18rem;
}

@media (min-width: 1024px) {
    .fh-trend-canvas {
        height: 20rem;
    }
}

/* Farbquellen für Filaments Chart-Komponente (liest `color`). */
.fh-trend-ref--background { color: rgb(var(--primary-50)); }
.fh-trend-ref--border     { color: rgb(var(--primary-600)); }
.fh-trend-ref--grid       { color: rgb(var(--gray-200)); }
.fh-trend-ref--text       { color: rgb(var(--gray-500)); }

.dark .fh-trend-ref--background { color: rgb(var(--gray-800)); }
.dark .fh-trend-ref--border     { color: rgb(var(--primary-400)); }
.dark .fh-trend-ref--grid       { color: rgb(var(--gray-800)); }
.dark .fh-trend-ref--text       { color: rgb(var(--gray-400)); }

.fh-trend-empty {
    padding: 2.5rem 1rem;
    border: 1px dashed rgb(var(--gray-300));
    border-radius: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(var(--gray-500));
}

.fh-trend-empty__title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
}

.dark .fh-trend-empty {
    border-color: rgb(var(--gray-700));
    color: rgb(var(--gray-400));
}

.dark .fh-trend-empty__title {
    color: #fff;
}