/* Analytics Page Styles - Using Design System */

/* Container customization */
/* Using design system nav-btn for theme toggle - no custom styling needed */

/* Body and main layout with proper spacing */
body {
    margin: 0;
    padding: 0;
}

/* Theme toggle button positioning */
.theme-toggle {
    position: fixed;
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 1000;
}

/* Add spacing between main sections */
.card-section {
    margin-bottom: var(--spacing-6);
}

/* Add responsive spacing for theme toggle */
@media (max-width: 768px) {
    .theme-toggle {
        top: var(--spacing-3);
        right: var(--spacing-3);
    }
}

/* Main container and layout */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--container-padding);
    background: var(--color-background);
}

/* Header with theme toggle */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
}

.header-text {
    flex: 1;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Old theme toggle styles removed - using home page approach */

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .header-controls {
        align-self: flex-end;
    }
}

/* Dark Theme Overrides for Analytics Page */
html[ds-theme="dark"],
body[ds-theme="dark"],
[ds-theme="dark"] html,
[ds-theme="dark"] body {
    background-color: var(--color-background) !important;
    color: var(--color-text-primary) !important;
    min-height: 100vh;
}

html[ds-theme="dark"] .container,
[ds-theme="dark"] .container {
    background-color: var(--color-background);
}

[ds-theme="dark"] .card-section {
    background-color: var(--color-background);
}

[ds-theme="dark"] .card-section h2 {
    color: var(--color-white) !important;
}

