/* Reporting Page Styles */

/* Full height layout that works with MudBlazor's responsive drawer */
.reporting-full-height {
    height: calc(100vh - 80px); /* Account for app bar and container padding */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reporting-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.reporting-tabs .mud-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.reporting-tabs .mud-tabs-toolbar {
    flex-shrink: 0;
}

.reporting-tabs .mud-tabs-panels {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.reporting-tabs .mud-tabpanel {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.overview-panel {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden;
}

.chart-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

.chart-container::-webkit-scrollbar {
    width: 8px;
}

.chart-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.chart-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.chart-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.conversation-logs-panel {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.logs-container {
    height: calc(100vh - 64px - 6rem);
    width: 100%;
    overflow: hidden;
    position: relative; /* Added for loading overlay positioning */
}

.logs-container .k-grid {
    border: 1px solid #e0e0e0;
}

/* Enhanced loading overlay styles for conversation logs - Light Theme Default */
.logs-container .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Default light theme background - very light and bright */
    background: rgba(255, 255, 255, 0.92);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-in-out;
}

.logs-container .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 3rem;
    /* Bright white background for content card */
    background: #ffffff;
    background: linear-gradient(135deg, #ffffff, #fafbfc);
    border-radius: 16px;
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 4px 6px -2px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(229, 231, 235, 0.6);
    position: relative;
    min-width: 200px;
    animation: slideUp 0.4s ease-out;
}

/* Specific light theme spinner styling with high specificity */
.logs-container .loading-content.light-theme-spinner .mud-progress-circular,
.logs-container .loading-content .light-spinner,
.logs-container .loading-content .mud-progress-circular {
    color: #2563eb !important; /* Bright blue for excellent contrast on light background */
}

.logs-container .loading-content.light-theme-spinner .mud-progress-circular svg,
.logs-container .loading-content .light-spinner svg,
.logs-container .loading-content .mud-progress-circular svg {
    color: #2563eb !important;
}

.logs-container .loading-content.light-theme-spinner .mud-progress-circular svg circle,
.logs-container .loading-content .light-spinner svg circle,
.logs-container .loading-content .mud-progress-circular svg circle {
    stroke: #2563eb !important;
}

/* Text styling for light theme */
.logs-container .loading-content .mud-typography,
.logs-container .loading-content .light-text {
    color: #1f2937 !important; /* Dark gray for excellent readability on light background */
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.025em;
}

.logs-container .grid-loading {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: grayscale(0.2);
}

/* Subtle animations for better UX */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Enhanced focus ring for accessibility - light theme colors */
.logs-container .loading-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #1d4ed8);
    border-radius: 18px;
    opacity: 0.08;
    z-index: -1;
}

/* Force light theme colors when not in dark mode - Higher specificity */
html:not(.mud-theme-dark) .logs-container .loading-overlay {
    background: rgba(255, 255, 255, 0.92) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) !important;
}

html:not(.mud-theme-dark) .logs-container .loading-content {
    background: #ffffff !important;
    background: linear-gradient(135deg, #ffffff, #fafbfc) !important;
    border-color: rgba(229, 231, 235, 0.6) !important;
}

html:not(.mud-theme-dark) .logs-container .loading-content .mud-progress-circular,
html:not(.mud-theme-dark) .logs-container .loading-content .light-spinner {
    color: #2563eb !important;
}

html:not(.mud-theme-dark) .logs-container .loading-content .mud-progress-circular svg,
html:not(.mud-theme-dark) .logs-container .loading-content .light-spinner svg {
    color: #2563eb !important;
}

html:not(.mud-theme-dark) .logs-container .loading-content .mud-progress-circular svg circle,
html:not(.mud-theme-dark) .logs-container .loading-content .light-spinner svg circle {
    stroke: #2563eb !important;
}

html:not(.mud-theme-dark) .logs-container .loading-content .mud-typography,
html:not(.mud-theme-dark) .logs-container .loading-content .light-text {
    color: #1f2937 !important;
}

/* Alternative approach using CSS variables override for light theme */
.logs-container .loading-content {
    --mud-palette-primary: #2563eb;
    --mud-palette-primary-rgb: 37, 99, 235;
}

/* Body class based override (fallback) */
body:not(.dark-theme) .logs-container .loading-overlay {
    background: rgba(255, 255, 255, 0.92) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) !important;
}

body:not(.dark-theme) .logs-container .loading-content {
    background: #ffffff !important;
    background: linear-gradient(135deg, #ffffff, #fafbfc) !important;
}

/* Default fallback for any missed cases */
.logs-container .loading-overlay:not(.dark-mode) {
    background: rgba(255, 255, 255, 0.92) !important;
}

.logs-container .loading-content:not(.dark-mode) {
    background: #ffffff !important;
}

/* Dark theme support - only apply when explicitly in dark mode */
@media (prefers-color-scheme: dark) {
    .logs-container .loading-overlay {
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)) !important;
    }
    
    .logs-container .loading-content {
        background: #1e293b !important;
        border-color: #475569 !important;
        box-shadow: 
            0 20px 25px -5px rgba(0, 0, 0, 0.4),
            0 10px 10px -5px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(100, 116, 139, 0.3);
    }
    
    .logs-container .loading-content .mud-progress-circular,
    .logs-container .loading-content .light-spinner {
        color: #60a5fa !important; /* Lighter blue for dark theme */
    }
    
    .logs-container .loading-content .mud-progress-circular svg,
    .logs-container .loading-content .light-spinner svg {
        color: #60a5fa !important;
    }
    
    .logs-container .loading-content .mud-progress-circular svg circle,
    .logs-container .loading-content .light-spinner svg circle {
        stroke: #60a5fa !important;
    }
    
    .logs-container .loading-content .mud-typography,
    .logs-container .loading-content .light-text {
        color: #e2e8f0 !important;
    }
    
    .logs-container .loading-content::before {
        background: linear-gradient(45deg, #1e40af, #3730a3);
        opacity: 0.2;
    }
    
    .logs-container .loading-content {
        --mud-palette-primary: #60a5fa;
        --mud-palette-primary-rgb: 96, 165, 250;
    }
}

/* Specific override for MudBlazor dark theme class */
.mud-theme-dark .logs-container .loading-overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)) !important;
}

