:root[color-scheme="dark"],
body.dark {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18, 18, 18;
    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;
    --ion-border-color: #222222;
    --ion-card-background: #1e1e1e;
}

body.dark ion-card {
    background: var(--ion-card-background);
    color: var(--ion-text-color);
}

body.dark ion-card-header {
    --background: var(--ion-card-background);
}

body.dark ion-card-title {
    --color: #ffffff;
    color: #ffffff;
}

body.dark h3 {
    --color: #ffffff;
    color: #ffffff;
}

body.dark ion-card-content {
    --color: var(--ion-text-color);
}

body.dark ion-item {
    --background: #1e1e1e;
    --color: #ffffff;
}

body.dark ion-header {
    --background: #1e1e1e;
    --color: #ffffff;
}

body.dark ion-content {
    --background: var(--ion-background-color);
    --color: var(--ion-text-color);
}

body.dark ion-list {
    background: transparent;
}

body.dark .description {
    color: #e0e0e0;
}

body.dark ion-spinner {
    --color: #ffffff;
}

body.dark #map {
    filter: brightness(0.8) invert(1) hue-rotate(180deg);
}

body.dark #map img,
body.dark #map canvas {
    filter: brightness(0.8) invert(1) hue-rotate(180deg);
}

body.dark #miniMap {
    filter: brightness(0.8) invert(1) hue-rotate(180deg);
}

body.dark #miniMap img,
body.dark #miniMap canvas {
    filter: brightness(0.8) invert(1) hue-rotate(180deg);
}

body.dark .leaflet-marker-icon,
body.dark .cache-marker,
body.dark .user-location-marker {
    filter: brightness(0.8) invert(1) hue-rotate(180deg);
}

body.dark #filter-modal {
    background: var(--ion-background-color, #121212) !important;
    color: var(--ion-text-color, #ffffff) !important;
}

body.dark #filter-modal h3,
body.dark #filter-modal h4 {
    color: var(--ion-text-color, #ffffff) !important;
}

body.dark #filter-modal button {
    color: var(--ion-text-color, #ffffff) !important;
}

body.dark #filter-modal > div:first-child {
    border-bottom-color: var(--ion-border-color, #222222) !important;
}

body.dark #filter-modal ion-item {
    --background: var(--ion-card-background, #1e1e1e);
    --color: var(--ion-text-color, #ffffff);
}

body.dark #filter-modal .filter-count {
    color: #999;
}

body.dark #cache-button {
    border-color: rgba(255,255,255,0.2) !important;
    color: var(--ion-color-primary, #3880ff) !important;
}

body.dark .log-entry {
    background: var(--ion-card-background, #1e1e1e);
    border-left-color: var(--ion-color-primary, #3880ff);
}

body.dark .log-content {
    color: var(--ion-text-color, #ffffff);
}

body.dark .log-image-container {
    background: var(--ion-background-color, #2d2d2d);
}

body.dark .log-image-caption {
    background: var(--ion-background-color, #2d2d2d);
    color: var(--ion-text-color, #cccccc);
}

body.dark .cache-image-container {
    background: var(--ion-card-background, #1e1e1e);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark .cache-image-container:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

body.dark .cache-image-caption {
    background: var(--ion-card-background, #1e1e1e);
    color: var(--ion-text-color, #ffffff);
}

body.dark #cacheImagesExpandButton {
    background: var(--ion-card-background, #1e1e1e);
    color: var(--ion-color-primary, #3880ff);
}

body.dark #cacheImagesExpandButton:hover {
    background: var(--ion-background-color, #2d2d2d);
}

body.dark .floating-log-button {
    --background: var(--ion-color-primary, #3880ff);
    --background-hover: var(--ion-color-primary-shade, #3171e0);
    --color: white;
}

body.dark .floating-log-button::part(native) {
    background: var(--ion-color-primary, #3880ff);
}

body.dark .floating-log-button:hover::part(native) {
    background: var(--ion-color-primary-shade, #3171e0);
}

body.dark .form-submit-section {
    border-top-color: var(--ion-color-dark-shade, #2d2d2d);
    background: var(--ion-background-color, #1e1e1e);
}