:root {
  --bg: #050816;
  --bg-elevated: #081220;
  --bg-elevated-soft: #101827;
  --border-subtle: #20293b;
  --border-strong: #38bdf8;
  --text-main: #e5e7eb;
  --text-soft: #9ca3af;
  --text-softer: #6b7280;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.16);
  --pill-bg: #020617;
  --pill-border: #1f2933;
  --pill-text: #e5e7eb;
  --danger-bg: #300b16;
  --danger-border: #f97373;
  --danger-text: #fecaca;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.9);
  --shadow-inner: inset 0 0 0 1px rgba(15, 23, 42, 0.9);
  --card-padding: 18px 22px;
  --transition-fast: 0.15s ease-out;
}

/* ================================================================
   Sprint 9 Phase 1: --dm-* namespace dark-theme definitions
   These formalise the fallback values already used in var() calls
   across app.js and index.html. Zero visual change in dark theme.
   ================================================================ */
:root {
  /* --- Text --- */
  --dm-text-primary:   #e2e8f0;
  --dm-text-secondary: #a0aec0;
  --dm-text-muted:     #64748b;
  --dm-text:           #e2e8f0;

  /* --- Backgrounds --- */
  --dm-bg-card:        #1e293b;
  --dm-bg-secondary:   #131920;
  --dm-bg-tertiary:    #1e293b;
  --dm-bg-hover:       #252a3a;
  --dm-bg-card-hover:  #1c2536;
  --dm-bg-primary:     #0f172a;
  --dm-card-bg:        #2d3748;
  --dm-input-bg:       #0f172a;
  --dm-surface-bg:     #1a202c;

  /* --- Borders --- */
  --dm-border-color:   #4a5568;
  --dm-border:         #334155;
  --dm-dnc-border:     #334155;

  /* --- Accents --- */
  --dm-accent:              #4a9eff;
  --dm-accent-blue:         #3b82f6;
  --dm-accent-green:        #22c55e;
  --dm-accent-red:          #ef4444;
  --dm-accent-amber:        #f59e0b;
  --dm-accent-purple:       #8b5cf6;
  --dm-accent-blue-muted:   rgba(59,130,246,0.15);
  --dm-accent-green-muted:  rgba(34,197,94,0.15);
  --dm-accent-red-muted:    rgba(239,68,68,0.15);
  --dm-accent-amber-muted:  rgba(245,158,11,0.15);
  --dm-accent-gray-muted:   rgba(107,114,128,0.15);

  /* --- Status badges --- */
  --dm-status-completed-bg:   rgba(34,197,94,0.15);
  --dm-status-completed-text: #4ade80;
  --dm-status-draft-bg:       rgba(107,114,128,0.15);
  --dm-status-draft-text:     #9ca3af;
  --dm-status-failed-bg:      rgba(239,68,68,0.15);
  --dm-status-failed-text:    #f87171;
  --dm-status-matching-bg:    rgba(59,130,246,0.15);
  --dm-status-matching-text:  #60a5fa;
  --dm-status-ready-bg:       rgba(245,158,11,0.15);
  --dm-status-ready-text:     #fbbf24;

  /* --- Source type badges --- */
  --dm-source-id-text: #60a5fa;
  --dm-source-od-text: #a78bfa;
  --dm-source-rp-text: #f472b6;
  --dm-source-rx-text: #4ade80;

  /* --- Table --- */
  --dm-table-header-bg:   #1e293b;
  --dm-table-header-text: #94a3b8;
  --dm-table-row-bg:      transparent;
  --dm-table-row-hover:   rgba(255,255,255,0.03);
  --dm-table-row-selected: rgba(59,130,246,0.12);

  /* --- Design tokens --- */
  --dm-font-mono:       'DM Mono', 'SF Mono', Monaco, 'Courier New', monospace;
  --dm-radius-lg:       12px;
  --dm-radius-md:       8px;
  --dm-radius-sm:       6px;
  --dm-shadow-card:     0 1px 3px rgba(0,0,0,0.3);
  --dm-transition-fast: 0.15s ease;

  /* --- Font stacks (Sprint 9 Phase 2) --- */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'DM Mono', 'SF Mono', Monaco, 'Courier New', monospace;
  --font-brand: 'Plus Jakarta Sans', sans-serif;
}


:root[data-theme="light"] {
  --bg: #f3f4f6;
  --bg-elevated: #ffffff;
  --bg-elevated-soft: #f9fafb;
  --border-subtle: #e5e7eb;
  --border-strong: #38bdf8;
  --text-main: #111827;
  --text-soft: #4b5563;
  --text-softer: #9ca3af;
  --accent: #0ea5e9;
  --accent-soft: rgba(14, 165, 233, 0.12);
  --pill-bg: #f9fafb;
  --pill-border: #e5e7eb;
  --pill-text: #111827;
  --danger-bg: #fef2f2;
  --danger-border: #ef4444;
  --danger-text: #991b1b;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.16);
  --shadow-inner: inset 0 0 0 1px rgba(148, 163, 184, 0.6);
  --card-padding: 18px 22px;
  --transition-fast: 0.15s ease-out;
}

/* ================================================================
   Sprint 9 Phase 1: --dm-* namespace light-theme definitions
   Provides proper light values for all 52 variables.
   The 10 already defined in index.html are repeated here as
   canonical source; index.html values take precedence via cascade.
   ================================================================ */
:root[data-theme="light"] {
  /* --- Text --- */
  --dm-text-primary:   #1a1a18;
  --dm-text-secondary: #5a5a57;
  --dm-text-muted:     #9a9a96;
  --dm-text:           #111827;

  /* --- Backgrounds --- */
  --dm-bg-card:        #ffffff;
  --dm-bg-secondary:   #f0f0ef;
  --dm-bg-tertiary:    #f3f4f6;
  --dm-bg-hover:       #e8e9ec;
  --dm-bg-card-hover:  #f5f5f4;
  --dm-bg-primary:     #f9fafb;
  --dm-card-bg:        #ffffff;
  --dm-input-bg:       #ffffff;
  --dm-surface-bg:     #f9fafb;

  /* --- Borders --- */
  --dm-border-color:   #e2e2e0;
  --dm-border:         #d1d5db;
  --dm-dnc-border:     #d1d5db;

  /* --- Accents --- */
  --dm-accent:              #1d6ef5;
  --dm-accent-blue:         #1d6ef5;
  --dm-accent-green:        #16a34a;
  --dm-accent-red:          #dc2626;
  --dm-accent-amber:        #d97706;
  --dm-accent-purple:       #7c3aed;
  --dm-accent-blue-muted:   rgba(29,110,245,0.10);
  --dm-accent-green-muted:  rgba(22,163,74,0.10);
  --dm-accent-red-muted:    rgba(220,38,38,0.10);
  --dm-accent-amber-muted:  rgba(217,119,6,0.10);
  --dm-accent-gray-muted:   rgba(107,114,128,0.08);

  /* --- Status badges (darker text for light-bg contrast) --- */
  --dm-status-completed-bg:   rgba(22,163,74,0.10);
  --dm-status-completed-text: #15803d;
  --dm-status-draft-bg:       rgba(107,114,128,0.10);
  --dm-status-draft-text:     #4b5563;
  --dm-status-failed-bg:      rgba(220,38,38,0.10);
  --dm-status-failed-text:    #dc2626;
  --dm-status-matching-bg:    rgba(29,110,245,0.10);
  --dm-status-matching-text:  #1d6ef5;
  --dm-status-ready-bg:       rgba(217,119,6,0.10);
  --dm-status-ready-text:     #b45309;

  /* --- Source type badges (darker for light-bg contrast) --- */
  --dm-source-id-text: #1d6ef5;
  --dm-source-od-text: #7c3aed;
  --dm-source-rp-text: #db2777;
  --dm-source-rx-text: #16a34a;

  /* --- Table --- */
  --dm-table-header-bg:   #f3f4f6;
  --dm-table-header-text: #6b7280;
  --dm-table-row-bg:      #ffffff;
  --dm-table-row-hover:   rgba(0,0,0,0.02);
  --dm-table-row-selected: rgba(29,110,245,0.08);

  /* --- Design tokens --- */
  --dm-font-mono:       'DM Mono', 'SF Mono', Monaco, 'Courier New', monospace;
  --dm-radius-lg:       12px;
  --dm-radius-md:       8px;
  --dm-radius-sm:       6px;
  --dm-shadow-card:     0 1px 3px rgba(0,0,0,0.08);
  --dm-transition-fast: 0.15s ease;

  /* --- Font stacks (Sprint 9 Phase 2) --- */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'DM Mono', 'SF Mono', Monaco, 'Courier New', monospace;
  --font-brand: 'Plus Jakarta Sans', sans-serif;
}

/* Light theme surface overrides */
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.10), transparent 55%),
    radial-gradient(circle at bottom, rgba(129, 140, 248, 0.12), transparent 60%),
    var(--bg);
  color: var(--text-main);
}

:root[data-theme="light"] .shell-inner {
  background: linear-gradient(145deg, #ffffff, #f3f4f6);
  border-color: rgba(209, 213, 219, 0.9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

:root[data-theme="light"] .filter-rail {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 60%),
    #f9fafb;
  border-color: rgba(209, 213, 219, 0.9);
  box-shadow: 0 0 0 1px rgba(229, 231, 235, 0.9);
}

:root[data-theme="light"] .tabs-row {
  background: rgba(249, 250, 251, 0.95);
  border-color: rgba(209, 213, 219, 0.9);
}

:root[data-theme="light"] .tab-button {
  color: var(--text-soft);
}

:root[data-theme="light"] .tab-button.tab-active {
  background: var(--accent-soft);
  color: var(--accent);
}

:root[data-theme="light"] .tab-button:hover:not(.tab-active) {
  background: rgba(229, 231, 235, 0.95);
  color: var(--text-main);
}

:root[data-theme="light"] .pill,
:root[data-theme="light"] .pill-soft,
:root[data-theme="light"] .status-pill,
:root[data-theme="light"] .tag-pill {
  background: #f9fafb;
  border-color: rgba(209, 213, 219, 0.9);
  color: var(--text-soft);
}

:root[data-theme="light"] .pill-soft:hover {
  background: rgba(229, 231, 235, 0.95);
}

:root[data-theme="light"] .alert-row {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-theme="light"] .alert-row:hover {
  background: var(--bg-elevated-soft);
}

:root[data-theme="light"] .details-drawer {
  background: var(--bg-elevated);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}


*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 0;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.15), transparent 55%),
    radial-gradient(circle at bottom, rgba(129, 140, 248, 0.20), transparent 60%),
    var(--bg);
  color: var(--text-main);
  display: flex;
  justify-content: center;
}

.shell {
  max-width: 1320px;
  width: 100%;
  padding: 24px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.shell-inner {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
  border-radius: 26px;
  padding: 22px 22px 26px;
  border: 1px solid rgba(15, 23, 42, 0.9);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.badge-stack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.8);
  color: var(--text-soft);
}

.tag-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}

h1 {
  margin: 2px 0 4px;
  font-size: 22px;
  letter-spacing: 0.02em;
}

.header-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 11px;
  color: var(--text-soft);
  text-align: right;
}

.header-meta {
  opacity: 0.9;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(55, 65, 81, 0.8);
  color: var(--text-soft);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
}

.toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tabs-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(15, 23, 42, 0.95);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(31, 41, 55, 0.9);
}

.tab-button {
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tab-button:hover {
  background: rgba(31, 41, 55, 0.8);
  color: var(--text-main);
}

.tab-button.tab-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
}

.toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  color: var(--pill-text);
  cursor: default;
}

.pill-soft {
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.pill-soft:hover {
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-1px);
}

.error-banner {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 12px;
}

.error-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f97373;
  margin-top: 4px;
}

.error-text-wrapper strong {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}

.layout-main {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .layout-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .filter-rail {
    display: none;
  }
  .shell {
    padding-inline: 12px;
  }
}

.filter-rail {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 60%),
    rgba(15, 23, 42, 0.95);
  border-radius: 18px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  box-shadow: var(--shadow-inner);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
}

.filter-rail h2 {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.filter-section {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(55, 65, 81, 0.7);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-softer);
}

.filter-chip {
  border-radius: 999px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  background: rgba(2, 6, 23, 0.9);
  color: var(--text-soft);
  font-size: 11px;
  padding: 5px 9px;
  text-align: left;
  cursor: default;
}

.filter-chip-active {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.15);
  color: var(--text-main);
}

.filter-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-softer);
}

.tab-panels {
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 60%),
    rgba(15, 23, 42, 0.98);
  border-radius: 18px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  padding: 14px 14px 16px;
  min-height: 260px;
  box-shadow: var(--shadow-inner);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.tab-panel.tab-panel-active {
  display: flex;
}

.tab-heading h2 {
  margin: 0;
  font-size: 15px;
}

.tab-heading p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.alert-card {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 60%),
    rgba(15, 23, 42, 0.97);
  border-radius: var(--radius-lg);
  padding: 14px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.8);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast);
}

.alert-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.95);
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 60%),
    rgba(15, 23, 42, 0.98);
}

.alert-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.alert-card-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.alert-card-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.pill-risk-high {
  border-color: #f97373;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.8);
}

.pill-risk-med {
  border-color: #fb923c;
  color: #ffedd5;
  background: rgba(124, 45, 18, 0.85);
}

.pill-risk-low {
  border-color: #22c55e;
  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.85);
}

.pill-risk-info {
  border-color: rgba(148, 163, 184, 0.8);
  color: #e5e7eb;
  background: rgba(30, 64, 175, 0.8);
}

.alert-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-softer);
}

.alert-card-ai {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-main);
}

.alert-card-preview {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-soft);
  max-height: 3.3em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-state {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.8);
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}

.loading-state {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.4);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.muted {
  color: var(--text-soft);
  font-size: 12px;
}

/* Drawer + overlay */

.details-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 40;
}

.details-overlay.overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

.details-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.18), transparent 55%),
    #020617;
  box-shadow: -22px 0 40px rgba(15, 23, 42, 0.95);
  border-left: 1px solid rgba(31, 41, 55, 0.95);
  transform: translateX(100%);
  transition: transform var(--transition-fast);
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.details-drawer.drawer-visible {
  transform: translateX(0);
}

.details-inner {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.details-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-size: 20px;
  cursor: pointer;
}

.details-header h2 {
  margin: 4px 0 4px;
  font-size: 16px;
}

.details-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-softer);
  flex-wrap: wrap;
  gap: 4px;
}

.open-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  text-decoration: none;
  color: var(--accent);
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(15, 23, 42, 0.9);
}

.open-link:hover {
  border-color: var(--accent);
}

.details-body {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(31, 41, 55, 0.9);
  font-size: 12px;
  color: var(--text-main);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.details-body h3 {
  margin: 6px 0 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.details-preview-block {
  white-space: pre-wrap;
  font-family: var(--font-sans);
  font-size: 12px;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  max-height: 180px;
  overflow-y: auto;
}

.details-attachments {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 12px;
}

.details-attachments li {
  padding: 3px 0;
  border-bottom: 1px dashed rgba(31, 41, 55, 0.8);
}

/* Drawer actions row */

.details-actions-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.details-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.details-action-btn {
  font-size: 11px;
  padding: 5px 10px;
}

.pill-backup {
  border-color: rgba(148, 163, 184, 0.9);
  background: rgba(15, 23, 42, 0.96);
  color: var(--text-soft);
}

.details-actions-note {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-softer);
}

a {
  color: var(--accent);
}\n\n/* --- Alert row grid layout (Source / From / Status / Alert / Last activity / Actions) --- */
.alert-grid-header {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(140px, 1.2fr) minmax(110px, 0.9fr) minmax(280px, 3fr) minmax(140px, 1fr) minmax(150px, 1.2fr);
  gap: 0.5rem;
  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.alert-grid-header-col {
  white-space: nowrap;
}

.card-list .alert-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(140px, 1.2fr) minmax(110px, 0.9fr) minmax(280px, 3fr) minmax(140px, 1fr) minmax(150px, 1.2fr);
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  align-items: flex-start;
}

.alert-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.alert-email-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  opacity: 0.7;
}

.alert-email-lines span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.alert-card-label {
  font-size: 0.75rem;
  opacity: 0.75;
}

.alert-card-action-btn-vertical {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
  text-align: left;
}\n\n/* --- Alert grid: shared columns for header + rows --- */
.card-list .alert-row,
.card-list .alert-row-header {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.1fr)   /* Source  */
    minmax(140px, 1.2fr)   /* From    */
    minmax(110px, 0.9fr)   /* Status  */
    minmax(320px, 3fr)     /* Alert   */
    minmax(140px, 1fr)     /* Last    */
    minmax(150px, 1.1fr);  /* Actions */
  gap: 0.75rem;
  align-items: flex-start;
}

/* Header row */
.alert-row-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
  padding: 0.25rem 1.5rem 0.35rem 1.5rem;
}

/* Data rows look like cards again */
.card-list .alert-row:not(.alert-row-header) {
  padding: 0.6rem 1.5rem;
  margin-bottom: 0.35rem;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 12px;
}

/* Columns inside rows */
.alert-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Header columns don’t stack vertically */
.alert-row-header .alert-col {
  flex-direction: row;
}

/* Source / From / Last activity compact typography */
.alert-col-source,
.alert-col-from,
.alert-col-last {
  font-size: 0.78rem;
  opacity: 0.9;
}

/* Email splitting: local part first line, @domain second line */
.alert-email-lines span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inner alert card body remains columnar */
.alert-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* AI summary / Email preview labels */
.alert-card-label {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Vertical action buttons */
.alert-card-action-btn-vertical {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
  text-align: left;
}

/* Narrow generic sidebar to give main feed more room */
.main-layout-sidebar {
  max-width: 260px;
}


/* UAOL Phase 2 – compact email/gdrive grid override */
.card-list {
  max-width: 100%;
  overflow-x: hidden;
}

/* Header + rows share the same responsive grid */
.card-list .alert-row-header,
.card-list #emails-list .alert-row,
.card-list #gdrive-list .alert-row {
  display: grid;
  grid-template-columns:
    0.7fr   /* Source  */
    0.9fr   /* From    */
    0.6fr   /* Status  */
    3fr     /* Alert   */
    0.9fr   /* Last    */
    0.9fr;  /* Actions */
  gap: 0.75rem;
  align-items: flex-start;
}

/* Header styling */
.card-list .alert-row-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
  padding: 0.25rem 1.25rem 0.3rem 1.25rem;
}

/* Data rows look like cards */
.card-list #emails-list .alert-row,
.card-list #gdrive-list .alert-row {
  padding: 0.6rem 1.25rem;
  margin-bottom: 0.4rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

/* Column containers */
.card-list .alert-row .alert-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Compact typography for Source / From / Last activity */
.alert-col-source,
.alert-col-from,
.alert-col-last {
  font-size: 0.72rem;
  opacity: 0.8;
}

/* Split email across two lines and ellipsis if needed */
.alert-col-from .alert-email-lines span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep status + action buttons from stretching columns */
.alert-col-status,
.alert-col-actions {
  align-items: flex-start;
}\n\n
/* UAOL Phase 2 - align header with content + smaller status/action pills */
.card-list .alert-row-header .alert-col,
.card-list #emails-list .alert-row .alert-col,
.card-list #gdrive-list .alert-row .alert-col {
  align-items: flex-start;
}

/* Status + action pills inside the grid only */
.card-list .alert-col-status .btn,
.card-list .alert-col-actions .btn {
  font-size: 0.72rem;
  padding: 0.22rem 0.7rem;
  white-space: nowrap;
}

/* UAOL Phase 2 – layout & workflow polish overrides (24 Nov 2025) */

/* Slightly narrower filter rail + denser chips */
.layout-main {
  grid-template-columns: 210px minmax(0, 1fr);
}

.filter-rail {
  padding: 12px 12px 14px;
  font-size: 11px;
}

.filter-chip {
  font-size: 10.5px;
  padding: 4px 8px;
}

/* Shared grid for header + rows across Emails, GDrive, To-Do */
.card-list .alert-row-header,
.card-list #emails-list .alert-row,
.card-list #gdrive-list .alert-row,
.card-list #todo-list .alert-row {
  display: grid;
  grid-template-columns:
    minmax(120px, 1.1fr)   /* Source  */
    minmax(140px, 1.2fr)   /* From    */
    minmax(110px, 0.9fr)   /* Status  */
    minmax(320px, 3fr)     /* Alert   */
    minmax(140px, 1fr)     /* Last    */
    minmax(150px, 1.1fr);  /* Actions */;
  gap: 0.75rem;
  align-items: flex-start;
}

/* Header row */
.card-list .alert-row-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
  padding: 0.25rem 1.25rem 0.3rem 1.25rem;
}

/* Data rows */
.card-list #emails-list .alert-row,
.card-list #gdrive-list .alert-row,
.card-list #todo-list .alert-row {
  padding: 0.6rem 1.25rem;
  margin-bottom: 0.4rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

/* Compact text for Source / From / Last activity */
.alert-col-source,
.alert-col-from,
.alert-col-last {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Action buttons – compact, mostly single-line */
.alert-card-action-btn-vertical {
  font-size: 0.72rem;
  padding: 0.22rem 0.7rem;
  white-space: nowrap;
}

/* Status pills – colour coded */
.pill-status-unactioned {
  background: rgba(17, 24, 39, 0.95);
  border-color: rgba(55, 65, 81, 0.9);
  color: var(--text-soft);
}

.pill-status-routed {
  background: rgba(30, 64, 175, 0.9);
  border-color: #38bdf8;
  color: #e0f2fe;
}

.pill-status-assigned,
.pill-status-in_progress {
  background: rgba(22, 101, 52, 0.9);
  border-color: #22c55e;
  color: #bbf7d0;
}

.pill-status-actioned {
  background: rgba(21, 94, 117, 0.9);
  border-color: #0ea5e9;
  color: #e0f2fe;
}

.pill-status-dismissed {
  background: rgba(127, 29, 29, 0.9);
  border-color: #f97373;
  color: #fecaca;
}

.pill-status-archived {
  background: rgba(55, 65, 81, 0.9);
  border-color: rgba(148, 163, 184, 0.9);
  color: #e5e7eb;
}

/* UAOL Phase 2 – grid tightening override (24 Nov 2025, final pass) */

.card-list {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Narrower columns so everything fits within the card */
.card-list .alert-row-header,
.card-list #emails-list .alert-row,
.card-list #gdrive-list .alert-row,
.card-list #todo-list .alert-row {
  display: grid;
  grid-template-columns:
    minmax(80px, 0.8fr)    /* Source  */
    minmax(110px, 0.9fr)   /* From    */
    minmax(90px, 0.8fr)    /* Status  */
    minmax(220px, 2.1fr)   /* Alert   */
    minmax(110px, 0.9fr)   /* Last    */
    minmax(105px, 0.9fr);  /* Actions */;
  gap: 0.6rem;
  align-items: flex-start;
}

/* Let alert text wrap instead of forcing grid wider */
.alert-col-item {
  min-width: 0;
  overflow: hidden;
}

/* Actions column stays compact and right-aligned */
.alert-col-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
}

/* Keep action buttons small so they don’t blow out the column */
.alert-card-action-btn-vertical {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

/* UAOL Phase 2 – status colours, layout tweaks, and scrollable alert body (24 Nov 2025) */

/* Slightly tighter columns for Emails / To-Do to give Alert more room */
.card-list .alert-row-header,
.card-list #emails-list .alert-row,
.card-list #todo-list .alert-row {
  grid-template-columns:
    minmax(70px, 0.7fr)    /* Source  */
    minmax(100px, 0.8fr)   /* From    */
    minmax(80px, 0.7fr)    /* Status  */
    minmax(260px, 2.8fr)   /* Alert   */
    minmax(110px, 0.9fr)   /* Last    */
    minmax(105px, 0.9fr);  /* Actions */;
}

/* GDrive: hide FROM column and redistribute space */
#tab-panel-gdrive .alert-col-from {
  display: none;
}

#tab-panel-gdrive .alert-row-header,
#tab-panel-gdrive #gdrive-list .alert-row {
  grid-template-columns:
    minmax(90px, 0.9fr)    /* Source  */
    minmax(260px, 2.8fr)   /* Alert   */
    minmax(90px, 0.8fr)    /* Status  */
    minmax(110px, 0.9fr)   /* Last    */
    minmax(105px, 0.9fr);  /* Actions */;
}

/* Last activity: show date on first line, time on second */
.alert-col-last span {
  white-space: pre-line;
}

/* Scrollable alert body (wheel scroll, hidden scrollbars) */
.alert-card-body {
  max-height: 11rem;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.alert-card-body::-webkit-scrollbar {
  display: none; /* WebKit */
}

/* Status pill colours */
.pill-status-unactioned {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(51, 65, 85, 0.9);
  color: #e5e7eb;
}
.pill-status-routed {
  background: rgba(30, 64, 175, 0.9);
  border-color: #38bdf8;
  color: #e0f2fe;
}
.pill-status-assigned,
.pill-status-in_progress {
  background: rgba(22, 101, 52, 0.9);
  border-color: #22c55e;
  color: #bbf7d0;
}
.pill-status-actioned {
  background: rgba(21, 94, 117, 0.9);
  border-color: #0ea5e9;
  color: #e0f2fe;
}
.pill-status-dismissed {
  background: rgba(127, 29, 29, 0.9);
  border-color: #f97373;
  color: #fecaca;
}
.pill-status-archived {
  background: rgba(55, 65, 81, 0.9);
  border-color: rgba(148, 163, 184, 0.9);
  color: #e5e7eb;
}

/* UAOL Phase 2 – final layout & colour tweaks (24 Nov 2025) */

/* Emails / To-Do – give ALERT more space, squeeze Source/From/Status */
#tab-panel-emails .alert-row-header,
#tab-panel-emails #emails-list .alert-row,
#tab-panel-todo .alert-row-header,
#tab-panel-todo #todo-list .alert-row {
  grid-template-columns:
    minmax(65px, 0.6fr)    /* Source  */
    minmax(90px, 0.7fr)    /* From    */
    minmax(70px, 0.6fr)    /* Status  */
    minmax(280px, 3.0fr)   /* Alert   */
    minmax(110px, 0.9fr)   /* Last    */
    minmax(105px, 0.9fr);  /* Actions */;
}

/* GDrive – hide FROM, no blank column, match header: Source | Status | Alert | Last | Actions */
#tab-panel-gdrive .alert-col-from {
  display: none;
}

#tab-panel-gdrive .alert-row-header,
#tab-panel-gdrive #gdrive-list .alert-row {
  grid-template-columns:
    minmax(90px, 0.9fr)    /* Source  */
    minmax(80px, 0.7fr)    /* Status  */
    minmax(280px, 3.0fr)   /* Alert   */
    minmax(110px, 0.9fr)   /* Last    */
    minmax(105px, 0.9fr);  /* Actions */;
}

/* Last activity – allow date\\n time */
.alert-col-last {
  white-space: pre-line;
  font-size: 0.72rem;
  text-align: right;
}

/* Scrollable alert body without visible scrollbars */
.alert-card-body {
  max-height: 11rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.alert-card-body::-webkit-scrollbar {
  display: none;
}

/* Status pill colours – used by JS post-processor via pill-status-* */
.pill-status-unactioned {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(51, 65, 85, 0.9);
  color: #e5e7eb;
}
.pill-status-routed {
  background: rgba(30, 64, 175, 0.9);
  border-color: #38bdf8;
  color: #e0f2fe;
}
.pill-status-assigned,
.pill-status-in_progress {
  background: rgba(22, 101, 52, 0.9);
  border-color: #22c55e;
  color: #bbf7d0;
}
.pill-status-actioned {
  background: rgba(21, 94, 117, 0.9);
  border-color: #0ea5e9;
  color: #e0f2fe;
}
.pill-status-dismissed {
  background: rgba(127, 29, 29, 0.9);
  border-color: #f97373;
  color: #fecaca;
}
.pill-status-archived {
  background: rgba(55, 65, 81, 0.9);
  border-color: rgba(148, 163, 184, 0.9);
  color: #e5e7eb;
}

/* UAOL Phase 2 – flatten status pill to plain text (24 Nov 2025) */
.alert-col-status .pill {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 0.75rem;
}

/* UAOL Phase 2 – column width tweaks for Emails & GDrive (24 Nov 2025) */

/* Emails – squeeze Source/From/Status + Last to give ALERT more room */
#tab-panel-emails .alert-row-header,
#tab-panel-emails #emails-list .alert-row {
  grid-template-columns:
    minmax(70px, 0.65fr)    /* Source  */
    minmax(110px, 0.8fr)    /* From    */
    minmax(80px, 0.6fr)     /* Status  */
    minmax(340px, 3.5fr)    /* Alert   */
    minmax(95px, 0.7fr)     /* Last    */
    minmax(120px, 0.9fr);   /* Actions */;
}

/* GDrive – same idea: more space to ALERT, slightly narrower Last */
#tab-panel-gdrive .alert-row-header,
#tab-panel-gdrive #gdrive-list .alert-row {
  grid-template-columns:
    minmax(110px, 0.9fr)    /* Source  */
    minmax(80px, 0.65fr)    /* Status  */
    minmax(340px, 3.5fr)    /* Alert   */
    minmax(95px, 0.7fr)     /* Last    */
    minmax(120px, 0.9fr);   /* Actions */;
}

/* UAOL – Emails: keep Source as just "M365", hide copied mailbox line */
#tab-panel-emails .alert-col-source div:nth-child(2) {
  display: none;
}

/* UAOL – Final column width tweak for Last Activity vs Actions */

/* Emails: narrower Last, a bit narrower Actions, more space to Alert */
#tab-panel-emails .alert-row-header,
#tab-panel-emails #emails-list .alert-row {
  grid-template-columns:
    minmax(70px, 0.6fr)     /* Source  */
    minmax(110px, 0.8fr)    /* From    */
    minmax(80px, 0.6fr)     /* Status  */
    minmax(360px, 3.6fr)    /* Alert   */
    minmax(80px, 0.5fr)     /* Last    */
    minmax(110px, 0.8fr);   /* Actions */;
}

/* GDrive: same idea – more Alert, tighter Last & Actions */
#tab-panel-gdrive .alert-row-header,
#tab-panel-gdrive #gdrive-list .alert-row {
  grid-template-columns:
    minmax(110px, 0.9fr)    /* Source  */
    minmax(80px, 0.6fr)     /* Status  */
    minmax(360px, 3.6fr)    /* Alert   */
    minmax(80px, 0.5fr)     /* Last    */
    minmax(110px, 0.8fr);   /* Actions */;
}

/* Align Last Activity header text with its column (right-aligned like the values) */
#tab-panel-emails .alert-row-header .alert-col-last,
#tab-panel-gdrive .alert-row-header .alert-col-last {
  text-align: right;
}

/* UAOL – Left-align LAST ACTIVITY header (Emails & GDrive) */
#tab-panel-emails .alert-row-header .alert-col-last,
#tab-panel-gdrive  .alert-row-header .alert-col-last {
  text-align: left;
}

/* UAOL – Emails: tighten gaps and keep Actions fully inside card */
#tab-panel-emails .alert-row-header,
#tab-panel-emails #emails-list .alert-row {
  grid-template-columns:
    minmax(70px, 0.6fr)     /* Source  */
    minmax(110px, 0.75fr)   /* From    */
    minmax(80px, 0.6fr)     /* Status  */
    minmax(345px, 3.4fr)    /* Alert   */
    minmax(80px, 0.55fr)    /* Last    */
    minmax(105px, 0.8fr);   /* Actions */;
  gap: 0.55rem;
}

/* UAOL – Emails: final tightening so Actions sit fully inside the card */
#tab-panel-emails .alert-row-header,
#tab-panel-emails #emails-list .alert-row {
  grid-template-columns:
    minmax(70px, 0.6fr)     /* Source  */
    minmax(105px, 0.7fr)    /* From    */
    minmax(75px, 0.55fr)    /* Status  */
    minmax(355px, 3.6fr)    /* Alert   */
    minmax(75px, 0.5fr)     /* Last    */
    minmax(95px, 0.75fr);   /* Actions */;
  gap: 0.45rem;
}

