/* bcm-v3.css  -  Riparian Ecosystems Map | GEOG 585 Final Project */

/* PART 1: GLOBAL RESET */

/* Remove default margins and set base font styling */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 15px;
}


/* PART 2: PAGE LAYOUT */

/* Main flex container for map and info panel */
#main-container {
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: row;

}


/* PART 3: MAP AREA */

/* Container that holds the Leaflet map */
#map-container {
    width: 60%;
    height: 100vh;
    position: relative;
    flex-shrink: 0;
}

/* Actual Leaflet map element (must have explicit size) */
#map {
    width: 100%;
    height: 100%;
}

/* Change cursor when hovering over clickable polygons */
.leaflet-interactive {
    cursor: pointer;
}


/* PART 4: INFO PANEL */

/* Right-side panel that displays selected polygon info */
#info-panel {
    width: 40%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 3;
    height: 100vh;
}


/* PART 5: INFO PANEL ROWS */

/* Base style shared by all info rows */
.info-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 24px;
    flex: 0 0 auto;
    min-height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Label text styling for each row */
.info-label {
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
    margin-bottom: 4px;
}

/* Main value text styling */
.info-value {
    font-size: 18px;
    font-weight: 600;
}

/* Header row (title area at top of panel) */
#row-header {
    background-color: #1b4332;
    color: white;
    min-height: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 24px;
}

/* Title text inside header*/
.header-title {
    font-size: clamp(16px, 2.2vw, 28px);
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1.1;
}

/*Subtitle text inside header*/
.header-subtitle {
    font-size: clamp(14px, 1.6vw, 20px);
    font-weight: bold;
    opacity: 0.85;
    margin-top: 3px;
    line-height: 1.1;
}


/* Vegetation name row */
#row-name {
    background-color: #40916c;
    color: white;
    min-height: 70px;
}

/* Styling tweak for vegetation name text */
#row-name .info-value {
    font-size: 16px;
    font-style: italic;
}

/* Tree cover row */
#row-tree {
    background-color: #74c69d;
    color: #1b4332;
}

/* Shrub cover row */
#row-shrub {
    background-color: #b7e4c7;
    color: #2d4a1e;
}

/* Herbaceous cover row */
#row-herb {
    background-color: #d8f3dc;
    color: #2d4a1e;
}

/* Area (acres) row */
#row-acres {
    background-color: #a8c5da;
    color: #1a3a4a;
}

/* ET chart row (larger to fit chart) */
#row-et {
    background-color: #f4f4f4;
    color: #333;
    flex: 1 1 auto;
    min-height: 220px;
    min-width: 100%;
}

/* Slightly muted label styling in ET section */
#row-et .info-label {
    color: #555;
}


/* PART 6: ET CHART */

/* Container for D3 chart and placeholder */
#et-chart-wrapper {
    position: relative;
    min-height: 170px;
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto;
    box-sizing: border-box;
    display: block;
}

/* D3 chart */
#et-chart {
    min-width: 400px;
    height: 180px;
    margin-top: 8px;
    flex: 1;
    height: clamp(160px, 38vh, 460px);
}

#et-chart svg {
    display: block;
    max-width: 100%;
}

/* scrollbar for chart ONLY */
#et-chart-wrapper.has-chart {
    overflow-x: auto;
}

/* Placeholder shown when no data is selected */
.et-placeholder {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #bbb;
    border-radius: 8px;
    color: #999;
    font-style: italic;
    font-size: 14px;
    text-align: center;
    background-color: white;
}

/* Tooltip styling for chart hover values */
.et-tooltip {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 6px 8px;
    font-size: 12px;
    width: auto;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

/* about ET Chart button */
#about-et-button {
    background-color: #91c0d7;
    color: black;
    border: 1.5px solid rgb(14, 15, 15);
    border-radius: 6px;
    font-size: 16px;
    padding: 2px 6px;
}

/* about button changes color when hovering */
#about-et-button:hover {
    background-color: steelblue;
    color: white;
    border-color: steelblue;
}

.et-legend {
    gap: 14px;
    align-items: center;
    margin-left: auto;
    font-size: 12px;
    color: #333;
    display: none;
}

#row-et.has-chart .et-legend {
    display: flex;
}

