/* ============================================================================
   TRAUMA ASSESSMENT TOOL - DARK MODE STYLES
   Dark mode color overrides with CSS variables
   ============================================================================ */


/* ============================================================================
   TRAUMA-INFORMED COLOR SCHEME
   Updated to use calming, therapeutic colors appropriate for trauma assessment
   - Primary actions: Calming teal (#7FA9A9)
   - Success indicators: Soft teal (#6B9E9E)
   - Warnings: Warm cream (#F5F1E8) with taupe borders (#C9B8A8)
   - Warning text: Muted brown (#7f694e)
   ============================================================================ */

/* Dark mode is activated via the 'dark' class on the html or body element */

/* ============================================================================
   DARK MODE COLOR VARIABLES
   ============================================================================ */

.dark {
    /* Primary Colors - slightly lighter for dark mode */
    --color-primary: #8FBDBD;
    --color-primary-hover: #7FA9A9;
    --color-primary-light: #8FBDBD;
    
    /* Status Colors - adjusted for dark backgrounds */
    --color-success: #6B9E9E;
    --color-warning: #C9B8A8;
    --color-danger: #ef5350;
    --color-info: #6B9E9E;
    
    /* Neutral Colors - inverted */
    --color-gray-50: #2d2d2d;
    --color-gray-100: #3a3a3a;
    --color-gray-200: #4a4a4a;
    --color-gray-300: #6a6a6a;
    --color-gray-400: #9ca3af;
    --color-gray-500: #d1d5db;
    --color-gray-600: #e5e7eb;
    --color-gray-700: #f3f4f6;
    --color-gray-800: #f9fafb;
    --color-gray-900: #ffffff;
    
    /* Text Color Hierarchy (LIGHT for dark backgrounds) */
    --color-text-heading: #E5E5E5;
    --color-text-body: #D0D0D0;
    --color-text-secondary: #B0B0B0;
    
    /* Background Colors (DARK) */
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    
    /* Shadows - darker for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   BASE ELEMENTS
   ============================================================================ */

.dark body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-body);
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: var(--color-text-heading);
}

.dark a {
    color: var(--color-primary);
}

.dark a:hover {
    color: var(--color-primary-hover);
}

/* ============================================================================
   CARDS & PANELS
   ============================================================================ */

.dark .card,
.dark .bg-white {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-body);
}

.dark .card-header {
    border-bottom-color: var(--color-gray-200);
    color: var(--color-text-heading);
}

/* ============================================================================
   FORMS
   ============================================================================ */

.dark .form-input,
.dark .form-select,
.dark .form-textarea {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
    color: var(--color-text-body);
}

.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(107, 158, 158, 0.2);
}

.dark .form-input:disabled,
.dark .form-select:disabled,
.dark .form-textarea:disabled {
    background-color: var(--color-gray-100);
    opacity: 0.5;
}

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

/* ============================================================================
   RADIO BUTTONS & CHECKBOXES
   ============================================================================ */

.dark .form-radio-label,
.dark .rating-option,
.dark .yes-no-option {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
    color: var(--color-text-body);
}

.dark .form-radio-label:hover,
.dark .rating-option:hover,
.dark .yes-no-option:hover {
    background-color: var(--color-gray-200);
    border-color: var(--color-primary);
}

.dark .form-radio-label:has(input[type="radio"]:checked),
.dark .rating-option:has(input[type="radio"]:checked),
.dark .yes-no-option:has(input[type="radio"]:checked) {
    background-color: rgba(107, 158, 158, 0.15);
    border-color: var(--color-primary);
}

/* ============================================================================
   ASSESSMENT ITEMS
   ============================================================================ */

.dark .assessment-item {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
}

.dark .assessment-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.dark .assessment-item.answered {
    border-color: var(--color-success);
    background-color: rgba(107, 158, 158, 0.1);
}

.dark .assessment-item-text {
    color: var(--color-text-body);
}

.dark .assessment-item-criterion {
    background-color: var(--color-gray-200);
    color: var(--color-text-secondary);
}

.dark .assessment-item-number {
    color: var(--color-primary);
}

/* ============================================================================
   CRITERION GROUPS
   ============================================================================ */

.dark .criterion-group {
    background-color: var(--color-gray-100);
    border-left-color: var(--color-primary);
}

.dark .criterion-header {
    color: var(--color-primary);
}

.dark .criterion-description {
    color: var(--color-text-secondary);
}

/* ============================================================================
   ALERTS
   ============================================================================ */

.dark .alert-info {
    background-color: rgba(66, 165, 245, 0.15);
    border-color: #8FBDBD;
    color: #90caf9;
}

.dark .alert-success {
    background-color: rgba(107, 158, 158, 0.15);
    border-color: #6B9E9E;
    color: #a5d6a7;
}

.dark .alert-warning {
    background-color: rgba(255, 167, 38, 0.15);
    border-color: #C9B8A8;
    color: #ffb74d;
}