/* UAOL – Emails: extra tightening on first three columns + gaps (24 Nov 2025) */
#tab-panel-emails .alert-row-header,
#tab-panel-emails #emails-list .alert-row {
  grid-template-columns:
    minmax(60px, 0.5fr)     /* Source  */
    minmax(90px, 0.6fr)     /* From    */
    minmax(70px, 0.45fr)    /* Status  */
    minmax(370px, 3.9fr)    /* Alert   */
    minmax(70px, 0.45fr)    /* Last    */
    minmax(90px, 0.7fr);    /* Actions */;
  gap: 0.35rem;
}

/* Slightly smaller text in the left mini-columns so they take less visual width */
#tab-panel-emails .alert-col-source,
#tab-panel-emails .alert-col-from,
#tab-panel-emails .alert-col-status {
  font-size: 0.7rem;
}

/* Slimmer action buttons overall so the Actions column can be narrower */
.alert-card-action-btn-vertical {
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
}

/* UAOL – normalise action pill size, keep labels single-line */
.alert-card-action-btn-vertical {
  font-size: 0.72rem;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* UAOL – Emails: avoid "flash" of raw Source/From by fading in after JS normalises */
#tab-panel-emails .alert-col-source,
#tab-panel-emails .alert-col-from {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

/* UAOL – revert opacity hack for Emails Source/From (stop periodic blinking) */
#tab-panel-emails .alert-col-source,
#tab-panel-emails .alert-col-from {
  opacity: 1 !important;
  transition: none !important;
}

/* UAOL – highlight selected action pill on a card */
.alert-card-action-btn-vertical.alert-card-action-btn-active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5);
}

/* UAOL – highlight active main card actions based on workflow status */
.alert-card-action-btn-vertical[data-active="true"] {
  border-color: #4cc3ff;
  box-shadow: 0 0 0 1px #4cc3ff;
  background-color: rgba(76, 195, 255, 0.12);
}

/* Light theme refinements: sharper boxes + lighter cards (marker: LIGHT_THEME_SHARPEN_V1) */
:root[data-theme="light"] .shell-inner {
  border-radius: 20px;
}

:root[data-theme="light"] .filter-rail {
  border-radius: 14px;
}

:root[data-theme="light"] .tabs-row {
  border-radius: 14px;
}

/* Main content panel behind the cards */
:root[data-theme="light"] .tab-panels {
  background: #f9fafb;
  border-radius: 16px;
  border-color: rgba(209, 213, 219, 0.9);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

/* Tabs, pills, filter chips – less pill, more box */
:root[data-theme="light"] .tab-button,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .pill-soft,
:root[data-theme="light"] .status-pill,
:root[data-theme="light"] .tag-pill,
:root[data-theme="light"] .filter-chip {
  border-radius: 9px;
}

/* Alert cards themselves (each email/file row) */
:root[data-theme="light"] .alert-card {
  background: #ffffff;
  border-radius: 14px;
  border-color: rgba(209, 213, 219, 0.9);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

:root[data-theme="light"] .alert-card:hover {
  background: #f9fafb;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

/* Error banner: shift from dark red-on-dark to light red-on-pale */
:root[data-theme="light"] .error-banner {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

/* === UAOL Phase 2 – Professional light theme overrides (marker: LIGHT_THEME_PRO_V2) === */

/* Page + panels */
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.08), transparent 55%),
    radial-gradient(circle at bottom, rgba(129, 140, 248, 0.10), transparent 60%),
    #f3f4f6;
  color: #111827;
}

:root[data-theme="light"] .shell-inner {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

/* Filters rail */
:root[data-theme="light"] .filter-rail {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 0 0 1px rgba(229, 231, 235, 0.9);
}

:root[data-theme="light"] .filter-title {
  color: #6b7280;
}

:root[data-theme="light"] .filter-note {
  color: #9ca3af;
}

/* Individual filter chips */
:root[data-theme="light"] .filter-chip {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #111827;
  cursor: pointer;
}

:root[data-theme="light"] .filter-chip:hover {
  background: #e5f0ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

:root[data-theme="light"] .filter-chip-active {
  border-radius: 8px;
  border-color: #3b82f6;
  background: #dbeafe;
  color: #1d4ed8;
}

/* Tabs row + buttons */
:root[data-theme="light"] .tabs-row {
  background: #f9fafb;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 4px;
}

:root[data-theme="light"] .tab-button {
  border-radius: 8px;
  color: #4b5563;
}

:root[data-theme="light"] .tab-button:hover:not(.tab-active) {
  background: #e5e7eb;
  color: #111827;
}

:root[data-theme="light"] .tab-button.tab-active {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Main content panel */
:root[data-theme="light"] .tab-panels {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

/* Section heading: title + description */
:root[data-theme="light"] .tab-heading {
  padding: 10px 20px 8px;
  margin: 0 0 4px;
  background: #f9fafb;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid #e5e7eb;
}

:root[data-theme="light"] .tab-heading h2 {
  color: #111827;
}

:root[data-theme="light"] .tab-heading p {
  color: #6b7280;
}

/* Header row + data rows */
:root[data-theme="light"] .alert-row-header {
  color: #6b7280;
  background: transparent;
  padding-bottom: 0.35rem;
}

:root[data-theme="light"] .card-list .alert-row:not(.alert-row-header) {
  margin-bottom: 0.35rem;
  padding: 0.6rem 1.5rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

:root[data-theme="light"] .card-list .alert-row:not(.alert-row-header):hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* Action buttons + generic pills */
:root[data-theme="light"] .pill,
:root[data-theme="light"] .pill-soft,
:root[data-theme="light"] .tag-pill {
  border-radius: 8px;
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

:root[data-theme="light"] .pill-soft:hover {
  background: #e5e7eb;
}

/* Status badges – still pill-shaped for readability */
:root[data-theme="light"] .status-pill {
  border-radius: 999px;
  border-width: 1px;
}

/* Status colour map */
:root[data-theme="light"] .pill-status-unactioned {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}

:root[data-theme="light"] .pill-status-routed {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #4338ca;
}

:root[data-theme="light"] .pill-status-assigned,
:root[data-theme="light"] .pill-status-in_progress {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

:root[data-theme="light"] .pill-status-actioned {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

:root[data-theme="light"] .pill-status-dismissed {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

:root[data-theme="light"] .pill-status-archived {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #4b5563;
}

/* Drawer overlay + panel */
:root[data-theme="light"] .details-overlay {
  background: rgba(15, 23, 42, 0.25);
}

:root[data-theme="light"] .details-drawer {
  background: #f9fafb;
  box-shadow: -18px 0 36px rgba(15, 23, 42, 0.16);
  border-left: 1px solid #e5e7eb;
}

:root[data-theme="light"] .details-body {
  border-top-color: #e5e7eb;
}

/* Preview block in drawer */
:root[data-theme="light"] .details-preview-block {
  background: #ffffff;
  border-radius: 10px;
  border-color: #e5e7eb;
}

/* Error banner */
:root[data-theme="light"] .error-banner {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}
\n

/* === UAOL – Light theme polish pass (marker: LIGHT_THEME_PRO_V3) === */

/* Make main cards lighter and a bit squarer */
:root[data-theme="light"] .card-list .alert-row:not(.alert-row-header) {
  background: #ffffff !important;
  border-radius: 10px;
  border-color: #e5e7eb;
}

:root[data-theme="light"] .card-list .alert-row:not(.alert-row-header):hover {
  background: #f9fafb !important;
  border-color: #d1d5db;
}

/* Slightly sharper UI elements – less pill, more card */
:root[data-theme="light"] .filter-chip,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .pill-soft,
:root[data-theme="light"] .tag-pill {
  border-radius: 6px;
}

/* Keep status pills rounded, but tighten radius a bit */
:root[data-theme="light"] .status-pill {
  border-radius: 999px;
  padding-inline: 8px;
  font-weight: 500;
}

/* Improve contrast for labels and section headings */
:root[data-theme="light"] .alert-card-label,
:root[data-theme="light"] .details-body h3,
:root[data-theme="light"] .details-meta,
:root[data-theme="light"] .tab-heading p {
  color: #4b5563;
}

/* Action buttons – clearer outline and text */
:root[data-theme="light"] .alert-card-action-btn-vertical,
:root[data-theme="light"] .details-action-btn {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

:root[data-theme="light"] .alert-card-action-btn-vertical:hover,
:root[data-theme="light"] .details-action-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* Drawer header + meta strip – lighten remaining dark patch */
:root[data-theme="light"] .details-header {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

:root[data-theme="light"] .details-meta {
  background: transparent;
}

/* Drawer body + preview container for extra clarity */
:root[data-theme="light"] .details-body {
  background: #f9fafb;
}

:root[data-theme="light"] .details-preview-block {
  background: #ffffff;
  border-radius: 8px;
  border-color: #e5e7eb;
}

/* Make generic small text a touch darker for readability */
:root[data-theme="light"] .text-soft,
:root[data-theme="light"] .text-muted {
  color: #6b7280;
}

/* === UAOL – Light theme corrections (marker: LIGHT_THEME_FIX_V4) === */

/* Main list rows: make them white cards in light mode */
:root[data-theme="light"] .alert-row:not(.alert-row-header) {
  background: #ffffff !important;
  border-radius: 8px;
  border-color: #e5e7eb;
}

:root[data-theme="light"] .alert-row:not(.alert-row-header):hover {
  background: #f9fafb !important;
  border-color: #d1d5db;
}

/* Corners a touch squarer for filters and generic pills */
:root[data-theme="light"] .filter-chip,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .pill-soft,
:root[data-theme="light"] .tag-pill {
  border-radius: 4px;
}

/* Drawer: header/body should be fully light */
:root[data-theme="light"] .details-header {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

:root[data-theme="light"] .details-body {
  background: #f9fafb;
  border-top-color: #e5e7eb;
}

/* Drawer preview / content block */
:root[data-theme="light"] .details-preview-block {
  background: #ffffff;
  border-radius: 8px;
  border-color: #e5e7eb;
}

/* "Open in source" pill – convert to light outline button */
:root[data-theme="light"] .open-link {
  background: #eef2ff;
  color: #4338ca;
  border-color: #a5b4fc;
}

:root[data-theme="light"] .open-link:hover {
  background: #e0e7ff;
  border-color: #6366f1;
  color: #312e81;
}

/* Improve contrast for small labels inside cards and drawer */
:root[data-theme="light"] .alert-card-label,
:root[data-theme="light"] .details-body h3 {
  color: #4b5563;
  opacity: 1;
}

/* === UAOL – Light theme sharper corners (marker: LIGHT_THEME_CORNERS_V5) === */

/* Outer shell + main panels */
:root[data-theme="light"] .shell-inner {
  border-radius: 16px;
}

:root[data-theme="light"] .filter-rail {
  border-radius: 10px;
}

:root[data-theme="light"] .tabs-row {
  border-radius: 8px;
}

:root[data-theme="light"] .tab-panels {
  border-radius: 12px;
}

/* Cards rows */
:root[data-theme="light"] .alert-row:not(.alert-row-header) {
  border-radius: 6px;
}

/* Tabs + chips + generic pills */
:root[data-theme="light"] .tab-button {
  border-radius: 4px;
}

:root[data-theme="light"] .filter-chip,
:root[data-theme="light"] .pill,
:root[data-theme="light"] .pill-soft,
:root[data-theme="light"] .tag-pill {
  border-radius: 3px;
}

/* "Open in source" – match other buttons, not a pill */
:root[data-theme="light"] .open-link {
  border-radius: 4px;
}

/* === UAOL – Light theme container + header tweaks (marker: LIGHT_THEME_TWEAK_V6) === */

/* Big containers a bit squarer in light mode */
:root[data-theme="light"] .shell-inner {
  border-radius: 10px;
}

:root[data-theme="light"] .filter-rail {
  border-radius: 8px;
}

:root[data-theme="light"] .tab-panels {
  border-radius: 8px;
}

:root[data-theme="light"] .tab-heading {
  border-radius: 8px 8px 0 0;
}

/* Cards: small, crisp radius */
:root[data-theme="light"] .alert-row:not(.alert-row-header) {
  border-radius: 4px;
}

/* Column headers (SOURCE / FROM / STATUS / ALERT / LAST ACTIVITY / ACTIONS) */
:root[data-theme="light"] .alert-row-header {
  color: #374151;
  font-weight: 600;
}

/* Make any small header labels in the row header clearly readable */
:root[data-theme="light"] .alert-row-header .text-soft,
:root[data-theme="light"] .alert-row-header .text-muted {
  color: #374151;
  opacity: 1;
}

/* === UAOL – Light theme column header band (marker: LIGHT_THEME_HEADERS_V7) === */

/* Header row under 'M365 Emails' – make it clearly a heading */
:root[data-theme="light"] .alert-row-header {
  background: #eef2ff;
  color: #111827;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #e5e7eb;
}

/* Ensure any softer text helpers inside header are also strong enough */
:root[data-theme="light"] .alert-row-header .text-soft,
:root[data-theme="light"] .alert-row-header .text-muted {
  color: #111827;
  opacity: 1;
}

/* === UAOL – Light theme header vertical alignment (marker: LIGHT_THEME_HEADERS_ALIGN_V8) === */

/* Center the SOURCE / FROM / STATUS / ALERT / LAST ACTIVITY / ACTIONS labels vertically */
:root[data-theme="light"] .card-list .alert-row-header {
  align-items: center;
}



/* Dedicated colour for "Added to To-Do" status pills */
.pill-status-todo {
  background: rgba(37, 99, 235, 0.10);
  border-color: #2563eb;
  color: #1d4ed8;
}

/* Light theme variant for To-Do status pills */
[data-theme="light"] .pill-status-todo {
  background: rgba(37, 99, 235, 0.06);
  border-color: #2563eb;
  color: #1d4ed8;
}


/* UAOL theme: To-Do status light accent */
:root[data-theme="light"] .pill-status-todo {
  background-color: rgba(37, 99, 235, 0.08);  /* soft blue wash */
  border-color: rgba(37, 99, 235, 0.25);
  color: #1d4ed8;                              /* readable mid-blue text */
}



/* UAOL app.css patch 2025-12-05f drawer action pills */
.details-action-btn {
  transition: background-color 0.15s ease,
              color 0.15s ease,
              border-color 0.15s ease;
}

/* Drawer actions: active state matches main card pills */
#details-drawer .details-action-btn.active {
  background-color: #f9fbff;  /* same blue family as main To-Do pill */
  border-color: #0f94fb;
  color: #111827;
}



/* UAOL app.css patch 2025-12-05g drawer action pills */
#details-drawer .details-action-btn.details-action-btn-active {
  background-color: #0f94fb;   /* match main blue status pill */
  border-color: #0f94fb;
  color: #ffffff;
}



/* UAOL app.css patch 2025-12-05h drawer active outline */
#details-drawer .details-action-btn.details-action-btn-active {
  background-color: #ffffff;   /* match main card button */
  border-color: #0f94fb;       /* blue outline */
  color: #0f94fb;              /* blue text */
}


/* UAOL Phase2 rollback: show legacy tabs row again */
/* UAOL Phase2: header + sources label tweaks */
.feed-refresh-btn {
  float: right;
  margin-left: auto;
}

.uaol-sources-label,
.uaol-backup-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa4b2;
}



/* UAOL Phase2: SOURCES primary navigation */
.sources-container {
  margin-top: 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sources-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sources-row.backup-row {
  margin-top: 2px;
}

.sources-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-softer);
}

.source-pill.pill-soft-active,
.pill-soft-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* Hide legacy Emails/GDrive/Local/Operations/To-Do tab row visually */
.tabs-row {
  display: none;
}


/* UAOL Phase2: sources layout tweaks */
.sources-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.sources-row {
  justify-content: flex-start;
}


/* UAOL Phase2: refresh button alignment */
#refresh-button {
  float: right;
  margin-left: auto;
}






/* UAOL Phase2: sources pill soft highlight */
.sources-row .pill-soft-active {
  background-color: var(--accent-soft) !important;  /* soft fill, like drawer buttons */
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 600;                                  /* subtle emphasis */
}


/* UAOL Phase2: backup row layout */
.sources-container {
  display: flex;
  flex-wrap: wrap;
}

.sources-row {
  display: flex;
  flex-wrap: wrap;
}

.sources-row.backup-row {
  width: 100%;
  margin-top: 6px;
}




/* UAOL Phase2: Xero view – hide email From column in list rows */
#tab-panel-ops .alert-col-from,
#tab-panel-ops .alert-row-header .alert-col-from {
  display: none;
}

/* UAOL Phase2: Xero layout – align Xero list columns with header row */
#tab-panel-ops .alert-col-from {
  display: none;
}

#tab-panel-ops .card-list .alert-row,
#tab-panel-ops .card-list .alert-row-header {
  grid-template-columns:
    minmax(120px, 1.1fr)   /* Source  */
    minmax(110px, 0.9fr)   /* Status  */
    minmax(320px, 3fr)     /* Alert   */
    minmax(140px, 1fr)     /* Last    */
    minmax(150px, 1.1fr);  /* Actions */
}


/* UAOL Phase2: Xero grid – compact card layout */
#tab-panel-ops .card-list .alert-row,
#tab-panel-ops .card-list .alert-row-header {
  /* Xero list: Source | Status | Alert | Last activity | Actions */
  grid-template-columns:
    minmax(100px, 0.9fr)   /* Source        */
    minmax(110px, 0.9fr)   /* Status        */
    minmax(360px, 2.7fr)   /* Alert         */
    minmax(120px, 0.9fr)   /* Last activity */
    minmax(140px, 1fr);    /* Actions       */
}

/* UAOL Phase2: Xero grid – compact final layout */
#tab-panel-ops .card-list .alert-row-header,
#tab-panel-ops .card-list .alert-row {
  grid-template-columns:
    minmax(90px, 0.75fr)   /* Source        */
    minmax(120px, 0.85fr)  /* Status        */
    minmax(360px, 2.6fr)   /* Alert         */
    minmax(110px, 0.8fr)   /* Last activity */
    minmax(120px, 0.9fr);  /* Actions       */
}

/* Slightly tighter right padding just for Xero rows
   so action buttons stay comfortably inside the card */
#tab-panel-ops .card-list .alert-row {
  padding-right: 0.75rem;
}\n\n
/* UAOL Phase2: Xero grid – compact card layout v3 */
/* Make Xero rows slightly tighter so Actions sits fully inside the card */
#tab-panel-ops .card-list .alert-row,
#tab-panel-ops .card-list .alert-row-header {
  display: grid;
  grid-template-columns:
    minmax(80px, 0.6fr)   /* Source */
    minmax(120px, 0.75fr) /* Status */
    minmax(360px, 2.2fr)  /* Alert */
    minmax(110px, 0.65fr) /* Last activity */
    minmax(120px, 0.8fr); /* Actions */
}

/* Slightly tighter right padding so the actions stack stays inside */
#tab-panel-ops .card-list .alert-row {
  padding-right: 0.5rem;
}
 /* UAOL Phase2: Xero grid – compact card layout v3 */\n\n\n
/* UAOL Phase2: Xero forced grid – 5 columns */
#tab-panel-ops .card-list .alert-row-header,
#tab-panel-ops .card-list .alert-row {
  /* Columns: Source | Status | Alert | Last activity | Actions */
  display: grid;
  grid-template-columns:
    minmax(80px, 0.7fr)    /* Source        */
    minmax(120px, 0.85fr)  /* Status        */
    minmax(360px, 2.4fr)   /* Alert         */
    minmax(110px, 0.75fr)  /* Last activity */
    minmax(130px, 0.9fr);  /* Actions       */
}

/* Slightly tighter right padding so actions sit comfortably inside card */
#tab-panel-ops .card-list .alert-row {
  padding-right: 0.5rem;
}

/* UAOL Phase2: Xero forced grid – 5 columns */\n

/* UAOL Phase2: Xero grid content-based columns v5 */
/* Use a 5-column grid sized by content so Xero actions stay fully inside the card */
#tab-panel-ops .card-list .alert-row-header,
#tab-panel-ops .card-list .alert-row {
  display: grid;
  grid-template-columns:
    max-content        /* Source */
    max-content        /* Status */
    minmax(0, 1fr)     /* Alert (flex column, fills the rest) */
    max-content        /* Last activity */
    max-content;       /* Actions */
  column-gap: 1rem;
}

/* Slightly tighter right padding so the Actions stack sits comfortably inside the card */
#tab-panel-ops .card-list .alert-row {
  padding-right: 0.5rem;
}

/* marker: UAOL Phase2: Xero grid content-based columns v5 */

/* UAOL Phase2: Xero grid – final Last activity alignment v6 */
#tab-panel-ops .card-list .alert-row,
#tab-panel-ops .card-list .alert-row-header {
  grid-template-columns:
    max-content        /* Source */
    max-content        /* Status */
    minmax(0, 1.05fr)  /* Alert (fills most remaining space) */
    max-content        /* Last activity */
    max-content;       /* Actions */
  column-gap: 0.75rem;
}

/* Make sure Xero LAST ACTIVITY header text lines up with the dates */
#tab-panel-ops .alert-row-header .alert-col-last {
  text-align: left;
}

/* UAOL Phase2: Xero grid reset basic 5-column layout v1 */
#tab-panel-ops .card-list .alert-row-header,
#tab-panel-ops .card-list .alert-row {
  display: grid;
  grid-template-columns:
    max-content        /* Source        */
    max-content        /* Status        */
    minmax(0, 1fr)     /* Alert         */
    max-content        /* Last activity */
    max-content;       /* Actions       */
  column-gap: 1.25rem;
}

#tab-panel-ops .alert-row-header .alert-col-last {
  text-align: left;
}


/* UAOL Phase2: Xero grid – fixed 5-column layout v7 */
/* Force a stable 5-column grid for Xero: Source | Status | Alert | Last activity | Actions */
#tab-panel-ops .card-list .alert-row-header,
#tab-panel-ops .card-list .alert-row {
  display: grid;
  grid-template-columns:
    80px            /* Source        */
    120px           /* Status        */
    minmax(0, 1fr)  /* Alert         */
    110px           /* Last activity */
    140px;          /* Actions       */
  column-gap: 0.75rem;
}

/* Keep LAST ACTIVITY header text aligned with the dates */
#tab-panel-ops .alert-row-header .alert-col-last {
  text-align: left;
}

/* UAOL Phase2: Xero header centre tweak v1 */
/* Centre Xero header labels for Last activity and Actions only */
#tab-panel-ops .card-list .alert-row-header .alert-col-date,
#tab-panel-ops .card-list .alert-row-header .alert-col-actions {
  text-align: center;
}

/* UAOL Phase2: Xero header centre tweak v2 */
/* Centre Xero header labels for Last activity and Actions only */
#tab-panel-ops .card-list .alert-row-header .alert-col-last,
#tab-panel-ops .card-list .alert-row-header .alert-col-actions {
  align-items: center;
  text-align: center;
}

/* ============================================================
   BACKUP FEED STYLES - Added 2025-12-12
   ============================================================ */

/* Backup data row layout */
.backup-data-row {
  display: grid;
  grid-template-columns: 80px 1fr 110px 60px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.backup-data-row:hover {
  background: var(--bg-elevated-soft);
}

.backup-data-row.backup-data-row-selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}

.backup-data-row-header {
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-softer);
  cursor: default;
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px 16px;
}

.backup-data-row-header:hover {
  background: transparent;
}

/* Backup columns */
.backup-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-col-source {
  width: 80px;
}

.backup-col-filename {
  flex: 1;
  font-weight: 500;
  min-width: 0;
}

.backup-col-time {
  width: 110px;
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}

.backup-col-status {
  width: 60px;
  text-align: center;
}

/* Source pills */
.pill-source-m365 {
  background: rgba(0, 120, 212, 0.15);
  border-color: #0078d4;
  color: #0078d4;
  font-size: 10px;
  padding: 2px 8px;
}

.pill-source-google,
.pill-source-gdrive {
  background: rgba(66, 133, 244, 0.15);
  border-color: #4285f4;
  color: #4285f4;
  font-size: 10px;
  padding: 2px 8px;
}

.pill-source-local {
  background: rgba(107, 114, 128, 0.15);
  border-color: #6b7280;
  color: #6b7280;
  font-size: 10px;
  padding: 2px 8px;
}

.pill-source-unknown {
  background: rgba(107, 114, 128, 0.15);
  border-color: #6b7280;
  color: #6b7280;
  font-size: 10px;
  padding: 2px 8px;
}

/* Status icons */
.backup-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
}

.backup-status-completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.backup-status-pending,
.backup-status-in_progress {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.backup-status-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.backup-status-skipped {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

/* Summary stats in heading */
.backups-summary {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-size: 13px;
}

.summary-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}

.summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.summary-stat-completed .summary-dot {
  background: #22c55e;
}

.summary-stat-pending .summary-dot {
  background: #eab308;
}

.summary-stat-failed .summary-dot {
  background: #ef4444;
}

/* Backup list container */
.backup-list-container {
  margin-top: 12px;
}

/* Backup drawer enhancements */
.pill-backup-completed {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
}

.pill-backup-pending {
  background: rgba(234, 179, 8, 0.15) !important;
  border-color: #eab308 !important;
  color: #eab308 !important;
}

.pill-backup-failed {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Filter dots for backup filters */
.filter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.filter-dot-green {
  background: #22c55e;
}

.filter-dot-yellow {
  background: #eab308;
}

.filter-dot-red {
  background: #ef4444;
}

/* Light theme overrides for backup */
:root[data-theme="light"] .backup-data-row {
  background: var(--bg-elevated);
}

:root[data-theme="light"] .backup-data-row:hover {
  background: var(--bg-elevated-soft);
}

:root[data-theme="light"] #tab-panel-backups .empty-state {
  background: var(--bg-elevated-soft);
  color: var(--text-soft);
}

:root[data-theme="light"] #tab-panel-backups .backup-list-container {
  background: var(--bg-elevated);
}

:root[data-theme="light"] .pill-source-m365 {
  background: rgba(0, 120, 212, 0.1);
}

:root[data-theme="light"] .pill-source-google,
:root[data-theme="light"] .pill-source-gdrive {
  background: rgba(66, 133, 244, 0.1);
}

:root[data-theme="light"] .backup-status-completed {
  background: rgba(34, 197, 94, 0.1);
}

:root[data-theme="light"] .backup-status-pending,
:root[data-theme="light"] .backup-status-in_progress {
  background: rgba(234, 179, 8, 0.1);
}

:root[data-theme="light"] .backup-status-failed {
  background: rgba(239, 68, 68, 0.1);
}

/* Equal width backup destination buttons */
#backup-btn-sharepoint,
#backup-btn-gdrive {
  min-width: 100px;
  text-align: center;
}

/* Deleted backup status */
.backup-status-deleted {
  background: #6b7280;
  color: white;
}

.backup-row-deleted {
  opacity: 0.7;
}

.backup-row-deleted .backup-col-filename {
  text-decoration: line-through;
  color: var(--text-softer);
}

/* Summary stat for deleted */
.summary-stat-deleted .summary-dot {
  background: #6b7280;
}

/* Filter dot for gray/deleted */
.filter-dot-gray {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
  margin-right: 6px;
}

/* Show deleted toggle styling */
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-soft);
}

.filter-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.filter-toggle:hover {
  color: var(--text);
}

/* Mark as deleted button */
.btn-danger {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  margin-left: 8px;
  transition: all var(--transition-fast);
}

.btn-danger:hover {
  background: #ef4444;
  color: white;
}

/* Deleted backup pill */
.pill-backup-deleted {
  background: #6b7280;
  color: white;
}

.pill-backup-skipped {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
}

/* Toast notification */
.toast-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-elevated);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.toast-notification.toast-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Backup metadata display in drawer */
.backup-metadata {
  font-size: 13px;
  line-height: 1.6;
}

.backup-metadata .meta-section {
  margin-top: 16px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.backup-metadata .meta-section:first-child {
  margin-top: 0;
}

.backup-metadata .meta-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.backup-metadata .meta-label {
  color: var(--text-soft);
  min-width: 100px;
  flex-shrink: 0;
}

.backup-metadata .meta-value {
  color: var(--text);
  word-break: break-word;
}

.backup-metadata .meta-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-inset);
  padding: 2px 6px;
  border-radius: 4px;
}

.backup-metadata .meta-small {
  font-size: 10px;
}

.backup-metadata .ai-summary-text {
  color: var(--text-primary);
  line-height: 1.5;
  padding: 8px 0;
}

.backup-metadata .meta-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 12px 0;
}

/* ============================================================================
   PHASE A: SIDEBAR NAVIGATION + FIXES
   Append this to the end of app.css
   ============================================================================ */

/* === LAYOUT VARIABLES === */
:root {
  --sidebar-width-collapsed: 64px;
  --sidebar-width-expanded: 240px;
  --sidebar-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === APP LAYOUT === */
.app-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* === SIDEBAR === */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width-collapsed);
  background: linear-gradient(180deg, rgba(8, 18, 32, 0.98) 0%, rgba(5, 8, 22, 0.98) 100%);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width var(--sidebar-transition);
  overflow: hidden;
}

.sidebar.expanded {
  width: var(--sidebar-width-expanded);
}

.sidebar.ready {
  opacity: 1;
}

:root[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%);
  border-right-color: rgba(209, 213, 219, 0.9);
}

/* Sidebar Header */
.sidebar-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 64px;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, #818cf8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.sidebar-brand {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--sidebar-transition), transform var(--sidebar-transition);
}

.sidebar.expanded .sidebar-brand {
  opacity: 1;
  transform: translateX(0);
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 13px;
  position: relative;
}

.sidebar-nav-item:hover {
  background: var(--accent-soft);
  color: var(--text-main);
}

.sidebar-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.sidebar-nav-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-nav-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

.sidebar-nav-label {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--sidebar-transition), transform var(--sidebar-transition);
}

.sidebar.expanded .sidebar-nav-label {
  opacity: 1;
  transform: translateX(0);
}

/* Sidebar Sections */
.sidebar-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.sidebar-section-label {
  padding: 0 12px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-softer);
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity var(--sidebar-transition), height var(--sidebar-transition);
}

.sidebar.expanded .sidebar-section-label {
  opacity: 1;
  height: auto;
}

/* Sidebar Filters (only visible when expanded) */
.sidebar-filters {
  display: none;
}

.sidebar.expanded .sidebar-filters {
  display: block;
}

.sidebar-filter-group {
  padding: 0 8px;
  margin-bottom: 12px;
}

.sidebar-filter-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-softer);
  margin-bottom: 6px;
  padding-left: 4px;
}

.sidebar-filters .filter-chip {
  display: inline-block;
  padding: 4px 8px;
  margin: 0 4px 4px 0;
  border-radius: 999px;
  font-size: 10px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s;
}

.sidebar-filters .filter-chip:hover,
.sidebar-filters .filter-chip.filter-chip-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 8px;
  border-top: 1px solid var(--border-subtle);
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
}

.sidebar-toggle:hover {
  background: var(--accent-soft);
  color: var(--text-main);
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--sidebar-transition);
}

.sidebar.expanded .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Tooltips for collapsed sidebar */
.sidebar:not(.expanded) .sidebar-nav-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.sidebar:not(.expanded) .sidebar-nav-item[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* === MAIN CONTENT === */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width-collapsed);
  transition: margin-left var(--sidebar-transition);
  min-height: 100vh;
}

.sidebar.expanded ~ .main-content {
  margin-left: var(--sidebar-width-expanded);
}

/* Hide the old filter-rail in main content */
.filter-rail {
  display: none !important;
}

/* Make layout-main full width since filter-rail is gone */
.layout-main {
  display: block;
}

.tab-panels {
  width: 100%;
}

/* === CARD RESIZE FIX WHEN DRAWER IS OPEN === */
body.drawer-open .main-content {
  margin-right: 480px;
}

