body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    background-image: url('/static/bg1.png');
    background-image: image-set(url('/static/bg1.webp') type('image/webp'), url('/static/bg1.png') type('image/png'));
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

body.bg-overlay::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(249, 250, 251, 0.85);
    /* Light mode alpha */
    z-index: -1;
    transition: background 0.3s;
}

body.dark.bg-overlay::before {
    background: rgba(17, 24, 39, 0.95);
    /* Dark mode alpha */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

/* ==========================================================================
   Dark Mode & High-Contrast Theme Overrides
   ========================================================================== */

body.dark {
    background-color: #0f172a;
    color: #f8fafc;
}

/* Header & Navigation */
body.dark header {
    background-color: rgba(15, 23, 42, 0.88) !important;
    border-bottom-color: rgba(51, 65, 85, 0.7) !important;
}

body.dark #card-title {
    color: #f8fafc !important;
}

body.dark #card-desc {
    color: #cbd5e1 !important;
}

/* Main Card & Surfaces */
body.dark .bg-white {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark .bg-gray-50 {
    background-color: #0f172a;
}

body.dark .bg-gray-100 {
    background-color: #334155;
    color: #f8fafc;
}

body.dark .bg-gray-100:hover {
    background-color: #475569;
}

/* Borders & Dividers */
body.dark .border-gray-50,
body.dark .border-gray-100,
body.dark .border-gray-200 {
    border-color: #334155 !important;
}

/* Statistics Summary Banner */
body.dark #stats-summary {
    background-color: rgba(30, 27, 75, 0.65) !important;
    border-bottom-color: #312e81 !important;
}

body.dark #stat-label-total {
    color: #a5b4fc !important;
}

body.dark #stat-total {
    color: #ffffff !important;
}

body.dark #stats-summary .bg-indigo-100 {
    background-color: #334155 !important;
}

body.dark #stats-summary .text-gray-400 {
    color: #cbd5e1 !important;
}

body.dark #stats-summary .text-gray-700 {
    color: #f8fafc !important;
}

/* Section Labels */
body.dark #label-data,
body.dark #label-view,
body.dark #label-style,
body.dark #label-color {
    color: #cbd5e1 !important;
}

/* Action Toolbar Buttons (High Contrast on Dark Surface) */
body.dark #btn-download {
    background-color: rgba(6, 78, 59, 0.35) !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    color: #6ee7b7 !important;
}

body.dark #btn-download:hover {
    background-color: rgba(6, 78, 59, 0.6) !important;
}

body.dark #btn-load {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body.dark #btn-load:hover {
    background-color: #334155 !important;
}

body.dark #btn-fullscreen {
    background-color: rgba(49, 46, 129, 0.4) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
    color: #a5b4fc !important;
}

body.dark #btn-fullscreen:hover {
    background-color: rgba(49, 46, 129, 0.65) !important;
}

body.dark #btn-clear {
    background-color: rgba(127, 29, 29, 0.35) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fca5a5 !important;
}

body.dark #btn-clear:hover {
    background-color: rgba(127, 29, 29, 0.6) !important;
}

/* Inputs, Selects & Search */
body.dark input,
body.dark select {
    background-color: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

body.dark input::placeholder {
    color: #94a3b8;
}

/* Selected Country Chips Area (#active-chips) */
body.dark #active-chips {
    background-color: #0f172a;
    border-color: #334155 !important;
}

body.dark #active-chips > span {
    color: #94a3b8;
}

body.dark #active-chips > div {
    background-color: rgba(79, 70, 229, 0.28) !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
    color: #e0e7ff !important;
}

/* Accordion Continents, Regions & Country Buttons */
body.dark .continent-container > button,
body.dark .continent-container > .continent-header {
    background-color: #0f172a;
    color: #f8fafc;
}

body.dark .continent-container > button:hover,
body.dark .continent-container > .continent-header:hover {
    background-color: #1e293b;
}

body.dark button[id^="btn-cont-"] {
    background-color: rgba(49, 46, 129, 0.45) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
    color: #a5b4fc !important;
}

body.dark button[id^="btn-cont-"]:hover {
    background-color: rgba(49, 46, 129, 0.75) !important;
    color: #ffffff !important;
}

body.dark .region-container {
    background-color: rgba(15, 23, 42, 0.55);
}

body.dark .region-container .text-gray-400 {
    color: #cbd5e1 !important;
}

body.dark .region-container .text-indigo-500,
body.dark .region-container .text-indigo-400,
body.dark .continent-header .text-indigo-500 {
    color: #818cf8 !important;
}

body.dark button[id^="chip-"].bg-white {
    background-color: #1e293b;
    border-color: #475569 !important;
    color: #e2e8f0;
}

body.dark button[id^="chip-"].bg-white:hover {
    background-color: #334155;
    border-color: #818cf8 !important;
    color: #ffffff;
}

body.dark button[id^="chip-"].bg-indigo-500 {
    background-color: #4f46e5 !important;
    border-color: #818cf8 !important;
    color: #ffffff !important;
}

/* Dark Mode Scrollbar */
body.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #0f172a;
}

body.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
}

body.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Integrated Map Preview Modal in Dark Mode */
body.dark #modal-map-title {
    color: #f8fafc !important;
}

body.dark #modal-map-stats {
    background-color: rgba(79, 70, 229, 0.3) !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
    color: #e0e7ff !important;
}

body.dark #btn-modal-print {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body.dark #btn-modal-print:hover {
    background-color: #334155 !important;
}

body.dark #btn-modal-newtab {
    background-color: rgba(49, 46, 129, 0.45) !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
    color: #c7d2fe !important;
}

body.dark #btn-modal-newtab:hover {
    background-color: rgba(49, 46, 129, 0.7) !important;
}

/* 3-Step Quick Onboarding Bar in Dark Mode */
body.dark #quick-steps {
    background-color: rgba(30, 27, 75, 0.45) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #e2e8f0 !important;
}

/* ==========================================================================
   Smart Auto-Shrink & Auto-Hide Header on Scroll + Mobile Polish
   ========================================================================== */

#app-header {
    will-change: transform, padding;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.24s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
}

#app-header.header-compact {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.14);
}

#app-header.header-compact #header-logo {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

#app-header.header-compact #card-title {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
}

#app-header.header-compact #card-desc {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

#app-header.header-hidden {
    transform: translateY(-102%);
    box-shadow: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}