/* Default dark theme overrides */

:root {
    color-scheme: dark;
    --primary: #7c8cff;
    --primary-dark: #9aa6ff;
    --border: #334155;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --bg: #0f172a;
    --bg-gray: #1e293b;
}

html,
body {
    background-color: #020617;
    color: #e2e8f0;
}

/* Header and base layout */
.main-header {
    background: #0f172a;
    border-bottom: 1px solid #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.logo a,
.username,
.page-header h2,
.workspace-container h2,
.step-content h3,
.recent-activity h3,
.activity-title,
.review-section h3,
.result-section h3,
.result-section h4,
.card-header h3,
.metric-summary,
.form-group label,
.filter-group label {
    color: #e2e8f0;
}

.nav-link,
.subtitle,
.activity-meta,
.prompt-preview,
.meta-item,
.form-text,
.text-muted {
    color: #94a3b8;
}

.nav-link:hover {
    background-color: #1e293b;
    color: #e2e8f0;
}

.btn-link:hover {
    background-color: #1e293b;
}

.main-footer {
    background: #0f172a;
    border-top: 1px solid #334155;
}

.footer-content {
    color: #94a3b8;
}

/* Containers and cards */
.workflow-step,
.activity-item,
.review-section,
.prompt-card,
.testset-card,
.info-card,
.modal-content,
.selected-info,
.eval-config-section,
.filters-section,
.output-box,
.checkbox-group,
.login-card {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

.prompt-card,
.testset-card,
.selected-info,
.eval-config-section,
.filters-section,
.output-box,
.checkbox-group,
.meta-item {
    background: #1e293b;
}

.workflow-step:hover,
.activity-item:hover,
.review-section:hover {
    border-color: #7c8cff;
}

.card-actions,
.prompt-meta,
.recent-activity,
.tabs-nav,
.page-header,
.sandbox-results,
.data-table th,
.data-table td {
    border-color: #334155;
}

/* Inputs and selects */
.form-control,
.form-control-sm,
textarea.form-control,
select.form-control,
input.form-control,
.searchable-select-search,
.form-group input,
.tab-link,
.prompt-row,
.dropdown-content a,
.data-table th,
.progress-bar,
.select-input,
.prefill-log-input {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

.prompt-row:hover,
.tab-link:hover,
.dropdown-content a:hover,
.data-table tbody tr:hover {
    background-color: #1e293b;
}

.tab-link.active {
    color: #9aa6ff;
    border-bottom-color: #9aa6ff;
}

.prompt-row .prompt-name {
    color: #e2e8f0;
}

.prompt-row .prompt-model {
    color: #94a3b8;
}

/* Modal and dropdown chrome */
.dropdown-content,
.select-dropdown {
    background: #0f172a;
    border-color: #334155;
}

.dropdown-item:hover,
.dropdown-create:hover {
    background: #1e293b;
}

.modal-close {
    color: #94a3b8;
}

.modal-close:hover {
    color: #e2e8f0;
}

/* Modal readability fixes for templates/JS using inline light styles */
.modal,
.modal-content,
.modal-panel,
.modal-header,
.modal-body,
.modal-footer {
    color: #e2e8f0;
}

.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6,
.modal strong,
.modal label {
    color: #e2e8f0;
}

.modal .text-muted {
    color: #94a3b8;
}

.modal pre,
.modal code {
    color: #e2e8f0;
}

.modal [style*="background: white"],
.modal [style*="background:white"],
.modal [style*="background: #fff"],
.modal [style*="background:#fff"],
.modal [style*="background: #f9fafb"],
.modal [style*="background:#f9fafb"],
.modal [style*="background: #f5f5f5"],
.modal [style*="background:#f5f5f5"],
.modal [style*="background-color: white"],
.modal [style*="background-color:white"],
.modal [style*="background-color: #fff"],
.modal [style*="background-color:#fff"],
.modal [style*="background-color: #f9fafb"],
.modal [style*="background-color:#f9fafb"],
.modal [style*="background-color: #f5f5f5"],
.modal [style*="background-color:#f5f5f5"] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.modal [style*="color: #6b7280"],
.modal [style*="color:#6b7280"],
.modal [style*="color: #9ca3af"],
.modal [style*="color:#9ca3af"] {
    color: #94a3b8 !important;
}

.modal [style*="color: #374151"],
.modal [style*="color:#374151"],
.modal [style*="color: #1f2937"],
.modal [style*="color:#1f2937"] {
    color: #e2e8f0 !important;
}

.modal [style*="color: #166534"],
.modal [style*="color:#166534"],
.modal [style*="color: #059669"],
.modal [style*="color:#059669"] {
    color: #86efac !important;
}

.modal [style*="color: #991b1b"],
.modal [style*="color:#991b1b"],
.modal [style*="color: #dc2626"],
.modal [style*="color:#dc2626"] {
    color: #fca5a5 !important;
}

.modal [style*="color: #0c4a6e"],
.modal [style*="color:#0c4a6e"] {
    color: #7dd3fc !important;
}

.modal-tab {
    color: #94a3b8;
}

.modal-tab:hover {
    color: #c7d2fe;
}

.modal-tab.active {
    color: #9aa6ff;
    border-bottom-color: #9aa6ff;
}

/* Checkbox chip readability in dark mode (Cook metrics, use case metrics) */
.checkbox-group .checkbox-label,
.modal .checkbox-group .checkbox-label {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    color: #e2e8f0;
}

.checkbox-group .checkbox-label:hover,
.modal .checkbox-group .checkbox-label:hover {
    background: #243246;
    border-color: #475569;
}

.checkbox-group .checkbox-label span,
.modal .checkbox-group .checkbox-label span {
    color: #e2e8f0;
}

.checkbox-group .checkbox-label input[type="checkbox"],
.modal .checkbox-group .checkbox-label input[type="checkbox"] {
    accent-color: #7c8cff;
}

/* Prompt publish diff blocks (prompts / prompt_view / cook) */
.diff-item {
    background: #1e293b;
    color: #e2e8f0;
}

.diff-field {
    color: #e2e8f0;
}

.diff-local {
    background: #052e16;
    color: #bbf7d0;
}

.diff-remote {
    background: #450a0a;
    color: #fecaca;
}

.diff-same {
    background: #0f172a;
    color: #94a3b8;
}

.diff-label-local {
    color: #86efac;
}

.diff-label-remote {
    color: #fca5a5;
}

.diff-new-prompt {
    background: #082f49;
    color: #bae6fd;
}

/* Review carousel modal (separate from .modal styles) */
.carousel-container {
    background: #0f172a;
    color: #e2e8f0;
}

.carousel-navigation,
.carousel-footer {
    background: #111827;
    border-color: #334155;
}

.carousel-counter {
    color: #94a3b8;
}

.carousel-counter span {
    color: #9aa6ff;
}

.carousel-content {
    background: #0b1220;
}

.carousel-output-card {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

.carousel-output-card.passed {
    background: #0f172a;
    border-left-color: #6366f1;
}

.carousel-output-card.failed {
    background: #3a1010;
    border-left-color: #ef4444;
}

.carousel-output-card .badge-success {
    background-color: #4f46e5;
    color: #eef2ff;
}

.carousel-output-card .badge-danger {
    background-color: #dc2626;
    color: #fee2e2;
}

.feedback-form label {
    color: #e2e8f0;
}

.feedback-inputs select,
.feedback-inputs input {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

.feedback-inputs select:focus,
.feedback-inputs input:focus {
    border-color: #9aa6ff;
    box-shadow: 0 0 0 3px rgba(154, 166, 255, 0.2);
}

.carousel-output-card .output-header,
.carousel-output-card .output-section > div:first-child {
    border-color: #334155;
}

.carousel-output-card .output-header h4,
.carousel-output-card .output-section h5,
.carousel-output-card .metric-name {
    color: #e2e8f0;
}

.carousel-output-card .metric-reason {
    color: #94a3b8;
}

.carousel-output-card .output-text {
    background: #1e293b;
    color: #e2e8f0;
}

/* Review carousel JS injects lots of inline colors/backgrounds */
.carousel-modal [style*="background: white"],
.carousel-modal [style*="background:white"],
.carousel-modal [style*="background: #fff"],
.carousel-modal [style*="background:#fff"],
.carousel-modal [style*="background: #f9fafb"],
.carousel-modal [style*="background:#f9fafb"],
.carousel-modal [style*="background: #f5f5f5"],
.carousel-modal [style*="background:#f5f5f5"],
.carousel-modal [style*="background-color: white"],
.carousel-modal [style*="background-color:white"],
.carousel-modal [style*="background-color: #fff"],
.carousel-modal [style*="background-color:#fff"],
.carousel-modal [style*="background-color: #f9fafb"],
.carousel-modal [style*="background-color:#f9fafb"],
.carousel-modal [style*="background-color: #f5f5f5"],
.carousel-modal [style*="background-color:#f5f5f5"] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.carousel-modal [style*="color: #6b7280"],
.carousel-modal [style*="color:#6b7280"],
.carousel-modal [style*="color: #9ca3af"],
.carousel-modal [style*="color:#9ca3af"] {
    color: #94a3b8 !important;
}

.carousel-modal [style*="color: #374151"],
.carousel-modal [style*="color:#374151"],
.carousel-modal [style*="color: #1f2937"],
.carousel-modal [style*="color:#1f2937"] {
    color: #e2e8f0 !important;
}

/* Login page */
.login-page {
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
}

.login-card h1 {
    color: #9aa6ff;
}

.login-card h2,
.version {
    color: #94a3b8;
}

/* Alerts and tables */
.alert-success { background-color: #052e16; color: #86efac; }
.alert-error { background-color: #450a0a; color: #fca5a5; }
.alert-warning { background-color: #422006; color: #fcd34d; }
.alert-info { background-color: #082f49; color: #7dd3fc; }

/* Keep cook workspace dark by overriding its vars as well */
.cook-workspace {
    --primary: #7c8cff;
    --primary-dark: #9aa6ff;
    --border: #334155;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --bg: #0f172a;
    --bg-gray: #1e293b;
}