/* ══════════════════════════════════════════════════════
   Helvetiq AI — Light / Dark Theme System
   ══════════════════════════════════════════════════════ */

/* ── Dark Theme (Default) ── */
:root {
    --bg-body: #212121;
    --bg-sidebar: #171717;
    --bg-header: #212121;
    --bg-card: rgba(10, 28, 38, 0.55);
    --bg-input: #2f2f2f;
    --bg-hover: #262626;
    --bg-elevated: #262626;
    --bg-boot: #0e0e10;

    --border-default: #333;
    --border-subtle: #2a2a2a;
    --border-strong: #444;

    --text-primary: #e5e5e5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --text-inverse: #212121;

    --glass-bg: rgba(10, 28, 38, 0.55);
    --glass-border: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.22);
    --glass-shadow: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.18);

    --msg-user-bg: #2f2f2f;
    --msg-ai-bg: transparent;

    --scrollbar-thumb: rgba(255,255,255,0.14);
    --scrollbar-hover: rgba(255,255,255,0.22);

    --overlay-bg: rgba(0,0,0,0.5);

    color-scheme: dark;
}

/* ── Light Theme ── */
[data-theme="light"] {
    --bg-body: #f5f5f5;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-input: #ffffff;
    --bg-hover: #f3f4f6;
    --bg-elevated: #ffffff;
    --bg-boot: #f5f5f5;

    --border-default: #e0e0e0;
    --border-subtle: #eeeeee;
    --border-strong: #d1d5db;

    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #888888;
    --text-inverse: #ffffff;

    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.30);
    --glass-shadow: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10);

    --msg-user-bg: #e8e8e8;
    --msg-ai-bg: transparent;

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

    --overlay-bg: rgba(0,0,0,0.3);

    color-scheme: light;
}

/* ══════════════════════════════════════════════════════
   Tailwind Utility Overrides for Light Theme
   ══════════════════════════════════════════════════════ */

