/* AgentOS Design System & Styles */

:root {
    /* Color Palette */
    --color-primary: #3b82f6;
    /* blue-500 */
    --color-primary-hover: #2563eb;
    /* blue-600 */
    --color-primary-glow: rgba(59, 130, 246, 0.5);

    --color-bg-dark: #020617;
    /* slate-950 */
    --color-bg-card: #0f172a;
    /* slate-900 */
    --color-bg-overlay: rgba(15, 23, 42, 0.85);

    --color-text-main: #e2e8f0;
    /* slate-200 */
    --color-text-muted: #94a3b8;
    /* slate-400 */
    --color-text-inverted: #ffffff;

    --color-border-subtle: rgba(148, 163, 184, 0.1);
    --color-border-hover: rgba(59, 130, 246, 0.3);

    /* Status Colors */
    --color-success: #10b981;
    /* emerald-500 */
    --color-warning: #f59e0b;
    /* amber-500 */
    --color-danger: #ef4444;
    /* red-500 */
    --color-info: #3b82f6;
    /* blue-500 */

    /* Typography */
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Effects */
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: 1px solid var(--color-border-subtle);
    --glass-blur: blur(12px);
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 9999px;

    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Scrollbar colors */
    --scrollbar-thumb: #334155;
    --scrollbar-thumb-hover: #475569;
}

/* ========================================
   LIGHT THEME OVERRIDES - Professional Minimalistic Design
   ======================================== */
[data-theme="light"] {
    /* Premium minimalistic backgrounds - soft, neutral palette */
    --color-bg-dark: #fafbfc;
    /* Very soft gray-white - premium feel */
    --color-bg-card: #ffffff;
    /* Pure white cards for maximum clarity */
    --color-bg-overlay: rgba(255, 255, 255, 0.98);
    --color-sidebar-bg: #f4f6f8;
    /* Subtle cool gray for sidebar */

    /* Refined typography - professional contrast */
    --color-text-main: #1a202c;
    /* Deep charcoal - easier on eyes than pure black */
    --color-text-muted: #64748b;
    /* Balanced gray - clear but not harsh */
    --color-text-inverted: #fafbfc;
    /* For dark backgrounds */

    /* Minimal borders - clean separation */
    --color-border-subtle: rgba(148, 163, 184, 0.15);
    /* Softer borders */
    --color-border-hover: rgba(59, 130, 246, 0.3);

    /* Glass effect for light mode */
    --glass-bg: rgba(255, 255, 255, 0.95);

    /* Scrollbar colors - subtle */
    --scrollbar-thumb: #d1d5db;
    --scrollbar-thumb-hover: #9ca3af;
}

/* Light theme specific overrides for hardcoded colors */
[data-theme="light"] body {
    background-color: #fafbfc;
    /* Very soft gray-white for premium feel */
}

[data-theme="light"] .bg-slate-950 {
    background-color: #fafbfc !important;
}

[data-theme="light"] .bg-slate-900 {
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .bg-slate-900\/50,
[data-theme="light"] .bg-slate-900\/30 {
    background-color: #f9fafb !important;
}

[data-theme="light"] .bg-slate-800 {
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    color: #1a202c !important;
}

/* Fix text-white on light backgrounds */
[data-theme="light"] .bg-slate-800 .text-white,
[data-theme="light"] .bg-slate-900 .text-white,
[data-theme="light"] .bg-slate-800.text-white,
[data-theme="light"] .bg-slate-900.text-white {
    color: #1e293b !important;
}

/* Fix text-white in tables (contacts, organizations) */
[data-theme="light"] table .text-white,
[data-theme="light"] tbody .text-white,
[data-theme="light"] td .text-white,
[data-theme="light"] #contacts-tbody .text-white,
[data-theme="light"] #organizations-tbody .text-white,
[data-theme="light"] #orgs-tbody .text-white {
    color: #1e293b !important;
}

/* Organization avatars - gray background with dark text in light mode */
[data-theme="light"] #orgs-tbody .bg-gradient-to-br.from-amber-900\/50,
[data-theme="light"] #organizations-tbody .bg-gradient-to-br.from-amber-900\/50,
[data-theme="light"] table .bg-gradient-to-br[class*="from-amber-900"] {
    background: #e5e7eb !important;
    color: #1f2937 !important;
}

[data-theme="light"] #orgs-tbody .text-amber-400,
[data-theme="light"] #organizations-tbody .text-amber-400,
[data-theme="light"] table .bg-gradient-to-br[class*="from-amber-900"] .text-amber-400 {
    color: #1f2937 !important;
}

[data-theme="light"] .bg-slate-800\/50,
[data-theme="light"] .bg-slate-800\/40,
[data-theme="light"] .bg-slate-800\/30 {
    background-color: #f9fafb !important;
}

[data-theme="light"] .bg-slate-700,
[data-theme="light"] .bg-slate-700\/30,
[data-theme="light"] .bg-slate-700\/50 {
    background-color: #f4f6f8 !important;
    /* Subtle cool gray */
    color: #1a202c !important;
}

/* bg-slate-600 - used for buttons and interactive elements */
[data-theme="light"] .bg-slate-600,
[data-theme="light"] .bg-slate-600\/50 {
    background-color: #e5e7eb !important;
    /* Clean gray */
    color: #1a202c !important;
}

[data-theme="light"] .text-slate-200 {
    color: #334155 !important;
}

[data-theme="light"] .text-slate-300 {
    color: #475569 !important;
}

[data-theme="light"] .text-slate-400 {
    color: #64748b !important;
}

[data-theme="light"] .text-slate-500 {
    color: #64748b !important;
}

/* === PROFESSIONAL TEXT COLORS FOR LIGHT MODE === */
/* Extremely muted, easy on eyes - maximum readability */
[data-theme="light"] .text-sky-400 {
    color: #475569 !important;
    /* Neutral gray - easy on eyes */
}

[data-theme="light"] .text-cyan-400 {
    color: #475569 !important;
    /* Neutral gray */
}

/* Tone down ALL bright colors to neutral grays with slight tints */
[data-theme="light"] .text-emerald-400,
[data-theme="light"] .text-green-400 {
    color: #15803d !important;
    /* Deep green - only for success states */
}

[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-yellow-400 {
    color: #64748b !important;
    /* Neutral gray for general use */
}

[data-theme="light"] .text-purple-400,
[data-theme="light"] .text-violet-400 {
    color: #64748b !important;
    /* Neutral gray */
}

[data-theme="light"] .text-pink-400 {
    color: #64748b !important;
    /* Neutral gray */
}

[data-theme="light"] .text-orange-400 {
    color: #64748b !important;
    /* Neutral gray */
}

[data-theme="light"] .text-blue-400 {
    color: #1e40af !important;
    /* Keep blue for primary actions */
}

[data-theme="light"] .text-red-400 {
    color: #991b1b !important;
    /* Keep red for errors/alerts */
}

[data-theme="light"] .text-slate-600 {
    color: #475569 !important;
}

[data-theme="light"] .border-slate-700,
[data-theme="light"] .border-slate-800 {
    border-color: #e5e7eb !important;
}

[data-theme="light"] .border-slate-600\/30,
[data-theme="light"] .border-slate-600\/50 {
    border-color: rgba(209, 213, 219, 0.5) !important;
}

[data-theme="light"] .border-white\/5 {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* === REMOVE EXCESSIVE COLORED BORDERS === */
/* Replace bright colored borders with subtle neutral borders */
[data-theme="light"] .border-cyan-600\/20,
[data-theme="light"] .border-cyan-600\/30,
[data-theme="light"] .border-purple-600\/20,
[data-theme="light"] .border-purple-600\/30,
[data-theme="light"] .border-amber-600\/20,
[data-theme="light"] .border-amber-600\/30,
[data-theme="light"] .border-emerald-600\/20,
[data-theme="light"] .border-emerald-600\/30,
[data-theme="light"] .border-blue-600\/20,
[data-theme="light"] .border-blue-600\/30 {
    border-color: #e5e7eb !important;
}

/* Status border colors - keep only essential ones */
[data-theme="light"] .border-emerald-500\/20,
[data-theme="light"] .border-emerald-500\/30 {
    border-color: #d1fae5 !important;
    /* Light green for success */
}

[data-theme="light"] .border-red-500\/20,
[data-theme="light"] .border-red-500\/30 {
    border-color: #fee2e2 !important;
    /* Light red for errors */
}

[data-theme="light"] .border-blue-500\/20,
[data-theme="light"] .border-blue-500\/30 {
    border-color: #dbeafe !important;
    /* Light blue for info */
}

/* Light mode input styling */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: #3b82f6 !important;
}

/* Light mode glass effects */
[data-theme="light"] .glass {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

[data-theme="light"] .glass-strong {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Light mode email body container */
/* Email body colors - preserve original email styling in light mode */

/* Light mode notifications */
[data-theme="light"] .email-notification {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(148, 163, 184, 0.3);
}

/* Light mode scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Light mode active tab */
[data-theme="light"] .active-tab {
    background-color: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* === PROFESSIONAL BUTTON HOVER STATES === */
/* Clean, subtle hover effects for light mode */
[data-theme="light"] .hover\:bg-slate-800:hover,
[data-theme="light"] .hover\:bg-slate-700:hover {
    background-color: #f1f5f9 !important;
    color: #1a202c !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .hover\:bg-slate-600:hover,
[data-theme="light"] .hover\:bg-slate-600\/50:hover {
    background-color: #e5e7eb !important;
    color: #1a202c !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .hover\:text-white:hover {
    color: #1a202c !important;
}

/* Fix dark bg buttons to have proper light mode styling */
[data-theme="light"] .bg-slate-800,
[data-theme="light"] .bg-slate-700 {
    background-color: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    color: #1a202c !important;
    box-shadow: none !important;
}

[data-theme="light"] .bg-slate-800:hover,
[data-theme="light"] .bg-slate-700:hover {
    background-color: #f1f5f9 !important;
    border-color: #d1d5db !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Data explorer filter/action buttons - keep minimal */
[data-theme="light"] #explorer-content .bg-slate-700,
[data-theme="light"] #explorer-content .bg-slate-800,
[data-theme="light"] #explorer-content button.bg-slate-700,
[data-theme="light"] #explorer-content button.bg-slate-800 {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}

[data-theme="light"] #explorer-content .bg-slate-700:hover,
[data-theme="light"] #explorer-content .bg-slate-800:hover {
    background-color: #f1f5f9 !important;
    color: #1a202c !important;
}

/* Tone down orange "Thank" buttons and blue "Promote" buttons */
[data-theme="light"] #explorer-content button {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e5e7eb !important;
}

[data-theme="light"] #explorer-content button:hover {
    background-color: #f1f5f9 !important;
    color: #1a202c !important;
}

/* Light mode focus states for inputs */
[data-theme="light"] .focus\:bg-slate-900:focus {
    background-color: #ffffff !important;
}

/* === PROFESSIONAL SIDEBAR STYLING === */
/* Sidebar container */
[data-theme="light"] #app-view > div:first-child {
    background-color: #fafbfc !important;
    border-right: 1px solid #e5e7eb !important;
}

/* Sidebar header background */
[data-theme="light"] #app-view > div:first-child > div:first-child {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Logo subtitle text */
[data-theme="light"] #app-view > div:first-child .text-slate-400 {
    color: #64748b !important;
}

[data-theme="light"] aside .active,
[data-theme="light"] nav .active {
    background-color: #eff6ff !important;
    /* blue-50 for active state */
    color: #1d4ed8 !important;
    /* blue-700 */
}

/* Sidebar navigation buttons in light mode */
[data-theme="light"] nav button {
    color: #334155 !important;
    box-shadow: none !important;
}

[data-theme="light"] nav button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

[data-theme="light"] nav button.active-tab {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-left-color: #3b82f6 !important;
    box-shadow: none !important;
}

/* Remove shadows from sidebar/nav elements */
[data-theme="light"] aside,
[data-theme="light"] nav,
[data-theme="light"] #app-view > div:first-child,
[data-theme="light"] .sidebar {
    box-shadow: none !important;
}

/* Settings sub-tabs in light mode */
[data-theme="light"] #settings-subtabs button {
    color: #64748b !important;
}