.dark .alert-danger {
    background-color: rgba(239, 83, 80, 0.15);
    border-color: #ef5350;
    color: #e57373;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.dark .btn-secondary {
    background-color: var(--color-gray-200);
    color: var(--color-text-body);
}

.dark .btn-secondary:hover:not(:disabled) {
    background-color: var(--color-gray-300);
}

/* ============================================================================
   TABS
   ============================================================================ */

.dark .results-tab {
    color: var(--color-text-secondary);
}

.dark .results-tab:hover {
    color: var(--color-text-body);
    background-color: rgba(107, 158, 158, 0.1);
}

.dark .results-tab.active {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ============================================================================
   REPORT STYLES
   ============================================================================ */

.dark .report-container {
    background-color: var(--color-bg-secondary);
}

.dark .report-header {
    border-bottom-color: var(--color-gray-200);
}

.dark .report-title {
    color: var(--color-primary);
}

.dark .report-subtitle {
    color: var(--color-text-secondary);
}

.dark .report-date {
    color: var(--color-text-secondary);
}

.dark .report-section-title {
    color: var(--color-text-heading);
    border-bottom-color: var(--color-gray-200);
}

.dark .report-subsection-title {
    color: var(--color-text-body);
}

/* ============================================================================
   SCORE CARDS
   ============================================================================ */

.dark .score-card {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
}

.dark .score-card-title {
    color: var(--color-text-heading);
}

.dark .score-value {
    color: var(--color-primary);
}

.dark .score-range,
.dark .score-interpretation {
    color: var(--color-text-body);
}

.dark .cluster-score-label {
    color: var(--color-text-body);
}

.dark .cluster-score-value {
    color: var(--color-primary);
}

.dark .cluster-score-bar {
    background-color: var(--color-gray-200);
}

/* ============================================================================
   DIAGNOSTIC COMPARISON
   ============================================================================ */

.dark .diagnostic-column {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
}

.dark .diagnostic-column-header {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.dark .diagnostic-result {
    background-color: var(--color-gray-100);
}

.dark .diagnostic-result.positive {
    border-color: var(--color-success);
    background-color: rgba(107, 158, 158, 0.1);
}

.dark .diagnostic-result.negative {
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-200);
}

.dark .diagnostic-result.positive .diagnostic-result-text {
    color: var(--color-success);
}

.dark .diagnostic-result.negative .diagnostic-result-text {
    color: var(--color-text-secondary);
}

/* ============================================================================
   CRITERIA CHECKLIST
   ============================================================================ */

.dark .criteria-item {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

.dark .criteria-item.met {
    border-color: var(--color-success);
    background-color: rgba(107, 158, 158, 0.1);
}

.dark .criteria-item.not-met {
    border-color: var(--color-gray-300);
}

.dark .criteria-icon.met {
    color: var(--color-success);
}

.dark .criteria-icon.not-met {
    color: var(--color-gray-400);
}

.dark .criteria-label {
    color: var(--color-text-heading);
}

.dark .criteria-description {
    color: var(--color-text-secondary);
}

/* ============================================================================
   TREATMENT CARDS
   ============================================================================ */

.dark .treatment-card {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
    border-left-color: var(--color-primary);
}

.dark .treatment-card.primary {
    border-left-color: var(--color-success);
    background-color: rgba(107, 158, 158, 0.05);
}

.dark .treatment-name {
    color: var(--color-text-heading);
}

.dark .treatment-detail-label {
    color: var(--color-text-body);
}

.dark .treatment-detail-value,
.dark .treatment-description {
    color: var(--color-text-body);
}

.dark .treatment-rationale {
    background-color: var(--color-gray-100);
    color: var(--color-text-body);
}

.dark .treatment-rationale-title {
    color: var(--color-primary);
}

/* ============================================================================
   MEDICATION CARDS
   ============================================================================ */

.dark .medication-card {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
}

.dark .medication-name {
    color: var(--color-text-heading);
}

.dark .medication-class {
    color: var(--color-primary);
    background-color: rgba(107, 158, 158, 0.15);
}

.dark .medication-details {
    color: var(--color-text-body);
}

/* ============================================================================
   COMORBIDITY SECTIONS
   ============================================================================ */

.dark .comorbidity-section {
    background-color: var(--color-gray-200);
}

.dark .comorbidity-title {
    color: var(--color-text-heading);
}

.dark .comorbidity-item {
    background-color: var(--color-gray-100);
    border-left-color: var(--color-warning);
}

.dark .comorbidity-name {
    color: var(--color-text-heading);
}

.dark .comorbidity-recommendations {
    color: var(--color-text-body);
}

/* ============================================================================
   COMPARISON TABLE
   ============================================================================ */

.dark .comparison-table {
    background-color: var(--color-gray-100);
}

.dark .comparison-table th {
    background-color: var(--color-gray-200);
    color: var(--color-text-heading);
}

.dark .comparison-table td {
    border-bottom-color: var(--color-gray-300);
    color: var(--color-text-body);
}

.dark .comparison-table tr:hover {
    background-color: var(--color-gray-200);
}

.dark .comparison-table .feature-column {
    color: var(--color-text-heading);
}

/* ============================================================================
   COMPARISON SUMMARY
   ============================================================================ */

.dark .comparison-summary {
    background-color: #1e3a5f;
    color: #E8F3E8;
}

/* ============================================================================
   SAFETY ALERTS
   ============================================================================ */

.dark .safety-alert {
    background-color: #7f1d1d;
    color: #fecaca;
}

.dark .safety-alert.warning {
    background-color: #7f694e;
    color: #fed7aa;
}

/* ============================================================================
   MONITORING PLAN
   ============================================================================ */

.dark .monitoring-plan {
    background-color: var(--color-gray-200);
    border-color: var(--color-primary-light);
}

.dark .monitoring-plan-title {
    color: var(--color-primary-light);
}

.dark .monitoring-plan-content {
    color: var(--color-text-body);
}

/* ============================================================================
   DISCLAIMER
   ============================================================================ */

.dark .report-disclaimer {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
    color: var(--color-text-body);
}

.dark .report-disclaimer-title {
    color: var(--color-text-heading);
}

/* ============================================================================
   PROGRESS BARS
   ============================================================================ */

.dark .progress-bar-container {
    background-color: var(--color-gray-200);
}

.dark .progress-bar-fill {
    background-color: var(--color-primary);
}

.dark .form-progress {
    background-color: var(--color-gray-200);
}

.dark .form-progress-text {
    color: var(--color-text-body);
}

.dark .form-progress-bar {
    background-color: var(--color-gray-200);
}

.dark .form-progress-fill {
    background-color: var(--color-success);
}

/* ============================================================================
   FORM INSTRUCTIONS
   ============================================================================ */

.dark .form-instructions {
    background-color: var(--color-gray-100);
    border-left-color: var(--color-primary);
}

.dark .form-instructions-title {
    color: var(--color-primary);
}

.dark .form-instructions-text {
    color: var(--color-text-body);
}

/* ============================================================================
   BADGES
   ============================================================================ */

.dark .badge-success {
    background-color: #6B9E9E;
}

.dark .badge-warning {
    background-color: #C9B8A8;
}

.dark .badge-danger {
    background-color: #ef5350;
}

.dark .badge-info {
    background-color: #8FBDBD;
}

.dark .badge-gray {
    background-color: var(--color-gray-400);
    color: var(--color-text-heading);
}

/* ============================================================================
   LIKERT SCALE
   ============================================================================ */

.dark .likert-option {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
    color: var(--color-text-body);
}

.dark .likert-option:hover {
    background-color: var(--color-gray-200);
    border-color: var(--color-primary);
}

.dark .likert-option:has(input[type="radio"]:checked) {
    background-color: rgba(107, 158, 158, 0.15);
    border-color: var(--color-primary);
}

.dark .likert-value {
    color: var(--color-primary);
}

.dark .likert-label {
    color: var(--color-text-body);
}

/* ============================================================================
   CONDITIONAL FIELDS
   ============================================================================ */

.dark .conditional-field {
    border-left-color: var(--color-gray-300);
}

/* ============================================================================
   VALIDATION STATES
   ============================================================================ */

.dark .form-error {
    color: var(--color-danger);
}

.dark .form-input.error,
.dark .form-select.error {
    border-color: var(--color-danger);
}

.dark .form-input.error:focus,
.dark .form-select.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.2);
}

