/* ==========================================================================
   MatDash Inspired Theme for Saf3AI - V4.3 (Definitive Layout)
   ========================================================================== */

.dark-mode {
    /* Color Palette - Corrected Hierarchy */
    --bg-color-frame: #1A222F;        /* The dark background for the page frame */
    --bg-color-content: #1f2a3d;      /* The lighter background for content panels */
    --text-primary: #E1E1E1;
    --text-secondary: #AAB3BB;
    --border-color: #313e54;
    --accent-color-primary: #7B68EE;
    --accent-color-secondary: #46D9C5;
    --accent-color-danger: #FF6B8E;
    --font-family-sans-serif: 'Manrope', sans-serif;
    --border-radius: 12px;
    --sidebar-bg: #1A222F;
}

/* --- General Overrides --- */
.dark-mode body {
    background-color: var(--bg-color-frame); /* The entire page background is the dark frame */
    color: var(--text-primary);
    font-family: var(--font-family-sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 { color: var(--text-primary); font-weight: 600; }
.dark-mode .text-muted { color: var(--text-secondary) !important; }
.dark-mode .card { background-color: var(--bg-color-content); border: none; border-radius: var(--border-radius); }
.dark-mode .card-themed-background { background-color: #1A222F; background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0); background-size: 40px 40px;  }
.dark-mode .card-header { border-bottom-color: var(--border-color); }

input, textarea, select {
    background-color: transparent !important;
}

/* --- CORRECTED LAYOUT & HEADER/SIDEBAR --- */
.dark-mode .sidebar {
    background-color: transparent; /* Makes sidebar blend into the body's dark frame */
    border-right: none;
    position: sticky;
    top: 20px;
}

.dark-mode .top-header {
    background-color: transparent; /* Makes header blend into the body's dark frame */
    border-bottom: none;
    padding: 15px 30px;
    height: 70px;
}

/* This is the main content area that "pops out" */
.dark-mode .content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* The inner wrappers should be transparent */
.dark-mode .main-content-wrapper,
.dark-mode .main-content {
    border-radius: var(--border-radius); /* FIX: Rounded corners on all sides */
    background-color: var(--bg-color-content); /* The lighter background color */
    padding: 20px;
    flex-grow: 1;
}

/* --- Navigation --- */
.dark-mode .sidebar-nav .nav-link { color: var(--text-secondary); }
.dark-mode .sidebar-nav .nav-link:hover { color: var(--text-primary); }
.dark-mode .sidebar-nav .nav-link.active { background-color: var(--accent-color-primary); color: white; box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3); border-radius: 50px; }
.dark-mode .sidebar-nav .nav-link.active .nav-icon,
.dark-mode .sidebar-nav .nav-link.active span { color: white; }

/* --- DASHBOARD FIXES --- */
.dark-mode .stat-card .title,
.dark-mode .recent-events-header h4,
.dark-mode .recent-events-header a,
.dark-mode .chart-card .dashboard-tabs .nav-link { color: var(--text-secondary); }
.dark-mode .stat-card .value,
.dark-mode .event-title { color: var(--text-primary); }
.dark-mode .event-item { border-bottom-color: var(--border-color); }
.dark-mode .dashboard-tabs .nav-tabs { border-bottom-color: var(--border-color); }
.dark-mode .dashboard-tabs .nav-link.active { color: var(--accent-color-primary); border-bottom-color: var(--accent-color-primary); background: none; }
.dark-mode .event-icon-container.severity-critical { background-color: var(--accent-color-danger); }
.dark-mode .event-icon-container.severity-high { background-color: var(--accent-color-primary); }
.dark-mode .event-icon-container.severity-medium { background-color: var(--accent-color-secondary); }


/* FIX 1: Themed hover color for events */
.dark-mode .event-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* FIX 2: Themed icons for severity events */
.dark-mode .event-icon-container.severity-critical { background-color: var(--accent-color-danger); }
.dark-mode .event-icon-container.severity-high { background-color: var(--accent-color-primary); }
.dark-mode .event-icon-container.severity-medium { background-color: var(--accent-color-secondary); }
.dark-mode .event-icon-container.severity-low { background-color: #FFA500; } /* Orange for low severity */
.dark-mode .event-icon-container.severity-info { background-color: #17a2b8; } /* Teal for info */

/* FIX: Override default badge colors to match the MatDash theme */
.dark-mode .badge-critical {
    background-color: var(--accent-color-danger) !important;
    color: white !important;
}

.dark-mode .badge-high {
    background-color: var(--accent-color-primary) !important;
    color: white !important;
}

.dark-mode .badge-medium {
    background-color: var(--accent-color-secondary) !important;
    color: #1A222F !important; /* Use a dark text for better contrast on the bright teal */
}

/* This targets the scrollable area in the recent events feed */
.dark-mode .recent-events-feed::-webkit-scrollbar {
    width: 8px;
}

/* Style for the track (the background of the scrollbar) */
.dark-mode .recent-events-feed::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Style for the thumb (the draggable part of the scrollbar) */
.dark-mode .recent-events-feed::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.dark-mode .recent-events-feed::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.dark-mode .sidebar-footer,
.dark-mode .sidebar-toggle {
    border-top-color: var(--border-color);
}

/* Hide the correct theme icon for toggle */
body:not(.dark-mode) #theme-toggle-btn .theme-icon-moon { display: none; }
.dark-mode #theme-toggle-btn .theme-icon-sun { display: none; }
.dark-mode #theme-toggle-btn .theme-icon-moon { display: inline-block; }

/* General styling for new Feather icons in the header */
.dark-mode .header-right-controls .header-icon-wrapper,
.dark-mode .header-right-controls .alerts-icon-wrapper,
.dark-mode .header-menu-toggle {
    color: var(--text-secondary);
}
.dark-mode .header-right-controls .feather,
.dark-mode .header-menu-toggle .feather {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* Specific styling for the user profile bubble */
.dark-mode .user-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #589bff 0%, #7B68EE 100%);
    color: white;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.dark-mode .user-bubble .feather-user {
    width: 20px;
    height: 20px;
}
.dark-mode .user-bubble .down-arrow {
    width: 14px;
    height: 14px;
    stroke-width: 3;
    transition: transform 0.2s ease-in-out;
}
.dark-mode .user-menu.show ~ .user-bubble .down-arrow {
    transform: rotate(180deg);
}

/* Positioning for the notification dot */
.dark-mode .alerts-icon-wrapper .badge-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--accent-color-danger);
    border: 2px solid var(--sidebar-bg);
}


/* Styling for the user profile bubble with silhouette icon */
.dark-mode .user-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Space between icon and arrow */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* Use a gradient from your theme for the background */
    background-image: linear-gradient(135deg, var(--accent-color-primary) 0%, var(--accent-color-secondary) 100%);
    color: white; /* Color of the icon and arrow */
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
}
.dark-mode .user-bubble:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}
.dark-mode .user-bubble .feather-user { /* Style for the silhouette icon */
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transform: translateX(2px); /* Slight adjustment for visual balance with arrow */
}
.dark-mode .user-bubble .down-arrow {
    width: 14px;
    height: 14px;
    stroke-width: 3;
    transition: transform 0.2s ease-in-out;
}
.dark-mode .user-menu.show ~ .user-bubble .down-arrow {
    transform: rotate(180deg);
}

/* Ensure the user menu dropdown matches the theme (from previous update, repeated for clarity) */
.dark-mode .user-menu {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border-radius: var(--border-radius);
}
.dark-mode .user-menu a {
    color: var(--text-primary);
}
.dark-mode .user-menu a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}
.dark-mode .user-menu-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* ==========================================================================
   V5.2 Additions: Themed Log Details Panel
   ========================================================================== */

