/* ==========================================================================
   Soft UI (neumorphism) theme for the LeadFlow dashboard and login page.
   Loaded after every other stylesheet. Everything is scoped to
   html[data-theme="neu"], so the classic look comes back untouched when the
   header toggle (theme.js) switches it off. Surfaces share one base colour and
   are shaped by a light shadow (top-left) and a dark shadow (bottom-right):
   raised = cards and buttons, inset = inputs, tracks and pressed states.
   ========================================================================== */

html[data-theme="neu"] {
  --neu-bg: #E6EBF1;
  --neu-dark: rgba(163, 177, 198, 0.62);
  --neu-light: rgba(255, 255, 255, 0.92);
  --neu-raised: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light);
  --neu-raised-sm: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
  --neu-raised-xs: 2px 2px 6px var(--neu-dark), -2px -2px 6px var(--neu-light);
  --neu-inset: inset 4px 4px 9px var(--neu-dark), inset -4px -4px 9px var(--neu-light);
  --neu-inset-sm: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
  --neu-focus: 0 0 0 2px rgba(79, 70, 229, 0.45);
  --neu-hover-row: rgba(255, 255, 255, 0.4);

  /* The existing design tokens, remapped */
  --bg-main: var(--neu-bg);
  --bg-sidebar: var(--neu-bg);
  --bg-card: var(--neu-bg);
  --bg-card-hover: var(--neu-bg);
  --bg-subtle: var(--neu-bg);
  --bg-subtle-hover: #DEE4EB;
  --border-color: rgba(163, 177, 198, 0.3);
  --border-light: rgba(163, 177, 198, 0.5);
  --text-primary: #1E293B;
  --text-secondary: #475569;
  --text-muted: #64748B; /* darker than classic so small grey text stays readable on the grey base */
  --shadow-xs: var(--neu-raised-xs);
  --shadow-sm: var(--neu-raised-sm);
  --shadow-md: var(--neu-raised);
  --shadow-lg: var(--neu-raised);
  --shadow-xl: 12px 12px 28px var(--neu-dark), -12px -12px 28px var(--neu-light);
  --radius-md: 14px;
  --radius-lg: 20px;

  background: var(--neu-bg);
  accent-color: var(--color-primary);

  & body,
  & .main-content,
  & .app-container { background: var(--neu-bg); }

  /* ---------- Sidebar & navigation ---------- */
  & .sidebar {
    background: var(--neu-bg);
    border-right: 0;
    box-shadow: 8px 0 18px -8px var(--neu-dark);
  }
  & .brand-icon { box-shadow: var(--neu-raised-sm); }
  & .nav-btn,
  & .nav-sub-btn,
  & .settings-subnav-btn,
  & .import-subnav-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    border-radius: 12px;
    transform: none;
  }
  & .nav-btn:hover,
  & .nav-sub-btn:hover,
  & .settings-subnav-btn:hover,
  & .import-subnav-btn:hover {
    background: var(--neu-bg);
    box-shadow: var(--neu-raised-xs);
    transform: none;
  }
  & .nav-btn.active,
  & .nav-sub-btn.active,
  & .settings-subnav-btn.active,
  & .import-subnav-btn.active {
    background: var(--neu-bg);
    border-color: transparent;
    box-shadow: var(--neu-inset-sm);
    color: var(--color-primary);
  }
  & .nav-group-header { border-radius: 12px; }
  & .nav-group-header:hover { background: transparent; box-shadow: var(--neu-raised-xs); }

  /* ---------- Header & global search ---------- */
  & .top-header { background: transparent; border-bottom: 0; box-shadow: none; }
  & .global-search-box,
  & .crm-search,
  & .modal-search-box,
  & .import-search-box,
  & .input-with-icon {
    background: var(--neu-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--neu-inset-sm) !important;
  }
  & .global-search-box:focus-within,
  & .crm-search:focus-within,
  & .modal-search-box:focus-within { box-shadow: var(--neu-inset-sm), var(--neu-focus) !important; }
  & .global-search-input,
  & .import-search-input { background: transparent !important; box-shadow: none !important; }
  & .global-search-dropdown,
  & .multiselect-dropdown,
  & .dropdown-menu,
  & .viz-tooltip {
    background: var(--neu-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--neu-raised) !important;
  }

  /* ---------- Raised surfaces ---------- */
  & .card,
  & .stat-card,
  & .kpi-tile,
  & .radar-kpi-card,
  & .social-account-card,
  & .grid-item-card,
  & .workflow-card,
  & .tracking-radar-card,
  & .composer-window,
  & .team-agent,
  & .toast {
    background: var(--neu-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--neu-raised) !important;
  }
  & .card:hover,
  & .stat-card:hover { box-shadow: var(--neu-raised) !important; transform: none; }
  & .stat-icon,
  & .kpi-icon-wrap,
  & .team-avatar { box-shadow: var(--neu-raised-xs); }
  & .card-header { border-bottom-color: var(--border-color); }

  /* ---------- Inset (sunken) areas ---------- */
  & .team-goal,
  & .team-metric,
  & .team-review,
  & .team-alert,
  & .opp-text-snippet,
  & .social-handle-box,
  & .social-stats-grid,
  & .social-inclusions-bar,
  & .composer-quill-wrapper,
  & #composerPreviewBox,
  & .import-dropzone-box,
  & .csv-dropzone,
  & .dropzone-icon-box,
  & .sent-filter-bar,
  & details.insight-details[open],
  & .drilldown-col,
  & .approval-preview,
  & .reply-row {
    background: var(--neu-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--neu-inset-sm) !important;
  }
  & .team-alert { color: #92400E; }

  /* ---------- Buttons ---------- */
  & .btn,
  & .btn-xs,
  & .btn-crm-icon,
  & .btn-crm-generate-pitch,
  & .btn-crm-find-email,
  & .btn-radar-action,
  & .btn-refresh-radar,
  & .sent-btn-teardown,
  & .sent-filter-btn,
  & .preset-chip,
  & .meeting-shortcut,
  & .filter-pill,
  & .source-chip,
  & .camp-channel-tab-btn,
  & .modal-tab-btn,
  & .seq-tab,
  & .link-button.btn {
    background: var(--neu-bg);
    border-color: transparent;
    box-shadow: var(--neu-raised-sm);
    transform: none;
  }
  & .btn:hover,
  & .btn-xs:hover,
  & .btn-crm-icon:hover,
  & .btn-radar-action:hover,
  & .btn-refresh-radar:hover,
  & .sent-filter-btn:hover,
  & .preset-chip:hover,
  & .filter-pill:hover,
  & .source-chip:hover {
    background: var(--neu-bg);
    box-shadow: var(--neu-raised-xs);
    transform: none;
    color: var(--color-primary);
  }
  & .btn:active,
  & .btn-xs:active,
  & .btn-crm-icon:active,
  & .sent-filter-btn.active,
  & .filter-pill.active,
  & .source-chip.active,
  & .modal-tab-btn.active,
  & .seq-tab.active,
  & .camp-channel-tab-btn.active-tab-email,
  & .camp-channel-tab-btn.active-tab-wa {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-inset-sm) !important;
    color: var(--color-primary);
  }
  & .btn-outline { background: var(--neu-bg) !important; border-color: transparent !important; }
  /* Primary actions keep the brand colour so the main button on every screen still stands out */
  & .btn-primary,
  & .sent-filter-btn.btn-primary,
  & .btn-crm-action-primary {
    background: linear-gradient(135deg, #5B54E8, #6E66F0) !important;
    color: #fff !important;
    box-shadow: 4px 4px 10px rgba(79, 70, 229, 0.35), -4px -4px 10px var(--neu-light) !important;
  }
  & .btn-primary:hover { filter: brightness(1.05); color: #fff !important; }
  & .btn-primary:active { box-shadow: inset 3px 3px 7px rgba(30, 27, 120, 0.45), inset -2px -2px 6px rgba(255, 255, 255, 0.25) !important; }
  & .btn-danger { color: #B91C1C; }
  & .btn:disabled,
  & .btn[disabled] { box-shadow: var(--neu-inset-sm); opacity: 0.6; }
  & .btn:focus-visible,
  & .nav-btn:focus-visible,
  & .nav-sub-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

  /* ---------- Form fields ---------- */
  & .form-control,
  & input[type="text"],
  & input[type="email"],
  & input[type="password"],
  & input[type="number"],
  & input[type="url"],
  & input[type="search"],
  & input[type="tel"],
  & input[type="time"],
  & input[type="date"],
  & input[type="datetime-local"],
  & textarea,
  & select,
  & .form-select,
  & .form-select-sm,
  & .multiselect-box,
  & .radar-filter-select,
  & .import-select,
  & .luxury-input-wrapper input,
  & .drilldown-search,
  & .team-field input {
    background-color: var(--neu-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--neu-inset-sm) !important;
    border-radius: 12px;
    color: var(--text-primary);
  }
  & .form-control:focus,
  & input:focus,
  & textarea:focus,
  & select:focus,
  & .form-select:focus {
    box-shadow: var(--neu-inset-sm), var(--neu-focus) !important;
    outline: none;
  }
  & select option,
  & select optgroup { background: #F1F4F8; color: var(--text-primary); }
  & ::placeholder { color: #8A97AB; }

  /* Toggle switches: sunken track, raised knob */
  & .toggle-slider {
    background: var(--neu-bg) !important;
    box-shadow: var(--neu-inset-sm) !important;
  }
  & .toggle-slider::before { background: var(--neu-bg); box-shadow: var(--neu-raised-xs); }
  & .toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #5B54E8, #6E66F0) !important;
    box-shadow: inset 2px 2px 5px rgba(30, 27, 120, 0.4) !important;
  }
  & .toggle-switch input:checked + .toggle-slider::before { background: #F4F6FA; }
  & .master-switch { background: var(--neu-bg) !important; box-shadow: var(--neu-raised-sm) !important; border-color: transparent !important; }

  /* Segmented controls and meters */
  & .segmented { background: var(--neu-bg) !important; border-color: transparent !important; box-shadow: var(--neu-inset-sm); padding: 4px; }
  & .segmented button.active { background: var(--neu-bg) !important; box-shadow: var(--neu-raised-xs) !important; color: var(--color-primary); }
  & .meter,
  & .funnel-track { background: var(--neu-bg) !important; box-shadow: var(--neu-inset-sm); }

  /* ---------- Tables ---------- */
  & .leads-table th, & .leads-table td,
  & .compact-table th, & .compact-table td,
  & .crm-luxury-table th, & .crm-luxury-table td,
  & .radar-data-table th, & .radar-data-table td,
  & #import-leads-table th, & #import-leads-table td,
  & #sent-leads-table th, & #sent-leads-table td,
  & .gt-table th, & .gt-table td {
    background: transparent !important;
    border-color: var(--border-color) !important;
  }
  & .leads-table tr:hover td,
  & .compact-table tr:hover td,
  & .crm-luxury-table tbody tr:hover td,
  & .radar-data-table tbody tr:hover td,
  & #import-leads-table tbody tr:hover td,
  & #sent-leads-table tr:hover td { background: var(--neu-hover-row) !important; }

  /* ---------- Chips, pills and badges ---------- */
  /* Coloured status pills keep their colours; the neutral (white) ones become soft chips */
  & .meta-stat-pill,
  & .meta-source-chip,
  & .tray-tag,
  & .crm-source-pill,
  & .crm-tech-pill,
  & .chip-email,
  & .radar-email-chip,
  & .social-feature-tag,
  & .social-status-pill.status-disconnected,
  & .status-neutral,
  & .tel-waiting,
  & .badge-new,
  & .badge-bounced,
  & .score-cold,
  & .wf-num,
  & .platform-threads,
  & .tag:not(.tag-ok):not(.tag-warn):not(.tag-bad) {
    background: var(--neu-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--neu-raised-xs);
  }

  /* ---------- Modals ---------- */
  & .modal-container,
  & .luxury-modal-container {
    background: var(--neu-bg) !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-xl) !important;
  }
  & .modal-footer,
  & .luxury-modal-body,
  & .luxury-modal-footer,
  & .drilldown-header,
  & .social-connect-banner { background: var(--neu-bg) !important; border-color: var(--border-color) !important; }
  & .modal-overlay { background: rgba(30, 41, 59, 0.45); }

  /* ---------- Inline white backgrounds written into the HTML/JS ---------- */
  & [style*="background: #FFFFFF" i], & [style*="background:#FFFFFF" i],
  & [style*="background: #fff;" i], & [style*="background:#fff;" i],
  & [style$="background: #fff" i], & [style$="background:#fff" i],
  & [style*="background: white" i], & [style*="background:white" i],
  & [style*="background-color: #FFFFFF" i], & [style*="background-color:#FFFFFF" i],
  & [style*="background: #F8FAFC" i], & [style*="background:#F8FAFC" i],
  & [style*="background: #F1F5F9" i], & [style*="background:#F1F5F9" i],
  & [style*="background: #F9FAFB" i], & [style*="background:#F9FAFB" i],
  & [style*="background: #FAF5FF" i], & [style*="background:#FAF5FF" i] {
    background: var(--neu-bg) !important;
  }

  /* Rich-text editor (Quill ships its own white theme) */
  & .ql-toolbar,
  & .ql-container,
  & .ql-editor,
  & #composerQuillEditor.ql-container.ql-snow,
  & .composer-ql-toolbar.ql-toolbar.ql-snow { background: transparent !important; border-color: var(--border-color) !important; }

  /* Inputs inside an already-sunken search box stay flat (must come after the form-field rules) */
  & :is(.global-search-box, .crm-search, .modal-search-box, .import-search-box, .input-with-icon) :is(input, textarea) {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ---------- Login page (its own inline styles load first) ---------- */
  & body:has(> .login-card) { background: var(--neu-bg); }
  & .login-card {
    background: var(--neu-bg);
    border-color: transparent;
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
  }
  & .login-card .brand-icon { box-shadow: var(--neu-raised-sm); }
  & .login-card input { border-radius: 12px; }
  & .login-card button {
    border-radius: 12px;
    box-shadow: 4px 4px 10px rgba(224, 72, 40, 0.35), -4px -4px 10px var(--neu-light);
  }
  & .login-card button:active { box-shadow: inset 3px 3px 7px rgba(120, 30, 10, 0.4); }
  & .login-card code { background: var(--neu-bg); box-shadow: var(--neu-inset-sm); }
}

/* Theme switch in the header */
.theme-toggle { white-space: nowrap; }
@media (max-width: 760px) {
  .theme-toggle span { display: none; }
}