/* =========================================
   1. GLOBAL LAYOUT
   ========================================= */
html,
body {
    height: 100%;
}

.container {
    overflow-y: hidden;
}

.container.main {
    margin-top: -140px;
    padding-top: 140px;
}

.container-fluid.main {
    min-height: 100%;
}

/* Mobile Footer adjustments */
.mobile-id-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    /* Above most Bootstrap content */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575.98px) {
    body.has-mobile-footer {
        padding-bottom: 100px;
    }
}

/* =========================================
   2. UI COMPONENTS & ANIMATIONS
   ========================================= */
.modal.fade {
    background: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade {
    opacity: 0;
}

/* Badges */
.badge.badge-bigger {
    font-size: 1rem;
}

.badge.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/* Request Card Actions */
.request-card__actions {
    min-width: 140px;
    /* Prevent wrapping on medium+ screens */
}

/* Animations */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.animate-confirm {
    animation: pulse 0.5s ease;
}

/* Slim Progress Bars */
.progress-sm {
    --bs-progress-height: 0.4rem;
}

/* =========================================
   3. PROGRESS TABLES
   ========================================= */
.table-progress-row .bg-progress-success {
    --progress-color: rgba(25, 135, 84, 0.2);
}

.table-progress-row .bg-progress-info {
    --progress-color: rgba(13, 202, 240, 0.2);
}

.table-progress-row .bg-progress-warning {
    --progress-color: rgba(255, 193, 7, 0.25);
}

.table-progress-row .bg-progress-danger {
    --progress-color: rgba(220, 53, 69, 0.2);
}

.table-progress-row .bg-progress-secondary {
    --progress-color: rgba(108, 117, 125, 0.2);
}

.table-progress-row tr {
    background-image: linear-gradient(to right, var(--progress-color, rgba(13, 110, 253, 0.2)) var(--progress-percent, 0%), transparent var(--progress-percent, 0%));
    background-repeat: no-repeat;
}

.table-progress-row td,
.table-progress-row th {
    background-color: transparent !important;
}

.table-progress-row tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

/* =========================================
   4. LEAFLET MAP CONFIGURATION
   ========================================= */
#map,
#mapid {
    height: 600px;
}

[data-bs-theme="dark"] .leaflet-container {
    background: #212529;
}

/* --- Map Tiles (The Inversion Trick) --- */
[data-bs-theme="dark"] .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* --- Attribution Controls --- */
.leaflet-control-attribution {
    background: transparent !important;
    /* Removes the white box */
    box-shadow: none !important;
    font-size: 0.7rem;
    color: #666;
}

.leaflet-control-attribution a {
    color: #444;
    text-decoration: none;
}

