/**
 * Multi-County Selection Styles for Map Elements
 * 
 * This file contains styles specific to the map container and SVG elements
 * for the multi-county selection feature (USCB dataset).
 * 
 * UI/sidebar styles are in index-multi-select.css
 */

/* ========================================
   MULTI-SELECT TOGGLE BUTTON
   ======================================== */

/* Toggle button positioned inline with map controls button (to the right) */
.multi-select-toggle-btn {
    position: absolute;
    top: auto;
    bottom: 80px; /* Same bottom as map controls button */
    left: 185px; /* Position to the right of map controls button (160px width + 20px left + 5px gap) */
    z-index: 100; /* Same as map controls button, below drawer (310) */
    background-color: var(--bg-transparent);
    color: var(--primary-dark);
    border: 2px solid var(--primary-dark);
    border-radius: 4px;
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px var(--shadow-medium);
    transition: all 0.3s ease;
    font-size: 1rem;
    font-family: var(--main-font-family);
    display: flex;
    align-items: center;
    gap: 6px;
}

.multi-select-toggle-btn:hover {
    background-color: var(--multi-select-green);
    color: white;
    transform: scale(1.05);
    border-color: var(--multi-select-green);
}

.multi-select-toggle-btn.active {
    background-color: var(--multi-select-green);
    color: white;
    border-color: var(--multi-select-green);
    box-shadow: 0 4px 12px var(--multi-select-shadow);
}

.multi-select-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* Hide multi-select button on mobile devices */
@media screen and (max-width: 768px), screen and (max-height: 768px) {
    .multi-select-toggle-btn {
        display: none !important;
    }
}

/* ========================================
   CLEAR SELECTION BUTTON
   ======================================== */

.clear-region-section {
    margin-top: 15px;
    padding: 15px;
    text-align: center;
    background: rgba(46, 213, 115, 0.1);
    border-radius: 8px;
    border: 2px solid var(--multi-select-shadow);
}

.clear-region-btn {
    width: 100%;
    padding: 12px 20px;
    background: white;
    border: 2px solid var(--multi-select-green);
    border-radius: 6px;
    color: var(--multi-select-green);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-region-btn:hover {
    background: var(--multi-select-green);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--multi-select-shadow);
}

/* ========================================
   DATASET VISIBILITY TOGGLES
   ======================================== */

/* Hide USCB-only elements when not on USCB dataset */
body:not([data-active-dataset="uscb"]) .uscb-only {
    display: none !important;
}

/* Show USCB-only elements when USCB is active */
body[data-active-dataset="uscb"] .uscb-only {
    display: flex !important;
}

/* Hide multi-select button on mobile (overrides .uscb-only rule) */
@media screen and (max-width: 768px), screen and (max-height: 768px) {
    body[data-active-dataset="uscb"] .multi-select-toggle-btn {
        display: none !important;
    }
}

/* ========================================
   MAP/COUNTY INTERACTION STYLES
   ======================================== */

/* Hover effect for counties in multi-select mode */
.multi-select-mode .county:hover {
    stroke: var(--multi-select-green);
    stroke-width: 2px;
    cursor: crosshair;
}

/* Selection rectangle drawn during Ctrl+drag */
.selection-rectangle {
    stroke: #4A90E2;
    stroke-width: 2px;
    stroke-dasharray: 5, 5;
    fill: rgba(74, 144, 226, 0.1);
    pointer-events: none;
    z-index: 1001;
}

/* Currently selected counties (before saving as region) */
.county.multi-selected {
    fill: var(--multi-select-green-light) !important;
    stroke: var(--multi-select-green) !important;
    stroke-width: 2px !important;
}

/* Counties locked in a saved region (grayed out, not clickable) */
.county.region-locked {
    fill: #ccc !important;
    stroke: #999 !important;
    stroke-width: 1px !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Visual overlay for selected region (drawn on top of counties) */
.region-overlay {
    fill: var(--multi-select-overlay);
    stroke: var(--multi-select-green);
    stroke-width: 4px;
    pointer-events: none;
}