/* Main panel and overlay */
.dark-mode .log-details-panel-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}
.dark-mode .log-details-panel {
    background-color: var(--bg-color-frame); /* Use the darkest background for the panel shell */
    box-shadow: -8px 0 25px rgba(0,0,0,0.3);
}
.dark-mode .panel-header {
    background-color: var(--bg-color-content); /* Lighter header to match content */
    border-bottom: 1px solid var(--border-color);
}
.dark-mode .panel-header .panel-title {
    color: var(--text-primary);
}
.dark-mode .panel-body {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: var(--border-color) transparent;
}

/* Themed scrollbar for the panel body */
.dark-mode .panel-body::-webkit-scrollbar {
    width: 8px;
}
.dark-mode .panel-body::-webkit-scrollbar-track {
    background: transparent;
}
.dark-mode .panel-body::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    border: 2px solid var(--bg-color-frame);
}
.dark-mode .panel-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}


/* Styling for sections within the panel */
.dark-mode .panel-section {
    background-color: var(--bg-color-content);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}
.dark-mode .panel-section h4 {
    margin: -1.25rem -1.25rem 1rem -1.25rem; /* Make title span the top */
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
}

/* Styling for nested cards (like compliance violations) */
.dark-mode .framework-card,
.dark-mode .multimodal-card {
    background-color: var(--bg-color-frame);
    border-color: var(--border-color);
}
.dark-mode .framework-header,
.dark-mode .multimodal-header {
    background-color: #212B3B; /* A slightly different dark shade for depth */
    border-bottom-color: var(--border-color);
}

/* Ensure code blocks are themed */
.dark-mode .payload-container pre {
    background-color: #1E1E1E;
    color: #d4d4d4;
}

.dark-mode .panel-section .detail-item p {
    color: var(--text-primary);
}

.dark-mode .panel-section .detail-item strong {
    color: var(--text-secondary);
}

/* FIX: Make text and icon for MITRE ATLAS section visible */
.dark-mode .atlas-header,
.dark-mode .atlas-header .atlas-icon {
    color: var(--text-secondary);
}

.dark-mode .atlas-body a {
    color: var(--accent-color-primary);
}

/* ==========================================================================
   V5.6 Additions: Themed Alert Dropdown
   ========================================================================== */

/* Main dropdown container */
.dark-mode .alerts-dropdown {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-radius: var(--border-radius);
}

/* Header of the dropdown */
.dark-mode .alerts-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.dark-mode .alerts-header a {
    color: var(--accent-color-primary);
}

/* Individual alert items in the list */
.dark-mode .alerts-list li a {
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}
.dark-mode .alerts-list li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}
.dark-mode .alert-dropdown-message {
    color: var(--text-primary);
}

/* "All caught up!" message */
.dark-mode .no-alerts {
    color: var(--text-secondary);
}
.dark-mode .no-alerts .fa-check-circle {
    color: var(--accent-color-secondary) !important; /* Themed success color */
}

/* ==========================================================================
   V5.7 Additions: Themed GenAI Agent Panel
   ========================================================================== */

/* Main panel container */
.dark-mode .chat-panel {
    background-color: var(--bg-color-frame);
    box-shadow: -8px 0 25px rgba(0,0,0,0.3);
}

/* Header of the panel */
.dark-mode .chat-panel-header {
    background-color: var(--bg-color-content);
    border-bottom: 1px solid var(--border-color);
}
.dark-mode .chat-panel-header h3 {
    color: var(--text-primary);
}

/* Chat history area and messages */
.dark-mode .chat-history {
    background-color: var(--bg-color-frame);
}
.dark-mode .chat-message.agent {
    background-color: var(--bg-color-content);
    color: var(--text-primary);
}
.dark-mode .chat-message.user {
    background-color: var(--accent-color-primary);
    color: white;
}

/* Suggestion buttons */
.dark-mode .chat-suggestions {
    border-top: 1px solid var(--border-color);
}
.dark-mode .suggestion-btn {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.dark-mode .suggestion-btn:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}