.dark .form-success {
    color: var(--color-success);
}

.dark .assessment-item.incomplete {
    border-color: var(--color-warning);
    background-color: rgba(201, 184, 168, 0.1);
}

.dark .assessment-item.incomplete::after {
    color: var(--color-warning);
}

/* ============================================================================
   HELP TEXT
   ============================================================================ */

.dark .form-help-text {
    color: var(--color-text-secondary);
}

.dark .form-help-text::before {
    color: var(--color-primary-light);
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.dark nav {
    background-color: var(--color-primary);
}

/* ============================================================================
   TABLES
   ============================================================================ */

.dark table {
    color: var(--color-text-body);
}

.dark th {
    background-color: var(--color-gray-200);
    border-bottom-color: var(--color-gray-300);
    color: var(--color-text-heading);
}

.dark td {
    border-bottom-color: var(--color-gray-300);
}

.dark tr:hover {
    background-color: var(--color-gray-200);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.dark footer {
    background-color: var(--color-bg-secondary);
}

/* ============================================================================
   PRINT STYLES (Dark Mode)
   ============================================================================ */

@media print {
    .dark body,
    .dark .card,
    .dark .report-container {
        background-color: white !important;
        color: black !important;
    }
    
    .dark h1,
    .dark h2,
    .dark h3,
    .dark h4,
    .dark h5,
    .dark h6,
    .dark .report-title,
    .dark .report-section-title {
        color: black !important;
    }
    
    .dark .score-value,
    .dark .cluster-score-value {
        color: #6B9E9E !important;
    }
}