/**
 * AI Interview Records Viewer Styles
 * 
 * This stylesheet provides comprehensive styling for the AI Interview Records Viewer component.
 * It includes responsive design patterns and follows BEM methodology for consistent naming.
 * 
 * Table of Contents:
 * 1. Base Layout & Container
 * 2. Header & Title Styles
 * 3. Search & Filter Components
 * 4. Table & Data Display
 * 5. Detail View & Conversation Thread
 * 6. Pagination Controls
 * 7. Loading, Error & Empty States
 * 8. Status Badges & Indicators
 * 9. Responsive Design (Mobile/Tablet)
 * 
 * @author Survey Insights Development Team
 * @version 1.0.0
 */

/* ================================================================================
   1. BASE LAYOUT & CONTAINER
   ================================================================================ */

/**
 * Main container for the AI Interview Records Viewer
 * Uses flexbox for responsive layout with proper height calculation
 */
.aiinterview-records-viewer {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px); /* Account for browser chrome and navigation */
    padding: 20px 20px 0px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #ffffff;
    box-sizing: border-box;
}

/**
 * Main content area that contains the side-by-side layout
 */
.aiinterview-records-viewer__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex children to shrink properly */
}

/**
 * Side-by-side layout container for table and detail sections
 */
.aiinterview-records-viewer__main-layout {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0; /* Important for flex children to shrink properly */
}

/**
 * Left section containing the records table
 */
.aiinterview-records-viewer__table-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/**
 * Right section containing the detail view
 */
.aiinterview-records-viewer__detail-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* ================================================================================
   2. HEADER & TITLE STYLES
   ================================================================================ */

/**
 * Main page title styling
 */
.aiinterview-records-viewer__title {
    font-size: 28px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #e5e7eb;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* ================================================================================
   3. SEARCH & FILTER COMPONENTS
   ================================================================================ */

/**
 * Filter section container
 */
.aiinterview-records-viewer__filters {
    margin-bottom: 20px;
    flex-shrink: 0; /* Prevent filters from shrinking */
}

/**
 * Search bar container
 */
.aiinterview-records-viewer__search {
    margin-bottom: 20px;
    flex-shrink: 0; /* Prevent search from shrinking */
}

/**
 * Search input container with flexible layout
 */
.aiinterview-records-viewer__search-container {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/**
 * Search input field with focus states
 */
.aiinterview-records-viewer__search-input {
    flex: 1;
    min-width: 250px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: white;
    color: #374151;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aiinterview-records-viewer__search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.aiinterview-records-viewer__search-input::placeholder {
    color: #9ca3af;
}

/**
 * Search and clear button base styles
 * Common styling for both search and clear buttons
 */
.aiinterview-records-viewer__search-btn,
.aiinterview-records-viewer__clear-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
    white-space: nowrap;
}

/**
 * Search button specific styling (primary action)
 */
.aiinterview-records-viewer__search-btn {
    background-color: #3b82f6;
    color: white;
}

.aiinterview-records-viewer__search-btn:hover {
    background-color: #2563eb;
}

.aiinterview-records-viewer__search-btn:active {
    background-color: #1d4ed8;
}

/**
 * Clear button specific styling (secondary action)
 */
.aiinterview-records-viewer__clear-btn {
    background-color: #6b7280;
    color: white;
}

.aiinterview-records-viewer__clear-btn:hover {
    background-color: #4b5563;
}

.aiinterview-records-viewer__clear-btn:active {
    background-color: #374151;
}

/* ================================================================================
   4. TABLE & DATA DISPLAY
   ================================================================================ */

/**
 * Table container with overflow handling
 */
.aiinterview-records-viewer__table-container {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
    flex: 1;
    min-height: 0; /* Allow table to shrink if needed */
}

/**
 * Main data table styling
 */
.aiinterview-records-viewer__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/**
 * Table header styling with sticky positioning
 */
.aiinterview-records-viewer__table th {
    background-color: #f9fafb;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    position: sticky;
    top: 0;
    z-index: 1; /* Ensure headers stay above content */
}

/**
 * Table cell styling
 */
.aiinterview-records-viewer__table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
    vertical-align: top;
}

/**
 * Table row interactions and states
 */
.aiinterview-records-viewer__table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.aiinterview-records-viewer__table tbody tr:hover {
    background-color: #f8fafc;
}

.aiinterview-records-viewer__table tbody tr.selected {
    background-color: #eff6ff;
    box-shadow: inset 3px 0 0 #3b82f6; /* Left border indicator for selection */
}

.aiinterview-records-viewer__table tbody tr:last-child td {
    border-bottom: none; /* Remove border from last row */
}

/**
 * Specialized cell content styling
 */
.aiinterview-records-viewer__session-id {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 13px;
    background-color: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    color: #374151;
}

.aiinterview-records-viewer__time-started {
    color: #6b7280;
    font-size: 13px;
}