body.drawer-open .alert-row {
  grid-template-columns:
    minmax(60px, 0.6fr)
    minmax(80px, 0.8fr)
    minmax(70px, 0.6fr)
    minmax(150px, 2fr)
    minmax(80px, 0.6fr)
    minmax(100px, 0.8fr);
}

/* === ACTION BUTTONS STACKED === */
.alert-col-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.alert-col-actions .pill {
  width: 100%;
  justify-content: center;
  padding: 4px 8px;
  font-size: 10px;
}

/* Details drawer action buttons - stacked */
.details-actions-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.details-actions-buttons .details-action-btn {
  width: 100%;
  justify-content: center;
}

/* === MOBILE === */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 90;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.expanded,
  .sidebar.mobile-open {
    transform: translateX(0);
    width: var(--sidebar-width-expanded);
  }
  
  .main-content {
    margin-left: 0 !important;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  body.drawer-open .main-content {
    margin-right: 0;
  }
  
  .details-drawer {
    width: 100% !important;
  }
}

/* === DRAWER BODY CLASS TOGGLE === */
/* Add this class via JS when drawer opens/closes */

/* ============================================================================
   BACKUP FILTERS STYLING
   ============================================================================ */

/* Filter dots for backup status */
.filter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.filter-dot-success { background: #22c55e; }
.filter-dot-pending { background: #f59e0b; }
.filter-dot-failed { background: #ef4444; }
.filter-dot-deleted { background: #6b7280; }

/* Checkbox styling */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.filter-checkbox:hover { color: var(--text-main); }

/* Active filter chip state for sidebar */
.sidebar-filters .filter-chip.filter-chip-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Stack backup filter chips vertically */
#sidebar-filters-backups .sidebar-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#sidebar-filters-backups .filter-chip {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}

/* ============================================================================
   SEAMLESS LAYOUT FIX - Remove floating card effect
   ============================================================================ */

/* Remove the floating card effect from shell-inner */
.shell-inner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 24px 28px !important;
}

/* Give main-content its own background */
.main-content {
  background: var(--bg);
}

/* Remove shell padding/max-width constraints */
.shell {
  max-width: none;
  padding: 0;
}

/* Ensure body background doesn't show through gaps */
body {
  background: var(--bg);
}

:root[data-theme="light"] .main-content {
  background: var(--bg);
}

/* Stack alert filter chips vertically (same as backup filters) */
#sidebar-filters-alerts .sidebar-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#sidebar-filters-alerts .filter-chip {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}

/* Backup filters use .active class (manually toggled, not from app.js) */
.sidebar-filters .filter-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================================
   PAGINATION CONTROLS
   ============================================================================ */

.pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-top: 16px;
  border-top: 1px solid var(--border);
}

.pagination-info {
  font-size: 13px;
  color: var(--text-soft);
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.pagination-btn:disabled,
.pagination-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-page {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-page:hover {
  background: var(--surface);
  color: var(--text-main);
}

.pagination-page-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.pagination-page-active:hover {
  background: var(--accent);
  color: white;
}

.pagination-dots {
  padding: 0 4px;
  color: var(--text-soft);
}

/* Light theme pagination */
:root[data-theme="light"] .pagination-btn {
  background: white;
}

:root[data-theme="light"] .pagination-page:hover {
  background: var(--surface);
}

/* ============================================================
   PHASE B: PAGE ROUTING & NEW PAGES
   ============================================================ */

/* App Pages - show/hide mechanism */
.app-page {
  display: none;
}

.app-page.app-page-active {
  display: block;
}

/* ============================================================
   WELCOME PAGE (Empty State)
   ============================================================ */

.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 3rem 2rem;
  max-width: 480px;
  margin: 0 auto;
}

.welcome-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #a78bfa;
}

.welcome-icon svg {
  width: 48px;
  height: 48px;
}

.welcome-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary, #f1f5f9);
}

.welcome-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary, #94a3b8);
  margin: 0 0 1.5rem 0;
}

.welcome-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted, #64748b);
  margin: 0 0 2rem 0;
}

.welcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.welcome-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.welcome-cta:active {
  transform: translateY(0);
}

.welcome-hint {
  font-size: 0.875rem;
  color: var(--text-muted, #64748b);
  margin-top: 1.5rem;
}

/* Light theme adjustments */
[data-theme="light"] .welcome-title {
  color: #1e293b;
}

[data-theme="light"] .welcome-subtitle {
  color: #475569;
}

[data-theme="light"] .welcome-body {
  color: #64748b;
}

/* ============================================================
   PAGE HEADER (shared)
   ============================================================ */

.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.page-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary, #f1f5f9);
}

.page-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary, #94a3b8);
  margin: 0;
}

[data-theme="light"] .page-header h1 {
  color: #1e293b;
}

[data-theme="light"] .page-header {
  border-bottom-color: rgba(0,0,0,0.1);
}

/* ============================================================
   CONNECTIONS PAGE (Connector Hub)
   ============================================================ */

.connector-section {
  margin-bottom: 2.5rem;
}

.connector-section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.375rem 0;
  color: var(--text-primary, #f1f5f9);
}

.connector-section-title svg {
  opacity: 0.7;
}

.connector-section-desc {
  font-size: 0.875rem;
  color: var(--text-muted, #64748b);
  margin: 0 0 1.25rem 0;
}

.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.connector-card {
  background: var(--card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.connector-card:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.connector-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
}

.connector-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
}

.connector-icon-m365 { background: rgba(0, 120, 212, 0.15); color: #0078d4; }
.connector-icon-google { background: rgba(66, 133, 244, 0.1); }
.connector-icon-xero { background: rgba(19, 181, 234, 0.15); }
.connector-icon-pipedrive { background: rgba(1, 119, 55, 0.15); }
.connector-icon-sharepoint { background: rgba(3, 131, 135, 0.15); }
.connector-icon-gdrive { background: rgba(66, 133, 244, 0.1); }
.connector-icon-more { background: rgba(255,255,255,0.05); color: var(--text-muted); }

.connector-info {
  flex: 1;
  min-width: 0;
}

.connector-info h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--text-primary, #f1f5f9);
}

.connector-info p {
  font-size: 0.8125rem;
  color: var(--text-muted, #64748b);
  margin: 0;
}

.connector-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  white-space: nowrap;
}

.connector-status-connected {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.connector-status-connected .status-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
}

.connector-status-not-connected {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted, #64748b);
}

.connector-card-body {
  padding: 1rem;
}

.connector-description {
  font-size: 0.875rem;
  color: var(--text-secondary, #94a3b8);
  margin: 0;
  line-height: 1.5;
}

.connector-account {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.account-email {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #f1f5f9);
}

.account-type {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
}

.connector-card-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.05));
  background: rgba(0,0,0,0.1);
}

.connector-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.connector-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
}

.connector-btn-primary:hover {
  filter: brightness(1.1);
}

.connector-btn-secondary {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #f1f5f9);
  border: 1px solid rgba(255,255,255,0.1);
}

.connector-btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}

.connector-card-more {
  border-style: dashed;
  opacity: 0.7;
}

.connector-card-more:hover {
  opacity: 1;
}

/* Light theme */
[data-theme="light"] .connector-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .connector-card:hover {
  border-color: rgba(0,0,0,0.15);
}

[data-theme="light"] .connector-card-footer {
  background: rgba(0,0,0,0.02);
}

[data-theme="light"] .connector-btn-secondary {
  background: rgba(0,0,0,0.05);
  color: #1e293b;
  border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .connector-info h3 {
  color: #1e293b;
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 720px;
}

.settings-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  margin: 0 0 0.75rem 0;
}

.settings-card {
  background: var(--card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.settings-label-text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary, #f1f5f9);
}

.settings-label-desc {
  font-size: 0.8125rem;
  color: var(--text-muted, #64748b);
}

.settings-value {
  flex-shrink: 0;
}

.settings-input {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-primary, #f1f5f9);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  min-width: 220px;
}

.settings-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-primary, #f1f5f9);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.settings-static {
  font-size: 0.875rem;
  color: var(--text-secondary, #94a3b8);
  padding: 0.5rem 0;
}

/* Toggle switch */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.15);
  transition: 0.2s;
  border-radius: 24px;
}

.settings-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  transition: 0.2s;
  border-radius: 50%;
}

.settings-toggle input:checked + .settings-toggle-slider {
  background: #6366f1;
}

.settings-toggle input:checked + .settings-toggle-slider:before {
  transform: translateX(20px);
}

/* Danger zone */
.settings-section-danger .settings-section-title {
  color: #f87171;
}

.settings-card-danger {
  border-color: rgba(248, 113, 113, 0.3);
}

.settings-btn {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.settings-btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* Light theme */
[data-theme="light"] .settings-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .settings-label-text {
  color: #1e293b;
}

[data-theme="light"] .settings-input,
[data-theme="light"] .settings-select {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.1);
  color: #1e293b;
}

[data-theme="light"] .settings-toggle-slider {
  background: rgba(0,0,0,0.15);
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */

.search-container {
  max-width: 640px;
}

.search-box {
  position: relative;
  margin-bottom: 2rem;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #64748b);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  font-size: 1rem;
  color: var(--text-primary, #f1f5f9);
  background: var(--card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.search-input::placeholder {
  color: var(--text-muted, #64748b);
}

.search-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-secondary, #94a3b8);
}

.search-placeholder p {
  margin: 1rem 0 0.5rem 0;
}

.search-placeholder .muted {
  font-size: 0.875rem;
  color: var(--text-muted, #64748b);
}

[data-theme="light"] .search-input {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  color: #1e293b;
}


/* ============================================================
   FIX: Backup row spacing
   ============================================================ */

/* ============================================================
   FIX: Space between backup row and content cards
   ============================================================ */
.tab-panels {
  margin-top: 1rem !important;
}

/* ============================================================
   FIX: Center text in source/backup pill buttons
   ============================================================ */
.sources-row .pill,
.sources-row .pill-soft,
.sources-group .pill,
.sources-group .pill-soft {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ============================================================
   FIX: Consistent spacing between toolbar, sources, and backup rows
   ============================================================ */
.toolbar-row {
  margin-bottom: 0.75rem !important;
}

.sources-row {
  margin-bottom: 0.5rem !important;
}

.sources-row.backup-row {
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* =====================================================================
   CONNECTOR HUB - Phase 1 Static UI Styles
   ===================================================================== */

/* Empty state for new users */
.connector-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--bg-elevated-soft);
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 24px;
}

.connector-empty-state .empty-state-icon {
  color: var(--text-softer);
  margin-bottom: 16px;
  opacity: 0.6;
}

.connector-empty-state h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}

.connector-empty-state p {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-soft);
  max-width: 360px;
}

/* Connected card variant */
.connector-card-connected {
  border-color: rgba(34, 197, 94, 0.3);
}

.connector-card-connected:hover {
  border-color: rgba(34, 197, 94, 0.5);
}

/* Available card variant */
.connector-card-available {
  border-color: var(--border-subtle);
}

.connector-card-available:hover {
  border-color: var(--accent);
}

/* Coming soon card variant */
.connector-card-coming-soon {
  opacity: 0.6;
  pointer-events: none;
}

.connector-card-coming-soon .connector-card-footer {
  display: none;
}

/* Status variants */
.connector-status-available {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
}

.connector-status-coming-soon {
  color: var(--text-softer);
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
}

/* Stats row inside cards */
.connector-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.connector-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}

.connector-stat svg {
  opacity: 0.7;
}

/* Backup destination logos row */
.connector-backup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.backup-label {
  font-size: 11px;
  color: var(--text-softer);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.backup-logos {
  display: flex;
  gap: 6px;
}

.backup-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-elevated-soft);
  border: 1px solid var(--border-subtle);
  cursor: help;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.backup-logo:hover {
  transform: scale(1.1);
  border-color: var(--accent);
}

.backup-logo-none {
  font-size: 14px;
  color: var(--text-softer);
  padding: 4px 8px;
}

/* Sources backing up section (for backup destinations) */
.connector-sources-using {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.connector-sources-using .sources-label {
  font-size: 11px;
  color: var(--text-softer);
}

.source-badges {
  display: flex;
  gap: 6px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
}

/* Additional connector icon colors */
.connector-icon-rex { background: rgba(227, 24, 55, 0.15); }
.connector-icon-asana { background: rgba(240, 106, 106, 0.15); }
.connector-icon-freshdesk { background: rgba(37, 193, 111, 0.15); }
.connector-icon-propertyme { background: rgba(91, 45, 144, 0.15); }
.connector-icon-domain { background: rgba(13, 59, 102, 0.15); }
.connector-icon-myob { background: rgba(107, 45, 144, 0.15); }
.connector-icon-docusign { background: rgba(255, 214, 51, 0.15); }
.connector-icon-salesforce { background: rgba(0, 161, 224, 0.15); }

/* Button with icon */
.connector-btn svg {
  flex-shrink: 0;
}

.connector-btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.connector-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* =====================================================================
   CONNECTOR SETTINGS DRAWER
   ===================================================================== */

.connector-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.connector-settings-overlay.active {
  opacity: 1;
  visibility: visible;
}

.connector-settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.connector-settings-drawer.active {
  transform: translateX(0);
}

.connector-settings-inner {
  padding: 24px;
}

.connector-settings-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-elevated-soft);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.connector-settings-close:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.connector-settings-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.connector-settings-header .connector-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.connector-settings-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
}

.connector-settings-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}