.et-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.et-label-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* group title and about button */
.et-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.et-title-group .info-label {
    line-height: 1.2;
}

/* legend symbols */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: steelblue;
}

.box {
    width: 12px;
    height: 12px;
    background: #cce5df;
    border: 1px solid #999;
}

/* about Riparian Map button */
#about-riparian-map-button {
    background-color: #d0e3d3;
    border: 1.5px solid rgb(14, 15, 15);
    color: black;
    border-radius: 6px;
    font-size: 16px;
    padding: 2px 6px;
}

/* about button changes color when hovering */
#about-riparian-map-button:hover {
    background-color: #afe0c8;
    color: white;

}


/* PART 7: RESPONSIVE LAYOUT */

/* Stack map above panel on small screens */
@media (max-width: 700px) {
    #main-container {
        flex-direction: column;
        height: auto;
    }

    #map-container {
        width: 100%;
        height: 50vh;
    }

    #info-panel {
        width: 100%;
    }
}

/* PART 8: COLLAPSIBLE LEGEND */

/* Main legend container box */
.legend {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.3;
    color: #222;
    clear: both;
}

/* Fixed width for all legend states */
.legend,
.legend-collapsed,
.legend-expanded {
    width: 260px;
}

/* Header row inside legend (title + toggle button) */
.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Legend title text */
.legend-title {
    font-weight: bold;
    color: #1b4332;
    font-size: 14px;
}

/* Show/Hide toggle button */
.legend-toggle-btn {
    border: 1px solid #999;
    background: white;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
}

/* Hover effect for toggle button */
.legend-toggle-btn:hover {
    background: #f3f3f3;
}

/* Container for legend items */
.legend-body {
    margin-top: 8px;
    overflow-x: hidden;
}

/* Individual legend item row */
.legend-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4px;
}

/* Legend colors rectangles */
.legend-color {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    margin-top: 2px;
    border: 1px solid #999;
    flex-shrink: 0;
}

/* Label text next to swatch */
.legend-label {
    white-space: normal;
    word-break: break-word;
}

/* Hide legend items when collapsed */
.legend-collapsed .legend-body {
    display: none;
}

/* Show legend items with scroll when expanded */
.legend-expanded .legend-body {
    display: block;
    max-height: 380px;
    overflow-y: auto;

}

/* Existing desktop/default styles */

@media (max-height: 800px) {
    .legend-expanded .legend-body {
        max-height: 250px;
    }
}

/* mobile */
@media (max-width: 768px) {

    .legend,
    .legend-collapsed,
    .legend-expanded {
        width: 180px;
        padding: 8px;
        font-size: 11px;
    }

    .legend-title {
        font-size: 12px;
    }

    .legend-toggle-btn {
        font-size: 10px;
        padding: 2px 6px;
    }

    .legend-expanded .legend-body {
        max-height: 140px;
    }

    .legend-color {
        width: 10px;
        height: 10px;
        margin-right: 6px;
    }

    .legend-item {
        margin-bottom: 2px;
        align-items: center;
    }

    .legend-label {
        line-height: 1.1;
    }
}

/* ABOUT BUTTON */

/* Button positioned in bottom-right of map */
#about-map-button {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1000;
    display: block;
    background-color: white;
    color: #333;
    border: 1px solid #999;
    padding: 6px 10px;
    font-size: 16px;
}

/* Hover effect for about button */
#about-map-button:hover {
    background-color: #f3f3f3;
}

/* Used CHAT GPT to figure out how to move legend below about map button*/
/* Move legend below button */
.leaflet-top.leaflet-left .legend {
    margin-top: 55px;
}

/* ZOOM TO EXTENT BUTTON */

/* Button used to zoom map to full data extent */
.zoom-data-btn {
    display: block;
    height: 30px;
    padding: 0 10px;
    border: none;
    background: #ffffff;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

/* Hover state for zoom button */
.zoom-data-btn:hover {
    background: #f4f4f4;
}

/* Used CHAT GPT to figure out how to modify  leaflet scale bar to make it easier to see */
.leaflet-control-scale-line {
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #444;
    border-top: none;

    color: #222;
    font-size: 12px;
    font-weight: 600;

    padding: 3px 10px;

    min-width: 140px;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}