html { 
    height: 100%; 
    overflow-y: auto; /* Ensure html can scroll if body content overflows viewport */
 }
 body { 
    font-family: 'Inconsolata', monospace; background-color: black; color: #ddd; 
    margin: 0; padding: 0; height: 100vh; /* Use viewport height */
    overflow-y: auto; /* Allow body to scroll if its content is taller than viewport */
    display: flex;
    flex-direction: column;
 }

 /* --- Top Bar and Hamburger Menu --- */
div#topBar {
    flex-shrink: 0; /* Prevent topBar from shrinking */
    padding: 5px;
    background-color: #1a1a1a; /* Slightly different from body for distinction */
    border-bottom: 1px solid #444;
}

button#hamburgerMenuButton {
    font-size: 24px;
    background: none;
    border: none;
    color: #ddd;
    cursor: pointer;
    padding: 5px 10px;
    /* margin-right: 10px; */ /* No longer needed if it's the last item in its row */
}
button#hamburgerMenuButton:hover {
    color: #fff;
}

div#mainMenu {
    position: fixed;
    top: 0;
    right: 0; /* Changed from left to right */
    width: 250px; /* Adjust as needed */
    height: 100vh;
    background-color: #2c2c2c;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* Shadow on the left now */
    z-index: 2000; /* Ensure it's above other content */
    padding: 20px;
    transform: translateX(100%); /* Initially hide to the right */
    transition: transform 0.3s ease-in-out;
}
button#closeMenuButton {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px; /* Larger for an "X" */
    line-height: 1;
    background: none;
    border: none;
    color: #aaa; /* Slightly dimmer than main hamburger */
    cursor: pointer;
    padding: 5px;
}
button#closeMenuButton:hover {
    color: #fff;
}

div#mainMenu.main-menu-visible {
    transform: translateX(0);
}
div#mainMenu h3, div#mainMenu h4 {
    color: #eee;
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}
div#mainMenu h4 { /* Sub-headings for sections */
    font-size: 0.9em;
    color: #ccc;
    margin-top: 15px;
    margin-bottom: 5px;
    border-bottom: none;
    text-transform: uppercase;
}

/* Style for config selector inside the menu */
div#mainMenu #configSelector {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #3a3a3a;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 1em;
}
/* Style for new select dropdown for playback options */
div#mainMenu #playRtWhenPausedSelect {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    background-color: #3a3a3a;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 1em;
}
div#mainMenu label[for="playRtWhenPausedSelect"] {
    display: block; /* Make label take its own line */
    margin-top: 5px; /* Space above the label */
    font-size: 0.9em;
    color: #bbb;
}

/* General style for buttons inside the menu */
div#mainMenu button.menu-button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #3a3a3a;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 1em;
    text-align: left; /* Align text to the left for button-like links */
    cursor: pointer;
}
div#mainMenu button.menu-button:hover {
    background-color: #4a4a4a;
    border-color: #666;
}

/* Adjust textLine to fit within the new topBar structure */
div#textLine { /* flex-grow: 1; */ /* Not needed for horizontal growth if parent is column flex */ margin:0; padding: 0 5px 0 5px; } 
div#textLine input#text1 { font-size: 25px; width: 100%; margin: 0; background: #333; color: #ddd; border: 0; box-sizing: border-box; }
div#textLine input#text2 { font-size: 17px; width: 100%; margin: 0; background: #333; color: #ddd; border: 0; }

/* New row for playback controls and hamburger menu */
div#bottomControlsRow {
    display: flex;
    justify-content: space-between; /* Pushes hamburger to the right */
    align-items: center;
    width: 100%; /* Take full width of topBar */
    padding-top: 5px; /* Optional: add some space above this row */
}

/* Styles for #text1 based on playing call type */
div#textLine input#text1.playing-realtime {
    background-color: #2a52be; /* A nice blue for realtime */
    color: #fff;
}
div#textLine input#text1.playing-priority {
    background-color: #b8860b; /* DarkGoldenrod - a yellow/gold for priority */
    color: #fff;
}
div#textLine input#text3 { font-size: 15px; width: 100%; margin: 0; background: #333; color: #ddd; border: 0; }

/* Container for playback controls to group them */
div#playbackControls {
    display: flex; /* Keeps playback buttons in a row */
    flex-grow: 1; /* Allows it to take space, pushing hamburger if needed, or adjust as per design */
}

/* div#buttons { height: calc(100vh - 150px); overflow-x: hidden; overflow-y: auto;} */
div#buttons { 
    flex-grow: 1; /* Allow buttons div to take remaining vertical space */
    overflow-y: auto; /* Keep vertical scroll if content overflows */
    overflow-x: hidden;
    padding: 5px; /* Add some padding around the buttons */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center buttons horizontally */
    align-content: flex-start; /* Pack wrapped lines to the top */
}
div#buttons br { clear:both; }

