/* ══════════════════════════════════════════════════════
   nSight MSP — Theme System (CSS Custom Properties)
   Single source of truth for dark/light color palettes.
   ══════════════════════════════════════════════════════ */

/* ── Dark Theme (default) ── */
html[data-theme="dark"] {
    --bg-body:           #0a0e1a;
    --bg-sidebar:        #0d1117;
    --bg-glass:          rgba(255, 255, 255, 0.03);
    --bg-glass-subtle:   rgba(255, 255, 255, 0.02);
    --bg-glass-hover:    rgba(255, 255, 255, 0.05);
    --bg-input:          rgba(255, 255, 255, 0.04);
    --bg-input-focus:    rgba(255, 255, 255, 0.06);
    --bg-header:         rgba(255, 255, 255, 0.03);
    --bg-table-header:   rgba(255, 255, 255, 0.05);
    --bg-table-hover:    rgba(255, 255, 255, 0.03);
    --bg-modal:          #0f1629;
    --bg-modal-overlay:  rgba(0, 0, 0, 0.7);
    --bg-option:         #0f1629;
    --bg-code:           rgba(0, 0, 0, 0.4);
    --bg-output-log:     rgba(0, 0, 0, 0.3);
    --bg-toggle-off:     rgba(255, 255, 255, 0.1);

    --border-glass:      rgba(255, 255, 255, 0.06);
    --border-glass-strong: rgba(255, 255, 255, 0.08);
    --border-input:      rgba(255, 255, 255, 0.1);
    --border-table:      rgba(255, 255, 255, 0.04);
    --border-subtle:     rgba(255, 255, 255, 0.06);

    --text-heading:      #f1f5f9;
    --text-body:         #e2e8f0;
    --text-secondary:    #94a3b8;
    --text-muted:        #64748b;
    --text-timestamp:    #475569;
    --text-white:        #ffffff;
    --text-placeholder:  rgba(148, 163, 184, 0.5);

    --focus-ring:        rgba(56, 189, 248, 0.5);
    --focus-shadow:      rgba(56, 189, 248, 0.1);

    --grid-line:         rgba(56, 189, 248, 0.02);

    --scrollbar-thumb:   rgba(255, 255, 255, 0.1);
    --scrollbar-hover:   rgba(255, 255, 255, 0.2);

    --glass-shine:       rgba(255, 255, 255, 0.08);
    --glass-shine-subtle: rgba(255, 255, 255, 0.06);

    --logo-brightness:   1.5;

    /* Sidebar */
    --sidebar-link:        #94a3b8;
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-link-hover:  #e2e8f0;
    --sidebar-active-bg:   rgba(56, 189, 248, 0.1);
    --sidebar-active-color: #22d3ee;
    --sidebar-active-border: rgba(56, 189, 248, 0.15);
    --sidebar-section:     #64748b;
    --sidebar-toggle-bg:   #161b22;
    --sidebar-toggle-border: rgba(255, 255, 255, 0.08);
    --sidebar-welcome:     #94a3b8;
    --sidebar-scrollbar:   rgba(255, 255, 255, 0.1);

    /* Particles */
    --particle-line:     99, 102, 241;
    --particle-node:     56, 189, 248;

    /* Status colors (semantic — slightly adjusted per theme) */
    --success-bg:        rgba(34, 197, 94, 0.15);
    --success-border:    rgba(34, 197, 94, 0.3);
    --success-text:      #4ade80;
    --error-bg:          rgba(239, 68, 68, 0.15);
    --error-border:      rgba(239, 68, 68, 0.3);
    --error-text:        #f87171;
    --warning-bg:        rgba(251, 191, 36, 0.12);
    --warning-border:    rgba(251, 191, 36, 0.3);
    --warning-text:      #fbbf24;
    --info-bg:           rgba(59, 130, 246, 0.12);
    --info-border:       rgba(59, 130, 246, 0.25);
    --info-text:         #60a5fa;

    /* Logout button */
    --logout-bg:         rgba(239, 68, 68, 0.15);
    --logout-border:     rgba(239, 68, 68, 0.2);
    --logout-text:       #fca5a5;
    --logout-hover-bg:   rgba(239, 68, 68, 0.25);

    /* Chart.js */
    --chart-grid:        rgba(255, 255, 255, 0.04);
    --chart-border:      rgba(255, 255, 255, 0.06);
    --chart-label:       #64748b;
    --chart-legend:      #94a3b8;

    /* Chatbot */
    --chat-user-bg:      linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.12));
    --chat-user-border:  rgba(99, 102, 241, 0.25);
    --chat-user-shine:   rgba(99, 102, 241, 0.2);
    --chat-bot-bg:       rgba(255, 255, 255, 0.03);
    --chat-bot-border:   rgba(255, 255, 255, 0.06);
    --chat-bot-shine:    rgba(255, 255, 255, 0.08);
    --chat-code-color:   #67e8f9;
    --chat-code-bg:      rgba(255, 255, 255, 0.08);
    --chat-link:         #22d3ee;
    --chat-link-hover:   #67e8f9;
    --chat-li:           #cbd5e1;
    --chat-blockquote:   rgba(99, 102, 241, 0.4);
    --chat-table-th-bg:  rgba(255, 255, 255, 0.06);
    --chat-table-th:     #e2e8f0;
    --chat-table-td:     #cbd5e1;
    --chat-table-border: rgba(255, 255, 255, 0.08);
    --chat-table-td-border: rgba(255, 255, 255, 0.06);
    --chat-table-even:   rgba(255, 255, 255, 0.02);
    --chat-table-hover:  rgba(255, 255, 255, 0.04);
    --chat-error-bg:     rgba(239, 68, 68, 0.08);
    --chat-error-border: rgba(239, 68, 68, 0.2);
    --chat-error-text:   #fca5a5;
}

