:root {
    --primary: #33343B; /*background*/
    --secondary: #324A57; /*top bar and list bg*/
    --accent-1: #A3B2B5; /*selected list item*/
    --accent-2: #25211F; /*list item borders and hovered list item*/
    --accent-3: #456377; /*??*/
    --accent-4: #6B8EA3; /*chrod buttons*/
    --text-main: #ffffff;
    --text-alt: #C2D7E2; /*??*/
}

body {
    font-family: sans-serif;
    background: var(--primary);
    color: var(--text-main);
    text-align: center;
}

.controls {

    margin-bottom: 20px;
    padding: 20px;
    background: var(--secondary);

}

.listbox-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px auto;
    max-width: 800px;
}

.column {
    flex: 1;
    text-align: left;
}

.strict-label {
    color: var(--text-alt);
    font-weight: bold;
    font-size: 0.9em;
}

.func-label {
    color: var(--text-alt);
    font-weight: bold;
    font-size: 0.9em;
}

/*chord slection buttons*/
select {
    padding: 8px;
    border-radius: 4px;
    background: var(--accent-4);
    color: var(--text-main);
    border: 1px solid var(--accent-1);
}

select[multiple] {
    width: 100%;
    height: 120px;
    background: var(--accent-4);
    color: var(--text-main);
    font-size: 13px;
}

.fretboards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.board-group {
    background: var(--secondary);
    padding: 0;
    margin-bottom: 10px;
    border-radius: 8px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.board-group img {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-logo {
    display: block;
    max-width: 700px;
    margin: 40px auto;
    height: auto;
    opacity: 0.8;
}

.listbox {
    background: var(--secondary);
    color: var(--text-main);
    border: 2px solid var(--accent-1);
    border-radius: 4px;
    overflow-y: auto;
    height: 120px;
}

.listbox-item {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--accent-2);
    line-height: 1;
    font-size: 13px;
    color: var(--text-main);
}

.listbox-item:hover {
    background: var(--accent-2);
    color: var(--text-alt);
}

.listbox-item.active {
    background: var(--accent-1);
    color: var(--primary);
}

@media (max-width: 1000px) {
    .listbox-container {
        flex-direction: row;
        gap: 10px;
        max-width: 800px;
        transform: scale(1.10);
    }

    body {
        padding: 5;
        margin: 5;
        transform: scale(1.00);
        transform-origin: top center;
    }

    .controls select {
        width: 100%;
        padding: 12px;
        font-size: 16px;/*unlcear ehat this does if anything*/
    }

    .listbox-item {
        padding: 7px 5px;
        font-size: 21px;
        line-height: 1.3;
    }

    select[multiple] {
        height: 150px;
    }

    .controls {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 8px;
    }

    .controls label {
        margin-right: 8px;     /* Puts a small gap between the title and its dropdown */
        font-weight: bold;
    }

    .controls select {
        width: 30%;
        padding: 9px;
        font-size: 25px;
    }

    .listbox {
        height: auto;
        max-height: 340px;
        overflow-y: auto;
    }
    .board-group {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        text-align: left;

        /* Scale logic */
        transform: scale(1.00);
        transform-origin: top center;

        /* Pull up to fix vertical gap */
        margin-bottom: 0px;

        /* Nudge left to fix the 'offset' look */
        /* Adjust this number (negative) until it looks centered or flush */
        margin-left: 0%;
    }

    .board-group img {
        width: auto;
        max-width: 1300px;
        height: auto;

        /* FIX: Remove any potential horizontal margins */
        margin-left: 0;
        margin-right: 0;
    }
    .strict-label {
        font-size: 18px;
    }

    .func-label {
        font-size: 18px;
    }
    /* 1. Ensure the container has enough padding at the bottom so the scrollbar doesn't cover the fret numbers */
    .board-group {
        padding-bottom: 15px;
    }

    /* 2. Basic Scrollbar width/height */
    .board-group::-webkit-scrollbar {
        height: 10px;    /* Height for horizontal scrollbars */
        display: block;  /* Force display */
    }

    /* 3. The Track (the background of the scrollbar) */
    .board-group::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    /* 4. The Handle (the part you actually move) */
    .board-group::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
        border: 2px solid #f1f1f1; /* Creates a little padding around the handle */
    }

    /* 5. Handle on hover */
    .board-group::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* For Firefox */
    .board-group {
        scrollbar-width: auto;
        scrollbar-color: #888 #f1f1f1;
    }

}