[data-theme="light"] #settings-subtabs button:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

[data-theme="light"] #settings-subtabs button.bg-slate-800\/70 {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}

[data-theme="light"] #settings-chevron {
    color: #94a3b8 !important;
}

/* Fix placeholder-slate-500 class */
[data-theme="light"] .placeholder-slate-500::placeholder {
    color: #64748b !important;
}

/* === CHAT INPUT & SUGGESTIONS === */
[data-theme="light"] #user-input {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #user-input::placeholder {
    color: #64748b !important;
}

/* Suggestion buttons in chat */
[data-theme="light"] .suggestions-container {
    background: rgba(248, 250, 252, 0.8) !important;
}

[data-theme="light"] .suggestion-btn {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .suggestion-btn:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Chat message bubbles */
[data-theme="light"] #chat-container .bg-slate-800\/50 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Chat area styling */
[data-theme="light"] #tab-dashboard .bg-slate-900\/80 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* === CONTACTS TAB FIXES === */
[data-theme="light"] #contacts-search {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Contact tab filters and dropdowns */
[data-theme="light"] #tab-contacts select,
[data-theme="light"] #tab-contacts .bg-slate-900\/50,
[data-theme="light"] #tab-contacts .bg-slate-800\/50 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* Table headers fix for contacts and other tabs */
[data-theme="light"] #tab-contacts thead,
[data-theme="light"] #tab-organizations thead,
[data-theme="light"] #tab-calls thead {
    background-color: #f8fafc !important;
}

[data-theme="light"] #tab-contacts th,
[data-theme="light"] #tab-organizations th,
[data-theme="light"] #tab-calls th {
    background-color: transparent !important;
    color: #374151 !important;
}

/* Custom selects and dropdowns */
[data-theme="light"] .custom-select-trigger,
[data-theme="light"] [class*="custom-select"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* Settings theme toggle buttons */
[data-theme="light"] .theme-option {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #1a202c !important;
}

[data-theme="light"] .theme-option:hover {
    background-color: #f8fafc !important;
}

/* Fix theme option icons to be visible */
[data-theme="light"] .theme-option i,
[data-theme="light"] .theme-option svg,
[data-theme="light"] .theme-option .fa-moon,
[data-theme="light"] .theme-option .fa-sun,
[data-theme="light"] .theme-option .fa-desktop {
    color: #64748b !important;
}

/* Active theme option - blue icon */
[data-theme="light"] .theme-option.active i,
[data-theme="light"] .theme-option.active svg {
    color: #3b82f6 !important;
}

/* Fix text colors in theme options */
[data-theme="light"] .theme-option .text-slate-400,
[data-theme="light"] .theme-option .text-slate-500 {
    color: #64748b !important;
}

[data-theme="light"] .theme-option .font-semibold {
    color: #1a202c !important;
}

[data-theme="light"] .theme-option.active .font-semibold {
    color: #3b82f6 !important;
}

/* === INBOX TAB LIGHT MODE FIXES === */
/* Inbox container background */
[data-theme="light"] #tab-inbox {
    background-color: #f8fafc !important;
}

[data-theme="light"] #tab-inbox .bg-slate-950 {
    background-color: #f8fafc !important;
}

/* Inbox list container */
[data-theme="light"] #inbox-list-container {
    background-color: #ffffff !important;
}

/* Inbox header bar */
[data-theme="light"] #inbox-list-container>div:first-child {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Inbox search input */
[data-theme="light"] #inbox-search {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] #inbox-search:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
}

/* Inbox filter buttons */
[data-theme="light"] #tab-inbox button[id^="btn-filter"] {
    color: #475569 !important;
}

[data-theme="light"] #tab-inbox button[id^="btn-filter"]:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] #tab-inbox button[id^="btn-filter"].active {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}

/* Inbox pagination controls */
[data-theme="light"] #inbox-pagination {
    background-color: #f1f5f9 !important;
}

[data-theme="light"] #inbox-pagination button {
    color: #475569 !important;
}

[data-theme="light"] #inbox-pagination button:hover:not(:disabled) {
    color: #0f172a !important;
}

[data-theme="light"] #inbox-count-badge {
    color: #475569 !important;
}

/* Inbox sync button and status */
[data-theme="light"] #inbox-sync-btn {
    color: #475569 !important;
}

[data-theme="light"] #inbox-sync-btn:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

[data-theme="light"] #email-sync-status-text {
    color: #64748b !important;
}

/* Inbox folder tabs (subtabs) */
[data-theme="light"] #inbox-folder-subtabs button {
    color: #475569 !important;
}

[data-theme="light"] #inbox-folder-subtabs button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] #inbox-folder-subtabs button.active {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

/* Email list items */
[data-theme="light"] #inbox-list {
    background-color: #ffffff !important;
}

[data-theme="light"] #inbox-list>div {
    border-color: #f1f5f9 !important;
}

[data-theme="light"] #inbox-list>div:hover {
    background-color: #f8fafc !important;
}

/* Fix inbox email row dark backgrounds */
[data-theme="light"] .email-row,
[data-theme="light"] #inbox-list .bg-slate-950\/30,
[data-theme="light"] #inbox-list .bg-slate-900\/60,
[data-theme="light"] #inbox-list .bg-slate-800\/30,
[data-theme="light"] #inbox-list > div[data-email-id] {
    background-color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Inbox row hover with premium shadow - using drop-shadow for scrollable container */
[data-theme="light"] .email-row:hover,
[data-theme="light"] #inbox-list > div[data-email-id]:hover {
    background-color: #fafbfc !important;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.08))
            drop-shadow(0 6px 15px rgba(0, 0, 0, 0.06))
            drop-shadow(0 3px 8px rgba(0, 0, 0, 0.04))
            drop-shadow(0 1px 3px rgba(0, 0, 0, 0.03)) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 100 !important;
}

/* Selected/expanded email - persistent hover background */
/* Light mode: use hover background color */
[data-theme="light"] .email-row.bg-blue-600\/10 {
    background-color: #f8fafc !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08) !important;
}

/* Dark mode: keep gray hover background for selected email */
[data-theme="dark"] .email-row.bg-blue-600\/10 {
    background-color: rgba(51, 65, 85, 0.4) !important;
}

.email-row.bg-blue-600\/10 {
    background-color: rgba(51, 65, 85, 0.4) !important;
}

/* Fix inbox unread email backgrounds - make unread more pronounced */
[data-theme="light"] #inbox-list .bg-slate-900\/60 {
    background-color: #f0f9ff !important;
    border-left-color: #3b82f6 !important;
}

/* Unread email row styling - more pronounced in light mode */
[data-theme="light"] .email-row.bg-slate-900\/60 {
    background-color: #f0f9ff !important;
    border-left: 3px solid #3b82f6 !important;
}

/* Unread email text should be bolder/darker */
[data-theme="light"] .email-row.bg-slate-900\/60 .from-name {
    color: #0f172a !important;
    font-weight: 600 !important;
}

[data-theme="light"] .email-row.bg-slate-900\/60 .text-slate-200 {
    color: #1e293b !important;
}

/* Unread email time badge - blue accent */
[data-theme="light"] .email-row.bg-slate-900\/60 .text-blue-400 {
    color: #2563eb !important;
    font-weight: 600 !important;
}

/* Read email styling - more muted */
[data-theme="light"] .email-row.bg-slate-950\/30 {
    background-color: #ffffff !important;
    opacity: 0.85 !important;
}

[data-theme="light"] .email-row.bg-slate-950\/30:hover {
    opacity: 1 !important;
}

/* Unread avatar keeps blue gradient in light mode */
[data-theme="light"] .email-row.bg-slate-900\/60 .from-blue-600.to-indigo-600 {
    background: linear-gradient(to bottom right, #3b82f6, #4f46e5) !important;
}

/* Read avatar - gray in light mode */
[data-theme="light"] .email-row .from-slate-700.to-slate-600 {
    background: linear-gradient(to bottom right, #94a3b8, #64748b) !important;
}

/* Email body containers in light mode - Proton Mail style */
[data-theme="light"] #newest-message,
[data-theme="light"] .bg-slate-900\/40.rounded-2xl,
[data-theme="light"] .border-white\/5.rounded-2xl {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    ring: none !important;
}

/* Older messages in thread - clean white in light mode */
[data-theme="light"] .bg-slate-900\/30.rounded-xl,
[data-theme="light"] .bg-slate-900\/30.border-slate-800 {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Remove email body hover effects in light mode */
[data-theme="light"] .bg-slate-900\/30:hover,
[data-theme="light"] .hover\:bg-slate-800\/50:hover {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Thread message expanded content area */
[data-theme="light"] .bg-slate-900\/30 .email-body-content {
    background-color: #ffffff !important;
}

/* Remove ring styling on email containers */
[data-theme="light"] #newest-message.ring-1,
[data-theme="light"] .ring-1.ring-blue-500\/20,
[data-theme="light"] .ring-1.ring-slate-700 {
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
}

/* Remove blue overlay gradient in light mode */
[data-theme="light"] #newest-message > .absolute.inset-0,
[data-theme="light"] .bg-slate-900\/40 > .absolute.inset-0,
[data-theme="light"] .bg-gradient-to-b.from-blue-500\/5 {
    display: none !important;
}

/* Email body content area - preserve original email styling */
[data-theme="light"] .email-body-content {
    border: none !important;
    background-color: #ffffff !important;
    color: unset !important;
}

/* Override text color rules for email body - let original email colors show */
[data-theme="light"] .email-body-content.text-slate-300,
[data-theme="light"] .email-body-content.text-slate-400,
[data-theme="light"] .email-body-content.text-base {
    color: unset !important;
}

/* Don't let global text color rules affect email content */
[data-theme="light"] .email-body-content *:not(a) {
    color: unset !important;
}

/* ==========================================================================
   Light Mode Email Iframe - Complete CSS Isolation
   Emails render in an iframe in light mode for 100% original styling
   ========================================================================== */
.email-iframe-light {
    width: 100%;
    min-height: 200px;
    border: none;
    background: white;
    display: block;
}

/* Ensure container doesn't interfere with iframe in light mode */
[data-theme="light"] .email-body-content:has(.email-iframe-light) {
    padding: 0 !important;
    background: transparent !important;
}

/* Email header section in light mode - clean white */
[data-theme="light"] #newest-message .border-b,
[data-theme="light"] .bg-slate-900\/40 .border-b {
    border-color: #e5e7eb !important;
}

/* Email detail view background - match Proton Mail's light background */
[data-theme="light"] #email-detail,
[data-theme="light"] #inbox-detail-container,
[data-theme="light"] #inbox-detail-container.bg-slate-950 {
    background-color: #f8f9fa !important;
}

/* Email detail content scrollable area */
[data-theme="light"] #inbox-detail-content {
    background-color: #f8f9fa !important;
}

/* Email detail scroll area */
[data-theme="light"] #email-detail-scroll {
    background-color: #f8f9fa !important;
}

/* Main email body element - this is the actual container */
[data-theme="light"] #email-body,
[data-theme="light"] #email-body.email-body-container,
[data-theme="light"] .email-body-container.prose-invert {
    background-color: #ffffff !important;
    color: unset !important;
    border: none !important;
}

/* Override prose-invert for light mode */
[data-theme="light"] .prose-invert,
[data-theme="light"] #email-body.prose-invert {
    --tw-prose-body: unset !important;
    --tw-prose-headings: unset !important;
    --tw-prose-links: unset !important;
    --tw-prose-bold: unset !important;
    --tw-prose-code: unset !important;
    --tw-prose-quotes: unset !important;
    color: unset !important;
}