/* Input area at the bottom */
.dark-mode .chat-input {
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-color-content);
}
.dark-mode #user-question-input {
    background-color: var(--bg-color-frame) !important;
}
.dark-mode #send-question-btn {
    background-color: var(--accent-color-primary);
    border-color: var(--accent-color-primary);
}


/* ==========================================================================
   V5.8 Additions: Alerts Page Dark Theme
   ========================================================================== */
.dark-mode .severity-title {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Themed left border for severity titles */
.dark-mode .severity-title.severity-critical { border-left-color: var(--accent-color-danger); }
.dark-mode .severity-title.severity-high { border-left-color: var(--accent-color-danger); } /* High is also danger in this theme */
.dark-mode .severity-title.severity-medium { border-left-color: var(--accent-color-secondary); }
.dark-mode .severity-title.severity-low { border-left-color: var(--accent-color-primary); }
.dark-mode .severity-title.severity-informational { border-left-color: var(--text-secondary); }

/* CHANGE: This block uses the proper color variables for consistency */
.dark-mode .alert-card {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Specific styling for unread alerts */
.dark-mode .alert-card.unread {
    background-color: rgba(123, 104, 238, 0.08); /* A subtle purple glow from accent-color-primary */
    border-left: 4px solid var(--accent-color-primary);
}

.dark-mode .alert-card.unread:hover {
    background-color: rgba(123, 104, 238, 0.12);
}

.dark-mode .alert-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .alert-content p {
    color: var(--text-primary);
}

.dark-mode .alert-timestamp,
.dark-mode .alert-icon-container {
    color: var(--text-secondary);
}

/* Unread alert icon should match the accent color */
.dark-mode .alert-card.unread .alert-icon-container {
    color: var(--accent-color-primary);
}

.dark-mode .no-alerts-message {
    background-color: var(--bg-color-content);
    color: var(--text-secondary);
}

.dark-mode .no-alerts-message h3 {
    color: var(--text-primary);
}

.dark-mode .no-alerts-message .fa-check-circle {
    color: var(--accent-color-secondary) !important;
}

/* Button style for "Mark All as Read" */
.dark-mode .alert-actions .btn-primary {
    background-color: var(--accent-color-primary);
    border-color: var(--accent-color-primary);
    color: white;
}

.dark-mode .alert-actions .btn-primary:hover {
    background-color: #5d48d0;
    border-color: #5d48d0;
}

.dark-mode .filter-card,
.dark-mode .alerts-dashboard-container .stat-card {
    /* Apply the same darker, tiled background as the main dashboard cards */
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dark-mode .filter-card label {
    color: var(--text-secondary);
}

.dark-mode .filter-card .form-select {
    background-color: var(--bg-color-content) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AAB3BB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}



.dark-mode .alerts-dashboard-container .chart-card {
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dark-mode .alerts-dashboard-container .card-header {
    background-color: transparent;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .alerts-dashboard-container .chart-card h5 {
    color: var(--text-primary);
}

/* Ensure the chart's axis labels and ticks match the dashboard theme */
.dark-mode .alerts-dashboard-container .chart-container canvas {
    color: var(--text-secondary);
}


/* ==========================================================================
   V5.13 Additions: Alerts Page Table Container & Header Styling
   ========================================================================== */

/* This styles the card that contains the table, giving it the dark, patterned background */
.dark-mode .alerts-dashboard-container .card {
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* This styles the header of the card (e.g., "Alerts (50 total)") */
.dark-mode .alerts-dashboard-container .card-header {
    background-color: transparent;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* The table's background is set to transparent so the parent card's background shows through */
.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: #212b3b;
    --bs-table-hover-bg: #293850;
    --bs-table-border-color: var(--border-color);
}

.dark-mode .table th {
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.dark-mode .alerts-dashboard-container .card-header .card-title {
    padding-left: 10px; /* Add some padding to prevent the title from looking squeezed */
    padding-right: 10px;
}

.dark-mode .table-hover>tbody>tr:hover>td, 
.dark-mode .table-hover>tbody>tr:hover>th {
    background-color: var(--bs-table-hover-bg);
    color: var(--text-primary) !important; /* Ensure text is readable on hover */
}

/* Style for icons to match the new theme */
.dark-mode .table .icon-btn {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.dark-mode .table .icon-btn:hover {
    color: var(--accent-color-primary); /* Use a primary accent color on hover */
}

.dark-mode .table .icon-btn .feather {
    width: 18px;
    height: 18px;
}

.dark-mode .alerts-dashboard-container .card-header .card-title {
    padding: 0.5rem 0.5rem;
}

.dark-mode .pagination .page-item .page-link {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--accent-color-primary);
    border-color: var(--accent-color-primary);
    color: white;
}

.dark-mode .pagination .page-item:not(.active) .page-link:hover {
    background-color: #293850;
    color: var(--text-primary);
    border-color: #293850;
}

.dark-mode .pagination .page-item.disabled .page-link {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
    color: var(--text-secondary);
    opacity: 0.5;
}

/* ==========================================================================
   V5.16 Additions: Reports Page Dark Theme
   ========================================================================== */

/* Main reports container */
.dark-mode .reports-container {
    background-color: var(--bg-color-content);
}

/* Filter card styling */
.dark-mode .filter-card {
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dark-mode .filter-card h3 {
    color: var(--text-primary);
}

.dark-mode .filter-group label {
    color: var(--text-secondary);
}

.dark-mode .filter-group input,
.dark-mode .filter-group select {
    background-color: var(--bg-color-content) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Reports tabs styling */
.dark-mode .report-tabs .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .report-tabs .nav-tabs {
    border-bottom: none;
}

.dark-mode .report-tabs .nav-link {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background-color: var(--bg-color-frame);
}

.dark-mode .report-tabs .nav-link:hover:not(.active) {
    color: var(--accent-color-primary);
    background-color: var(--bg-color-content);
    border-color: var(--accent-color-primary) var(--accent-color-primary) var(--bg-color-content);
}

.dark-mode .report-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--bg-color-content);
    border-color: var(--border-color) var(--border-color) var(--bg-color-content);
}

.dark-mode .report-tabs .card-body {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
}

/* Overview stats cards */
.dark-mode .stats-grid .stat-card {
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dark-mode .stat-card .title {
    color: var(--text-secondary);
}

.dark-mode .stat-card .value {
    color: var(--text-primary);
}


/* Report charts styling */
.dark-mode .charts-grid-reports .chart-card {
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dark-mode .charts-grid-reports .chart-card h5 {
    color: var(--text-primary);
}


/* ==========================================================================
   V5.17 Additions: Reports Page Table Styling
   ========================================================================== */

/* The table wrapper and card body */
.dark-mode .report-table-container {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
}

/* Base table styles */
.dark-mode .report-table {
    --bs-table-bg: transparent; /* Makes the table background transparent to show the container's bg */
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: #212b3b;
    --bs-table-hover-bg: #293850;
    --bs-table-border-color: var(--border-color);
}

/* Table header */
.dark-mode .report-table th {
    background-color: transparent;
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

/* Table cells */
.dark-mode .report-table td {
    color: var(--text-primary);
}

/* Hover and striped rows */
.dark-mode .report-table tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
    color: var(--text-primary);
}

/* Badge colors to ensure readability on the dark background */
.dark-mode .report-table .badge-critical { background-color: var(--accent-color-danger) !important; color: white !important; }
.dark-mode .report-table .badge-high { background-color: var(--accent-color-primary) !important; color: white !important; }
.dark-mode .report-table .badge-medium { background-color: var(--accent-color-secondary) !important; color: white !important; }
.dark-mode .report-table .badge-low { background-color: #FFA500 !important; color: white !important; }
.dark-mode .report-table .badge-informational { background-color: #17a2b8 !important; color: white !important; }

/* Action icons (feather icons) */
.dark-mode .report-table .icon-btn svg {
    stroke: var(--text-secondary);
    transition: stroke 0.2s ease;
}

.dark-mode .report-table .icon-btn:hover svg {
    stroke: var(--accent-color-primary);
}

/* Reduce the opacity of the row border for a more subtle look */
.dark-mode .report-table th,
.dark-mode .report-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* This is the core fix. We use a highly specific selector to override the striped background
   and apply the highlight color correctly. */
.dark-mode .report-table.table-striped > tbody > tr > td.cell-match-found,
.dark-mode .report-table.table-striped > tbody > tr > td.cell-mismatch {
    background-color: rgba(255, 107, 142, 0.1) !important;
    color: var(--text-primary) !important;
}

/* This fixes the text color when hovering over a row with a match/mismatch */
.dark-mode .report-table tbody tr:hover td.cell-match-found,
.dark-mode .report-table tbody tr:hover td.cell-mismatch {
    background-color: var(--bs-table-hover-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: transparent;
}

.dark-mode .table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: transparent;
}


/* ==========================================================================
   V5.29 Additions: Themed Log Details Panel Heading Fix
   ========================================================================== */

/* Fix the color of all h4 headings within the panel sections */
.dark-mode .panel-section h4 {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Fix the color of icons within the panel headings */
.dark-mode .panel-section h4 .fas {
    color: var(--text-primary);
}

/* Ensure the detail-item text and labels are correctly colored */
.dark-mode .panel-section .detail-item strong {
    color: var(--text-secondary);
}

.dark-mode .panel-section .detail-item p {
    color: var(--text-primary);
}

/* ==========================================================================
   V5.30 Additions: Manage Custom Rules Table Styling
   ========================================================================== */

/* Style the main form card container */
.dark-mode .custom-rules-manager .card.shadow-sm.mb-4 {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Style the card header to match theme */
.dark-mode .custom-rules-manager .card-header.bg-primary {
    background-color: var(--accent-color-primary) !important;
    color: white !important;
    border-bottom: 1px solid var(--border-color);
}

/* Style the form labels */
.dark-mode .custom-rules-manager .form-label {
    color: var(--text-secondary);
}

/* Style all form controls (input, select, textarea) */
.dark-mode .custom-rules-manager .form-control,
.dark-mode .custom-rules-manager .form-select {
    background-color: var(--bg-color-frame) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Change the dropdown arrow color for the select elements */
.dark-mode .custom-rules-manager .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AAB3BB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Style the small helper text below inputs */
.dark-mode .custom-rules-manager .form-text.text-muted {
    color: var(--text-secondary) !important;
}

/* Style the button to match the theme */
.dark-mode .custom-rules-manager .btn-success {
    background-color: var(--accent-color-secondary);
    color: var(--bg-color-frame); /* Use a dark text color for better contrast on this button */
    border-color: var(--accent-color-secondary);
}

.dark-mode .custom-rules-manager .btn-success:hover {
    background-color: #43c1b1;
    border-color: #43c1b1;
}

/* --- FIX FOR SELECT2 MULTI-SELECT FUNCTIONALITY AND STYLING --- */
.dark-mode .custom-rules-manager .select2-container .select2-selection--multiple {
    background-color: var(--bg-color-frame) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode .custom-rules-manager .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-color-content) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode .custom-rules-manager .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-secondary) !important;
}

/* --- FIX FOR TABLE BELOW THE FORM --- */
.dark-mode .custom-rules-manager .card.shadow-sm:not(.mb-4) {
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* This styles the header of the table card */
.dark-mode .custom-rules-manager .card-header.bg-secondary {
    background-color: transparent !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* Table styling for backgrounds, text, and borders */
.dark-mode .custom-rules-manager .custom-rules-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: #212b3b;
    --bs-table-hover-bg: #293850;
    --bs-table-border-color: var(--border-color);
}

/* Table header text color and border */
.dark-mode .custom-rules-manager .custom-rules-table th {
    background-color: transparent;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* Table row and cell styling */
.dark-mode .custom-rules-manager .custom-rules-table td {
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Table hover effect */
.dark-mode .custom-rules-manager .custom-rules-table tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
    color: var(--text-primary);
}

/* Button styling for table actions */
.dark-mode .custom-rules-manager .btn-info {
    background-color: var(--accent-color-primary) !important;
    color: white !important;
    border-color: var(--accent-color-primary) !important;
}

.dark-mode .custom-rules-manager .btn-danger {
    background-color: var(--accent-color-danger) !important;
    color: white !important;
    border-color: var(--accent-color-danger) !important;
}

/* Badge colors */
.dark-mode .custom-rules-manager .badge-critical { background-color: var(--accent-color-danger) !important; }
.dark-mode .custom-rules-manager .badge-high { background-color: var(--accent-color-primary) !important; }
.dark-mode .custom-rules-manager .badge-medium { background-color: var(--accent-color-secondary) !important; }
.dark-mode .custom-rules-manager .badge-low { background-color: #FFA500 !important; color: white !important; }
.dark-mode .custom-rules-manager .badge-informational { background-color: #17a2b8 !important; color: white !important; }

.dark-mode .custom-rules-manager .truncated-text {
    color: var(--text-secondary);
}

/* ==========================================================================
   V5.36 Additions: Select2 Dropdown Styling
   ========================================================================== */

/* The main dropdown container */
/* The main dropdown container */
/* The main dropdown container */
.dark-mode .select2-container--bootstrap5 .select2-dropdown {
    background-color: var(--bg-color-content) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* The search input inside the dropdown */
.dark-mode .select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-color-frame) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Individual options in the dropdown list */
.dark-mode .select2-container--bootstrap5 .select2-results__option {
    background-color: var(--bg-color-content) !important;
    color: var(--text-primary) !important;
}

/* Highlight color for hovered options */
.dark-mode .select2-container--bootstrap5 .select2-results__option--highlighted[aria-selected] {
    background-color: black !important;
    color: white !important;
}

.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: black !important;
}

.dark-mode .select2-container--default .select2-results__option--selected {
    background-color: var(--bg-color-content) !important;
}

.dark-mode .select2-results__option .select2-results__option--selectable
{
    background-color: var(--bg-color-content) !important;
}

.dark-mode .select2-dropdown {
    background-color: black !important;
}

.dark-mode .select2-container .select2-search--inline .select2-search__field {
    height:28px;
    padding-top:3px;
}

/* ==========================================================================
   V5.38 Additions: DataTables Pagination Styling
   ========================================================================== */

.dark-mode .dataTables_wrapper .pagination .paginate_button {
    background-color: var(--bg-color-content) !important;
    border-color: var(--border-color) !important;
    /* color: var(--text-primary) !important; */
}

.dark-mode .dataTables_wrapper .pagination .paginate_button.current {
    background-color: var(--accent-color-primary) !important;
    border-color: var(--accent-color-primary) !important;
    /* color: white !important; */
}

.dark-mode .dataTables_wrapper .pagination .paginate_button:not(.current):hover {
    background-color: var(--bs-table-hover-bg) !important;
    /* color: var(--text-primary) !important; */
    border-color: var(--bs-table-hover-bg) !important;
}

.dark-mode .dataTables_wrapper .pagination .paginate_button.disabled {
    background-color: var(--bg-color-content) !important;
    /* color: var(--text-secondary) !important; */
    border-color: var(--border-color) !important;
    opacity: 0.6;
}


.dark-mode div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
    color: inherit !important;
}


/* ==========================================================================
   V5.39 Additions: Compliance Page Styling
   ========================================================================== */

.dark-mode .accordion-item {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
}

.dark-mode .accordion-header {
    background-color: var(--bg-color-content);
}

.dark-mode .accordion-button {
    background-color: transparent !important;
    color: var(--text-primary);
}

.dark-mode .accordion-button:not(.collapsed) {
    color: var(--text-primary);
    background-color: var(--bg-color-content);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.dark-mode .accordion-button:focus {
    border-color: var(--accent-color-primary);
    box-shadow: 0 0 0 0.25rem rgba(123, 104, 238, 0.25);
}

.dark-mode .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode .accordion-body {
    background-color: var(--bg-color-frame);
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
}

.dark-mode .list-group-item {
    background-color: var(--bg-color-frame);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .control-summary strong {
    color: var(--text-primary);
}

.dark-mode .control-summary small {
    color: var(--text-secondary);
}

.dark-mode .progress {
    background-color: var(--border-color);
}

.dark-mode .badge.bg-danger {
    background-color: var(--accent-color-danger) !important;
    color: white !important;
}

.dark-mode .control-status-icon.text-danger {
    color: var(--accent-color-danger) !important;
}
.dark-mode .control-status-icon.text-success {
    color: var(--accent-color-secondary) !important;
}

.dark-mode .control-summary .feather {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.dark-mode .control-actions .btn.btn-danger {
    background-color: var(--accent-color-danger) !important;
    border-color: var(--accent-color-danger) !important;
    color: white !important;
}

.dark-mode .control-actions .btn.btn-outline-secondary {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .control-actions .btn.btn-outline-secondary:hover {
    background-color: rgba(123, 104, 238, 0.1) !important;
    border-color: var(--accent-color-primary) !important;
    color: var(--accent-color-primary) !important;
}

li.custom-li-compliance.list-group-item {
    background-color: var(--bg-color-content);
}

/* ==========================================================================
   V5.42 Additions: View Compliance Control Page Styling
   ========================================================================== */

.dark-mode .compliance-control-details .card {
    background-color: var(--bg-color-content);
    border: none;
}
.dark-mode .compliance-control-details .card-header.bg-primary {
    background-color: var(--accent-color-primary) !important;
    color: white !important;
    border-bottom: 1px solid var(--border-color);
}
.dark-mode .compliance-control-details .card-header.bg-secondary {
    background-color: transparent !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.dark-mode .compliance-control-details p {
    color: var(--text-primary);
}
.dark-mode .compliance-control-details strong {
    color: var(--text-secondary);
}
.dark-mode .compliance-control-details .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: #212b3b;
    --bs-table-hover-bg: #293850;
    --bs-table-border-color: var(--border-color);
}
.dark-mode .compliance-control-details .table th {
    background-color: transparent;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.dark-mode .compliance-control-details .table td {
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-mode .compliance-control-details .table tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
    color: var(--text-primary);
}
.dark-mode .compliance-control-details .badge.bg-success {
    background-color: var(--accent-color-secondary) !important;
    color: white !important;
}
.dark-mode .compliance-control-details .badge.bg-danger {
    background-color: var(--accent-color-danger) !important;
    color: white !important;
}
/* Pagination Styling */
.dark-mode .compliance-control-details .pagination .page-link {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.dark-mode .compliance-control-details .pagination .page-item.active .page-link {
    background-color: var(--accent-color-primary);
    border-color: var(--accent-color-primary);
    color: white;
}
.dark-mode .compliance-control-details .pagination .page-item.disabled .page-link {
    background-color: var(--bg-color-content);
    color: var(--text-secondary);
    border-color: var(--border-color);
    opacity: 0.5;
}

/* ==========================================================================
   V5.48 Additions: Themed Model Evaluation Pages
   ========================================================================== */

/* --- Project List Page (evaluation_projects.html) --- */
.dark-mode .d-flex .btn-primary {
    background-color: var(--accent-color-primary);
    border-color: var(--accent-color-primary);
}

.dark-mode .table .btn-info {
    background-color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}

.dark-mode .badge.bg-success-subtle {
    background-color: rgba(70, 217, 197, 0.15) !important;
    color: var(--accent-color-secondary) !important;
}

.dark-mode .badge.bg-warning-subtle {
    background-color: rgba(255, 165, 0, 0.15) !important;
    color: #FFA500 !important;
}

/* --- Configuration Page (model_evaluation.html) --- */
.dark-mode .model-evaluation-page .config-card,
.dark-mode .model-evaluation-page .guidance-card {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
}
.dark-mode .model-evaluation-page .config-card .card-header {
    background-color: transparent;
}

.dark-mode .model-evaluation-page .form-label-custom {
    color: var(--text-secondary);
}
.dark-mode .model-evaluation-page .guidance-header {
    color: var(--accent-color-primary);
    border-bottom-color: var(--border-color);
}
.dark-mode .guidance-section::before {
    background-color: var(--accent-color-secondary);
}

/* --- Report Arena Page (model_evaluation_arena.html) --- */
.dark-mode .model-evaluation-page .results-card {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
}
.dark-mode .results-tabs {
    border-bottom-color: var(--border-color);
}
.dark-mode .results-tabs .nav-link {
    color: var(--text-secondary);
}
.dark-mode .results-tabs .nav-link.active {
    color: var(--accent-color-primary);
    border-color: var(--border-color) var(--border-color) var(--bg-color-content);
    background-color: var(--bg-color-content);
}
.dark-mode .model-card {
    border-color: var(--border-color);
}
.dark-mode .model-card-winner {
    border-color: var(--accent-color-secondary);
    box-shadow: 0 10px 20px rgba(70, 217, 197, 0.1);
}
.dark-mode .model-card-winner .card-header {
    background: linear-gradient(180deg, var(--accent-color-secondary) 0%, #35a292 100%);
}
.dark-mode .recommended-badge {
    background-color: rgba(26, 34, 47, 0.7) !important;
}
.dark-mode .list-group-item {
    background-color:#e9f5ed;
    border-bottom: 1px solid var(--border-color);
}
.dark-mode .model-card-winner .list-group-item {
    background-color:#e9f5ed;
}
.dark-mode .progress-bar-container {
    background-color: var(--border-color);
}
.dark-mode .progress-bar-fill {
    background-color: var(--accent-color-primary);
}
.dark-mode .prompt-analysis-card,
.dark-mode .response-card {
    border-color: var(--border-color);
}
.dark-mode .response-card-header {
    background-color: var(--bg-color-frame);
}

.dark-mode .model_eval_card
{
    background-color: var(--bg-color-frame);
}

.dark-mode .model_eval_card .card-header.bg-primary {
    background-color: var(--accent-color-primary) !important;
    color: white !important;
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .results-card .card-body
{
    background-color: var(--bg-color-frame);
}

.dark-mode .card-header:not(.bg-primary):not(.bg-secondary) {
    background-color: var(--accent-color-primary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

.dark-mode .select2-container--bootstrap-5 .select2-selection
{
    background-color: var(--bg-color-frame) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: var(--bg-color-content) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode .select2-container--bootstrap-5 .select2-dropdown {
    color: var(--text-primary) !important;
}


/* ==========================================================================
   V5.49 Additions: Themed Prompt Analysis Tab
   ========================================================================== */

/* Main card for each prompt */
.dark-mode .prompt-analysis-card {
    background-color: var(--bg-color-frame);
    border-color: var(--border-color);
}

.dark-mode .prompt-analysis-card .card-header {
    background-color: var(--bg-color-content);
    font-weight: 600;
}

/* Box for the AI judge's overall reasoning */
.dark-mode .overall-reasoning-box {
    background-color: rgba(26, 34, 47, 0.7) !important; /* A darker, transparent shade */
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* Individual response cards for each model */
.dark-mode .response-card {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
}

.dark-mode .response-card-header {
    background-color: var(--bg-color-frame);
}

.dark-mode .response-model-name {
    color: var(--accent-color-primary);
}

.dark-mode .winner-btn {
    color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
}

.dark-mode .winner-btn:hover {
    background-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}

/* Styling for the card that is selected as the winner */
.dark-mode .response-card.is-winner {
    border-color: var(--accent-color-secondary);
    box-shadow: 0 0 15px rgba(70, 217, 197, 0.15);
}
.dark-mode .response-card.is-winner .winner-btn {
    background-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}

/* Footer with evaluation scores */
.dark-mode .response-card-footer {
    background-color: var(--bg-color-frame);
    border-top-color: var(--border-color);
}

.dark-mode .evaluation-scores .score-item {
    color: var(--text-secondary);
}

.dark-mode .model-evaluation-page .response-card-footer 
{
    background-color: var(--bg-color-frame);
}

.dark-mode .response-card-header
{
    background-color: #3f7381 !important;;
}

.dark-mode .response-card-header h6
{
    color: white;
}

.dark-mode .model-evaluation-page .prompt-analysis-card 
{
    border-color: var(--border-color);
}

.dark-mode .model-evaluation-page .results-tabs .nav-link.active
{
    color: white;
    border-color: var(--border-color);
}

.dark-mode .model-evaluation-page .results-tabs {
    border-color: var(--border-color);
}

/* Styling for the "Download PDF" button */
.dark-mode a#download-report-btn.btn-outline-primary {
    background-color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}

.dark-mode a#download-report-btn.btn-outline-primary:hover {
    background-color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}

/* Styling for the "Select as Best" button */
.dark-mode .response-card .winner-btn {
   background-color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}

.dark-mode .response-card .winner-btn:hover {
    background-color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}

/* Styling for the button when its card is the selected winner */
.dark-mode .response-card.is-winner .winner-btn {
    background-color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}


/* ==========================================================================
   V5.51 Additions: Themed Manage Agents Page
   ========================================================================== */

/* This targets the main content area of the page if needed */

/* Style the main form card container */
.dark-mode .card.shadow-sm.mb-4 {
    background-color: var(--bg-color-content);
    /* border: 1px solid var(--border-color); */
}

/* Style the card headers to match theme */
.dark-mode .card-header.bg-primary {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}
.dark-mode .card-header.bg-secondary {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}


/* Style form labels */
.dark-mode .form-label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Style form inputs and selects */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--bg-color-frame) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Change the dropdown arrow color for selects */
.dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AAB3BB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Style the 'Create Agent' button */
.dark-mode .btn-success {
    background-color: var(--accent-color-primary);
    border-color: var(--accent-color-primary);
    color: white;
}
.dark-mode .btn-success:hover {
    background-color: #6a5acd; /* Slightly lighter purple on hover */
    border-color: #6a5acd;
}

/* --- Table Styling --- */

/* Style the card that contains the table */
.dark-mode .card.shadow-sm:not(.mb-4) {
    background-color: var(--bg-color-frame);
    background-image: radial-gradient(circle at 1% 1%, rgba(255, 255, 255, 0.05) 1px, transparent 0), radial-gradient(circle at 99% 99%, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
    border: none;
}

/* Table background and text colors */
.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: #212b3b;
    --bs-table-hover-bg: #293850;
    --bs-table-border-color: var(--border-color);
}

/* Table header text color */
.dark-mode .table th {
    color: var(--text-secondary);
}

/* Action buttons in the table */
.dark-mode .table .btn-danger {
    background-color: var(--accent-color-danger) !important;
    border-color: var(--accent-color-danger) !important;
    color: white !important;
}

/* Themed badges for categories */
.dark-mode .badge.bg-info {
    background-color: var(--accent-color-secondary) !important;
    color: var(--bg-color-frame) !important;
}

.dark-mode .custom-agent-form
{
    background-color: var(--bg-color-frame);
    border: none;
}

.dark-mode .form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
    color: lightgrey;
}

.dark-mode .form-check-label
{
    color: lightgrey;
}

.dark-mode .custom-agent-manager .card-header.bg-primary {
    background-color: var(--accent-color-primary) !important;
    color: white !important;
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .select2-container--default .select2-selection--multiple
{
    background-color: transparent;
}

.dark-mode .table>:not(caption)>*>*
{
    color: var(--text-primary);
}

/* ==========================================================================
   V5.54 Additions: Themed Documentation Page
   ========================================================================== */

/* Main container for the docs page */
.dark-mode .docs-container {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
}

/* Headings within the docs */
.dark-mode .docs-section h2,
.dark-mode .docs-section h3,
.dark-mode .docs-section h4 {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Paragraph text */
.dark-mode .docs-container p {
    color: var(--text-secondary);
}

/* Inline code snippets `<code>` */
.dark-mode .docs-container code {
    background-color: var(--bg-color-frame);
    color: var(--accent-color-danger);
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 6px;
}

/* Pre-formatted code blocks `<pre>` */
.dark-mode .docs-container pre {
    background-color: var(--bg-color-frame);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

/* Ensure code within a <pre> block is not double-styled */
.dark-mode .docs-container pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* Horizontal rule */
.dark-mode .docs-container hr {
    border-top-color: var(--border-color);
    opacity: 0.5;
}


/* ==========================================================================
   V5.55 Additions: Themed Profile Page
   ========================================================================== */

.dark-mode .profile-page-content .card {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
}

.dark-mode .profile-page-content .card-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    font-weight: 600;
}

.dark-mode .profile-page-content .card-header .feather {
    width: 18px; /* Adjust icon size in header */
    height: 18px;
    margin-right: 0.5rem;
    vertical-align: text-bottom;
}

.dark-mode .profile-page-content .badge.bg-info {
    background-color: var(--accent-color-secondary) !important;
    color: var(--bg-color-frame) !important;
}

.dark-mode .profile-page-content strong {
    color: var(--text-secondary);
}

/* API Key Input Group */
.dark-mode .api-key-section .input-group .form-control {
    background-color: var(--bg-color-frame) !important;
}

.dark-mode .api-key-section .api-key-btn {
    background-color: var(--bg-color-content);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.dark-mode .api-key-section .api-key-btn:hover {
    background-color: #3c4a60; /* Slightly lighter hover */
    color: var(--text-primary);
}


/* ==========================================================================
   V5.56 Additions: Themed Change Password Page
   ========================================================================== */

/* Main form container */
.dark-mode .form-container {
    background-color: var(--bg-color-content);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    max-width: 500px; /* Give the form a max width */
}

/* Form labels */
.dark-mode .form-container label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Form inputs */
.dark-mode .form-container input[type="password"] {
    background-color: var(--bg-color-frame);
    border-color: var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

/* "Update Password" button */
.dark-mode .form-container button[type="submit"] {
    background-color: var(--accent-color-primary);
    border-color: var(--accent-color-primary);
    color: white;
    width: 100%; /* Make the button full-width */
    padding: 0.75rem;
    margin-top: 1rem;
    font-weight: 600;
}

.dark-mode .custom-add-channel-btn
{
    background-color: var(--accent-color-secondary);
    border-color: var(--accent-color-secondary);
    color: var(--bg-color-frame);
}


/* ==========================================================================
   V5.57 Additions: Sticky Header Fix
   ========================================================================== */

.dark-mode .content-wrapper {
    /* This ensures the wrapper is a stacking context for the sticky header */
    position: relative;
}

.dark-mode .top-header {
    position: sticky;
    top: 0;
    z-index: 1020; /* A high z-index to keep it above other content */
    background-color: var(--sidebar-bg); /* Explicitly set background for when content scrolls under it */
}


/* ==========================================================================
   V5.58 Additions: Themed Login Page
   ========================================================================== */

.dark-mode .auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.dark-mode .login-container-split {
    display: grid;
    grid-template-columns: 750px 1fr; /* Fixed width for form, rest for welcome */
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color-frame);
}

/* Left Panel (Form) */
.dark-mode .login-left-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.dark-mode .login-form-wrapper {
    width: 100%;
    max-width: 350px;
}
.dark-mode .login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 2rem;
}
.dark-mode .login-logo .feather {
    color: var(--accent-color-primary);
}
.dark-mode .login-title { font-size: 1.75rem; }
.dark-mode .login-subtitle { color: var(--text-secondary); margin-bottom: 2rem; }
.dark-mode .form-group label { margin-bottom: 0.5rem; }
.dark-mode .input-icon-wrapper { position: relative; }
.dark-mode .input-icon-wrapper .feather {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    width: 18px;
}
.dark-mode .input-icon-wrapper input {
    padding-left: 45px;
    background-color: var(--bg-color-frame);
    border: 1px solid var(--border-color);
}
.dark-mode .btn-login {
    width: 100%;
    background-image: linear-gradient(to right, #7B68EE, #589bff);
    border: none;
    font-weight: 600;
    padding: 0.75rem;
    margin-top: 1rem;
}
.dark-mode .login-footer-text {
    text-align: center;
    margin-top: 2rem;
    color: var(--text-secondary);
}
.dark-mode .login-footer-text a {
    color: var(--accent-color-primary);
    font-weight: 600;
    text-decoration: none;
}

/* Right Panel (Welcome Message) */
.dark-mode .login-right-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background-color: #1f2a3d; /* The specific dark blue from the screenshot */
    position: relative;
    overflow: hidden;
}
/* Subtle gradient glow effect */
.dark-mode .login-right-panel::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -20%;
    width: 60%;
    padding-bottom: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 104, 238, 0.1), transparent 70%);
}
.dark-mode .welcome-content {
    max-width: 400px;
}
.dark-mode .welcome-content h2 { font-size: 2rem; }
.dark-mode .welcome-content p { color: var(--text-secondary); }
.dark-mode .btn-learn-more  {
    background-color: transparent;
    border: 1px solid var(--accent-color-primary);
    color: var(--accent-color-primary);
}

.dark-mode .btn-learn-more:hover {
    background-color: var(--accent-color-primary);
    color: var(--bg-color-frame);
}

.dark-mode label {
    color: var(--text-primary);
}


/* ==========================================================================
   V5.59 Additions: Themed Registration Page
   ========================================================================== */

/* This makes sure the form wrapper on the registration page has enough space */
.dark-mode .login-left-panel .login-form-wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Ensure the flash messages have a themed look */
.dark-mode .flash-messages .alert {

    color: #ffffff;
    background-color: rgb(209, 231, 221, 0.1);
    border-color: #badbcc;
    border-radius: 8px;
}

/* ==========================================================================
   V5.63 Additions: Dashboard Overhaul Components
   ========================================================================== */

/* Styling for the trend indicators in stat cards */
.dark-mode .trend-indicator {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
}
.dark-mode .trend-indicator.trend-up {
    color: var(--accent-color-secondary); /* Cool Teal for positive trends */
}
.dark-mode .trend-indicator.trend-down {
    color: var(--accent-color-danger); /* Bright Pink for negative trends */
}
.dark-mode .trend-indicator .feather {
    width: 20px;
    height: 20px;
    stroke-width: 3;
}


/* ==========================================================================
   V5.64 Additions: Themed Live Activity Feed
   ========================================================================== */

/* Main card header for the feed */
.dark-mode .card-header .nav-pills-sm .nav-link {
    background-color: var(--bg-color-content);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.dark-mode .card-header .nav-pills-sm .nav-link:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .card-header .nav-pills-sm .nav-link.active {
    background-color: var(--accent-color-primary);
    color: white;
    border-color: var(--accent-color-primary);
}

/* Individual items in the feed */
.dark-mode .activity-item {
    border-bottom-color: var(--border-color);
}

.dark-mode .activity-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .activity-title {
    color: var(--text-primary);
}

.dark-mode .activity-meta,
.dark-mode .activity-time {
    color: var(--text-secondary);
}

/* Icon severity colors - these reuse existing definitions which is efficient */
.dark-mode .activity-icon.severity-critical { background-color: var(--accent-color-danger); }
.dark-mode .activity-icon.severity-high { background-color: var(--accent-color-primary); }
.dark-mode .activity-icon.severity-medium { background-color: var(--accent-color-secondary); }
.dark-mode .activity-icon.severity-low { background-color: #FFA500; }
.dark-mode .activity-icon.severity-informational { background-color: #17a2b8; }


.dashboard-main-column, .dashboard-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0; /* This is the key fix */
}