.connector-settings-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.connector-settings-section {
  background: var(--bg-elevated-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
}

.connector-settings-section-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

.connector-settings-section-desc {
  margin: -8px 0 16px;
  font-size: 13px;
  color: var(--text-softer);
}

.connector-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.connector-settings-row:last-of-type {
  border-bottom: none;
}

.connector-settings-label {
  font-size: 13px;
  color: var(--text-soft);
}

.connector-settings-value {
  font-size: 13px;
  color: var(--text-main);
  font-weight: 500;
}

.connector-settings-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* Checkbox styles for backup config */
.connector-settings-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connector-settings-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.connector-settings-checkbox:hover {
  border-color: var(--accent);
}

.connector-settings-checkbox input {
  display: none;
}

.connector-settings-checkbox input:checked + .checkbox-icon {
  opacity: 1;
}

.connector-settings-checkbox input:not(:checked) + .checkbox-icon {
  opacity: 0.4;
}

.connector-settings-checkbox input:checked ~ .checkbox-label {
  color: var(--text-main);
  font-weight: 500;
}

.checkbox-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.checkbox-icon-none {
  color: var(--text-softer);
}

.checkbox-label {
  font-size: 14px;
  color: var(--text-soft);
}

.checkbox-desc {
  font-size: 12px;
  color: var(--text-softer);
  margin-left: auto;
}

/* Stats grid */
.connector-settings-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.connector-settings-stat {
  text-align: center;
  padding: 16px 8px;
  background: var(--bg-elevated);
  border-radius: 8px;
}

.connector-settings-stat .stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.connector-settings-stat .stat-label {
  font-size: 11px;
  color: var(--text-softer);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================================
   LIGHT THEME OVERRIDES
   ===================================================================== */

[data-theme="light"] .connector-empty-state {
  background: #f9fafb;
  border-color: #d1d5db;
}

[data-theme="light"] .connector-card-connected {
  border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="light"] .connector-backup-row,
[data-theme="light"] .connector-stats,
[data-theme="light"] .connector-sources-using {
  border-top-color: #e5e7eb;
}

[data-theme="light"] .backup-logo {
  background: #f3f4f6;
  border-color: #d1d5db;
}

[data-theme="light"] .source-badge {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

[data-theme="light"] .connector-settings-drawer {
  background: #ffffff;
  border-left-color: #e5e7eb;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .connector-settings-section {
  background: #f9fafb;
  border-color: #e5e7eb;
}

[data-theme="light"] .connector-settings-row {
  border-bottom-color: #e5e7eb;
}

[data-theme="light"] .connector-settings-checkbox {
  background: #ffffff;
  border-color: #d1d5db;
}

[data-theme="light"] .connector-settings-stat {
  background: #ffffff;
}

[data-theme="light"] .connector-btn-danger {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}

[data-theme="light"] .connector-btn-danger:hover {
  background: #fee2e2;
}

/* =====================================================================
   CONNECTOR LIBRARY - Uniform Card Heights Fix
   ===================================================================== */

/* Make connector grid use equal height cards */
.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Cards should be flex columns to distribute space */
.connector-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card body grows to fill available space, pushing footer to bottom */
.connector-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Description text can grow */
.connector-card-body .connector-description {
  flex: 1;
}

/* Footer stays at bottom */
.connector-card-footer {
  margin-top: auto;
}

/* Ensure Coming Soon cards also stretch properly */
.connector-card-coming-soon .connector-card-body {
  flex: 1;
}

/* =====================================================================
   BACKUP DESTINATIONS - Uniform Card Heights Fix
   ===================================================================== */

/* Backup destination cards also need equal heights */
.connector-card[data-connector="sharepoint-backup"],
.connector-card[data-connector="gdrive-backup"] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ensure backup card body fills space */
.connector-card[data-connector="sharepoint-backup"] .connector-card-body,
.connector-card[data-connector="gdrive-backup"] .connector-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Stats and sources sections stay at natural size, account info can grow */
.connector-card[data-connector="sharepoint-backup"] .connector-account,
.connector-card[data-connector="gdrive-backup"] .connector-account {
  flex: 1;
}

/* =====================================================================
   BACKUP DESTINATIONS - Grid Equal Heights Fix
   ===================================================================== */

/* The grid container needs to stretch items */
.backup-destinations-section .connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* Force all backup cards to fill grid cell height */
.backup-destinations-section .connector-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Card body takes remaining space */
.backup-destinations-section .connector-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Push the settings button to bottom */
.backup-destinations-section .connector-card-footer {
  margin-top: auto;
}

/* =====================================================================
   BACKUP DESTINATIONS - Stronger Uniform Card Heights Fix
   ===================================================================== */

/* Target the backup destinations section grid specifically */
.connector-section:last-of-type .connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Force all connected backup cards to equal height */
.connector-card-connected[data-connector*="backup"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.connector-card-connected[data-connector*="backup"] .connector-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Sources backing up section should be at the bottom of the body */
.connector-card-connected[data-connector*="backup"] .connector-sources-using {
  margin-top: auto;
}

/* Stats section stays fixed height */
.connector-card-connected[data-connector*="backup"] .connector-stats {
  flex-shrink: 0;
}

/* Footer always at absolute bottom */
.connector-card-connected[data-connector*="backup"] .connector-card-footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* =====================================================================
   BACKUP DESTINATIONS - Header Height Alignment Fix
   ===================================================================== */

/* Set minimum height on backup card headers to match the tallest */
.connector-card-connected[data-connector*="backup"] .connector-card-header {
  min-height: 80px;
}

/* Ensure the connector-info section (title + description) aligns */
.connector-card-connected[data-connector*="backup"] .connector-card-header .connector-info p {
  min-height: 2.4em; /* Reserve space for 2 lines */
  line-height: 1.2em;
}

/* Account section also needs consistent height */
.connector-card-connected[data-connector*="backup"] .connector-account {
  min-height: 48px;
}

/* =====================================================================
   PHASE 2A: DATE VALIDATION & RECALCULATION STYLES
   ===================================================================== */

/* Date validation message */
.gap-date-validation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.3;
  flex-wrap: wrap;
}

.gap-date-validation svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.gap-date-validation svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.gap-date-validation-info {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.gap-date-validation-warning {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.gap-date-validation strong {
  color: inherit;
}

[data-theme="light"] .gap-date-validation-info {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

[data-theme="light"] .gap-date-validation-warning {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

/* Recalculating overlay */
.gap-recalc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 24, 39, 0.95);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}

.gap-recalc-overlay.active {
  opacity: 1;
  visibility: visible;
}

[data-theme="light"] .gap-recalc-overlay {
  background: rgba(255, 255, 255, 0.95);
}

.gap-recalc-content {
  text-align: center;
  padding: 20px;
}

.gap-recalc-content p {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.gap-recalc-note {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 16px !important;
}

.gap-recalc-cancel {
  margin-top: 12px;
}

/* Spinner */
.gap-recalc-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto 16px auto;
  animation: recalc-spin 0.8s linear infinite;
}

@keyframes recalc-spin {
  to { transform: rotate(360deg); }
}

/* =====================================================================
   PHASE 2A: MODALS & GAP HANDLING STYLES
   ===================================================================== */

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.88);
  /* backdrop-filter removed for solid look */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Container */
.modal-container {
  background: rgba(30, 41, 59, 0.99);
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease;
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
}

.modal-sm { width: 420px; }
.modal-md { width: 500px; }
.modal-lg { width: 600px; }

/* Modal Header */
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-icon-warning { background: rgba(217, 119, 6, 0.2); color: #d97706; }
.modal-icon-info { background: rgba(37, 99, 235, 0.2); color: #3b82f6; }
.modal-icon-success { background: rgba(5, 150, 105, 0.2); color: #059669; }
.modal-icon-danger { background: rgba(220, 38, 38, 0.2); color: #dc2626; }

/* Modal Body */
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-message {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
}

.modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-text-primary);
}

.modal-list li svg { flex-shrink: 0; margin-top: 2px; }
.modal-list li:nth-child(1) svg { color: #dc2626; }
.modal-list li:nth-child(2) svg { color: #059669; }
.modal-list li:nth-child(3) svg { color: #d97706; }

.modal-note {
  font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--color-surface-hover);
  padding: 12px;
  border-radius: 8px;
  margin: 0;
}

.modal-note strong { color: var(--color-text-primary); }

/* Webhook Setup Modal */
.modal-steps-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  counter-reset: step-counter;
}

.modal-steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-primary);
}

.modal-steps-list li:last-child {
  border-bottom: none;
}

.modal-steps-list .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.webhook-url-section {
  margin: 20px 0;
}

.webhook-url-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.webhook-url-container {
  display: flex;
  gap: 8px;
}

.webhook-url-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 12px;
  font-family: var(--font-mono);
}

.webhook-url-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.webhook-admin-section {
  margin: 16px 0;
  text-align: center;
}

.webhook-admin-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.webhook-admin-link:hover {
  text-decoration: underline;
}

/* Backfill Availability Indicator */
.connector-backfill-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 8px;
}

.connector-backfill-status.backfill-available {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.connector-backfill-status.backfill-unavailable {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.connector-backfill-status svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Modal Footer */
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-footer-center { justify-content: center; }

/* Gap Summary */
.gap-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--color-surface-hover);
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.gap-summary-item { display: flex; flex-direction: column; gap: 4px; }

.gap-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gap-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.gap-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  width: fit-content;
}

.gap-tier-entitled { background: rgba(5, 150, 105, 0.2); color: #10b981; }
.gap-tier-tier1 { background: rgba(217, 119, 6, 0.2); color: #f59e0b; }
.gap-tier-tier2 { background: rgba(234, 88, 12, 0.2); color: #f97316; }
.gap-tier-tier3 { background: rgba(220, 38, 38, 0.2); color: #ef4444; }

/* Gap Estimate */
.gap-estimate { margin-bottom: 20px; }

.gap-estimate-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

.gap-estimate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.gap-estimate-item {
  text-align: center;
  padding: 16px 12px;
  background: var(--color-surface-hover);
  border-radius: 10px;
}

.gap-estimate-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.gap-estimate-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.gap-estimate-cost { background: rgba(5, 150, 105, 0.15); }
.gap-estimate-free { color: #10b981 !important; }
.gap-estimate-paid { color: #ef4444 !important; }

/* Gap Options */
.gap-options {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

.gap-options-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

.gap-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gap-option:hover { border-color: var(--color-text-tertiary); }

.gap-option-selected,
.gap-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.05);
}

.gap-option input[type="radio"] {
  margin: 3px 0 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.gap-option-content { flex: 1; }

.gap-option-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.gap-option-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.gap-option-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.gap-option-badge-recommended {
  background: rgba(5, 150, 105, 0.2);
  color: #10b981;
}

.gap-option-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Gap Partial Date Picker */
.gap-option-datepicker {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.gap-date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.gap-date-field label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.gap-date-field input {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.gap-date-field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Backfill Progress */
.backfill-progress { margin-bottom: 20px; }

.backfill-progress-bar {
  height: 12px;
  background: var(--color-surface-hover);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.backfill-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.backfill-progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.backfill-progress-stats span:first-child {
  font-weight: 600;
  color: var(--color-primary);
}

.backfill-progress-stats span:last-child {
  color: var(--color-text-secondary);
}

.backfill-details {
  background: var(--color-surface-hover);
  padding: 16px;
  border-radius: 10px;
}

.backfill-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}

.backfill-detail-row span:first-child { color: var(--color-text-tertiary); }
.backfill-detail-row span:last-child { color: var(--color-text-primary); font-weight: 500; }

/* Toast Notifications */
.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 10001;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast-notification.toast-visible {
  transform: translateY(0);
  opacity: 1;
}

.toast-success { background: #059669; color: white; }
.toast-info { background: #2563eb; color: white; }
.toast-warning { background: #d97706; color: white; }
.toast-error { background: #dc2626; color: white; }

.toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  line-height: 1;
  margin-left: 8px;
}

.toast-close:hover { opacity: 1; }

/* Date Validation & Recalculation */
.gap-date-validation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.3;
  flex-wrap: wrap;
}

.gap-date-validation svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}



.gap-date-validation-info {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.gap-date-validation-warning {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.gap-date-validation strong { color: inherit; }

.gap-recalc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 24, 39, 0.95);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}

.gap-recalc-overlay.active {
  opacity: 1;
  visibility: visible;
}

.gap-recalc-content {
  text-align: center;
  padding: 20px;
}

.gap-recalc-content p {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.gap-recalc-note {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 16px !important;
}

.gap-recalc-cancel { margin-top: 12px; }

.gap-recalc-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto 16px auto;
  animation: recalc-spin 0.8s linear infinite;
}

@keyframes recalc-spin {
  to { transform: rotate(360deg); }
}


/* Modal Header Accent */
.modal-header {
  position: relative;
  border-top: 3px solid var(--color-primary);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.modal-header-warning {
  border-top-color: #d97706;
}

.modal-header-info {
  border-top-color: #3b82f6;
}

/* Better estimate card shadows */
.gap-estimate-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gap-estimate-cost {
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.2);
}

/* Gap option cards subtle shadow */
.gap-option {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gap-option:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* Solid modal for light theme */
[data-theme="light"] .modal-container {
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
}

/* ==================== PHASE 2B: GAP WARNING BADGE ==================== */
.gap-warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gap-warning-badge:hover {
  background: rgba(231, 76, 60, 0.25);
}

.gap-warning-badge svg {
  stroke: #e74c3c;
}
/* ==================== END PHASE 2B ==================== */

/* ==================== CONNECTOR SUBTITLE FIX ==================== */
.connector-info p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.connector-card-header {
  flex-wrap: nowrap;
}
/* ==================== END CONNECTOR SUBTITLE FIX ==================== */


/* ============================================================================
   SEARCH PAGE STYLES - Full-text search UI
   ============================================================================ */

/* Main search box at top */
.search-main-box {
  margin-bottom: 1.5rem;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-input-wrapper .search-icon {
  flex-shrink: 0;
  opacity: 0.5;
  margin-right: 0.75rem;
}

.search-input-wrapper .search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.875rem 0;
  font-size: 1rem;
  color: var(--text);
}

.search-input-wrapper .search-input:focus {
  outline: none;
  box-shadow: none;
}

.search-clear-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  opacity: 0.5;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: opacity 0.2s, background 0.2s;
}

.search-clear-btn:hover {
  opacity: 1;
  background: var(--surface-3);
}

.search-status {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Search layout - filters sidebar + results */
.search-layout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 400px;
}

@media (max-width: 900px) {
  .search-layout {
    grid-template-columns: 1fr;
  }
  .search-filters {
    order: 2;
  }
}

/* Filter sidebar */
.search-filters {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  height: fit-content;
  position: sticky;
  top: 1rem;
}

.filter-section {
  margin-bottom: 1.25rem;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.25rem 0;
}

.filter-option input[type="radio"],
.filter-option input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.filter-option .facet-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
}

.filter-date-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-date {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text);
  font-size: 0.875rem;
}

.filter-date:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-date-separator {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.filter-toggle {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.filter-reset-btn {
  width: 100%;
  padding: 0.625rem 1rem;
  margin-top: 1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-reset-btn:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--text-muted);
}

/* Results area */
.search-results-area {
  min-height: 300px;
}

/* State panels (initial, loading, no results, error) */
.search-state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.search-state-panel svg {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.search-state-panel h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text);
  font-size: 1.125rem;
}

.search-state-panel p {
  margin: 0 0 0.5rem 0;
}

.search-state-panel .muted {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.search-tips {
  margin-top: 1.5rem;
  text-align: left;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.search-tips p {
  margin: 0 0 0.75rem 0;
  color: var(--text);
}

.search-tips ul {
  margin: 0;
  padding-left: 1.25rem;
}

.search-tips li {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Loading spinner */
.search-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: search-spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.search-state-panel.search-error svg {
  color: var(--danger, #ef4444);
}

.search-state-panel.search-error h3 {
  color: var(--danger, #ef4444);
}

/* Results header */
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.search-results-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.search-results-count strong {
  color: var(--text);
}

.search-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.search-sort select {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
}

.search-sort select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Results list */
.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-result-item {
  display: block;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-result-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.search-result-title {
  font-weight: 500;
  color: var(--text);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.search-result-title mark {
  background: rgba(251, 191, 36, 0.3);
  color: inherit;
  padding: 0.1em 0.2em;
  border-radius: 2px;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.search-result-source {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 500;
}

.search-result-source.src-gmail { background: rgba(234, 67, 53, 0.15); color: #ea4335; }
.search-result-source.src-m365 { background: rgba(0, 120, 212, 0.15); color: #0078d4; }
.search-result-source.src-xero { background: rgba(19, 181, 234, 0.15); color: #13b5ea; }
.search-result-source.src-gdrive { background: rgba(66, 133, 244, 0.15); color: #4285f4; }
.search-result-source.src-asana { background: rgba(246, 115, 119, 0.15); color: #f67377; }
.search-result-source.src-rex { background: rgba(255, 107, 0, 0.15); color: #ff6b00; }
.search-result-source.src-pipedrive { background: rgba(40, 56, 69, 0.15); color: #283845; }
.search-result-source.src-domain { background: rgba(0, 169, 157, 0.15); color: #00a99d; }

.search-result-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.search-result-preview {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-preview mark {
  background: rgba(251, 191, 36, 0.3);
  color: inherit;
  padding: 0.1em 0.2em;
  border-radius: 2px;
}

.search-result-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.search-result-type {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  background: var(--accent-soft, rgba(99, 102, 241, 0.1));
  color: var(--accent);
}

.search-result-tag {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-muted);
}

.search-result-score {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Search pagination */
.search-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.search-pagination button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.search-pagination button:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--accent);
}

.search-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.search-pagination .pagination-info {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 1rem;
}

/* Light theme adjustments */
[data-theme="light"] .search-result-item {
  background: var(--surface-1);
}

[data-theme="light"] .search-filters {
  background: var(--surface-1);
}

[data-theme="light"] .search-tips {
  background: var(--surface-1);
  border: 1px solid var(--border);
}

[data-theme="light"] .search-result-source.src-pipedrive {
  background: rgba(40, 56, 69, 0.1);
}


/* ============================================================================
   SEARCH PAGE FIXES - Make input prominent and improve UX
   ============================================================================ */

/* Override original search styles - make input box prominent */
#page-search .search-main-box {
  margin-bottom: 2rem;
}

#page-search .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-1) !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0.5rem 1rem !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#page-search .search-input-wrapper:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}

#page-search .search-input-wrapper .search-icon {
  flex-shrink: 0;
  opacity: 0.6;
  margin-right: 0.75rem;
  width: 24px;
  height: 24px;
}

#page-search .search-input-wrapper .search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 0.875rem 0 !important;
  font-size: 1.125rem !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: none !important;
}

#page-search .search-input-wrapper .search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Search keyboard hint */
.search-keyboard-hint {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
  margin-left: 0.5rem;
}

.search-keyboard-hint kbd {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.125rem 0.375rem;
  font-family: inherit;
  font-size: 0.6875rem;
}

/* Better filter sidebar styling */
#page-search .search-filters {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

#page-search .filter-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

#page-search .filter-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#page-search .filter-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.875rem 0;
}

/* Facet loading state */
.filter-options.loading {
  opacity: 0.5;
}

.filter-options .facet-loading {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Better date inputs */
#page-search .filter-date {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.875rem;
}

#page-search .filter-date-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#page-search .filter-date-separator {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.25rem 0;
}

/* Better initial state */
#page-search .search-state-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3rem 2rem;
  margin-top: 0;
}

#page-search .search-tips {
  background: var(--surface-2);
  border: 1px solid var(--border);
  max-width: 400px;
}

/* Results improvements */
#page-search .search-result-item {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 0.875rem;
}

#page-search .search-result-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Status bar styling */
#page-search .search-status {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  min-height: 1.25rem;
}

/* Light theme improvements */
[data-theme="light"] #page-search .search-input-wrapper {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #page-search .search-filters {
  background: #fff;
}

[data-theme="light"] #page-search .search-state-panel {
  background: #fff;
}

[data-theme="light"] #page-search .search-result-item {
  background: #fff;
}


/* Search submit button */
.search-submit-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  margin-left: 0.75rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}

.search-submit-btn:hover {
  background: var(--accent-hover, #5558e3);
  transform: translateY(-1px);
}

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

.search-submit-btn svg {
  width: 18px;
  height: 18px;
}

/* Adjust input wrapper for button */
#page-search .search-input-wrapper {
  display: flex;
  align-items: center;
}

#page-search .search-input-wrapper .search-input {
  min-width: 0;
}

/* ============================================================================

/* ============================================================================
   PHASE C: TIMELINE VIEW - Single Clean Implementation
   Layout: TIME | LINE+DOT | CONTENT
   ============================================================================ */

/* Timeline wrapper */
.timeline-wrapper {
  position: relative;
  padding: 0;
}

/* Timeline group (each date section) */
.timeline-group {
  position: relative;
  margin-bottom: 1.5rem;
}

/* The single vertical line - runs full height of group */
.timeline-group::before {
  content: '';
  position: absolute;
  left: 95px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(140, 140, 140, 0.35);
}

/* Date header */
.timeline-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-left: 105px;
  margin-bottom: 1rem;
}

.timeline-date-badge {
  background: rgba(70, 80, 90, 0.85);
  color: #bbb;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.timeline-item-count {
  font-size: 0.68rem;
  color: #666;
}

/* Items container */
.timeline-items {
  position: relative;
}

/* Individual timeline item */
.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.timeline-item:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

/* Time - left column */
.timeline-item-time {
  width: 80px;
  text-align: right;
  padding-right: 12px;
  font-size: 0.72rem;
  color: #888;
  flex-shrink: 0;
  padding-top: 1px;
}

/* Dot - sits ON the line */
.timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-primary, #1a1a1a);
  border: 2px solid rgba(130, 160, 190, 0.55);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 2;
}

/* Dot colors by source - soft muted tones */
.timeline-dot.src-m365 { border-color: rgba(100, 150, 200, 0.6); }
.timeline-dot.src-gmail { border-color: rgba(190, 110, 110, 0.6); }
.timeline-dot.src-xero { border-color: rgba(80, 170, 170, 0.6); }
.timeline-dot.src-asana { border-color: rgba(170, 100, 140, 0.6); }
.timeline-dot.src-pipedrive { border-color: rgba(100, 170, 100, 0.6); }
.timeline-dot.src-freshdesk { border-color: rgba(170, 150, 90, 0.6); }

/* Content - right column */
.timeline-item-content {
  flex: 1;
  padding-left: 15px;
  min-width: 0;
}

/* Header row inside content */
.timeline-item-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

/* Hide checkbox by default */
.timeline-item-checkbox {
  display: none;
  width: 14px;
  height: 14px;
}

.timeline-item:hover .timeline-item-checkbox {
  display: inline-block;
}

/* Source badge */
.timeline-item-source {
  font-size: 0.58rem;
  padding: 0.12rem 0.38rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: transparent;
  border: 1px solid;
}

.timeline-item-source.src-m365 { color: #7aa8d0; border-color: rgba(122, 168, 208, 0.5); }
.timeline-item-source.src-gmail { color: #d09090; border-color: rgba(208, 144, 144, 0.5); }
.timeline-item-source.src-xero { color: #80c8c8; border-color: rgba(128, 200, 200, 0.5); }
.timeline-item-source.src-asana { color: #c890b0; border-color: rgba(200, 144, 176, 0.5); }
.timeline-item-source.src-pipedrive { color: #90c890; border-color: rgba(144, 200, 144, 0.5); }
.timeline-item-source.src-freshdesk { color: #c8b870; border-color: rgba(200, 184, 112, 0.5); }

/* Backup badge */
.timeline-backup-badge {
  font-size: 0.62rem;
  color: #7a9;
}

/* Subject */
.timeline-item-subject {
  font-size: 0.85rem;
  font-weight: 500;
  color: #ddd;
  margin: 0 0 0.2rem 0;
  line-height: 1.4;
}

/* Summary */
.timeline-item-summary {
  font-size: 0.75rem;
  color: #888;
  margin: 0 0 0.25rem 0;
  line-height: 1.45;
}

/* Tags */
.timeline-item-tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.timeline-tag {
  font-size: 0.58rem;
  padding: 0.1rem 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  color: #777;
  border-radius: 3px;
}

/* Open button - shows on hover */
.timeline-item-open {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  background: rgba(100, 140, 180, 0.15);
  color: #7aa8d0;
  border: none;
  padding: 0.28rem 0.55rem;
  border-radius: 4px;
  font-size: 0.68rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.timeline-item:hover .timeline-item-open {
  opacity: 1;
}

/* Toolbar */
.timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(40, 45, 50, 0.7);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.select-all-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #888;
  cursor: pointer;
}

.toolbar-actions {
  display: flex;
  gap: 0.5rem;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.72rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.toolbar-btn.premium-locked {
  background: rgba(100, 140, 180, 0.2);
  color: #7aa8d0;
}

.toolbar-btn.premium-locked:hover {
  background: rgba(100, 140, 180, 0.3);
}

/* ============================================================================
   FIX: Single continuous line through entire timeline
   ============================================================================ */

/* Remove line from individual groups */
.timeline-group::before {
  display: none;
}

/* Single continuous line on the wrapper */
.timeline-wrapper {
  position: relative;
}

.timeline-wrapper::before {
  content: '';
  position: absolute;
  left: 95px;
  top: 30px;
  bottom: 20px;
  width: 1px;
  background: rgba(140, 140, 140, 0.35);
  z-index: 0;
}

/* Date badge needs background to "cover" line cleanly */
.timeline-date-badge {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   LIGHT THEME: Timeline adjustments
   ============================================================================ */

/* Light theme detection - when not dark theme */
@media (prefers-color-scheme: light) {
  .timeline-toolbar {
    background: rgba(74, 144, 226, 0.08);
    border: 1px solid rgba(74, 144, 226, 0.15);
  }
  
  .timeline-date-badge {
    background: rgba(74, 144, 226, 0.12);
    color: #4a6785;
    border: 1px solid rgba(74, 144, 226, 0.2);
  }
  
  .timeline-wrapper::before {
    background: rgba(74, 144, 226, 0.25);
  }
  
  .timeline-dot {
    background: #fff;
  }
  
  .timeline-item-subject {
    color: #2c3e50;
  }
  
  .timeline-item-summary {
    color: #5a6a7a;
  }
  
  .timeline-item-time {
    color: #6a7a8a;
  }
}

/* Also handle explicit light theme class if used */
body:not(.dark-theme) .timeline-toolbar,
html:not(.dark) .timeline-toolbar {
  background: rgba(74, 144, 226, 0.08);
  border: 1px solid rgba(74, 144, 226, 0.15);
}

body:not(.dark-theme) .timeline-date-badge,
html:not(.dark) .timeline-date-badge {
  background: rgba(74, 144, 226, 0.12);
  color: #4a6785;
  border: 1px solid rgba(74, 144, 226, 0.2);
}

body:not(.dark-theme) .timeline-wrapper::before,
html:not(.dark) .timeline-wrapper::before {
  background: rgba(74, 144, 226, 0.25);
}

body:not(.dark-theme) .timeline-dot,
html:not(.dark) .timeline-dot {
  background: #fff;
}

body:not(.dark-theme) .timeline-item-subject,
html:not(.dark) .timeline-item-subject {
  color: #2c3e50;
}

body:not(.dark-theme) .timeline-item-summary,
html:not(.dark) .timeline-item-summary {
  color: #5a6a7a;
}

body:not(.dark-theme) .timeline-item-time,
html:not(.dark) .timeline-item-time {
  color: #6a7a8a;
}

body:not(.dark-theme) .toolbar-btn.premium-locked,
html:not(.dark) .toolbar-btn.premium-locked {
  background: rgba(74, 144, 226, 0.12);
  color: #4a90d9;
}

/* ============================================================================
   FIX: Hide search icon when input has text
   ============================================================================ */

/* When input has value, hide the icon */
.search-input-wrapper.has-value .search-icon,
#page-search .search-input-wrapper.has-value .search-icon {
  display: none;
}

/* Also use :not(:placeholder-shown) for browsers that support it */
.search-input-wrapper .search-input:not(:placeholder-shown) ~ .search-icon,
.search-input-wrapper:has(.search-input:not(:placeholder-shown)) .search-icon {
  display: none;
}

/* ============================================================================
   FIX: Search icon positioning - show beside placeholder text
   ============================================================================ */

/* Ensure icon and input are side by side */
.search-input-wrapper {
  display: flex;
  align-items: center;
}

.search-input-wrapper .search-icon {
  flex-shrink: 0;
  margin-right: 0.5rem;
  opacity: 0.5;
}

/* Hide icon only when wrapper has the has-value class */
.search-input-wrapper.has-value .search-icon {
  display: none;
}

/* Make sure input takes remaining space */
.search-input-wrapper .search-input {
  flex: 1;
  min-width: 0;
}

/* ============================================================================
   FIX: Override absolute positioning on search icon
   ============================================================================ */

#page-search .search-input-wrapper .search-icon {
  position: static !important;
  transform: none !important;
}

#page-search .search-input-wrapper .search-input {
  padding-left: 0 !important;
}

/* ==================== PHASE E: THREAD GROUPING STYLES ==================== */
.thread-group-toggle { display: flex; align-items: center; gap: 8px; margin-right: 16px; }
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a5568; border-radius: 20px; transition: background-color 0.2s; }
.toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch input:checked + .toggle-slider { background-color: #4299e1; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }
.toggle-label { font-size: 13px; color: #a0aec0; white-space: nowrap; user-select: none; }
[data-theme="light"] .toggle-slider { background-color: #cbd5e0; }
[data-theme="light"] .toggle-label { color: #4a5568; }
.thread-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(66, 153, 225, 0.15); color: #4299e1; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 8px; flex-shrink: 0; }
.thread-badge svg { width: 12px; height: 12px; }
.thread-expand-btn { background: transparent; border: 1px solid #4a5568; color: #a0aec0; padding: 2px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; margin-left: 8px; transition: all 0.2s; flex-shrink: 0; }
.thread-expand-btn:hover { border-color: #4299e1; color: #4299e1; }
.thread-expand-btn.expanded { background: rgba(66, 153, 225, 0.1); border-color: #4299e1; color: #4299e1; }
.thread-members { display: none; border-top: 1px solid #2d3748; padding: 8px 12px 8px 24px; margin-top: 12px; background: rgba(0, 0, 0, 0.15); border-radius: 0 0 6px 6px; }
.thread-members.expanded { display: block; }
.thread-member-item { display: flex; align-items: center; padding: 8px 12px; font-size: 13px; color: #a0aec0; cursor: pointer; border-radius: 4px; transition: background 0.15s; margin: 2px 0; }
.thread-member-item:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
.thread-member-item::before { content: "├─"; margin-right: 10px; color: #4a5568; font-family: var(--font-mono); }
.thread-member-item:last-child::before { content: "└─"; }
.thread-member-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-member-date { font-size: 12px; color: #718096; margin-left: 12px; flex-shrink: 0; }
[data-theme="light"] .thread-members { border-top-color: #e2e8f0; background: rgba(0, 0, 0, 0.03); }
[data-theme="light"] .thread-member-item { color: #4a5568; }
[data-theme="light"] .thread-member-item:hover { background: rgba(0, 0, 0, 0.05); color: #1a202c; }
.timeline-thread-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; margin-left: 8px; font-size: 11px; font-weight: 500; background: rgba(66, 153, 225, 0.12); color: var(--thread-color, #4299e1); border: 1px solid var(--thread-color, #4299e1); border-radius: 10px; cursor: pointer; transition: all 0.15s; opacity: 0.85; }
.timeline-thread-badge:hover { background: rgba(66, 153, 225, 0.25); opacity: 1; }
.timeline-thread-badge.active { background: var(--thread-color, #4299e1); color: white; opacity: 1; }
.timeline-item.thread-highlight { position: relative; }
.timeline-item.thread-highlight::after { content: ''; position: absolute; left: 60px; right: 0; top: -4px; bottom: -4px; border: 2px solid var(--thread-color, #4299e1); border-radius: 8px; box-shadow: 0 0 12px rgba(66, 153, 225, 0.25); pointer-events: none; }
.timeline-item.thread-highlight .timeline-item-content { background: rgba(66, 153, 225, 0.08); border-radius: 6px; }
[data-theme="light"] .timeline-thread-badge { background: rgba(66, 153, 225, 0.1); }
[data-theme="light"] .timeline-item.thread-highlight .timeline-item-content { background: rgba(66, 153, 225, 0.06); }
/* ==================== END PHASE E STYLES ==================== */

/* ==================== PHASE F: WHY MATCHED BADGES ==================== */
/* Matched field badges - show which fields matched the search query */
.matched-badges { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11px; flex-wrap: wrap; }
.matched-badges-label { color: #718096; margin-right: 2px; }
.matched-badge { padding: 1px 6px; border-radius: 4px; font-weight: 500; white-space: nowrap; }
.matched-badge.subject { background: #dbeafe; color: #1e40af; }
.matched-badge.aiSummary { background: #ede9fe; color: #5b21b6; }
.matched-badge.preview { background: #e5e7eb; color: #374151; }
/* Light theme overrides */
[data-theme="light"] .matched-badge.subject { background: #dbeafe; color: #1e40af; }
[data-theme="light"] .matched-badge.aiSummary { background: #ede9fe; color: #5b21b6; }
[data-theme="light"] .matched-badge.preview { background: #f3f4f6; color: #374151; }
/* Timeline compact badges */
.timeline-matched-badges { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; font-size: 10px; }
.timeline-matched-badges .matched-badges-label { font-size: 10px; }
.timeline-matched-badges .matched-badge { padding: 1px 5px; font-size: 10px; }
/* ==================== END PHASE F STYLES ==================== */

/* Phase F: Metadata fallback badge for non-highlighted matches */
.matched-badge.other { background: #fef3c7; color: #92400e; }
[data-theme="light"] .matched-badge.other { background: #fef3c7; color: #92400e; }

/* ============================================================================
   PHASE G: SWIMLANES VIEW STYLES
   ============================================================================ */

/* Container */
.search-swimlanes-container {
  width: 100%;
  min-height: 400px;
  background: var(--bg-secondary, #1a202c);
  border-radius: 8px;
  margin-top: 16px;
}

.swimlanes-content {
  width: 100%;
}

.swimlanes-wrapper {
  padding: 16px;
}

.swimlanes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color, #2d3748);
}

.swimlanes-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
}

.swimlanes-info {
  font-size: 13px;
  color: var(--text-secondary, #a0aec0);
}

/* Scroll container */
.swimlanes-scroll-container {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 16px;
}

.swimlanes-canvas {
  position: relative;
  min-width: 100%;
  padding-bottom: 40px; /* Space for time axis */
}

/* Individual swimlane */
.swimlane {
  display: flex;
  align-items: stretch;
  margin-bottom: 8px;
  min-height: 60px;
  background: var(--bg-tertiary, #2d3748);
  border-radius: 6px;
  overflow: visible;
}

.swimlane-label {
  width: 140px;
  min-width: 140px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #e2e8f0);
  background: var(--bg-secondary, #1a202c);
  border-radius: 6px 0 0 6px;
  border-right: 3px solid;
}

.swimlane-count {
  font-size: 11px;
  color: var(--text-secondary, #a0aec0);
  margin-left: 6px;
}

/* Source-specific lane colors */
.swimlane.src-m365 .swimlane-label { border-right-color: #7aa8d0; }
.swimlane.src-gmail .swimlane-label { border-right-color: #d09090; }
.swimlane.src-xero .swimlane-label { border-right-color: #80c8c8; }
.swimlane.src-asana .swimlane-label { border-right-color: #c890b0; }
.swimlane.src-pipedrive .swimlane-label { border-right-color: #90c890; }
.swimlane.src-freshdesk .swimlane-label { border-right-color: #c8b870; }
.swimlane.src-propertyme .swimlane-label { border-right-color: #90b8c8; }
.swimlane.src-rex .swimlane-label { border-right-color: #b890c8; }
.swimlane.src-myob .swimlane-label { border-right-color: #c89090; }
.swimlane.src-other .swimlane-label { border-right-color: #a0a0a0; }

/* Track area */
.swimlane-track {
  flex: 1;
  position: relative;
  min-height: 60px;
  padding: 8px 0;
}

/* Items on track */
.swimlane-item {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
}

.swimlane-item:hover {
  z-index: 10;
}

.swimlane-item-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4299e1;
  border: 2px solid var(--bg-tertiary, #2d3748);
  transition: transform 0.15s, box-shadow 0.15s;
}

.swimlane-item:hover .swimlane-item-dot {
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(66, 153, 225, 0.5);
}

/* Source-specific dot colors */
.swimlane.src-m365 .swimlane-item-dot { background: #7aa8d0; }
.swimlane.src-gmail .swimlane-item-dot { background: #d09090; }
.swimlane.src-xero .swimlane-item-dot { background: #80c8c8; }
.swimlane.src-asana .swimlane-item-dot { background: #c890b0; }
.swimlane.src-pipedrive .swimlane-item-dot { background: #90c890; }
.swimlane.src-freshdesk .swimlane-item-dot { background: #c8b870; }
.swimlane.src-propertyme .swimlane-item-dot { background: #90b8c8; }
.swimlane.src-rex .swimlane-item-dot { background: #b890c8; }
.swimlane.src-myob .swimlane-item-dot { background: #c89090; }

/* Popup on hover */
.swimlane-item-popup {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 10px 12px;
  background: var(--bg-primary, #171923);
  border: 1px solid var(--border-color, #2d3748);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
  margin-bottom: 8px;
  z-index: 100;
}

.swimlane-item:hover .swimlane-item-popup {
  opacity: 1;
  visibility: visible;
}

.swimlane-item-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #4299e1;
  margin-bottom: 4px;
}

.swimlane-item-subject {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #e2e8f0);
  margin-bottom: 4px;
  line-height: 1.3;
}

.swimlane-item-time {
  font-size: 11px;
  color: var(--text-secondary, #a0aec0);
}

.swimlane-item-badges {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.swimlane-item-badges .matched-badge {
  font-size: 9px;
  padding: 1px 4px;
}

/* Time axis */
.swimlanes-time-axis {
  position: absolute;
  bottom: 0;
  left: 140px;
  right: 0;
  height: 36px;
  border-top: 1px solid var(--border-color, #2d3748);
}

.time-axis-tick {
  position: absolute;
  top: 0;
}

.time-axis-line {
  width: 1px;
  height: 8px;
  background: var(--border-color, #4a5568);
}

.time-axis-label {
  font-size: 10px;
  color: var(--text-secondary, #a0aec0);
  white-space: nowrap;
  transform: translateX(-50%);
  margin-top: 4px;
}

/* Loading and empty states */
.swimlanes-loading,
.swimlanes-empty,
.swimlanes-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--text-secondary, #a0aec0);
}

.swimlanes-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color, #2d3748);
  border-top-color: #4299e1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.swimlanes-error {
  color: #fc8181;
}

.swimlanes-error button,
.swimlanes-loading button {
  margin-top: 12px;
  padding: 8px 16px;
  background: #4299e1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Light theme overrides */
[data-theme="light"] .search-swimlanes-container { background: #f7fafc; }
[data-theme="light"] .swimlanes-header { border-bottom-color: #e2e8f0; }
[data-theme="light"] .swimlanes-title { color: #2d3748; }
[data-theme="light"] .swimlane { background: #edf2f7; }
[data-theme="light"] .swimlane-label { background: #e2e8f0; color: #2d3748; }
[data-theme="light"] .swimlane-item-dot { border-color: #edf2f7; }
[data-theme="light"] .swimlane-item-popup { background: #ffffff; border-color: #e2e8f0; }
[data-theme="light"] .swimlane-item-subject { color: #2d3748; }
[data-theme="light"] .swimlanes-time-axis { border-top-color: #e2e8f0; }
[data-theme="light"] .time-axis-line { background: #cbd5e0; }
[data-theme="light"] .time-axis-label { color: #718096; }

/* ==================== END PHASE G SWIMLANES STYLES ==================== */

/* ==================== PHASE G FIX: Popup visibility ==================== */
/* Ensure swimlanes container allows overflow for popups */
.search-swimlanes-container {
  overflow: visible !important;
}

.swimlanes-content {
  overflow: visible !important;
}

.swimlanes-wrapper {
  overflow: visible !important;
}

.swimlanes-scroll-container {
  overflow-x: auto;
  overflow-y: visible !important;
  padding-top: 120px; /* Space for popups above first lane */
  margin-top: -100px;
}

.swimlanes-canvas {
  overflow: visible !important;
}

.swimlane {
  overflow: visible !important;
}

.swimlane-track {
  overflow: visible !important;
}

/* Popup appears above by default, but shift down if clipping would occur */
.swimlane-item-popup {
  z-index: 1000 !important;
}

/* For first swimlane, show popup below instead */
.swimlane:first-child .swimlane-item-popup {
  bottom: auto;
  top: 100%;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Arrow indicator for popup (optional visual enhancement) */
.swimlane-item-popup::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bg-primary, #171923);
}

.swimlane:first-child .swimlane-item-popup::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--bg-primary, #171923);
}

/* Make dots slightly larger for easier clicking */
.swimlane-item-dot {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Visual feedback on hover/click */
.swimlane-item:active .swimlane-item-dot {
  transform: scale(1.5);
}

/* ==================== PHASE G FIX: Fit to width ==================== */
.swimlanes-scroll-container {
  overflow-x: hidden !important; /* No horizontal scroll */
  overflow-y: visible !important;
  padding-top: 120px;
  margin-top: -100px;
}

.swimlanes-canvas {
  width: 100% !important;
  min-width: auto !important;
}

/* Adjust time axis to account for label width */
.swimlanes-time-axis {
  left: 140px;
  right: 0;
  width: auto;
}

/* Ensure track takes full remaining width */
.swimlane-track {
  flex: 1;
  min-width: 0;
}

/* ==================== PHASE G.6: Zoom Controls ==================== */
.swimlanes-header {
  flex-wrap: wrap;
  gap: 12px;
}

.swimlanes-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.swimlanes-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-tertiary, #2d3748);
  border-radius: 6px;
  padding: 4px;
}

.zoom-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-primary, #e2e8f0);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.zoom-btn:hover:not(:disabled) {
  background: var(--bg-secondary, #1a202c);
}

.zoom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.zoom-btn.zoom-fit {
  width: auto;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
}

.zoom-level {
  font-size: 12px;
  color: var(--text-secondary, #a0aec0);
  min-width: 40px;
  text-align: center;
}

/* Re-enable horizontal scroll when zoomed */
.swimlanes-scroll-container {
  overflow-x: auto !important;
}

/* Light theme */
[data-theme="light"] .swimlanes-zoom {
  background: #e2e8f0;
}

[data-theme="light"] .zoom-btn:hover:not(:disabled) {
  background: #cbd5e0;
}

/* ==================== PHASE G.6: Zoom hint ==================== */
.zoom-hint {
  font-size: 10px;
  color: var(--text-secondary, #718096);
  opacity: 0.7;
  white-space: nowrap;
}

[data-theme="light"] .zoom-hint {
  color: #718096;
}

/* ==================== FIX: Remove scrollbar from swimlanes ==================== */
.swimlanes-scroll-container {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.swimlanes-canvas {
  width: 100% !important;
}

/* ==================== PHASE H: Gap Detection & Coverage Overlay ==================== */

/* Gap Toggle Button */
.gap-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #4a5568;
  border-radius: 6px;
  color: #a0aec0;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.gap-toggle-btn:hover {
  background: rgba(160, 174, 192, 0.1);
  border-color: #718096;
}

.gap-toggle-btn.active {
  background: rgba(229, 62, 62, 0.15);
  border-color: #e53e3e;
  color: #fc8181;
}

.gap-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.gap-badge {
  background: #e53e3e;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  margin-left: 4px;
}

/* Swimlane Gap Bands */
.swimlane-gap-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(229, 62, 62, 0.1),
    rgba(229, 62, 62, 0.1) 8px,
    rgba(229, 62, 62, 0.2) 8px,
    rgba(229, 62, 62, 0.2) 16px
  );
  border-left: 2px dashed rgba(229, 62, 62, 0.5);
  border-right: 2px dashed rgba(229, 62, 62, 0.5);
  pointer-events: auto;
  cursor: help;
  z-index: 1;
}

.swimlane-gap-band:hover {
  background: repeating-linear-gradient(
    45deg,
    rgba(229, 62, 62, 0.15),
    rgba(229, 62, 62, 0.15) 8px,
    rgba(229, 62, 62, 0.3) 8px,
    rgba(229, 62, 62, 0.3) 16px
  );
}

/* Timeline Gap Overlay */
.timeline-gap-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.timeline-gap-region {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(229, 62, 62, 0.08),
    rgba(229, 62, 62, 0.08) 10px,
    rgba(229, 62, 62, 0.16) 10px,
    rgba(229, 62, 62, 0.16) 20px
  );
  border-left: 2px dashed rgba(229, 62, 62, 0.4);
  border-right: 2px dashed rgba(229, 62, 62, 0.4);
  pointer-events: auto;
  cursor: help;
}

/* Ensure swimlane-track is positioned for overlay */
.swimlane-track {
  position: relative;
}

/* Light Theme */
[data-theme='light'] .gap-toggle-btn {
  border-color: #cbd5e0;
  color: #4a5568;
}

[data-theme='light'] .gap-toggle-btn:hover {
  background: rgba(74, 85, 104, 0.1);
}

[data-theme='light'] .gap-toggle-btn.active {
  background: rgba(229, 62, 62, 0.1);
  border-color: #c53030;
  color: #c53030;
}

[data-theme='light'] .swimlane-gap-band {
  background: repeating-linear-gradient(
    45deg,
    rgba(229, 62, 62, 0.08),
    rgba(229, 62, 62, 0.08) 8px,
    rgba(229, 62, 62, 0.15) 8px,
    rgba(229, 62, 62, 0.15) 16px
  );
  border-left-color: rgba(197, 48, 48, 0.4);
  border-right-color: rgba(197, 48, 48, 0.4);
}

[data-theme='light'] .swimlane-gap-band:hover {
  background: repeating-linear-gradient(
    45deg,
    rgba(229, 62, 62, 0.12),
    rgba(229, 62, 62, 0.12) 8px,
    rgba(229, 62, 62, 0.22) 8px,
    rgba(229, 62, 62, 0.22) 16px
  );
}

/* ============================================================
   PHASE I: INVESTIGATIONS STYLES
   ============================================================ */

/* Page Header */
.investigations-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 0 24px;
}

.investigations-header .page-header-left {
  flex: 1;
}

.investigations-header .page-header-right {
  flex-shrink: 0;
  margin-top: 4px;
}

.investigations-header .page-header-left h1 {
  margin-bottom: 4px;
}

/* Tier Banner */
.tier-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.tier-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-badge-free {
  background: #f59e0b;
  color: #fff;
}

.tier-badge-premium {
  background: #8b5cf6;
  color: #fff;
}

.tier-upgrade-link {
  margin-left: auto;
  color: #b45309;
  font-weight: 500;
  text-decoration: none;
}

.tier-upgrade-link:hover {
  text-decoration: underline;
}

/* Workspace Cards */
.investigations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.workspace-card {
  background: var(--bg-secondary, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.workspace-card:hover {
  border-color: var(--accent-color, #3182ce);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.workspace-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.workspace-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #1a202c);
}

.workspace-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.workspace-status.status-draft {
  background: #e2e8f0;
  color: #4a5568;
}

.workspace-status.status-active {
  background: #c6f6d5;
  color: #22543d;
}

.workspace-status.status-closed {
  background: #fed7d7;
  color: #822727;
}

.workspace-description {
  font-size: 13px;
  color: var(--text-secondary, #718096);
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.workspace-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted, #a0aec0);
  margin-bottom: 12px;
}

.workspace-meta .meta-item strong {
  color: var(--text-primary, #1a202c);
}

.workspace-actions {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding-top: 12px;
  margin-top: 4px;
}

.workspace-actions .btn {
  flex: 1;
}

.workspace-actions .workspace-delete-btn {
  flex: none;
  width: 36px;
  padding: 0;
}

/* Empty State */
.investigations-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-secondary, #fff);
  border: 2px dashed var(--border-color, #e2e8f0);
  border-radius: 12px;
}

.investigations-empty .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.investigations-empty h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: var(--text-primary, #1a202c);
}

.investigations-empty p {
  color: var(--text-secondary, #718096);
  margin: 0 0 20px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Loading State */
.investigations-loading {
  text-align: center;
  padding: 40px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color, #e2e8f0);
  border-top-color: var(--accent-color, #3182ce);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: var(--bg-primary, #fff);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted, #a0aec0);
  padding: 0;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--text-primary, #1a202c);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

/* Form Elements */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-primary, #1a202c);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1a202c);
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-color, #3182ce);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-input.input-error {
  border-color: #e53e3e;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Upgrade Modal */
.modal-upgrade .modal-body {
  text-align: center;
}

.upgrade-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.upgrade-message {
  font-size: 15px;
  color: var(--text-secondary, #718096);
  margin-bottom: 24px;
}

.tier-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}

.tier-column {
  padding: 16px;
  border-radius: 8px;
}

.tier-column h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
}

.tier-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier-column li {
  font-size: 13px;
  padding: 4px 0;
  color: var(--text-secondary, #718096);
}

.tier-column li::before {
  content: "✓ ";
  color: #48bb78;
}

.tier-free {
  background: #f7fafc;
  border: 1px solid var(--border-color, #e2e8f0);
}

.tier-premium {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #8b5cf6;
}

.tier-premium h4 {
  color: #6d28d9;
}

/* Button Disabled State */
.btn.btn-disabled {
  opacity: 0.6;
  cursor: pointer;
}

/* Small Button */
.btn.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Ghost Button */
.btn.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #718096);
}

.btn.btn-ghost:hover {
  background: #0f172a;
  border-color: var(--text-muted, #a0aec0);
}

/* Fix investigations page content alignment */
#page-investigations {
  padding: 24px;
}

#page-investigations .page-header {
  padding: 0;
  margin-bottom: 24px;
}

#page-investigations .tier-banner {
  margin: 0 0 20px 0;
}

#page-investigations .investigations-list {
  margin: 0;
}

#page-investigations .investigations-empty {
  margin: 0;
}

/* ============================================ */
/* PHASE I.F2: Investigation Detail Page       */
/* ============================================ */

/* Detail Page Header */
.investigation-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  background: #1e293b;
}

.investigation-detail-header .btn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
}

.investigation-detail-header .btn-back:hover {
  background: #0f172a;
  color: var(--color-text-primary, #1a202c);
}

.investigation-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  margin-left: 16px;
}

.investigation-title-section h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary, #1a202c);
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.status-badge.draft {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.ready_for_review {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.approved {
  background: #d1fae5;
  color: #065f46;
}

.investigation-actions {
  display: flex;
  gap: 8px;
}

/* Summary Bar */
.investigation-summary-bar {
  display: flex;
  gap: 24px;
  padding: 12px 24px;
  background: #0f172a;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: 14px;
  color: #94a3b8;
}

.investigation-summary-bar strong {
  color: var(--color-text-primary, #1a202c);
  font-weight: 600;
}

.investigation-summary-bar .finding-high {
  color: #dc2626;
  font-weight: 600;
}

.investigation-summary-bar .finding-med {
  color: #d97706;
  font-weight: 600;
}

.investigation-summary-bar .locked-indicator {
  color: #7c3aed;
}

/* Three-Panel Layout */
.investigation-layout {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  height: calc(100vh - 180px);
  overflow: hidden;
}

.investigation-layout .layers-panel {
  border-right: 1px solid #334155;
  padding: 16px;
  overflow-y: auto;
  background: #1e293b;
}

.investigation-layout .timeline-panel {
  padding: 16px 24px;
  overflow-y: auto;
  background: #0f172a;
}

.investigation-layout .findings-panel {
  border-left: 1px solid #334155;
  padding: 16px;
  overflow-y: auto;
  background: #1e293b;
}

.investigation-layout h3 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Layer Cards */
.layer-card {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border, #e2e8f0);
  background: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.layer-card:hover {
  border-color: var(--color-primary, #3182ce);
}

.layer-card.selected {
  border-color: var(--color-primary, #3182ce);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

.layer-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.layer-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.layer-name {
  font-weight: 500;
  font-size: 14px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-visibility {
  opacity: 0.5;
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
}

.layer-visibility:hover {
  opacity: 1;
}

.layer-visibility.hidden {
  opacity: 0.3;
}

.layer-meta {
  font-size: 12px;
  color: var(--color-text-muted, #a0aec0);
  margin-top: 6px;
  display: flex;
  gap: 12px;
}

.layer-locked-badge {
  color: #7c3aed;
}

/* Investigation Timeline */
.investigation-timeline-view {
  position: relative;
  padding-left: 30px;
}

.investigation-timeline-view::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border, #e2e8f0);
}

.inv-timeline-item {
  position: relative;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: #1e293b;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.inv-timeline-item:hover {
  border-color: var(--color-primary, #3182ce);
}

.inv-timeline-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--item-layer-color, #3182ce);
  border: 3px solid var(--bg-secondary, #f7fafc);
}

.inv-timeline-item .item-date {
  font-size: 11px;
  color: var(--color-text-muted, #a0aec0);
  margin-bottom: 4px;
}

.inv-timeline-item .item-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary, #1a202c);
  margin-bottom: 4px;
}

.inv-timeline-item .item-source {
  font-size: 12px;
  color: #94a3b8;
}

.inv-timeline-item .item-finding-link {
  font-size: 12px;
  color: #d97706;
  margin-top: 8px;
  cursor: pointer;
}

.inv-timeline-item.has-finding {
  border-left: 3px solid #f59e0b;
}

/* Finding Cards */
.finding-card {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border, #e2e8f0);
  background: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.finding-card:hover {
  border-color: var(--color-primary, #3182ce);
}

.finding-card.risk-high {
  border-left: 4px solid #dc2626;
}

.finding-card.risk-medium {
  border-left: 4px solid #d97706;
}

.finding-card.risk-low {
  border-left: 4px solid #059669;
}

.finding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.finding-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary, #1a202c);
  flex: 1;
}

.finding-risk {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.finding-risk.high {
  background: #fee2e2;
  color: #dc2626;
}

.finding-risk.medium {
  background: #fef3c7;
  color: #d97706;
}

.finding-risk.low {
  background: #d1fae5;
  color: #059669;
}

.finding-description {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

.findings-empty, .layers-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--color-text-muted, #a0aec0);
  font-size: 13px;
}

/* Timeline Toolbar */
.timeline-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.timeline-toolbar .btn {
  padding: 6px 12px;
  font-size: 13px;
}

.timeline-toolbar .btn.active {
  background: var(--color-primary, #3182ce);
  color: white;
}

/* Empty/Loading States */
.investigation-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--color-text-muted, #a0aec0);
}

.investigation-detail-error {
  text-align: center;
  padding: 48px;
  color: var(--color-error, #dc2626);
}

/* ============================================ */
/* PHASE I.F3: Selection & Add to Investigation */
/* ============================================ */

/* Item Selection Checkbox */
.item-select-checkbox {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.timeline-item {
  position: relative;
}

.timeline-item:hover .item-select-checkbox,
.selection-mode .item-select-checkbox,
.item-select-checkbox input:checked + .checkbox-mark {
  opacity: 1;
}

.checkbox-mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border, #cbd5e0);
  border-radius: 4px;
  background: #1e293b;
  transition: all 0.15s ease;
}

.checkbox-mark:hover {
  border-color: var(--color-primary, #3182ce);
}

.timeline-item-checkbox {
  display: none;
}

.timeline-item-checkbox:checked + .checkbox-mark {
  background: var(--color-primary, #3182ce);
  border-color: var(--color-primary, #3182ce);
}

.timeline-item-checkbox:checked + .checkbox-mark::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: block;
  text-align: center;
  line-height: 14px;
}

.timeline-item.item-selected {
  background: rgba(49, 130, 206, 0.08);
  border-color: var(--color-primary, #3182ce);
}

.selection-mode .timeline-item {
  padding-left: 36px;
}

/* Selection Toolbar */
.selection-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: none;
}

.selection-toolbar.visible {
  display: flex;
}

.selection-toolbar-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.selection-count {
  color: #94a3b8;
  font-size: 14px;
}

.selection-count strong {
  color: var(--color-primary, #3182ce);
  font-size: 18px;
  font-weight: 600;
}

.selection-actions {
  display: flex;
  gap: 8px;
}

/* Dropdown */
.selection-dropdown {
  position: relative;
}

.selection-dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  min-width: 280px;
  background: #1e293b;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
  max-height: 320px;
  overflow-y: auto;
}

.selection-dropdown.open .selection-dropdown-menu {
  display: block;
}

.dropdown-item {
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-primary, #1a202c);
  transition: background 0.15s ease;
}

.dropdown-item:hover {
  background: #0f172a;
}

.dropdown-item-action {
  color: var(--color-primary, #3182ce);
  font-weight: 500;
}

.dropdown-divider {
  height: 1px;
  background: var(--color-border, #e2e8f0);
  margin: 4px 0;
}

.workspace-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.workspace-option .layer-count {
  font-size: 12px;
  color: var(--color-text-muted, #a0aec0);
}

.workspace-option.at-limit {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #1e293b;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  animation: toastSlideIn 0.3s ease;
  min-width: 300px;
  max-width: 450px;
  pointer-events: auto;
}

.toast-success {
  border-left: 4px solid #059669;
}

.toast-error {
  border-left: 4px solid #dc2626;
}

.toast-info {
  border-left: 4px solid #3182ce;
}

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.toast-success .toast-icon { color: #059669; }
.toast-error .toast-icon { color: #dc2626; }
.toast-info .toast-icon { color: #3182ce; }

.toast-message {
  flex: 1;
  color: var(--color-text-primary, #1a202c);
  font-size: 14px;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-muted, #a0aec0);
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .investigation-layout {
    grid-template-columns: 220px 1fr 260px;
  }
}

@media (max-width: 992px) {
  .investigation-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .investigation-layout .layers-panel,
  .investigation-layout .findings-panel {
    border: none;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }
}

/* ==================== INVESTIGATION DETAIL - DARK THEME ==================== */
body.dark-theme .investigation-detail-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.dark-theme .investigation-detail-title {
  color: #f1f5f9;
}

body.dark-theme .investigation-summary-bar {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.dark-theme .summary-stat-value {
  color: #f1f5f9;
}

body.dark-theme .summary-stat-label {
  color: #94a3b8;
}

body.dark-theme .investigation-panels {
  background: #0f172a;
}

body.dark-theme .layers-panel,
body.dark-theme .timeline-panel,
body.dark-theme .findings-panel {
  background: #1e293b;
  border-color: #334155;
}

body.dark-theme .panel-header {
  color: #f1f5f9;
  border-bottom-color: #334155;
}

body.dark-theme .layer-card {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .layer-card:hover {
  border-color: #3b82f6;
  background: #1e293b;
}

body.dark-theme .layer-name {
  color: #f1f5f9;
}

body.dark-theme .layer-meta {
  color: #94a3b8;
}

body.dark-theme .inv-timeline-item {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark-theme .inv-timeline-item:hover {
  background: #1e293b;
  border-color: #3b82f6;
}

body.dark-theme .inv-timeline-title {
  color: #f1f5f9;
}

body.dark-theme .inv-timeline-summary {
  color: #94a3b8;
}

body.dark-theme .finding-card {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme .finding-card:hover {
  border-color: #3b82f6;
}

body.dark-theme .empty-state-message {
  color: #94a3b8;
}

body.dark-theme .empty-state-hint {
  color: #64748b;
}

body.dark-theme .btn-add-layer,
body.dark-theme .btn-add-finding {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

body.dark-theme .btn-add-layer:hover,
body.dark-theme .btn-add-finding:hover {
  background: #334155;
  border-color: #3b82f6;
  color: #f1f5f9;
}

body.dark-theme .view-toggle .view-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

body.dark-theme .view-toggle .view-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

body.dark-theme .view-toggle .view-btn:disabled {
  background: #0f172a;
  color: #475569;
  cursor: not-allowed;
}

/* Investigation Detail - Additional Dark Theme Fixes */
body.dark-theme #page-investigation-detail {
  background: #0f172a;
}

body.dark-theme .investigation-detail-content {
  background: #0f172a;
}

body.dark-theme .investigation-detail-header {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-theme .investigation-summary-bar {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9;
}

body.dark-theme .investigation-panels {
  background: #0f172a !important;
}

body.dark-theme .layers-panel,
body.dark-theme .timeline-panel,
body.dark-theme .findings-panel {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9;
}

body.dark-theme .layer-card {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9;
}

body.dark-theme .layer-name {
  color: #f1f5f9 !important;
}

body.dark-theme .layer-meta {
  color: #94a3b8 !important;
}

/* Timeline items in investigation view */
body.dark-theme #inv-timeline-panel .timeline-item {
  background: #0f172a;
  border-color: #334155;
}

body.dark-theme #inv-timeline-panel .timeline-item:hover {
  background: #1e293b;
  border-color: #3b82f6;
}

body.dark-theme #inv-timeline-panel .timeline-item-subject {
  color: #f1f5f9;
}

body.dark-theme #inv-timeline-panel .timeline-item-summary {
  color: #94a3b8;
}

body.dark-theme #inv-timeline-panel .timeline-item-time {
  color: #64748b;
}

body.dark-theme .view-toggle .view-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

body.dark-theme .view-toggle .view-btn.active {
  background: #3b82f6 !important;
  color: white !important;
}

body.dark-theme .panel-header,
body.dark-theme .layers-panel h3,
body.dark-theme .findings-panel h3 {
  color: #f1f5f9 !important;
}

body.dark-theme .empty-state-message p {
  color: #94a3b8 !important;
}

body.dark-theme .btn-add-finding {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

body.dark-theme .btn-add-finding:hover {
  background: #334155 !important;
  color: #f1f5f9 !important;
}

/* Dark theme CSS variable overrides for investigation layout */
body.dark-theme {
  --bg-primary: #1e293b;
  --bg-secondary: #0f172a;
  --color-border: #334155;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
}

body.dark-theme .investigation-layout .layers-panel,
body.dark-theme .investigation-layout .findings-panel {
  background: #1e293b;
  border-color: #334155;
}

body.dark-theme .investigation-layout .timeline-panel {
  background: #0f172a;
}

body.dark-theme .investigation-layout h3 {
  color: #94a3b8;
}

body.dark-theme .investigation-detail-header {
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

body.dark-theme .investigation-summary-bar {
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

body.dark-theme .investigation-summary-bar span {
  color: #f1f5f9;
}

body.dark-theme #page-investigation-detail {
  background: #0f172a;
}

body.dark-theme .btn-back {
  color: #94a3b8;
}

body.dark-theme .btn-back:hover {
  color: #f1f5f9;
}

/* Investigation Layout - Light Theme Overrides */
:root[data-theme="light"] .investigation-layout .layers-panel,
:root[data-theme="light"] .investigation-layout .findings-panel {
  background: #ffffff;
  border-color: #e2e8f0;
}

:root[data-theme="light"] .investigation-layout .timeline-panel {
  background: #f7fafc;
}

:root[data-theme="light"] .investigation-layout h3 {
  color: #718096;
}

:root[data-theme="light"] .investigation-detail-header {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .investigation-summary-bar {
  background: #f7fafc;
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .investigation-summary-bar span {
  color: #2d3748;
}

:root[data-theme="light"] #page-investigation-detail {
  background: #f7fafc;
}

:root[data-theme="light"] .layer-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

:root[data-theme="light"] .layer-name {
  color: #2d3748;
}

:root[data-theme="light"] .layer-meta {
  color: #718096;
}

:root[data-theme="light"] .btn-back {
  color: #4a5568;
}

:root[data-theme="light"] .view-toggle .view-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #4a5568;
}

:root[data-theme="light"] .view-toggle .view-btn.active {
  background: #3182ce;
  color: white;
}

:root[data-theme="light"] #inv-timeline-panel .timeline-item {
  background: #ffffff;
  border-color: #e2e8f0;
}

:root[data-theme="light"] #inv-timeline-panel .timeline-item:hover {
  border-color: #3182ce;
}

:root[data-theme="light"] .btn-add-finding {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #4a5568;
}

/* Fix text colors in investigation detail - dark theme defaults */
.investigation-layout .timeline-item-subject,
.investigation-layout .timeline-item h4,
#inv-timeline-panel .timeline-item-subject {
  color: #f1f5f9 !important;
}

#inv-timeline-panel .timeline-item-summary {
  color: #cbd5e1 !important;
}

#inv-timeline-panel .timeline-item-time {
  color: #94a3b8 !important;
}

.layer-card .layer-name {
  color: #f1f5f9 !important;
}

.layer-card .layer-meta {
  color: #94a3b8 !important;
}

.findings-panel .empty-state-message,
.findings-panel p {
  color: #94a3b8 !important;
}

.investigation-summary-bar span,
.investigation-summary-bar strong {
  color: #f1f5f9 !important;
}

.investigation-detail-title,
#investigation-detail-title {
  color: #f1f5f9 !important;
}

/* Timeline item tags */
#inv-timeline-panel .timeline-tag {
  background: #334155;
  color: #cbd5e1;
}

/* Empty state text */
.empty-state-message p,
.layers-empty,
.findings-empty {
  color: #94a3b8 !important;
}

/* Light theme overrides for investigation text */
:root[data-theme="light"] .investigation-layout .timeline-item-subject,
:root[data-theme="light"] #inv-timeline-panel .timeline-item-subject {
  color: #1a202c !important;
}

:root[data-theme="light"] #inv-timeline-panel .timeline-item-summary {
  color: #4a5568 !important;
}

:root[data-theme="light"] .layer-card .layer-name {
  color: #1a202c !important;
}

:root[data-theme="light"] .layer-card .layer-meta {
  color: #718096 !important;
}

:root[data-theme="light"] .investigation-summary-bar span,
:root[data-theme="light"] .investigation-summary-bar strong {
  color: #2d3748 !important;
}

:root[data-theme="light"] .investigation-detail-title {
  color: #1a202c !important;
}

/* Investigations List Page - Dark Theme Fixes */

/* Tier banner - softer colors for dark mode */
.tier-usage-banner {
  background: linear-gradient(135deg, #1e3a5f 0%, #1a365d 100%) !important;
  border: 1px solid #2c5282 !important;
}

.tier-usage-banner .tier-badge {
  background: #2c5282 !important;
  color: #90cdf4 !important;
}

.tier-usage-banner .usage-text {
  color: #cbd5e1 !important;
}

.tier-usage-banner .upgrade-link {
  color: #63b3ed !important;
}

/* Investigation cards - match connection card style */
.workspace-card,
.investigation-card {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 12px;
  color: #f1f5f9;
}

.workspace-card:hover,
.investigation-card:hover {
  border-color: #3b82f6 !important;
  background: #1e293b !important;
}

.workspace-card h3,
.investigation-card h3,
.workspace-card .workspace-name,
.investigation-card .investigation-name {
  color: #f1f5f9 !important;
}

.workspace-card .workspace-description,
.investigation-card .investigation-description,
.workspace-card p {
  color: #94a3b8 !important;
}

.workspace-card .workspace-meta,
.investigation-card .investigation-meta,
.workspace-card .meta-info {
  color: #64748b !important;
}

.workspace-card .status-badge,
.investigation-card .status-badge {
  background: #334155;
  color: #94a3b8;
}

.workspace-card .status-badge.draft {
  background: #1e3a5f;
  color: #63b3ed;
}

.workspace-card .btn-open,
.investigation-card .btn-open,
.workspace-card button {
  background: #334155 !important;
  border: 1px solid #475569 !important;
  color: #f1f5f9 !important;
}

.workspace-card .btn-open:hover,
.investigation-card .btn-open:hover,
.workspace-card button:hover {
  background: #475569 !important;
  border-color: #3b82f6 !important;
}

.workspace-card .btn-delete,
.investigation-card .btn-delete {
  color: #64748b !important;
}

.workspace-card .btn-delete:hover,
.investigation-card .btn-delete:hover {
  color: #f87171 !important;
}

/* Workspaces grid */
.workspaces-grid {
  gap: 16px;
}

/* Light theme overrides */
:root[data-theme="light"] .tier-usage-banner {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border: 1px solid #f59e0b !important;
}

:root[data-theme="light"] .tier-usage-banner .tier-badge {
  background: #f59e0b !important;
  color: white !important;
}

:root[data-theme="light"] .workspace-card,
:root[data-theme="light"] .investigation-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

:root[data-theme="light"] .workspace-card h3,
:root[data-theme="light"] .workspace-card .workspace-name {
  color: #1a202c !important;
}

:root[data-theme="light"] .workspace-card p,
:root[data-theme="light"] .workspace-card .workspace-description {
  color: #4a5568 !important;
}

:root[data-theme="light"] .workspace-card button {
  background: #f7fafc !important;
  border-color: #e2e8f0 !important;
  color: #2d3748 !important;
}

/* Investigations Page - Correct Selectors */

/* Tier banner - dark theme (default) */
.tier-banner {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%) !important;
  border: 1px solid #2c5282 !important;
  border-radius: 8px;
}

.tier-badge-free {
  background: #2c5282 !important;
  color: #90cdf4 !important;
}

#tier-usage-text {
  color: #cbd5e1 !important;
}

.tier-upgrade-link {
  color: #63b3ed !important;
}

/* Investigation cards in list - rendered by JS */
.investigations-list > div,
.workspace-item {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.investigations-list > div:hover,
.workspace-item:hover {
  border-color: #3b82f6 !important;
}

.investigations-list h3,
.investigations-list .workspace-name {
  color: #f1f5f9 !important;
}

.investigations-list p,
.investigations-list .workspace-desc {
  color: #94a3b8 !important;
}

.investigations-list .meta,
.investigations-list small,
.investigations-list .workspace-meta {
  color: #64748b !important;
}

.investigations-list button {
  background: #334155 !important;
  border: 1px solid #475569 !important;
  color: #f1f5f9 !important;
}

.investigations-list button:hover {
  background: #475569 !important;
  border-color: #3b82f6 !important;
}

/* Light theme overrides */
:root[data-theme="light"] .tier-banner {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #f59e0b !important;
}

:root[data-theme="light"] .tier-badge-free {
  background: #f59e0b !important;
  color: white !important;
}

:root[data-theme="light"] #tier-usage-text {
  color: #78350f !important;
}

:root[data-theme="light"] .tier-upgrade-link {
  color: #b45309 !important;
}

:root[data-theme="light"] .investigations-list > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

:root[data-theme="light"] .investigations-list h3 {
  color: #1a202c !important;
}

:root[data-theme="light"] .investigations-list p {
  color: #4a5568 !important;
}

:root[data-theme="light"] .investigations-list button {
  background: #f7fafc !important;
  border-color: #e2e8f0 !important;
  color: #2d3748 !important;
}

/* Phase I.F4: Layer Delete Button */
.layer-delete {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s, color 0.2s;
  margin-left: 8px;
  font-size: 14px;
}
.layer-delete:hover {
  opacity: 1;
  color: #e53e3e;
}
.layer-card:hover .layer-delete {
  opacity: 0.7;
}

/* Phase I.F4: Timeline Item Actions */
.timeline-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.timeline-item-remove {
  background: transparent;
  border: 1px solid #64748b;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s;
  opacity: 0.6;
}
.timeline-item-remove:hover {
  border-color: #e53e3e;
  color: #e53e3e;
  opacity: 1;
}

/* Phase I.F4: Finding card enhancements */
.finding-card {
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--border-color);
}
.finding-card.risk-high {
  border-left-color: #dc3545;
}
.finding-card.risk-medium {
  border-left-color: #ffc107;
}
.finding-card.risk-low {
  border-left-color: #28a745;
}
.finding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.finding-title {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.finding-risk {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.finding-risk.high {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}
.finding-risk.medium {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}
.finding-risk.low {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}
.finding-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.finding-recommendation {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.finding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.finding-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}
.finding-status.status-open {
  background: rgba(108, 117, 125, 0.2);
  color: #6c757d;
}
.finding-status.status-in_progress {
  background: rgba(0, 123, 255, 0.2);
  color: #007bff;
}
.finding-status.status-resolved {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}
.finding-actions {
  display: flex;
  gap: 4px;
}
.finding-edit-btn,
.finding-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.2s, background 0.2s;
}
.finding-edit-btn:hover,
.finding-delete-btn:hover {
  opacity: 1;
  background: var(--bg-tertiary);
}
.finding-delete-btn:hover {
  color: #dc3545;
}
.findings-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 24px;
  font-size: 14px;
}

/* Phase I.F4: Finding button on timeline cards */
.timeline-item-finding {
  background: rgba(74, 158, 255, 0.15);
  color: #4a9eff;
  border: 1px solid rgba(74, 158, 255, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 8px;
  transition: all 0.2s;
}
.timeline-item-finding:hover {
  background: rgba(74, 158, 255, 0.25);
  border-color: #4a9eff;
}

/* Phase I.F4: Finding button on timeline cards */
.timeline-item-finding {
  background: rgba(74, 158, 255, 0.15);
  color: #4a9eff;
  border: 1px solid rgba(74, 158, 255, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 8px;
  transition: all 0.2s;
}
.timeline-item-finding:hover {
  background: rgba(74, 158, 255, 0.25);
  border-color: #4a9eff;
}

/* Phase I.F4: Rename layer icon */
.layer-rename {
  cursor: pointer;
  opacity: 0.6;
  margin-right: 4px;
  transition: opacity 0.2s;
}
.layer-rename:hover {
  opacity: 1;
}

/* ============================================================================
   PHASE I.F5: RIGHT PANEL TABS (Findings/Activity Log)
   ============================================================================ */

.right-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-left: 1px solid #e2e8f0;
}

.right-panel-tabs {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  padding: 0;
  flex-shrink: 0;
}

.right-panel-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.right-panel-tab:hover {
  color: #334155;
  background: #f8fafc;
}

.right-panel-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: #fff;
}

.right-panel-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.right-panel-pane {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}

.right-panel-pane.active {
  display: block;
}

/* Activity Log Styles */
.activity-log-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-entry {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #94a3b8;
}

.activity-entry.action-workspace_created { border-left-color: #22c55e; }
.activity-entry.action-layer_added { border-left-color: #3b82f6; }
.activity-entry.action-layer_deleted { border-left-color: #ef4444; }
.activity-entry.action-layer_renamed { border-left-color: #f59e0b; }
.activity-entry.action-layer_locked { border-left-color: #8b5cf6; }
.activity-entry.action-item_added { border-left-color: #06b6d4; }
.activity-entry.action-item_removed { border-left-color: #f97316; }
.activity-entry.action-finding_added { border-left-color: #ec4899; }
.activity-entry.action-finding_updated { border-left-color: #a855f7; }
.activity-entry.action-finding_deleted { border-left-color: #dc2626; }
.activity-entry.action-submitted_for_review { border-left-color: #0ea5e9; }
.activity-entry.action-approved { border-left-color: #10b981; }
.activity-entry.action-changes_requested { border-left-color: #f59e0b; }

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-action {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 4px;
}

.activity-target {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.activity-meta {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  gap: 8px;
}

.activity-empty {
  text-align: center;
  padding: 32px 16px;
  color: #94a3b8;
}

.activity-loading {
  text-align: center;
  padding: 32px 16px;
  color: #64748b;
}

/* Premium badge for Activity Log export */
.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.activity-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.btn-export-activity {
  font-size: 12px;
  padding: 4px 8px;
}


/* ============================================================================
   PHASE I.F5: DARK THEME - Activity Log & Right Panel
   ============================================================================ */

[data-theme="dark"] .right-panel {
  background: #1e293b;
  border-left-color: #334155;
}

[data-theme="dark"] .right-panel-tabs {
  border-bottom-color: #334155;
}

[data-theme="dark"] .right-panel-tab {
  color: #94a3b8;
}

[data-theme="dark"] .right-panel-tab:hover {
  color: #e2e8f0;
  background: #334155;
}

[data-theme="dark"] .right-panel-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
  background: #1e293b;
}

[data-theme="dark"] .activity-entry {
  background: #334155;
}

[data-theme="dark"] .activity-icon {
  background: #475569;
}

[data-theme="dark"] .activity-action {
  color: #e2e8f0;
}

[data-theme="dark"] .activity-target {
  color: #94a3b8;
}

[data-theme="dark"] .activity-meta {
  color: #64748b;
}

[data-theme="dark"] .activity-empty,
[data-theme="dark"] .activity-loading {
  color: #94a3b8;
}

[data-theme="dark"] .activity-header {
  border-bottom-color: #334155;
}

[data-theme="dark"] .activity-header h4 {
  color: #e2e8f0;
}

/* Dark theme for findings panel too (for consistency) */
[data-theme="dark"] .findings-empty {
  color: #94a3b8;
}

[data-theme="dark"] .finding-card {
  background: #334155;
}

[data-theme="dark"] .finding-title {
  color: #e2e8f0;
}

[data-theme="dark"] .finding-description {
  color: #94a3b8;
}


/* ============================================================================
   PHASE I.F5: PREMIUM BADGES (PRO)
   ============================================================================ */

.pro-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.3);
}

.pro-badge-sm {
  padding: 1px 4px;
  font-size: 9px;
  margin-left: 4px;
}

/* Premium feature button styling */
.btn-premium {
  position: relative;
}

.btn-premium .pro-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  margin-left: 0;
}

/* Premium locked state - grayed out with badge */
.premium-gated {
  opacity: 0.7;
  cursor: not-allowed;
}

.premium-gated:hover {
  opacity: 0.8;
}

/* Export dropdown with premium indicators */
.export-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 180px;
  padding: 8px 0;
  z-index: 100;
  display: none;
}

.export-dropdown-menu.show {
  display: block;
}

.export-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
}

.export-dropdown-item:hover {
  background: #334155;
}

.export-dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.export-dropdown-item.disabled:hover {
  background: none;
}

.export-dropdown-item svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
}

.export-dropdown-divider {
  height: 1px;
  background: #334155;
  margin: 8px 0;
}

/* Light theme */
[data-theme="light"] .export-dropdown-menu {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .export-dropdown-item {
  color: #334155;
}

[data-theme="light"] .export-dropdown-item:hover {
  background: #f1f5f9;
}

[data-theme="light"] .export-dropdown-divider {
  background: #e2e8f0;
}

/* Layer lock button premium styling */
.layer-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  background: #334155;
  border: 1px solid #475569;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s;
}

.layer-lock-btn:hover {
  background: #475569;
  color: #e2e8f0;
}

.layer-lock-btn.premium-gated {
  border-color: #f59e0b40;
  background: #f59e0b10;
}

.layer-lock-btn.premium-gated:hover {
  background: #f59e0b20;
}

[data-theme="light"] .layer-lock-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}

[data-theme="light"] .layer-lock-btn:hover {
  background: #e2e8f0;
  color: #334155;
}


/* Export free label */
.export-free {
  font-size: 10px;
  color: #22c55e;
  font-weight: 500;
}

[data-theme="light"] .export-free {
  color: #16a34a;
}


/* ============================================================================
   PHASE I.F5: REVIEW WORKFLOW UI
   ============================================================================ */

/* Review action buttons container */
.review-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Status badge styling by state */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 12px;
}

.status-badge.draft {
  background: #334155;
  color: #94a3b8;
}

.status-badge.ready_for_review,
.status-badge.ready-for-review {
  background: #0ea5e9;
  color: #fff;
}

.status-badge.approved {
  background: #22c55e;
  color: #fff;
}

.status-badge.changes_requested,
.status-badge.changes-requested {
  background: #f59e0b;
  color: #fff;
}

/* Button variants for review */
.btn-success {
  background: #22c55e;
  color: #fff;
  border: none;
}

.btn-success:hover {
  background: #16a34a;
}

.btn-warning {
  background: #f59e0b;
  color: #fff;
  border: none;
}

.btn-warning:hover {
  background: #d97706;
}

/* Review history panel */
.review-history {
  margin-top: 16px;
  padding: 16px;
  background: #1e293b;
  border-radius: 8px;
  border: 1px solid #334155;
}

.review-history h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #e2e8f0;
}

.review-history-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #334155;
}

.review-history-item:last-child {
  border-bottom: none;
}

.review-history-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.review-history-icon.submitted {
  background: #0ea5e9;
}

.review-history-icon.approved {
  background: #22c55e;
}

.review-history-icon.changes {
  background: #f59e0b;
}

.review-history-content {
  flex: 1;
}

.review-history-action {
  font-weight: 500;
  color: #e2e8f0;
  margin-bottom: 2px;
}

.review-history-meta {
  font-size: 12px;
  color: #64748b;
}

.review-history-comment {
  margin-top: 6px;
  padding: 8px;
  background: #334155;
  border-radius: 4px;
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
}

/* Review modal */
.review-modal-content {
  background: #1e293b;
  border-radius: 8px;
  padding: 24px;
  width: 450px;
  max-width: 90vw;
}

.review-modal-content h3 {
  margin: 0 0 16px 0;
  color: #e2e8f0;
}

.review-modal-content textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}

.review-modal-content textarea:focus {
  outline: none;
  border-color: #4a9eff;
}

.review-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Light theme */
[data-theme="light"] .status-badge.draft {
  background: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .review-history {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .review-history h4 {
  color: #334155;
}

[data-theme="light"] .review-history-action {
  color: #334155;
}

[data-theme="light"] .review-history-comment {
  background: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .review-modal-content {
  background: #fff;
}

[data-theme="light"] .review-modal-content h3 {
  color: #334155;
}

[data-theme="light"] .review-modal-content textarea {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}


/* ============================================================================
   PHASE I.F5 TASK 35: STYLING FIXES
   ============================================================================ */

/* FIX 1: Dark theme border-radius alignment with Light theme
   Make dark theme have subtle square corners like light theme */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .pill-soft,
html[data-theme="dark"] .source-pill {
  border-radius: 6px !important;
}

/* Cards get subtle rounded corners in dark theme */
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .finding-card,
html[data-theme="dark"] .layer-card,
html[data-theme="dark"] .investigation-card {
  border-radius: 8px !important;
}

/* Badge pills - subtle rounding */
html[data-theme="dark"] .timeline-date-badge,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .timeline-item-source,
html[data-theme="dark"] .ai-tag {
  border-radius: 6px !important;
}

/* Buttons - subtle rounding */
html[data-theme="dark"] .btn,
html[data-theme="dark"] button.btn,
html[data-theme="dark"] .view-btn {
  border-radius: 6px !important;
}

/* Inputs - subtle rounding */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .settings-input,
html[data-theme="dark"] .settings-select {
  border-radius: 6px !important;
}

/* FIX 2: Sources Pills Spacing - add gap between label and first pill */
.sources-row {
  gap: 12px !important;
}

.sources-label {
  margin-right: 8px !important;
  padding-right: 4px;
}

/* FIX 3: Investigation Timeline - Add vertical line like Search timeline */
/* Investigation timeline uses #inv-timeline-content container */
/* Match search timeline: left: 95px to align with dots */
#inv-timeline-content {
  position: relative;
}

/* Vertical line for investigation timeline - match search timeline exactly */
#inv-timeline-content::before {
  content: '';
  position: absolute;
  left: 95px;
  top: 10px;
  bottom: 20px;
  width: 1px;
  background: rgba(140, 140, 140, 0.35);
  z-index: 0;
}

/* Make timeline items have proper z-index so hover cards appear above line */
#inv-timeline-content .timeline-item {
  position: relative;
  z-index: 1;
}

/* Make dots appear above line */
#inv-timeline-content .timeline-dot {
  z-index: 2;
}

/* Light theme vertical line */
html[data-theme="light"] #inv-timeline-content::before {
  background: rgba(74, 144, 226, 0.25);
}



/* Additional dark theme square corners for containers/panels */
html[data-theme="dark"] .tab-panels,
html[data-theme="dark"] .alert-table-wrap,
html[data-theme="dark"] .feed-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .alert-table,
html[data-theme="dark"] .table-wrap {
  border-radius: 6px !important;
}

/* Sources row and backup row pills - more square */
html[data-theme="dark"] .sources-row .pill,
html[data-theme="dark"] .sources-row .pill-soft,
html[data-theme="dark"] .backup-row .pill,
html[data-theme="dark"] .backup-row .pill-soft {
  border-radius: 6px !important;
}

/* Table header row - square corners */
html[data-theme="dark"] .alert-table th,
html[data-theme="dark"] .alert-table td {
  border-radius: 0 !important;
}

/* Refresh button - square */
html[data-theme="dark"] #refresh-button,
html[data-theme="dark"] .refresh-btn {
  border-radius: 6px !important;
}
/* =============================================================================
   PHASE 2D: TENANT SWITCHER STYLES
   ============================================================================= */

.tenant-switcher-container {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
  display: none;
}

.tenant-switcher {
  position: relative;
}

.tenant-switcher-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--color-text, #fff);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.tenant-switcher-btn:hover {
  background: var(--color-surface-hover, rgba(255,255,255,0.08));
  border-color: var(--color-border-hover, rgba(255,255,255,0.2));
}

.tenant-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.tenant-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.tenant-role {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: rgba(74, 158, 255, 0.15);
  color: #4a9eff;
}

.tenant-role-owner {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.tenant-role-admin {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.tenant-role-auditor {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.tenant-role-viewer {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.tenant-chevron {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.tenant-switcher-btn[aria-expanded="true"] .tenant-chevron {
  transform: rotate(180deg);
}

.tenant-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-dropdown-bg, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255,255,255,0.15));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.15s ease;
}

.tenant-dropdown-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tenant-dropdown-header {
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #666);
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

.tenant-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.1s ease;
}

.tenant-option:hover {
  background: var(--color-surface-hover, rgba(255,255,255,0.05));
}

.tenant-option-active {
  background: var(--color-primary-bg, rgba(74, 158, 255, 0.1));
}

.tenant-option-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.tenant-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-text, #fff);
}

.tenant-option-role {
  font-size: 0.7rem;
  color: var(--color-text-muted, #888);
  text-transform: capitalize;
}

.tenant-external-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tenant-check {
  color: #22c55e;
  font-size: 0.9rem;
}

/* Light theme overrides */
[data-theme="light"] .tenant-switcher-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: #1a1a2e;
}

[data-theme="light"] .tenant-switcher-btn:hover {
  background: rgba(0,0,0,0.06);
}

[data-theme="light"] .tenant-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

[data-theme="light"] .tenant-option-name {
  color: #1a1a2e;
}

/* Sidebar collapsed state */
.sidebar.collapsed .tenant-switcher-container {
  padding: 0.5rem 0.25rem;
}

.sidebar.collapsed .tenant-name,
.sidebar.collapsed .tenant-role,
.sidebar.collapsed .tenant-chevron,
.sidebar.collapsed .tenant-dropdown-header {
  display: none;
}

.sidebar.collapsed .tenant-switcher-btn {
  justify-content: center;
  padding: 0.5rem;
}

/* Phase 2D: Collapsed sidebar - hide tenant switcher completely */
.sidebar.collapsed .tenant-switcher-container {
  display: none !important;
}

/* Alternative: If sidebar uses different collapsed state indicator */
.sidebar[data-collapsed="true"] .tenant-switcher-container,
.sidebar.sidebar-collapsed .tenant-switcher-container,
nav.sidebar:not(.expanded) .tenant-switcher-container {
  display: none !important;
}

/* =============================================================================
   PHASE 2E: USER MANAGEMENT STYLES
   ============================================================================= */

/* Settings Section Header with Button */
.settings-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.settings-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-primary, #4a9eff);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-btn-primary:hover {
  background: var(--color-primary-hover, #3a8eef);
}

.settings-btn-primary svg {
  width: 16px;
  height: 16px;
}

/* Users Card Header */
.users-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.users-card-header-collapsible {
  cursor: pointer;
  user-select: none;
}

.users-card-header-collapsible:hover {
  opacity: 0.8;
}

.users-card-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.invites-chevron {
  transition: transform 0.2s ease;
}

.invites-collapsed + .invites-chevron,
.users-card-header-collapsible.collapsed .invites-chevron {
  transform: rotate(-90deg);
}

.users-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #fff);
  margin: 0;
}

.users-count {
  font-size: 0.8rem;
  color: var(--color-text-muted, #888);
  background: var(--color-surface, rgba(255,255,255,0.05));
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Users Table Container */
.users-table-container {
  overflow-x: auto;
}

.invites-collapsed {
  display: none;
}

/* Users Table */
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.users-th {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
  color: var(--color-text-muted, #888);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.users-th-user { width: 40%; }
.users-th-email { width: 35%; }
.users-th-role { width: 15%; }
.users-th-status { width: 12%; }
.users-th-joined, .users-th-expires { width: 15%; }
.users-th-actions { width: 13%; text-align: right; }

.users-td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.05));
  vertical-align: middle;
}

.users-tr:hover {
  background: var(--color-surface-hover, rgba(255,255,255,0.03));
}

/* User Info Cell */
.user-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.user-email {
  font-weight: 500;
  color: var(--color-text, #fff);
}

.user-name {
  font-size: 0.8rem;
  color: var(--color-text-muted, #888);
}

.user-you-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.3rem;
  background: var(--color-primary-bg, rgba(74, 158, 255, 0.15));
  color: var(--color-primary, #4a9eff);
  border-radius: 3px;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Role Badges */
.role-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.role-badge-owner {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.role-badge-admin {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.role-badge-member {
  background: rgba(74, 158, 255, 0.15);
  color: #4a9eff;
}

.role-badge-viewer {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.role-badge-auditor {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-badge-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.status-badge-expired {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-badge-revoked,
.status-badge-superseded {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.status-badge-accepted {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.status-badge-suspended {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* External Badge */
.external-badge {
  display: inline-block;
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-radius: 3px;
  margin-left: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Role Select (inline dropdown) */
.role-select {
  padding: 0.25rem 0.5rem;
  background: var(--color-surface, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 4px;
  color: var(--color-text, #fff);
  font-size: 0.8rem;
  cursor: pointer;
}

.role-select:hover {
  border-color: var(--color-border-hover, rgba(255,255,255,0.2));
}

.role-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Action Buttons */
.users-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 4px;
  color: var(--color-text-muted, #888);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: var(--color-surface, rgba(255,255,255,0.05));
  color: var(--color-text, #fff);
}

.action-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* Loading State */
.users-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--color-text-muted, #888);
}

.users-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border, rgba(255,255,255,0.1));
  border-top-color: var(--color-primary, #4a9eff);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty State */
.users-empty {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted, #888);
}

/* =============================================================================
   MODAL STYLES
   ============================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(2px);
}

.modal-content {
  background: var(--color-card-bg, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-content-sm {
  max-width: 400px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text, #fff);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #888);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--color-text, #fff);
}

.modal-body {
  padding: 1.5rem;
}

.modal-warning {
  color: var(--color-text-muted, #888);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

/* =============================================================================
   INVITE FORM STYLES
   ============================================================================= */

.invite-form {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #fff);
  margin-bottom: 0.5rem;
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--color-surface, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--color-text, #fff);
  font-size: 0.875rem;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary, #4a9eff);
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
}

.form-input::placeholder {
  color: var(--color-text-muted, #666);
}

.form-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  margin-top: 0.375rem;
}

.form-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  padding: 0.75rem;
  color: #ef4444;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text, #fff);
}

.form-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary, #4a9eff);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* External Warning Box */
.invite-external-warning {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.invite-external-icon {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.invite-external-text strong {
  display: block;
  color: #fbbf24;
  margin-bottom: 0.25rem;
}

.invite-external-text p {
  font-size: 0.875rem;
  color: var(--color-text-muted, #888);
  margin: 0 0 0.75rem 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.btn-primary {
  background: var(--color-primary, #4a9eff);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-hover, #3a8eef);
}

.btn-secondary {
  background: var(--color-surface, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  color: var(--color-text, #fff);
}

/* Light theme fix for btn-secondary */
:root[data-theme="light"] .btn-secondary {
  color: #374151;
}

.btn-secondary:hover {
  background: var(--color-surface-hover, rgba(255,255,255,0.08));
}

.btn-danger {
  background: #ef4444;
  color: #fff;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Success State */
.invite-success {
  padding: 1.5rem;
  text-align: center;
}

.invite-success-icon {
  width: 48px;
  height: 48px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}

.invite-success h3 {
  color: var(--color-text, #fff);
  margin: 0 0 0.5rem 0;
}

.invite-success p {
  color: var(--color-text-muted, #888);
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
}

.invite-url-box {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.invite-url-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface, rgba(255,255,255,0.05));
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--color-text, #fff);
  font-size: 0.8rem;
  font-family: var(--font-mono);
}

.invite-copy-btn {
  flex-shrink: 0;
}

.invite-copy-btn.copied {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  color: #22c55e;
}

.invite-url-warning {
  font-size: 0.75rem;
  color: #fbbf24;
  margin-bottom: 1rem;
}

/* =============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================= */

[data-theme="light"] .modal-content {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select {
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.1);
  color: #1a1a2e;
}

[data-theme="light"] .invite-url-input {
  background: #f5f5f5;
  color: #1a1a2e;
}

[data-theme="light"] .users-table {
  color: #1a1a2e;
}

[data-theme="light"] .user-email {
  color: #1a1a2e;
}

[data-theme="light"] .role-select {
  background: #f5f5f5;
  color: #1a1a2e;
}

/* Fix role select dropdown options for dark theme */
.role-select option {
  background: #1a1a2e;
  color: #fff;
}

[data-theme="light"] .role-select option {
  background: #fff;
  color: #1a1a2e;
}

/* Fix form select dropdowns for dark theme */
.form-select {
  background-color: #1a1a2e !important;
  color: #fff !important;
}

.form-select option {
  background-color: #1a1a2e;
  color: #fff;
}

[data-theme="light"] .form-select {
  background-color: #f5f5f5 !important;
  color: #1a1a2e !important;
}

[data-theme="light"] .form-select option {
  background-color: #fff;
  color: #1a1a2e;
}

/* Phase 2F: Secondary action button */
.action-btn-secondary {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
.action-btn-secondary:hover {
  background: rgba(107, 114, 128, 0.3);
  color: #d1d5db;
}

/* Phase 2F: Fix reactivate modal visibility */
#reactivate-user-modal {
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
}
#reactivate-user-modal .modal-content {
  background: #1e293b;
  border: 1px solid #334155;
}
#reactivate-user-modal .modal-title {
  color: #f1f5f9;
}
#reactivate-user-modal .modal-body {
  color: #cbd5e1;
}
#reactivate-user-modal .modal-body p {
  color: #cbd5e1;
}
#reactivate-user-modal .form-label {
  color: #94a3b8;
}
#reactivate-user-modal .form-input {
  background: #0f172a;
  border: 1px solid #334155;
  color: #f1f5f9;
}
#reactivate-user-modal .form-help {
  color: #64748b;
}

/* Phase 2F: Force reactivate modal visibility */
#reactivate-user-modal[style*="display: flex"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* === Vault Source Table Styles (added 2026-01-11) === */
.vault-source-table-wrapper {
  max-height: none;
  overflow-y: visible;
  margin-bottom: 0.75rem;
}

.vault-source-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.vault-source-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-secondary, #1a1a2e);
}

.vault-source-table th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary, #a0a0a0);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.vault-source-table td {
  padding: 6px;
  color: var(--text-primary, #fff);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.85rem;
}

.vault-source-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.vault-source-table .source-name {
  font-weight: 500;
}

.vault-source-table .count-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vault-source-table .count-vaulted {
  color: #10b981;
}

.vault-source-table .count-to-archive {
  color: #6366f1;
  font-weight: 600;
}

.vault-source-table .date-cell {
  text-align: right;
  color: var(--text-secondary, #a0a0a0);
  font-size: 0.8rem;
}

/* Vault Settings Toggle Switch */
#vault-settings-toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3d3d5c;
  transition: 0.3s;
  border-radius: 24px;
}

#vault-settings-toggle:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

#vault-settings-enabled:checked + #vault-settings-toggle {
  background: #6366F1;
}

#vault-settings-enabled:checked + #vault-settings-toggle:before {
  transform: translateX(20px);
}

/* === Vault Backfill Status Bar Styles (added 2026-01-12) === */
.vault-backfill-job{padding:8px 12px;background:rgba(45,55,72,.6);border-radius:6px;margin:4px 0}
.vault-job-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:500}
.vault-job-icon{font-size:16px}
.vault-job-title{flex:1}
.vault-job-dates{color:#a0aec0;font-size:12px;font-weight:400}
.vault-sources-list{display:flex;flex-direction:column;gap:4px;margin:8px 0;padding-left:24px}
.vault-source-row{display:flex;align-items:center;gap:8px;font-size:13px}
.source-name{width:110px;display:flex;align-items:center;gap:4px}
.source-progress-container{flex:1;height:4px;background:#4a5568;border-radius:2px;overflow:hidden}
.source-progress{height:100%;background:#4299e1;border-radius:2px;transition:width .3s}
.source-stats{width:60px;text-align:right;color:#a0aec0;font-size:12px}
.src-icon{font-size:10px}
.src-icon.pending{color:#a0aec0}
.src-icon.running{color:#4299e1;animation:pulse 1s infinite}
.src-icon.completed{color:#48bb78}
.src-icon.not-impl,.src-icon.no-conn{color:#718096}
.src-icon.error{color:#f56565}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.vault-job-footer{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #4a5568;font-size:12px;color:#a0aec0}
.vault-source-row.status-completed .source-progress{background:#48bb78}
.vault-source-row.status-error .source-progress{background:#f56565}
.vault-source-row.status-not_implemented .source-name,.vault-source-row.status-no_connections .source-name{color:#718096;font-style:italic}
.stale-job{opacity:.7}
.stale-badge{background:#dd6b20;color:#fff;font-size:10px;padding:2px 6px;border-radius:3px;margin-left:8px}

/* Vault single job wrapper */
.status-bar-vault-single{position:relative;padding:4px 0;}

/* ==================== VAULT LIGHT THEME FIXES ==================== */

/* Fix 1: Drawer light theme - override inline styles */
[data-theme="light"] #vault-lite-settings-drawer {
  background: #ffffff !important;
  border-left-color: #e5e7eb !important;
}

[data-theme="light"] #vault-lite-settings-drawer h2,
[data-theme="light"] #vault-lite-settings-drawer h3 {
  color: #1f2937 !important;
}

[data-theme="light"] #vault-lite-settings-drawer p,
[data-theme="light"] #vault-lite-settings-drawer span,
[data-theme="light"] #vault-lite-settings-drawer label {
  color: #4b5563 !important;
}

[data-theme="light"] #vault-lite-settings-drawer [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] #vault-lite-settings-drawer [style*="background:rgba(45,55,72"] {
  background: #f3f4f6 !important;
}

[data-theme="light"] #vault-lite-settings-drawer [style*="border:1px solid rgba(255,255,255"] {
  border-color: #e5e7eb !important;
}

[data-theme="light"] #vault-lite-settings-close {
  color: #6b7280 !important;
}

/* Fix 2: Modal table light theme */
[data-theme="light"] .vault-source-table thead {
  background: #f9fafb;
}

[data-theme="light"] .vault-source-table th {
  color: #6b7280;
  border-bottom-color: #e5e7eb;
}

[data-theme="light"] .vault-source-table td {
  color: #1f2937;
  border-bottom-color: #f3f4f6;
}

[data-theme="light"] .vault-source-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .vault-source-table .source-name {
  color: #1f2937;
}

[data-theme="light"] .vault-source-table .count-cell {
  color: #374151;
}

[data-theme="light"] .vault-source-table .count-vaulted {
  color: #059669;
}

[data-theme="light"] .vault-source-table .count-to-archive {
  color: #6366f1;
}

[data-theme="light"] .vault-source-table .date-cell {
  color: #6b7280;
}

/* Fix 3: Modal container text in light theme */
[data-theme="light"] .modal-container h2,
[data-theme="light"] .modal-container h3 {
  color: #1f2937;
}

[data-theme="light"] .modal-container p,
[data-theme="light"] .modal-container label {
  color: #4b5563;
}

[data-theme="light"] .modal-header {
  border-bottom-color: #e5e7eb;
}

[data-theme="light"] .modal-header-info {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .vault-backfill-intro {
  color: #4b5563;
}

[data-theme="light"] .gap-estimate {
  background: #f9fafb;
  border-color: #e5e7eb;
}

[data-theme="light"] .gap-estimate-value {
  color: #1f2937;
}

[data-theme="light"] .gap-estimate-label {
  color: #6b7280;
}

/* Fix drawer checkbox and input styling for light theme */
[data-theme="light"] #vault-lite-settings-drawer #vault-settings-toggle {
  background: #6366f1 !important;
}

[data-theme="light"] #vault-lite-settings-drawer select {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
}

/* Archive History section light theme */
[data-theme="light"] #vault-history-section {
  border-top-color: #e5e7eb !important;
}

[data-theme="light"] #vault-history-list {
  color: #374151 !important;
}

[data-theme="light"] .vault-backfill-job {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* ==================== END VAULT LIGHT THEME FIXES ==================== */

/* Fix 4: Ensure modal overlay is above drawer when active */
.modal-overlay.active {
  z-index: 10002 !important;
}

/* Ensure the backfill modal specifically is on top */
#vault-backfill-modal.active {
  z-index: 10002 !important;
}

/* ==================== VAULT LITE DRAWER LIGHT THEME - COMPREHENSIVE FIX ==================== */

/* Override all backgrounds in drawer */
[data-theme="light"] #vault-lite-settings-drawer,
[data-theme="light"] #vault-lite-settings-drawer * {
  border-color: #e5e7eb !important;
}

[data-theme="light"] #vault-lite-settings-drawer > div {
  background: #ffffff !important;
}

[data-theme="light"] #vault-lite-settings-drawer div[style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] #vault-lite-settings-drawer div[style*="background:#1a1a2e"],
[data-theme="light"] #vault-lite-settings-drawer div[style*="background:rgba(45,55,72"] {
  background: #f9fafb !important;
}

/* Fix all text colors */
[data-theme="light"] #vault-lite-settings-drawer span[style*="color:#fff"],
[data-theme="light"] #vault-lite-settings-drawer span[style*="color:#a0a0a0"],
[data-theme="light"] #vault-lite-settings-drawer span[style*="color:#666"] {
  color: #374151 !important;
}

[data-theme="light"] #vault-lite-settings-drawer h2[style*="color:#fff"],
[data-theme="light"] #vault-lite-settings-drawer h3[style*="color:#a0a0a0"] {
  color: #1f2937 !important;
}

[data-theme="light"] #vault-lite-settings-drawer p[style*="color:#666"] {
  color: #6b7280 !important;
}

/* Fix checkbox labels - the source names */
[data-theme="light"] #vault-lite-settings-drawer label[style*="color:#fff"],
[data-theme="light"] #vault-lite-settings-drawer label[style*="color:#e0e0e0"] {
  color: #1f2937 !important;
}

/* Progress bar background */
[data-theme="light"] #vault-lite-settings-drawer div[style*="background:#2d2d4a"],
[data-theme="light"] #vault-lite-settings-drawer div[style*="background:rgba(45,45,74"] {
  background: #e5e7eb !important;
}

/* Select dropdowns */
[data-theme="light"] #vault-lite-settings-drawer select[style*="background:#2d2d4a"],
[data-theme="light"] #vault-lite-settings-drawer select[style*="background:#3d3d5c"] {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

/* Buttons */
[data-theme="light"] #vault-lite-settings-drawer button[style*="background:#6366f1"] {
  background: #6366f1 !important;
}

[data-theme="light"] #vault-lite-settings-drawer button[style*="background:#3d3d5c"],
[data-theme="light"] #vault-lite-settings-drawer button[style*="background:rgba(99,102,241,0.1)"] {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border: 1px solid #d1d5db !important;
}

/* Toggle switch background when off */
[data-theme="light"] #vault-settings-toggle {
  background: #d1d5db !important;
}

[data-theme="light"] #vault-settings-enabled:checked + #vault-settings-toggle {
  background: #6366f1 !important;
}

/* Archive history section */
[data-theme="light"] #vault-history-section {
  border-top-color: #e5e7eb !important;
}

[data-theme="light"] #vault-history-summary span {
  color: #374151 !important;
}

[data-theme="light"] #vault-history-list {
  color: #374151 !important;
}

[data-theme="light"] #vault-history-list > div {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
}

/* ==================== END VAULT LITE DRAWER COMPREHENSIVE FIX ==================== */

/* ==================== VAULT DRAWER LIGHT THEME - AGGRESSIVE FIX ==================== */

/* Main drawer background */
[data-theme="light"] #vault-lite-settings-drawer {
  background: #ffffff !important;
  border-left: 1px solid #e5e7eb !important;
}

/* All section backgrounds */
[data-theme="light"] #vault-lite-settings-drawer > div > div {
  background: #f9fafb !important;
}

/* All text - override inline color:#fff and color:#a0a0a0 */
[data-theme="light"] #vault-lite-settings-drawer h2 {
  color: #1f2937 !important;
}

[data-theme="light"] #vault-lite-settings-drawer h3 {
  color: #4b5563 !important;
}

[data-theme="light"] #vault-lite-settings-drawer p {
  color: #6b7280 !important;
}

[data-theme="light"] #vault-lite-settings-drawer span {
  color: #374151 !important;
}

[data-theme="light"] #vault-lite-settings-drawer label {
  color: #1f2937 !important;
}

/* Specific value spans that should stay emphasized */
[data-theme="light"] #vault-settings-count,
[data-theme="light"] #vault-history-total,
[data-theme="light"] #vault-history-coverage {
  color: #1f2937 !important;
  font-weight: 600;
}

/* Storage bar background */
[data-theme="light"] #vault-lite-settings-drawer div[style*="background:#2d2d4a"],
[data-theme="light"] #vault-lite-settings-drawer div[style*="background:rgba(45"] {
  background: #e5e7eb !important;
}

/* Select dropdowns */
[data-theme="light"] #vault-lite-settings-drawer select {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

/* Close button */
[data-theme="light"] #vault-lite-settings-close {
  color: #6b7280 !important;
}

[data-theme="light"] #vault-lite-settings-close:hover {
  color: #1f2937 !important;
}

/* History list items */
[data-theme="light"] #vault-history-list > div {
  border-bottom-color: rgba(0,0,0,0.08) !important;
}

[data-theme="light"] #vault-history-list span[style*="color:#fff"] {
  color: #1f2937 !important;
}

[data-theme="light"] #vault-history-list span[style*="color:#666"],
[data-theme="light"] #vault-history-list div[style*="color:#666"] {
  color: #6b7280 !important;
}

/* ==================== END VAULT DRAWER LIGHT THEME FIX ==================== */

/* ==================== VAULT DRAWER THEMEABLE CLASS ==================== */
.vault-settings-drawer {
  background: #1a1a2e;
  border-left: 1px solid rgba(255,255,255,0.1);
}

[data-theme="light"] .vault-settings-drawer {
  background: #ffffff !important;
  border-left: 1px solid #e5e7eb !important;
}
/* ==================== END VAULT DRAWER THEMEABLE ==================== */

/* =====================================================================
   VAULT DRAWER - THEMEABLE STYLES (matching connector drawer pattern)
   ===================================================================== */

.vault-settings-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: -420px;
  width: 480px;
  height: 100vh;
  background: var(--bg-elevated, #1a1a2e);
  border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.vault-settings-inner {
  padding: 24px;
}

.vault-settings-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted, #a0a0a0);
}

.vault-settings-close:hover {
  color: var(--text-primary, #ffffff);
}

.vault-settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.vault-settings-icon {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  border-radius: 8px;
  padding: 8px;
  display: flex;
}

.vault-settings-title {
  margin: 0;
  color: var(--text-primary, #ffffff);
  font-size: 18px;
}

.vault-settings-subtitle {
  margin: 4px 0 0 0;
  color: var(--text-muted, #666666);
  font-size: 13px;
}

.vault-settings-section {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-card, rgba(255,255,255,0.03));
  border-radius: 8px;
}

.vault-settings-section-title {
  margin: 0 0 12px 0;
  color: var(--text-muted, #a0a0a0);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vault-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--text-muted, #a0a0a0);
  font-size: 13px;
}

.vault-settings-row:last-child {
  margin-bottom: 0;
}

.vault-settings-label {
  color: var(--text-muted, #a0a0a0);
  font-size: 13px;
}

.vault-settings-label-main {
  color: var(--text-primary, #ffffff);
  font-size: 14px;
}

.vault-settings-value {
  color: var(--text-primary, #ffffff);
  font-weight: 500;
}

/* =====================================================================
   VAULT DRAWER - LIGHT THEME OVERRIDES
   ===================================================================== */

[data-theme="light"] .vault-settings-drawer {
  background: #ffffff;
  border-left-color: #e5e7eb;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .vault-settings-close {
  color: #6b7280;
}

[data-theme="light"] .vault-settings-close:hover {
  color: #1f2937;
}

[data-theme="light"] .vault-settings-title {
  color: #1f2937;
}

[data-theme="light"] .vault-settings-subtitle {
  color: #6b7280;
}

[data-theme="light"] .vault-settings-section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

[data-theme="light"] .vault-settings-section-title {
  color: #4b5563;
}

[data-theme="light"] .vault-settings-row {
  color: #6b7280;
}

[data-theme="light"] .vault-settings-label {
  color: #6b7280;
}

[data-theme="light"] .vault-settings-label-main {
  color: #1f2937;
}

[data-theme="light"] .vault-settings-value {
  color: #1f2937;
}

/* History items in light mode */
[data-theme="light"] #vault-history-total,
[data-theme="light"] #vault-history-coverage {
  color: #1f2937 !important;
}

[data-theme="light"] #vault-history-list div[style*="color:#fff"] {
  color: #1f2937 !important;
}

/* =====================================================================
   END VAULT DRAWER THEMEABLE
   ===================================================================== */

/* =====================================================================
   VAULT SOURCE CHECKBOXES - THEMEABLE
   ===================================================================== */

.vault-source-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  cursor: pointer;
}

.vault-source-checkbox {
  accent-color: #6366F1;
}

.vault-source-name {
  color: var(--text-primary, #ffffff);
  font-size: 14px;
}

[data-theme="light"] .vault-source-label {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

[data-theme="light"] .vault-source-name {
  color: #1f2937;
}

/* =====================================================================
   END VAULT SOURCE CHECKBOXES
   ===================================================================== */

/* FORCE LIGHT THEME FIX */
[data-theme="light"] .vault-source-label {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
}

[data-theme="light"] .vault-source-name {
  color: #1f2937 !important;
}

/* =====================================================================
   VAULT DRAWER - COMPLETE THEMEABLE STYLES
   ===================================================================== */

.vault-settings-section-plain {
  margin-bottom: 24px;
}

.vault-settings-hint {
  color: var(--text-muted, #666666);
  font-size: 12px;
  margin: 0 0 12px 0;
}

.vault-sources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault-storage-bar-bg {
  height: 8px;
  background: #252542;
  border-radius: 4px;
  overflow: hidden;
}

.vault-storage-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6366F1, #4F46E5);
  border-radius: 4px;
  transition: width 0.3s;
}

.vault-settings-select {
  padding: 8px 12px;
  background: #252542;
  border: 1px solid #3d3d5c;
  border-radius: 6px;
  color: var(--text-primary, #ffffff);
  font-size: 14px;
}

.vault-settings-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

.vault-btn-primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 12px;
}

.vault-btn-primary:hover {
  opacity: 0.9;
}

.vault-btn-secondary {
  width: 100%;
  padding: 12px;
  background: #252542;
  border: 1px solid #3d3d5c;
  border-radius: 6px;
  color: var(--text-primary, #ffffff);
  cursor: pointer;
  font-size: 14px;
}

.vault-btn-secondary:hover {
  background: #2d2d5a;
}

.vault-history-section {
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

.vault-history-summary {
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.vault-history-list {
  max-height: 200px;
  overflow-y: auto;
}

.vault-history-loading {
  color: var(--text-muted, #666666);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* =====================================================================
   VAULT DRAWER - LIGHT THEME OVERRIDES
   ===================================================================== */

[data-theme="light"] .vault-settings-hint {
  color: #6b7280;
}

[data-theme="light"] .vault-storage-bar-bg {
  background: #e5e7eb;
}

[data-theme="light"] .vault-settings-select {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1f2937;
}

[data-theme="light"] .vault-settings-actions {
  border-top-color: #e5e7eb;
}

[data-theme="light"] .vault-btn-secondary {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #1f2937;
}

[data-theme="light"] .vault-btn-secondary:hover {
  background: #f3f4f6;
}

[data-theme="light"] .vault-history-section {
  border-top-color: #e5e7eb;
}

[data-theme="light"] .vault-history-summary {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

[data-theme="light"] .vault-history-loading {
  color: #6b7280;
}

/* =====================================================================
   END VAULT DRAWER COMPLETE THEMEABLE
   ===================================================================== */

/* ULTRA-SPECIFIC VAULT SOURCE LIGHT THEME */
html[data-theme="light"] .vault-settings-drawer .vault-source-label {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
}

html[data-theme="light"] .vault-settings-drawer .vault-source-name {
  color: #1f2937 !important;
}

html[data-theme="light"] #vault-settings-sources .vault-source-label {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
}

html[data-theme="light"] #vault-settings-sources .vault-source-name {
  color: #1f2937 !important;
}

/* Phase 8: Health Badge Styles */
.health-badge { display: inline-flex; align-items: center; margin-right: 8px; cursor: help; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.health-badge-healthy .health-dot { background-color: #10B981; box-shadow: 0 0 4px rgba(16,185,129,0.5); }
.health-badge-warning .health-dot { background-color: #F59E0B; box-shadow: 0 0 4px rgba(245,158,11,0.5); }
.health-badge-error .health-dot, .health-badge-expired .health-dot { background-color: #EF4444; box-shadow: 0 0 4px rgba(239,68,68,0.5); }
.health-badge-unknown .health-dot { background-color: #9CA3AF; }
@keyframes health-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.health-badge-warning .health-dot, .health-badge-error .health-dot, .health-badge-expired .health-dot { animation: health-pulse 2s ease-in-out infinite; }

/* ==================== PHASE 9: BACKFILL MODAL STYLES ==================== */

/* Intro text */
.backfill-intro {
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 20px;
}

/* Source table */
.backfill-sources-section h3,
.backfill-dates-section h3 {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.backfill-source-table-wrapper {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

.backfill-source-table {
  width: 100%;
  border-collapse: collapse;
}

.backfill-source-table thead th {
  background: rgba(0,0,0,0.3);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}

.backfill-source-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}

.backfill-source-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.backfill-source-table td {
  padding: 10px 12px;
  color: #e2e8f0;
  font-size: 13px;
}

.backfill-source-table .source-name {
  font-weight: 500;
}

.backfill-source-table .estimate-cell {
  text-align: right;
  color: #94a3b8;
  font-size: 12px;
}

.backfill-source-table .action-cell {
  text-align: right;
}

/* Blocked/Error/Warning row states */
.backfill-source-blocked {
  opacity: 0.7;
}

.backfill-source-blocked input[type='checkbox'] {
  cursor: not-allowed;
}

.backfill-source-error {
  background: rgba(239, 68, 68, 0.05);
}

.backfill-source-warning {
  background: rgba(245, 158, 11, 0.05);
}

/* Health badges in modal */
.backfill-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.backfill-health-badge .health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.backfill-health-healthy {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.backfill-health-healthy .health-dot {
  background: #22c55e;
}

.backfill-health-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.backfill-health-warning .health-dot {
  background: #f59e0b;
}

.backfill-health-error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.backfill-health-error .health-dot {
  background: #ef4444;
}

.backfill-health-expired {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.backfill-health-expired .health-dot {
  background: #dc2626;
}

.backfill-health-unknown {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}
.backfill-health-unknown .health-dot {
  background: #64748b;
}

/* Reconnect button */
.backfill-reconnect-btn {
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.backfill-reconnect-btn:hover {
  background: #b91c1c;
}

/* Health banner */
.backfill-health-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}

.backfill-health-banner svg {
  flex-shrink: 0;
}

.backfill-health-banner-blocked {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.backfill-health-banner-warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.backfill-banner-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}

.backfill-banner-dismiss:hover {
  opacity: 1;
}

/* Date picker section */
.backfill-dates-section {
  margin-bottom: 20px;
}

.backfill-date-picker {
  display: flex;
  gap: 16px;
}

/* Spinner for loading state */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Phase 9: Light theme fixes for BackfillModal */
[data-theme="light"] .backfill-source-table td {
  color: #1e293b;
}

[data-theme="light"] .backfill-source-table .source-name {
  color: #0f172a;
}

[data-theme="light"] .backfill-source-table .estimate-cell {
  color: #64748b;
}

[data-theme="light"] .backfill-intro {
  color: #64748b;
}

[data-theme="light"] .backfill-sources-section h3,
[data-theme="light"] .backfill-dates-section h3 {
  color: #1e293b;
}

[data-theme="light"] .backfill-source-table thead th {
  background: #f1f5f9;
  color: #64748b;
}

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

[data-theme="light"] .backfill-source-table tbody tr:hover {
  background: #f8fafc;
}

[data-theme="light"] .backfill-health-banner-blocked {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

[data-theme="light"] .backfill-health-banner-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #d97706;
}

[data-theme="light"] .backfill-source-table-wrapper {
  border-color: #e2e8f0;
}

[data-theme="light"] .backfill-source-blocked {
  background: rgba(239, 68, 68, 0.05);
}

[data-theme="light"] .backfill-source-error {
  background: rgba(239, 68, 68, 0.05);
}

[data-theme="light"] .backfill-source-warning {
  background: rgba(245, 158, 11, 0.05);
}

/* Coverage info styling */
.backfill-coverage-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}

.backfill-coverage-info .label {
  color: #94a3b8;
}

.backfill-coverage-info .value {
  color: #e2e8f0;
  font-weight: 500;
}

[data-theme="light"] .backfill-coverage-info .label {
  color: #64748b;
}

[data-theme="light"] .backfill-coverage-info .value {
  color: #1e293b;
}

.backfill-date-note {
  color: #64748b;
  font-size: 12px;
  margin-top: 8px;
}

/* Phase 9: Additional light theme fixes */
[data-theme="light"] .backfill-coverage-info .label {
  color: #475569;
}

[data-theme="light"] .backfill-coverage-info .value {
  color: #0f172a;
  font-weight: 600;
}

[data-theme="light"] .backfill-date-note {
  color: #64748b;
}

[data-theme="light"] .gap-date-field label {
  color: #475569;
}

[data-theme="light"] .backfill-dates-section h3 {
  color: #0f172a;
}

[data-theme="light"] .backfill-sources-section h3 {
  color: #0f172a;
}

[data-theme="light"] .backfill-intro {
  color: #475569;
}

[data-theme="light"] .gap-estimate-title {
  color: #0f172a;
}

[data-theme="light"] .gap-estimate-label {
  color: #64748b;
}

[data-theme="light"] .gap-estimate-value {
  color: #1e293b;
}

[data-theme="light"] #backfill-modal .modal-body {
  color: #1e293b;
}

[data-theme="light"] #backfill-modal p {
  color: #475569;
}

/* Phase 9: Tone down row backgrounds and fix column widths */

/* Remove heavy colored backgrounds - just use subtle left border instead */
.backfill-source-table tbody tr.backfill-source-error {
  background: transparent;
  border-left: 3px solid #ef4444;
}

.backfill-source-table tbody tr.backfill-source-warning {
  background: transparent;
  border-left: 3px solid #f59e0b;
}

.backfill-source-table tbody tr.backfill-source-blocked {
  background: transparent;
  border-left: 3px solid #94a3b8;
}

[data-theme="light"] .backfill-source-table tbody tr.backfill-source-error,
[data-theme="light"] .backfill-source-table tbody tr.backfill-source-warning,
[data-theme="light"] .backfill-source-table tbody tr.backfill-source-blocked {
  background: transparent;
}

/* Fix column widths - source name truncates, health has more room */
.backfill-source-table .source-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* For multi-account names, show on two lines but cap height */
.backfill-source-table td:nth-child(2) {
  max-width: 150px;
  word-break: break-word;
  line-height: 1.3;
}

/* Health column needs more space */
.backfill-source-table th:nth-child(3),
.backfill-source-table td:nth-child(3) {
  min-width: 140px;
}

/* Estimate column */
.backfill-source-table th:nth-child(4),
.backfill-source-table td:nth-child(4) {
  min-width: 80px;
}

/* Phase 9: Improve health badge readability */
.backfill-health-badge {
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
}

.backfill-health-healthy {
  background: rgba(34, 197, 94, 0.2);
  color: #15803d;
}

.backfill-health-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #b45309;
}

.backfill-health-error {
  background: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}

.backfill-health-expired {
  background: rgba(239, 68, 68, 0.25);
  color: #991b1b;
}

.backfill-health-unknown {
  background: rgba(100, 116, 139, 0.2);
  color: #475569;
}

/* Dark theme adjustments */
[data-theme="dark"] .backfill-health-healthy {
  color: #4ade80;
}

[data-theme="dark"] .backfill-health-warning {
  color: #fbbf24;
}

[data-theme="dark"] .backfill-health-error {
  color: #f87171;
}

[data-theme="dark"] .backfill-health-expired {
  color: #fca5a5;
}

[data-theme="dark"] .backfill-health-unknown {
  color: #94a3b8;
}

/* Source name with tooltip support */
.backfill-source-table .source-name {
  cursor: default;
}

/* ==================== Phase 10: Remediation Styles ==================== */

/* Warning button style for token refresh */
.connector-btn-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.connector-btn-warning:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
}
[data-theme="light"] .connector-btn-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="light"] .connector-btn-warning:hover {
  background: rgba(245, 158, 11, 0.2);
}

/* Remediation container */
.connector-settings-remediation {
  padding: 8px 0;
}
.connector-settings-remediation .connector-btn {
  width: 100%;
  justify-content: center;
}

/* Small spinner for button loading state */
.spinner-small {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Remediation help text */
.remediation-help-text {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #9CA3AF;
  line-height: 1.4;
}
[data-theme="light"] .remediation-help-text {
  color: #6B7280;
}

/* Health badge in drawer - with label text */
#connector-settings-health .health-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
#connector-settings-health .health-badge-healthy {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}
#connector-settings-health .health-badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}
#connector-settings-health .health-badge-error,
#connector-settings-health .health-badge-expired {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}
#connector-settings-health .health-badge-unknown {
  background: rgba(156, 163, 175, 0.15);
  color: #9CA3AF;
}

/* Light theme health badges in drawer */
[data-theme="light"] #connector-settings-health .health-badge-healthy {
  color: #059669;
}
[data-theme="light"] #connector-settings-health .health-badge-warning {
  color: #B45309;
}
[data-theme="light"] #connector-settings-health .health-badge-error,
[data-theme="light"] #connector-settings-health .health-badge-expired {
  color: #DC2626;
}
[data-theme="light"] #connector-settings-health .health-badge-unknown {
  color: #6B7280;
}
/* Phase 5: Light theme fix for backup destination email */
[data-theme="light"] .account-email {
  color: #111827;
}

/* Disabled button state */
.connector-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.connector-btn:disabled:hover {
  background: inherit;
}

/* Focus indicators for accessibility */
.connector-btn:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* ==================== End Phase 10 Styles ==================== */

/* ==================== Selection Toolbar Theme Fix ==================== */
/* Date: 2026-01-16 */
/* Issue: Text invisible in both themes - dropdown items unreadable */

/* =========================== DARK THEME FIXES =========================== */

/* Dropdown Items - Light text on dark background */
.selection-dropdown-menu .dropdown-item {
  color: #e2e8f0 !important;
}

.selection-dropdown-menu .dropdown-item:hover {
  color: #ffffff !important;
  background: #334155 !important;
}

/* New Investigation action link */
.selection-dropdown-menu .dropdown-item-action {
  color: #60a5fa !important;
}

.selection-dropdown-menu .dropdown-item-action:hover {
  color: #93c5fd !important;
  background: #1e3a5f !important;
}

/* Workspace name and layer count in dropdown */
.selection-dropdown-menu .workspace-option {
  color: #e2e8f0 !important;
}

.selection-dropdown-menu .workspace-option .layer-count {
  color: #94a3b8 !important;
}

/* Dropdown divider */
.selection-dropdown-menu .dropdown-divider {
  background: #475569 !important;
}

/* =========================== LIGHT THEME FIXES =========================== */

/* Selection Toolbar Container */
[data-theme="light"] .selection-toolbar {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Selection Count Text */
[data-theme="light"] .selection-count {
  color: #4b5563 !important;
}

[data-theme="light"] .selection-count strong {
  color: #1f2937 !important;
}

/* Selection Dropdown Menu */
[data-theme="light"] .selection-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Dropdown Items */
[data-theme="light"] .selection-dropdown-menu .dropdown-item {
  color: #374151 !important;
  background: transparent !important;
}

[data-theme="light"] .selection-dropdown-menu .dropdown-item:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

[data-theme="light"] .selection-dropdown-menu .dropdown-item-action {
  color: #3b82f6 !important;
}

[data-theme="light"] .selection-dropdown-menu .dropdown-item-action:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
}

/* Dropdown Divider */
[data-theme="light"] .selection-dropdown-menu .dropdown-divider {
  background: #e5e7eb !important;
}

/* Workspace Option in Dropdown */
[data-theme="light"] .selection-dropdown-menu .workspace-option {
  color: #374151 !important;
}

[data-theme="light"] .selection-dropdown-menu .workspace-option .layer-count {
  color: #6b7280 !important;
}

/* Toast Notifications */
[data-theme="light"] .toast {
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .toast-message {
  color: #1f2937 !important;
}

[data-theme="light"] .toast-close {
  color: #6b7280 !important;
}

[data-theme="light"] .toast-close:hover {
  color: #374151 !important;
}

/* Clear Selection Button */
[data-theme="light"] .selection-toolbar .btn-ghost,
[data-theme="light"] #btn-clear-selection {
  color: #4b5563 !important;
  background: transparent !important;
  border: 1px solid #d1d5db !important;
}

[data-theme="light"] .selection-toolbar .btn-ghost:hover,
[data-theme="light"] #btn-clear-selection:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* Selection Checkbox */
[data-theme="light"] .item-select-checkbox .checkbox-mark {
  background: #ffffff !important;
  border: 2px solid #d1d5db !important;
}

[data-theme="light"] .item-checkbox:checked + .checkbox-mark {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

/* Selected Timeline Item Highlight */
[data-theme="light"] .timeline-item.selected {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
}

/* ==================== End Selection Toolbar Theme Fix ==================== */

/* ============================================================================
   M365 RECOVERY PAGE STYLES - Phase 4
   ============================================================================ */

/* Sidebar Add-on Badge */
.sidebar-addon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  font-size: 9px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: auto;
}

.sidebar.expanded .sidebar-addon-badge {
  display: inline-flex;
}

.sidebar:not(.expanded) .sidebar-addon-badge {
  display: none;
}

/* M365 Page Container */
.m365-page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

/* M365 Page Header */
.m365-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.m365-page-title-section h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-primary, #e5e7eb);
}

.m365-page-title-section p {
  color: var(--text-secondary, #9ca3af);
  font-size: 14px;
  margin: 0;
}

.m365-page-actions {
  display: flex;
  gap: 12px;
}

/* M365 Tabs */
.m365-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color, #374151);
  margin-bottom: 24px;
  overflow-x: auto;
}

.m365-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.m365-tab:hover {
  color: var(--text-primary, #e5e7eb);
  background: var(--bg-hover, rgba(255,255,255,0.05));
}

.m365-tab.active {
  color: var(--accent-primary, #3b82f6);
  border-bottom-color: var(--accent-primary, #3b82f6);
}

/* M365 Tab Content */
.m365-tab-content {
  min-height: 400px;
}

.m365-tab-panel {
  display: none;
}

.m365-tab-panel.active {
  display: block;
}

/* M365 Loading State */
.m365-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary, #9ca3af);
}

.m365-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color, #374151);
  border-top-color: var(--accent-primary, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

/* M365 Not Enabled State */
.m365-not-enabled {
  text-align: center;
  padding: 60px 20px;
  max-width: 600px;
  margin: 0 auto;
}

.m365-not-enabled-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.m365-not-enabled h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text-primary, #e5e7eb);
}

.m365-not-enabled > p {
  color: var(--text-secondary, #9ca3af);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

/* M365 Features Grid */
.m365-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.m365-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary, #1f2937);
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary, #e5e7eb);
}

.m365-feature-icon {
  font-size: 20px;
}

/* M365 Pricing Note */
.m365-pricing-note {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 20px;
}

/* M365 Footer Note */
.m365-footer-note {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  border-top: 1px solid var(--border-color, #374151);
}

.m365-footer-note strong {
  color: var(--text-secondary, #9ca3af);
}

/* Light theme overrides */
:root[data-theme="light"] .m365-page-title-section h1 {
  color: #1f2937;
}

:root[data-theme="light"] .m365-page-title-section p {
  color: #6b7280;
}

:root[data-theme="light"] .m365-tab {
  color: #6b7280;
}

:root[data-theme="light"] .m365-tab:hover {
  color: #1f2937;
  background: rgba(0,0,0,0.05);
}

:root[data-theme="light"] .m365-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

:root[data-theme="light"] .m365-not-enabled h3 {
  color: #1f2937;
}

:root[data-theme="light"] .m365-feature {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #1f2937;
}

/* Responsive */
@media (max-width: 640px) {
  .m365-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .m365-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   M365 RECOVERY COMPONENT STYLES - Phase 4.2
   Extracted from m365_recovery_mockup.html
   ============================================================================ */

/* M365 CSS Variables (scoped for M365 pages) */
.m365-page-container {
  --m365-color-success: #10b981;
  --m365-color-success-bg: rgba(16, 185, 129, 0.15);
  --m365-color-warning: #f59e0b;
  --m365-color-warning-bg: rgba(245, 158, 11, 0.15);
  --m365-color-error: #ef4444;
  --m365-color-error-bg: rgba(239, 68, 68, 0.15);
  --m365-color-info: #3b82f6;
  --m365-color-info-bg: rgba(59, 130, 246, 0.15);
}

/* M365 Grid Layouts */
.m365-grid {
  display: grid;
  gap: 20px;
}

.m365-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.m365-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.m365-grid-2-1 {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 1024px) {
  .m365-grid-3, .m365-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .m365-grid-2-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .m365-grid-3, .m365-grid-4, .m365-grid-2-1 {
    grid-template-columns: 1fr;
  }
}

/* M365 Card Base */
.m365-card {
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: 12px;
  padding: 20px;
}

.m365-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.m365-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
}

.m365-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  margin-top: 2px;
}

/* M365 Status Card */
.m365-status-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.m365-status-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.m365-status-icon.success {
  background: var(--m365-color-success-bg);
  color: var(--m365-color-success);
}

.m365-status-icon.warning {
  background: var(--m365-color-warning-bg);
  color: var(--m365-color-warning);
}

.m365-status-icon.error {
  background: var(--m365-color-error-bg);
  color: var(--m365-color-error);
}

.m365-status-icon.info {
  background: var(--m365-color-info-bg);
  color: var(--m365-color-info);
}

.m365-status-content h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 4px;
}

.m365-status-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #e5e7eb);
}

.m365-status-meta {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
}

/* M365 Service Status Indicator */
.m365-service-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m365-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: m365-pulse 2s infinite;
}

.m365-status-dot.enabled {
  background: var(--m365-color-success);
}

.m365-status-dot.partial {
  background: var(--m365-color-warning);
}

.m365-status-dot.disabled {
  background: var(--m365-color-error);
}

@keyframes m365-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* M365 Coverage Cards */
.m365-coverage-card {
  text-align: center;
  padding: 24px;
}

.m365-coverage-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.m365-coverage-icon.exchange {
  background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
  color: white;
}

.m365-coverage-icon.onedrive {
  background: linear-gradient(135deg, #0364b8 0%, #0078d4 100%);
  color: white;
}

.m365-coverage-icon.sharepoint {
  background: linear-gradient(135deg, #038387 0%, #036d70 100%);
  color: white;
}

.m365-coverage-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary, #e5e7eb);
}

.m365-coverage-stats {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary, #e5e7eb);
}

.m365-coverage-progress {
  width: 100%;
  height: 6px;
  background: var(--bg-tertiary, #374151);
  border-radius: 3px;
  overflow: hidden;
  margin: 12px 0;
}

.m365-coverage-progress-bar {
  height: 100%;
  background: var(--m365-color-success);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.m365-coverage-meta {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
}

/* M365 Cost Card */
.m365-cost-card {
  background: linear-gradient(135deg, var(--bg-secondary, #1e293b) 0%, var(--bg-tertiary, #374151) 100%);
}

.m365-cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.m365-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.m365-cost-row .label {
  color: var(--text-secondary, #9ca3af);
}

.m365-cost-row .value {
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
}

.m365-cost-row.total {
  border-top: 1px solid var(--border-color, #374151);
  padding-top: 12px;
  margin-top: 4px;
}

.m365-cost-row.total .value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary, #3b82f6);
}

/* M365 Activity List */
.m365-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m365-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary, #1e293b);
  border-radius: 8px;
}

.m365-activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.m365-activity-content {
  flex: 1;
}

.m365-activity-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
}

.m365-activity-meta {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

.m365-activity-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.m365-activity-status.completed {
  background: var(--m365-color-success-bg);
  color: var(--m365-color-success);
}

.m365-activity-status.in-progress {
  background: var(--m365-color-info-bg);
  color: var(--m365-color-info);
}

.m365-activity-status.failed {
  background: var(--m365-color-error-bg);
  color: var(--m365-color-error);
}

/* M365 Quick Actions */
.m365-quick-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.m365-quick-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary, #e5e7eb);
}

.m365-quick-action-btn:hover {
  border-color: var(--accent-primary, #3b82f6);
  background: var(--m365-color-info-bg);
}

.m365-quick-action-icon {
  font-size: 24px;
  color: var(--accent-primary, #3b82f6);
}

.m365-quick-action-label {
  font-size: 13px;
  font-weight: 500;
}

/* M365 Workload Tabs */
.m365-workload-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.m365-workload-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-tertiary, #374151);
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
  color: var(--text-primary, #e5e7eb);
}

.m365-workload-tab.active {
  background: var(--accent-primary, #3b82f6);
  border-color: var(--accent-primary, #3b82f6);
  color: white;
}

.m365-workload-tab:hover:not(.active) {
  border-color: var(--accent-primary, #3b82f6);
}

.m365-workload-count {
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.m365-workload-tab:not(.active) .m365-workload-count {
  background: var(--bg-secondary, #1e293b);
}

/* M365 Toolbar */
.m365-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.m365-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m365-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m365-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  min-width: 280px;
}

.m365-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-primary, #e5e7eb);
}

.m365-search-box input::placeholder {
  color: var(--text-muted, #6b7280);
}

/* M365 Table */
.m365-table-container {
  overflow-x: auto;
}

.m365-table {
  width: 100%;
  border-collapse: collapse;
}

.m365-table th,
.m365-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color, #374151);
}

.m365-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-secondary, #1e293b);
}

.m365-table td {
  font-size: 14px;
  color: var(--text-primary, #e5e7eb);
}

.m365-table tbody tr:hover td {
  background: var(--bg-tertiary, #374151);
}

/* M365 Badges */
.m365-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.m365-badge-success {
  background: var(--m365-color-success-bg);
  color: var(--m365-color-success);
}

.m365-badge-warning {
  background: var(--m365-color-warning-bg);
  color: var(--m365-color-warning);
}

.m365-badge-error {
  background: var(--m365-color-error-bg);
  color: var(--m365-color-error);
}

.m365-badge-info {
  background: var(--m365-color-info-bg);
  color: var(--m365-color-info);
}

.m365-badge-neutral {
  background: var(--bg-tertiary, #374151);
  color: var(--text-secondary, #9ca3af);
}

/* M365 Checkbox Cell */
.m365-checkbox-cell {
  width: 40px;
}

/* M365 User Cell */
.m365-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m365-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-primary, #3b82f6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.m365-user-info {
  display: flex;
  flex-direction: column;
}

.m365-user-name {
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
}

.m365-user-email {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

/* M365 Progress Bar */
.m365-progress-cell {
  min-width: 150px;
}

.m365-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary, #374151);
  border-radius: 4px;
  overflow: hidden;
}

.m365-progress-fill {
  height: 100%;
  background: var(--accent-primary, #3b82f6);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.m365-progress-fill.complete {
  background: var(--m365-color-success);
}

.m365-progress-text {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
}

/* M365 Wizard */
.m365-wizard {
  max-width: 700px;
  margin: 0 auto;
}

.m365-wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  position: relative;
}

.m365-wizard-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: var(--border-color, #374151);
}

.m365-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.m365-step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: var(--bg-tertiary, #374151);
  border: 2px solid var(--border-color, #374151);
  color: var(--text-primary, #e5e7eb);
}

.m365-wizard-step.active .m365-step-number {
  background: var(--accent-primary, #3b82f6);
  border-color: var(--accent-primary, #3b82f6);
  color: white;
}

.m365-wizard-step.completed .m365-step-number {
  background: var(--m365-color-success);
  border-color: var(--m365-color-success);
  color: white;
}

.m365-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
}

.m365-wizard-step.active .m365-step-label {
  color: var(--accent-primary, #3b82f6);
}

.m365-wizard-content {
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 12px;
  padding: 32px;
}

.m365-wizard-content h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text-primary, #e5e7eb);
}

.m365-wizard-content > p {
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 24px;
}

.m365-wizard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color, #374151);
}

/* M365 Form Elements */
.m365-form-group {
  margin-bottom: 20px;
}

.m365-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary, #e5e7eb);
}

.m365-form-control {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary, #e5e7eb);
  outline: none;
  transition: border-color 0.15s ease;
}

.m365-form-control:focus {
  border-color: var(--accent-primary, #3b82f6);
}

select.m365-form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* M365 Radio Group */
.m365-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m365-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.m365-radio-option:hover {
  border-color: var(--accent-primary, #3b82f6);
}

.m365-radio-option.selected {
  border-color: var(--accent-primary, #3b82f6);
  background: var(--m365-color-info-bg);
}

.m365-radio-option input {
  margin-top: 2px;
}

.m365-radio-content h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-primary, #e5e7eb);
}

.m365-radio-content p {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
}

/* M365 Summary Card (Step 4 Confirmation) */
.m365-summary-card {
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.m365-summary-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary, #e5e7eb);
}
.m365-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color, #374151);
}
.m365-summary-row:last-child {
  border-bottom: none;
}
.m365-summary-label {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
}
.m365-summary-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
}
/* M365 Form Hints */
.m365-form-hint {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-top: 6px;
}
/* M365 Radio Description */
.m365-radio-desc {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  margin-top: 4px;
}
/* Loading Spinner Small */
.loading-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
/* Restore Button Style */
.btn-restore {
  display: inline-flex;
  align-items: center;
}
/* Light Theme Overrides */
:root[data-theme="light"] .m365-summary-card {
  background: #f9fafb;
  border-color: #e5e7eb;
}
:root[data-theme="light"] .m365-summary-row {
  border-color: #e5e7eb;
}

/* M365 Alert Banners */

.m365-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.m365-alert-warning {
  background: var(--m365-color-warning-bg);
  border: 1px solid var(--m365-color-warning);
}

.m365-alert-info {
  background: var(--m365-color-info-bg);
  border: 1px solid var(--accent-primary, #3b82f6);
}

.m365-alert-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.m365-alert-warning .m365-alert-icon {
  color: var(--m365-color-warning);
}

.m365-alert-info .m365-alert-icon {
  color: var(--accent-primary, #3b82f6);
}

.m365-alert-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary, #e5e7eb);
}

.m365-alert-content p {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  margin: 0;
}

/* M365 Search Filters Grid */
.m365-search-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* M365 Search Results Banner */
.m365-search-results-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--m365-color-info-bg);
  border: 1px solid var(--accent-primary, #3b82f6);
  border-radius: 8px;
  margin-top: 24px;
}

.m365-search-results-count {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
}

.m365-search-results-count span {
  color: var(--accent-primary, #3b82f6);
}

/* M365 Timeline Picker */
.m365-timeline-picker {
  margin: 24px 0;
}

.m365-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.m365-timeline-track {
  position: relative;
  height: 60px;
  background: var(--bg-tertiary, #374151);
  border-radius: 8px;
  overflow: hidden;
}

.m365-timeline-points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.m365-timeline-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.m365-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-color, #374151);
  margin-bottom: 4px;
}

.m365-timeline-point.express .m365-timeline-dot {
  background: var(--m365-color-success);
  box-shadow: 0 0 0 3px var(--m365-color-success-bg);
}

.m365-timeline-point.selected .m365-timeline-dot {
  background: var(--accent-primary, #3b82f6);
  box-shadow: 0 0 0 3px var(--m365-color-info-bg);
  width: 16px;
  height: 16px;
}

.m365-timeline-date {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* M365 Restore Timeline (Step 2) */
.m365-selected-resource {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary, #1e293b);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color, #374151);
}
.m365-resource-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary, #334155);
  border-radius: 8px;
}
.m365-resource-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m365-resource-details strong {
  font-size: 14px;
  color: var(--text-primary, #e5e7eb);
}
.m365-resource-type {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.m365-restore-timeline {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  overflow-x: auto;
  margin-bottom: 8px;
}
.m365-timeline-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 60px;
  transition: all 0.2s ease;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
}
.m365-timeline-day:hover {
  background: var(--bg-tertiary, #334155);
  border-color: var(--m365-color-info, #3b82f6);
}
.m365-timeline-day.selected {
  background: var(--m365-color-info-bg, rgba(59, 130, 246, 0.15));
  border-color: var(--m365-color-info, #3b82f6);
}
.m365-timeline-day .m365-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted, #6b7280);
}
.m365-timeline-day.has-express .m365-timeline-dot {
  background: var(--m365-color-success, #10b981);
}
.m365-timeline-day.selected .m365-timeline-dot {
  background: var(--m365-color-info, #3b82f6);
  box-shadow: 0 0 0 3px var(--m365-color-info-bg, rgba(59, 130, 246, 0.3));
}
.m365-timeline-day .m365-timeline-label {
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  white-space: nowrap;
}
.m365-timeline-day.selected .m365-timeline-label {
  color: var(--m365-color-info, #3b82f6);
  font-weight: 500;
}
.m365-timeline-legend {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-top: 8px;
}
.m365-timeline-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m365-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted, #6b7280);
  display: inline-block;
}
.m365-dot.selected {
  background: var(--m365-color-info, #3b82f6);
}
.m365-dot.express {
  background: var(--m365-color-success, #10b981);
}
.m365-error-state {
  text-align: center;
  padding: 40px 20px;
}
.m365-error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.m365-error-state h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--m365-color-error, #ef4444);
}
.m365-error-state p {
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 20px;
}
/* Light Theme Overrides for Restore Timeline */
:root[data-theme="light"] .m365-selected-resource {
  background: #f9fafb;
  border-color: #e5e7eb;
}
:root[data-theme="light"] .m365-resource-icon {
  background: #f3f4f6;
}
:root[data-theme="light"] .m365-timeline-day {
  background: #f9fafb;
  border-color: #e5e7eb;
}
:root[data-theme="light"] .m365-timeline-day:hover {
  background: #f3f4f6;
}

/* M365 Empty State */

.m365-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.m365-empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.m365-empty-state h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text-primary, #e5e7eb);
}

.m365-empty-state p {
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 20px;
}

/* M365 Light Theme Overrides */
:root[data-theme="light"] .m365-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

:root[data-theme="light"] .m365-status-content h3,
:root[data-theme="light"] .m365-coverage-meta,
:root[data-theme="light"] .m365-cost-row .label {
  color: #6b7280;
}

:root[data-theme="light"] .m365-status-value,
:root[data-theme="light"] .m365-coverage-label,
:root[data-theme="light"] .m365-coverage-stats,
:root[data-theme="light"] .m365-card-title,
:root[data-theme="light"] .m365-activity-title,
:root[data-theme="light"] .m365-user-name {
  color: #1f2937;
}

:root[data-theme="light"] .m365-table th {
  background: #f9fafb;
  color: #6b7280;
}

:root[data-theme="light"] .m365-table td {
  color: #1f2937;
}

:root[data-theme="light"] .m365-table tbody tr:hover td {
  background: #f3f4f6;
}

:root[data-theme="light"] .m365-wizard-content,
:root[data-theme="light"] .m365-form-control,
:root[data-theme="light"] .m365-radio-option,
:root[data-theme="light"] .m365-activity-item {
  background: #f9fafb;
  border-color: #e5e7eb;
}
:root[data-theme="light"] .m365-wizard-content h3 {
  color: #1f2937;
}
:root[data-theme="light"] .m365-wizard-content > p {
  color: #6b7280;
}
:root[data-theme="light"] .m365-resource-details strong {
  color: #1f2937;
}
:root[data-theme="light"] .m365-resource-type {
  color: #6b7280;
}
:root[data-theme="light"] .m365-form-group > label {
  color: #374151;
}
:root[data-theme="light"] .m365-date-list {
  border-color: #e5e7eb !important;
}
:root[data-theme="light"] .m365-date-row {
  color: #1f2937;
  border-bottom-color: #e5e7eb !important;
}
:root[data-theme="light"] .m365-date-row:hover {
  background: #f3f4f6 !important;
}
:root[data-theme="light"] .m365-date-row-selected {
  background: #3b82f6 !important;
  color: #fff !important;
}
:root[data-theme="light"] .m365-rp-picker {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
:root[data-theme="light"] .m365-rp-picker label {
  color: #1f2937 !important;
}
:root[data-theme="light"] .m365-rp-picker p {
  color: #6b7280 !important;
}
:root[data-theme="light"] .m365-wizard-content .m365-form-group label {
  color: #374151;
}
:root[data-theme="light"] .m365-wizard-content .m365-form-control {
  color: #1f2937;
  background: #fff;
  border-color: #d1d5db;
}
:root[data-theme="light"] .m365-wizard-content .m365-form-control::placeholder {
  color: #9ca3af;
}
:root[data-theme="light"] .m365-wizard-content .m365-form-control option {
  color: #1f2937;
  background: #fff;
}
:root[data-theme="light"] .m365-wizard-content strong {
  color: #1f2937;
}

/* Light theme: Search tab snapshot bar and restore point picker */
:root[data-theme="light"] .m365-wizard-content div[style*="background:var(--bg-secondary"] {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
:root[data-theme="light"] .m365-wizard-content div[style*="background:var(--color-surface"] {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
:root[data-theme="light"] .m365-wizard-content div[style*="color:var(--color-text-muted"] {
  color: #6b7280 !important;
}
:root[data-theme="light"] .m365-wizard-content div[style*="color:var(--color-text,"] {
  color: #1f2937 !important;
}
:root[data-theme="light"] .m365-wizard-content span[style*="color:var(--color-text-muted"] {
  color: #6b7280 !important;
}
:root[data-theme="light"] .m365-wizard-content strong[style*="color:var(--color-text,"] {
  color: #1f2937 !important;
}
:root[data-theme="light"] .m365-wizard-content label[style*="color:var(--color-text,"] {
  color: #1f2937 !important;
}
:root[data-theme="light"] .m365-wizard-content p[style*="color:var(--color-text-muted"] {
  color: #6b7280 !important;
}

/* Dark theme: custom scrollbar for date lists */
[data-theme="dark"] .m365-date-list::-webkit-scrollbar {
  width: 6px;
}
[data-theme="dark"] .m365-date-list::-webkit-scrollbar-track {
  background: #1a1a2e;
  border-radius: 3px;
}
[data-theme="dark"] .m365-date-list::-webkit-scrollbar-thumb {
  background: #4a4a6a;
  border-radius: 3px;
}
[data-theme="dark"] .m365-date-list::-webkit-scrollbar-thumb:hover {
  background: #5a5a7a;
}
[data-theme="dark"] .m365-date-list {
  scrollbar-width: thin;
  scrollbar-color: #4a4a6a #1a1a2e;
}

/* Light theme: scrollbar for date lists */
:root[data-theme="light"] .m365-date-list::-webkit-scrollbar {
  width: 6px;
}
:root[data-theme="light"] .m365-date-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}
:root[data-theme="light"] .m365-date-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
:root[data-theme="light"] .m365-date-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
:root[data-theme="light"] .m365-date-list {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
  border-color: #e2e8f0 !important;
}
:root[data-theme="light"] .m365-date-row {
  border-bottom-color: #e2e8f0 !important;
}

:root[data-theme="light"] .m365-workload-tab {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #1f2937;
}

:root[data-theme="light"] .m365-search-box {
  background: #f9fafb;
  border-color: #e5e7eb;
}

:root[data-theme="light"] .m365-search-box input {
  color: #1f2937;
}

/* M365 Quick Actions - Light Theme Fix */
:root[data-theme="light"] .m365-quick-action-btn {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #1f2937;
}
:root[data-theme="light"] .m365-quick-action-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}
:root[data-theme="light"] .m365-quick-action-label {
  color: #1f2937;
}

/* M365 Coverage Progress Bar - Light Theme Fix */
:root[data-theme="light"] .m365-coverage-progress {
  background: #e5e7eb;
}

/* M365 Workload Tabs - Enhanced Light Theme Fix */
:root[data-theme="light"] .m365-workload-tab:not(.active) {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}
:root[data-theme="light"] .m365-workload-tab.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
:root[data-theme="light"] .m365-workload-tab:hover:not(.active) {
  background: #e5e7eb;
  border-color: #3b82f6;
  color: #1f2937;
}
:root[data-theme="light"] .m365-workload-count {
  background: rgba(0,0,0,0.1);
  color: inherit;
}
:root[data-theme="light"] .m365-workload-tab.active .m365-workload-count {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
}

/* M365 Alert Content - Light Theme Fix */
:root[data-theme="light"] .m365-alert-content h4 {
  color: #1f2937;
}
:root[data-theme="light"] .m365-alert-content p {
  color: #4b5563;
}

/* M365 Form Labels - Light Theme Fix */
:root[data-theme="light"] .m365-form-group label {
  color: #374151;
}
:root[data-theme="light"] .m365-form-control {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1f2937;
}
:root[data-theme="light"] .m365-form-control::placeholder {
  color: #9ca3af;
}

/* ==================== M365 Protection Tab - Task 4.5 ==================== */
.m365-filter-select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--color-text-primary);
  font-size: 14px;
  cursor: pointer;
  min-width: 140px;
}
.m365-filter-select:hover {
  border-color: var(--color-primary);
}
.m365-filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.m365-action-buttons {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.m365-action-buttons .btn-sm {
  padding: 4px 8px;
  min-width: auto;
}
.m365-user-info {
  display: flex;
  flex-direction: column;
}
.m365-user-name {
  font-weight: 500;
  color: var(--color-text-primary);
}
.m365-user-email {
  font-size: 12px;
  color: var(--color-text-muted);
}
/* Light theme overrides */
:root[data-theme="light"] .m365-filter-select {
  background: var(--bg-primary);
  border-color: var(--color-border);
}

/* =============================================================================
   Phase 4.5 Fix: Two-Stage Connection Wizard Styles
   ============================================================================= */

.m365-connection-wizard {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.m365-connection-wizard .m365-wizard-steps {
  max-width: 300px;
  margin: 0 auto 32px;
}

.m365-step-check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #107c10;
  border: 2px solid #107c10;
  color: white;
}

.m365-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(16, 124, 16, 0.1);
  border: 1px solid rgba(16, 124, 16, 0.3);
  border-radius: 20px;
  color: #107c10;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px !important;
}

.m365-connected-badge svg {
  width: 16px;
  height: 16px;
}

.m365-connection-wizard .m365-features-grid {
  text-align: left;
  max-width: 400px;
  margin: 24px auto;
}

.m365-connection-wizard .m365-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.m365-connection-wizard .m365-feature-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent-primary, #3b82f6);
}

.m365-connection-wizard .btn-lg {
  padding: 12px 32px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.m365-connection-wizard .btn-lg svg {
  width: 20px;
  height: 20px;
}

/* Light theme adjustments */
:root[data-theme="light"] .m365-connected-badge {
  background: rgba(16, 124, 16, 0.08);
  border-color: rgba(16, 124, 16, 0.2);
}

:root[data-theme="light"] .m365-connection-wizard .m365-feature-icon svg {
  color: #0078d4;
}

/* =============================================================================
   Phase 4.5 Fix: Add Protection Modal Wizard Styles
   ============================================================================= */

.m365-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.m365-modal-content {
  background: var(--bg-primary, #0f172a);
  border: 1px solid var(--border-color, #374151);
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.m365-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color, #374151);
}

.m365-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
}

.m365-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.m365-modal-close:hover {
  color: var(--text-primary, #e5e7eb);
}

.m365-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.m365-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color, #374151);
}

/* Wizard Steps Horizontal */
.m365-wizard-steps-horizontal {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color, #374151);
}

.m365-wizard-step-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-tertiary, #1e293b);
  color: var(--text-secondary, #9ca3af);
  font-size: 14px;
}

.m365-wizard-step-h.active {
  background: var(--accent-primary, #3b82f6);
  color: white;
}

.m365-wizard-step-h.completed {
  background: #107c10;
  color: white;
}

.m365-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  background: rgba(255,255,255,0.2);
}

/* Workload Selection */
.m365-workload-selection p {
  text-align: center;
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 24px;
}

.m365-workload-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.m365-workload-card {
  background: var(--bg-secondary, #1e293b);
  border: 2px solid var(--border-color, #374151);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.m365-workload-card:hover {
  border-color: var(--accent-primary, #3b82f6);
  background: var(--bg-tertiary, #1e293b);
}

.m365-workload-card.selected {
  border-color: var(--accent-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
}

.m365-workload-icon {
  color: var(--accent-primary, #3b82f6);
  margin-bottom: 12px;
}

.m365-workload-label {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary, #e5e7eb);
  margin-bottom: 4px;
}

.m365-workload-desc {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
}

/* Resources Selection */
.m365-resources-search {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.m365-resources-search input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  color: var(--text-primary, #e5e7eb);
  font-size: 14px;
}

.m365-resources-search input:focus {
  outline: none;
  border-color: var(--accent-primary, #3b82f6);
}

.m365-resources-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color, #374151);
  margin-bottom: 12px;
  color: var(--text-secondary, #9ca3af);
  font-size: 14px;
}

.m365-resources-list {
  max-height: 350px;
  overflow-y: auto;
}

.m365-resource-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color, #374151);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.m365-resource-item:hover {
  background: var(--bg-secondary, #1e293b);
}

.m365-resource-item.checked {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--accent-primary, #3b82f6);
}

.m365-resource-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary, #3b82f6);
}

.m365-resource-info {
  flex: 1;
}

.m365-resource-name {
  font-weight: 500;
  color: var(--text-primary, #e5e7eb);
  font-size: 14px;
}

.m365-resource-email {
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
}

.m365-resource-type {
  font-size: 12px;
  padding: 4px 8px;
  background: var(--bg-tertiary, #374151);
  border-radius: 4px;
  color: var(--text-secondary, #9ca3af);
}

.m365-resources-loading,
.m365-resources-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary, #9ca3af);
}

/* Confirm Step */
.m365-confirm-protection {
  text-align: center;
}

.m365-confirm-summary {
  margin-bottom: 24px;
}

.m365-confirm-icon {
  color: #107c10;
  margin-bottom: 16px;
}

.m365-confirm-summary h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--text-primary, #e5e7eb);
}

.m365-confirm-summary p {
  color: var(--text-secondary, #9ca3af);
}

.m365-cost-estimate {
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border-color, #374151);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.m365-cost-label {
  font-size: 14px;
  color: var(--text-secondary, #9ca3af);
  margin-bottom: 8px;
}

.m365-cost-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #e5e7eb);
}

.m365-cost-note {
  font-size: 12px;
  color: var(--text-secondary, #9ca3af);
  margin-top: 8px;
}

.m365-selected-preview {
  text-align: left;
  background: var(--bg-secondary, #1e293b);
  border-radius: 8px;
  padding: 16px;
}

.m365-preview-header {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #e5e7eb);
  margin-bottom: 12px;
}

.m365-preview-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m365-preview-item {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  padding: 4px 0;
}

.m365-preview-more {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
  padding-top: 8px;
}

/* Light theme */
:root[data-theme="light"] .m365-modal-content {
  background: #ffffff;
  border-color: #e5e7eb;
}

:root[data-theme="light"] .m365-workload-card {
  background: #f9fafb;
  border-color: #e5e7eb;
}

:root[data-theme="light"] .m365-workload-card:hover,
:root[data-theme="light"] .m365-workload-card.selected {
  background: rgba(59, 130, 246, 0.05);
}

:root[data-theme="light"] .m365-resource-item {
  border-color: #e5e7eb;
}

:root[data-theme="light"] .m365-resource-item:hover,
:root[data-theme="light"] .m365-resource-item.checked {
  background: rgba(59, 130, 246, 0.05);
}

:root[data-theme="light"] .m365-cost-estimate,
:root[data-theme="light"] .m365-selected-preview {
  background: #f9fafb;
  border-color: #e5e7eb;
}

/* Responsive */
@media (max-width: 640px) {
  .m365-workload-cards {
    grid-template-columns: 1fr;
  }
  
  .m365-wizard-steps-horizontal {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .m365-wizard-step-h {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ============================================
   ADD PROTECTION WIZARD - STYLING FIX v1
   ============================================ */

/* Soften the wizard step colors */
.m365-wizard-step-h {
  background: var(--bg-tertiary, #374151);
  color: var(--text-secondary, #9ca3af);
  font-weight: 500;
}

.m365-wizard-step-h.active {
  background: var(--accent-primary, #3b82f6);
  color: white;
}

.m365-wizard-step-h.completed {
  background: #22c55e;  /* Softer green instead of #107c10 */
  color: white;
}

/* Light theme wizard overrides */
:root[data-theme="light"] .m365-wizard-steps-horizontal {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .m365-wizard-step-h {
  background: #e2e8f0;
  color: #64748b;
}

:root[data-theme="light"] .m365-wizard-step-h.active {
  background: #2563eb;
  color: white;
}

:root[data-theme="light"] .m365-wizard-step-h.completed {
  background: #16a34a;
  color: white;
}

/* Light theme modal content */
:root[data-theme="light"] .m365-add-protection-wizard {
  background: #ffffff;
  color: #1e293b;
}

:root[data-theme="light"] .m365-modal-header {
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .m365-modal-header h2 {
  color: #1e293b;
}

:root[data-theme="light"] .m365-modal-body {
  color: #374151;
}

:root[data-theme="light"] .m365-modal-footer {
  border-top-color: #e2e8f0;
  background: #f8fafc;
}

/* Light theme workload selection text */
:root[data-theme="light"] .m365-workload-selection p {
  color: #64748b;
}

:root[data-theme="light"] .m365-workload-label {
  color: #1e293b;
}

:root[data-theme="light"] .m365-workload-desc {
  color: #64748b;
}

/* Light theme resources list */
:root[data-theme="light"] .m365-resources-search input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1e293b;
}

:root[data-theme="light"] .m365-resources-search input:focus {
  border-color: #2563eb;
}

:root[data-theme="light"] .m365-resources-summary {
  color: #64748b;
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .m365-resource-item {
  background: #ffffff;
  border-color: #e2e8f0;
}

:root[data-theme="light"] .m365-resource-item:hover {
  background: #f8fafc;
}

:root[data-theme="light"] .m365-resource-item.checked {
  background: rgba(37, 99, 235, 0.08);
  border-color: #2563eb;
}

:root[data-theme="light"] .m365-resource-name {
  color: #1e293b;
}

:root[data-theme="light"] .m365-resource-email {
  color: #64748b;
}

:root[data-theme="light"] .m365-resource-type {
  background: #e2e8f0;
  color: #475569;
}

:root[data-theme="light"] .m365-resources-loading,
:root[data-theme="light"] .m365-resources-empty {
  color: #64748b;
}

/* Light theme confirm step */
:root[data-theme="light"] .m365-confirm-summary h3 {
  color: #1e293b;
}

:root[data-theme="light"] .m365-confirm-summary p {
  color: #64748b;
}

:root[data-theme="light"] .m365-cost-estimate {
  background: #f8fafc;
  border-color: #e2e8f0;
}

:root[data-theme="light"] .m365-cost-value {
  color: #1e293b;
}

:root[data-theme="light"] .m365-cost-label,
:root[data-theme="light"] .m365-cost-note {
  color: #64748b;
}

:root[data-theme="light"] .m365-selected-preview {
  background: #f8fafc;
}

:root[data-theme="light"] .m365-preview-header {
  color: #1e293b;
}

:root[data-theme="light"] .m365-preview-item {
  color: #64748b;
}

/* Button styling in light mode */
:root[data-theme="light"] .m365-modal-footer .btn-secondary {
  background: #f1f5f9;
  color: #475569;
  border-color: #d1d5db;
}

:root[data-theme="light"] .m365-modal-footer .btn-secondary:hover {
  background: #e2e8f0;
}

:root[data-theme="light"] .m365-modal-footer .btn-primary {
  background: #2563eb;
  color: white;
}

:root[data-theme="light"] .m365-modal-footer .btn-primary:hover {
  background: #1d4ed8;
}


/* ==================== PHASE 7F: OWNER TYPE BADGES ==================== */
/* Owner Type Badges - shown next to entity name */
.owner-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 8px;
  vertical-align: middle;
}
.owner-type-badge svg {
  width: 12px;
  height: 12px;
}
.badge-company {
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
}
.badge-trust {
  background: rgba(168, 85, 247, 0.15);
  color: #A855F7;
}
.badge-trust-sub {
  font-size: 9px;
  padding: 1px 4px;
  margin-left: 2px;
  border-radius: 3px;
  background: rgba(168, 85, 247, 0.25);
  color: #C084FC;
}
/* Filter sidebar badges */
.filter-checkbox .badge-company,
.filter-checkbox .badge-trust {
  padding: 2px 6px;
  font-size: 11px;
}
/* Trust subtypes in filter (indented) */
.filter-checkbox-sub {
  font-size: 12px;
}
.filter-trust-subtypes {
  border-left: 2px solid var(--dm-border-color);
  padding-left: 12px;
}
/* Entity drawer corporate/trust sections */
.dm-corporate-section,
.dm-trust-section {
  padding: 16px;
  border-bottom: 1px solid var(--dm-border-color);
}
.dm-corporate-section h4,
.dm-trust-section h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dm-text-secondary);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dm-corporate-section h4 svg,
.dm-trust-section h4 svg {
  width: 14px;
  height: 14px;
}
.dm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.dm-detail-label {
  color: var(--dm-text-secondary);
}
.dm-detail-value {
  color: var(--dm-text-primary);
  font-weight: 500;
}
.dm-detail-value.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}
/* Override indicator */
.dm-override-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  margin-top: 12px;
  font-size: 12px;
}
.dm-override-indicator svg {
  width: 14px;
  height: 14px;
  color: #F59E0B;
}
.dm-override-indicator .override-label {
  color: #F59E0B;
  font-weight: 600;
}
.dm-override-indicator .override-meta {
  color: var(--dm-text-secondary);
  font-size: 11px;
}
/* Light theme adjustments */
:root[data-theme="light"] .badge-company {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
}
:root[data-theme="light"] .badge-trust {
  background: rgba(168, 85, 247, 0.12);
  color: #9333EA;
}
:root[data-theme="light"] .badge-trust-sub {
  background: rgba(168, 85, 247, 0.18);
  color: #7C3AED;
}
:root[data-theme="light"] .filter-trust-subtypes {
  border-left-color: #e5e7eb;
}
:root[data-theme="light"] .dm-override-indicator {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}


/* M365 Search - Snapshot bar */
.m365-snapshot-bar {
  background: #1e293b;
  border: 1px solid #374151;
}
.m365-snapshot-label {
  color: #9ca3af;
}
.m365-snapshot-time {
  color: #e5e7eb;
}
:root[data-theme="light"] .m365-snapshot-bar {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
:root[data-theme="light"] .m365-snapshot-label {
  color: #6b7280 !important;
}
:root[data-theme="light"] .m365-snapshot-time {
  color: #1f2937 !important;
}
:root[data-theme="light"] .m365-rp-picker label {
  color: #1f2937 !important;
}

/* Fix: sidebar.expanded should stay hidden on mobile unless mobile-open */
@media (max-width: 768px) {
  .sidebar.expanded:not(.mobile-open) {
    transform: translateX(-100%);
  }
}

/* Fix: collapse chevron removes expanded but leaves mobile-open — hide unless both */
@media (max-width: 768px) {
  .sidebar.mobile-open:not(.expanded) {
    transform: translateX(-100%);
  }
}

/* SEARCH TABS Phase 4 */
.search-tab-bar { display:flex; gap:0.25rem; margin-bottom:1.25rem; padding:0.25rem; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; }
.search-tab-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.625rem 1rem; border:none; border-radius:8px; background:transparent; color:var(--text-muted); font-size:0.8125rem; font-weight:500; cursor:pointer; transition:all 0.2s; }
.search-tab-btn:hover { background:var(--surface-2); color:var(--text-primary); }
.search-tab-btn.active { background:var(--accent,#3b82f6); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.search-tab-btn svg { opacity:0.7; } .search-tab-btn.active svg { opacity:1; stroke:#fff; }
.search-tab-panel { min-height:200px; }
.stabs-loading { display:flex; align-items:center; gap:0.75rem; padding:2rem; justify-content:center; color:var(--text-muted); }
.stabs-spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--accent,#3b82f6); border-radius:50%; animation:stabs-spin 0.6s linear infinite; }
@keyframes stabs-spin { to { transform:rotate(360deg); } }
.stabs-empty { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.stabs-empty p { margin:0.25rem 0; } .stabs-hint { font-size:0.8125rem; opacity:0.7; }
.stabs-count { font-size:0.8125rem; color:var(--text-muted); margin-bottom:0.75rem; font-weight:500; }
.stabs-section-title { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin:1.25rem 0 0.5rem; }
.stabs-cards { display:flex; flex-direction:column; gap:0.5rem; }
.stabs-card { display:flex; align-items:flex-start; gap:0.75rem; padding:0.875rem 1rem; background:var(--surface-1); border:1px solid var(--border); border-radius:8px; transition:border-color 0.15s,box-shadow 0.15s; }
.stabs-card:hover { border-color:var(--accent,#3b82f6); box-shadow:0 1px 4px rgba(59,130,246,0.1); }
.stabs-card-icon { flex-shrink:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-radius:6px; color:var(--text-muted); }
.stabs-card-contact .stabs-card-icon { background:#dbeafe; color:#2563eb; }
.stabs-card-property .stabs-card-icon { background:#dcfce7; color:#16a34a; }
.stabs-card-case .stabs-card-icon { background:#f3e8ff; color:#7c3aed; }
.stabs-card-body { flex:1; min-width:0; }
.stabs-card-title { font-weight:600; font-size:0.875rem; color:var(--text-primary); }
.stabs-card-title mark,.stabs-card-meta mark { background:#fef08a; color:inherit; border-radius:2px; padding:0 1px; }
.stabs-card-meta { font-size:0.8125rem; color:var(--text-muted); margin-top:0.125rem; }
.stabs-card-tags { display:flex; flex-wrap:wrap; gap:0.375rem; margin-top:0.5rem; }
.stabs-tag { display:inline-flex; padding:0.125rem 0.5rem; font-size:0.6875rem; font-weight:600; border-radius:4px; text-transform:uppercase; letter-spacing:0.03em; }
.stabs-tag-cdd { background:#e0e7ff; color:#4338ca; border:1px solid #c7d2fe; }
.stabs-tag-risk-medium { background:#fef3c7; color:#d97706; border:1px solid #fde68a; }
.stabs-tag-risk-high { background:#fee2e2; color:#dc2626; border:1px solid #fecaca; }
.stabs-tag-risk-very_high { background:#fecaca; color:#991b1b; border:1px solid #f87171; }
.stabs-tag-rex { background:#d1fae5; color:#059669; border:1px solid #a7f3d0; }
.stabs-facets { margin-bottom:0.75rem; }
.stabs-pills-row { display:flex; flex-wrap:wrap; gap:0.375rem; align-items:center; }
.stabs-pill-label { font-size:0.75rem; font-weight:600; color:var(--text-muted); margin-right:0.25rem; }
.stabs-pill-sep { color:var(--border); margin:0 0.375rem; }
.cases-filter-pill { display:inline-flex; gap:0.25rem; padding:0.25rem 0.625rem; font-size:0.75rem; font-weight:500; border:1px solid var(--border); border-radius:999px; background:var(--surface-1); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; }
.cases-filter-pill:hover { border-color:var(--accent,#3b82f6); }
.cases-filter-pill.active { background:var(--accent,#3b82f6); color:#fff; border-color:var(--accent,#3b82f6); }
.stabs-pill-count { font-size:0.6875rem; opacity:0.8; }
/* Horizontal filters */
#search-panel-sources { width:100%; }
#page-search .search-layout { display:flex !important; flex-direction:column !important; gap:0.75rem !important; grid-template-columns:1fr !important; }
#page-search .search-filters { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-start; padding:0.75rem 1rem; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; width:100%; }
#page-search .filter-section { display:flex; align-items:center; gap:0.5rem; margin:0!important; padding:0!important; border:none!important; }
#page-search .filter-title { margin:0!important; white-space:nowrap; font-size:0.6875rem; }
#page-search .filter-options { display:flex; flex-wrap:wrap; gap:0.25rem; }
#page-search .filter-option { display:inline-flex; align-items:center; gap:0.25rem; padding:0.2rem 0.5rem; font-size:0.75rem; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); cursor:pointer; white-space:nowrap; }
#page-search .filter-option:hover { border-color:var(--accent,#3b82f6); }
#page-search .filter-option input[type="radio"],#page-search .filter-option input[type="checkbox"] { width:0;height:0;opacity:0;position:absolute; }
#page-search .filter-option:has(input:checked) { background:var(--accent,#3b82f6); color:#fff; border-color:var(--accent,#3b82f6); }
#page-search .filter-date-inputs { display:flex; align-items:center; gap:0.25rem; }
#page-search .filter-date { font-size:0.75rem; padding:0.25rem 0.5rem; border-radius:6px; max-width:130px; }
#page-search .filter-date-separator { font-size:0.75rem; color:var(--text-muted); }
#page-search .filter-toggle { font-size:0.75rem; }
#page-search .filter-reset-btn { font-size:0.6875rem; padding:0.25rem 0.75rem; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; }
#page-search .search-results-area { width:100%; }
/* Drawer */
.stabs-drawer { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; pointer-events:none; }
.stabs-drawer.open { pointer-events:auto; }
.stabs-drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.4); opacity:0; transition:opacity 0.3s; }
.stabs-drawer.open .stabs-drawer-backdrop { opacity:1; }
.stabs-drawer-panel { position:absolute; top:0; right:-420px; width:400px; max-width:90vw; height:100%; background:var(--surface-1,#fff); border-left:1px solid var(--border); box-shadow:-4px 0 20px rgba(0,0,0,0.15); display:flex; flex-direction:column; transition:right 0.3s ease; }
.stabs-drawer.open .stabs-drawer-panel { right:0; }
.stabs-drawer-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.stabs-drawer-header h3 { margin:0; font-size:1rem; font-weight:600; }
.stabs-drawer-close { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-muted); }
.stabs-drawer-body { flex:1; overflow-y:auto; padding:1.25rem; }
.stabs-drawer-content { display:flex; flex-direction:column; gap:0.875rem; }
.stabs-drawer-field { display:flex; flex-direction:column; gap:0.25rem; }
.stabs-drawer-field label { font-size:0.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.stabs-drawer-field span { font-size:0.875rem; color:var(--text-primary); }
.stabs-drawer-actions { display:flex; flex-direction:column; gap:0.5rem; padding:1.25rem; border-top:1px solid var(--border); }
.stabs-drawer-btn { padding:0.625rem 1rem; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-primary); font-size:0.8125rem; font-weight:500; cursor:pointer; text-align:center; }
.stabs-drawer-btn-primary { background:var(--accent,#3b82f6); color:#fff; border-color:var(--accent,#3b82f6); }
.stabs-rex-link { flex-shrink:0; font-size:0.75rem; font-weight:500; color:var(--accent,#3b82f6); text-decoration:none; white-space:nowrap; }
.stabs-rex-link:hover { text-decoration:underline; }

/* FORCE full-width filters — high specificity override */
body #page-search .search-layout {
  display: block !important;
}
body #page-search .search-layout > .search-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 1rem;
}
body #page-search .search-layout > .search-results-area {
  width: 100% !important;
}

/* NUCLEAR: Kill sidebar grid, force full-width horizontal */
#page-search #search-panel-sources .search-layout {
}
#page-search #search-panel-sources .search-layout > aside.search-filters {
}

/* Phase 4: Extracted source filter bar — NOT inside the grid */
.stabs-source-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}
.stabs-sf-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.stabs-sf-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}
.stabs-sf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.stabs-sf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.625rem;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.stabs-sf-pill:hover { border-color: var(--accent, #3b82f6); }
.stabs-sf-pill input[type="radio"],
.stabs-sf-pill input[type="checkbox"] {
  width: 0; height: 0; opacity: 0; position: absolute; pointer-events: none;
}
.stabs-sf-pill:has(input:checked) {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: var(--accent, #3b82f6);
}
.stabs-sf-toggle { font-size: 0.75rem; }
.stabs-sf-dates {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.stabs-sf-date {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
  max-width: 125px;
}
.stabs-sf-sep { font-size: 0.75rem; color: var(--text-muted); }
.stabs-sf-reset {
  font-size: 0.6875rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  margin-left: auto;
}
.stabs-sf-reset:hover { border-color: var(--accent); color: var(--text-primary); }

/* Hide old sidebar filter (now removed from HTML but just in case) */
#page-search aside.search-filters { display: none !important; }

/* ============================================================================
   Option A: Linear-style search filter pills (Phase 4)
   ============================================================================ */
.srchf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-1, var(--color-background-secondary));
  border: 0.5px solid var(--border, var(--color-border-tertiary));
  border-radius: 10px;
  margin-bottom: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}
.srchf-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.srchf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.srchf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 0.5px solid var(--border, var(--color-border-secondary));
  border-radius: 6px;
  background: var(--surface-2, var(--color-background-primary));
  color: var(--text-secondary, var(--color-text-secondary));
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  line-height: 1.4;
}
.srchf-pill:hover {
  border-color: var(--accent, #3b82f6);
  color: var(--text-primary, var(--color-text-primary));
}
.srchf-pill input[type="radio"],
.srchf-pill input[type="checkbox"] {
  width: 0; height: 0; opacity: 0; position: absolute; pointer-events: none;
}
.srchf-pill:has(input:checked),
.srchf-pill.active {
  background: #EAF3DE;
  color: #3B6D11;
  border-color: #97C459;
}
[data-theme="dark"] .srchf-pill:has(input:checked),
[data-theme="dark"] .srchf-pill.active {
  background: rgba(99,153,34,0.15);
  color: #97C459;
  border-color: rgba(99,153,34,0.4);
}
.srchf-pill .srchf-cnt {
  font-size: 10px;
  opacity: 0.55;
  font-weight: 400;
}
.srchf-sep {
  width: 0.5px;
  height: 20px;
  background: var(--border, var(--color-border-tertiary));
  margin: 0 4px;
  flex-shrink: 0;
}
.srchf-toggle {
  background: #E1F5EE;
  color: #0F6E56;
  border-color: #5DCAA5;
}
[data-theme="dark"] .srchf-toggle {
  background: rgba(29,158,117,0.12);
  color: #5DCAA5;
  border-color: rgba(93,202,165,0.3);
}
.srchf-toggle:has(input:not(:checked)) {
  background: var(--surface-2, var(--color-background-primary));
  color: var(--text-secondary, var(--color-text-secondary));
  border-color: var(--border, var(--color-border-tertiary));
}
.srchf-date {
  font-size: 11px;
  padding: 3px 8px;
  border: 0.5px solid var(--border, var(--color-border-tertiary));
  border-radius: 6px;
  background: var(--surface-2, var(--color-background-primary));
  color: var(--text-primary, var(--color-text-primary));
  max-width: 120px;
}
.srchf-datesep {
  font-size: 11px;
  color: var(--text-muted, var(--color-text-tertiary));
  opacity: 0.5;
}
.srchf-reset {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, var(--color-text-tertiary));
  cursor: pointer;
  margin-left: auto;
}
.srchf-reset:hover {
  background: var(--surface-2, var(--color-background-secondary));
  color: var(--text-primary, var(--color-text-primary));
}

/* Override SearchAPI's dynamic facet rendering to match pill style */
#search-facets-source .filter-option,
#search-facets-type .filter-option {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 0.5px solid var(--border, var(--color-border-secondary));
  border-radius: 6px;
  background: var(--surface-2, var(--color-background-primary));
  color: var(--text-secondary, var(--color-text-secondary));
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  margin: 0;
}
#search-facets-source .filter-option:hover,
#search-facets-type .filter-option:hover {
  border-color: var(--accent, #3b82f6);
}
#search-facets-source .filter-option input[type="radio"],
#search-facets-type .filter-option input[type="radio"] {
  width: 0; height: 0; opacity: 0; position: absolute;
}
#search-facets-source .filter-option:has(input:checked),
#search-facets-type .filter-option:has(input:checked) {
  background: #EAF3DE;
  color: #3B6D11;
  border-color: #97C459;
}
[data-theme="dark"] #search-facets-source .filter-option:has(input:checked),
[data-theme="dark"] #search-facets-type .filter-option:has(input:checked) {
  background: rgba(99,153,34,0.15);
  color: #97C459;
  border-color: rgba(99,153,34,0.4);
}

/* Kill any old sidebar/grid artifacts */
#page-search aside.search-filters { display: none !important; }