:root{
    --sidebar-width: 240px ;
    --sidebar-min: 180px ;
    --sidebar-max: 420px ;
}

body {
    margin: 0 ;
    min-height: 100vh ;
    display: flex ;
    flex-direction: column ;
}

.page_wrapper{
    max-width: unset ;
    display: flex ;
    flex: 1 ;
    width: 100% ;
    padding-top: 0 ;
    padding-bottom: 0 ;
}

.sidebar_toggle {
    display: none ;
}

#sidebar {
    position: relative ;
    flex: 0 0 var(--sidebar-width) ;
    flex-shrink: 0 ;
    padding: 1rem ;
    display: flex ;
    flex-direction: column ;
    gap: 8px ;
    width: var(--sidebar-width) ;
    max-width: var(--sidebar-max) ;
    height: auto ;
}

.sidebar_heading {
    font-size: 1.5rem ;
    font-weight: 700 ;
    margin: 0.5rem 0 ;
}

#session_status {
    font-size: 0.9em ;
    color: var(--text-dim) ;
}

#session_list {
    display: flex ;
    flex-direction: column ;
    overflow-y: auto ;
    gap: 5px ;
    scrollbar-width: thin ;
    padding-right: 0.6rem ;
}

.button_group {
    display: flex ;
    flex-direction: row ;
    flex-wrap: wrap ;
    gap: 0.3rem ;
}

.venue_heading {
    font-size: 1.0rem ;
    font-weight: 600 ;
    margin: 1rem 0 0.5rem 0 ;
    color: var(--text) ;
    letter-spacing: 0.03em ;
}

.session_button {
    display: flex ;
    align-items: center ;
    gap: 10px ;
    transition: background 0.15s ease ;
    width: 6.125rem ;
    min-width: 0 ;
    border: 1px solid var(--card-border) ;
    font-weight: 500 ;
    font-size: 0.9rem ;
}

.session_button:hover{ background: rgba(255,255,255,0.03) ; }

.session_button.selected{
    background: var(--accent-button-dim) ;
    border-color: var(--accent-border) ;
}

.create_button {
    margin-top: auto ;
    width: max-content ;
    display: flex ;
    align-items: center ;
    gap: 0.6rem ;
    color: var(--text) ;
}

.resize_handle{
    width: 5px ;
    flex-shrink:0 ;
    cursor: col-resize ;
    position: relative ;
    background: var(--card-border) ;
}

.resize_handle:hover, .resize_handle.dragging{
    background: var(--gold) ;
}

.resize_handle::after{
    content: "" ;
    position: absolute ;
    top:0 ;
    bottom:0 ;
    left:-4px ;
    right:-4px ;
}

#main {
    display: flex ;
    flex-direction: column ;
    height: auto ;
    width: 100% ;
    min-height: 0 ;
    padding: 1rem ;
    overflow-y: auto ;
}

#scorecards {
    display: flex ;
    flex: 1 ;
    min-height: 0 ;
    flex-wrap: wrap ;
    align-items: flex-start ;
    align-content: flex-start ;
    gap: 1rem 2rem ;
    padding: 1rem ;
}

#overlay {
    flex-shrink: 0 ;
    background: var(--bg) ;
    border-top: 1px solid var(--border) ;
    padding: 16px 24px ;
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    gap: 16px ;
}

.footer_group {
    display: flex ;
    align-items: center ;
    column-gap: 0.3rem ;
}

.footer_icon {
    display: flex ;
    align-items: center ;
    margin-right: 0.4rem ;
}

.footer_icon > svg {
    width: 18px ;
}

.footer_number {
    font-weight: 700 ;
    color: var(--accent-text) ;
}

.btn_primary {
    display: inline-flex ;
    column-gap: 0.4rem ;
    align-items: center ;
}

.button_icon {
    display: flex ;
    align-content: center ;
    width: 18px ;
}

@media (max-width: 768px) {
    .page_wrapper {
        flex-direction: column ;
    }

    .page_title {
        margin-bottom: 0.2em ;
        font-size: 1.5rem ;
    }

    #main {
        padding: 1rem 0 ;
    }

    #scorecards {
        padding: 0 ;
    }

    #sidebar{
        position: fixed ;
        top: 0 ;
        left: 0 ;
        max-width: 100vw ;
        width: 100% ;
    
        transform: translateY(-100%) ;
        transition: transform 200ms ease ;
        background-color: var(--card) ;
        z-index: 1000 ;
        padding: 8px 10px ;
    }
        
    #sidebar.is-open {
        transform: translateY(0) ;
    }
    
    .sidebar_toggle {
        display: block;
        width: 100%;
        border: none;
        background: var(--surface-color, #232a36);
        padding: 10px 0;
        cursor: pointer;
    }
    
    #sidebar.is-open ~ .sidebar_toggle .toggle_chevron {
        transform: rotate(180deg);
    }

    .toggle_chevron {
        fill: var(--accent-border) ;
    }

    .list_wrapper {
        position: relative ;
        overflow: hidden ;
    }

    .list_wrapper::after {
        content: '' ;
        position: absolute ;
        right: 0 ;
        top: 0 ;
        bottom: 0 ;
        width: 28px ;
        background: linear-gradient(to right, transparent, var(--bg-color, #232a36)) ;
        pointer-events: none ;
    }

    #session_list {
        flex-direction: row ;
        overflow-x: auto ;
    }

    .session_group {
        display: flex ;
        flex-direction: column ;
        flex-shrink: 0 ;
        margin-bottom: 1rem ;
        margin-right: 1rem ;
    }

    .session_heading {
        margin-top: 0.5rem ;
        white-space: nowrap ;
        border: none ;
        font-size: 1.0rem ;
        width: max-content ;
    }

    .venue_row {
        display: flex ;
        flex-direction: row ;
        flex-wrap: nowrap ;
        gap: 1rem ;
    }

    .venue_wrapper {
        display: flex ;
        flex-direction: column ;
        flex-shrink: 0 ;
    }

    .venue_heading {
        margin-top: 0 ;
        white-space: nowrap ;
    }

    .button_group {
        display: flex ;
        flex-direction: row ;
    }

    #main {
        width: 100% ;
    }

    #scoreboards {
        padding-left: 0 ;
        width: 100% ;
    }

    .scoreboard_inner {
        max-width: 100% ;
    }

    .scoreboard_container {
        max-width: 100% ;
    }

    #overlay {
        display: none ;
    }
}