[data-theme="light"] #email-body *,
[data-theme="light"] .email-body-container * {
    color: unset !important;
}

/* Email date badge - light mode */
[data-theme="light"] #email-date.bg-slate-900\/50,
[data-theme="light"] #email-date {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}

/* Email header text colors in light mode */
[data-theme="light"] #email-subject {
    color: #0f172a !important;
}

[data-theme="light"] #email-from-name {
    color: #1e293b !important;
}

[data-theme="light"] #email-from-email {
    color: #64748b !important;
}

/* Email body padding container */
[data-theme="light"] .p-8.text-base {
    background-color: #ffffff !important;
}

/* Email detail header bar */
[data-theme="light"] #inbox-detail-content .bg-slate-900\/30 {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Fix inbox email border colors */
[data-theme="light"] #inbox-list .border-slate-800\/50 {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] #inbox-list .border-l-blue-500\/50 {
    border-left-color: #60a5fa !important;
}

[data-theme="light"] #inbox-list .border-l-slate-700 {
    border-left-color: #cbd5e1 !important;
}

/* Fix inbox attachment thumbnails and badges */
[data-theme="light"] #inbox-list .bg-slate-800\/50 {
    background-color: #f1f5f9 !important;
}

[data-theme="light"] #inbox-list .border-slate-700 {
    border-color: #cbd5e1 !important;
}

[data-theme="light"] #inbox-list .border-slate-700\/60 {
    border-color: #cbd5e1 !important;
}

/* Fix inbox thread count and other badges with dark slate backgrounds */
[data-theme="light"] #inbox-list .bg-slate-700\/80 {
    background-color: #cbd5e1 !important;
    color: #1e293b !important;
}

[data-theme="light"] #inbox-list .border-slate-600\/50 {
    border-color: #94a3b8 !important;
}

/* Fix inbox avatar checkbox overlays */
[data-theme="light"] #inbox-list .bg-slate-800 {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] #inbox-list .border-slate-600 {
    border-color: #94a3b8 !important;
}

[data-theme="light"] #inbox-list .border-slate-500 {
    border-color: #94a3b8 !important;
}

/* Inbox detail container */
[data-theme="light"] #inbox-detail-container {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Inbox detail placeholder */
[data-theme="light"] #inbox-detail-placeholder {
    background-color: #fafbfc !important;
}

[data-theme="light"] #inbox-detail-placeholder .bg-slate-900\/50 {
    background-color: #f1f5f9 !important;
}

/* Inbox detail header */
[data-theme="light"] #inbox-detail-content>div:first-child {
    background-color: #fafbfc !important;
    border-color: #e2e8f0 !important;
}

/* Inbox action buttons */
[data-theme="light"] #inbox-detail-content button {
    color: #475569 !important;
}

[data-theme="light"] #inbox-detail-content button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Back button styling */
[data-theme="light"] .inbox-back-btn-responsive {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] .inbox-back-btn-responsive:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .inbox-back-btn-standard {
    color: #475569 !important;
}

/* Inbox vertical dividers */
[data-theme="light"] #tab-inbox .bg-slate-700 {
    background-color: #e2e8f0 !important;
}

/* Checkbox styling in inbox */
[data-theme="light"] #inbox-select-all {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* === CUSTOMSELECT DROPDOWN LIGHT MODE === */
/* Main button/trigger */
[data-theme="light"] .glass-select-btn,
[data-theme="light"] .glass-select-container button:first-child {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] .glass-select-btn:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .glass-select-btn span,
[data-theme="light"] .glass-select-btn .text-slate-300 {
    color: #334155 !important;
}

[data-theme="light"] .glass-select-btn i,
[data-theme="light"] .glass-select-btn .text-slate-500 {
    color: #64748b !important;
}

[data-theme="light"] .glass-select-btn:hover i {
    color: #3b82f6 !important;
}

/* Dropdown menu */
[data-theme="light"] .glass-select-container>div:last-child,
[data-theme="light"] [class*="glass-select"]>div[class*="absolute"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Dropdown menu options */
[data-theme="light"] .glass-select-container button[data-value] {
    color: #475569 !important;
}

[data-theme="light"] .glass-select-container button[data-value]:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Selected option in dropdown */
[data-theme="light"] .glass-select-container button[data-value].text-blue-400,
[data-theme="light"] .glass-select-container button[data-value][class*="bg-blue"] {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

[data-theme="light"] .glass-select-container button[data-value].text-blue-400 i,
[data-theme="light"] .glass-select-container button[data-value].text-blue-500 {
    color: #2563eb !important;
}

/* Group labels in dropdown */
[data-theme="light"] .glass-select-container .text-slate-500 {
    color: #64748b !important;
}

/* Options text in dropdown */
[data-theme="light"] .glass-select-container .text-slate-400 {
    color: #64748b !important;
}

/* === INBOX FOLDER SIDEBAR BUTTONS === */
[data-theme="light"] #inbox-folder-subtabs {
    background-color: transparent !important;
}

[data-theme="light"] #inbox-folder-subtabs button {
    color: #475569 !important;
    background-color: transparent !important;
}

[data-theme="light"] #inbox-folder-subtabs button.text-slate-400 {
    color: #475569 !important;
}

[data-theme="light"] #inbox-folder-subtabs button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] #inbox-folder-subtabs button span {
    color: inherit !important;
}

/* Active folder button - various color states */
[data-theme="light"] #inbox-folder-subtabs button[class*="bg-blue-600"],
[data-theme="light"] #inbox-folder-subtabs button.bg-blue-600\/20 {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

[data-theme="light"] #inbox-folder-subtabs button[class*="bg-emerald-600"],
[data-theme="light"] #inbox-folder-subtabs button.bg-emerald-600\/20 {
    background-color: #d1fae5 !important;
    color: #047857 !important;
}

[data-theme="light"] #inbox-folder-subtabs button[class*="bg-amber-600"],
[data-theme="light"] #inbox-folder-subtabs button.bg-amber-600\/20 {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
}

[data-theme="light"] #inbox-folder-subtabs button[class*="bg-yellow-600"],
[data-theme="light"] #inbox-folder-subtabs button.bg-yellow-600\/20 {
    background-color: #fef9c3 !important;
    color: #a16207 !important;
}

[data-theme="light"] #inbox-folder-subtabs button[class*="bg-slate-600"],
[data-theme="light"] #inbox-folder-subtabs button.bg-slate-600\/30 {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* Folder count badges */
[data-theme="light"] #inbox-folder-subtabs .bg-slate-800 {
    background-color: #f1f5f9 !important;
}

[data-theme="light"] #inbox-folder-subtabs .text-slate-500 {
    color: #64748b !important;
}

/* === TABLE HEADER FIXES (CONTACTS, ORGANIZATIONS, ETC.) === */
[data-theme="light"] thead.bg-slate-800,
[data-theme="light"] thead [class*="bg-slate-"] {
    background-color: #f8fafc !important;
}

[data-theme="light"] thead th {
    background-color: transparent !important;
    color: #374151 !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] thead th span {
    color: #374151 !important;
}

/* Table header text that uses text-slate-400 etc */
[data-theme="light"] thead .text-slate-400,
[data-theme="light"] thead .text-slate-500 {
    color: #64748b !important;
}

/* Sort icons in table headers */
[data-theme="light"] thead .sort-icon {
    color: #94a3b8 !important;
}

[data-theme="light"] thead:hover th {
    color: #1e293b !important;
}

/* === PROFESSIONAL TABLE STYLING === */
[data-theme="light"] table {
    background-color: #ffffff;
    border-radius: 0.5rem;
    overflow: visible;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] table thead {
    background-color: #fafbfc;
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="light"] table th {
    color: #1a202c !important;
    font-weight: 600;
}

/* Fix tbody dark backgrounds */
[data-theme="light"] table tbody {
    background-color: #ffffff !important;
}

[data-theme="light"] table tbody tr {
    border-bottom: 1px solid #f4f6f8;
}

[data-theme="light"] table tbody tr:hover {
    background-color: #fafbfc !important;
    box-shadow:
        0 10px 50px rgba(0, 0, 0, 0.08),
        0 6px 30px rgba(0, 0, 0, 0.06),
        0 3px 15px rgba(0, 0, 0, 0.04),
        0 1px 5px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 100 !important;
    transform: scale(1) !important;
}

/* Specifically target contacts and organizations table rows */
[data-theme="light"] #contacts-tbody tr:hover,
[data-theme="light"] #organizations-tbody tr:hover,
[data-theme="light"] #orgs-tbody tr:hover {
    background-color: #fafbfc !important;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.08))
            drop-shadow(0 6px 15px rgba(0, 0, 0, 0.06))
            drop-shadow(0 3px 8px rgba(0, 0, 0, 0.04))
            drop-shadow(0 1px 3px rgba(0, 0, 0, 0.03)) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 100 !important;
}

[data-theme="light"] table tbody tr {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure base state for specific table rows */
[data-theme="light"] #contacts-tbody tr,
[data-theme="light"] #organizations-tbody tr,
[data-theme="light"] #orgs-tbody tr {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Table containers - allow scrolling properly */
[data-theme="light"] #contacts-table-container,
[data-theme="light"] #organizations-table-container {
    overflow: hidden !important;
}

