/* Global Settings & Variables */
:root {
    --bs-border-radius: 12px;
    --bs-border-radius-lg: 16px;

    /* Theme Colors */
    --zephyr-blue: #3459e6;
    --zephyr-blue-rgb: 52, 89, 230;
    --zephyr-hover: #2a47b8;

    --superhero-orange: #df691a;
    --superhero-orange-rgb: 223, 105, 26;
    --superhero-hover: #c65e17;
}

body {
    min-height: 100vh;
    padding-bottom: 70px;
    /* Space for mobile nav */
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
   Theming - Variable Assignments
   ------------------------------------------------------------------------- */

/* Light Theme */
[data-bs-theme="light"] {
    --bs-primary: var(--zephyr-blue);
    --bs-primary-rgb: var(--zephyr-blue-rgb);
    --bs-link-color: var(--zephyr-blue);
    --bs-link-hover-color: var(--zephyr-hover);

    --bs-body-bg: #f8fafc;
    --bs-card-bg: #ffffff;
    --bs-border-color: #e2e8f0;

    /* Re-map button/form vars to use the dynamic primary */
    --bs-btn-primary-bg: var(--zephyr-blue);
    --bs-btn-primary-border-color: var(--zephyr-blue);
    --bs-btn-primary-hover-bg: var(--zephyr-hover);
    --bs-btn-primary-hover-border-color: var(--zephyr-hover);
    --bs-btn-active-bg: var(--zephyr-hover);
    --bs-btn-active-border-color: var(--zephyr-hover);
}

/* Dark Theme */
[data-bs-theme="dark"] {
    --bs-primary: var(--superhero-orange);
    --bs-primary-rgb: var(--superhero-orange-rgb);
    --bs-link-color: var(--superhero-orange);
    --bs-link-hover-color: var(--superhero-hover);

    --bs-body-bg: #2b3e50;
    --bs-card-bg: #4e5d6c;
    --bs-border-color: #4e5d6c;

    --bs-btn-primary-bg: var(--superhero-orange);
    --bs-btn-primary-border-color: var(--superhero-orange);
    --bs-btn-primary-hover-bg: var(--superhero-hover);
    --bs-btn-primary-hover-border-color: var(--superhero-hover);
    --bs-btn-active-bg: var(--superhero-hover);
    --bs-btn-active-border-color: var(--superhero-hover);

    --bs-secondary-color: #adb5bd;
}

/* -------------------------------------------------------------------------
   Bootstrap Overrides & Fixes
   (Required because compiled Bootstrap often hardcodes colors in utilities)
   ------------------------------------------------------------------------- */

/* Primary Button Override - Catch-all for any elements using .btn-primary */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: var(--bs-link-hover-color);
    --bs-btn-active-bg: var(--bs-link-hover-color);
    --bs-btn-active-border-color: var(--bs-link-hover-color);
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bs-link-hover-color) !important;
    border-color: var(--bs-link-hover-color) !important;
}

/* Force utilities to respect the current theme's primary variable */
.border-primary {
    border-color: var(--bs-primary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

/* Fix Focus Rings to use the Theme Primary */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Provide Checkbox/Switch overrides to ensure color match */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Fix Outline Buttons: Force them to use variables instead of hardcoded colors */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   Custom Component Styles
   ------------------------------------------------------------------------- */

/* Login Styles */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg);
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background: var(--bs-card-bg);
    text-align: center;
}

.brand-icon {
    font-size: 4rem;
    color: var(--bs-primary);
}

/* Navbar Tweaks */
.navbar-dark.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Mobile FAB - consistent styling with generic buttons */
.fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--bs-primary) !important;
    /* Force primary */
    color: white !important;
    border: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.fab:hover {
    background-color: var(--bs-link-hover-color) !important;
    /* Force darker hover */
    transform: scale(1.05);
}

/* -------------------------------------------------------------------------
   Specific Visual Tweaks
   ------------------------------------------------------------------------- */

/* Light Mode Cancel Buttons (Visual preference: look largely gray) */
[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: #64748b;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #94a3b8;
}

/* Navbar Logout Button: Must ALWAYS be White Text/Border, Primary Text on Hover */
/* Use high specificity to override specific theme defaults above */
.navbar.navbar .btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;

    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;

    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;

    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.navbar.navbar .btn-outline-light:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* Components Overrides */