/* Style for the button-like checkboxes in playlist.php */
.playlist-button-style {
    /* Mimic styles from div#buttons div */
    width: 120px;  /* Consistent with player buttons */
    height: 45px;  /* Consistent with player buttons */
    padding: 3px;
    margin: 2px auto; /* 'auto' for horizontal centering if td is wider */
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px;
    display: flex; /* For internal content alignment */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    /* Background and border-color will be set by .active/.inactive and .mode_regular classes */
    /* Text color will also be inherited or set by active/inactive states */
}

/* Apply active/inactive/pending styles also to .playlist-button-style */
/* This duplicates some rules but is a targeted fix. A more DRY approach would involve shared base classes. */

.playlist-button-style.inactive {
    background-color: #282828;
    border-color: #404040;
    color: #a0a0a0;
}
.playlist-button-style.inactive.mode_regular { border-color: #228B22; }
.playlist-button-style.inactive.mode_priority { border-color: #DAA520; }
.playlist-button-style.inactive.mode_realtime { border-color: #4682B4; }
.playlist-button-style.inactive.mode_mute { border-color: #666666; }

.playlist-button-style.pending.mode_regular { background-color: #90EE90; border-color: #A9A9A9; color: #000000; }
.playlist-button-style.active.mode_regular { background-color: #32CD32; border-color: #00FF00; color: #FFFFFF; }

.playlist-button-style.pending.mode_priority { background-color: #FFFFE0; border-color: #A9A9A9; color: #000000; }
.playlist-button-style.priority.mode_priority { background-color: #FFFF00; border-color: #FFD700; color: #000000; }

.playlist-button-style.pending.mode_realtime { background-color: #ADD8E6; border-color: #A9A9A9; color: #000000; }
.playlist-button-style.active.mode_realtime { background-color: #337AB7; border-color: #007BFF; color: #FFFFFF; }

.playlist-button-style.mode_mute {
    background-color: #444444 !important;
    color: #AAAAAA !important;
    border-color: #666666 !important;
}




div#buttons div {
    z-index: 100;
    width: 120px; /* Increased width by 20% */
    height: 45px; /* Increased height for two lines and padding */
    padding: 3px; /* Reduced padding as content will manage spacing */
    margin: 2px;
    box-sizing: border-box; /* Crucial for consistent sizing with borders/padding */
    border-width: 2px;     /* Standard border width */
    border-style: solid;
    border-radius: 4px; /* Slightly rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevent content spillover */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Added depth */
    cursor: pointer; /* Indicate clickable */
}

div#buttons div .button-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

div#buttons div input { display:none; }
div#buttons div select { font-size:10px; height: 10px; display:none; }

div#chMenu { z-index: 1000; height: 300px; margin-top: -150px; width: 300px; margin-left: -150px; 
    position: absolute; top: 50%; left: 50%; 
    border: 1px solid #555; /* Softer border */
    background: #3a3a3a; /* Darker, distinct background */
    padding: 20px 20px 15px 20px; /* Slightly less bottom padding initially */
    border-radius: 8px; /* Rounded corners for pop-up feel */
    box-shadow: 0px 0px 15px rgba(0,0,0,0.5); /* More pronounced shadow for overlay */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: stretch; /* Stretch items to fill width */
}

div#chMenu span#chTitle {
    font-size: 1.5em; /* Larger title */
    font-weight: bold;
    color: #eee;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
}

/* --- Talkgroup Button Styling --- */

/* 1. Inactive (Empty) State - applies to any mode when inactive */
div#buttons div.inactive {
    background-color: #282828; /* Darker grey, faded background */
    border-color: #404040;     /* Slightly lighter grey border */
    color: #a0a0a0;            /* More subdued text color */
}

/* Border colors for INACTIVE buttons based on their mode */
div#buttons div.inactive.mode_regular {
    border-color: #228B22; /* ForestGreen - a dimmer green */
}
div#buttons div.inactive.mode_priority {
    border-color: #DAA520; /* Goldenrod - a dimmer yellow/gold */
}
div#buttons div.inactive.mode_realtime {
    border-color: #4682B4; /* SteelBlue - a dimmer blue */
}
div#buttons div.inactive.mode_mute { /* Mute inactive border can be same as active mute or the default inactive */
    border-color: #666666; /* Consistent with active mute border */
}
/* 2. Regular Mode Styling */
div#buttons div.pending.mode_regular { /* Pending Regular Call */
    background-color: #90EE90; /* LightGreen */
    border-color: #A9A9A9;     /* DarkGray border for pending */
    color: #000000;            /* Black text for readability */
}
div#buttons div.active.mode_regular { /* Playing Regular Call */
    background-color: #32CD32; /* LimeGreen */
    border-color: #00FF00;     /* Bright Green border (highlight) */
    color: #FFFFFF;            /* White text */
}

