/* Lake Buoys Layout - Responsive Drawer System */

/* Thin scrollbar for drawer tabs */
.drawer-tab-content {
    scrollbar-width: thin; /* For Firefox */
}

    /* For Webkit browsers (Chrome, Safari, Edge) */
    .drawer-tab-content::-webkit-scrollbar {
        width: 8px; /* Thin width */
    }

    .drawer-tab-content::-webkit-scrollbar-track {
        background: transparent; /* Or use a subtle color like #f1f1f1 */
    }

    .drawer-tab-content::-webkit-scrollbar-thumb {
        background: #888; /* Scrollbar color */
        border-radius: 4px; /* Rounded edges */
    }

        .drawer-tab-content::-webkit-scrollbar-thumb:hover {
            background: #555; /* Darker on hover */
        }

/* Hide drawer elements on large screens */
#drawer-toggle-btn,
#controls-drawer {
    display: none;
}

/* Small screens (≤1500px) - Show drawer, adjust layout */
@media (max-width: 1500px) {
    /* Prevent page scrolling */
    body, html {
        overflow: hidden !important;
        height: 100vh !important;
    }

    .main, .content {
        overflow: hidden !important;
        height: 100vh !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Remove any container padding except for sides */
    .container, .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Add padding to the row wrapper */
    .wyadapt-sta-dash-app-content > .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr !important;
        grid-gap: 0.75rem !important;
        flex: 1 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Show drawer button and drawer */
    #drawer-toggle-btn,
    #controls-drawer {
        display: block;
    }

    /* Two-column layout: map | chart */
    .wyadapt-sta-dash-app-content {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 140px) !important;
        width: 100% !important;
    }

        .wyadapt-sta-dash-app-content > .row {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            grid-template-rows: 1fr !important;
            grid-gap: 0.75rem !important;
            flex: 1 !important;
            margin: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

    /* Map column */
    #column2 {
        grid-column: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Chart column */
    #column1 {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Map takes available space */
    #map-card {
        flex: 1;
        min-height: 0;
        margin-bottom: 0 !important;
        border-radius: 0.375rem !important;
    }

    #map-container {
        height: 100%;
    }

    /* Chart takes available space */
    #timeSeriesContainer {
        flex: 1;
        min-height: 0;
        margin-bottom: 0 !important;
        border-radius: 0.375rem !important;
    }

    /* Hide these in main layout - they go to drawer */
    #dropDownContainer,
    #summary-panel,
    #video-card,
    #branding-card {
        display: none !important;
    }

    /* Floating drawer toggle button */
    #drawer-toggle-btn {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
        background-color: var(--falcon-primary, #0d6efd);
        color: white;
        border: none;
        border-radius: 0 0.5rem 0.5rem 0;
        padding: 1rem 0.5rem;
        cursor: pointer;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

        #drawer-toggle-btn:hover {
            padding-right: 0.75rem;
            background-color: var(--falcon-primary-dark, #0b5ed7);
            box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
        }

        #drawer-toggle-btn i {
            transition: transform 0.3s ease;
        }

        #drawer-toggle-btn:hover i {
            transform: translateX(3px);
        }

    /* Drawer panel */
    #controls-drawer {
        position: fixed;
        left: -400px; /* Hidden off-screen */
        top: 60px;
        width: 400px;
        height: calc(100vh - 60px);
        background-color: var(--falcon-body-bg, #f9fafd);
        box-shadow: none;
        border-right: 1px solid var(--falcon-border-color, #dee2e6);
        border-radius: 0;
        z-index: 999;
        transition: left 0.3s ease;
        overflow: hidden;
        padding: 0.5rem 1rem 1rem 1rem;
        display: flex;
        flex-direction: column;
    }

        #controls-drawer.open {
            left: 0;
        }

    /* Fix modal z-index - AGGRESSIVE overrides */
    .modal-backdrop {
        z-index: 1040 !important;
        opacity: 0.5 !important;
    }

        .modal-backdrop.show {
            opacity: 0.5 !important;
        }

    .modal {
        z-index: 1055 !important;
        background: transparent !important;
    }

        .modal.show {
            display: block !important;
        }

    /* Ensure modals opened from drawer are clickable */
    .modal-dialog {
        z-index: 1056 !important;
        position: relative;
        pointer-events: auto !important;
    }

    .modal-content {
        z-index: 1057 !important;
        pointer-events: auto !important;
        position: relative;
        background-color: var(--falcon-card-bg, #fff) !important;
    }

    /* Specific fix for controls modal */
    #controls-modal {
        z-index: 1055 !important;
    }

        #controls-modal .modal-dialog {
            z-index: 1056 !important;
        }

        #controls-modal .modal-content {
            z-index: 1057 !important;
        }

    /* Ensure drawer doesn't clip modals */
    #controls-drawer {
        overflow: visible !important;
    }

        #controls-drawer .drawer-body {
            overflow: visible !important;
        }

        #controls-drawer .drawer-tab-content {
            overflow-y: auto !important;
            overflow-x: visible !important;
        }

        /* Drawer header */
        #controls-drawer .drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--falcon-border-color, #dee2e6);
            flex-shrink: 0;
            min-height: 50px;
        }

        /* Drawer tabs */
        #controls-drawer .drawer-tabs {
            display: flex;
            gap: 0;
            margin: 0;
        }

        #controls-drawer .drawer-tab {
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            font-weight: 500;
            color: var(--falcon-body-color);
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.6;
        }

            #controls-drawer .drawer-tab:hover {
                opacity: 1;
                background-color: var(--falcon-bg-subtle, rgba(0, 0, 0, 0.05));
            }

            #controls-drawer .drawer-tab.active {
                opacity: 1;
                color: var(--falcon-primary, #0d6efd);
                border-bottom-color: var(--falcon-primary, #0d6efd);
            }

        /* Drawer body */
        #controls-drawer .drawer-body {
            position: relative;
            flex: 1;
            min-height: 0;
        }

        #controls-drawer .drawer-tab-content {
            display: none;
            height: 100%;
            overflow-y: auto;
            padding: 1rem 0;
        }

            #controls-drawer .drawer-tab-content.active {
                display: block;
            }

            /* Ensure cards inside drawer are visible and styled */
            #controls-drawer .drawer-tab-content > * {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

        /* Style dropDownContainer inside drawer */
        #controls-drawer #dropDownContainer {
            display: block !important;
            background: transparent;
        }

            #controls-drawer #dropDownContainer .card-body {
                padding: 1rem;
            }

        /* Style summary-panel inside drawer */
        #controls-drawer #summary-panel {
            display: block !important;
            margin-bottom: 0 !important;
        }

        /* Style video and branding cards inside drawer */
        #controls-drawer #video-card,
        #controls-drawer #branding-card {
            display: block !important;
            margin-bottom: 1rem !important;
        }

        #controls-drawer #branding-card {
            display: flex !important;
        }

        /* Drawer close button */
        #controls-drawer .drawer-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--falcon-body-color);
            padding: 0;
            line-height: 1;
        }

            #controls-drawer .drawer-close:hover {
                color: var(--falcon-danger, #dc3545);
            }

    /* Button moves with drawer */
    #drawer-toggle-btn.drawer-open {
        left: 400px;
    }

        #drawer-toggle-btn.drawer-open i {
            transform: rotate(180deg);
        }

    /* Style cards inside drawer */
    #controls-drawer .card {
        border: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        margin-bottom: 1rem !important;
    }

        #controls-drawer .card:last-child {
            margin-bottom: 0 !important;
        }
}