/* START OF FILE style.css */

/* Apply base font similar to Apple's San Francisco (using system fonts) */
body {
    font-family: Arial, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    margin-bottom: 56px; /* Adjust if footer is added */
}

/* Navbar styling */
.navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
}

.navbar-brand {
    font-weight: 500; /* Slightly bolder title */
}

/* Table styling (Index Page) */
.table th {
    font-weight: 500; /* Slightly bolder headers */
}

.table td {
    vertical-align: middle; /* Align cell content vertically */
}

.table td img.thumbnail {
    max-width: 80px; /* Control thumbnail size */
    height: auto;
    border-radius: 4px; /* Slightly rounded corners */
    display: block;
}

/* --- Player Page Specific Styles --- */

/* Title Editing */
#videoTitleDisplay {
    cursor: pointer; /* Indicate clickable */
    /*transition: color 0.2s ease;*/
    display: inline-block; /* Allow hover effect */
}
#videoTitleDisplay:hover {
    color: #ffffff;
}
.title-edit-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between input and button */
}


/* Video Player */
.video-container {
    margin-bottom: 1.5rem; /* Reduced space below video */
}

.video-player {
    max-width: 100%; /* Ensure video doesn't overflow container */
    border-radius: 8px; /* Rounded corners for the video player */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    background-color: #000; /* Black background for letterboxing */
}

/* Section Titles */
.transcript-section h3,
.summary-section h3,
.podcast-preview-section h3 {
    margin-bottom: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

/* Transcript Content Area */
#transcript-content {
    height: 200px; /* Default height */
    max-height: none; /* Override any previous max-height */
    overflow-y: auto;
    background-color: #2c2c2e; /* Slightly different dark shade */
    padding: 15px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.7; /* Increased line-height for readability */
    scroll-behavior: smooth; /* Enable smooth scrolling via JS */
}

/* Transcript word styling */
.transcript-word {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    padding: 1px 3px; /* Small padding around words */
    border-radius: 3px; /* Slightly rounded highlight */
    margin: 0 1px; /* Tiny space between spans */
    display: inline-block; /* Needed for position relative */
    position: relative; /* Needed for ::before pseudo-elements */
}

.transcript-word:hover {
    background-color: rgba(0, 122, 255, 0.3); /* Subtle hover */
}

/* Highlighted transcript word (current playback) */
.transcript-word.highlight {
    background-color: #007aff; /* Apple's classic blue */
    color: #ffffff;
}

/* Sermon start word highlighting */
.transcript-word.sermon-start-word {
    background-color: rgba(40, 167, 69, 0.7); /* Green with some transparency */
    color: #ffffff;
    font-weight: 500;
    /* padding: 1px 4px; */ /* Use base padding */
    /* position: relative; */ /* Already set on base class */
    box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.9); /* Subtle border */
}

.transcript-word.sermon-start-word::before {
    content: "START";
    position: absolute;
    top: -16px; /* Adjust position above the word */
    left: 50%; /* Center the label */
    transform: translateX(-50%); /* Fine-tune centering */
    font-size: 9px;
    font-weight: bold;
    background-color: #28a745;
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
    z-index: 1; /* Ensure it's above other elements */
}

/* Sermon end word highlighting */
.transcript-word.sermon-end-word {
    background-color: rgba(220, 53, 69, 0.7); /* Red with some transparency */
    color: #ffffff;
    font-weight: 500;
    /* padding: 1px 4px; */ /* Use base padding */
    /* position: relative; */ /* Already set on base class */
     box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.9); /* Subtle border */
}

.transcript-word.sermon-end-word::before {
    content: "END";
    position: absolute;
    top: -16px; /* Adjust position above the word */
    left: 50%; /* Center the label */
    transform: translateX(-50%); /* Fine-tune centering */
    font-size: 9px;
    font-weight: bold;
    background-color: #dc3545;
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
    z-index: 1; /* Ensure it's above other elements */
}


/* Toast notification styling */
#notification-container {
    z-index: 5000; /* Ensure notifications are on top */
}

.toast {
    opacity: 0.95 !important; /* Make slightly transparent */
}

/* Sermon controls styling */
.sermon-controls {
    background-color: #2c2c2e;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem; /* Reduced margin */
}

.sermon-controls .form-control {
    background-color: #3c3c3e;
    border-color: #4c4c4e;
    color: #ffffff;
}
.sermon-controls .form-control::placeholder { /* Style placeholder text */
    color: #a0a0a0;
    opacity: 1; /* Override bootstrap default */
}

.sermon-controls .form-control:disabled {
    background-color: #252527;
    border-color: #3c3c3e;
    color: #a0a0a0; /* Lighter grey for disabled text */
    opacity: 0.7;
}

.sermon-controls .btn {
    min-width: 140px; /* Adjusted min-width */
    font-weight: 500;
    margin: 5px 5px; /* Add vertical margin for wrapping */
}

/* Summary Section */
.summary-section {
    /* Inherits margin from the class="summary-section mb-4" in HTML */
}

#summary-content {
    height: 200px; /* Default height */
    max-height: none; /* Override any previous max-height */
    overflow-y: auto;
    background-color: #2c2c2e;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.95rem; /* Slightly smaller font for summary */
    line-height: 1.6;
}
#summary-content p {
    margin-bottom: 0.75rem; /* Space between paragraphs */
}


/* Podcast Preview Section */
.podcast-preview-section {
    /* Inherits margin from the class="podcast-preview-section mb-4" in HTML */
}

#podcast-preview-content {
    background-color: #2c2c2e;
    padding: 15px;
    border-radius: 8px;
}

#podcast-preview-content audio {
    width: calc(100% - 150px); /* Adjust width based on button size */
    min-width: 150px; /* Ensure audio player doesn't get too small */
}
#podcast-preview-content .btn {
    min-width: 130px; /* Button width */
}

/* Job Status Bar */
.job-status-container {
    display: none; /* Initially hidden */
    margin-top: 0.75rem;
}

.progress {
    height: 10px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.4s ease-in-out; /* Smooth progress transition */
    border-radius: 5px;
}

.job-status-text {
    font-size: 0.8rem;
    margin-top: 0.3rem;
    color: #adb5bd; /* Lighter text color */
}


/* Responsive Adjustments */
@media (max-width: 992px) {
    #transcript-content, #summary-content {
        height: 250px; /* More height on medium screens */
    }
    .sermon-controls .col-md-6 {
         margin-bottom: 1rem; /* Add space between start/end controls on smaller screens */
    }
     .sermon-controls .col-md-6:last-child {
         margin-bottom: 0;
    }
}

@media (max-width: 768px) {
     #podcast-preview-content .d-flex {
         flex-direction: column; /* Stack audio and button */
         align-items: stretch !important; /* Stretch items */
     }
     #podcast-preview-content audio {
         width: 100%; /* Full width */
         margin-bottom: 0.5rem; /* Space below audio */
     }
      #podcast-preview-content .btn {
         width: 100%; /* Full width button */
         min-width: auto;
     }

     .title-edit-container {
         flex-direction: column;
         align-items: stretch !important;
     }
     .title-edit-container .btn {
         width: 100%;
         margin-top: 5px;
     }
}

/* END OF FILE style.css */