/* 3. Priority Mode Styling */
div#buttons div.pending.mode_priority { /* Pending Priority Call */
    background-color: #FFFFE0; /* LightYellow */
    border-color: #A9A9A9;     /* DarkGray border */
    color: #000000;            /* Black text */
}
div#buttons div.priority.mode_priority { /* Playing Priority Call (status 'priority') */
    background-color: #FFFF00; /* Yellow */
    border-color: #FFD700;     /* Gold/Darker Yellow border (highlight) */
    color: #000000;            /* Black text */
}

/* 4. Realtime Mode Styling */
div#buttons div.pending.mode_realtime { /* Pending Realtime Call (though RT usually plays immediately) */
    background-color: #ADD8E6; /* LightBlue */
    border-color: #A9A9A9;     /* DarkGray border */
    color: #000000;            /* Black text */
}
div#buttons div.active.mode_realtime { /* Playing Realtime Call (status 'active' from JS) */
    background-color: #337AB7; /* Blue */
    border-color: #007BFF;     /* Bright Blue border (highlight) */
    color: #FFFFFF;            /* White text */
}

/* 5. Mute Mode Styling (Overrides others if mode is mute) */
div#buttons div.mode_mute {
    background-color: #444444 !important; /* Dark gray */
    color: #AAAAAA !important;            /* Lighter gray text */
    border-color: #666666 !important;    /* Medium gray border */
}

/* Styling for the two lines inside the talkgroup button */
div#buttons div .button-line-1 { /* Alpha Tag */
    font-size: 10px;
    font-weight: bold;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevent wrapping to keep it on one line */
    line-height: 1.2;
    text-align: center;
}

div#buttons div .button-line-2 { /* TGID */
    font-size: 9px; /* Smaller font for TGID */
    color: inherit; /* Inherits color from parent, can be overridden by specific states */
    opacity: 0.8;   /* Slightly subdued */
    width: 100%;
    text-align: center;
    line-height: 1.1;
}

/* Specific text color adjustments for active states if needed */
div#buttons div.active.mode_regular .button-line-2,
div#buttons div.priority.mode_priority .button-line-2,
div#buttons div.active.mode_realtime .button-line-2 {
    opacity: 0.9; /* Make TGID slightly more visible on active colored backgrounds */
}

/* Styling for Priority Pop-up Options */
div#chMenu input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

div#chMenu label {
    display: block; /* Make labels block elements */
    font-size: 1.2em; /* Readable font size */
    padding: 12px 15px;
    margin: 8px 0; /* Space between buttons */
    background-color: #555; /* Default button background */
    color: #ddd;
    border: 1px solid #666;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

div#chMenu label:hover {
    background-color: #6a6a6a;
    border-color: #777;
}

div#chMenu input[type="radio"]:checked + label {
    background-color: #007bff; /* Highlight color for selected option (e.g., blue) */
    color: #fff;
    border-color: #0056b3;
    font-weight: bold;
}

div#chMenu input#chSave { /* Close button styling */
    display: none !important; /* Hide the close button */
}

/* div#buttons div.menu { z-index: 1000; height: 200px; margin-top: -100px; width: 200px; margin-left: -100px; position: absolute; top: 50%; left: 50%; border: 3px solid #888; background: #999;} */

.bold{ font-size: 1.3em; font-weight: bold; }

/* Styling for Control Buttons and Config Selector */
.control_button, 
select#configSelector {
    padding: 8px 12px; /* Adjusted padding */
    margin: 5px;       /* Consistent margin */
    background-color: #3a3a3a; /* Consistent with pop-up background */
    color: #ddd;
    border: 1px solid #555; /* Consistent border */
    border-radius: 4px;    /* Consistent with talkgroup buttons */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Subtle shadow */
    font-size: 14px; /* Standardized font size */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none; /* Remove default browser outline on focus for select */
}

.control_button:hover,
select#configSelector:hover {
    background-color: #4a4a4a;
    border-color: #666;
}

/* --- Mobile Responsiveness for Priority Pop-up --- */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    div#chMenu {
        width: 85vw; /* Use viewport width, slightly more than before for very small screens */
        height: auto; /* Adjust height automatically based on content */
        max-height: 75vh; /* Max height to prevent excessive tallness */
        /* Adjust margins for centering with new width */
        /* Using transform for better centering with dynamic height/width */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0; /* Reset fixed margin if using transform */
        margin-top: 0;  /* Reset fixed margin if using transform */
        padding: 15px;
        overflow-y: auto; /* Allow scrolling if content is too tall */
    }

    div#chMenu span#chTitle {
        font-size: 1.3em; /* Smaller title */
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    div#chMenu label {
        font-size: 1.1em; /* Smaller option text */
        padding: 10px 12px; /* Adjusted padding */
        margin: 5px 0; /* Slightly reduced margin */
    }

}