/* ================================================================================
   5. DETAIL VIEW & CONVERSATION THREAD
   ================================================================================ */

/**
 * Detail view placeholder when no record is selected
 */
.aiinterview-records-viewer__detail-placeholder {
    background-color: #f9fafb;
    border: 2px dashed #e5e7eb;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * Main detail view container when a record is selected
 */
.aiinterview-records-viewer__detail-view {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow content to scroll if needed */
}

/**
 * Detail view header with controls
 */
.aiinterview-records-viewer__detail-header {
    margin-bottom: 20px;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.aiinterview-records-viewer__detail-info {
    margin-bottom: 15px;
}

.aiinterview-records-viewer__detail-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.aiinterview-records-viewer__detail-meta {
    color: #6b7280;
    font-size: 14px;
}

/**
 * Control elements in detail view (status dropdown, update button)
 */
.aiinterview-records-viewer__detail-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.aiinterview-records-viewer__detail-controls label {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.aiinterview-records-viewer__sts-dropdown {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: white;
    color: #374151;
    font-size: 14px;
    min-width: 120px;
}

.aiinterview-records-viewer__sts-dropdown:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.aiinterview-records-viewer__update-sts-btn {
    padding: 6px 16px;
    background-color: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.aiinterview-records-viewer__update-sts-btn:hover {
    background-color: #047857;
}

.aiinterview-records-viewer__update-sts-btn:active {
    background-color: #065f46;
}

.aiinterview-records-viewer__section-title {
    margin: 0 0 15px 0;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0; /* Prevent section title from shrinking */
}

/**
 * Fix for the conversation section container
 */
.aiinterview-records-viewer__detail-view > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow conversation to scroll */
}

/**
 * Conversation thread container
 */
.aiinterview-records-viewer__conversation-thread {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e2e8f0;
    flex: 1;
    overflow-y: auto; /* Allow scrolling for long conversations */
    min-height: 0;
}

/**
 * Individual message styling in conversation thread
 */
.aiinterview-records-viewer__message {
    margin-bottom: 12px;
    max-width: 55%; /* Limit message width for better readability */
    position: relative;
    clear: both; /* Clear floats for proper layout */
}

.aiinterview-records-viewer__message:last-child {
    margin-bottom: 0;
}

/**
 * Message positioning based on speaker
 */
.aiinterview-records-viewer__message--interviewer {
    margin-left: 0;
    margin-right: auto;
    float: left; /* Align interviewer messages to the left */
}

.aiinterview-records-viewer__message--participant {
    margin-left: auto;
    margin-right: 0;
    float: right; /* Align participant messages to the right */
}

.aiinterview-records-viewer__message--unknown {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* Full width for unknown/system messages */
}

/**
 * Message header with speaker and timestamp
 */
.aiinterview-records-viewer__message-header {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.aiinterview-records-viewer__message--interviewer .aiinterview-records-viewer__message-header {
    text-align: left;
}

.aiinterview-records-viewer__message--participant .aiinterview-records-viewer__message-header {
    text-align: right;
}

.aiinterview-records-viewer__speaker {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aiinterview-records-viewer__timestamp {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 8px;
}

/**
 * Message content bubbles with different styling per speaker
 */
.aiinterview-records-viewer__message-content {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word; /* Handle long words gracefully */
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.aiinterview-records-viewer__message--interviewer .aiinterview-records-viewer__message-content {
    background-color: #e2e8f0;
    color: #1e293b;
    border-bottom-left-radius: 4px; /* Reduce radius for speech bubble effect */
}

.aiinterview-records-viewer__message--participant .aiinterview-records-viewer__message-content {
    background-color: #3b82f6;
    color: #ffffff;
    border-bottom-right-radius: 4px; /* Reduce radius for speech bubble effect */
}

.aiinterview-records-viewer__message--unknown .aiinterview-records-viewer__message-content {
    background-color: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    text-align: center;
    font-style: italic;
}

/**
 * No conversation message styling
 */
.aiinterview-records-viewer__no-conversation {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    font-style: italic;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/**
 * Clear floats after conversation thread
 */
.aiinterview-records-viewer__conversation-thread::after {
    content: "";
    display: table;
    clear: both;
}

/* ================================================================================
   6. PAGINATION CONTROLS
   ================================================================================ */

/**
 * Pagination container styling
 */
.aiinterview-records-viewer__pagination {
    margin-top: 20px;
    padding: 15px 0;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    flex-shrink: 0; /* Prevent pagination from shrinking */
}

/* ================================================================================
   7. LOADING, ERROR & EMPTY STATES
   ================================================================================ */

/**
 * Loading state styling
 */
.aiinterview-records-viewer__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
    flex: 1;
}

.aiinterview-records-viewer__loading p {
    margin-top: 20px;
    font-size: 16px;
}

/**
 * Error state styling
 */
.aiinterview-records-viewer__error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aiinterview-records-viewer__error p {
    color: #dc2626;
    margin: 0 0 15px 0;
    font-size: 16px;
}

.aiinterview-records-viewer__error button {
    background-color: #dc2626;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.aiinterview-records-viewer__error button:hover {
    background-color: #b91c1c;
}

/**
 * Empty state styling
 */
.aiinterview-records-viewer__empty {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 18px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * No records found styling
 */
.aiinterview-records-viewer__no-records {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 16px;
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================================
   8. STATUS BADGES & INDICATORS
   ================================================================================ */

/**
 * Base status badge styling
 */
.aiinterview-records-viewer__status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/**
 * Status-specific badge colors and styling
 */
.aiinterview-records-viewer__status-CMPLT {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.aiinterview-records-viewer__status-INPRGRS {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.aiinterview-records-viewer__status-TEST {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.aiinterview-records-viewer__status-SUSPECT {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.aiinterview-records-viewer__status-TIMEOUT {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.aiinterview-records-viewer__status-UNKNOWN {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/**
 * Base published badge styling
 */
.aiinterview-records-viewer__published-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/**
 * Published status specific badge colors and styling
 */
.aiinterview-records-viewer__published-yes {
    background-color: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.aiinterview-records-viewer__published-no {
    background-color: #f9fafb;
    color: #374151;
    border: 1px solid #e5e7eb;
}

/* ================================================================================
   9. RESPONSIVE DESIGN (MOBILE/TABLET)
   ================================================================================ */

/**
 * Tablet breakpoint (1024px and below)
 * Switch to vertical stacking for better mobile experience
 */
@media (max-width: 1024px) {
    .aiinterview-records-viewer__main-layout {
        flex-direction: column;
        gap: 15px;
    }
    
    .aiinterview-records-viewer__table-section,
    .aiinterview-records-viewer__detail-section {
        flex: none;
        min-height: 300px; /* Ensure minimum usable height */
    }
    
    .aiinterview-records-viewer__message {
        max-width: 65%; /* Slightly wider messages on tablets */
    }
}

/**
 * Mobile breakpoint (768px and below)
 * Optimize for smaller screens with adjusted spacing and font sizes
 */
@media (max-width: 768px) {
    .aiinterview-records-viewer {
        padding: 15px; /* Reduce padding on mobile */
    }
    
    .aiinterview-records-viewer__title {
        font-size: 24px; /* Smaller title on mobile */
    }
    
    .aiinterview-records-viewer__main-layout {
        gap: 10px; /* Tighter gaps on mobile */
    }
    
    .aiinterview-records-viewer__search-container {
        padding: 12px;
        gap: 8px;
    }
    
    .aiinterview-records-viewer__search-input {
        min-width: 200px; /* Smaller minimum width */
        font-size: 13px;
        padding: 7px 10px;
    }
    
    .aiinterview-records-viewer__search-btn,
    .aiinterview-records-viewer__clear-btn {
        font-size: 13px;
        padding: 7px 12px;
    }
    
    .aiinterview-records-viewer__table th,
    .aiinterview-records-viewer__table td {
        padding: 8px 10px; /* Reduce table cell padding */
        font-size: 13px;
    }
    
    .aiinterview-records-viewer__detail-view {
        padding: 15px; /* Reduce detail view padding */
    }
    
    .aiinterview-records-viewer__detail-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .aiinterview-records-viewer__conversation-thread {
        padding: 12px; /* Reduce conversation padding */
    }
    
    .aiinterview-records-viewer__message {
        max-width: 75%; /* Wider messages on mobile */
    }
    
    .aiinterview-records-viewer__message-content {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/**
 * Small mobile breakpoint (480px and below)
 * Maximum optimization for very small screens
 */
@media (max-width: 480px) {
    .aiinterview-records-viewer {
        padding: 10px; /* Minimal padding for small screens */
    }
    
    .aiinterview-records-viewer__title {
        font-size: 20px; /* Even smaller title */
    }
    
    .aiinterview-records-viewer__search-container {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        gap: 10px;
    }
    
    .aiinterview-records-viewer__search-input {
        min-width: auto;
        width: 100%; /* Full width input on small screens */
    }
    
    .aiinterview-records-viewer__search-btn,
    .aiinterview-records-viewer__clear-btn {
        width: 100%; /* Full width buttons */
        justify-content: center;
    }
    
    .aiinterview-records-viewer__table-container {
        overflow-x: auto; /* Horizontal scroll for table */
    }
    
    .aiinterview-records-viewer__table {
        min-width: 400px; /* Prevent table from being too narrow */
    }
    
    .aiinterview-records-viewer__message {
        max-width: 85%; /* Even wider messages on very small screens */
    }
    
    .aiinterview-records-viewer__sts-dropdown {
        min-width: 100px;
        font-size: 13px;
    }
    
    .aiinterview-records-viewer__update-sts-btn {
        font-size: 13px;
        padding: 5px 12px;
    }
}