:root {
    --bg-primary: #F0F5F8;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E4EEE8;
    --text-primary: #0D1A14;
    --text-secondary: #2E4A3E;
    --text-tertiary: #5A7A6E;
    --border-color: #C8DDD8;
    --border-color-light: rgba(74, 130, 114, 0.10);
    --shadow-sm: 0 8px 30px rgba(40, 80, 70, 0.07);
    --shadow-md: 0 20px 60px rgba(40, 80, 70, 0.12);
    --shadow-lg: 0 30px 90px rgba(40, 80, 70, 0.20);
    --card-bg: #FFFFFF;
    --input-bg: #FFFFFF;
    --modal-overlay: rgba(0, 0, 0, 0.60);
    --gradient-start: #4A8272;
    --gradient-end: #6AA898;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-color: #334155;
    --border-color-light: rgba(199, 125, 255, 0.2);
    --shadow-sm: 0 8px 30px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.9);
    --card-bg: #1e293b;
    --input-bg: #334155;
    --modal-overlay: rgba(0, 0, 0, 0.9);
    --gradient-start: #7c3aed;
    --gradient-end: #a855f7;
}

body {
    background: var(--body-bg);
    color: var(--text-primary);
    transition: background 0.5s ease, color 0.3s ease;
}

.theme-toggle {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 14px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-primary-dark);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.theme-toggle:hover::before {
    opacity: 1;
}

.theme-toggle:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(168, 85, 247, 0.2) 100%);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(139, 92, 246, 0.6);
}

.theme-icon {
    position: absolute;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.moon-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}

[data-theme="dark"] .sun-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

[data-theme="dark"] .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    color: var(--text-on-gradient);
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .theme-toggle:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.25) 100%);
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.card,
.profile-card,
.stat-card,
.test-card,
.result-card,
.session-card,
.entry-card {
    background: var(--card-bg) !important;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm) !important;
}

.card:hover,
.stat-card:hover,
.test-card:hover,
.result-card:hover,
.session-card:hover,
.entry-card:hover,
.profile-card:hover {
    box-shadow: var(--shadow-md) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-secondary) !important;
}

.psych-welcome-content h1,
.psych-welcome-content p,
.welcome-section h1,
.welcome-section p,
.sessions-header h1,
.sessions-header p,
.assessments-header h1,
.assessments-header p,
.journal-header h1,
.journal-header p,
.profile-header h1,
.profile-header p,
.emergency-banner h3,
.emergency-banner p,
.tip-aurora-banner .tab-desc,
.tip-aurora-banner p {
    color: #ffffff !important;
}

span:not(.badge):not(.status-badge):not(.risk-badge) {
    color: var(--text-secondary);
}

label {
    color: var(--text-primary) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.form-textarea,
.search-box input,
.filter-select {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--gradient-start) !important;
}

.modal-overlay {
    background: var(--modal-overlay) !important;
}

.modal-content {
    background: var(--card-bg) !important;
    color: var(--text-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar {
    background: linear-gradient(175deg, #080418 0%, #0d0825 30%, #170e38 60%, #0d0825 85%, #080418 100%);
    box-shadow: 4px 0 35px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .sidebar::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(168, 85, 247, 0.1) 40%, transparent 70%);
}

[data-theme="dark"] .sidebar::after {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(67, 56, 202, 0.08) 40%, transparent 70%);
}

[data-theme="dark"] .top-row.navbar {
    background: linear-gradient(135deg, rgba(8, 4, 24, 0.95) 0%, rgba(23, 14, 56, 0.95) 100%) !important;
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] main .top-row {
    background: linear-gradient(135deg, #080418 0%, #0d0825 50%, #170e38 100%) !important;
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .nav-link:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
    color: var(--text-on-gradient);
    box-shadow: 0 3px 12px rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .nav-link.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .navbar-brand {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .nav-section-label {
    color: rgba(167, 139, 250, 0.35);
}

[data-theme="dark"] .nav-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.2) 50%, transparent 100%);
}

[data-theme="dark"] .brand-logo-ring {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(168, 85, 247, 0.15) 100%);
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-icon-wrap {
    background: rgba(139, 92, 246, 0.1);
}

.nav-theme-toggle {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] .nav-theme-toggle:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
    color: var(--text-on-gradient);
}

