/**
 * Dark Mode Styles
 * Applied when body has .dark-mode class
 */

/* Base Colors */
body.dark-mode {
    background: #1a1a1a;
    color: #e5e7eb;
}

/* Tree Container */
body.dark-mode .tree-container {
    background: #1a1a1a;
}

/* Tree Trunk */
body.dark-mode .tree-trunk {
    background: #1a1a1a;
}

body.dark-mode .tree-person-name-below__pill {
    background: #1a1a1a;
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Familienname-Insel: bewusst weiß auch im Dark-Mode */
body.dark-mode .tree-family-name-island {
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.08);
    box-shadow: 0 2px 8px rgba(26, 26, 26, 0.08);
}
body.dark-mode .tree-family-name-island-caption {
    color: #94a3b8;
}
body.dark-mode .tree-family-name-island-label {
    color: #e5e7eb;
    text-decoration: none;
}
body.dark-mode .tree-family-name-island--clickable:hover .tree-family-name-island-label,
body.dark-mode .tree-family-name-island--clickable:focus-visible .tree-family-name-island-label,
body.dark-mode .tree-family-name-island--clickable:active .tree-family-name-island-label {
    opacity: 0.95;
    text-decoration: none;
}
body.dark-mode .tree-family-name-island.tree-family-name-island--copied,
body.dark-mode .tree-family-name-island-group--copied .tree-family-name-island {
    background: #bbf7d0 !important;
    border-color: rgba(22, 163, 74, 0.45) !important;
    box-shadow: 0 2px 14px rgba(22, 163, 74, 0.28) !important;
    transition: none !important;
}

body.dark-mode .tree-family-name-island-copy-msg {
    color: #166534;
    transition: none !important;
}

