/*
 * Time Map workspace layout
 * Visual/layout only.
 */

@media (min-width: 1100px) {

    /*
     * Turn the explorer into an application workspace instead
     * of allowing the sidebar to determine document height.
     */
    .tm-main {
        grid-template-columns:
            minmax(300px, 350px)
            minmax(0, 1fr);

        align-items: stretch;
        gap: 18px;

        height: calc(100vh - 160px);
        min-height: 640px;

        overflow: hidden;
    }


    /*
     * LEFT EXPLORER
     *
     * Categories, tags and event lists scroll inside this rail.
     */
    .tm-sidebar {
        min-width: 0;
        min-height: 0;
        height: 100%;

        overflow-y: auto;
        overflow-x: hidden;

        padding-right: 7px;

        scrollbar-width: thin;
        scrollbar-color:
            #294d67
            transparent;

        overscroll-behavior: contain;
    }

    .tm-sidebar::-webkit-scrollbar {
        width: 7px;
    }

    .tm-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .tm-sidebar::-webkit-scrollbar-thumb {
        background: #294d67;
        border-radius: 999px;
    }


    /*
     * Keep individual filter sections compact.
     */
    #categoryFilters {
        max-height: 210px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
    }

    #tagFilters {
        max-height: 235px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
    }

    .tm-event-list {
        max-height: 275px !important;
        overflow-y: auto;
    }


    /*
     * RIGHT WORKSPACE
     *
     * Toolbar
     * Map
     * Chronology / Playback
     */
    .tm-map-column {
        min-width: 0;
        min-height: 0;
        height: 100%;

        display: grid;

        grid-template-rows:
            auto
            minmax(330px, 1fr)
            auto;

        align-content: stretch;

        overflow: hidden;
    }


    .tm-map-toolbar {
        grid-row: 1;
    }


    .tm-map {
        grid-row: 2;

        height: auto !important;
        min-height: 330px !important;

        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }


    /*
     * Chronology stays underneath the map rather than
     * disappearing several pages below the filters.
     */
    .tm-timeline-panel {
        grid-row: 3;

        margin-top: 14px !important;

        max-height: 320px;
        min-height: 0;

        overflow-y: auto;
        overflow-x: hidden;

        scrollbar-width: thin;
        scrollbar-color:
            #294d67
            transparent;
    }

    .tm-timeline-panel::-webkit-scrollbar {
        width: 6px;
    }

    .tm-timeline-panel::-webkit-scrollbar-thumb {
        background: #294d67;
        border-radius: 999px;
    }


    /*
     * Timeline becomes a deliberate compact control deck.
     */
    .tm-timeline-panel {
        display: flex;
        flex-direction: column;
    }

    .tm-timeline-header {
        order: 1;
    }

    .tm-playback {
        order: 2;
        margin-top: 12px;
        margin-bottom: 14px;
    }

    .tm-range-inputs {
        order: 3;
    }

    .tm-preset-row {
        order: 4;
    }

    .tm-dual-slider {
        order: 5;
    }

    .tm-timeline-scale {
        order: 6;
    }


    /*
     * Denser playback controls.
     */
    .tm-playback {
        padding: 11px 13px;
    }

    .tm-playback-header {
        margin-bottom: 8px;
    }

    .tm-playback-actions {
        margin-bottom: 9px;
    }

    .tm-playback-status {
        margin-top: 6px;
    }


    /*
     * Keep cards visually separated while avoiding
     * enormous vertical gaps.
     */
    .tm-sidebar > .tm-card {
        margin-bottom: 14px;
    }

}


/*
 * Medium widths:
 * retain normal document scrolling rather than forcing
 * desktop-style nested panes.
 */
@media (min-width: 760px) and (max-width: 1099px) {

    .tm-main {
        height: auto;
        overflow: visible;
    }

    .tm-sidebar,
    .tm-map-column {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    #categoryFilters,
    #tagFilters {
        max-height: none;
    }

}


/*
 * Phones stay naturally stacked.
 */
@media (max-width: 759px) {

    .tm-main {
        height: auto;
        overflow: visible;
    }

    .tm-sidebar,
    .tm-map-column,
    .tm-timeline-panel {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    #categoryFilters,
    #tagFilters {
        max-height: none;
    }

    .tm-map {
        min-height: 370px !important;
    }
}