/* General styles for the app */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevent scrolling of the entire page */
}

/* Left Panel */
#left-panel {
    height: 90vh; /* Full viewport height */
    padding: 0.5rem; /* Uniform padding */
    overflow-y: auto; /* Enable vertical scrolling */
}

.fw-bold {
    font-weight: bold;
}

/* General Primary Button (Selected State) */
.btn-primary {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    border-color: #007bff;
}

/* General Outline Button (Unselected State) */
.btn-outline-primary {
    color: #007bff;
    background-color: transparent;
    border-color: #007bff;
}

/* Dance Type Button */
.dance-type-button {
    padding: 0.5rem 0.25rem; /* Adjust top/bottom and left/right padding */
    font-size: 1.0rem;
}

/* Playlist Button */
.playlist-button {
    font-size: 1.0rem;
}

/* Playlist Button (Selected State) */
.playlist-button.btn-primary,
.playlist-button.btn-primary:focus,
.playlist-button.btn-primary:active {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    border-color: #007bff;
}

.loop-guide-button {
    /* Custom styles for loop buttons */
    font-size: 0.9rem;
    padding: 0.25rem 0.25rem;
    text-align: center;
    border-radius: 4px;
}

.loop-guide-button.btn-primary {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border-color: #007bff;
}

/* Moves Table */
#moves-table-container {
    height: 170px; 
    width: 100%;
    overflow-y: auto; /* Enable scrolling inside the moves table */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    border: 1px solid #ccc; /* Fine border for visual separation */
}

#moves-table-container table {
    width: 100%; /* Force table to fill container */
    table-layout: auto; /* Allow columns to size naturally */
}

#moves-table-container td {
    padding: 0.3rem; /* Compact padding for tighter layout */
    text-align: left; /* Left-align table content */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflowing content */
    text-overflow: ellipsis; /* Add ellipsis for truncated content */
}

#moves-table-container td:first-child {
    max-width: 150px;          /* Set a fixed width for the move name column */
}

/* Ensure buttons fit content */
#moves-table-container button {
    width: auto; /* Fit button width to content */
    padding: 0.25rem 0.5rem; /* Compact padding */
    margin: 0;
}

.current-move {
    font-weight: bold;
}

#speed-control {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align label, slider, and display */
    gap: 0.5rem; /* Space between elements */
    width: 100%; /* Full width of the container */
    padding: 0.5rem 0; /* Add padding for spacing */
}

#speed-label {
    flex: 0 0 auto; /* Prevent resizing */
    font-size: 1rem; /* Match the font size */
    color: #333; /* Neutral color for text */
}

#speed-slider {
    flex: 0 0 65%; /* Take up 80% of the width */
    height: 15px; /* Thicker slider */
    background: #ffffff; /* White track */
    border-radius: 7px; /* Rounded edges */
    -webkit-appearance: none; /* Remove default styling */
    border: 1px solid #ccc; /* Subtle border */
}

#speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #007bff; /* Blue knob */
    cursor: pointer;
    border: 2px solid #007bff;
}

#speed-slider::-moz-range-thumb,
#speed-slider::-ms-thumb {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: 2px solid #007bff;
}

#speed-display {
    flex: 0 0 auto; /* Prevent resizing */
    font-size: 1rem; /* Match label and slider */
    color: #007bff; /* Blue text to match slider knob */
    margin-left: auto; /* Push to the end of the container */
}

.stop-motion-control {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stop-motion-control label {
    font-size: 14px;
    color: #333;
}

.stop-motion-control input[type="checkbox"] {
    transform: scale(1.2);
}

/* Notes Section */
.card {
    margin-top: 0.5rem; /* Small gap from moves table */
    border: 1px solid #ccc; /* Fine, light gray border */
    border-radius: 4px; /* Optional: Slight rounding */
    height: 220px; /* Fixed height for notes box */
    padding: 0.5rem; /* Add internal spacing */
    overflow-y: auto; /* Enable vertical scrolling for notes */
    overflow-x: auto; /* Enable horizontal scrolling */
}

.card-body {
    text-align: left; /* Left-align text */
    padding: 0;
    white-space: nowrap; /* Prevent line breaks */
}

#notes-body { white-space: pre-wrap; } /* Ensure notes wrap correctly */

/* Right Panel: Centered Video Player */
#right-panel {
    padding: 0;
    height: 90vh; /* Full viewport height */
    display: flex; /* Use Flexbox for centering */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    background-color: #000000; /* Placeholder color */
    overflow: hidden; /* Prevent scrolling */
}

/* Player Wrapper */
#player-wrapper {
    width: 100%; /* Full width */
    max-width: 100%; /* Prevent overflow */
    aspect-ratio: 16 / 9; /* Maintain 16:9 ratio */
    background-color: #000; /* Placeholder background color */
    overflow: hidden; /* Prevent scrollbars */
}

/* Hide the video player initially */
#player {
    display: none;
    visibility: hidden;
}

/* Show the player when Plyr is ready */
.player-loaded #player {
    display: block;
    visibility: visible;
}

.instructions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left; /* Left-justify the text */
    z-index: 5;
    pointer-events: none; /* Ensures it doesn't block interaction */
}

.instructions-text {
    background: none;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.5;
    padding: 0 1rem; /* Optional padding for readability */
    max-width: 80%; /* Ensure text doesn't stretch too wide */
    text-align: left; /* Ensures numbered list is left-aligned */
}

#frame-timer {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 3vh;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    display: block;
    text-align: right;
}

#step-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #add8e6;
    font-size: clamp(5vh, 12vw, 15vh) !important;
    z-index: 1000;
    background-color: transparent;
    padding: 0;
    border: none;
    display: none;
    line-height: 1;
    text-align: right;
}

#move-name-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    display: none;
    z-index: 100;
}

/* Adjust Panels for iPhone Landscape */
@media (max-width: 932px) and (orientation: landscape) {
    #left-panel {
        width: 42%;
    }

    /* Hide 3rd column in moves table */
    #moves-table-container table td:nth-child(3) {
        display: none;
    }

    #right-panel {
        width: 58%; /* Take remaining space */
    }
}

/* Portrait Mode Adjustments */
@media (orientation: portrait) {
    #left-panel {
        width: 100%; /* Full width */
        overflow-y: auto; /* Scrollable vertically */
        padding: 0.5rem; /* Uniform padding */
    }

    /* Moves Table: Add bottom margin for spacing */
    #moves-table-container {
        height: 125px; /* Fixed height */
        margin-bottom: 0.5rem; /* Add space below the moves table */
    }

    /* Notes Section */
    .card {
        flex: 1; /* Take up remaining space */
        overflow-y: auto; /* Allow scrolling for long notes */
        margin: 0; /* Remove external margins */
        border: 1px solid #ccc; /* Fine border for visual separation */
        padding: 0.5rem; /* Uniform internal padding */
    }

    #right-panel {
        display: none; /* Hide right panel in portrait */
    }

    /* Video Player: Add bottom margin for spacing */
    #player-wrapper {
        width: 100%; /* Full width */
        aspect-ratio: 16 / 9;
        margin: 0 auto 0.5rem; /* Center horizontally and add 0.5rem bottom margin */
    }
}