[data-bs-theme="dark"] .leaflet-control-attribution {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .leaflet-control-attribution a {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Zoom Controls --- */
[data-bs-theme="dark"] .leaflet-control-zoom-in,
[data-bs-theme="dark"] .leaflet-control-zoom-out {
    background-color: #2b3035 !important;
    color: #e9ecef !important;
    border-color: #495057 !important;
}

[data-bs-theme="dark"] .leaflet-control-zoom-in:hover,
[data-bs-theme="dark"] .leaflet-control-zoom-out:hover {
    background-color: #363d42 !important;
}

/* --- Popups --- */
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
    background-color: #2b3035;
    color: #e9ecef;
}

/* --- Layer Controls --- */
[data-bs-theme="dark"] .leaflet-control-layers {
    background-color: #2b3035;
    color: #e9ecef;
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
    border: none;
}

[data-bs-theme="dark"] .leaflet-control-layers label:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .leaflet-control-layers-separator {
    border-top-color: #495057;
}

/* =========================================
   5. CUSTOM MAP CONTROLS
   ========================================= */
/* --- Map Lock Button --- */
.leaflet-control-lock {
    background-color: #fff;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
    font-size: 1.2rem;
    transition: background-color 0.2s, color 0.2s;
}

.leaflet-control-lock:hover {
    background-color: #f4f4f4;
}

[data-bs-theme="dark"] .leaflet-control-lock {
    background-color: #2b3035;
    color: #e9ecef;
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .leaflet-control-lock:hover {
    background-color: #363d42;
}

/* --- Map Info Note --- */
.leaflet-control-note,
.info,
.legend,
.map-note {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    text-align: center;
    font-weight: bold;
    color: #000;
}

.leaflet-control-note h4,
.info h4,
.legend h4,
.map-note h4 {
    color: #000;
}

[data-bs-theme="dark"] .leaflet-control-note,
[data-bs-theme="dark"] .info,
[data-bs-theme="dark"] .legend,
[data-bs-theme="dark"] .map-note {
    background-color: #2b3035;
    color: #e9ecef;
    border-color: #495057;
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .leaflet-control-note h4,
[data-bs-theme="dark"] .info h4,
[data-bs-theme="dark"] .legend h4,
[data-bs-theme="dark"] .map-note h4 {
    color: #f8f9fa;
}

/* --- Specific Positioning for your .map-note --- */
.map-note {
    width: 200px;
    display: none;
    /* Hidden by default, toggled via JS */
    margin-bottom: 20px !important;
    margin-left: 10px !important;
    pointer-events: auto;
}

/* --- Custom styling for mini map used in store and user profiles --- */
.mini-map {
    height: 250px;
    width: 100%;
}

/* Custom type formatting */
small.text-small {
    font-size: 0.7rem;
}

.schedule-highlight-active {
    position: relative;
    box-shadow: inset 0 0 12px rgba(var(--bs-primary-rgb), 0.12);
}

/* Custom type setting for main page and signup page */
.text-lead-loop {
    font-family: 'Montserrat', sans-serif;
    color: #4CA131;
    font-weight: 700;
    font-size: 3rem;
}

.bg-loop-green {
    background-color: #57b335;
}

.bg-logo-green {
    background-color: #409b23;
}

.border-loop-green {
    border-color: #57b335 !important;
}

.btn-join-custom {
    font-family: 'Montserrat', sans-serif;
    /* Matching your theme font */
    font-size: 2rem !important;
    /* Enforce 3rem size */
    font-weight: 700 !important;
    /* Enforce Bold */
    border-radius: 0.5rem;
    /* Optional: makes it look more like a button */
    background-color: #ff9500;
}

.btn-join-custom:hover {
    background-color: #ffa500;
    /* .bg-logo-green */
    border-color: #ff9500;
    color: #ffffff;
}


/* =========================================
   SCHEDULE LIST COMPONENTS
   Used in: Master Schedule, Store Schedule Lists
   ========================================= */

/* * 1. Day Sidebar (The "Mon/Tue" Column)
 * Mobile: Default block behavior (full width header).
 * Desktop: Fixed width column on the left.
 */
@media (min-width: 768px) {
    .schedule-day-sidebar {
        width: 130px;
        flex-shrink: 0;
        /* Prevents it from getting squashed by content */
    }
}

/* * 2. Schedule Item Card (The individual pickup slot)
 * Mobile: Full width (100%) for easier tapping.
 * Desktop: Auto width (fits content) with a min-width for readability.
 */
.schedule-item-card {
    width: 100%;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

@media (min-width: 768px) {
    .schedule-item-card {
        width: auto;
        min-width: 250px;
    }
}

/* Optional: Clean hover effect for the item card */
.schedule-item-card:hover {
    border-color: var(--bs-primary-border-subtle) !important;
    background-color: var(--bs-tertiary-bg) !important;
}


/* =========================================
   Bring in clickable badges
   ========================================= */
/* Makes the cursor a pointer and adds a smooth transition */
.clickable-badge-wrapper .badge {
    cursor: pointer;
    transition: transform 0.15s ease-in-out, filter 0.15s ease-in-out;
}

/* Adds a subtle lift and brightness effect on hover */
.clickable-badge-wrapper:hover .badge {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Optional: Slight press effect when clicked */
.clickable-badge-wrapper:active .badge {
    transform: translateY(0);
    filter: brightness(0.95);
}