/* Toggle switch — off (light mode) */
.theme-toggle-switch {
    width: 34px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    position: relative;
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .theme-toggle-switch {
    background: rgba(139, 92, 246, 0.55);
    border-color: rgba(139, 92, 246, 0.75);
}

[data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(16px);
}

.filter-section {
    background: var(--card-bg) !important;
    border-color: var(--border-color-light) !important;
}

.empty-state,
.empty-results {
    background: var(--card-bg) !important;
}

[data-theme="dark"] .empty-state svg,
[data-theme="dark"] .empty-results svg {
    opacity: 0.2;
    filter: brightness(0.7);
}

.action-item {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color-light) !important;
}

[data-theme="dark"] .action-item:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%) !important;
}

.result-info-box,
.info-box,
.result-diagnosis,
.diagnosis-box,
.explanation-box,
.result-explanation,
.session-notes,
.view-content {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color-light) !important;
}

.result-info-box p,
.info-box p,
.diagnosis-box p,
.explanation-box p,
.session-notes p,
.result-explanation p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .test-card,
[data-theme="dark"] .result-card,
[data-theme="dark"] .session-card,
[data-theme="dark"] .entry-card {
    border: 1px solid var(--border-color-light);
}

main .top-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 1.5rem !important;
}

main {
    background: var(--bg-secondary);
}

.content {
    background: var(--bg-secondary);
}

.mood-button {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

.mood-button:hover {
    background: var(--bg-tertiary) !important;
}

.mood-button.active {
    background: linear-gradient(135deg, rgba(123, 44, 191, 0.2) 0%, rgba(199, 125, 255, 0.2) 100%) !important;
    border-color: var(--gradient-start) !important;
}

[data-theme="dark"] .mood-button.active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%) !important;
}

.card-header {
    background: var(--card-bg);
    border-color: var(--border-color) !important;
}

.intro-card {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary);
}

.intro-card h3 {
    color: var(--text-primary) !important;
}

.intro-card p,
.intro-card li {
    color: var(--text-secondary) !important;
}

.topic-tag {
    background: linear-gradient(135deg, rgba(123, 44, 191, 0.15) 0%, rgba(199, 125, 255, 0.15) 100%);
    color: var(--gradient-start);
}

[data-theme="dark"] .topic-tag {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(168, 85, 247, 0.25) 100%);
    color: var(--gradient-end);
}

.attachment-item {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

.recommendation-item {
    background: var(--bg-tertiary) !important;
}

.recommendation-item span {
    color: var(--text-primary) !important;
}

.modal-close {
    color: var(--text-tertiary);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] svg:not(.theme-icon) {
    opacity: 0.9;
}

[data-theme="dark"] .entry-date,
[data-theme="dark"] .session-date,
[data-theme="dark"] .result-date {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

[data-theme="dark"] .stat-icon-primary {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

[data-theme="dark"] .profile-header,
[data-theme="dark"] .welcome-section,
[data-theme="dark"] .journal-header,
[data-theme="dark"] .sessions-header,
[data-theme="dark"] .assessments-header {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.confidence-bar,
.confidence-bar-large {
    background: var(--border-color);
}

.confidence-fill {
    background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

[data-theme="dark"] .avatar-circle {
    background: rgba(124, 58, 237, 0.3);
    border-color: rgba(168, 85, 247, 0.4);
}

.textarea-info {
    color: var(--text-tertiary) !important;
}

.profile-role-badge {
    background: rgba(123, 44, 191, 0.15);
    color: var(--gradient-start);
}

[data-theme="dark"] .profile-role-badge {
    background: rgba(124, 58, 237, 0.25);
    color: var(--gradient-end);
}

body.theme-transitioning * {
    transition: none !important;
}

* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.theme-toggle *,
.theme-icon,
[class*="animate"],
[class*="hover"] {
    transition-property: all;
}

.entry-footer,
.entry-footer span,
.session-meta span,
.test-meta span {
    color: var(--text-tertiary) !important;
}

.card-body {
    background: var(--card-bg);
}

.schedule-info,
.therapist-contact {
    background: var(--bg-tertiary) !important;
}

.therapist-contact h4 {
    color: var(--text-primary) !important;
}

.therapist-contact p {
    color: var(--text-secondary) !important;
}

.view-header-info h2 {
    color: var(--text-primary) !important;
}

.view-time,
.modal-subtitle {
    color: var(--text-tertiary) !important;
}

.intro-item {
    color: var(--text-secondary) !important;
}

.instructions-list {
    color: var(--text-secondary) !important;
}

.test-description,
.test-last-completed,
.entry-length,
.session-therapist,
.session-duration {
    color: var(--text-tertiary) !important;
}

.section-header h2 {
    color: var(--text-primary) !important;
}

.section-header p {
    color: var(--text-secondary) !important;
}