/* Text colors */
[data-theme="light"] .text-white { color: #1a1a1a !important; }
[data-theme="light"] .text-neutral-200 { color: #374151 !important; }
[data-theme="light"] .text-neutral-300 { color: #4b5563 !important; }
[data-theme="light"] .text-neutral-400 { color: #6b7280 !important; }
[data-theme="light"] .text-neutral-500 { color: #9ca3af !important; }

/* Background colors */
[data-theme="light"] .bg-neutral-800 { background-color: #f3f4f6 !important; }
[data-theme="light"] .bg-neutral-700 { background-color: #e5e7eb !important; }

/* Hover states */
[data-theme="light"] .hover\:bg-neutral-700:hover { background-color: #e5e7eb !important; }
[data-theme="light"] .hover\:bg-neutral-800:hover { background-color: #e5e7eb !important; }
[data-theme="light"] .hover\:text-white:hover { color: #1a1a1a !important; }
[data-theme="light"] .hover\:text-red-400:hover { color: #dc2626 !important; }

/* Border colors */
[data-theme="light"] .border-neutral-700 { border-color: #d1d5db !important; }
[data-theme="light"] .border-neutral-600 { border-color: #d1d5db !important; }

/* Additional background overrides */
[data-theme="light"] .bg-neutral-600 { background-color: #d1d5db !important; }
[data-theme="light"] .bg-neutral-500 { background-color: #9ca3af !important; }
[data-theme="light"] .bg-neutral-800\/50 { background-color: rgba(0, 0, 0, 0.04) !important; }

/* Additional text overrides */
[data-theme="light"] .text-neutral-100 { color: #374151 !important; }

/* Additional hover overrides */
[data-theme="light"] .hover\:bg-neutral-500:hover { background-color: #d1d5db !important; }
[data-theme="light"] .hover\:bg-neutral-600:hover { background-color: #d1d5db !important; }

/* Blue accent (badges like Browser Agent) */
[data-theme="light"] .bg-blue-900\/40 { background-color: rgba(59, 130, 246, 0.12) !important; }
[data-theme="light"] .text-blue-400 { color: #2563eb !important; }
[data-theme="light"] .text-blue-300 { color: #2563eb !important; }

/* Green status */
[data-theme="light"] .text-green-400 { color: #16a34a !important; }
[data-theme="light"] .bg-green-900\/30 { background-color: rgba(22, 163, 74, 0.08) !important; }
[data-theme="light"] .border-green-800 { border-color: rgba(22, 163, 74, 0.3) !important; }

/* Red / danger */
[data-theme="light"] .text-red-400 { color: #dc2626 !important; }
[data-theme="light"] .text-red-500 { color: #dc2626 !important; }
[data-theme="light"] .bg-red-900\/30 { background-color: rgba(220, 38, 38, 0.08) !important; }

/* Yellow / warning */
[data-theme="light"] .text-yellow-400 { color: #ca8a04 !important; }
[data-theme="light"] .text-yellow-500 { color: #ca8a04 !important; }

/* Placeholder text */
[data-theme="light"] .placeholder-neutral-500::placeholder { color: #9ca3af !important; }

/* Opacity for SVG icons in buttons */
[data-theme="light"] .channel-filter svg,
[data-theme="light"] .approval-filter svg { opacity: 0.85 !important; }

/* Logo / Shield image — darken for light background */
[data-theme="light"] img[src*="logo"] {
    filter: brightness(0.15) !important;
}

/* Input and textarea elements with inline Tailwind bg */
[data-theme="light"] input[class*="bg-neutral-800"],
[data-theme="light"] textarea[class*="bg-neutral-800"],
[data-theme="light"] select[class*="bg-neutral-800"],
[data-theme="light"] input[class*="bg-neutral-700"],
[data-theme="light"] textarea[class*="bg-neutral-700"],
[data-theme="light"] select[class*="bg-neutral-700"] {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1a1a1a !important;
}

/* Focus ring adjustments */
[data-theme="light"] .focus\:ring-neutral-500:focus { --tw-ring-color: #9ca3af !important; }
[data-theme="light"] .focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6 !important; }

/* ══════════════════════════════════════════════════════
   Component Overrides for Light Theme
   ══════════════════════════════════════════════════════ */

/* Sidebar */
[data-theme="light"] .sidebar {
    background: var(--bg-sidebar) !important;
    color: var(--text-primary) !important;
    border-right: 1px solid var(--border-default);
}
[data-theme="light"] .sidebar-header {
    border-bottom-color: var(--border-default) !important;
}
[data-theme="light"] .sidebar-footer {
    border-top-color: var(--border-default) !important;
}
[data-theme="light"] .sidebar-nav a {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .sidebar-nav a:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .sidebar-nav a.active {
    background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] [data-brand-logo-main] {
    color: var(--text-primary) !important;
}

/* Main Area */
[data-theme="light"] .main-area {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .main-header {
    background: var(--bg-header) !important;
    border-bottom-color: var(--border-default) !important;
}

/* Glass Cards */
[data-theme="light"] .glass-card {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px var(--glass-border) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .glass-card:hover {
    border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.45) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35) !important;
}

/* Frost Panel */
[data-theme="light"] .frost-panel {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Cards (playbooks etc.) */
[data-theme="light"] .card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: var(--border-default) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .card:hover {
    border-color: var(--border-strong) !important;
}

/* Buttons */
[data-theme="light"] .sidebar-toggle {
    background: var(--bg-elevated) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .sidebar-toggle:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
[data-theme="light"] .home-btn,
[data-theme="light"] .widget-chip {
    background: var(--bg-elevated) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .home-btn:hover,
[data-theme="light"] .widget-chip:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* Chat Messages */
[data-theme="light"] .message-user {
    background: var(--msg-user-bg) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .message-sira {
    color: var(--text-primary) !important;
}

/* Input Area */
[data-theme="light"] .input-area {
    background: var(--bg-header) !important;
}

/* Chat scroll */
[data-theme="light"] .chat-scroll {
    background: var(--bg-body) !important;
}

/* Scrollbars */
[data-theme="light"] .home-widget-list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
}
[data-theme="light"] .home-widget-list::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover) !important;
}

/* Mobile overlay */
[data-theme="light"] .mobile-overlay.open {
    background: var(--overlay-bg) !important;
}

/* Boot overlay */
[data-theme="light"] .boot-overlay {
    background: var(--bg-boot) !important;
}

/* Collapsed nav (index.html) */
[data-theme="light"] #collapsedNewChatBtn,
[data-theme="light"] #collapsedNav a {
    background: var(--bg-elevated) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] #collapsedNewChatBtn:hover,
[data-theme="light"] #collapsedNav a:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Provider cards (settings) */
[data-theme="light"] .provider-card {
    background: var(--bg-elevated) !important;
    border-color: var(--border-default) !important;
}

/* Input fields (playbooks, settings) */
[data-theme="light"] .input-field {
    background: var(--bg-input) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Select elements */
[data-theme="light"] select {
    background: var(--bg-input) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Workspace status bar */
[data-theme="light"] .workspace-status-bar.ws-bar-collapsed {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .workspace-status-bar.ws-bar-expanded {
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Table overrides (inbox, meetings, etc.) */
[data-theme="light"] table th {
    background: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-default) !important;
}
[data-theme="light"] table td {
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] table tr:hover td {
    background: var(--bg-hover) !important;
}

/* Playbook steps */
[data-theme="light"] .step-pending {
    background: #e5e7eb !important;
    color: #6b7280 !important;
}

/* Section titles */
[data-theme="light"] .section-title {
    color: #6b7280 !important;
}

/* Sidebar section titles */
[data-theme="light"] .sidebar-section-title {
    color: #9ca3af !important;
}

/* Channel badges (Inbox, Calls — Kanal column) */
[data-theme="light"] .channel-email,
[data-theme="light"] .channel-whatsapp,
[data-theme="light"] .channel-slack,
[data-theme="light"] .channel-call {
    background: #e5e7eb !important;
    color: #374151 !important;
}

/* Approval type badges */
[data-theme="light"] .approval-email-draft,
[data-theme="light"] .approval-auto-reply,
[data-theme="light"] .approval-meeting {
    background: #e5e7eb !important;
    color: #374151 !important;
}

/* Message rows */
[data-theme="light"] .message-row:hover { background: rgba(0, 0, 0, 0.03) !important; }
[data-theme="light"] .message-row.unread { background: rgba(0, 0, 0, 0.04) !important; }

/* Divide colors */
[data-theme="light"] .divide-neutral-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e5e7eb !important;
}

/* Modal overlays */
[data-theme="light"] .bg-black\/50 { background-color: rgba(0, 0, 0, 0.3) !important; }

/* Blue button states (Push Deaktivieren) */
[data-theme="light"] .bg-blue-600 { background-color: #2563eb !important; }
[data-theme="light"] .hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }

/* Priority badges */
[data-theme="light"] .prio-high { color: #dc2626 !important; }
[data-theme="light"] .prio-medium { color: #ca8a04 !important; }
[data-theme="light"] .prio-low { color: #16a34a !important; }

/* Sentiment */
[data-theme="light"] .sentiment-positive { color: #16a34a !important; }
[data-theme="light"] .sentiment-neutral { color: #6b7280 !important; }
[data-theme="light"] .sentiment-negative { color: #dc2626 !important; }

/* Toggle Switches (peer-checked green must win over bg-neutral-600) */
[data-theme="light"] .peer:checked ~ .peer-checked\:bg-green-600 {
    background-color: #16a34a !important;
}
[data-theme="light"] input.peer:not(:checked) + div[class*="bg-neutral-600"] {
    background-color: #d1d5db !important;
    border: 1px solid #9ca3af;
}
[data-theme="light"] input.peer:checked + div[class*="bg-neutral-600"] {
    border: 1px solid #16a34a;
}

/* Role badges — add border for contrast on same-color rows */
[data-theme="light"] span[class*="rounded-full"][class*="bg-neutral-"] {
    border: 1px solid #d1d5db;
}

/* Inbox tab badges — keep white text on colored bg */
[data-theme="light"] #messagesBadge {
    background-color: #6b7280 !important;
    color: #ffffff !important;
}
[data-theme="light"] #approvalsBadge {
    background-color: #f97316 !important;
    color: #ffffff !important;
}

/* Home widget modals — lighter overlay, white content */
[data-theme="light"] #termineModal,
[data-theme="light"] #emailsModal,
[data-theme="light"] #tasksModal,
[data-theme="light"] #remindersModal {
    background: rgba(0, 0, 0, 0.2) !important;
}
[data-theme="light"] #termineModal > .glass-card,
[data-theme="light"] #emailsModal > .glass-card,
[data-theme="light"] #tasksModal > .glass-card,
[data-theme="light"] #remindersModal > .glass-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
}

/* ══════════════════════════════════════════════════════
   Theme Toggle Button
   ══════════════════════════════════════════════════════ */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
[data-theme="dark"] .theme-toggle,
:not([data-theme]) .theme-toggle {
    color: #a3a3a3;
}
[data-theme="dark"] .theme-toggle:hover,
:not([data-theme]) .theme-toggle:hover {
    background: #262626;
    color: #fff;
}
[data-theme="light"] .theme-toggle {
    color: var(--text-secondary);
}
[data-theme="light"] .theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Icon swap */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-flex; }
[data-theme="light"] .theme-icon-sun { display: inline-flex; }
[data-theme="light"] .theme-icon-moon { display: none; }

/* ══════════════════════════════════════════════════════
   Smooth Transition
   ══════════════════════════════════════════════════════ */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}