/* Explicitly enforce border color on list groups to fix missing outlines */
.list-group {
    border: 1px solid var(--bs-border-color);
}

.list-group.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Light Theme Hover Fixes - Improved Contrast */
[data-bs-theme="light"] .list-group-item {
    background-color: #ffffff;
}

[data-bs-theme="light"] .list-group-item-action:hover,
[data-bs-theme="light"] .list-group-item-action:focus {
    background-color: #f1f5f9;
    z-index: 1;
}

/* Card overrides */
.card {
    border: 1px solid var(--bs-border-color);
}

/* Ensure border-primary on cards overrides the default border */
.card.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Dashboard Stats Override - ensure correct colors in light mode */
[data-bs-theme="light"] .dashboard-stat-card {
    background-color: #f1f5f9;
}

/* -------------------------------------------------------------------------
   Planning Page Components
   ------------------------------------------------------------------------- */
.planning-slider-container {
    flex-grow: 1;
    max-width: 300px;
    position: relative;
    padding-bottom: 20px;
}

.planning-slider-input {
    position: relative;
    z-index: 2;
}

.planning-slider-labels {
    position: absolute;
    width: 100%;
    top: 25px;
    left: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
}

.planning-map-container {
    position: relative;
    height: 600px;
    width: 100%;
    z-index: 1;
}

.planning-map {
    height: 100%;
    width: 100%;
    border-radius: 8px;
}


/* Range Slider Full Customization (Forces Theme Colors) */
.form-range::-webkit-slider-thumb {
    background: var(--bs-primary);
    box-shadow: none;
    /* Clean look */
}

.form-range::-webkit-slider-runnable-track {
    background-color: var(--bs-border-color);
    /* Fallback track */
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-range::-moz-range-thumb {
    background: var(--bs-primary);
    border: none;
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Map Markers */
.custom-marker-wrapper {
    background: transparent;
    border: none;
}

.custom-marker {
    width: 42px;
    height: 42px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.custom-marker i {
    transform: rotate(45deg);
    color: white;
    font-size: 20px;
}

/* Library Overrides */
[data-bs-theme="dark"] .iti__country-list {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .iti__country.iti__highlight {
    background-color: var(--bs-primary);
    color: white;
}

[data-bs-theme="dark"] .iti__dial-code {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .leaflet-container a:not(.btn) {
    color: var(--bs-primary);
}

/* Fix "Success" buttons in Dark Mode popup explicitly */
[data-bs-theme="dark"] .leaflet-popup .btn-outline-success {
    color: #198754 !important;
    /* Bootstrap success green default */
    border-color: #198754 !important;
}

[data-bs-theme="dark"] .leaflet-popup .btn-outline-success:hover {
    background-color: #198754 !important;
    color: white !important;
}

/* Ensure "Primary" buttons in Dark Mode use the Orange theme */
[data-bs-theme="dark"] .leaflet-popup .btn-outline-primary {
    color: var(--bs-primary) !important;
    /* Orange */
    border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .leaflet-popup .btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
}


/* LIGHT MODE */

/* Ensure generic links in map use primary color, BUT exclude buttons to avoid stomping colors */
[data-bs-theme="light"] .leaflet-container a:not(.btn) {
    color: var(--bs-primary);
}

/* Ensure "Primary" buttons in Light Mode use the Zephyr Blue */
[data-bs-theme="light"] .leaflet-popup .btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

[data-bs-theme="light"] .leaflet-popup .btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* Ensure "Success" buttons in Light Mode use Green (fix blue text issue) */
[data-bs-theme="light"] .leaflet-popup .btn-outline-success {
    color: #198754 !important;
    border-color: #198754 !important;
}

[data-bs-theme="light"] .leaflet-popup .btn-outline-success:hover {
    background-color: #198754 !important;
    color: white !important;
}

/* Increase Leaflet Popup Close Button Size */
/* Increase Popup Close Button Size & Fix Hover */
.leaflet-popup-close-button {
    font-size: 24px !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    /* Default Leaflet grey or slightly darker */
}

.leaflet-popup-close-button:hover {
    color: var(--bs-primary) !important;
    /* Theme primary on hover */
}