/* ============================================================
   CoalitionX Theme System — Light/Dark + Module Accents
   Injected after all other CSS to override with data-theme
   ============================================================ */

/* ── Light Theme ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #f0f2f5 !important;
  --bg-1: #ffffff !important;
  --bg-2: #f8f9fb !important;
  --bg-3: #eef0f4 !important;
  --bg-glass: rgba(255,255,255,0.92) !important;

  --t1: #1a1d2e !important;
  --t2: #5a6070 !important;
  --t3: #8a90a0 !important;

  --bd: rgba(0,0,0,0.06) !important;
  --bd-mid: rgba(0,0,0,0.10) !important;
  --bd-hi: rgba(0,0,0,0.15) !important;

  --paper: #f0f2f5 !important;
  --panel: #ffffff !important;
  --ink: #1a1d2e !important;

  --orange: #ff6520 !important;
  --orange-dim: rgba(255,101,32,0.08) !important;
  --orange-glow: rgba(255,101,32,0.18) !important;
}

[data-theme="light"] body {
  background-color: #f0f2f5 !important;
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 0) !important;
  color: #1a1d2e !important;
}

[data-theme="light"] html {
  background: #f0f2f5 !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #1a1d2e !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #8a90a0 !important;
}
[data-theme="light"] select option {
  background: #ffffff !important;
  color: #1a1d2e !important;
}

[data-theme="light"] .input-pane {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .toolbar {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .account-brief {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .intel-panel,
[data-theme="light"] .quick-panel,
[data-theme="light"] .card,
[data-theme="light"] .product-feature-section {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.07) !important;
}

[data-theme="light"] .coalition-brand {
  background: linear-gradient(135deg, rgba(255,101,32,0.06), rgba(255,255,255,0.95)) !important;
  border-color: rgba(255,101,32,0.18) !important;
}

[data-theme="light"] .form-section {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .results-tabs,
[data-theme="light"] .module-nav,
[data-theme="light"] .app-header,
[data-theme="light"] .hub-header {
  background: rgba(255,255,255,0.94) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .hub-main .pillar-card,
[data-theme="light"] .hub-status-tile,
[data-theme="light"] .glass-panel {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .apex-bottom-nav {
  background: rgba(255,255,255,0.94) !important;
  border-top-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .step {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .action-tile {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

[data-theme="light"] .product-item-card {
  background: rgba(77,158,255,0.04) !important;
  border-color: rgba(77,158,255,0.10) !important;
}

[data-theme="light"] .score-card,
[data-theme="light"] .mini-card,
[data-theme="light"] .account-suggestion-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98)) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .brand-copy h1 {
  color: #1a1d2e !important;
}

[data-theme="light"] .empty-state h2 { color: #1a1d2e !important; }

[data-theme="light"] .portal-wrap::before {
  background: radial-gradient(circle, rgba(255,101,32,0.08) 0%, transparent 70%) !important;
}

/* ── Module: Prospecting (Tactical Green Accent) ──────────────────── */
body.module-prospecting {
  --module-accent: #00d490 !important;
  --module-accent-dim: rgba(0,212,144,0.12) !important;
  --module-accent-glow: rgba(0,212,144,0.28) !important;
  --module-gradient: linear-gradient(135deg, #00d490, #00a870) !important;
}
body.module-prospecting .primary,
body.module-prospecting .step.active,
body.module-prospecting .tab.active,
body.module-prospecting .launch-btn,
body.module-prospecting .login-submit {
  background: linear-gradient(135deg, #00d490, #00a870) !important;
  box-shadow: 0 4px 20px rgba(0,212,144,0.3) !important;
}
body.module-prospecting .eyebrow,
body.module-prospecting .section-title,
body.module-prospecting .brand-copy h1 span {
  color: #00d490 !important;
}
body.module-prospecting .input-pane,
body.module-prospecting .account-brief {
  border-color: rgba(0,212,144,0.25) !important;
}

/* ── Module: Comms (Sky Blue Accent) ──────────────────── */
body.module-comms {
  --module-accent: #4d9eff !important;
  --module-accent-dim: rgba(77,158,255,0.12) !important;
  --module-accent-glow: rgba(77,158,255,0.28) !important;
  --module-gradient: linear-gradient(135deg, #4d9eff, #2d7dd4) !important;
}
body.module-comms .primary,
body.module-comms .launch-btn {
  background: linear-gradient(135deg, #4d9eff, #2d7dd4) !important;
  box-shadow: 0 4px 20px rgba(77,158,255,0.3) !important;
}
body.module-comms .eyebrow,
body.module-comms .section-title { color: #4d9eff !important; }

/* ── Module: Opportunity (Green Accent) ──────────────────── */
body.module-opportunity {
  --module-accent: #00d490 !important;
  --module-accent-dim: rgba(0,212,144,0.12) !important;
  --module-accent-glow: rgba(0,212,144,0.28) !important;
  --module-gradient: linear-gradient(135deg, #00d490, #00a870) !important;
}
body.module-opportunity .primary,
body.module-opportunity .step.active,
body.module-opportunity .tab.active,
body.module-opportunity .launch-btn,
body.module-opportunity .login-submit {
  background: linear-gradient(135deg, #00d490, #00a870) !important;
  box-shadow: 0 4px 20px rgba(0,212,144,0.3) !important;
}
body.module-opportunity .eyebrow,
body.module-opportunity .section-title,
body.module-opportunity .brand-copy h1 span {
  color: #00d490 !important;
}
body.module-opportunity .input-pane,
body.module-opportunity .account-brief {
  border-color: rgba(0,212,144,0.25) !important;
}

/* ── Module: RFx (Silver Accent) ────────────────────────── */
body.module-rfx {
  --module-accent: #8aceff !important;
  --module-accent-dim: rgba(138,206,255,0.12) !important;
  --module-accent-glow: rgba(138,206,255,0.28) !important;
  --module-gradient: linear-gradient(135deg, #8aceff, #5a9ed0) !important;
}
body.module-rfx .primary,
body.module-rfx .step.active,
body.module-rfx .tab.active,
body.module-rfx .launch-btn,
body.module-rfx .login-submit {
  background: linear-gradient(135deg, #8aceff, #5a9ed0) !important;
  box-shadow: 0 4px 20px rgba(138,206,255,0.3) !important;
}
body.module-rfx .eyebrow,
body.module-rfx .section-title,
body.module-rfx .brand-copy h1 span {
  color: #8aceff !important;
}
body.module-rfx .input-pane,
body.module-rfx .account-brief {
  border-color: rgba(138,206,255,0.25) !important;
}

/* ── Theme toggle button hover ── */
.theme-toggle-wrapper button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ── Admin/User toggle ── */
.auth-mode-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bd-mid);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.auth-mode-btn {
  padding: 4px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--t2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.auth-mode-btn.active {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px var(--orange-glow);
}

/* ── Portal dropdown ── */
.portal-dropdown {
  position: relative;
  display: inline-block;
}
.portal-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 240px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--bd-mid);
  border-radius: 12px;
  padding: 6px;
  z-index: 300;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  animation: fadeInUp 0.15s ease;
}
.portal-dropdown-content.show { display: block; }
.portal-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
}
.portal-dropdown-item:hover { background: var(--orange-dim); }
.portal-dropdown-item .material-symbols-outlined {
  font-size: 18px;
  color: var(--orange);
}

/* ── Admin panel additions ── */
.cx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cx-badge.sdr { background: rgba(77,158,255,0.12); color: #4d9eff; border:1px solid rgba(77,158,255,0.28); }
.cx-badge.tpm { background: rgba(0,212,144,0.12); color: #00d490; border:1px solid rgba(0,212,144,0.28); }
.cx-badge.rfq { background: rgba(255,101,32,0.12); color: #ff6520; border:1px solid rgba(255,101,32,0.28); }
.cx-badge.leadership { background: rgba(245,183,49,0.12); color: #f5b731; border:1px solid rgba(245,183,49,0.28); }

/* ── Email connect card ── */
.email-connect-card {
  background: rgba(0,200,255,0.04);
  border: 1px solid rgba(0,200,255,0.18);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.email-connect-card .email-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,200,255,0.10);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.email-connect-card .email-icon .material-symbols-outlined { color: #00c8ff; font-size: 20px; }
.email-connect-input { flex: 1; }
.email-connect-input input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,200,255,0.25);
  background: rgba(255,255,255,0.04);
  color: var(--t1);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
}
.email-connect-input input:focus { border-color: rgba(0,200,255,0.55); }

/* Simple email connect status states */
.email-status-connected { color: #00d490; }
.email-status-error { color: #ff3d5a; }
.email-status-pending { color: var(--t2); }