/* Basic Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
}

/* Recorder UI */
#vr-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
}

#vr-container > * {
    box-sizing: border-box;
}

/* Top row: inputs and buttons */
#vr-container input#vr-title,
#vr-container button,
#vr-container span#vr-timer {
    vertical-align: middle;
}

/* Ensure controls wrap on small widths */
#vr-container .controls-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

#vr-title {
	width: 100%;
}

/* Player wrapper hidden until needed; keep size */
#vr-player-wrap {
    display: flex; /* Changed from block to flex */
    flex-direction: column; /* Stack items vertically */
    gap: 8px; /* Add space between elements inside the wrapper */
    width: 100%; /* Full width of the parent container */
    box-sizing: border-box; /* Ensures proper sizing including padding/borders */
}

/* Audio player sizing */
#vr-player {
    width: 100%; /* Full width */
    max-width: 100%; /* Ensure it doesn't overflow */
    border-radius: 4px; /* Optional: Soft corners for aesthetics */
    background-color: #f0f0f0; /* Optional: Background for clarity */
}

/* Actions row (Save / Discard) */
#vr-actions {
	width: 100%; /* Full width */
    max-width: 100%; /* Ensure it doesn't overflow */
    display: flex; /* Use flex to arrange buttons */
    gap: 8px; /* Space between actions */
}

/* Status text */
#vr-status {
    font-size: 0.95em;
    color: #333;
    word-break: break-word;
    display: block; /* Ensure it's displayed */
}

/* Admin table tweaks */
#vr-recordings-table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    overflow: hidden;
}

/* Columns sizing */
#vr-recordings-table th,
#vr-recordings-table td {
    padding: 8px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Make title cell allow wrapping for long names */
#vr-recordings-table td.vr-title-cell {
    white-space: normal; /* Allow wrapping */
    max-width: 220px;
}

/* Make filename column narrower */
#vr-recordings-table td:nth-child(2) {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Audio player in table */
#vr-recordings-table audio {
    width: 220px;
    max-width: 100%;
}

/* Duration column */
.vr-duration {
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

/* Prevent table from overflowing its container */
.wrap table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

/* Buttons */
#vr-container .button,
#vr-recordings-table .button {
    cursor: pointer;
}

/* Small screens: stack layout */
@media (max-width: 600px) {
    #vr-container {
        gap: 6px;
    }
    #vr-player {
        width: 100%;
    }
    #vr-recordings-table audio {
        width: 160px;
    }
    #vr-recordings-table td.vr-title-cell {
        max-width: 140px;
    }
}