/* Tree controls panel (zoom + minimap) – Panel unsichtbar, nur Minimap sichtbar */
body.dark-mode .tree-controls-panel {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
body.dark-mode .tree-minimap-pull-tab {
    background: var(--gallery-island-surface, #ffffff) !important;
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08)) !important;
    color: #1a1a1a !important;
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    ) !important;
}
body.dark-mode .tree-minimap-pull-tab:hover,
body.dark-mode .tree-minimap-pull-tab:focus-visible {
    background: #f8fafc !important;
}
body.dark-mode .tree-zoom-bar-edge-track {
    background: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .tree-zoom-bar-edge-fill {
    background: rgba(255, 255, 255, 0.45) !important;
}
/* Minimap: hell/weiß (Lesbarkeit) + gleiche Kontur wie Galerie-Suchframework */
body.dark-mode .tree-minimap {
    background: var(--gallery-island-surface, #ffffff) !important;
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08)) !important;
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    ) !important;
}
body.dark-mode .tree-minimap-resize-handle::after {
    border-left-color: rgba(26, 26, 26, 0.35) !important;
    border-top-color: rgba(26, 26, 26, 0.35) !important;
}
body.dark-mode .tree-minimap-resize-handle:hover::after {
    border-left-color: rgba(26, 26, 26, 0.55) !important;
    border-top-color: rgba(26, 26, 26, 0.55) !important;
}
body.dark-mode .tree-minimap-content {
    background: #ffffff !important;
}
body.dark-mode .tree-minimap-close-btn {
    background: rgb(185, 28, 28) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.dark-mode .tree-minimap-close-btn:hover,
body.dark-mode .tree-minimap-close-btn:focus-visible {
    background: rgb(153, 27, 27) !important;
    color: #ffffff !important;
}
body.dark-mode .tree-minimap-nav-hint {
    color: #1a1a1a !important;
}
body.dark-mode .tree-minimap-nav-hint svg {
    filter: none !important;
}
body.dark-mode .tree-minimap-viewport {
    border: none !important;
    background: transparent !important;
    outline: 2px solid rgba(248, 113, 113, 0.98) !important;
    outline-offset: -1px !important;
    box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.65) !important;
}
body.dark-mode .tree-minimap-dot {
    background: #64748b !important;
    box-shadow: none !important;
}
body.dark-mode .tree-minimap-dot-m {
    background: #3b82f6 !important;
}
body.dark-mode .tree-minimap-dot-w {
    background: #f472b6 !important;
}
body.dark-mode .tree-minimap-dot-d {
    background: #8b5cf6 !important;
}
body.dark-mode .tree-minimap-dot-empty {
    border-color: #94a3b8 !important;
}
body.dark-mode .tree-minimap-dot-empty-parent {
    background: rgba(99, 102, 241, 0.35) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
}
body.dark-mode .tree-minimap-dot-empty-child {
    background: rgba(34, 197, 94, 0.35) !important;
    border-color: rgba(34, 197, 94, 0.6) !important;
}
body.dark-mode .tree-minimap-dot-empty-spouse {
    background: rgba(217, 119, 6, 0.35) !important;
    border-color: rgba(217, 119, 6, 0.6) !important;
}
body.dark-mode .tree-minimap-dot-empty-combined {
    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.35) 0%, rgba(99, 102, 241, 0.35) 50%, rgba(217, 119, 6, 0.35) 50%, rgba(217, 119, 6, 0.35) 100%) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
}
body.dark-mode .tree-minimap-dot-no-herkunft {
    background: rgba(26, 26, 26, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}
body.dark-mode .tree-minimap-dot-transparent {
    background: rgba(148, 163, 184, 0.18) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
}
body.dark-mode .tree-minimap-cluster {
    background: #1a1a1a !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

/* Cluster Zoomed-Out: keine Hover-Animationen */
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style,
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style *,
body.dark-mode .tree-cluster-mode .tree-empty-slot.tree-cluster-dot-style,
body.dark-mode .tree-cluster-mode .tree-empty-slot.tree-cluster-dot-style * {
    transition: none !important;
    animation: none !important;
}

/* Cluster-Modus: Person = Outline + Flagge randfüllend (kein weißer Innenrand) */
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style {
    background: transparent !important;
    border-style: solid !important;
    border-width: var(--tree-cluster-slot-outline-width, 1px) !important;
    border-color: var(--tree-cluster-profile-color, #94a3b8) !important;
    box-sizing: border-box !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-no-herkunft="1"] {
    background: rgba(30, 41, 55, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.42) !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"] {
    background: transparent !important;
    border-color: var(--tree-cluster-profile-color, #94a3b8) !important;
    border-color: color-mix(in srgb, var(--tree-cluster-profile-color, #94a3b8) 45%, #64748b) !important;
    opacity: 0.9;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style .tree-person-flag {
    top: -1px !important;
    left: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    filter: grayscale(100%) brightness(1.18) contrast(0.48) !important;
    opacity: 0.48 !important;
    transition: none !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style:hover .tree-person-flag,
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style.flag-hover .tree-person-flag {
    filter: none !important;
    opacity: 1 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"] .tree-person-flag {
    filter: grayscale(100%) brightness(1.05) contrast(0.44) !important;
    opacity: 0.4 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"]:hover .tree-person-flag,
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"].flag-hover .tree-person-flag {
    filter: grayscale(0.15) brightness(0.94) contrast(1) !important;
    opacity: 0.92 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style.tree-mobile-center-hover:not([data-no-herkunft="1"]) .tree-person-flag {
    filter: none !important;
    opacity: 1 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style.tree-mobile-center-hover[data-deceased="1"] .tree-person-flag {
    filter: grayscale(0.15) brightness(0.94) contrast(1) !important;
    opacity: 0.92 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style .tree-person-flag-symbol {
    display: none !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style .tree-person-box-inner > .tree-person-flag-symbol-background {
    filter: grayscale(100%) brightness(1.18) contrast(0.48) !important;
    opacity: 0.48 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style:hover .tree-person-box-inner > .tree-person-flag-symbol-background,
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style.flag-hover .tree-person-box-inner > .tree-person-flag-symbol-background,
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style.tree-mobile-center-hover .tree-person-box-inner > .tree-person-flag-symbol-background {
    filter: none !important;
    opacity: 1 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"] .tree-person-box-inner > .tree-person-flag-symbol-background {
    filter: grayscale(100%) brightness(1.05) contrast(0.44) !important;
    opacity: 0.4 !important;
}
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"]:hover .tree-person-box-inner > .tree-person-flag-symbol-background,
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"].flag-hover .tree-person-box-inner > .tree-person-flag-symbol-background,
body.dark-mode .tree-cluster-mode .tree-person-box.tree-cluster-dot-style[data-deceased="1"].tree-mobile-center-hover .tree-person-box-inner > .tree-person-flag-symbol-background {
    filter: grayscale(0.15) brightness(0.94) contrast(1) !important;
    opacity: 0.92 !important;
}
body.dark-mode .tree-cluster-mode .tree-empty-slot-parent.tree-cluster-dot-style {
    background: rgba(129, 140, 248, 0.07) !important;
    border-color: rgba(165, 180, 252, 0.35) !important;
}
body.dark-mode .tree-cluster-mode .tree-empty-slot-child.tree-cluster-dot-style {
    background: rgba(74, 222, 128, 0.06) !important;
    border-color: rgba(74, 222, 128, 0.34) !important;
}
body.dark-mode .tree-cluster-mode .tree-empty-slot-spouse.tree-cluster-dot-style {
    background: rgba(251, 191, 36, 0.07) !important;
    border-color: rgba(251, 191, 36, 0.36) !important;
}
body.dark-mode .tree-cluster-mode .tree-empty-slot-parent-spouse-combined.tree-cluster-dot-style {
    background: linear-gradient(
        to bottom,
        rgba(129, 140, 248, 0.07) 0%,
        rgba(129, 140, 248, 0.07) 50%,
        rgba(251, 191, 36, 0.07) 50%,
        rgba(251, 191, 36, 0.07) 100%
    ) !important;
    border-width: var(--tree-cluster-slot-outline-width, 1px) !important;
    border-style: solid !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
}
body.dark-mode .family-tree[data-orientation="bottom-to-top"].tree-cluster-mode .tree-empty-slot-parent-spouse-combined.tree-cluster-dot-style {
    background: linear-gradient(
        to bottom,
        rgba(251, 191, 36, 0.07) 0%,
        rgba(251, 191, 36, 0.07) 50%,
        rgba(129, 140, 248, 0.07) 50%,
        rgba(129, 140, 248, 0.07) 100%
    ) !important;
}

/* Empty slots (Add Parent/Child/Spouse) – Dark Mode: dunkle Karte, farbiger Akzent */
body.dark-mode .tree-empty-slot:not(.tree-cluster-dot-style) {
    background: rgba(26, 26, 26, 0.28);
    border-color: #1a1a1a;
    border-left-color: #64748b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
body.dark-mode .tree-empty-slot:not(.tree-cluster-dot-style):hover {
    border-color: #525252;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
body.dark-mode .tree-empty-slot:not(.tree-cluster-dot-style) .tree-empty-slot-icon {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #94a3b8;
}
body.dark-mode .tree-empty-slot:not(.tree-cluster-dot-style):hover .tree-empty-slot-icon {
    background: #1a1a1a;
    border-color: #525252;
    color: #cbd5e1;
}
body.dark-mode .tree-empty-slot:not(.tree-cluster-dot-style) .tree-empty-slot-label {
    color: #94a3b8;
}
body.dark-mode .tree-empty-slot:not(.tree-cluster-dot-style):hover .tree-empty-slot-label {
    color: #e2e8f0;
}
body.dark-mode .tree-empty-slot-parent:not(.tree-cluster-dot-style) {
    border-left-color: #6b6f9a;
}
body.dark-mode .tree-empty-slot-parent:not(.tree-cluster-dot-style) .tree-empty-slot-icon {
    background: #2a2d3e;
    border-color: #3d4158;
    color: #9ca0c4;
}
body.dark-mode .tree-empty-slot-parent:not(.tree-cluster-dot-style) .tree-empty-slot-label {
    color: #aeb2d4;
}
body.dark-mode .tree-empty-slot-child:not(.tree-cluster-dot-style) {
    border-left-color: #5a9b72;
}
body.dark-mode .tree-empty-slot-child:not(.tree-cluster-dot-style) .tree-empty-slot-icon {
    background: #1e2e26;
    border-color: #2d4a38;
    color: #8fcda8;
}
body.dark-mode .tree-empty-slot-child:not(.tree-cluster-dot-style) .tree-empty-slot-label {
    color: #9fd4b3;
}
body.dark-mode .tree-empty-slot-spouse:not(.tree-cluster-dot-style) {
    border-left-color: #b87a7a;
}
body.dark-mode .tree-empty-slot-spouse:not(.tree-cluster-dot-style) .tree-empty-slot-icon {
    background: #2e2222;
    border-color: #4a3535;
    color: #d4a0a0;
}
body.dark-mode .tree-empty-slot-spouse:not(.tree-cluster-dot-style) .tree-empty-slot-label {
    color: #d4a5a5;
}
/* Mehrteilige Leer-Slot-Zonen: gedämpfte Flächen, Text/Icon weiß wie im Hell-Modus */
body.dark-mode .tree-empty-slot-action--parent {
    background: #1a1a1a;
    color: #ffffff;
}
body.dark-mode .tree-empty-slot-action--spouse {
    background: #1a1a1a;
    color: #ffffff;
}
body.dark-mode .tree-empty-slot-action--child {
    background: #1a1a1a;
    color: #ffffff;
}
body.dark-mode .tree-empty-slot-action--parent:hover {
    background: #525252;
    color: #ffffff;
}
body.dark-mode .tree-empty-slot-action--spouse:hover {
    background: #525252;
    color: #ffffff;
}
body.dark-mode .tree-empty-slot-action--child:hover {
    background: #525252;
    color: #ffffff;
}
body.dark-mode .tree-empty-slot-action .tree-empty-slot-caption,
body.dark-mode .tree-empty-slot-action .tree-empty-slot-graphic,
body.dark-mode .tree-empty-slot-action .tree-empty-slot-structure,
body.dark-mode .tree-empty-slot-action .tree-empty-slot-structure-icon,
body.dark-mode .tree-empty-slot-action .tree-empty-slot-structure-name {
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) {
    --kinma-empty-stroke: #a3a3a3;
    --kinma-empty-fill: rgba(163, 163, 163, 0.08);
    background-color: var(--kinma-empty-fill) !important;
    box-shadow: none !important;
}
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style):hover,
body.dark-mode .tree-empty-slot-parent.tree-empty-slot-unified:not(.tree-cluster-dot-style):hover,
body.dark-mode .tree-empty-slot-child.tree-empty-slot-unified:not(.tree-cluster-dot-style):hover,
body.dark-mode .tree-empty-slot-spouse.tree-empty-slot-unified:not(.tree-cluster-dot-style):hover,
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style):focus-within,
body.dark-mode .tree-empty-slot-parent.tree-empty-slot-unified:not(.tree-cluster-dot-style):focus-within,
body.dark-mode .tree-empty-slot-child.tree-empty-slot-unified:not(.tree-cluster-dot-style):focus-within,
body.dark-mode .tree-empty-slot-spouse.tree-empty-slot-unified:not(.tree-cluster-dot-style):focus-within {
    --kinma-empty-stroke: #d4d4d4;
    --kinma-empty-fill: rgba(212, 212, 212, 0.14);
    background-color: var(--kinma-empty-fill) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 18px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer;
}
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-action--parent,
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-action--spouse,
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-action--child {
    background: transparent !important;
    color: #e5e7eb;
}
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-action--parent:hover,
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-action--spouse:hover,
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-action--child:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f3f4f6;
}
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-caption,
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-label {
    color: #e5e7eb;
    text-shadow: none;
}
body.dark-mode .tree-empty-slot:not(.tree-cluster-dot-style) .tree-empty-slot-name-below__pill {
    background-color: transparent;
    border: 2px dashed rgba(212, 212, 212, 0.65);
    box-shadow: none;
}
body.dark-mode .tree-empty-slot.tree-empty-slot-unified:not(.tree-cluster-dot-style) .tree-empty-slot-name-below__pill {
    border: none !important;
    box-shadow: none;
    background-color: transparent !important;
    background-image:
        repeating-linear-gradient(90deg, var(--kinma-empty-stroke) 0 var(--kinma-empty-dash), transparent var(--kinma-empty-dash) var(--kinma-empty-slice)),
        repeating-linear-gradient(180deg, var(--kinma-empty-stroke) 0 var(--kinma-empty-dash), transparent var(--kinma-empty-dash) var(--kinma-empty-slice)),
        repeating-linear-gradient(90deg, var(--kinma-empty-stroke) 0 var(--kinma-empty-dash), transparent var(--kinma-empty-dash) var(--kinma-empty-slice)),
        repeating-linear-gradient(180deg, var(--kinma-empty-stroke) 0 var(--kinma-empty-dash), transparent var(--kinma-empty-dash) var(--kinma-empty-slice));
    background-size:
        100% var(--kinma-empty-bw),
        var(--kinma-empty-bw) 100%,
        100% var(--kinma-empty-bw),
        var(--kinma-empty-bw) 100%;
    background-position: 0 0, 100% 0, 0 100%, 0 0;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
}
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style) {
    --kinma-empty-stroke: #a3a3a3;
    --kinma-empty-fill: rgba(163, 163, 163, 0.08);
    background-color: var(--kinma-empty-fill) !important;
    box-shadow: none !important;
}
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style):hover,
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style):focus-within {
    --kinma-empty-stroke: #d4d4d4;
    --kinma-empty-fill: rgba(212, 212, 212, 0.14);
    background-color: var(--kinma-empty-fill) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 18px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer;
}
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style) .tree-empty-slot-half-parent {
    --kinma-empty-inner-c: rgba(212, 212, 212, 0.45);
    background-color: transparent !important;
    background-image: repeating-linear-gradient(90deg, var(--kinma-empty-inner-c) 0 var(--kinma-empty-inner-d), transparent var(--kinma-empty-inner-d) var(--kinma-empty-inner-s)) !important;
    background-size: 100% 1px !important;
    background-position: 0 100% !important;
    background-repeat: repeat-x !important;
    border: none;
}
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style) .tree-empty-slot-half-spouse {
    background: transparent !important;
}
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style) .tree-empty-slot-half-parent .tree-empty-slot-label,
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style) .tree-empty-slot-half-spouse .tree-empty-slot-label {
    color: #e5e7eb;
    text-shadow: none;
}
body.dark-mode .tree-empty-slot-parent-spouse-combined:not(.tree-cluster-dot-style) .tree-empty-slot-icon-single {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #94a3b8;
}

body.dark-mode .tree-cluster-mode .tree-transparent-slot {
    background: transparent !important;
    border: none !important;
}
body.dark-mode .tree-cluster-tooltip {
    color: #e2e8f0;
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* Verstorbene: im Dark Mode weiterhin dunkler Hintergrund + heller Text */
body.dark-mode .tree-cluster-tooltip.tree-cluster-tooltip-deceased {
    background: #1a1a1a;
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Tree Boxes */
body.dark-mode .person-box {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .person-box:hover {
    background: #1a1a1a;
    border-color: #4d4d4d;
}

body.dark-mode .person-name {
    color: #ffffff;
}

body.dark-mode .person-relation {
    color: #9ca3af;
}

/* Family Info Bar */
body.dark-mode .family-info-bar {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .family-label {
    color: #9ca3af;
}

body.dark-mode .family-name-display {
    color: #ffffff;
}

body.dark-mode .family-lock-btn,
body.dark-mode .family-settings-btn {
    background: #1a1a1a;
    border-color: #4d4d4d;
}

body.dark-mode .family-lock-btn:hover,
body.dark-mode .family-settings-btn:hover {
    background: #1a1a1a;
}

body.dark-mode .family-code-tooltip {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .family-code-text {
    color: #ffffff;
}

/* Navigation */
body.dark-mode .utility-island {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .utility-btn {
    color: #e5e7eb;
}

body.dark-mode .utility-btn:hover {
    background: #1a1a1a;
}

body.dark-mode .nav-item {
    color: #e5e7eb;
}

body.dark-mode .nav-item:hover {
    background: #1a1a1a;
}

body.dark-mode .nav-item.active {
    background: #1a1a1a;
    color: #ffffff;
}

body.dark-mode .nav-item.nav-item--disabled {
    color: #6b7280;
    opacity: 0.5;
}
body.dark-mode .nav-item.nav-item--disabled svg {
    stroke: #6b7280;
}

body.dark-mode .nav-island {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

/* Search Bar */
body.dark-mode .tree-search-wrapper {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .tree-search-input {
    background: transparent;
    color: #ffffff;
}

body.dark-mode .tree-search-input::placeholder {
    color: #6b7280;
}

body.dark-mode .tree-search-ai-match-btn:not(.kinma-ai-search-pill__start-btn) {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

body.dark-mode .tree-search-ai-match-btn:not(.kinma-ai-search-pill__start-btn):hover {
    background: #1a1a1a;
    border-color: #4d4d4d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .tree-search-ai-busy-spinner {
    border-color: rgba(129, 140, 248, 0.28);
    border-top-color: #a5b4fc;
}

body.dark-mode .tree-search-ai-busy-cancel {
    background: rgba(30, 30, 30, 0.94);
    color: #e2e8f0;
}

body.dark-mode .tree-search-wrapper--ai-busy:hover .tree-search-ai-busy-cancel {
    background: rgba(26, 26, 26, 0.96);
    color: #f1f5f9;
}

body.dark-mode .kinma-ai-search-feedback-consent__panel {
    background: #1a1a1a;
    border-color: rgba(26, 26, 26, 0.9);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(26, 26, 26, 0.5);
}

body.dark-mode .kinma-ai-search-feedback-consent__title {
    color: #f1f5f9;
}

body.dark-mode .kinma-ai-search-feedback-consent__body {
    color: #94a3b8;
}

body.dark-mode .kinma-ai-search-feedback-consent__btn--secondary {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #e2e8f0;
}

body.dark-mode .kinma-ai-search-feedback-consent__btn--secondary:hover {
    background: #1a1a1a;
}

body.dark-mode .tree-search-results {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .tree-search-result-item:hover {
    background: #1a1a1a;
}

body.dark-mode .tree-center-button-container .tree-orientation-toggle-btn.tree-orientation-toggle-btn--in-search {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    color: #1a1a1a;
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
}
body.dark-mode .tree-center-button-container .tree-orientation-toggle-btn.tree-orientation-toggle-btn--in-search:hover {
    background: #f8fafc;
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
}

body.dark-mode .tree-center-button-inside {
    background: var(--gallery-island-surface, #ffffff) !important;
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08)) !important;
    color: #1a1a1a !important;
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    ) !important;
}

body.dark-mode .tree-center-button-inside:hover {
    background: #f8fafc !important;
}

body.dark-mode .tree-line-tools-box {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode .tree-line-routing-bar,
body.dark-mode .tree-line-highlight-toolbar {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode .tree-line-routing-toggle {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
}

body.dark-mode .tree-line-routing-toggle:hover {
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .tree-line-island-ring__svg {
    color: #64748b;
}

body.dark-mode .tree-line-routing-ring-base {
    stroke: #1a1a1a;
    stroke-width: 4;
}

body.dark-mode .tree-line-routing-ring-accent {
    stroke: #e2e8f0;
    stroke-width: 4;
}

body.dark-mode .tree-line-highlight-toolbar__toggle-disc {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
}

body.dark-mode .tree-line-highlight-toolbar__toggle:hover .tree-line-highlight-toolbar__toggle-disc {
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .tree-line-highlight-toolbar__zoom-cluster-toggle-disc {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
    color: #1a1a1a;
}

body.dark-mode .tree-line-highlight-toolbar__zoom-cluster-toggle:hover .tree-line-highlight-toolbar__zoom-cluster-toggle-disc {
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .tree-generation-mode-toggle__disc {
    background: var(--gallery-island-surface, #ffffff);
    border: var(--gallery-island-border, 1px solid rgba(0, 0, 0, 0.08));
    box-shadow: var(
        --gallery-island-shadow,
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.08)
    );
    color: #1a1a1a;
}

body.dark-mode .tree-generation-mode-toggle:hover .tree-generation-mode-toggle__disc {
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .family-tree--generation-mode .tree-gen-cohort-title {
    color: #94a3b8;
}

/* Helle Pillen wie Galerie-Suchframework: dunkle Beschriftung */
body.dark-mode .tree-line-routing-toggle .tree-line-routing-btn__text,
body.dark-mode .tree-line-highlight-toolbar__toggle-text,
body.dark-mode .tree-line-island-billboard-wrap {
    color: #1a1a1a;
}

body.dark-mode .tree-line-highlight-toolbar__chevron {
    color: #94a3b8;
}

body.dark-mode .tree-line-highlight-toolbar__preview-line--base {
    background: #9ca3af;
}

body.dark-mode .tree-line-highlight-toolbar__panel-inner {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode .tree-line-highlight-btn__disc {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

body.dark-mode .tree-line-highlight-btn:hover:not(.tree-line-highlight-btn--on) .tree-line-highlight-btn__disc {
    border-color: #94a3b8;
    background: #f8fafc;
}
body.dark-mode .tree-line-highlight-btn__label {
    color: #94a3b8;
}
body.dark-mode .tree-line-highlight-btn:hover:not(.tree-line-highlight-btn--on) .tree-line-highlight-btn__label {
    color: #e2e8f0;
}

/* Buttons */
body.dark-mode .tree-center-button {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

body.dark-mode .tree-center-button:hover {
    background: #1a1a1a;
    border-color: #4d4d4d;
}
body.dark-mode .tree-zu-mir-btn.tree-zu-mir-off-screen {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5) !important;
}
body.dark-mode .tree-zu-mir-btn.tree-zu-mir-off-screen:hover {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.6) !important;
}

/* Modals & Popups */
body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

body.dark-mode .modal-content {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .modal-header {
    border-color: #1a1a1a;
}

body.dark-mode .modal-title {
    color: #ffffff;
}

body.dark-mode .modal-close {
    color: #9ca3af;
}

body.dark-mode .modal-close:hover {
    color: #ffffff;
    background: #1a1a1a;
}

/* Forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="date"],
body.dark-mode textarea,
body.dark-mode select {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #4d4d4d;
    background: #1a1a1a;
}

body.dark-mode label {
    color: #e5e7eb;
}

/* Buttons */
body.dark-mode .btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

body.dark-mode .btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

body.dark-mode .btn-secondary {
    background: #6b7280;
    border-color: #6b7280;
}

body.dark-mode .btn-secondary:hover {
    background: #4b5563;
    border-color: #4b5563;
}

/* Cards */
body.dark-mode .card {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .card-header {
    border-color: #1a1a1a;
    color: #ffffff;
}

/* Tables */
body.dark-mode table {
    border-color: #1a1a1a;
}

body.dark-mode th {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

body.dark-mode td {
    border-color: #1a1a1a;
    color: #e5e7eb;
}

body.dark-mode tr:hover {
    background: #1a1a1a;
}

/* Scrollbar: gleiches Dunkelgrau wie global, 3px, einfaches Design */
body.dark-mode ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background: transparent;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #282A2E;
    border-radius: 0;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #282A2E;
}

body.dark-mode * {
    scrollbar-color: #282A2E transparent;
}

/* Links */
body.dark-mode a {
    color: #60a5fa;
}

body.dark-mode a:hover {
    color: #93c5fd;
}

/* Tooltips */
body.dark-mode .tooltip {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

/* Dropdown */
body.dark-mode .dropdown-menu {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

body.dark-mode .dropdown-item {
    color: #e5e7eb;
}

body.dark-mode .dropdown-item:hover {
    background: #1a1a1a;
}

/* Search Filter Dropdown (Geschichten) */
body.dark-mode .search-filter-dropdown {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body.dark-mode .filter-label {
    color: #94a3b8;
}
body.dark-mode .filter-date-range > span {
    color: #64748b;
}
body.dark-mode .filter-date-input,
body.dark-mode .filter-text-input {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #f1f5f9;
}
body.dark-mode .filter-date-input:hover,
body.dark-mode .filter-text-input:hover {
    background: #1a1a1a;
}
body.dark-mode .filter-date-input:focus,
body.dark-mode .filter-text-input:focus {
    background: #1a1a1a;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
body.dark-mode .filter-checkbox {
    color: #e2e8f0;
}
body.dark-mode .filter-checkbox input[type="checkbox"] {
    background: #1a1a1a;
    border-color: #1a1a1a;
}
body.dark-mode .filter-checkbox input[type="checkbox"]:checked {
    background: #6366f1;
    border-color: #6366f1;
}
body.dark-mode .filter-actions {
    border-top-color: #1a1a1a;
}
body.dark-mode .filter-reset-btn {
    background: #1a1a1a;
    color: #94a3b8;
    border-color: #1a1a1a;
}
body.dark-mode .filter-reset-btn:hover {
    background: #1a1a1a;
    color: #cbd5e1;
}
body.dark-mode .filter-apply-btn {
    background: #6366f1;
    color: white;
}
body.dark-mode .filter-apply-btn:hover {
    background: #5558e6;
}

/* Text Selection */
body.dark-mode ::selection {
    background: #3b82f6;
    color: #ffffff;
}