[data-theme="light"] #contacts-table-container > div,
[data-theme="light"] #organizations-table-container > div {
    overflow: auto !important;
}

[data-theme="light"] table tbody tr:last-child {
    border-bottom: none;
}

/* Fix dark divider colors in tbody */
[data-theme="light"] tbody.divide-y {
    --tw-divide-opacity: 1 !important;
}

[data-theme="light"] .divide-slate-800\/40 > :not([hidden]) ~ :not([hidden]),
[data-theme="light"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: #f4f6f8 !important;
}

/* Fix table row hover states that use dark classes - large visible shadow */
[data-theme="light"] tbody tr.hover\:bg-slate-800\/40:hover,
[data-theme="light"] tbody tr.hover\:bg-slate-800\/50:hover,
[data-theme="light"] tbody tr.hover\:bg-slate-900\/40:hover,
[data-theme="light"] tbody tr.hover\:bg-slate-900\/50:hover {
    background-color: #fafbfc !important;
    box-shadow:
        0 10px 50px rgba(0, 0, 0, 0.08),
        0 6px 30px rgba(0, 0, 0, 0.06),
        0 3px 15px rgba(0, 0, 0, 0.04),
        0 1px 5px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 100 !important;
}

/* Fix all table row elements with dark backgrounds */
[data-theme="light"] tbody tr {
    background-color: transparent !important;
}

/* Fix any bg-slate-900/20 or similar opacity backgrounds on table bodies */
[data-theme="light"] tbody.bg-slate-900\/20,
[data-theme="light"] tbody.bg-slate-900\/30,
[data-theme="light"] tbody.bg-slate-800\/20,
[data-theme="light"] tbody.bg-slate-800\/30 {
    background-color: #ffffff !important;
}

/* Table cells in hover state */
[data-theme="light"] tbody tr:hover td {
    background-color: transparent !important;
}

/* Fix inbox email rows with dark hover states - large visible shadow */
[data-theme="light"] .hover\:bg-slate-800\/40:hover,
[data-theme="light"] .hover\:bg-slate-800\/50:hover,
[data-theme="light"] .hover\:bg-slate-900\/40:hover,
[data-theme="light"] .hover\:bg-slate-900\/50:hover {
    background-color: #fafbfc !important;
    box-shadow:
        0 10px 50px rgba(0, 0, 0, 0.08),
        0 6px 30px rgba(0, 0, 0, 0.06),
        0 3px 15px rgba(0, 0, 0, 0.04),
        0 1px 5px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 100 !important;
}

/* === POLISHED CARD STYLING WITH SHADOWS === */
/* Visible shadows for visual hierarchy and depth */
[data-theme="light"] .glass,
[data-theme="light"] .rounded-xl.glass,
[data-theme="light"] .rounded-lg.glass {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .rounded-xl,
[data-theme="light"] .rounded-lg {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Premium card hover effects - subtle lift */
[data-theme="light"] .glass:hover,
[data-theme="light"] .bg-slate-900:hover,
[data-theme="light"] .bg-slate-800:hover {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease;
    transform: translateY(-1px);
}

/* Data explorer stat cards - enhanced shadows */
[data-theme="light"] #explorer-content .glass {
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Heading cards - prominent shadows for visual hierarchy */
[data-theme="light"] #explorer-content .glass.p-4,
[data-theme="light"] #explorer-content .glass.p-5,
[data-theme="light"] #explorer-content .glass.p-6 {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* === DATA EXPLORER STAT CARDS TEXT - LIGHT MODE === */
/* Fix white text in stat cards (Total Customers, Wholesale, etc.) */
[data-theme="light"] #explorer-content .glass .text-white,
[data-theme="light"] #explorer-content .glass .text-2xl.text-white,
[data-theme="light"] #explorer-content .glass .text-3xl.text-white {
    color: #1e293b !important;
}

/* Keep colored stat numbers visible */
[data-theme="light"] #explorer-content .text-purple-400 {
    color: #7c3aed !important;
}

[data-theme="light"] #explorer-content .text-emerald-400 {
    color: #059669 !important;
}

[data-theme="light"] #explorer-content .text-amber-400 {
    color: #d97706 !important;
}

[data-theme="light"] #explorer-content .text-blue-400 {
    color: #2563eb !important;
}

/* === EMAIL DROPDOWN MENU - LIGHT MODE === */
[data-theme="light"] .email-dropdown {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .email-dropdown button {
    color: #334155 !important;
    background-color: transparent !important;
    border: none !important;
}

[data-theme="light"] .email-dropdown button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="light"] .email-dropdown button i {
    color: #64748b !important;
}

/* === REFINED BUTTONS === */
[data-theme="light"] button:hover {
    transition: all 0.15s ease;
}

/* === AGENTOS BLUE THEME FOR ALL BUTTONS === */
/* Use AgentOS blue for all action buttons */
[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-purple-600,
[data-theme="light"] .bg-violet-600,
[data-theme="light"] .bg-emerald-600,
[data-theme="light"] .bg-green-600,
[data-theme="light"] .bg-amber-600,
[data-theme="light"] .bg-orange-600 {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2) !important;
}

/* Hover state - darker blue */
[data-theme="light"] .bg-blue-600:hover,
[data-theme="light"] .bg-purple-600:hover,
[data-theme="light"] .bg-violet-600:hover,
[data-theme="light"] .bg-emerald-600:hover,
[data-theme="light"] .bg-green-600:hover,
[data-theme="light"] .bg-amber-600:hover,
[data-theme="light"] .bg-orange-600:hover,
[data-theme="light"] .hover\:bg-blue-700:hover,
[data-theme="light"] .hover\:bg-purple-700:hover,
[data-theme="light"] .hover\:bg-emerald-700:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

/* Keep red buttons red for destructive actions */
[data-theme="light"] .bg-red-600,
[data-theme="light"] .hover\:bg-red-700:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

[data-theme="light"] .bg-red-600:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* === PROFESSIONAL MUTED BADGE COLORS === */
/* Extremely subtle, easy on the eyes palette for light mode */
[data-theme="light"] .bg-blue-500\/10,
[data-theme="light"] .bg-blue-500\/20,
[data-theme="light"] .bg-blue-900\/20 {
    background-color: #f8fafc !important;
    /* Almost white with hint of blue */
    color: #1e40af !important;
    /* Deep blue */
    border-color: #e5e7eb !important;
}

[data-theme="light"] .bg-emerald-500\/10,
[data-theme="light"] .bg-emerald-500\/20,
[data-theme="light"] .bg-green-500\/10,
[data-theme="light"] .bg-green-500\/20,
[data-theme="light"] .bg-emerald-900\/20 {
    background-color: #f8fafc !important;
    /* Almost white */
    color: #15803d !important;
    /* Deep green */
    border-color: #e5e7eb !important;
}

[data-theme="light"] .bg-amber-500\/10,
[data-theme="light"] .bg-amber-500\/20,
[data-theme="light"] .bg-yellow-500\/10,
[data-theme="light"] .bg-yellow-500\/20,
[data-theme="light"] .bg-amber-900\/20,
[data-theme="light"] .bg-orange-500\/10,
[data-theme="light"] .bg-orange-500\/20 {
    background-color: #fff7ed !important;
    /* Warm orange-tinted white */
    color: #c2410c !important;
    /* Rich orange-amber */
    border-color: #fed7aa !important;
    /* Soft orange border */
}

/* Wholesale badges - keep purple consistent across app */
[data-theme="light"] .bg-purple-500\/10,
[data-theme="light"] .bg-purple-500\/20,
[data-theme="light"] .bg-purple-900\/50 {
    background-color: #faf5ff !important;
    /* Very light purple */
    color: #7c3aed !important;
    /* Purple-600 */
    border-color: #e9d5ff !important;
    /* Light purple border */
}

[data-theme="light"] .bg-red-500\/10,
[data-theme="light"] .bg-red-500\/20,
[data-theme="light"] .bg-red-900\/20 {
    background-color: #f8fafc !important;
    /* Almost white */
    color: #991b1b !important;
    /* Deep red */
    border-color: #e5e7eb !important;
}

[data-theme="light"] .bg-purple-500\/10,
[data-theme="light"] .bg-purple-500\/20,
[data-theme="light"] .bg-violet-500\/10,
[data-theme="light"] .bg-violet-500\/20,
[data-theme="light"] .bg-purple-900\/20 {
    background-color: #f8fafc !important;
    /* Almost white */
    color: #6b21a8 !important;
    /* Deep purple */
    border-color: #e5e7eb !important;
}

[data-theme="light"] .bg-cyan-500\/10,
[data-theme="light"] .bg-cyan-500\/20,
[data-theme="light"] .bg-cyan-900\/20 {
    background-color: #f8fafc !important;
    /* Almost white */
    color: #0e7490 !important;
    /* Deep cyan */
    border-color: #e5e7eb !important;
}

[data-theme="light"] .bg-orange-500\/10,
[data-theme="light"] .bg-orange-500\/20,
[data-theme="light"] .bg-orange-900\/20 {
    background-color: #f8fafc !important;
    /* Almost white */
    color: #c2410c !important;
    /* Deep orange */
    border-color: #e5e7eb !important;
}

[data-theme="light"] .bg-pink-500\/10,
[data-theme="light"] .bg-pink-500\/20 {
    background-color: #f8fafc !important;
    /* Almost white */
    color: #be185d !important;
    /* Deep pink */
    border-color: #e5e7eb !important;
}