.mud-theme-dark .logs-container .loading-content {
    background: #1e293b !important;
    border-color: #475569 !important;
}

.mud-theme-dark .logs-container .loading-content .mud-progress-circular,
.mud-theme-dark .logs-container .loading-content .light-spinner {
    color: #60a5fa !important;
}

.mud-theme-dark .logs-container .loading-content .mud-progress-circular svg,
.mud-theme-dark .logs-container .loading-content .light-spinner svg {
    color: #60a5fa !important;
}

.mud-theme-dark .logs-container .loading-content .mud-progress-circular svg circle,
.mud-theme-dark .logs-container .loading-content .light-spinner svg circle {
    stroke: #60a5fa !important;
}

.mud-theme-dark .logs-container .loading-content .mud-typography,
.mud-theme-dark .logs-container .loading-content .light-text {
    color: #e2e8f0 !important;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .logs-container .loading-content {
        padding: 2rem;
        margin: 1rem;
        min-width: 180px;
    }
}

.grid-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-top: 0.5rem;
    /* Use flex to take available height within the reporting-main-content container */
    height: 100%;
}

/* Telerik Grid specific styles */
.k-grid {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    /* Remove any max-height constraints */
    max-height: none !important;
}

.k-grid .k-grid-toolbar {
    flex-shrink: 0;
}

.k-grid .k-grid-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
}

.k-grid .k-grid-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Ensure content area scrolls properly */
    height: auto !important;
}

.k-grid .k-pager-wrap {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: white;
    border-top: 1px solid #dee2e6;
}

/* Additional grid content scrolling styles */
.k-grid .k-grid-content .k-table {
    min-height: 0;
}

/* Ensure proper scrollbar styling for grid content */
.k-grid .k-grid-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.k-grid .k-grid-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.k-grid .k-grid-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.k-grid .k-grid-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Prevent any body overflow when on reporting/logs pages */
.reporting-main-content {
    height: calc(100vh - 64px) !important;
    overflow: hidden !important;
    padding: 0.25rem 1rem 1rem 1rem; /* Minimal top padding, normal sides and bottom */
    display: flex;
    flex-direction: column;
}