/* ── Light Theme ── */
html[data-theme="light"] {
    --bg-body:           #f8fafc;
    --bg-sidebar:        #ffffff;
    --bg-glass:          rgba(255, 255, 255, 0.7);
    --bg-glass-subtle:   rgba(0, 0, 0, 0.01);
    --bg-glass-hover:    rgba(255, 255, 255, 0.9);
    --bg-input:          #ffffff;
    --bg-input-focus:    #ffffff;
    --bg-header:         rgba(255, 255, 255, 0.8);
    --bg-table-header:   rgba(0, 0, 0, 0.03);
    --bg-table-hover:    rgba(0, 0, 0, 0.02);
    --bg-modal:          #ffffff;
    --bg-modal-overlay:  rgba(0, 0, 0, 0.4);
    --bg-option:         #ffffff;
    --bg-code:           rgba(0, 0, 0, 0.05);
    --bg-output-log:     rgba(0, 0, 0, 0.03);
    --bg-toggle-off:     rgba(0, 0, 0, 0.12);

    --border-glass:      rgba(0, 0, 0, 0.08);
    --border-glass-strong: rgba(0, 0, 0, 0.12);
    --border-input:      rgba(0, 0, 0, 0.15);
    --border-table:      rgba(0, 0, 0, 0.06);
    --border-subtle:     rgba(0, 0, 0, 0.06);

    --text-heading:      #0f172a;
    --text-body:         #334155;
    --text-secondary:    #64748b;
    --text-muted:        #94a3b8;
    --text-timestamp:    #94a3b8;
    --text-white:        #0f172a;
    --text-placeholder:  rgba(100, 116, 139, 0.6);

    --focus-ring:        rgba(59, 130, 246, 0.5);
    --focus-shadow:      rgba(59, 130, 246, 0.15);

    --grid-line:         rgba(59, 130, 246, 0.04);

    --scrollbar-thumb:   rgba(0, 0, 0, 0.15);
    --scrollbar-hover:   rgba(0, 0, 0, 0.25);

    --glass-shine:       rgba(255, 255, 255, 0.6);
    --glass-shine-subtle: rgba(255, 255, 255, 0.4);

    --logo-brightness:   1.0;

    /* Sidebar */
    --sidebar-link:        #475569;
    --sidebar-link-hover-bg: rgba(0, 0, 0, 0.05);
    --sidebar-link-hover:  #0f172a;
    --sidebar-active-bg:   rgba(59, 130, 246, 0.08);
    --sidebar-active-color: #2563eb;
    --sidebar-active-border: rgba(59, 130, 246, 0.2);
    --sidebar-section:     #94a3b8;
    --sidebar-toggle-bg:   #f1f5f9;
    --sidebar-toggle-border: rgba(0, 0, 0, 0.1);
    --sidebar-welcome:     #64748b;
    --sidebar-scrollbar:   rgba(0, 0, 0, 0.1);

    /* Particles */
    --particle-line:     59, 130, 246;
    --particle-node:     59, 130, 246;

    /* Status colors */
    --success-bg:        rgba(34, 197, 94, 0.1);
    --success-border:    rgba(34, 197, 94, 0.25);
    --success-text:      #16a34a;
    --error-bg:          rgba(239, 68, 68, 0.08);
    --error-border:      rgba(239, 68, 68, 0.2);
    --error-text:        #dc2626;
    --warning-bg:        rgba(251, 191, 36, 0.1);
    --warning-border:    rgba(251, 191, 36, 0.25);
    --warning-text:      #d97706;
    --info-bg:           rgba(59, 130, 246, 0.08);
    --info-border:       rgba(59, 130, 246, 0.2);
    --info-text:         #2563eb;

    /* Logout button */
    --logout-bg:         rgba(239, 68, 68, 0.08);
    --logout-border:     rgba(239, 68, 68, 0.15);
    --logout-text:       #dc2626;
    --logout-hover-bg:   rgba(239, 68, 68, 0.15);

    /* Chart.js */
    --chart-grid:        rgba(0, 0, 0, 0.06);
    --chart-border:      rgba(0, 0, 0, 0.08);
    --chart-label:       #64748b;
    --chart-legend:      #475569;

    /* Chatbot */
    --chat-user-bg:      linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.06));
    --chat-user-border:  rgba(59, 130, 246, 0.2);
    --chat-user-shine:   rgba(59, 130, 246, 0.15);
    --chat-bot-bg:       rgba(0, 0, 0, 0.02);
    --chat-bot-border:   rgba(0, 0, 0, 0.06);
    --chat-bot-shine:    rgba(255, 255, 255, 0.5);
    --chat-code-color:   #0e7490;
    --chat-code-bg:      rgba(0, 0, 0, 0.06);
    --chat-link:         #2563eb;
    --chat-link-hover:   #1d4ed8;
    --chat-li:           #475569;
    --chat-blockquote:   rgba(59, 130, 246, 0.3);
    --chat-table-th-bg:  rgba(0, 0, 0, 0.04);
    --chat-table-th:     #0f172a;
    --chat-table-td:     #475569;
    --chat-table-border: rgba(0, 0, 0, 0.1);
    --chat-table-td-border: rgba(0, 0, 0, 0.06);
    --chat-table-even:   rgba(0, 0, 0, 0.02);
    --chat-table-hover:  rgba(0, 0, 0, 0.04);
    --chat-error-bg:     rgba(239, 68, 68, 0.06);
    --chat-error-border: rgba(239, 68, 68, 0.15);
    --chat-error-text:   #dc2626;
}

/* ── Smooth Theme Transition ── */
body,
.glass-card,
.glass-header,
.dark-input,
.dark-modal,
.kpi-card {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Light theme glass card shadow (replaces the glass-morphism glow with a subtle drop shadow) */
html[data-theme="light"] .glass-card,
html[data-theme="light"] .kpi-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Light theme sidebar shadow */
html[data-theme="light"] #sidebar {
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
}

/* Light theme modal shadow */
html[data-theme="light"] .dark-modal {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Light theme input shadow on focus */
html[data-theme="light"] .dark-input:focus {
    box-shadow: 0 0 0 3px var(--focus-shadow), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ── Theme Toggle Button Styles ── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--sidebar-link);
    background: transparent;
    border: 1px solid transparent;
}
.theme-toggle-btn:hover {
    background: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover);
}

/* ── Floating Toggle (auth pages) ── */
.theme-toggle-floating {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    padding: 0.5rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
}
.theme-toggle-floating:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-glass-strong);
    color: var(--text-heading);
}