/* === COMPREHENSIVE DARK BACKGROUND FIX FOR ALL bg-slate-800/50 ELEMENTS === */
[data-theme="light"] .bg-slate-800\/50,
[data-theme="light"] button.bg-slate-800\/50,
[data-theme="light"] div.bg-slate-800\/50,
[data-theme="light"] span.bg-slate-800\/50 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* Hover states for bg-slate-800/50 elements */
[data-theme="light"] .bg-slate-800\/50:hover,
[data-theme="light"] button.bg-slate-800\/50:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Fix bg-slate-900/30 elements */
[data-theme="light"] .bg-slate-900\/30,
[data-theme="light"] button.bg-slate-900\/30,
[data-theme="light"] div.bg-slate-900\/30 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* === LOGOUT BUTTON SPECIFIC FIX === */
[data-theme="light"] button[id*="logout"],
[data-theme="light"] button[class*="logout"] {
    background-color: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

[data-theme="light"] button[id*="logout"]:hover,
[data-theme="light"] button[class*="logout"]:hover {
    background-color: #fecaca !important;
    color: #7f1d1d !important;
}

/* === SEARCH BAR COMPREHENSIVE FIX === */
[data-theme="light"] input[type="search"],
[data-theme="light"] input[placeholder*="Search"],
[data-theme="light"] input[placeholder*="search"],
[data-theme="light"] input[id*="search"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

[data-theme="light"] input[type="search"]:focus,
[data-theme="light"] input[placeholder*="Search"]:focus,
[data-theme="light"] input[placeholder*="search"]:focus,
[data-theme="light"] input[id*="search"]:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* === DROPDOWN/SELECT ELEMENTS === */
[data-theme="light"] select.bg-slate-800\/50,
[data-theme="light"] select.bg-slate-900\/50 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* === BUTTON ELEMENTS WITH DARK BACKGROUNDS === */
[data-theme="light"] button.bg-slate-800,
[data-theme="light"] button.bg-slate-900 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

[data-theme="light"] button.bg-slate-800:hover,
[data-theme="light"] button.bg-slate-900:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* === FIX ALL REMAINING DARK DIVS AND CONTAINERS === */
[data-theme="light"] div.bg-slate-950,
[data-theme="light"] div.bg-slate-900,
[data-theme="light"] div.bg-slate-800 {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Specific fixes for containers with opacity */
[data-theme="light"] .bg-slate-900\/80,
[data-theme="light"] .bg-slate-900\/70,
[data-theme="light"] .bg-slate-900\/60 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="light"] .bg-slate-800\/80,
[data-theme="light"] .bg-slate-800\/70,
[data-theme="light"] .bg-slate-800\/60 {
    background-color: rgba(248, 250, 252, 0.9) !important;
}

/* ========================================
   LIGHT MODE CONTRAST FIXES
   ======================================== */

/* === GLOBAL TEXT COLOR OVERRIDES === */
/* These are the most important - slate-400/500/600 are used everywhere for secondary text and icons */
[data-theme="light"] .text-slate-400 {
    color: #475569 !important;
    /* slate-600 - darker for better readability */
}

[data-theme="light"] .text-slate-500 {
    color: #334155 !important;
    /* slate-700 - much darker */
}

[data-theme="light"] .text-slate-600 {
    color: #1e293b !important;
    /* slate-800 - very dark */
}

/* === SVG ICON COLOR FIXES === */
/* Target all SVG elements and their children to ensure icons are visible */
[data-theme="light"] svg.text-slate-400,
[data-theme="light"] svg.text-slate-500,
[data-theme="light"] svg.text-slate-600 {
    color: #475569 !important;
}

/* Fix SVG fill and stroke attributes */
[data-theme="light"] svg path,
[data-theme="light"] svg circle,
[data-theme="light"] svg rect,
[data-theme="light"] svg line,
[data-theme="light"] svg polyline,
[data-theme="light"] svg polygon {
    stroke: currentColor !important;
}

/* Specific targeting for sidebar icons */
[data-theme="light"] nav svg,
[data-theme="light"] aside svg,
[data-theme="light"] .sidebar svg {
    color: #475569 !important;
}

/* Icon containers */
[data-theme="light"] .text-slate-400 svg,
[data-theme="light"] .text-slate-500 svg,
[data-theme="light"] .text-slate-600 svg {
    color: #475569 !important;
}

/* Navigation and sidebar text */
[data-theme="light"] nav .text-slate-400,
[data-theme="light"] nav .text-slate-500,
[data-theme="light"] aside .text-slate-400,
[data-theme="light"] aside .text-slate-500 {
    color: #475569 !important;
}

/* Hover states for navigation */
[data-theme="light"] nav button:hover,
[data-theme="light"] nav a:hover,
[data-theme="light"] aside button:hover,
[data-theme="light"] aside a:hover {
    color: #1e293b !important;
}

[data-theme="light"] nav button:hover svg,
[data-theme="light"] nav a:hover svg,
[data-theme="light"] aside button:hover svg,
[data-theme="light"] aside a:hover svg {
    color: #1e293b !important;
}

/* === ALL TEXT ELEMENTS - COMPREHENSIVE FIX === */
[data-theme="light"] p.text-slate-400,
[data-theme="light"] span.text-slate-400,
[data-theme="light"] div.text-slate-400,
[data-theme="light"] label.text-slate-400,
[data-theme="light"] td.text-slate-400,
[data-theme="light"] th.text-slate-400 {
    color: #475569 !important;
}

[data-theme="light"] p.text-slate-500,
[data-theme="light"] span.text-slate-500,
[data-theme="light"] div.text-slate-500,
[data-theme="light"] label.text-slate-500,
[data-theme="light"] td.text-slate-500,
[data-theme="light"] th.text-slate-500 {
    color: #334155 !important;
}

/* Secondary text and descriptions */
[data-theme="light"] .text-sm.text-slate-400,
[data-theme="light"] .text-xs.text-slate-400,
[data-theme="light"] .text-sm.text-slate-500,
[data-theme="light"] .text-xs.text-slate-500 {
    color: #64748b !important;
    /* slate-500 - medium contrast for small text */
}

/* === PRESERVE WHITE TEXT ON COLORED BACKGROUNDS === */
/* Override the text color back to white for buttons with colored backgrounds */
[data-theme="light"] .bg-blue-600,
[data-theme="light"] .bg-blue-500,
[data-theme="light"] .bg-blue-600 *,
[data-theme="light"] .bg-blue-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-emerald-600,
[data-theme="light"] .bg-emerald-600 *,
[data-theme="light"] .bg-emerald-500,
[data-theme="light"] .bg-emerald-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-green-600,
[data-theme="light"] .bg-green-600 *,
[data-theme="light"] .bg-green-500,
[data-theme="light"] .bg-green-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-purple-600,
[data-theme="light"] .bg-purple-600 *,
[data-theme="light"] .bg-purple-500,
[data-theme="light"] .bg-purple-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-red-600,
[data-theme="light"] .bg-red-600 *,
[data-theme="light"] .bg-red-500,
[data-theme="light"] .bg-red-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-amber-600,
[data-theme="light"] .bg-amber-600 *,
[data-theme="light"] .bg-amber-500,
[data-theme="light"] .bg-amber-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-orange-600,
[data-theme="light"] .bg-orange-600 *,
[data-theme="light"] .bg-orange-500,
[data-theme="light"] .bg-orange-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-indigo-600,
[data-theme="light"] .bg-indigo-600 *,
[data-theme="light"] .bg-indigo-500,
[data-theme="light"] .bg-indigo-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-cyan-600,
[data-theme="light"] .bg-cyan-600 *,
[data-theme="light"] .bg-cyan-500,
[data-theme="light"] .bg-cyan-500 * {
    color: #ffffff !important;
}

[data-theme="light"] .bg-violet-600,
[data-theme="light"] .bg-violet-600 *,
[data-theme="light"] .bg-violet-500,
[data-theme="light"] .bg-violet-500 * {
    color: #ffffff !important;
}

/* === STATUS/ACCENT TEXT COLORS - Make darker for light backgrounds === */
[data-theme="light"] .text-emerald-400 {
    color: #059669 !important;
    /* emerald-600 */
}

[data-theme="light"] .text-green-400 {
    color: #16a34a !important;
    /* green-600 */
}

[data-theme="light"] .text-amber-400 {
    color: #ea580c !important;
    /* orange-600 - more orange/amber, less yellow */
}

[data-theme="light"] .text-yellow-400 {
    color: #d97706 !important;
    /* amber-600 - warmer tone */
}

[data-theme="light"] .text-red-400 {
    color: #dc2626 !important;
    /* red-600 */
}

[data-theme="light"] .text-purple-400 {
    color: #9333ea !important;
    /* purple-600 */
}

[data-theme="light"] .text-blue-400 {
    color: #2563eb !important;
    /* blue-600 */
}

[data-theme="light"] .text-orange-400 {
    color: #ea580c !important;
    /* orange-600 */
}

[data-theme="light"] .text-indigo-400 {
    color: #4f46e5 !important;
    /* indigo-600 */
}

[data-theme="light"] .text-rose-400 {
    color: #e11d48 !important;
    /* rose-600 */
}

[data-theme="light"] .text-cyan-400 {
    color: #0891b2 !important;
    /* cyan-600 */
}

[data-theme="light"] .text-sky-400 {
    color: #0284c7 !important;
    /* sky-600 */
}

[data-theme="light"] .text-violet-400 {
    color: #7c3aed !important;
    /* violet-600 */
}

[data-theme="light"] .text-pink-400 {
    color: #db2777 !important;
    /* pink-600 */
}

[data-theme="light"] .text-teal-400 {
    color: #0d9488 !important;
    /* teal-600 */
}

[data-theme="light"] .text-lime-400 {
    color: #65a30d !important;
    /* lime-600 */
}

/* === PLACEHOLDER TEXT === */
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
    /* slate-400 - lighter but still visible */
    opacity: 1 !important;
}

/* === BUTTON TEXT === */
/* Ensure button text is dark enough */
[data-theme="light"] button {
    color: #1e293b !important;
}

/* Keep white text on colored button backgrounds */
[data-theme="light"] button.bg-blue-600,
[data-theme="light"] button.bg-blue-500,
[data-theme="light"] button.bg-emerald-600,
[data-theme="light"] button.bg-emerald-500,
[data-theme="light"] button.bg-green-600,
[data-theme="light"] button.bg-green-500,
[data-theme="light"] button.bg-purple-600,
[data-theme="light"] button.bg-purple-500,
[data-theme="light"] button.bg-red-600,
[data-theme="light"] button.bg-red-500 {
    color: #ffffff !important;
}

/* === FORM ELEMENTS === */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    color: #0f172a !important;
    /* slate-900 - very dark for input text */
}

[data-theme="light"] label {
    color: #334155 !important;
    /* slate-700 */
}

/* === TABLE CONTENT === */
[data-theme="light"] table td {
    color: #1e293b !important;
    /* slate-800 - dark text for table cells */
}

[data-theme="light"] table th {
    color: #0f172a !important;
    /* slate-900 - darkest for headers */
    font-weight: 600 !important;
}

/* === ADDITIONAL TEXT ELEMENTS === */
/* Headers and titles */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: #0f172a !important;
    /* slate-900 */
}

/* Paragraph text */
[data-theme="light"] p {
    color: #334155 !important;
    /* slate-700 */
}

/* Links */
[data-theme="light"] a {
    color: #2563eb !important;
    /* blue-600 */
}

[data-theme="light"] a:hover {
    color: #1d4ed8 !important;
    /* blue-700 */
}