[ds-theme="dark"] .card {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .card h3,
[ds-theme="dark"] .card h2,
[ds-theme="dark"] .card h1 {
    color: var(--color-text-primary) !important;
}

/* Card header styles removed - now using design system navigation */

[ds-theme="dark"] .form-input {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .form-input:focus {
    border-color: var(--color-primary-light) !important;
    box-shadow: var(--focus-ring) !important;
}

[ds-theme="dark"] .btn {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .btn:hover {
    background-color: var(--color-surface-secondary) !important;
}

[ds-theme="dark"] .btn-secondary {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .btn-outline {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .data-table {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .data-table th {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .data-table td {
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .data-table tbody tr:hover {
    background-color: var(--color-surface) !important;
}

/* Dark theme alternating row colors with proper contrast */
[ds-theme="dark"] .data-table tr:nth-child(even) {
    background-color: var(--color-surface) !important;
}

[ds-theme="dark"] .data-table tr:nth-child(odd) {
    background-color: var(--color-background-secondary) !important;
}

[ds-theme="dark"] .data-table tr:nth-child(even):hover {
    background-color: var(--color-surface-secondary) !important;
}

[ds-theme="dark"] .data-table tr:nth-child(odd):hover {
    background-color: var(--color-surface) !important;
}

[ds-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

[ds-theme="dark"] .modal-content {
    background-color: var(--color-background-secondary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .modal-header {
    border-color: var(--color-border) !important;
}

[ds-theme="dark"] .modal-footer {
    border-color: var(--color-border) !important;
}

[ds-theme="dark"] .tooltip-content {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .exclusion-status-compact {
    background-color: var(--color-surface) !important;
    color: var(--color-text-secondary) !important;
}

[ds-theme="dark"] .pagination button {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .pagination button:hover {
    background-color: var(--color-surface-secondary) !important;
}

[ds-theme="dark"] .pagination button.active {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
    color: var(--color-white) !important;
}

/* Additional text contrast fixes */
[ds-theme="dark"] label {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] p {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] span {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .form-group label {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .table-controls label {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .analytics-filters label {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .description-filters label {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .page-info {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .sort-arrow {
    color: var(--color-text-secondary) !important;
}

/* Amount styling for better contrast */
[ds-theme="dark"] .amount-positive {
    color: #22c55e !important; /* Brighter green for dark theme */
}

[ds-theme="dark"] .amount-negative {
    color: #ef4444 !important; /* Brighter red for dark theme */
}

[ds-theme="dark"] .state-completed {
    color: #22c55e !important;
}

[ds-theme="dark"] .state-failed {
    color: #ef4444 !important;
}

/* Chart section headers */
[ds-theme="dark"] .charts-grid h3 {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .description-chart-header h2 {
    color: var(--color-text-primary) !important;
}

/* Modal text */
[ds-theme="dark"] .modal-content p {
    color: var(--color-text-primary) !important;
}

[ds-theme="dark"] .modal-header h2 {
    color: var(--color-text-primary) !important;
}

/* Placeholder text */
[ds-theme="dark"] .form-input::placeholder {
    color: var(--color-text-tertiary) !important;
}

/* Option text in selects */
[ds-theme="dark"] option {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

/* Ensure proper border colors */
[ds-theme="dark"] * {
    border-color: var(--color-border);
}

/* Better text inheritance for cards */
[ds-theme="dark"] .card {
    color: var(--color-text-primary);
}

[ds-theme="dark"] .card-summary-title {
    color: var(--color-text-secondary);
}

[ds-theme="dark"] .card-summary-value {
    color: var(--color-text-primary);
}

/* Upload Section with Compact Exclusions */
.upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.exclusion-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.exclusion-status-compact {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-2);
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-height: 1.5em;
}

.upload-actions {
    margin-top: var(--spacing-4);
}

/* Analytics Overview Grid */
.analytics-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-8);
}

/* Charts Section */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-5);
    margin-top: var(--spacing-5);
}

/* Description Chart Section */
.description-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4);
    gap: var(--spacing-4);
}

.description-filters {
    display: flex;
    gap: var(--spacing-3);
    align-items: end;
}

.description-filters .form-group {
    margin-bottom: 0;
}

.description-filters label {
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.description-filters .form-input {
    min-width: 120px;
}

.description-chart-container {
    width: 100%;
}

.description-chart-container .card-body {
    padding: var(--spacing-4);
    height: 600px; /* Fixed height for better display of many items */
}

@media (max-width: 768px) {
    .description-chart-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .description-filters {
        flex-wrap: wrap;
    }
    
    .description-filters .form-input {
        min-width: 100px;
    }
}

.charts-grid .card {
    padding: var(--spacing-4);
    margin: 0 var(--spacing-3);
}

.charts-grid h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    text-align: center;
    font-size: var(--font-size-xl);
}

.charts-grid canvas {
    max-height: 300px;
}

/* Charts Section */
.charts-section {
    margin-bottom: var(--spacing-xl);
}

.charts-section h2 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.chart-card {
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s ease;
}

.chart-card:hover {
    box-shadow: var(--shadow-md);
}

.chart-card .card-header {
    background: var(--color-background-alt);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md);
    text-align: center;
}

.chart-card .card-header h3 {
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    margin: 0;
}

.chart-card .card-body {
    padding: var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Analytics Filters */
.analytics-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: var(--border-width-thin) solid var(--color-border-light);
}

/* Spending Insights */
.spending-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-4);
    margin-top: var(--spacing-5);
}

/* Table Controls */
.table-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: var(--border-width-thin) solid var(--color-border-light);
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    flex: 1;
}

.table-controls .form-group {
    margin-bottom: 0;
    min-width: 180px;
}

/* Data Table */
.table-container {
    overflow-x: auto;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.data-table th {
    background: var(--color-primary-gradient);
    color: var(--color-white);
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table th:hover {
    background: var(--color-primary-dark);
}

.data-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    white-space: nowrap;
}

.data-table tr:hover {
    background: var(--color-bg-secondary);
}

.data-table tr:nth-child(even) {
    background: var(--color-gray-50, #f9fafb);
}

.data-table tr:nth-child(even):hover {
    background: var(--color-bg-secondary);
}

/* Sort arrows */
.sort-arrow {
    margin-left: var(--spacing-1);
    opacity: 0.5;
    font-size: var(--font-size-sm);
}

.data-table th.sorted .sort-arrow {
    opacity: 1;
}

/* Amount styling */
.amount-positive {
    color: var(--color-success-dark);
    font-weight: var(--font-weight-semibold);
}

.amount-negative {
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
}

/* State badges */
.state-completed {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

.state-failed {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-5);
}

.pagination button {
    min-width: 40px;
    height: 40px;
    border: var(--border-width-thin) solid var(--color-border-medium);
    background: var(--color-white);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-colors);
}

.pagination button:hover:not(:disabled) {
    background: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination button.active {
    background: var(--color-primary-gradient);
    color: var(--color-white);
    border-color: var(--color-primary-dark);
}

/* Loading Spinner */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-border-light);
    border-top: 4px solid var(--color-primary-light);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Chart Analytics Grid */
.chart-analytics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-5);
    margin-top: var(--spacing-6);
}

.chart-analytics .card {
    padding: var(--spacing-4);
}

.chart-analytics h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    text-align: center;
    font-size: var(--font-size-xl);
}

.chart-analytics canvas {
    max-height: 300px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: var(--container-padding);
    }
    
    .analytics-overview,
    .charts-grid,
    .spending-insights {
        grid-template-columns: 1fr;
    }
    
    .table-controls {
        flex-direction: column;
    }
    
    .filter-controls {
        flex-direction: column;
    }
    
    .table-controls .form-group {
        min-width: auto;
    }
    
    .data-table {
        font-size: var(--font-size-xs);
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-2);
    }
    
    .chart-analytics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .analytics-filters {
        grid-template-columns: 1fr;
    }
    
    .spending-insights {
        grid-template-columns: 1fr;
    }
}

/* Exclusion Section Styles */
textarea.form-input {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-family-monospace, monospace);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

#exclusionStatus {
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
}

/* Hide spinner by default */
#loadingSpinner {
    display: none;
}

#loadingSpinner.show {
    display: flex;
}

/* Compact text sizing overrides for analytics */
.card-summary-label {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium);
}

.card-summary-value {
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

/* Compact card padding */
.card-summary {
    padding: var(--spacing-3) !important;
}

/* Compact section headers */
.card-section h2 {
    font-size: var(--font-size-xl) !important;
    margin-bottom: var(--spacing-3);
    color: var(--color-white);
}

.card-section h3,
.card-title {
    font-size: var(--font-size-base) !important;
}

/* Compact form elements */
.form-input {
    font-size: var(--font-size-sm) !important;
    padding: 0.375rem 0.5rem;
}

.form-group label {
    font-size: var(--font-size-xs) !important;
    margin-bottom: 0.25rem;
}

/* Compact button text */
.btn {
    font-size: var(--font-size-sm) !important;
    padding: 0.375rem 0.75rem;
}

.btn-sm {
    font-size: var(--font-size-xs) !important;
    padding: 0.25rem 0.5rem;
}

/* Compact table styling */
.data-table th,
.data-table td {
    font-size: var(--font-size-sm) !important;
    padding: 0.5rem 0.75rem;
}

.data-table th {
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-semibold);
}

/* Compact upload header */
.upload-header h2 {
    font-size: var(--font-size-xl) !important;
}

/* Compact chart container titles */
.card-body h3 {
    font-size: var(--font-size-base) !important;
    margin-bottom: var(--spacing-2);
}

/* Compact filter controls */
.description-filters .form-group label,
.analytics-filters .form-group label,
.table-controls .form-group label,
.filter-controls .form-group label {
    font-size: var(--font-size-xs) !important;
}

/* Compact modal content */
.modal-header h2 {
    font-size: var(--font-size-lg) !important;
}

.modal-body p {
    font-size: var(--font-size-sm) !important;
}

/* Responsive compact adjustments */
@media (max-width: 768px) {
    .card-summary-value {
        font-size: var(--font-size-xl) !important;
    }
    
    .card-section h2 {
        font-size: var(--font-size-lg) !important;
    }
    
    .analytics-overview,
    .spending-insights {
        gap: 0.75rem;
    }
    
    .card-summary {
        padding: var(--spacing-2) !important;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.375rem 0.5rem;
        font-size: var(--font-size-xs) !important;
    }
}

@media (max-width: 480px) {
    .card-summary-value {
        font-size: var(--font-size-lg) !important;
    }
    
    .card-section h2 {
        font-size: var(--font-size-base) !important;
    }
}

/* Advanced Analytics Styles */

/* Risk Indicators */
.risk-indicator {
    position: relative;
    border-left: 4px solid var(--color-gray-300);
    transition: var(--transition-all);
}

.risk-indicator.low-risk {
    border-left-color: var(--color-success);
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
}

.risk-indicator.medium-risk {
    border-left-color: var(--color-warning);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
}

.risk-indicator.high-risk {
    border-left-color: var(--color-danger);
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05));
}

