/**
 * Abo-Theming (nur wenn body.kinma-sub-theme-paid, Tarif ≠ free).
 * Variablen: --kinma-sub-accent, --kinma-sub-surface, --kinma-sub-rail (am body gesetzt).
 */

/* ── KINMA: innerer Kreis (Flagge bleibt) ───────────────────────────── */
body.kinma-sub-theme-paid .left-nav-cluster .kinma-logo-btn .kinma-lang-inner,
body.kinma-sub-theme-paid .settings-logo-btn .kinma-lang-inner,
body.kinma-sub-theme-paid .settings-top-left .kinma-logo-island .kinma-lang-inner,
body.kinma-sub-theme-paid .mobile-kinma-island .kinma-lang-inner {
    background: var(--kinma-sub-surface) !important;
}

/* ── Familien-Box (Stammbaum-Insel + optional Info-Leiste) ──────────── */
body.kinma-sub-theme-paid .tree-family-name-island-group:not(.tree-family-name-island-group--copied) .tree-family-name-island:not(.tree-family-name-island--copied) {
    background: var(--kinma-sub-surface);
    border-color: color-mix(in srgb, var(--kinma-sub-accent) 42%, transparent);
    box-shadow:
        0 2px 10px color-mix(in srgb, var(--kinma-sub-accent) 12%, transparent),
        0 1px 3px rgba(26, 26, 26, 0.06);
}

body.kinma-sub-theme-paid .family-info-bar .family-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 18px 12px;
    background: var(--kinma-sub-surface);
    border-radius: 9999px 0 0 9999px;
    border: 2px solid color-mix(in srgb, var(--kinma-sub-accent) 38%, transparent);
    border-right: none;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--kinma-sub-accent) 10%, transparent);
}

/* ── Linke Desktop-Leiste (Control-Panel-Spalte): dezenter Farbstreifen ─ */
body.kinma-sub-theme-paid .left-nav-cluster {
    border-radius: 9999px;
    background: var(--kinma-sub-rail);
    box-sizing: border-box;
}

/* ── Mobile: untere Haupt-Pille + Suche, obere Pillen ───────────────── */
@media (max-width: 1024px) {
    body.kinma-sub-theme-paid .mobile-bottom-nav-island {
        background: var(--kinma-sub-surface);
        border-color: color-mix(in srgb, var(--kinma-sub-accent) 28%, #e2e8f0);
    }

    body.kinma-sub-theme-paid .mobile-top-nav-island,
    body.kinma-sub-theme-paid .mobile-chat-ai-island {
        background: var(--kinma-sub-surface);
        border-color: color-mix(in srgb, var(--kinma-sub-accent) 28%, #e2e8f0);
    }

    body.kinma-sub-theme-paid .tree-family-name-island-group:not(.tree-family-name-island-group--copied) .tree-family-name-island:not(.tree-family-name-island--copied) {
        background: var(--kinma-sub-surface) !important;
        border-color: color-mix(in srgb, var(--kinma-sub-accent) 35%, transparent) !important;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--kinma-sub-accent) 10%, transparent) !important;
    }
}

/* ── Einstellungen: Logo-Pille oben links ────────────────────────────── */
body.kinma-sub-theme-paid:not(.page-login):not(.page-register) .settings-top-left .settings-logo-group {
    background: var(--kinma-sub-surface);
    border: 1px solid color-mix(in srgb, var(--kinma-sub-accent) 22%, transparent);
}

/* ── Control Panel: passende Säulen-Umrandung zur aktuellen Familie ─── */
body.kinma-sub-theme-paid[data-kinma-subscription-tier="plus"] .admin-sub-pillar--tier-plus {
    border-color: color-mix(in srgb, var(--kinma-sub-accent) 48%, transparent);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--kinma-sub-accent) 14%, transparent);
}

body.kinma-sub-theme-paid[data-kinma-subscription-tier="family_pro"] .admin-sub-pillar--tier-pro {
    border-color: color-mix(in srgb, var(--kinma-sub-accent) 50%, transparent);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--kinma-sub-accent) 16%, transparent);
}

body.kinma-sub-theme-paid[data-kinma-subscription-tier="ultimate"] .admin-sub-pillar--tier-ultimate {
    border-color: color-mix(in srgb, var(--kinma-sub-accent) 48%, transparent);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--kinma-sub-accent) 14%, transparent);
}

/* ── Dark Mode ─────────────────────────────────────────────────────── */
body.dark-mode.kinma-sub-theme-paid {
    --kinma-sub-surface-dm: color-mix(in srgb, var(--kinma-sub-accent) 18%, #1a1a1a);
    --kinma-sub-rail-dm: color-mix(in srgb, var(--kinma-sub-accent) 14%, transparent);
}

body.dark-mode.kinma-sub-theme-paid .left-nav-cluster .kinma-logo-btn .kinma-lang-inner,
body.dark-mode.kinma-sub-theme-paid .settings-logo-btn .kinma-lang-inner,
body.dark-mode.kinma-sub-theme-paid .settings-top-left .kinma-logo-island .kinma-lang-inner,
body.dark-mode.kinma-sub-theme-paid .mobile-kinma-island .kinma-lang-inner {
    background: var(--kinma-sub-surface-dm) !important;
}

body.dark-mode.kinma-sub-theme-paid .tree-family-name-island-group:not(.tree-family-name-island-group--copied) .tree-family-name-island:not(.tree-family-name-island--copied) {
    background: var(--kinma-sub-surface-dm) !important;
    border-color: color-mix(in srgb, var(--kinma-sub-accent) 55%, #1a1a1a) !important;
}

body.dark-mode.kinma-sub-theme-paid .family-info-bar .family-info-content {
    background: var(--kinma-sub-surface-dm);
    border-color: color-mix(in srgb, var(--kinma-sub-accent) 45%, #1a1a1a);
}

body.dark-mode.kinma-sub-theme-paid .left-nav-cluster {
    background: var(--kinma-sub-rail-dm);
}

@media (max-width: 1024px) {
    body.dark-mode.kinma-sub-theme-paid .mobile-bottom-nav-island,
    body.dark-mode.kinma-sub-theme-paid .mobile-top-nav-island,
    body.dark-mode.kinma-sub-theme-paid .mobile-chat-ai-island {
        background: var(--kinma-sub-surface-dm);
        border-color: color-mix(in srgb, var(--kinma-sub-accent) 35%, #1a1a1a);
    }
}

body.dark-mode.kinma-sub-theme-paid:not(.page-login):not(.page-register) .settings-top-left .settings-logo-group {
    background: var(--kinma-sub-surface-dm);
    border-color: color-mix(in srgb, var(--kinma-sub-accent) 35%, #1a1a1a);
}