/* === SPECIFIC UI COMPONENT FIXES === */
/* Dropdown arrows and select indicators */
[data-theme="light"] select option {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* Radio and checkbox labels */
[data-theme="light"] input[type="radio"]+label,
[data-theme="light"] input[type="checkbox"]+label {
    color: #1e293b !important;
}

/* Badge and tag text */
[data-theme="light"] .badge,
[data-theme="light"] .tag {
    color: #1e293b !important;
}

/* Card titles and content */
[data-theme="light"] .card-title,
[data-theme="light"] .card-header {
    color: #0f172a !important;
}

[data-theme="light"] .card-content,
[data-theme="light"] .card-body {
    color: #334155 !important;
}

/* === DARK BACKGROUND ELEMENTS - Now properly converted for light mode === */
/* These are handled by the earlier rules (lines 107-133) */

/* === TABLE HEADERS === */
[data-theme="light"] table th {
    color: #1e293b !important;
    /* slate-800 */
}

/* Tags and badges - use light colors in light mode */
/* Handled by earlier rules */

/* === AVATAR GRADIENT FIXES === */
/* Fix avatar cards with dark gradient backgrounds */
[data-theme="light"] .bg-gradient-to-br.from-slate-700,
[data-theme="light"] .bg-gradient-to-br.from-slate-800,
[data-theme="light"] .bg-gradient-to-br.from-slate-900 {
    background: linear-gradient(to bottom right, #e2e8f0, #cbd5e1) !important;
}

/* Fix status-colored avatar gradients for light mode */
[data-theme="light"] .bg-gradient-to-br[class*="from-emerald-900"],
[data-theme="light"] .bg-gradient-to-br[class*="from-green-900"] {
    background: linear-gradient(to bottom right, #d1fae5, #a7f3d0) !important;
}

[data-theme="light"] .bg-gradient-to-br[class*="from-blue-900"] {
    background: linear-gradient(to bottom right, #dbeafe, #bfdbfe) !important;
}

[data-theme="light"] .bg-gradient-to-br[class*="from-amber-900"],
[data-theme="light"] .bg-gradient-to-br[class*="from-orange-900"],
[data-theme="light"] .bg-gradient-to-br[class*="from-yellow-900"] {
    background: linear-gradient(to bottom right, #fef3c7, #fde68a) !important;
}

[data-theme="light"] .bg-gradient-to-br[class*="from-purple-900"],
[data-theme="light"] .bg-gradient-to-br[class*="from-violet-900"] {
    background: linear-gradient(to bottom right, #ede9fe, #ddd6fe) !important;
}

[data-theme="light"] .bg-gradient-to-br[class*="from-red-900"] {
    background: linear-gradient(to bottom right, #fee2e2, #fecaca) !important;
}

/* Fix blue/indigo gradients commonly used in headers and icons */
[data-theme="light"] .bg-gradient-to-br.from-blue-600,
[data-theme="light"] .bg-gradient-to-r.from-blue-600,
[data-theme="light"] .bg-gradient-to-br[class*="from-blue-600"] {
    background: linear-gradient(to bottom right, #3b82f6, #2563eb) !important;
}

/* Thread message styling for light mode */
[data-theme="light"] .thread-message {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .thread-message:hover {
    background-color: #f8fafc !important;
}

[data-theme="light"] .thread-message .border-slate-800\/50 {
    border-color: #e2e8f0 !important;
}

/* Email reply buttons in light mode - same style as message-tools */
[data-theme="light"] .email-reply-buttons {
    border-color: #e2e8f0 !important;
    background-color: transparent !important;
}

[data-theme="light"] .email-reply-buttons button {
    color: #64748b !important;
    background-color: transparent !important;
}

[data-theme="light"] .email-reply-buttons button:hover {
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
}

[data-theme="light"] .email-reply-buttons .w-px {
    background-color: #e2e8f0 !important;
}

[data-theme="light"] .email-reply-buttons button i {
    color: inherit !important;
}

/* AI Draft box in light mode */
[data-theme="light"] #reply-box {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] #reply-box .bg-slate-950\/50 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] #reply-box .text-slate-500 {
    color: #64748b !important;
}

[data-theme="light"] #reply-box .text-purple-400 {
    color: #7c3aed !important;
}

[data-theme="light"] #reply-box .text-emerald-400 {
    color: #059669 !important;
}

[data-theme="light"] #reply-box .text-blue-400 {
    color: #2563eb !important;
}

[data-theme="light"] #reply-textarea {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="light"] #ai-draft-loading {
    color: #2563eb !important;
}

/* Contact dropdown in light mode */
[data-theme="light"] .contact-dropdown {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .contact-dropdown button {
    color: #475569 !important;
}

[data-theme="light"] .contact-dropdown button:hover {
    background-color: #f1f5f9 !important;
}

[data-theme="light"] .contact-dropdown-wrapper > button {
    color: #1e293b !important;
}

[data-theme="light"] .contact-dropdown-wrapper > button:hover {
    color: #3b82f6 !important;
}

[data-theme="light"] .contact-dropdown-wrapper .text-slate-500 {
    color: #64748b !important;
}

/* Message tools in light mode */
[data-theme="light"] .message-tools {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .message-tools button {
    color: #64748b !important;
}

[data-theme="light"] .message-tools button:hover {
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
}

[data-theme="light"] .message-tools .w-px {
    background-color: #e2e8f0 !important;
}

[data-theme="light"] .bg-gradient-to-r[class*="from-blue-900"] {
    background: linear-gradient(to right, #eff6ff, #dbeafe) !important;
}

[data-theme="light"] .bg-gradient-to-r[class*="from-purple-900"] {
    background: linear-gradient(to right, #f3e8ff, #e9d5ff) !important;
}

/* === SKELETON LOADING FIXES === */
/* Fix skeleton loader dark backgrounds */
[data-theme="light"] .bg-slate-800\/60,
[data-theme="light"] .bg-slate-800\/40 {
    background-color: #e5e7eb !important;
}

[data-theme="light"] .bg-slate-900\/10 {
    background-color: rgba(241, 245, 249, 0.6) !important;
}

/* Fix skeleton loading spinner and border */
[data-theme="light"] .border-slate-700 {
    border-color: #d1d5db !important;
}

[data-theme="light"] .border-slate-800\/40,
[data-theme="light"] .border-slate-800\/50,
[data-theme="light"] .border-slate-800\/60 {
    border-color: #e5e7eb !important;
}

[data-theme="light"] .border-t-blue-500 {
    border-top-color: #3b82f6 !important;
}

/* Fix skeleton card borders */
[data-theme="light"] .glass.border-slate-800\/60 {
    border-color: #e5e7eb !important;
}

/* === DATA EXPLORER HEADER FIXES === */
/* Fix dark header background in data explorer */
[data-theme="light"] .bg-slate-950\/80,
[data-theme="light"] .bg-slate-950\/60 {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Fix data explorer navigation pills container */
[data-theme="light"] .bg-slate-900\/50 {
    background-color: #f4f6f8 !important;
    border: 1px solid #e5e7eb !important;
}

/* === MINIMAL BUTTON COLORS IN DATA EXPLORER === */
/* Clean, neutral buttons - use subtle gray instead of bright colors */
[data-theme="light"] #view-btn-overview,
[data-theme="light"] #view-btn-organizations,
[data-theme="light"] #view-btn-customers,
[data-theme="light"] #view-btn-orders,
[data-theme="light"] #view-btn-products,
[data-theme="light"] #view-btn-analytics {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}

/* Active state - subtle but clear */
[data-theme="light"] #view-btn-overview.bg-blue-600,
[data-theme="light"] #view-btn-organizations.bg-blue-600,
[data-theme="light"] #view-btn-customers.bg-blue-600,
[data-theme="light"] #view-btn-orders.bg-blue-600,
[data-theme="light"] #view-btn-products.bg-blue-600,
[data-theme="light"] #view-btn-analytics.bg-blue-600 {
    background-color: #1a202c !important;
    color: #ffffff !important;
    border: 1px solid #1a202c !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Hover state - minimal */
[data-theme="light"] #view-btn-overview:hover,
[data-theme="light"] #view-btn-organizations:hover,
[data-theme="light"] #view-btn-customers:hover,
[data-theme="light"] #view-btn-orders:hover,
[data-theme="light"] #view-btn-products:hover,
[data-theme="light"] #view-btn-analytics:hover {
    background-color: #f1f5f9 !important;
    color: #1a202c !important;
}

/* Fix shadow colors for data explorer elements */
[data-theme="light"] .shadow-blue-900\/20 {
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1) !important;
}

/* Fix ring colors */
[data-theme="light"] .ring-blue-500\/20,
[data-theme="light"] .ring-blue-500\/50 {
    --tw-ring-color: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="light"] .ring-1[class*="ring-"],
[data-theme="light"] [class*="ring-"] {
    --tw-ring-opacity: 0.15 !important;
}

/* === NEW MESSAGE BUTTON FIX === */
/* Only the New Message nav button should be blue */
[data-theme="light"] #nav-new-message {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
}

[data-theme="light"] #nav-new-message:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* === COMPOSE WINDOW LIGHT MODE FIXES === */
/* Fix dark compose header bar */
[data-theme="light"] .compose-header {
    background-color: #ffffff !important;
    color: #1a202c !important;
    border-bottom: 1px solid #e5e7eb !important;
}

[data-theme="light"] .compose-header button {
    background-color: transparent !important;
    color: #64748b !important;
}

[data-theme="light"] .compose-header button:hover {
    background-color: #f1f5f9 !important;
    color: #1a202c !important;
}

[data-theme="light"] .compose-header button:hover.hover\:bg-red-600 {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Fix compose panel background and borders */
[data-theme="light"] .compose-panel {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Fix compose body elements */
[data-theme="light"] .compose-body {
    background-color: #ffffff !important;
}

[data-theme="light"] .compose-body input,
[data-theme="light"] .compose-body select,
[data-theme="light"] .compose-body [contenteditable] {
    color: #1a202c !important;
    background-color: transparent !important;
}

[data-theme="light"] .compose-body .border-gray-200,
[data-theme="light"] .compose-body .border-b {
    border-color: #e5e7eb !important;
}

[data-theme="light"] .compose-body .bg-gray-50 {
    background-color: #f9fafb !important;
}

[data-theme="light"] .compose-body .text-gray-500 {
    color: #64748b !important;
}

[data-theme="light"] .compose-body .text-gray-800 {
    color: #1a202c !important;
}

/* Fix Send button in compose footer - use AgentOS blue */
[data-theme="light"] .compose-panel button#send-btn,
[data-theme="light"] .compose-panel button[id^="send-btn-"] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="light"] .compose-panel button#send-btn:hover,
[data-theme="light"] .compose-panel button[id^="send-btn-"]:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

/* Fix compose toolbar buttons - match message-tools style (gray, not blue) */
[data-theme="light"] .compose-panel .bg-gray-50 {
    background-color: #f9fafb !important;
}

[data-theme="light"] .compose-panel button.text-gray-600,
[data-theme="light"] .compose-panel button[class*="text-gray-600"] {
    background-color: transparent !important;
    color: #64748b !important;
}

[data-theme="light"] .compose-panel button.text-gray-600:hover,
[data-theme="light"] .compose-panel button[class*="text-gray-600"]:hover {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}

[data-theme="light"] .compose-panel button.text-gray-600 i,
[data-theme="light"] .compose-panel button[class*="text-gray-600"] i {
    color: inherit !important;
}

[data-theme="light"] .compose-panel .bg-gray-300 {
    background-color: #e2e8f0 !important;
}

/* Keep blue backgrounds for elements with explicit bg-blue classes */
[data-theme="light"] .bg-blue-500,
[data-theme="light"] .bg-blue-600.text-white {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="light"] .bg-blue-500:hover,
[data-theme="light"] .bg-blue-600.text-white:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

/* Keep white text on blue backgrounds - only for explicit blue classes */
[data-theme="light"] .bg-blue-500 *,
[data-theme="light"] .bg-blue-600 *,
[data-theme="light"] .bg-blue-500,
[data-theme="light"] .bg-blue-600,
[data-theme="light"] button.bg-blue-500,
[data-theme="light"] button.bg-blue-600,
[data-theme="light"] .bg-blue-500 i,
[data-theme="light"] .bg-blue-600 i,
[data-theme="light"] .bg-blue-500 span,
[data-theme="light"] .bg-blue-600 span,
[data-theme="light"] button.bg-blue-500 span,
[data-theme="light"] button.bg-blue-600 span {
    color: #ffffff !important;
}

/* Keep text-white class white on blue backgrounds */
[data-theme="light"] .bg-blue-500 .text-white,
[data-theme="light"] .bg-blue-600 .text-white,
[data-theme="light"] .bg-blue-500.text-white,
[data-theme="light"] .bg-blue-600.text-white,
[data-theme="light"] button.bg-blue-500.text-white,
[data-theme="light"] button.bg-blue-600.text-white {
    color: #ffffff !important;
}

/* Force white text on all blue button children */
[data-theme="light"] button[class*="bg-blue"] {
    color: #ffffff !important;
}

[data-theme="light"] button[class*="bg-blue"] * {
    color: #ffffff !important;
}

/* Theme transition for smooth switching */
body,
body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme option selection styling */
.theme-option.active,
.theme-option[data-theme-option].active {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.theme-option.active .font-semibold {
    color: #3b82f6 !important;
}

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    font-family: var(--font-family-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.loader {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none;
}

.active-tab {
    background-color: rgba(30, 41, 59, 0.5);
    border-left: 4px solid var(--color-primary);
    color: var(--color-text-inverted);
}

/* Glassmorphism & Gradients */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.glass-strong {
    background: var(--color-bg-overlay);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: var(--glass-border);
}

.glow-text {
    text-shadow: 0 0 20px var(--color-primary-glow);
}

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotateX(12deg);
    }

    50% {
        transform: translateY(-15px) rotateX(12deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.perspective-1000 {
    perspective: 1000px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Streaming cursor animation */
.streaming-cursor {
    display: inline-block;
    animation: blink 0.8s ease-in-out infinite;
    color: var(--color-primary);
    margin-left: 2px;
    font-weight: bold;
}

@keyframes blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

.typing-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: #60a5fa;
    animation: blink 0.8s ease-in-out infinite;
    margin-left: 2px;
    vertical-align: middle;
    border-radius: 1px;
}

.streaming-text {
    display: inline;
}

/* Suggestion Button Animations */
.suggestion-btn {
    animation: fadeInScale 0.3s ease-out;
    animation-fill-mode: both;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.suggestion-btn:nth-child(1) {
    animation-delay: 0.1s;
}

.suggestion-btn:nth-child(2) {
    animation-delay: 0.15s;
}

.suggestion-btn:nth-child(3) {
    animation-delay: 0.2s;
}

.suggestion-btn:nth-child(4) {
    animation-delay: 0.25s;
}

.suggestion-btn:nth-child(5) {
    animation-delay: 0.3s;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(5px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ripple effect on hover */
.suggestion-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
}

.suggestion-btn:hover::before {
    width: 300%;
    height: 300%;
}

/* Enhanced suggestion container */
.suggestions-container {
    position: relative;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
    backdrop-filter: blur(10px);
}

.suggestions-container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(147, 51, 234, 0.3) 100%);
    border-radius: 0.75rem;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.suggestions-container:hover::before {
    opacity: 0.1;
}

/* Input highlight animation */
@keyframes inputHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Chat message styling */
.streaming-text p {
    margin-bottom: 0.75rem;
}

.streaming-text p:last-child {
    margin-bottom: 0;
}

.streaming-text ul,
.streaming-text ol {
    margin: 0.75rem 0;
}

.streaming-text li {
    margin: 0.375rem 0;
}

.streaming-text strong {
    font-weight: 600;
    color: #f1f5f9;
}

.streaming-text code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
}

.streaming-text pre {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
    line-height: 1.5;
}

/* Avatar animations */
@keyframes avatarPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

/* Email Notification Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
}

.animate-slide-down {
    animation: slideDown 0.3s ease-out forwards;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Email sync status pulse */
#email-sync-status.bg-emerald-500 {
    animation: syncPulse 2s ease-in-out infinite;
}

@keyframes syncPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

/* Notification styles */
.notification {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 9999;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.notification.show {
    transform: translateY(0);
    opacity: 1;
}

.notification-success {
    background: #059669;
    color: white;
}

.notification-error {
    background: #dc2626;
    color: white;
}

.notification-info {
    background: #2563eb;
    color: white;
}

.notification-warning {
    background: #d97706;
    color: white;
}

/* ========================================
   EMAIL BODY CONTRAST & READABILITY FIXES
   JavaScript handles inline style stripping.
   CSS provides base styling and fallbacks.
   ======================================== */

/* Container for email HTML content */
/* Email body container - default/dark mode styling */
[data-theme="dark"] .email-body-container,
.email-body-container {
    background: #0f172a;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(51, 65, 85, 0.5);
    overflow-x: auto;
    /* Base text color - JS overrides inline styles */
    color: #e2e8f0;
}

/* Light mode - preserve email original styling */
[data-theme="light"] .email-body-container {
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    color: unset !important;
}

/* Default text color for all elements (lower specificity, JS handles inline) */
[data-theme="dark"] .email-body-container *,
.email-body-container * {
    color: inherit;
}

/* Light mode - don't override text colors */
[data-theme="light"] .email-body-container * {
    color: unset;
}

/* Style links - keep them visible in dark mode */
[data-theme="dark"] .email-body-container a,
.email-body-container a {
    color: #60a5fa !important;
    text-decoration: underline;
}

[data-theme="dark"] .email-body-container a:hover,
.email-body-container a:hover {
    color: #93c5fd !important;
}

/* Light mode - preserve original link colors */
[data-theme="light"] .email-body-container a {
    color: unset !important;
}

/* Table styling */
.email-body-container table {
    border-collapse: collapse;
    max-width: 100%;
}

.email-body-container td,
.email-body-container th {
    padding: 0.5rem;
    vertical-align: top;
}

/* Images */
.email-body-container img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

/* Blockquotes - dark mode */
[data-theme="dark"] .email-body-container blockquote,
.email-body-container blockquote {
    border-left: 3px solid #3b82f6;
    padding-left: 1rem;
    margin-left: 0;
    color: #94a3b8;
}

/* Light mode - preserve blockquote colors */
[data-theme="light"] .email-body-container blockquote {
    color: unset;
}

/* Code blocks - dark mode */
[data-theme="dark"] .email-body-container pre,
[data-theme="dark"] .email-body-container code,
.email-body-container pre,
.email-body-container code {
    background: #1e293b;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

/* Light mode - preserve code styling */
[data-theme="light"] .email-body-container pre,
[data-theme="light"] .email-body-container code {
    background: unset;
}

/* Horizontal rules - dark mode */
[data-theme="dark"] .email-body-container hr,
.email-body-container hr {
    border-color: #334155;
    margin: 1rem 0;
}

/* Lists */
.email-body-container ul,
.email-body-container ol {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.email-body-container li {
    margin: 0.25rem 0;
}

/* Bold text - dark mode */
[data-theme="dark"] .email-body-container strong,
[data-theme="dark"] .email-body-container b,
.email-body-container strong,
.email-body-container b {
    color: #f1f5f9;
    font-weight: 600;
}

/* Light mode - preserve bold colors */
[data-theme="light"] .email-body-container strong,
[data-theme="light"] .email-body-container b {
    color: unset;
}

/* Hide title elements */
.email-body-container title {
    display: none;
}

/* Headers in emails - dark mode */
[data-theme="dark"] .email-body-container h1,
[data-theme="dark"] .email-body-container h2,
[data-theme="dark"] .email-body-container h3,
[data-theme="dark"] .email-body-container h4,
.email-body-container h1,
.email-body-container h2,
.email-body-container h3,
.email-body-container h4 {
    color: #f1f5f9;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* Light mode - preserve header colors */
[data-theme="light"] .email-body-container h1,
[data-theme="light"] .email-body-container h2,
[data-theme="light"] .email-body-container h3,
[data-theme="light"] .email-body-container h4 {
    color: unset;
}

/* Email Notification Card */
.email-notification {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(71, 85, 105, 0.5);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 360px;
}

.email-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.email-notification.hiding {
    transform: translateX(120%);
    opacity: 0;
}

/* Toast Notification */
.toast-notification {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border-width: 1px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-notification.hiding {
    transform: translateX(120%);
    opacity: 0;
}

/* New email highlight in inbox */
.new-email-highlight {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%) !important;
    border-left: 3px solid #3b82f6 !important;
}

@keyframes newEmailPulse {

    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(59, 130, 246, 0.1);
    }
}

.new-email-highlight {
    animation: newEmailPulse 1.5s ease-in-out 2;
}

/* ===========================================
   FILES TAB - File Management Styles
   =========================================== */

/* File card animations */
.file-card {
    animation: fileCardEnter 0.4s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fileCardEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for file cards */
.file-card:nth-child(1) {
    animation-delay: 0ms;
}

.file-card:nth-child(2) {
    animation-delay: 30ms;
}

.file-card:nth-child(3) {
    animation-delay: 60ms;
}

.file-card:nth-child(4) {
    animation-delay: 90ms;
}

.file-card:nth-child(5) {
    animation-delay: 120ms;
}

.file-card:nth-child(6) {
    animation-delay: 150ms;
}

.file-card:nth-child(7) {
    animation-delay: 180ms;
}

.file-card:nth-child(8) {
    animation-delay: 210ms;
}

.file-card:nth-child(9) {
    animation-delay: 240ms;
}

.file-card:nth-child(10) {
    animation-delay: 270ms;
}

/* Drag and drop zone styling */
#files-drop-zone {
    transition: all 0.3s ease;
    position: relative;
}

#files-drop-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0) 0%, rgba(147, 51, 234, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#files-drop-zone.drag-active {
    border-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.1) !important;
    transform: scale(1.01);
}

#files-drop-zone.drag-active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
}

#files-drop-zone.drag-active i {
    animation: bounce 0.5s ease infinite;
    color: #3b82f6;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Modal animations */
.animate-fade-in {
    animation: modalFadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
    animation: modalFadeOut 0.2s ease-out forwards;
}

.animate-scale-in {
    animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* File thumbnail hover effect */
.file-card .aspect-square img {
    transition: transform 0.3s ease;
}

.file-card:hover .aspect-square img {
    transform: scale(1.05);
}

/* Checkbox selection animation */
.file-card button[onclick*="toggleFileSelection"] {
    transition: all 0.2s ease;
}

.file-card button[onclick*="toggleFileSelection"]:hover {
    transform: scale(1.1);
}

/* Category badge hover */
.file-card span[class*="rounded-full"] {
    transition: all 0.2s ease;
}

.file-card:hover span[class*="rounded-full"] {
    transform: scale(1.05);
}

/* Dropdown menu animation */
.file-card .absolute.right-0 {
    animation: dropdownEnter 0.2s ease-out forwards;
    transform-origin: top right;
}

@keyframes dropdownEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Upload progress bar animation */
#upload-progress-bar {
    position: relative;
    overflow: hidden;
}

#upload-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    animation: progressShine 1.5s ease-in-out infinite;
}

@keyframes progressShine {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* Category button selection */
.category-btn {
    transition: all 0.2s ease;
}

.category-btn:hover {
    transform: translateY(-1px);
}

.category-btn:active {
    transform: translateY(0);
}

/* File type icons pulse on hover */
.file-card .aspect-square i {
    transition: all 0.3s ease;
}

.file-card:hover .aspect-square i {
    transform: scale(1.1);
}

/* Scrollbar hide utility */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbars in pipeline/opportunities columns */
#tab-opportunities .overflow-y-auto,
#tab-opportunities .overflow-x-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#tab-opportunities .overflow-y-auto::-webkit-scrollbar,
#tab-opportunities .overflow-x-auto::-webkit-scrollbar {
    display: none;
}

/* Preview modal image container */
#preview-modal img {
    animation: imageZoomIn 0.3s ease-out forwards;
}

@keyframes imageZoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Table row hover effect for list view */
#tab-files table tbody tr {
    transition: background-color 0.2s ease;
}

/* Selection bar animation */
.animate-slide-up {
    animation: selectionSlideUp 0.3s ease-out forwards;
}

@keyframes selectionSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Upload button pulse animation */
label[class*="bg-blue-600"]:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* Empty state animation */
#tab-files .fa-folder-open.text-4xl {
    animation: emptyStatePulse 2s ease-in-out infinite;
}

@keyframes emptyStatePulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Bulk Actions Bar Animation */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.2s ease-out forwards;
}

/* Email checkbox styling */
.email-checkbox:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

/* Inbox list compact/expanded mode transitions */
/* Default: expanded mode - show expanded-only, hide compact-only */
#inbox-list .expanded-only {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#inbox-list .compact-only {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#inbox-list .from-name {
    width: auto;
    min-width: 0;
    max-width: none;
    transition: all 0.2s ease;
}

/* Compact mode: hide expanded-only, show compact-only */
#inbox-list-container.compact-mode #inbox-list .expanded-only {
    opacity: 0;
    visibility: hidden;
}

#inbox-list-container.compact-mode #inbox-list .compact-only {
    opacity: 1;
    visibility: visible;
}

#inbox-list-container.compact-mode #inbox-list .from-name {
    width: 100%;
    max-width: 100%;
}

