/* Fix for properly hiding/showing playback content when switching tabs */

/* Override inline styles - Hide all tab content by default */
body.after-call-mode .left-column-tab-content:not(.active) {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Show only the active tab content - Override inline display: flex */
body.after-call-mode .left-column-tab-content.active {
    display: flex !important;
    visibility: visible !important;
    position: relative !important;
    left: auto !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Specifically hide playback content and all its children when not active */
body.after-call-mode #playbackContent:not(.active),
body.after-call-mode #playbackContent:not(.active) * {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure data points and controls are hidden in non-active tabs */
body.after-call-mode .left-column-tab-content:not(.active) .data-points-section,
body.after-call-mode .left-column-tab-content:not(.active) .playback-controls,
body.after-call-mode .left-column-tab-content:not(.active) .complainant-video-section,
body.after-call-mode .left-column-tab-content:not(.active) .officer-video-and-transcription-section {
    display: none !important;
    visibility: hidden !important;
}

/* Specific fix for Notes tab content */
body.after-call-mode #notesContent.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Specific fix for Report tab content */
body.after-call-mode #reportContent.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-y: auto !important;
}

/* Ensure playback content is properly structured when active */
body.after-call-mode #playbackContent.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Hide playback mode specific elements when not in playback tab */
body.after-call-mode .left-column-tab-content:not(#playbackContent) .playback-mode {
    display: none !important;
}

/* Ensure proper z-index stacking to prevent overlap */
body.after-call-mode .left-column-tab-content {
    position: relative;
    z-index: 1;
}

body.after-call-mode .left-column-tab-content.active {
    z-index: 10;
}

/* Fix for any inline styles that might interfere */
body.after-call-mode .left-column-tab-content[style*="display: flex"]:not(.active) {
    display: none !important;
}

/* Ensure video elements are completely hidden when tab is not active */
body.after-call-mode .left-column-tab-content:not(.active) video,
body.after-call-mode .left-column-tab-content:not(.active) img[src*="complainant"],
body.after-call-mode .left-column-tab-content:not(.active) img[src*="officer"] {
    display: none !important;
    visibility: hidden !important;
}

/* Fix overflow issues when switching tabs */
body.after-call-mode .video-left-section > div {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Ensure clean tab switching without content bleed-through */
body.after-call-mode .left-column-tab-content * {
    box-sizing: border-box;
}

/* Hide all after-call-only elements within inactive tabs */
body.after-call-mode .left-column-tab-content:not(.active) .after-call-only {
    display: none !important;
    visibility: hidden !important;
}