.risk-status {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
    font-weight: var(--font-weight-medium);
}

/* Insights Panel */
.insights-panel {
    margin: var(--spacing-6) 0;
    padding: var(--spacing-5);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    border: var(--border-width-thin) solid var(--color-gray-200);
}

.insights-panel h3 {
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: var(--border-width-thin) solid var(--color-gray-100);
    transition: var(--transition-all);
}

.insight-item:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.insight-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.insight-text {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

.insight-item.warning .insight-text {
    color: var(--color-warning-dark);
}

.insight-item.danger .insight-text {
    color: var(--color-danger-dark);
}

.insight-item.success .insight-text {
    color: var(--color-success-dark);
}

/* Risk Table */
.risk-table {
    overflow-x: auto;
    margin-top: var(--spacing-4);
}

.risk-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    border: var(--border-width-thin) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.risk-table th,
.risk-table td {
    text-align: left;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: var(--border-width-thin) solid var(--color-gray-200);
}

.risk-table th {
    background: var(--color-gray-50);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    border-bottom: 2px solid var(--color-gray-200);
}

.risk-score {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align: center;
    min-width: 60px;
}

.risk-score.low {
    background: rgba(40, 167, 69, 0.1);
    color: var(--color-success-dark);
}

.risk-score.medium {
    background: rgba(255, 193, 7, 0.1);
    color: var(--color-warning-dark);
}

.risk-score.high {
    background: rgba(220, 53, 69, 0.1);
    color: var(--color-danger-dark);
}

/* Dark theme adjustments */
[ds-theme="dark"] .insights-panel {
    background: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

[ds-theme="dark"] .insight-item {
    background: var(--color-surface);
    border-color: var(--color-gray-700);
}

[ds-theme="dark"] .risk-table {
    border-color: var(--color-gray-700);
}

[ds-theme="dark"] .risk-table table {
    border-color: var(--color-gray-700);
}

[ds-theme="dark"] .risk-table th {
    background: var(--color-gray-800);
    border-bottom-color: var(--color-gray-700);
    color: var(--color-text-primary);
}

[ds-theme="dark"] .risk-table td {
    border-bottom-color: var(--color-gray-700);
}

/* Fix card header titles for both themes */
.card .card-header h3 {
    color: var(--color-text-primary);
}

[ds-theme="dark"] .card .card-header h3 {
    color: var(--color-text-primary) !important;
}

/* Chart.js dark theme text color fixes */
[ds-theme="dark"] canvas {
    filter: none;
}

[ds-theme="dark"] .chart-card canvas,
[ds-theme="dark"] .charts-grid canvas,
[ds-theme="dark"] .chart-analytics canvas {
    color-scheme: dark;
}

/* Chart.js text elements in dark mode */
[ds-theme="dark"] .chartjs-tooltip,
[ds-theme="dark"] .chartjs-tooltip * {
    color: var(--color-white) !important;
    background: var(--color-gray-800) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .insights-panel {
        padding: var(--spacing-4);
    }
    
    .insight-item {
        padding: var(--spacing-2);
        gap: var(--spacing-2);
    }
    
    .risk-table {
        font-size: var(--font-size-xs);
        margin-top: var(--spacing-3);
    }
    
    .risk-table th,
    .risk-table td {
        padding: var(--spacing-2) var(--spacing-2);
    }
    
    .risk-score {
        min-width: 50px;
        font-size: 10px;
    }
}