/* Keyboard navigation focus */
.keyboard-focused {
    background-color: rgba(51, 65, 85, 0.5);
    outline: 1px solid rgba(59, 130, 246, 0.3);
}

/* Global Glass Select Styles */
.glass-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.glass-select-wrapper::after {
    content: '107';
    /* FontAwesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1rem;
    color: #94a3b8;
    /* slate-400 */
    pointer-events: none;
    transition: color 0.2s ease;
    font-size: 0.75rem;
}

.glass-select-wrapper:hover::after {
    color: #e2e8f0;
    /* slate-200 */
}

.glass-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--glass-bg, rgba(15, 23, 42, 0.6));
    backdrop-filter: var(--glass-blur, blur(12px));
    border: 1px solid var(--color-border-subtle, rgba(148, 163, 184, 0.1));
    color: var(--color-text-main, #e2e8f0);
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.glass-select:hover {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.2);
}

.glass-select:focus {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Inbox Compact Mode Overrides */
#inbox-list-container[data-expanded="false"] .compact-hide {
    display: none !important;
}

#inbox-list-container[data-expanded="false"] .compact-shrink {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.glass-select option {
    background-color: #0f172a;
    /* slate-900 */
    color: #e2e8f0;
    /* slate-200 */
    padding: 0.5rem;
}

