/* =======================================================================
 * Generic Data Chart Popup
 *
 * Shared by drawDataChart() / createGenericDataChart()
 * Used by:
 * - Surface Water history
 * - Groundwater history
 * - Soil Water history
 * - Mesonet history
 * ======================================================================= */


/* =======================================================================
 * Chart popup
 * ======================================================================= */

.chart-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 80vw;
    max-width: 1200px;
    z-index: 2000;
}


/* =======================================================================
 * Header
 * ======================================================================= */

.chart-header {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}


.chart-close {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
}


/* =======================================================================
 * Body
 * ======================================================================= */

.chart-body {
    width: 100%;
    max-height: 70vh;
    padding: 10px 15px 40px;
    overflow: hidden;
    box-sizing: border-box;
}


.chart-body-inner {
    position: relative;
    width: 96%;
    height: min(60vh, 420px);
    margin: 0 auto;
}


/* =======================================================================
 * History options
 * ======================================================================= */

.chart-history-options {
    position: absolute;
    top: 10px;
    right: 58px;
    z-index: 10;

    display: flex;
    gap: 10px;
    align-items: center;

    font-size: 13px;
    color: #666;

    background: rgba(255,255,255,0.85);
    padding: 3px 8px;
    border-radius: 4px;
}


.chart-history-options label {
    cursor: pointer;
    white-space: nowrap;
}


.chart-history-options input {
    margin-right: 4px;
}


/* =======================================================================
 * Canvas
 * ======================================================================= */

.chart-body-inner canvas {
    width: 100% !important;
    height: 100% !important;
}


canvas {
    max-width: 100%;
    margin-bottom: 20px;
}


/* =======================================================================
 * Slider
 * ======================================================================= */

.chart-slider-container {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
}


.range-slider-container {
    width: 100%;
    text-align: center;
}


#range-slider {
    width: 80%;
    height: 30px;
    margin: 15px auto 0;
}


#range-slider .noUi-connect {
    background-color: rgba(30,30,30,0.5);
}


.noUi-handle {
    background: #007bff !important;
    border: 1px solid white;
    height: 20px;
    width: 1px;
    border-radius: 0;
    cursor: pointer;
}


.noUi-connect {
    background: #d3d3d3;
}


.noUi-base {
    background: #f0f0f0;
}


.noUi-tooltip {
    font-size: 12px;
    background: #007bff;
    color: white;
    padding: 2px 5px;
    border-radius: 0;
}


#slider-values {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}


/* =======================================================================
 * Buttons
 * ======================================================================= */

.chart-reset {
    background: #eee;
    border: 1px solid #ccc;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}


.chart-reset:hover {
    background: #ddd;
}


/* =======================================================================
 * Overlay
 * ======================================================================= */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
}


/* =======================================================================
 * Mobile responsive
 * ======================================================================= */

@media (max-width: 900px), (hover: none) and (pointer: coarse) {

    #chartsPopup {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;

        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;

        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .chart-header {
        min-height: 24px !important;
        padding: 2px 8px !important;
        border-radius: 0 !important;
    }

    #chart-title {
        font-size: 14px !important;
        line-height: 1 !important;
        text-align: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    .chart-close {
        font-size: 22px !important;
        line-height: 1 !important;
        padding: 0 4px !important;
    }

    .chart-body {
        width: 100% !important;
        max-height: none !important;
        padding: 2px 4px 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    .chart-body-inner {
        width: 100% !important;
        height: calc(100dvh - 36px) !important;
        min-height: 360px !important;
        margin: 0 auto !important;
    }

    .range-slider-container {
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        transform: none !important;

        width: 100% !important;
        padding: 8px 8px 16px !important;
        margin: 0 !important;

        text-align: center;
        background: #ffffff;
        border-top: 1px solid #dddddd;
        box-sizing: border-box;
    }

    .range-slider-container .chart-reset {
        display: inline-block;
        margin: 0 12px 8px 0 !important;
        font-size: 12px !important;
        padding: 3px 8px !important;
        vertical-align: middle;
    }

    .range-slider-container .chart-history-options {
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        transform: none !important;

        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 14px;

        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;

        font-size: 12px !important;
        color: #555555;
        vertical-align: middle;
    }

    .chart-history-options input {
        margin-right: 4px;
        transform: scale(0.85);
    }

    #range-slider {
        width: calc(100vw - 42px) !important;
        max-width: calc(100vw - 42px) !important;
        height: 26px !important;
        margin: 8px auto 0 !important;
    }

    .noUi-tooltip {
        font-size: 10px !important;
        padding: 2px 4px !important;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #slider-values {
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin: 8px 0 0 !important;
    }
}


/* Mobile landscape / short screen */
@media (orientation: landscape) and (max-height: 500px) {

    .chart-header {
        min-height: 20px !important;
        padding: 1px 8px !important;
    }

    #chart-title {
        font-size: 13px !important;
    }

    .chart-close {
        font-size: 20px !important;
    }

    .chart-body-inner {
        height: calc(100dvh - 28px) !important;
        min-height: 260px !important;
    }

    .range-slider-container {
        padding: 6px 8px 12px !important;
    }

    #slider-values {
        font-size: 12px !important;
    }
}