/* ========================================
   Inbox Responsive: Full-width detail view for windows < 1820px
   When an email is selected, hide list and show detail full-width
   ======================================== */

/* Below 1820px: When viewing an email, list is hidden and detail is full-width */
@media (max-width: 1819px) {

    /* When email is selected (compact-mode), hide the list entirely */
    #inbox-list-container.compact-mode {
        display: none !important;
    }

    /* Detail container takes full width */
    #inbox-detail-container {
        border-left: none !important;
    }

    /* Show the prominent responsive back button */
    #inbox-detail-container .inbox-back-btn-responsive {
        display: flex !important;
    }

    /* Hide the standard (smaller) back button */
    #inbox-detail-container .inbox-back-btn-standard {
        display: none !important;
    }

    /* Show prev/next navigation buttons */
    #inbox-detail-container .inbox-nav-responsive {
        display: flex !important;
    }
}

/* At 1820px and above: Show split view (list + detail side by side) */
@media (min-width: 1820px) {

    /* Hide the responsive back button on wide screens (standard one is visible) */
    #inbox-detail-container .inbox-back-btn-responsive {
        display: none !important;
    }

    /* Standard back button is visible by default (inline styles) */
}

/* ========================================
   Sort Icons for Tables
   ======================================== */

/* Sort icon base styles */
.sort-icon {
    width: 12px;
    text-align: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

/* On hover over sortable header, show preview of sort direction */
th[onclick*="sort"]:hover .sort-icon.fa-sort {
    /* Inactive icon on hover - show it will sort descending first */
    color: #fbbf24 !important;
    /* amber-400 */
}

th[onclick*="sort"]:hover .sort-icon.fa-sort-down {
    /* Currently desc, on click will go asc - show up arrow preview */
    color: #fbbf24 !important;
}

th[onclick*="sort"]:hover .sort-icon.fa-sort-up {
    /* Currently asc, on click will go desc - show down arrow preview */
    color: #fbbf24 !important;
}

/* ==============================================
   COLLAPSIBLE SIDEBAR
   ============================================== */

/* Mobile: sidebar hidden by default, slides in from left */
#main-sidebar {
    transition: transform 0.3s ease-in-out, width 0.2s ease-in-out;
}

/* Hide scrollbar on sidebar nav while keeping it scrollable */
#main-sidebar nav {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

#main-sidebar nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
    background: transparent;
}

#main-sidebar.sidebar-open {
    transform: translateX(0);
}

/* Desktop collapsed state */
@media (min-width: 768px) {
    #main-sidebar.sidebar-collapsed {
        width: 5rem; /* 80px - icons only */
    }

    #main-sidebar.sidebar-collapsed .sidebar-text {
        display: none;
    }

    #main-sidebar.sidebar-collapsed nav button,
    #main-sidebar.sidebar-collapsed .settings-nav-group button,
    #main-sidebar.sidebar-collapsed .inbox-nav-group button {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    #main-sidebar.sidebar-collapsed nav button i,
    #main-sidebar.sidebar-collapsed .settings-nav-group button i,
    #main-sidebar.sidebar-collapsed .inbox-nav-group button i {
        width: auto;
    }

    #main-sidebar.sidebar-collapsed #settings-subtabs,
    #main-sidebar.sidebar-collapsed #inbox-folder-subtabs {
        display: none !important;
    }

    #main-sidebar.sidebar-collapsed .p-4.md\:p-6 {
        padding: 1rem;
        justify-content: center;
    }

    /* Footer in collapsed state - just the logout icon */
    #main-sidebar.sidebar-collapsed .p-3.border-t {
        padding: 0.5rem;
    }

    #main-sidebar.sidebar-collapsed .p-3.border-t > div {
        justify-content: center;
    }

    #main-sidebar.sidebar-collapsed .p-3.border-t button[onclick="logout()"] {
        flex: none;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        gap: 0;
    }
}

/* ========================================
   MOBILE LAYOUT FIXES
   ======================================== */

/* Use dynamic viewport height on iOS to avoid content behind browser chrome */
#app-view {
    height: 100dvh;
    height: 100vh; /* fallback for older browsers */
}

@supports (height: 100dvh) {
    #app-view {
        height: 100dvh;
    }
}

/* On mobile, the content area has a mobile header (h-14 = 56px) plus tab panels.
   Tab panels use h-full (100% of parent), but that ignores the header sibling,
   pushing content off-screen. Fix: override to flex-based sizing on mobile. */
@media (max-width: 767px) {
    /* Tab panels must flex instead of h-full to account for mobile header */
    [id^="tab-"] {
        height: auto !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

    /* Chat input safe area for iOS */
    #tab-dashboard > div:last-child {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    /* Dashboard header: hide button text, icon-only on mobile */
    #tab-dashboard > div:first-child .flex.items-center.gap-3 {
        gap: 0.375rem;
    }

    #tab-dashboard > div:first-child .flex.items-center.gap-3 button span,
    #global-store-btn > span:not(.rounded-full) {
        display: none;
    }

    /* Make buttons smaller on mobile */
    #tab-dashboard > div:first-child .flex.items-center.gap-3 button {
        padding: 0.375rem 0.5rem;
    }

    #global-store-btn {
        padding: 0.375rem 0.5rem !important;
    }

    /* Hide the divider on mobile */
    #tab-dashboard > div:first-child .h-6.w-px {
        display: none;
    }

    /* Reduce "Operations Agent" title on mobile */
    #tab-dashboard > div:first-child > h2 {
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* ========================================
   EMAIL SIDEBAR COLLAPSE (TABLET+)
   ======================================== */
#email-context-sidebar.sidebar-cards-collapsed {
    width: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    padding: 0 !important;
    margin: 0 !important;
}

/* Overlay visible when sidebar is open on mobile */
#sidebar-overlay.sidebar-overlay-visible {
    display: block;
}

/* ========== Campaign Intelligence ========== */
.glass-card {
    background: linear-gradient(145deg, rgba(18, 25, 39, 0.7) 0%, rgba(11, 17, 32, 0.8) 100%);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
}
.neon-border-slate { border: 1px solid rgba(51, 65, 85, 0.4); }
.ai-glow-border { box-shadow: 0 0 15px rgba(99, 102, 241, 0.2); border: 1px solid rgba(99, 102, 241, 0.4); }
@keyframes loadBar { from { width: 0; } }
.animate-fill { animation: loadBar 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.animate-pulse-slow { animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.hitl-checkbox {
    appearance: none; -webkit-appearance: none;
    background-color: #121927; border: 1px solid #334155;
    border-radius: 0.25rem; position: relative; cursor: pointer;
}
.hitl-checkbox:checked { background-color: #6366f1; border-color: #6366f1; }
.hitl-checkbox:checked::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px; border: solid white;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.modal-enter { animation: modalFadeIn 0.2s ease-out forwards; }
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.98) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}