/* Dashboard Layout Styles - V2 ExpediteWAF Theme */
:root {
  --sidebar-width: 220px;
  /* Light mode sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-text: #64748b;
  --sidebar-active: #1e293b;
  --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
  --sidebar-active-bg: rgba(59, 130, 246, 0.1);
  --sidebar-active-border: #3b82f6;
  --sidebar-border: #e2e8f0;
  --main-bg: #f1f5f9;
  --card-bg: #fff;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --brand-primary: #3b82f6;
  --mobile-header-height: 56px;
  --content-padding: 20px;
}

/* Base Reset */
.dashboard-layout {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--main-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

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

/* Mobile Header */
.dashboard-mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mobile-header-height);
  background-color: var(--sidebar-bg);
  z-index: 1001;
  padding: 0 16px;
  align-items: center;
  gap: 16px;
}

.sidebar-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  gap: 5px;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background-color: var(--sidebar-active);
  transition: transform 0.3s ease;
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sidebar-active);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

/* Sidebar Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Sidebar - V2 Compact Style */
.dashboard-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border, var(--border-color));
  display: flex;
  flex-direction: column;
  z-index: 999;
  overflow-y: auto;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--sidebar-border, var(--border-color));
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sidebar-active);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.sidebar-brand img {
  border-radius: 6px;
  width: 28px;
  height: 28px;
}

/* Navigation - Tighter V2 */
.sidebar-nav {
  flex: 1;
  padding: 12px 0;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 2px 8px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-active);
}

.nav-link.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}

.nav-link.active .nav-icon,
.nav-link:hover .nav-icon {
  opacity: 1;
}

/* Sidebar Footer - Compact */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--sidebar-border, var(--border-color));
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin-bottom: 8px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-email {
  display: block;
  color: var(--sidebar-text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.logout-link:hover {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Main Content Area */
.dashboard-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: var(--content-padding);
  background-color: var(--main-bg);
  transition: background-color 0.2s ease;
}

/* Dashboard Header - V2 Compact */
.dashboard-header {
  margin-bottom: 20px;
}

.dashboard-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.dashboard-header p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 15px;
}

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

@media (max-width: 768px) {
  .dashboard-header-row {
    flex-direction: column;
    gap: 16px;
  }

  .dashboard-header-row .btn {
    width: 100%;
  }
}

/* Dashboard Cards */
.dashboard-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}

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

.dashboard-card-body {
  padding: 16px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 24px;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  color: var(--text-secondary);
  opacity: 0.5;
}

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

.empty-state p {
  color: var(--text-secondary);
  margin: 0 0 24px 0;
  font-size: 15px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons */
.dashboard-layout .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.dashboard-layout .btn:active {
  transform: scale(0.98);
}

.dashboard-layout .btn-primary {
  background-color: var(--brand-primary);
  color: #fff;
}

.dashboard-layout .btn-primary:hover {
  background-color: #2563eb;
  color: #fff;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

.btn-icon {
  width: 18px;
  height: 18px;
}

/* Domain List Header */
.domain-list-header {
  display: grid;
  grid-template-columns: 1fr 120px 100px;
  align-items: center;
  padding: 10px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.domain-list-header-domain {
  text-align: left;
}

.domain-list-header-reports {
  text-align: center;
}

.domain-list-header-status {
  text-align: right;
}

/* Domain List */
.domain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.domain-item {
  display: grid;
  grid-template-columns: 1fr 120px 100px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
}

.domain-item:last-child {
  border-bottom: none;
}

.domain-name {
  font-weight: 500;
  color: var(--text-primary);
}

.domain-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 100px;
}

.domain-status.configured {
  background-color: #dcfce7;
  color: #166534;
}

.domain-status.pending {
  background-color: #fef3c7;
  color: #92400e;
}

/* Status Badges (ExpediteWAF style) */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.status-badge.active {
  background-color: #22c55e;
  color: #ffffff;
}

.status-badge.inactive {
  background-color: #374151;
  color: #9ca3af;
}

/* Dark mode adjustments for status badges */
[data-theme="dark"] .status-badge.inactive {
  background-color: #4b5563;
  color: #d1d5db;
}

/* Domain Favicon */
.domain-favicon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 5px;
  background-color: #fef3c7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.domain-favicon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
}

.domain-favicon-fallback {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
}

/* Dark mode favicon background */
[data-theme="dark"] .domain-favicon-wrapper {
  background-color: #374151;
}

/* Domain Info and Meta */
.domain-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.domain-reports-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.domain-status-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.domain-reports,
.domain-alerts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.domain-reports svg,
.domain-alerts svg {
  opacity: 0.7;
}

.domain-alerts {
  color: #f59e0b;
}

.domain-alerts svg {
  stroke: #f59e0b;
  opacity: 1;
}

/* Stat value with alerts */
.stat-value.has-alerts {
  color: #f59e0b;
}

/* Email Activity Chart */
.chart-card {
  margin-bottom: 24px;
}

.chart-card .dashboard-card-body {
  padding: 16px;
}

.chart-timeframe {
  font-size: 12px;
  color: var(--text-secondary);
}

.chart-container {
  padding: 8px 0 0 0;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 120px;
  margin-bottom: 8px;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar-wrapper {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chart-bar-stack {
  width: 100%;
  max-width: 40px;
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.chart-bar {
  width: 100%;
  min-height: 2px;
  transition: height 0.3s ease;
}

.chart-bar.passed {
  background-color: #22c55e;
}

.chart-bar.failed {
  background-color: #ef4444;
}

.chart-bar-empty {
  width: 100%;
  max-width: 40px;
  height: 4px;
  background-color: var(--border-color);
  border-radius: 2px;
}

.chart-bar-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  text-align: center;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.passed {
  background-color: #22c55e;
}

.legend-color.failed {
  background-color: #ef4444;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

/* Alerts */
.dashboard-main .alert {
  padding: 14px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 14px;
}

.dashboard-main .alert-success {
  background-color: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.dashboard-main .alert-danger {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

/* Dark mode alerts */
[data-theme="dark"] .dashboard-main .alert-success {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

[data-theme="dark"] .dashboard-main .alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Page Title */
.page-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  text-align: center;
}

.page-coming-soon h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.page-coming-soon p {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 500px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-main {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .dashboard-mobile-header {
    display: flex;
  }

  .sidebar-overlay {
    display: block;
  }

  .dashboard-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

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

  .dashboard-main {
    margin-left: 0;
    padding: 16px;
    padding-top: calc(var(--mobile-header-height) + 16px);
  }

  .dashboard-header h1 {
    font-size: 24px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .dashboard-card-header {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dashboard-card-body {
    padding: 16px;
  }

  .empty-state {
    padding: 40px 16px;
  }

  .empty-state-icon {
    width: 64px;
    height: 64px;
  }

  .dashboard-layout .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .domain-list-header {
    display: none;
  }

  .domain-item {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .domain-reports-col {
    display: none;
  }
}

/* Domain Form Styles */
.domain-form {
  max-width: 500px;
}

.domain-form .form-group {
  margin-bottom: 24px;
}

.domain-form .form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.domain-form .form-control {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.domain-form .form-control:focus {
  border-color: var(--brand-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.domain-form .help-text {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.btn-secondary {
  background-color: #f1f5f9;
  color: var(--text-primary);
}

.btn-secondary:hover {
  background-color: #e2e8f0;
}

/* Domain Show Page Styles */
.header-with-back {
  margin-bottom: 16px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--brand-primary);
}

.back-icon {
  width: 18px;
  height: 18px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 100px;
}

.status-success {
  background-color: #dcfce7;
  color: #166534;
}

.status-pending {
  background-color: #fef3c7;
  color: #92400e;
}

/* Setup Instructions */
.setup-instructions h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 12px;
}

.setup-instructions h3:first-child {
  margin-top: 0;
}

.setup-instructions p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.info-box {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.info-box strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.info-box-warning {
  background-color: #fffbeb;
  border-color: #fcd34d;
}

.info-box-warning strong {
  color: #92400e;
}

.code-block {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #1e293b;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 8px;
}

.code-block code {
  flex: 1;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  color: #e2e8f0;
  word-break: break-all;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.copy-icon {
  width: 14px;
  height: 14px;
}

.hint-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  margin-bottom: 0;
}

/* Domain Item Links */
.domain-item-link {
  text-decoration: none;
  display: block;
}

.domain-item-link .domain-item {
  transition: background-color 0.2s ease;
  margin: 0 -16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}

.domain-item-link:last-child .domain-item {
  border-bottom: none;
}

.domain-item-link .domain-item:hover {
  background-color: #f8fafc;
}

[data-theme="dark"] .domain-item-link .domain-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.domain-item-link .domain-name {
  color: var(--brand-primary);
}

.domain-item-link .domain-item:hover .domain-name {
  text-decoration: underline;
}

/* DMARC Check Results */
.check-results {
  margin-top: 24px;
  margin-bottom: 24px;
}

.check-result {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.check-result:last-child {
  margin-bottom: 0;
}

.check-result-icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
}

.check-result-content {
  flex: 1;
}

.check-result-content strong {
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
}

.check-result-content p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
}

.check-result-content p:last-child {
  margin-bottom: 0;
}

.check-result-success {
  background-color: #dcfce7;
  border: 1px solid #86efac;
}

.check-result-success .check-result-icon {
  color: #166534;
}

.check-result-success strong {
  color: #166534;
}

.check-result-success p {
  color: #166534;
}

.check-result-warning {
  background-color: #fef3c7;
  border: 1px solid #fcd34d;
}

.check-result-warning .check-result-icon {
  color: #92400e;
}

.check-result-warning strong {
  color: #92400e;
}

.check-result-warning p {
  color: #92400e;
}

.check-result-error {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
}

.check-result-error .check-result-icon {
  color: #991b1b;
}

.check-result-error strong {
  color: #991b1b;
}

.check-result-error p {
  color: #991b1b;
}

.check-detail {
  font-size: 13px !important;
}

.check-detail code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
}

.check-note {
  font-size: 13px !important;
  font-style: italic;
  opacity: 0.9;
}

.code-block-inline {
  display: block;
  margin-top: 8px;
  background-color: #1e293b;
  border-radius: 6px;
  padding: 12px 16px;
  overflow-x: auto;
}

.code-block-inline code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  color: #e2e8f0;
  word-break: break-all;
  background: none;
  padding: 0;
}

/* Button with icon */
.btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Search Form */
.search-form {
  display: flex;
  align-items: center;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 1;
}

.search-input-wrapper .search-input {
  width: 250px;
  padding: 8px 36px 8px 40px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-wrapper .search-input:focus {
  border-color: var(--brand-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.search-input-wrapper .search-input::placeholder {
  color: var(--text-secondary);
}

.search-clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.search-clear:hover {
  color: var(--text-primary);
}

.search-clear svg {
  width: 16px;
  height: 16px;
}

/* Domains Table */
.domains-table-wrapper {
  overflow-x: auto;
  margin: 0 -24px;
}

.domains-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.domains-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: #f8fafc;
  border-bottom: 1px solid var(--border-color);
}

.domains-table th:first-child {
  padding-left: 24px;
}

.domains-table th:last-child {
  padding-right: 24px;
  width: 48px;
}

.domains-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.domains-table td:first-child {
  padding-left: 24px;
}

.domains-table td:last-child {
  padding-right: 24px;
}

.domain-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.domain-row:hover {
  background-color: #f8fafc;
}

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

.domain-name-cell {
  font-weight: 500;
}

.domain-link {
  color: var(--brand-primary);
  text-decoration: none;
}

.domain-link:hover {
  text-decoration: underline;
}

.date-cell {
  color: var(--text-secondary);
}

.action-cell {
  text-align: right;
}

.view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.view-link:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.view-link svg {
  width: 18px;
  height: 18px;
}

/* Domain name with favicon */
.domain-name-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Table column alignment */
.domains-table th.text-right,
.domains-table td.text-right {
  text-align: right;
}

/* Reports cell */
.reports-cell {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* Alerts cell */
.alerts-cell {
  font-variant-numeric: tabular-nums;
}

.alerts-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dc2626;
  font-weight: 500;
}

.alerts-count svg {
  color: #dc2626;
}

.alerts-none {
  color: var(--text-secondary);
}

/* Policy Badge */
.policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
}

.policy-reject {
  background-color: #dcfce7;
  color: #166534;
}

.policy-quarantine {
  background-color: #fef3c7;
  color: #92400e;
}

.policy-none {
  background-color: #fee2e2;
  color: #991b1b;
}

.policy-unknown {
  background-color: #f1f5f9;
  color: var(--text-secondary);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
}

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

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

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagination-btn:hover:not(.disabled) {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.pagination-btn.disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-btn svg {
  width: 16px;
  height: 16px;
}

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

.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagination-page:hover:not(.active) {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.pagination-page.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Domain Header Row */
.domain-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.domain-header-row h1 {
  margin: 0;
}

/* Danger Button */
.btn-danger-outline {
  background-color: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
}

.btn-danger-outline:hover {
  background-color: #dc2626;
  color: #fff;
}

.btn-danger {
  background-color: #dc2626;
  color: #fff;
}

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

/* Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
}

.modal-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 450px;
  width: 100%;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

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

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background-color: #f1f5f9;
  color: var(--text-primary);
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

.modal-body {
  padding: 24px;
}

.modal-body p {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0 0 12px;
  line-height: 1.6;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-warning {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background-color: #f8fafc;
  border-radius: 0 0 12px 12px;
}

.modal-footer form {
  display: inline;
}

/* Responsive adjustments for domain list */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .search-input-wrapper .search-input {
    width: 100%;
  }

  .domains-table-wrapper {
    margin: 0 -16px;
  }

  .domains-table th:first-child,
  .domains-table td:first-child {
    padding-left: 16px;
  }

  .domains-table th:last-child,
  .domains-table td:last-child {
    padding-right: 16px;
  }

  .pagination {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .pagination-info {
    text-align: center;
  }

  .pagination-controls {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pagination-pages {
    order: -1;
    width: 100%;
    justify-content: center;
  }

  .domain-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .domain-header-row .btn {
    width: 100%;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn,
  .modal-footer form {
    width: 100%;
  }

  .modal-footer form .btn {
    width: 100%;
  }
}

/* Settings Page Styles */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-card {
  max-width: 600px;
}

.settings-form .form-group {
  margin-bottom: 20px;
}

.settings-form .form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.settings-form .form-control {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-form .form-control:focus {
  border-color: var(--brand-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.settings-form .help-text {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-form .form-actions {
  margin-top: 20px;
}

/* Theme Options */
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.theme-option {
  cursor: pointer;
}

.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background-color: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-option:hover .theme-option-content {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}

.theme-option.selected .theme-option-content,
.theme-option input[type="radio"]:checked + .theme-option-content {
  border-color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.theme-icon {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}

.theme-option.selected .theme-icon,
.theme-option input[type="radio"]:checked + .theme-option-content .theme-icon {
  color: var(--brand-primary);
}

.theme-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.theme-description {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

/* Delete Account Danger Card */
.settings-card-danger {
  border-color: #fca5a5;
}

.settings-card-danger .dashboard-card-header {
  border-bottom-color: #fca5a5;
}

.settings-card-danger h2 {
  color: #dc2626;
}

.danger-warning {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px;
  line-height: 1.6;
}

/* Delete Account Form in Modal */
.delete-account-form .form-group {
  margin-top: 16px;
  margin-bottom: 0;
}

.delete-account-form .form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.delete-account-form .form-control {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.delete-account-form .form-control:focus {
  border-color: var(--brand-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Responsive Settings */
@media (max-width: 768px) {
  .settings-card {
    max-width: 100%;
  }

  .theme-options {
    grid-template-columns: 1fr;
  }

  .theme-option-content {
    flex-direction: row;
    padding: 16px;
    gap: 16px;
  }

  .theme-icon {
    width: 24px;
    height: 24px;
  }

  .theme-option-content > *:not(.theme-icon) {
    text-align: left;
  }

  .theme-description {
    text-align: left;
  }
}

/* Dark Theme Variables - V2 ExpediteWAF Style */
[data-theme="dark"] {
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-active: #f1f5f9;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-active-bg: rgba(59, 130, 246, 0.15);
  --sidebar-active-border: #3b82f6;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --main-bg: #0f172a;
  --card-bg: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.08);
  --brand-primary: #3b82f6;
}

/* Dark mode - ensure main content uses dark bg */
[data-theme="dark"] .dashboard-main {
  background-color: var(--main-bg);
}

[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .status-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .overview-card,
[data-theme="dark"] .chart-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .dashboard-card-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .dashboard-header h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .dashboard-header p,
[data-theme="dark"] .overview-label,
[data-theme="dark"] .metric-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-form .form-control,
[data-theme="dark"] .delete-account-form .form-control {
  background-color: var(--main-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .theme-option-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .theme-option:hover .theme-option-content {
  border-color: #4a5568;
  background-color: #2d3748;
}

[data-theme="dark"] .domains-table th {
  background-color: #2d3748;
}

[data-theme="dark"] .domain-row:hover {
  background-color: #2d3748;
}

[data-theme="dark"] .alerts-count {
  color: #f87171;
}

[data-theme="dark"] .alerts-count svg {
  color: #f87171;
}

[data-theme="dark"] .modal-container {
  background-color: var(--card-bg);
}

[data-theme="dark"] .modal-footer {
  background-color: #2d3748;
}

[data-theme="dark"] .info-box {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .search-input-wrapper .search-input {
  background-color: var(--main-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .pagination-btn,
[data-theme="dark"] .pagination-page {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .pagination-btn:hover:not(.disabled),
[data-theme="dark"] .pagination-page:hover:not(.active) {
  background-color: #2d3748;
  border-color: #4a5568;
}

/* Domain Overview Grid */
.domain-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.overview-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 14px;
}

.overview-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.overview-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.overview-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.overview-value {
  margin-bottom: 4px;
}

.overview-value .policy-badge {
  font-size: 13px;
  padding: 4px 8px;
}

.pass-rate-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.pass-rate-excellent,
.rate-good {
  color: #22c55e;
}

.pass-rate-good {
  color: #3b82f6;
}

.pass-rate-warning,
.rate-warning {
  color: #f59e0b;
}

.pass-rate-danger,
.rate-danger {
  color: #ef4444;
}

.pass-rate-none {
  color: var(--text-secondary);
}

.email-count-value,
.sources-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.no-data-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.2;
}

.overview-subtext {
  font-size: 13px;
  color: var(--text-secondary);
}

.sources-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.sources-authorized {
  color: #16a34a;
}

.sources-unauthorized {
  color: #dc2626;
}

/* No Data Card */
.no-data-card {
  margin-bottom: 24px;
}

.no-data-message {
  text-align: center;
  padding: 32px 24px;
}

.no-data-icon {
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  opacity: 0.6;
}

.no-data-message h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.no-data-message p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Responsive Domain Overview */
@media (max-width: 1200px) {
  .domain-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .domain-overview-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .overview-card {
    padding: 16px;
  }

  .pass-rate-value,
  .email-count-value,
  .sources-value,
  .no-data-value {
    font-size: 28px;
  }
}

/* Dark theme for domain overview */
[data-theme="dark"] .pass-rate-excellent {
  color: #22c55e;
}

[data-theme="dark"] .pass-rate-good {
  color: #3b82f6;
}

[data-theme="dark"] .pass-rate-warning {
  color: #f59e0b;
}

[data-theme="dark"] .pass-rate-danger {
  color: #ef4444;
}

[data-theme="dark"] .sources-authorized {
  color: #22c55e;
}

[data-theme="dark"] .sources-unauthorized {
  color: #ef4444;
}

/* DNS Health Section Styles */
.dns-health-card {
  margin-bottom: 24px;
}

.dns-health-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.last-checked-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.dns-health-empty {
  text-align: center;
  padding: 32px 24px;
  color: var(--text-secondary);
}

.dns-health-empty p {
  margin: 0;
  font-size: 14px;
}

/* DNS Records List */
.dns-records-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dns-record-item {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.dns-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dns-record-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dns-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dns-status-valid {
  background-color: #22c55e;
}

.dns-status-warning {
  background-color: #f59e0b;
}

.dns-status-error {
  background-color: #ef4444;
}

.dns-status-unknown {
  background-color: #94a3b8;
}

.dns-record-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.dns-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
}

.dns-status-badge.dns-status-valid {
  background-color: #dcfce7;
  color: #166534;
}

.dns-status-badge.dns-status-warning {
  background-color: #fef3c7;
  color: #92400e;
}

.dns-status-badge.dns-status-error {
  background-color: #fee2e2;
  color: #991b1b;
}

.dns-status-badge.dns-status-unknown {
  background-color: #f1f5f9;
  color: var(--text-secondary);
}

.dns-record-value {
  background-color: #1e293b;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 8px;
}

.dns-record-value code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  color: #e2e8f0;
  word-break: break-all;
  display: block;
}

.dns-record-value.dns-record-missing {
  background-color: #f1f5f9;
}

.dns-record-value.dns-record-missing span {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 13px;
}

.toggle-full-record {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #60a5fa;
  background-color: rgba(96, 165, 250, 0.1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.toggle-full-record:hover {
  background-color: rgba(96, 165, 250, 0.2);
}

/* DNS Record Issues */
.dns-record-issues {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.dns-issue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.dns-issue-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.dns-issue-error {
  background-color: #fee2e2;
  color: #991b1b;
}

.dns-issue-warning {
  background-color: #fef3c7;
  color: #92400e;
}

/* DNS Record Changed Notice */
.dns-record-changed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #eff6ff;
  border-radius: 6px;
  font-size: 13px;
  color: #1d4ed8;
}

.dns-changed-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* DNS Check Results */
.dns-check-results {
  margin-top: 16px;
}

/* DNS History Link */
.dns-history-link {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.view-history-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.view-history-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.history-icon {
  width: 18px;
  height: 18px;
}

/* DNS History Page Styles */
.dns-history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dns-history-item {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.dns-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dns-history-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dns-history-date {
  font-size: 13px;
  color: var(--text-secondary);
}

.dns-history-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dns-history-change {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dns-history-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dns-history-value {
  background-color: #1e293b;
  border-radius: 6px;
  padding: 12px 16px;
}

.dns-history-value code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  color: #e2e8f0;
  word-break: break-all;
  display: block;
}

.dns-history-value.dns-history-previous {
  background-color: #374151;
  opacity: 0.8;
}

/* Dark theme for DNS Health */
[data-theme="dark"] .dns-record-item {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .dns-record-value {
  background-color: #1a202c;
}

[data-theme="dark"] .dns-record-value.dns-record-missing {
  background-color: #2d3748;
}

[data-theme="dark"] .dns-issue-error {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

[data-theme="dark"] .dns-issue-warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

[data-theme="dark"] .dns-record-changed {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

[data-theme="dark"] .dns-history-item {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .dns-history-value {
  background-color: #1a202c;
}

[data-theme="dark"] .dns-history-value.dns-history-previous {
  background-color: #1a202c;
}

/* Responsive DNS Health */
@media (max-width: 768px) {
  .dns-health-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dns-record-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dns-history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Blacklist Status Section Styles */
.blacklist-status-card {
  margin-bottom: 24px;
}

.blacklist-status-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Blacklist Alert Banner */
.blacklist-alert {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.blacklist-alert-danger {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
}

.blacklist-alert-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #dc2626;
}

.blacklist-alert-content {
  flex: 1;
}

.blacklist-alert-content strong {
  display: block;
  font-size: 15px;
  color: #991b1b;
  margin-bottom: 4px;
}

.blacklist-alert-content p {
  font-size: 14px;
  color: #991b1b;
  margin: 0;
  line-height: 1.5;
}

/* Blacklist Sections */
.blacklist-section {
  margin-bottom: 24px;
}

.blacklist-section:last-child {
  margin-bottom: 0;
}

.blacklist-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.blacklist-section-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.ip-count-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  margin-left: auto;
}

.ip-count-listed {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Blacklist Items */
.blacklist-ip-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blacklist-item {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.blacklist-item.blacklist-status-listed {
  border-color: #fca5a5;
  background-color: #fef2f2;
}

.blacklist-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blacklist-item-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--text-primary);
}

.blacklist-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.blacklist-status-indicator.blacklist-status-clean {
  background-color: #22c55e;
}

.blacklist-status-indicator.blacklist-status-listed {
  background-color: #ef4444;
}

.ip-address {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
}

.blacklist-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
}

.blacklist-status-badge.blacklist-status-clean {
  background-color: #dcfce7;
  color: #166534;
}

.blacklist-status-badge.blacklist-status-listed {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Blacklist Item Details */
.blacklist-item-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #fecaca;
}

.blacklist-count {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.blacklist-names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.blacklist-name-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #991b1b;
}

.blacklist-first-seen {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

/* Delisting Info */
.blacklist-delisting-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.delisting-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.delisting-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.delisting-icon {
  width: 14px;
  height: 14px;
}

/* Clean Status */
.blacklist-item-clean {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: #166534;
}

.clean-icon {
  width: 18px;
  height: 18px;
  color: #22c55e;
}

/* Empty State */
.blacklist-empty {
  padding: 24px;
  text-align: center;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.blacklist-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* More Info */
.blacklist-more-info {
  text-align: center;
  padding-top: 12px;
}

.blacklist-more-info p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* Dark theme for Blacklist Status */
[data-theme="dark"] .blacklist-alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .blacklist-alert-content strong,
[data-theme="dark"] .blacklist-alert-content p {
  color: #fca5a5;
}

[data-theme="dark"] .blacklist-item {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .blacklist-item.blacklist-status-listed {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .blacklist-item-details {
  border-top-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .blacklist-name-tag {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

[data-theme="dark"] .ip-address {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .blacklist-empty {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .blacklist-item-clean {
  color: #4ade80;
  border-top-color: var(--border-color);
}

[data-theme="dark"] .clean-icon {
  color: #4ade80;
}

/* Responsive Blacklist Status */
@media (max-width: 768px) {
  .blacklist-status-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .blacklist-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .blacklist-section-title {
    flex-wrap: wrap;
  }

  .ip-count-badge {
    margin-left: 0;
  }

  .blacklist-delisting-info {
    flex-direction: column;
    gap: 8px;
  }
}

/* Alert Preferences Styles */
.alert-preferences-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px;
  line-height: 1.6;
}

/* Alert Toggle Items */
.alert-toggles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alert-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.alert-toggle-item:hover {
  border-color: #cbd5e1;
}

.alert-toggle-content {
  flex: 1;
}

.alert-toggle-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.alert-toggle-icon {
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-toggle-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.alert-toggle-description {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

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

.toggle-slider {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 13px;
  transition: background-color 0.2s ease;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.toggle-input:checked + .toggle-slider {
  background-color: var(--brand-primary);
}

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

.toggle-input:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Threshold Setting */
.threshold-setting {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.threshold-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.threshold-input {
  width: 100px;
  padding: 12px 16px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
  background-color: #fff;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.threshold-input:focus {
  border-color: var(--brand-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.threshold-unit {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-secondary);
}

.threshold-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.threshold-preset {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background-color: #f1f5f9;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.threshold-preset:hover {
  background-color: #e2e8f0;
  border-color: #cbd5e1;
}

/* Frequency Options */
.frequency-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.frequency-option {
  cursor: pointer;
}

.frequency-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.frequency-option-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.frequency-option:hover .frequency-option-content {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}

.frequency-option.selected .frequency-option-content,
.frequency-option input:checked + .frequency-option-content {
  border-color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.frequency-icon {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.frequency-option.selected .frequency-icon,
.frequency-option input:checked + .frequency-option-content .frequency-icon {
  color: var(--brand-primary);
}

.frequency-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.frequency-description {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Fixed Save Button */
.form-actions-fixed {
  position: sticky;
  bottom: 0;
  padding: 16px 0;
  background: linear-gradient(to bottom, transparent, var(--main-bg) 20%);
  margin-top: 8px;
}

.form-actions-fixed .btn {
  width: 100%;
  max-width: 200px;
}

/* Dark Theme for Alert Preferences */
[data-theme="dark"] .alert-toggle-item {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .alert-toggle-item:hover {
  border-color: #4a5568;
}

[data-theme="dark"] .toggle-slider {
  background-color: #4a5568;
}

[data-theme="dark"] .threshold-input {
  background-color: var(--main-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .threshold-preset {
  background-color: #2d3748;
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .threshold-preset:hover {
  background-color: #4a5568;
  border-color: #4a5568;
}

[data-theme="dark"] .frequency-option-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .frequency-option:hover .frequency-option-content {
  border-color: #4a5568;
  background-color: #2d3748;
}

/* Responsive Alert Preferences */
@media (max-width: 768px) {
  .alert-toggle-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .toggle-switch {
    align-self: flex-end;
  }

  .threshold-input {
    width: 80px;
    font-size: 20px;
    padding: 10px 12px;
  }

  .threshold-unit {
    font-size: 20px;
  }

  .threshold-presets {
    width: 100%;
  }

  .threshold-preset {
    flex: 1;
    text-align: center;
  }

  .form-actions-fixed .btn {
    max-width: 100%;
  }
}

/* ============================================
   Alert History View
   ============================================ */

/* Filters */
.alerts-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-select {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-select:hover {
  border-color: var(--brand-primary);
}

.filter-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.results-count {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Alert List */
.alerts-list {
  display: flex;
  flex-direction: column;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.15s ease;
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-item:hover {
  background-color: rgba(59, 130, 246, 0.03);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}

.alert-unread {
  background-color: rgba(59, 130, 246, 0.05);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}

.alert-unread:hover {
  background-color: rgba(59, 130, 246, 0.08);
}

/* Unread indicator */
.alert-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

.indicator-unread {
  background-color: var(--brand-primary);
}

/* Alert icons */
.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-icon-pass_rate {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.alert-icon-dns {
  background-color: rgba(168, 85, 247, 0.1);
  color: #9333ea;
}

.alert-icon-blacklist {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.alert-icon-sender {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

/* Alert content */
.alert-content {
  flex: 1;
  min-width: 0;
}

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

.alert-type-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.alert-type-pass_rate {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.alert-type-dns {
  background-color: rgba(168, 85, 247, 0.1);
  color: #9333ea;
}

.alert-type-blacklist {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.alert-type-sender {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.alert-domain {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.alert-timestamp {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: auto;
}

.alert-summary {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Alert actions */
.alert-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.alert-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.alert-action-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.05);
}

/* Header actions */
.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .alerts-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    min-width: 100%;
  }

  .alert-item {
    flex-wrap: wrap;
  }

  .alert-item:hover,
  .alert-unread {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .alert-indicator {
    order: -1;
  }

  .alert-icon {
    width: 36px;
    height: 36px;
  }

  .alert-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .alert-timestamp {
    margin-left: 0;
  }

  .alert-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }

  .header-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .header-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Dark theme for alerts */
[data-theme="dark"] .filter-select {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .alert-item:hover {
  background-color: rgba(59, 130, 246, 0.08);
}

[data-theme="dark"] .alert-unread {
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .alert-unread:hover {
  background-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .alert-action-btn {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .alert-action-btn:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

/* ============================================
   SPF Analyzer Section
   ============================================ */

.spf-analyzer-card {
  /* Uses dashboard-card base styles */
}

/* SPF Status Badge */
.spf-status-badge {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: capitalize;
}

.spf-status-valid {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.spf-status-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.spf-status-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.spf-status-missing {
  background-color: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

/* SPF Empty State */
.spf-empty {
  text-align: center;
  padding: 32px 20px;
}

.spf-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #94a3b8;
}

.spf-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.spf-empty p {
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.spf-setup-info {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.spf-setup-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.spf-setup-info p {
  margin-bottom: 12px;
}

.spf-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
  margin-bottom: 0;
}

/* SPF Content */
.spf-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* SPF Lookup Gauge */
.spf-lookup-gauge-container {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.spf-lookup-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background-color: #f8fafc;
  border-radius: 12px;
  min-width: 200px;
}

.spf-lookup-gauge-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spf-lookup-gauge-bar {
  width: 160px;
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.spf-lookup-gauge-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.spf-gauge-ok {
  background-color: #22c55e;
}

.spf-gauge-warning {
  background-color: #f59e0b;
}

.spf-gauge-error {
  background-color: #ef4444;
}

.spf-lookup-gauge-counts {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.spf-lookup-count {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.spf-count-ok {
  color: #16a34a;
}

.spf-count-warning {
  color: #d97706;
}

.spf-count-error {
  color: #dc2626;
}

.spf-lookup-divider {
  font-size: 20px;
  color: #94a3b8;
}

.spf-lookup-max {
  font-size: 20px;
  color: #94a3b8;
  font-weight: 500;
}

.spf-lookup-status {
  font-size: 12px;
  font-weight: 500;
}

.spf-limit-ok {
  color: #16a34a;
}

.spf-limit-warning {
  color: #d97706;
}

.spf-limit-error {
  color: #dc2626;
}

/* SPF Record Section */
.spf-record-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.spf-record-value {
  word-break: break-all;
}

/* SPF Issues */
.spf-issues {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spf-issue {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.spf-issue-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.spf-issue-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.spf-issue-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

/* SPF Tree Section */
.spf-tree-section {
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 12px;
}

.spf-tree-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spf-tree-header-icon {
  width: 16px;
  height: 16px;
  color: #64748b;
}

.spf-tree-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.spf-tree {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
}

.spf-tree-root {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spf-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.spf-tree-node-root {
  background-color: #3b82f6;
  color: white;
}

.spf-tree-node-include {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--text-primary);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.spf-tree-node-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.spf-tree-node-mechanism {
  background-color: rgba(100, 116, 139, 0.1);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.spf-tree-connector {
  display: flex;
  align-items: center;
  color: currentColor;
  opacity: 0.6;
}

.spf-tree-icon {
  width: 14px;
  height: 14px;
}

.spf-tree-domain {
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
}

.spf-tree-redirect-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background-color: #8b5cf6;
  color: white;
  border-radius: 4px;
  text-transform: uppercase;
}

.spf-tree-error {
  font-size: 12px;
  color: #dc2626;
  margin-left: auto;
}

.spf-tree-lookup-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
  margin-left: auto;
}

.spf-tree-node-root .spf-tree-lookup-badge {
  background-color: rgba(255, 255, 255, 0.2);
}

.spf-tree-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 2px solid #e2e8f0;
  margin-left: 16px;
}

.spf-tree-item {
  margin: 8px 0;
}

.spf-tree-mechanism-type {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  font-weight: 600;
  color: #8b5cf6;
}

.spf-tree-mechanism-value {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  opacity: 0.8;
}

.spf-tree-children {
  margin-top: 4px;
}

/* SPF Mechanisms Section */
.spf-mechanisms-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spf-section-icon {
  width: 16px;
  height: 16px;
  color: #64748b;
}

.spf-mechanisms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.spf-mechanism-group {
  background-color: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
}

.spf-mechanism-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background-color: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.spf-mechanism-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spf-mechanism-no-lookup {
  font-size: 11px;
  color: #16a34a;
  font-weight: 500;
}

.spf-mechanism-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spf-mechanism-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background-color: var(--card-bg);
  border-radius: 6px;
  font-size: 13px;
}

.spf-mechanism-type {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  font-weight: 600;
  color: #3b82f6;
  min-width: 55px;
}

.spf-mechanism-lookup .spf-mechanism-type {
  color: #8b5cf6;
}

.spf-mechanism-value {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  color: var(--text-secondary);
  word-break: break-all;
  flex: 1;
}

.spf-mechanism-provider {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 4px;
  margin-left: 8px;
}

.spf-mechanism-implied {
  color: var(--text-muted);
  font-style: italic;
}

/* SPF All Qualifier */
.spf-all-qualifier {
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.spf-all-- {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.spf-all-\~ {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.spf-all-\+ {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.spf-all-\? {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

/* SPF Actions */
.spf-actions {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* SPF Spinning Icon Animation */
.spinning {
  animation: spin 1s linear infinite;
}

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

/* SPF Optimization Suggestions Section */
.spf-optimization-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.spf-optimization-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spf-optimization-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background-color: #f59e0b;
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 11px;
}

.spf-optimization-summary {
  margin-bottom: 16px;
}

.spf-optimization-savings {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  border-radius: 8px;
  border: 1px solid #86efac;
}

.spf-optimization-savings .savings-number {
  font-size: 24px;
  font-weight: 700;
  color: #166534;
}

.spf-optimization-savings .savings-label {
  font-size: 14px;
  color: #166534;
  font-weight: 500;
}

.spf-optimization-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spf-optimization-item {
  background-color: var(--card-bg);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.spf-optimization-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.spf-optimization-high {
  border-left: 3px solid #ef4444;
}

.spf-optimization-medium {
  border-left: 3px solid #f59e0b;
}

.spf-optimization-low {
  border-left: 3px solid #3b82f6;
}

.spf-optimization-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.spf-optimization-impact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.spf-optimization-impact .impact-icon {
  width: 14px;
  height: 14px;
}

.spf-impact-high {
  color: #ef4444;
}

.spf-impact-medium {
  color: #f59e0b;
}

.spf-impact-low {
  color: #3b82f6;
}

.spf-optimization-type-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.spf-type-deprecated {
  background-color: #fef2f2;
  color: #b91c1c;
}

.spf-type-duplicate {
  background-color: #fef3c7;
  color: #92400e;
}

.spf-type-flattenable {
  background-color: #ede9fe;
  color: #6d28d9;
}

.spf-type-consolidatable {
  background-color: #ecfdf5;
  color: #047857;
}

.spf-optimization-content {
  padding: 14px;
}

.spf-optimization-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.spf-optimization-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.spf-optimization-mechanism {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background-color: #f1f5f9;
  border-radius: 6px;
}

.spf-optimization-mechanism .mechanism-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.spf-optimization-mechanism .mechanism-code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #dc2626;
  background-color: #fee2e2;
  padding: 3px 8px;
  border-radius: 4px;
  word-break: break-all;
}

.spf-optimization-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background-color: #eff6ff;
  border-radius: 6px;
  margin-bottom: 12px;
}

.spf-optimization-action .action-icon {
  width: 16px;
  height: 16px;
  color: #3b82f6;
  flex-shrink: 0;
  margin-top: 1px;
}

.spf-optimization-action span {
  font-size: 13px;
  color: #1e40af;
  line-height: 1.5;
}

.spf-optimization-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #dcfce7;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #166534;
}

.spf-optimization-savings-badge .savings-icon {
  width: 14px;
  height: 14px;
}

.spf-optimization-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background-color: #fef3c7;
  border-radius: 6px;
  margin-top: 12px;
}

.spf-optimization-warning .warning-icon {
  width: 16px;
  height: 16px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}

.spf-optimization-warning span {
  font-size: 12px;
  color: #92400e;
  line-height: 1.4;
}

.spf-optimization-flattened {
  margin-top: 12px;
}

.toggle-flattened-ips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-flattened-ips:hover {
  background-color: #e2e8f0;
  color: var(--text-primary);
}

.toggle-flattened-ips .toggle-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.flattened-ips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  margin-top: 8px;
  background-color: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.flattened-ip {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 4px 8px;
  background-color: var(--card-bg);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: var(--text-primary);
}

.spf-optimization-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background-color: #f0fdf4;
  border-radius: 8px;
  margin-top: 24px;
  border: 1px solid #86efac;
}

.spf-optimization-empty .optimization-empty-icon {
  width: 20px;
  height: 20px;
  color: #16a34a;
}

.spf-optimization-empty span {
  font-size: 14px;
  color: #166534;
  font-weight: 500;
}

/* Dark Theme Support for SPF Section */
[data-theme="dark"] .spf-status-valid {
  background-color: rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .spf-status-warning {
  background-color: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .spf-status-error {
  background-color: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .spf-status-missing {
  background-color: rgba(100, 116, 139, 0.15);
}

[data-theme="dark"] .spf-setup-info {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .spf-lookup-gauge {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .spf-lookup-gauge-bar {
  background-color: #374151;
}

[data-theme="dark"] .spf-issue-error {
  background-color: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .spf-issue-warning {
  background-color: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .spf-tree-section {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .spf-tree {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--border-color);
}

[data-theme="dark"] .spf-tree-list {
  border-left-color: var(--border-color);
}

[data-theme="dark"] .spf-tree-node-include {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .spf-tree-node-error {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .spf-tree-node-mechanism {
  background-color: rgba(100, 116, 139, 0.2);
  border-color: rgba(100, 116, 139, 0.3);
}

[data-theme="dark"] .spf-mechanism-group {
  background-color: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .spf-mechanism-group-header {
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .spf-mechanism-item {
  background-color: var(--card-bg);
}

[data-theme="dark"] .spf-mechanism-provider {
  background-color: rgba(59, 130, 246, 0.2);
}

/* Dark Theme Support for SPF Optimization Section */
[data-theme="dark"] .spf-optimization-section {
  border-top-color: #334155;
}

[data-theme="dark"] .spf-optimization-count {
  background-color: #f59e0b;
}

[data-theme="dark"] .spf-optimization-savings {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(20, 184, 166, 0.15) 100%);
  border-color: rgba(134, 239, 172, 0.3);
}

[data-theme="dark"] .spf-optimization-savings .savings-number,
[data-theme="dark"] .spf-optimization-savings .savings-label {
  color: #4ade80;
}

[data-theme="dark"] .spf-optimization-item {
  background-color: var(--card-bg);
  border-color: #334155;
}

[data-theme="dark"] .spf-optimization-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .spf-optimization-header {
  background-color: #1e293b;
  border-bottom-color: #334155;
}

[data-theme="dark"] .spf-type-deprecated {
  background-color: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

[data-theme="dark"] .spf-type-duplicate {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

[data-theme="dark"] .spf-type-flattenable {
  background-color: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}

[data-theme="dark"] .spf-type-consolidatable {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

[data-theme="dark"] .spf-optimization-mechanism {
  background-color: #1e293b;
}

[data-theme="dark"] .spf-optimization-mechanism .mechanism-code {
  background-color: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
}

[data-theme="dark"] .spf-optimization-action {
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .spf-optimization-action span {
  color: #93c5fd;
}

[data-theme="dark"] .spf-optimization-savings-badge {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .spf-optimization-warning {
  background-color: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .spf-optimization-warning span {
  color: #fcd34d;
}

[data-theme="dark"] .toggle-flattened-ips {
  background-color: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .toggle-flattened-ips:hover {
  background-color: #334155;
}

[data-theme="dark"] .flattened-ips-list {
  background-color: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .flattened-ip {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .spf-optimization-empty {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(134, 239, 172, 0.3);
}

[data-theme="dark"] .spf-optimization-empty .optimization-empty-icon {
  color: #4ade80;
}

[data-theme="dark"] .spf-optimization-empty span {
  color: #4ade80;
}

/* Responsive Design for SPF Section */
@media (max-width: 768px) {
  .spf-lookup-gauge {
    padding: 12px 16px;
  }

  .spf-lookup-gauge-bar {
    width: 120px;
  }

  .spf-lookup-count {
    font-size: 24px;
  }

  .spf-mechanisms-grid {
    grid-template-columns: 1fr;
  }

  .spf-tree {
    padding: 12px;
  }

  .spf-tree-list {
    padding-left: 16px;
    margin-left: 12px;
  }
}

/* ============================================
   BIMI (Brand Indicators) Section
   ============================================ */

.bimi-card {
  /* Uses dashboard-card base styles */
}

/* BIMI Status Badge */
.bimi-status-badge {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: capitalize;
}

.bimi-status-configured {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.bimi-status-partial {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.bimi-status-not-configured {
  background-color: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

/* Empty state (no BIMI record) */
.bimi-empty {
  text-align: center;
  padding: 32px 20px;
}

.bimi-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(100, 116, 139, 0.1);
  border-radius: 50%;
}

.bimi-empty-icon svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}

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

.bimi-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.bimi-setup-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* BIMI Content (record found) */
.bimi-content {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* BIMI Logo Preview */
.bimi-logo-section {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bimi-logo-preview {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.bimi-logo-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.bimi-logo-unavailable {
  background-color: #f1f5f9;
}

.bimi-logo-unavailable svg {
  width: 40px;
  height: 40px;
  color: var(--text-secondary);
}

.bimi-logo-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  text-align: center;
}

.bimi-logo-error svg {
  width: 24px;
  height: 24px;
  color: #ef4444;
}

.bimi-logo-error span {
  font-size: 10px;
  color: var(--text-secondary);
}

.bimi-logo-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* BIMI Details */
.bimi-details {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bimi-record-info h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}

/* BIMI URLs */
.bimi-urls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.bimi-url-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.bimi-url-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

.bimi-url-value {
  font-size: 13px;
  padding: 8px 12px;
  background-color: #1e293b;
  color: #e2e8f0;
  border-radius: 6px;
  word-break: break-all;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.bimi-url-missing {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  padding-left: 22px;
}

/* BIMI Issues */
.bimi-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.bimi-issue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.bimi-issue-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.bimi-issue-error {
  background-color: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.bimi-issue-warning {
  background-color: rgba(245, 158, 11, 0.08);
  color: #d97706;
}

/* BIMI Setup Guide */
.bimi-setup-guide {
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.bimi-setup-link-full {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.bimi-setup-link-full:hover {
  background-color: #e0f2fe;
  border-color: var(--brand-primary);
}

.bimi-setup-link-full .toggle-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.bimi-setup-link-full span {
  flex: 1;
}

.bimi-setup-link-full .arrow-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bimi-setup-link-full:hover .arrow-icon {
  opacity: 1;
  transform: translateX(4px);
}

.bimi-setup-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}

.bimi-setup-toggle:hover {
  color: var(--brand-primary);
}

.bimi-setup-toggle .toggle-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.bimi-setup-content {
  padding: 16px 0 0 24px;
}

/* BIMI Prerequisites */
.bimi-prerequisites {
  margin-bottom: 20px;
}

.bimi-prerequisites h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.bimi-prerequisites ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bimi-prerequisites li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.prereq-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.prereq-icon svg {
  width: 12px;
  height: 12px;
}

.prereq-pass {
  background-color: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.prereq-fail {
  background-color: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.prereq-info {
  background-color: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.prereq-status {
  font-size: 12px;
  color: var(--text-secondary);
}

/* BIMI DNS Example */
.bimi-dns-example {
  margin-bottom: 20px;
}

.bimi-dns-example h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.bimi-dns-example p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* BIMI Resources */
.bimi-resources {
  margin-bottom: 8px;
}

.bimi-resources h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.bimi-resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bimi-resource-list li a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--brand-primary);
  text-decoration: none;
}

.bimi-resource-list li a:hover {
  text-decoration: underline;
}

/* Dark Theme BIMI */
[data-theme="dark"] .bimi-status-configured {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .bimi-status-partial {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .bimi-status-not-configured {
  background-color: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}

[data-theme="dark"] .bimi-empty-icon {
  background-color: rgba(100, 116, 139, 0.2);
}

[data-theme="dark"] .bimi-logo-preview {
  border-color: var(--border-color);
  background-color: var(--main-bg);
}

[data-theme="dark"] .bimi-logo-unavailable {
  background-color: #2d3748;
}

[data-theme="dark"] .bimi-issue-error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

[data-theme="dark"] .bimi-issue-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .bimi-setup-guide {
  border-top-color: var(--border-color);
}

[data-theme="dark"] .bimi-setup-link-full {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .bimi-setup-link-full:hover {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: var(--brand-primary);
}

[data-theme="dark"] .bimi-setup-toggle:hover {
  color: var(--brand-primary);
}

[data-theme="dark"] .prereq-pass {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .prereq-fail {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

[data-theme="dark"] .prereq-info {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Responsive BIMI */
@media (max-width: 768px) {
  .bimi-content {
    flex-direction: column;
  }

  .bimi-logo-section {
    flex: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
  }

  .bimi-logo-preview {
    width: 80px;
    height: 80px;
  }

  .bimi-details {
    min-width: 100%;
  }

  .bimi-setup-content {
    padding-left: 8px;
  }
}

/*
========================================================================
   BIMI Setup Wizard
========================================================================
*/

/* Wizard Progress Steps */
.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 16px;
  margin-bottom: 24px;
  background-color: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  flex-shrink: 0;
}

.wizard-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.wizard-step.active .wizard-step-number {
  background-color: var(--brand-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.wizard-step.completed .wizard-step-number {
  background-color: #22c55e;
  color: #fff;
}

.wizard-step.completed .wizard-step-number::after {
  content: '\2713';
}

.wizard-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.wizard-step.active .wizard-step-label {
  color: var(--brand-primary);
  font-weight: 600;
}

.wizard-step.completed .wizard-step-label {
  color: #22c55e;
}

.wizard-step-connector {
  width: 40px;
  height: 2px;
  background-color: #e2e8f0;
  flex-shrink: 0;
  margin: 0 8px;
  margin-bottom: 20px;
}

/* Wizard Card */
.wizard-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.wizard-card-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
}

.wizard-card-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.wizard-card-header p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
}

.wizard-card-body {
  padding: 24px;
}

.wizard-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  background-color: #f8fafc;
  border-radius: 0 0 12px 12px;
}

/* Prerequisites Checklist */
.prereq-checklist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.prereq-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background-color: #f8fafc;
}

.prereq-item.prereq-pass {
  background-color: #f0fdf4;
  border-color: #86efac;
}

.prereq-item.prereq-fail {
  background-color: #fef2f2;
  border-color: #fecaca;
}

.prereq-item.prereq-info {
  background-color: #eff6ff;
  border-color: #bfdbfe;
}

.prereq-item > .prereq-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prereq-item.prereq-pass > .prereq-icon {
  background-color: #22c55e;
  color: #fff;
}

.prereq-item.prereq-fail > .prereq-icon {
  background-color: #ef4444;
  color: #fff;
}

.prereq-item.prereq-info > .prereq-icon {
  background-color: #3b82f6;
  color: #fff;
}

.prereq-item > .prereq-icon svg {
  width: 20px;
  height: 20px;
}

.prereq-content h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.prereq-content p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.prereq-content code {
  background-color: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'SF Mono', Monaco, monospace;
}

.prereq-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
}

.prereq-status-badge.prereq-status-pass {
  background-color: #dcfce7;
  color: #166534;
}

.prereq-status-badge.prereq-status-fail {
  background-color: #fee2e2;
  color: #991b1b;
}

.prereq-badge-icon {
  width: 14px;
  height: 14px;
}

.prereq-note {
  background-color: rgba(0, 0, 0, 0.04);
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.prereq-action {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.prereq-action-text {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0;
}

/* Wizard Alerts */
.wizard-alert {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.wizard-alert-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.wizard-alert-success {
  background-color: #f0fdf4;
  border: 1px solid #86efac;
}

.wizard-alert-success .wizard-alert-icon {
  color: #22c55e;
}

.wizard-alert-warning {
  background-color: #fffbeb;
  border: 1px solid #fcd34d;
}

.wizard-alert-warning .wizard-alert-icon {
  color: #f59e0b;
}

.wizard-alert strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.wizard-alert p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Logo Requirements */
.logo-requirements h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.requirement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.requirement-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.requirement-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #e0e7ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.requirement-icon svg {
  width: 18px;
  height: 18px;
}

.requirement-content h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.requirement-content p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Logo Conversion Info */
.logo-conversion-info {
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.logo-conversion-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.logo-conversion-info > p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}

/* Resource List */
.resource-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.resource-link:hover {
  background-color: #eff6ff;
  border-color: var(--brand-primary);
}

.resource-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Provider Links */
.provider-link {
  padding: 16px;
}

.provider-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.provider-info div {
  display: flex;
  flex-direction: column;
}

.provider-info strong {
  font-size: 14px;
  color: var(--text-primary);
}

.provider-info span {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Logo URL Input */
.logo-url-input {
  margin-top: 24px;
}

.logo-url-input h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.logo-url-input > p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
}

.input-group {
  display: flex;
  gap: 12px;
}

.form-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
  color: #94a3b8;
}

.form-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* Validation Result */
.validation-result {
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 14px;
}

.validation-result strong {
  display: block;
  margin-bottom: 4px;
}

.validation-result p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.validation-result.validation-success {
  background-color: #f0fdf4;
  border: 1px solid #86efac;
}

.validation-result.validation-success strong {
  color: #166534;
}

.validation-result.validation-warning {
  background-color: #fffbeb;
  border: 1px solid #fcd34d;
}

.validation-result.validation-warning strong {
  color: #92400e;
}

.validation-result.validation-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}

.validation-result.validation-error strong {
  color: #991b1b;
}

/* VMC Section */
.vmc-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.vmc-option {
  padding: 24px;
  background-color: #f8fafc;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  position: relative;
}

.vmc-option-recommended {
  background-color: #eff6ff;
  border-color: var(--brand-primary);
}

.vmc-recommended-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background-color: var(--brand-primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.vmc-option h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.vmc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.vmc-list-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vmc-list-icon.vmc-check {
  color: #22c55e;
}

.vmc-list-icon.vmc-x {
  color: #ef4444;
}

.vmc-cost {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* VMC Requirements */
.vmc-requirements {
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.vmc-requirements h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.requirement-list {
  margin: 0;
  padding-left: 20px;
}

.requirement-list li {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 4px 0;
  line-height: 1.5;
}

/* VMC Providers */
.vmc-providers {
  margin-bottom: 24px;
}

.vmc-providers h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.vmc-providers > p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}

/* VMC URL Input */
.vmc-url-input h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.vmc-url-input > p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
}

/* DNS Generator */
.dns-record-info {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}

.dns-record-info h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.dns-field {
  margin-bottom: 16px;
}

.dns-field:last-child {
  margin-bottom: 0;
}

.dns-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.dns-value {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #1e293b;
  padding: 12px 16px;
  border-radius: 8px;
}

.dns-value code {
  flex: 1;
  font-size: 14px;
  color: #e2e8f0;
  font-family: 'SF Mono', Monaco, monospace;
  word-break: break-all;
}

.dns-value-large {
  flex-wrap: wrap;
}

.dns-placeholder {
  color: #f59e0b;
  font-style: italic;
}

.dns-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.copy-btn-small {
  padding: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.copy-btn-small:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.copy-btn-small .copy-icon {
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

/* DNS Customizer */
.dns-customizer {
  margin-bottom: 24px;
}

.dns-customizer h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.customizer-field {
  margin-bottom: 16px;
}

.customizer-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* Generated Record */
.generated-record {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.generated-record h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.code-block-large {
  background-color: #1e293b;
  padding: 16px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.code-block-large code {
  flex: 1;
  min-width: 200px;
  font-size: 14px;
  color: #e2e8f0;
  font-family: 'SF Mono', Monaco, monospace;
  word-break: break-all;
}

/* DNS Instructions */
.dns-instructions {
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.dns-instructions h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.instruction-list {
  margin: 0;
  padding-left: 20px;
}

.instruction-list li {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 6px 0;
  line-height: 1.5;
}

.instruction-list strong {
  color: var(--text-primary);
}

/* Verification Section */
.verification-status {
  margin-bottom: 24px;
}

.verification-result {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
}

.verification-result.verification-success {
  background-color: #f0fdf4;
  border: 2px solid #86efac;
}

.verification-result.verification-partial {
  background-color: #fffbeb;
  border: 2px solid #fcd34d;
}

.verification-result.verification-pending {
  background-color: #f8fafc;
  border: 2px solid var(--border-color);
}

.verification-result.verification-error {
  background-color: #fef2f2;
  border: 2px solid #fecaca;
}

.verification-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.verification-success .verification-icon {
  background-color: #22c55e;
  color: #fff;
}

.verification-partial .verification-icon {
  background-color: #f59e0b;
  color: #fff;
}

.verification-pending .verification-icon {
  background-color: #94a3b8;
  color: #fff;
}

.verification-error .verification-icon {
  background-color: #ef4444;
  color: #fff;
}

.verification-icon svg {
  width: 24px;
  height: 24px;
}

.verification-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.verification-content p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.verification-warnings {
  margin: 12px 0 0 0;
  padding-left: 18px;
}

.verification-warnings li {
  font-size: 14px;
  color: #92400e;
  padding: 4px 0;
}

.verification-actions {
  margin-bottom: 24px;
}

.verification-details-card {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}

.verification-details-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.detail-item {
  font-size: 14px;
  color: var(--text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item strong {
  color: var(--text-primary);
}

.detail-item code {
  background-color: #1e293b;
  color: #e2e8f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  word-break: break-all;
  display: inline-block;
  margin-top: 4px;
}

/* Logo Preview in Wizard */
.logo-preview-section {
  margin-top: 24px;
  padding: 20px;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.logo-preview-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.logo-preview-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #fff;
  border: 2px dashed var(--border-color);
  border-radius: 10px;
}

.logo-preview-img {
  max-width: 120px;
  max-height: 120px;
}

.logo-preview-error {
  text-align: center;
  color: var(--text-secondary);
}

.logo-preview-error svg {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.logo-preview-error p {
  margin: 0;
  font-size: 14px;
}

/* Next Steps */
.next-steps {
  margin-top: 32px;
}

.next-steps h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.next-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.next-steps-list li {
  display: flex;
  gap: 14px;
  padding: 16px;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 12px;
}

.next-steps-list li:last-child {
  margin-bottom: 0;
}

.next-step-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--brand-primary);
}

.next-steps-list strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.next-steps-list p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Dark Theme Wizard */
[data-theme="dark"] .wizard-progress {
  background-color: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .wizard-step-number {
  background-color: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .wizard-step-label {
  color: #94a3b8;
}

[data-theme="dark"] .wizard-step-connector {
  background-color: #334155;
}

[data-theme="dark"] .wizard-card {
  background-color: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .wizard-card-header {
  border-color: #334155;
}

[data-theme="dark"] .wizard-card-footer {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .prereq-item {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .prereq-item.prereq-pass {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .prereq-item.prereq-fail {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .prereq-item.prereq-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .prereq-content code {
  background-color: #334155;
}

[data-theme="dark"] .prereq-note {
  background-color: #334155;
}

[data-theme="dark"] .wizard-alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .wizard-alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .requirement-card {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .logo-conversion-info {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .resource-link {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .resource-link:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .form-input {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .form-input::placeholder {
  color: #64748b;
}

[data-theme="dark"] .validation-result.validation-success {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .validation-result.validation-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .validation-result.validation-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .vmc-option {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .vmc-option-recommended {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: var(--brand-primary);
}

[data-theme="dark"] .vmc-cost {
  border-color: #334155;
}

[data-theme="dark"] .vmc-requirements {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .dns-record-info {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .dns-instructions {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .verification-result.verification-pending {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .verification-details-card {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .detail-item {
  border-color: #334155;
}

[data-theme="dark"] .logo-preview-section {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .logo-preview-container {
  background-color: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .next-steps-list li {
  background-color: #0f172a;
  border-color: #334155;
}

/* Responsive Wizard */
@media (max-width: 768px) {
  .wizard-progress {
    padding: 16px 12px;
  }

  .wizard-step {
    min-width: 60px;
  }

  .wizard-step-number {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .wizard-step-label {
    font-size: 10px;
  }

  .wizard-step-connector {
    width: 20px;
    margin: 0 4px;
  }

  .wizard-card-header {
    padding: 20px;
  }

  .wizard-card-body {
    padding: 20px;
  }

  .wizard-card-footer {
    flex-direction: column-reverse;
    gap: 12px;
    padding: 16px 20px;
  }

  .wizard-card-footer .btn {
    width: 100%;
  }

  .prereq-item {
    flex-direction: column;
    gap: 12px;
  }

  .requirement-grid {
    grid-template-columns: 1fr;
  }

  .vmc-comparison {
    grid-template-columns: 1fr;
  }

  .input-group {
    flex-direction: column;
  }

  .input-group .btn {
    width: 100%;
  }

  .code-block-large {
    flex-direction: column;
    align-items: stretch;
  }

  .verification-result {
    flex-direction: column;
    text-align: center;
  }

  .verification-icon {
    margin: 0 auto;
  }
}

/* ============================================
   MTA-STS (TLS Enforcement) Section
   ============================================ */

.mta-sts-card {
  /* Uses dashboard-card base styles */
}

/* MTA-STS Status Badge */
.mta-sts-badge {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: capitalize;
}

.mta-sts-configured {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.mta-sts-pending {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.mta-sts-not-configured {
  background-color: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

/* MTA-STS Content (configured) */
.mta-sts-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mta-sts-summary {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.mta-sts-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mta-sts-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mta-sts-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.mta-sts-mode-testing {
  color: #d97706;
}

.mta-sts-mode-enforce {
  color: #16a34a;
}

/* Active status */
.mta-sts-active {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: rgba(34, 197, 94, 0.1);
  border-radius: 8px;
  color: #16a34a;
  font-weight: 500;
  font-size: 14px;
}

.mta-sts-active-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Pending status */
.mta-sts-pending-msg,
.mta-sts-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: rgba(245, 158, 11, 0.1);
  border-radius: 8px;
  color: #d97706;
  font-weight: 500;
  font-size: 14px;
}

.mta-sts-pending-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Empty state (not configured) */
.mta-sts-empty {
  text-align: center;
  padding: 32px 20px;
}

.mta-sts-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(100, 116, 139, 0.1);
  border-radius: 50%;
}

.mta-sts-empty-icon svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}

.mta-sts-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.mta-sts-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Setup Link */
.mta-sts-setup-link {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.mta-sts-setup-link-full {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 8px;
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.mta-sts-setup-link-full:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.mta-sts-setup-link-full .toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mta-sts-setup-link-full .arrow-icon {
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ============================================
   MTA-STS Setup Page Styles
   ============================================ */

/* Overview Card */
.mta-sts-overview-card {
  /* Uses dashboard-card base styles */
}

.mta-sts-intro p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 16px;
}

.mta-sts-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mta-sts-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-primary);
}

.benefit-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #16a34a;
}

/* Policy Configuration Form */
.mta-sts-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Mode Options */
.mode-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mode-option {
  flex: 1;
  min-width: 220px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mode-option:hover {
  border-color: var(--brand-primary);
}

.mode-option.selected {
  border-color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.05);
}

.mode-option input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--brand-primary);
}

.mode-option-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mode-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.mode-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* MX Discovery */
.mx-discovery {
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

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

.mx-discovery-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mx-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

.mx-add-btn:hover {
  border-color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.05);
}

.mx-add-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-primary);
}

/* Max Age Presets */
.max-age-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.max-age-preset {
  padding: 6px 14px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.max-age-preset:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.max-age-display {
  display: inline-block;
  margin-left: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Form Actions */
.form-actions {
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Policy Preview */
.mta-sts-preview-card .code-block-dark {
  background-color: #1e293b;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.mta-sts-preview-card .code-block-dark pre {
  margin: 0;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
}

.mta-sts-preview-card .copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: #e2e8f0;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.mta-sts-preview-card .copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* DNS Record Section */
.dns-record-section {
  margin-bottom: 24px;
}

.dns-record-section:last-child {
  margin-bottom: 0;
}

.dns-record-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.dns-record-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* DNS Record Table */
.dns-record-table {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.dns-record-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
}

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

.dns-record-header-row {
  background-color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.dns-col-host,
.dns-col-type,
.dns-col-value {
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.dns-col-host {
  flex: 0 0 30%;
  min-width: 150px;
}

.dns-col-type {
  flex: 0 0 80px;
  justify-content: center;
}

.dns-col-value {
  flex: 1;
  gap: 8px;
  flex-wrap: wrap;
}

.dns-col-value code {
  background-color: rgba(59, 130, 246, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: #1e40af;
  word-break: break-all;
}

.copy-btn-small {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.copy-btn-small:hover {
  border-color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.05);
}

.copy-btn-small .copy-icon {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
}

/* Info Box Note */
.info-box-note {
  background-color: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.info-box-note code {
  background-color: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  color: #1e40af;
}

/* Verification Status */
.verify-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.verify-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #f8fafc;
  border-radius: 8px;
}

.verify-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.verify-pending {
  background-color: #94a3b8;
}

.verify-success {
  background-color: #22c55e;
}

.verify-error {
  background-color: #ef4444;
}

.verify-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.verify-status-text {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-secondary);
}

.verify-results {
  margin-top: 16px;
}

.verify-errors {
  margin: 8px 0 0 0;
  padding-left: 20px;
  font-size: 13px;
}

.verify-errors li {
  margin-bottom: 4px;
}

/* Success State */
.mta-sts-success {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  margin-top: 20px;
}

.mta-sts-success .success-icon {
  width: 32px;
  height: 32px;
  color: #16a34a;
  flex-shrink: 0;
}

.success-content {
  flex: 1;
}

.success-content strong {
  display: block;
  font-size: 16px;
  color: #166534;
  margin-bottom: 4px;
}

.success-content p {
  font-size: 14px;
  color: #166534;
  margin: 0 0 8px;
  line-height: 1.5;
}

.success-timestamp {
  font-size: 12px;
  color: #15803d;
}

/* TLS-RPT Card */
.mta-sts-tlsrpt-card {
  margin-top: 24px;
}

.mta-sts-tlsrpt-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.6;
}

/* Dark Theme Support */
[data-theme="dark"] .mta-sts-badge.mta-sts-configured {
  background-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .mta-sts-badge.mta-sts-pending {
  background-color: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .mta-sts-badge.mta-sts-not-configured {
  background-color: rgba(100, 116, 139, 0.2);
}

[data-theme="dark"] .mta-sts-empty-icon {
  background-color: rgba(100, 116, 139, 0.2);
}

[data-theme="dark"] .mta-sts-active {
  background-color: rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .mta-sts-pending-msg,
[data-theme="dark"] .mta-sts-pending {
  background-color: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .mta-sts-setup-link-full {
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .mta-sts-setup-link-full:hover {
  background-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .mode-option {
  border-color: var(--border-color);
  background-color: var(--card-bg);
}

[data-theme="dark"] .mode-option.selected {
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .mx-discovery {
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .mx-add-btn {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .max-age-preset {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .dns-record-header-row {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .dns-col-value code {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .info-box-note {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .info-box-note code {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .verify-item {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .mta-sts-success {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .success-content strong {
  color: #4ade80;
}

[data-theme="dark"] .success-content p {
  color: #86efac;
}

[data-theme="dark"] .success-timestamp {
  color: #86efac;
}

/* MTA-STS DNS Verification Section */
.mta-sts-dns-verification {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.mta-sts-dns-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.mta-sts-dns-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.mta-sts-dns-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mta-sts-dns-records {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mta-sts-dns-record {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
}

.mta-sts-dns-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mta-sts-dns-record-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mta-sts-dns-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mta-sts-dns-indicator.mta-sts-dns-pass {
  background-color: #22c55e;
}

.mta-sts-dns-indicator.mta-sts-dns-fail {
  background-color: #ef4444;
}

.mta-sts-dns-indicator.mta-sts-dns-pending {
  background-color: #9ca3af;
}

.mta-sts-dns-record-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background-color: #e2e8f0;
  padding: 2px 8px;
  border-radius: 4px;
}

.mta-sts-dns-record-host {
  font-size: 13px;
  color: var(--text-secondary);
  background-color: transparent;
  padding: 0;
}

.mta-sts-dns-status {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
}

.mta-sts-dns-status.mta-sts-dns-status-pass {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.mta-sts-dns-status.mta-sts-dns-status-fail {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.mta-sts-dns-status.mta-sts-dns-status-pending {
  background-color: rgba(156, 163, 175, 0.1);
  color: #6b7280;
}

.mta-sts-dns-record-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mta-sts-dns-expected {
  font-size: 12px;
  color: var(--text-muted);
}

.mta-sts-dns-record-value code {
  font-size: 12px;
  background-color: #1e293b;
  color: #e2e8f0;
  padding: 4px 8px;
  border-radius: 4px;
  word-break: break-all;
}

.mta-sts-dns-results {
  margin-top: 16px;
}

.mta-sts-verify-errors {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
}

.mta-sts-verify-errors li {
  margin-bottom: 4px;
  color: inherit;
}

/* Dark theme for MTA-STS DNS verification */
[data-theme="dark"] .mta-sts-dns-record {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
}

[data-theme="dark"] .mta-sts-dns-record-type {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .mta-sts-dns-status.mta-sts-dns-status-pass {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .mta-sts-dns-status.mta-sts-dns-status-fail {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

[data-theme="dark"] .mta-sts-dns-status.mta-sts-dns-status-pending {
  background-color: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

[data-theme="dark"] .mta-sts-dns-record-value code {
  background-color: #0f172a;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .mta-sts-dns-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .mta-sts-dns-record-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .mta-sts-dns-record-info {
    flex-wrap: wrap;
  }
}

/* Responsive Styles */
@media (max-width: 768px) {
  .mta-sts-summary {
    gap: 16px;
  }

  .mode-options {
    flex-direction: column;
  }

  .mode-option {
    min-width: auto;
  }

  .dns-record-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dns-col-host,
  .dns-col-type,
  .dns-col-value {
    width: 100%;
    padding: 8px 12px;
  }

  .dns-col-type {
    justify-content: flex-start;
  }

  .dns-record-header-row {
    display: none;
  }

  .dns-record-row:not(.dns-record-header-row) .dns-col-host::before {
    content: "Host: ";
    font-weight: 600;
  }

  .dns-record-row:not(.dns-record-header-row) .dns-col-type::before {
    content: "Type: ";
    font-weight: 600;
  }

  .dns-record-row:not(.dns-record-header-row) .dns-col-value::before {
    content: "Value: ";
    font-weight: 600;
  }
}

/* =====================================================
   TLS-RPT Section Styles
   ===================================================== */

.tls-rpt-card {
  margin-bottom: 24px;
}

.tls-rpt-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.tls-rpt-healthy {
  background-color: #dcfce7;
  color: #166534;
}

.tls-rpt-warning {
  background-color: #fef3c7;
  color: #92400e;
}

.tls-rpt-issues {
  background-color: #fee2e2;
  color: #991b1b;
}

.tls-rpt-no-data {
  background-color: #f1f5f9;
  color: #64748b;
}

/* TLS-RPT Summary Stats */
.tls-rpt-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.tls-rpt-stat {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.tls-rpt-stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tls-rpt-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.tls-rpt-stat-value.tls-rpt-success {
  color: #16a34a;
}

.tls-rpt-stat-value.tls-rpt-warning-text {
  color: #d97706;
}

.tls-rpt-stat-value.tls-rpt-danger {
  color: #dc2626;
}

/* TLS-RPT Failure Breakdown */
.tls-rpt-failures {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.tls-rpt-failures h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #991b1b;
}

.tls-rpt-failure-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tls-rpt-failure-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #fff;
  border-radius: 6px;
}

.tls-rpt-failure-type {
  font-size: 14px;
  color: #991b1b;
}

.tls-rpt-failure-count {
  font-size: 14px;
  font-weight: 600;
  color: #dc2626;
}

/* TLS-RPT Recent Reports */
.tls-rpt-recent {
  margin-top: 16px;
}

.tls-rpt-recent h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.tls-rpt-reports-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tls-rpt-report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 6px;
}

.tls-rpt-report-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tls-rpt-report-org {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.tls-rpt-report-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.tls-rpt-report-stats {
  display: flex;
  gap: 12px;
}

.tls-rpt-report-success {
  font-size: 14px;
  font-weight: 500;
  color: #16a34a;
}

.tls-rpt-report-failed {
  font-size: 14px;
  font-weight: 500;
  color: #dc2626;
}

/* TLS-RPT Empty State */
.tls-rpt-empty {
  text-align: center;
  padding: 32px 16px;
}

.tls-rpt-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--text-secondary);
}

.tls-rpt-empty-icon svg {
  width: 100%;
  height: 100%;
}

.tls-rpt-empty h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.tls-rpt-empty > p {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.tls-rpt-setup-info {
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 8px;
}

.tls-rpt-setup-info h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.tls-rpt-setup-info p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.tls-rpt-setup-info code {
  background-color: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 13px;
}

.tls-rpt-note {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Dark Theme Support for TLS-RPT */
[data-theme="dark"] .tls-rpt-stat {
  background-color: #1e293b;
}

[data-theme="dark"] .tls-rpt-healthy {
  background-color: rgba(22, 163, 74, 0.2);
  color: #4ade80;
}

[data-theme="dark"] .tls-rpt-warning {
  background-color: rgba(217, 119, 6, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .tls-rpt-issues {
  background-color: rgba(220, 38, 38, 0.2);
  color: #f87171;
}

[data-theme="dark"] .tls-rpt-no-data {
  background-color: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .tls-rpt-failures {
  background-color: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .tls-rpt-failures h4 {
  color: #f87171;
}

[data-theme="dark"] .tls-rpt-failure-item {
  background-color: #1e293b;
}

[data-theme="dark"] .tls-rpt-failure-type {
  color: #f87171;
}

[data-theme="dark"] .tls-rpt-report-item {
  background-color: #1e293b;
}

[data-theme="dark"] .tls-rpt-setup-info {
  background-color: #1e293b;
}

[data-theme="dark"] .tls-rpt-setup-info code {
  background-color: #334155;
}

/* Responsive Styles for TLS-RPT */
@media (max-width: 768px) {
  .tls-rpt-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tls-rpt-stat-value {
    font-size: 20px;
  }

  .tls-rpt-report-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tls-rpt-report-stats {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .tls-rpt-summary {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   TLS-RPT Timeline Chart Styles
   ===================================================== */

.tls-rpt-timeline {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
}

.tls-rpt-timeline h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.tls-rpt-chart-container {
  position: relative;
}

.tls-rpt-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding-bottom: 24px;
  position: relative;
}

.tls-rpt-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.tls-rpt-bar-group:hover .tls-rpt-bar {
  opacity: 0.8;
}

.tls-rpt-bar-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  width: 100%;
}

.tls-rpt-bar {
  width: 100%;
  min-width: 8px;
  border-radius: 3px 3px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.tls-rpt-bar-success {
  background-color: #22c55e;
  width: 100%;
}

.tls-rpt-bar-failed {
  background-color: #ef4444;
  width: 100%;
}

.tls-rpt-bar-empty {
  background-color: #e2e8f0;
}

.tls-rpt-bar-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  position: absolute;
  bottom: 0;
}

.tls-rpt-chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
}

.tls-rpt-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.tls-rpt-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.tls-rpt-legend-success {
  background-color: #22c55e;
}

.tls-rpt-legend-failed {
  background-color: #ef4444;
}

/* TLS-RPT Chart Tooltip */
.tls-rpt-chart-tooltip {
  position: absolute;
  background-color: #1e293b;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.tls-rpt-tooltip-date {
  font-weight: 600;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.tls-rpt-tooltip-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tls-rpt-tooltip-stats .tooltip-success {
  color: #4ade80;
}

.tls-rpt-tooltip-stats .tooltip-failed {
  color: #f87171;
}

.tls-rpt-tooltip-stats .tooltip-rate {
  color: #94a3b8;
  font-style: italic;
}

.tls-rpt-tooltip-stats .tooltip-empty {
  color: #94a3b8;
  font-style: italic;
}

/* =====================================================
   TLS-RPT Recommendations Styles
   ===================================================== */

.tls-rpt-recommendations {
  margin-top: 24px;
  padding: 16px;
  background-color: #fef9e7;
  border-radius: 8px;
  border: 1px solid #f5d98e;
}

.tls-rpt-recommendations h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
}

.tls-rpt-reco-icon {
  width: 18px;
  height: 18px;
}

.tls-rpt-recommendation-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tls-rpt-recommendation-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 14px;
  border-left: 4px solid #d97706;
}

.tls-rpt-recommendation-item.tls-rpt-severity-high {
  border-left-color: #dc2626;
}

.tls-rpt-recommendation-item.tls-rpt-severity-medium {
  border-left-color: #d97706;
}

.tls-rpt-recommendation-item.tls-rpt-severity-low {
  border-left-color: #3b82f6;
}

.tls-rpt-recommendation-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.tls-rpt-recommendation-severity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tls-rpt-severity-high .tls-rpt-recommendation-severity {
  color: #dc2626;
}

.tls-rpt-severity-medium .tls-rpt-recommendation-severity {
  color: #d97706;
}

.tls-rpt-severity-low .tls-rpt-recommendation-severity {
  color: #3b82f6;
}

.tls-rpt-recommendation-header h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.tls-rpt-recommendation-desc {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tls-rpt-recommendation-action {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #16a34a;
  padding: 8px 10px;
  background-color: #f0fdf4;
  border-radius: 6px;
}

.tls-rpt-recommendation-action svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Dark Theme Support for TLS-RPT Timeline and Recommendations */
[data-theme="dark"] .tls-rpt-timeline {
  background-color: #1e293b;
}

[data-theme="dark"] .tls-rpt-bar-empty {
  background-color: #334155;
}

[data-theme="dark"] .tls-rpt-recommendations {
  background-color: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.3);
}

[data-theme="dark"] .tls-rpt-recommendations h4 {
  color: #fbbf24;
}

[data-theme="dark"] .tls-rpt-recommendation-item {
  background-color: #1e293b;
}

[data-theme="dark"] .tls-rpt-recommendation-action {
  background-color: rgba(22, 163, 74, 0.1);
  color: #4ade80;
}

[data-theme="dark"] .tls-rpt-severity-high .tls-rpt-recommendation-severity {
  color: #f87171;
}

[data-theme="dark"] .tls-rpt-severity-medium .tls-rpt-recommendation-severity {
  color: #fbbf24;
}

[data-theme="dark"] .tls-rpt-severity-low .tls-rpt-recommendation-severity {
  color: #60a5fa;
}

/* Responsive styles for TLS-RPT Timeline */
@media (max-width: 768px) {
  .tls-rpt-chart {
    height: 100px;
  }

  .tls-rpt-bar-label {
    display: none;
  }

  .tls-rpt-bar-group:nth-child(even) .tls-rpt-bar-label {
    display: block;
  }

  .tls-rpt-recommendation-item {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .tls-rpt-chart {
    height: 80px;
    gap: 2px;
  }

  .tls-rpt-chart-legend {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

/* ============================================= */
/* Enforcement Journey Tracker Styles            */
/* ============================================= */

.enforcement-journey-card {
  margin-bottom: 24px;
}

.enforcement-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.enforcement-badge svg {
  flex-shrink: 0;
}

.enforcement-complete {
  background-color: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.enforcement-ready {
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.enforcement-monitoring {
  background-color: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

/* Visual Progress Indicator */
.enforcement-progress {
  padding: 24px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.enforcement-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
}

.enforcement-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.step-marker {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e2e8f0;
  border: 3px solid #e2e8f0;
  transition: all 0.3s ease;
}

.step-completed .step-marker {
  background-color: #10b981;
  border-color: #10b981;
}

.step-current .step-marker {
  background-color: #fff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.step-check {
  width: 24px;
  height: 24px;
  color: #fff;
}

.step-current-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #3b82f6;
}

.step-future-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cbd5e1;
}

.step-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.step-policy-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
}

.step-completed .step-policy-name {
  color: #10b981;
}

.step-current .step-policy-name {
  color: #3b82f6;
}

.step-policy-tag {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: 'Monaco', 'Menlo', monospace;
  background-color: var(--main-bg);
  padding: 2px 8px;
  border-radius: 4px;
}

.enforcement-connector {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 8px;
}

.connector-arrow {
  width: 32px;
  height: 32px;
  color: #cbd5e1;
}

.connector-completed .connector-arrow {
  color: #10b981;
}

/* Readiness Percentage */
.enforcement-readiness {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.readiness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.readiness-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.readiness-percentage {
  font-size: 24px;
  font-weight: 700;
}

.readiness-percentage.readiness-excellent {
  color: #10b981;
}

.readiness-percentage.readiness-good {
  color: #3b82f6;
}

.readiness-percentage.readiness-warning {
  color: #f59e0b;
}

.readiness-percentage.readiness-low,
.readiness-percentage.readiness-none {
  color: #6b7280;
}

.readiness-bar-container {
  position: relative;
  margin-bottom: 12px;
}

.readiness-bar {
  height: 12px;
  background-color: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.readiness-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.readiness-fill.readiness-excellent {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.readiness-fill.readiness-good {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.readiness-fill.readiness-warning {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.readiness-fill.readiness-low,
.readiness-fill.readiness-none {
  background: linear-gradient(90deg, #9ca3af, #d1d5db);
}

.readiness-markers {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.readiness-markers .marker {
  font-size: 11px;
  color: var(--text-secondary);
}

.readiness-description {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Enforcement Criteria */
.enforcement-criteria h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.criteria-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.criteria-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--main-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.criteria-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.criteria-icon svg {
  width: 24px;
  height: 24px;
}

.criteria-pass .criteria-icon svg {
  color: #10b981;
}

.criteria-fail .criteria-icon svg {
  color: #ef4444;
}

.criteria-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.criteria-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.criteria-value {
  font-size: 13px;
  color: var(--text-secondary);
}

.criteria-pass .criteria-value {
  color: #10b981;
}

.criteria-fail .criteria-value {
  color: #ef4444;
}

.criteria-explanation {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 0 0;
  line-height: 1.5;
}

.criteria-pass .criteria-explanation {
  color: var(--text-secondary);
}

.criteria-fail .criteria-explanation {
  color: var(--text-secondary);
}

.criteria-header {
  margin-bottom: 16px;
}

.criteria-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.criteria-description code {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* Advancement Summary */
.advancement-summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
}

.safe-to-advance {
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.not-safe-to-advance {
  background-color: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.summary-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.safe-to-advance .summary-icon {
  color: #10b981;
}

.not-safe-to-advance .summary-icon {
  color: #f59e0b;
}

.summary-content {
  flex: 1;
}

.summary-content strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.safe-to-advance .summary-content strong {
  color: #059669;
}

.not-safe-to-advance .summary-content strong {
  color: #d97706;
}

.summary-content p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.summary-content code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* Enforcement Complete Message */
.enforcement-complete-message {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
}

.enforcement-complete-message .complete-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: #10b981;
}

.enforcement-complete-message strong {
  display: block;
  font-size: 16px;
  color: #059669;
  margin-bottom: 6px;
}

.enforcement-complete-message p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.enforcement-complete-message code {
  background-color: rgba(16, 185, 129, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: #059669;
}

/* Dark Theme Support */
[data-theme="dark"] .enforcement-complete {
  background-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .enforcement-ready {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .enforcement-monitoring {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .step-marker {
  background-color: #374151;
  border-color: #374151;
}

[data-theme="dark"] .step-completed .step-marker {
  background-color: #10b981;
  border-color: #10b981;
}

[data-theme="dark"] .step-current .step-marker {
  background-color: #1f2937;
  border-color: #3b82f6;
}

[data-theme="dark"] .step-future-dot {
  background-color: #4b5563;
}

[data-theme="dark"] .step-policy-name {
  color: #9ca3af;
}

[data-theme="dark"] .step-completed .step-policy-name {
  color: #34d399;
}

[data-theme="dark"] .step-current .step-policy-name {
  color: #60a5fa;
}

[data-theme="dark"] .step-policy-tag {
  background-color: #1f2937;
  color: #9ca3af;
}

[data-theme="dark"] .connector-arrow {
  color: #4b5563;
}

[data-theme="dark"] .connector-completed .connector-arrow {
  color: #34d399;
}

[data-theme="dark"] .readiness-header h4 {
  color: #f1f5f9;
}

[data-theme="dark"] .readiness-bar {
  background-color: #374151;
}

[data-theme="dark"] .enforcement-criteria h4 {
  color: #f1f5f9;
}

[data-theme="dark"] .criteria-item {
  background-color: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .criteria-name {
  color: #f1f5f9;
}

[data-theme="dark"] .criteria-pass .criteria-icon svg {
  color: #34d399;
}

[data-theme="dark"] .criteria-fail .criteria-icon svg {
  color: #f87171;
}

[data-theme="dark"] .criteria-pass .criteria-value {
  color: #34d399;
}

[data-theme="dark"] .criteria-fail .criteria-value {
  color: #f87171;
}

[data-theme="dark"] .criteria-explanation {
  color: #9ca3af;
}

[data-theme="dark"] .criteria-description {
  color: #9ca3af;
}

[data-theme="dark"] .criteria-description code {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .safe-to-advance {
  background-color: rgba(16, 185, 129, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .not-safe-to-advance {
  background-color: rgba(245, 158, 11, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .safe-to-advance .summary-content strong {
  color: #34d399;
}

[data-theme="dark"] .not-safe-to-advance .summary-content strong {
  color: #fbbf24;
}

[data-theme="dark"] .summary-content code {
  background-color: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
}

[data-theme="dark"] .enforcement-complete-message {
  background-color: rgba(16, 185, 129, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .enforcement-complete-message .complete-icon {
  color: #34d399;
}

[data-theme="dark"] .enforcement-complete-message strong {
  color: #34d399;
}

[data-theme="dark"] .enforcement-complete-message code {
  background-color: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

/* Responsive Styles for Enforcement Journey */
@media (max-width: 768px) {
  .enforcement-track {
    flex-direction: column;
    gap: 16px;
  }

  .enforcement-connector {
    transform: rotate(90deg);
    min-width: auto;
    padding: 4px 0;
  }

  .connector-arrow {
    width: 24px;
    height: 24px;
  }

  .step-marker {
    width: 40px;
    height: 40px;
  }

  .step-check {
    width: 20px;
    height: 20px;
  }

  .step-current-dot {
    width: 14px;
    height: 14px;
  }

  .step-future-dot {
    width: 10px;
    height: 10px;
  }

  .readiness-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .readiness-percentage {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .enforcement-progress {
    padding: 16px 0;
  }

  .step-marker {
    width: 36px;
    height: 36px;
  }

  .step-policy-name {
    font-size: 13px;
  }

  .step-policy-tag {
    font-size: 11px;
  }

  .criteria-item {
    padding: 10px 12px;
  }

  .advancement-summary {
    flex-direction: column;
    gap: 12px;
  }

  .summary-icon {
    width: 24px;
    height: 24px;
  }

  .enforcement-complete-message {
    flex-direction: column;
    gap: 12px;
  }
}

/* =====================================================
   Advancement Blockers & Recommendations (US-032)
   ===================================================== */

/* Blockers Section */
.advancement-blockers {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.blockers-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #b45309;
  margin: 0 0 16px 0;
}

.blockers-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.blockers-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual Blocker Item */
.blocker-item {
  background-color: #fefce8;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 16px;
  transition: box-shadow 0.2s ease;
}

.blocker-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blocker-severity-high {
  background-color: #fef2f2;
  border-color: #fca5a5;
}

.blocker-severity-medium {
  background-color: #fff7ed;
  border-color: #fdba74;
}

.blocker-severity-low {
  background-color: #f0fdf4;
  border-color: #86efac;
}

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

.blocker-severity-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
}

.severity-high {
  background-color: #dc2626;
  color: white;
}

.severity-medium {
  background-color: #ea580c;
  color: white;
}

.severity-low {
  background-color: #16a34a;
  color: white;
}

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

.blocker-description {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Next Steps */
.blocker-next-steps {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  padding: 12px;
}

.next-steps-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.next-steps-list {
  margin: 0;
  padding-left: 20px;
  list-style-type: decimal;
}

.next-step-item {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.next-step-item:last-child {
  margin-bottom: 0;
}

.next-step-item strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.step-description {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
}

/* DNS Record Suggestion Section */
.advancement-dns-suggestion {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.dns-suggestion-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #059669;
  margin: 0 0 16px 0;
}

.dns-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dns-suggestion-content {
  background-color: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 16px;
}

.dns-suggestion-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: #ecfdf5;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #065f46;
  line-height: 1.5;
}

.dns-suggestion-note .note-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #059669;
}

.dns-record-box {
  background-color: white;
  border: 1px solid #d1fae5;
  border-radius: 6px;
  overflow: hidden;
}

.dns-record-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background-color: #ecfdf5;
  border-bottom: 1px solid #d1fae5;
}

.dns-record-type-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #10b981;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
}

.dns-record-host {
  font-size: 13px;
  font-family: monospace;
  color: #047857;
}

.dns-record-value-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.dns-record-code {
  flex: 1;
  font-size: 13px;
  font-family: monospace;
  color: #1e293b;
  background-color: #f8fafc;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  word-break: break-all;
}

.copy-dns-btn {
  flex-shrink: 0;
}

.dns-suggestion-help {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: #047857;
  line-height: 1.5;
}

/* Dark Theme for Blockers */
[data-theme="dark"] .blockers-title {
  color: #fbbf24;
}

[data-theme="dark"] .blocker-item {
  background-color: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .blocker-severity-high {
  background-color: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .blocker-severity-medium {
  background-color: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.3);
}

[data-theme="dark"] .blocker-severity-low {
  background-color: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .blocker-title {
  color: #f1f5f9;
}

[data-theme="dark"] .blocker-description {
  color: #94a3b8;
}

[data-theme="dark"] .blocker-next-steps {
  background-color: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .next-step-item {
  color: #e2e8f0;
}

[data-theme="dark"] .next-step-item strong {
  color: #f1f5f9;
}

[data-theme="dark"] .step-description {
  color: #94a3b8;
}

[data-theme="dark"] .next-steps-label {
  color: #9ca3af;
}

/* Dark Theme for DNS Suggestion */
[data-theme="dark"] .dns-suggestion-title {
  color: #34d399;
}

[data-theme="dark"] .dns-suggestion-content {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .dns-suggestion-note {
  background-color: rgba(0, 0, 0, 0.2);
  color: #a7f3d0;
}

[data-theme="dark"] .dns-suggestion-note .note-icon {
  color: #34d399;
}

[data-theme="dark"] .dns-record-box {
  background-color: #1f2937;
  border-color: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .dns-record-label {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(52, 211, 153, 0.2);
}

[data-theme="dark"] .dns-record-type-badge {
  background-color: #10b981;
}

[data-theme="dark"] .dns-record-host {
  color: #34d399;
}

[data-theme="dark"] .dns-record-code {
  background-color: #111827;
  border-color: #374151;
  color: #d1d5db;
}

[data-theme="dark"] .dns-suggestion-help {
  color: #a7f3d0;
}

/* Responsive Styles for Blockers */
@media (max-width: 768px) {
  .blocker-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .blocker-severity-badge {
    font-size: 10px;
  }

  .dns-record-value-box {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-dns-btn {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .advancement-blockers {
    margin-top: 16px;
    padding-top: 16px;
  }

  .blockers-title {
    font-size: 14px;
  }

  .blocker-item {
    padding: 12px;
  }

  .blocker-next-steps {
    padding: 10px;
  }

  .next-steps-list {
    padding-left: 16px;
  }

  .advancement-dns-suggestion {
    margin-top: 16px;
    padding-top: 16px;
  }

  .dns-suggestion-title {
    font-size: 14px;
  }

  .dns-suggestion-content {
    padding: 12px;
  }

  .dns-record-code {
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* ======================================
   Hosted SPF Styles
   ====================================== */

/* Promo section in domain show */
.hosted-spf-promo {
  margin-top: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
}

.hosted-spf-promo h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #0c4a6e;
}

.hosted-spf-promo h4 .spf-section-icon {
  width: 18px;
  height: 18px;
  color: #0284c7;
}

.hosted-spf-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hosted-spf-badge.hosted-spf-active {
  background-color: #dcfce7;
  color: #166534;
}

.hosted-spf-badge.hosted-spf-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.hosted-spf-badge.hosted-spf-not-configured {
  background-color: #f1f5f9;
  color: #64748b;
}

.hosted-spf-promo-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hosted-spf-promo-content p {
  margin: 0;
  color: #0369a1;
  font-size: 14px;
  line-height: 1.5;
}

.hosted-spf-active-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hosted-spf-active-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hosted-spf-active-icon svg {
  width: 20px;
  height: 20px;
  color: #16a34a;
}

.hosted-spf-active-info {
  flex: 1;
}

.hosted-spf-active-info strong {
  display: block;
  color: #166534;
  font-size: 14px;
}

.hosted-spf-active-info p {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #15803d;
}

/* Hosted SPF Setup Page */
.hosted-spf-current {
  margin-bottom: 24px;
}

.hosted-spf-record-display {
  margin-bottom: 20px;
}

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

.hosted-spf-record-code {
  display: block;
  padding: 12px 16px;
  background-color: #f1f5f9;
  border-radius: 8px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
}

.hosted-spf-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.hosted-spf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  background-color: #f8fafc;
  border-radius: 8px;
}

.hosted-spf-stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.hosted-spf-stat-value.text-danger {
  color: #dc2626;
}

.hosted-spf-stat-value.text-warning {
  color: #d97706;
}

.hosted-spf-stat-value.text-success {
  color: #16a34a;
}

.hosted-spf-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.hosted-spf-alert {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.hosted-spf-alert .alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.hosted-spf-alert-danger {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}

.hosted-spf-alert-danger .alert-icon {
  color: #dc2626;
}

.hosted-spf-alert-danger strong {
  color: #991b1b;
}

.hosted-spf-alert-danger p {
  margin: 4px 0 0 0;
  color: #b91c1c;
  font-size: 13px;
}

.hosted-spf-alert-warning {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
}

.hosted-spf-alert-warning .alert-icon {
  color: #d97706;
}

.hosted-spf-alert-warning strong {
  color: #92400e;
}

.hosted-spf-alert-warning p {
  margin: 4px 0 0 0;
  color: #b45309;
  font-size: 13px;
}

.hosted-spf-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.hosted-spf-empty .empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: #94a3b8;
}

.hosted-spf-empty h3 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
  font-size: 18px;
}

.hosted-spf-empty p {
  margin: 0;
  font-size: 14px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Enable Card */
.hosted-spf-enable-card {
  border: 2px solid #bae6fd;
}

.hosted-spf-benefits h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: var(--text-primary);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.benefit-item {
  display: flex;
  gap: 16px;
}

.benefit-item .benefit-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #0284c7;
}

.benefit-item strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.benefit-item p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hosted-spf-enable-form {
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.hosted-spf-enable-form h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
}

.hosted-spf-enable-form p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Active Card */
.hosted-spf-active-card {
  border: 2px solid #bbf7d0;
}

.hosted-spf-active-message {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background-color: #f0fdf4;
  border-radius: 8px;
  margin-bottom: 24px;
}

.hosted-spf-active-message .success-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #16a34a;
}

.hosted-spf-active-message strong {
  display: block;
  color: #166534;
  margin-bottom: 4px;
}

.hosted-spf-active-message p {
  margin: 0;
  font-size: 14px;
  color: #15803d;
}

.hosted-spf-details {
  margin-bottom: 24px;
}

.hosted-spf-detail-row {
  margin-bottom: 20px;
}

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

.hosted-spf-include-display,
.hosted-spf-dns-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.hosted-spf-include-display code,
.hosted-spf-dns-suggestion code {
  flex: 1;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
}

.dns-record-full {
  background-color: transparent;
  padding: 0;
}

.copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.copy-btn:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.copy-btn .btn-icon {
  width: 14px;
  height: 14px;
}

.hosted-spf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.hosted-spf-stat-card {
  text-align: center;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
}

.hosted-spf-stat-card .stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.hosted-spf-stat-card .stat-value.text-success {
  color: #16a34a;
}

.hosted-spf-stat-card .stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.hosted-spf-flattened-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.hosted-spf-flattened-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 15px;
}

.hosted-spf-flattened-section .section-icon {
  width: 18px;
  height: 18px;
  color: #0284c7;
}

.hosted-spf-flattened-section .section-description {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.hosted-spf-record-box {
  padding: 16px;
  background-color: #1e293b;
  border-radius: 8px;
  overflow-x: auto;
}

.hosted-spf-record-box code {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 13px;
  color: #e2e8f0;
  word-break: break-all;
  white-space: pre-wrap;
}

.hosted-spf-sources {
  margin-top: 20px;
}

.hosted-spf-sources h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-primary);
}

.source-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-includes-list li {
  padding: 4px 10px;
  background-color: #f1f5f9;
  border-radius: 4px;
}

.source-includes-list code {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--text-primary);
}

.hosted-spf-actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hosted-spf-actions .refresh-note {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.hosted-spf-refresh-result {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.hosted-spf-refresh-result svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.refresh-changed {
  background-color: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.refresh-unchanged {
  background-color: #f0f9ff;
  border: 1px solid #7dd3fc;
  color: #0369a1;
}

.refresh-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Spinning animation for refresh button */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinning {
  animation: spin 1s linear infinite;
}

/* Mobile responsive for hosted SPF */
@media (max-width: 768px) {
  .hosted-spf-promo-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .hosted-spf-active-summary {
    flex-direction: column;
    text-align: center;
  }

  .hosted-spf-stats {
    flex-direction: column;
    gap: 12px;
  }

  .hosted-spf-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .hosted-spf-include-display,
  .hosted-spf-dns-suggestion {
    flex-direction: column;
    align-items: stretch;
  }

  .hosted-spf-include-display .copy-btn,
  .hosted-spf-dns-suggestion .copy-btn {
    margin-top: 8px;
  }
}

/* ============================================
   THREAT INTELLIGENCE SECTION STYLES
   ============================================ */

.threat-intelligence-card {
  margin-bottom: 24px;
}

.threat-intelligence-card .section-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

/* Threat Count Badge */
.threat-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.threat-count-badge.threat-high {
  background-color: #fee2e2;
  color: #991b1b;
}

.threat-count-badge.threat-medium {
  background-color: #fef3c7;
  color: #92400e;
}

.threat-count-badge.threat-none {
  background-color: #dcfce7;
  color: #166534;
}

/* Threat Alert Banner */
.threat-alert {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.threat-alert-danger {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
}

.threat-alert-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #dc2626;
}

.threat-alert-content {
  flex: 1;
}

.threat-alert-content strong {
  display: block;
  font-size: 15px;
  color: #991b1b;
  margin-bottom: 4px;
}

.threat-alert-content p {
  font-size: 14px;
  color: #991b1b;
  margin: 0;
}

/* Threat Summary Grid */
.threat-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

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

.threat-summary-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.threat-summary-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.threat-summary-item.threat-summary-danger .threat-summary-value {
  color: #dc2626;
}

/* Lookalike Domains List */
.lookalike-domains-list {
  margin-bottom: 20px;
}

.lookalike-domains-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.lookalike-domains-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Lookalike Table */
.lookalike-domains-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.lookalike-domains-table {
  width: 100%;
  border-collapse: collapse;
}

.lookalike-domains-table th,
.lookalike-domains-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.lookalike-domains-table th {
  background-color: #f8fafc;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lookalike-domains-table tbody tr:last-child td {
  border-bottom: none;
}

.lookalike-domains-table tbody tr:hover {
  background-color: #f8fafc;
}

.lookalike-row-danger {
  background-color: #fef2f2;
}

.lookalike-row-danger:hover {
  background-color: #fee2e2 !important;
}

/* Domain Name Cell */
.lookalike-domain-name {
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 14px;
}

.lookalike-domain-name .domain-text {
  color: var(--text-primary);
}

/* Type Badge */
.lookalike-type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background-color: #f1f5f9;
  color: #475569;
}

/* Status Badge */
.lookalike-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.lookalike-status .status-icon-small {
  width: 14px;
  height: 14px;
}

.lookalike-status.lookalike-status-danger {
  background-color: #fee2e2;
  color: #991b1b;
}

.lookalike-status.lookalike-status-warning {
  background-color: #fef3c7;
  color: #92400e;
}

.lookalike-status.lookalike-status-safe {
  background-color: #dcfce7;
  color: #166534;
}

/* Severity Badge */
.lookalike-severity {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lookalike-severity-high {
  background-color: #fee2e2;
  color: #991b1b;
}

.lookalike-severity-medium {
  background-color: #fef3c7;
  color: #92400e;
}

.lookalike-severity-low {
  background-color: #e0f2fe;
  color: #0369a1;
}

/* Date Cell */
.lookalike-date {
  font-size: 13px;
  color: var(--text-secondary);
}

.lookalike-date .no-date {
  color: var(--text-muted);
  font-style: italic;
}

/* Actions Cell */
.lookalike-actions {
  white-space: nowrap;
}

.btn-link-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  transition: background-color 0.2s, color 0.2s;
}

.btn-link-small:hover {
  background-color: var(--primary-color);
  color: white;
}

.btn-link-small .action-icon {
  width: 14px;
  height: 14px;
}

/* Details Row (for registrar info) */
.lookalike-details-row td {
  background-color: #f8fafc;
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.lookalike-details-row:hover td {
  background-color: #f1f5f9;
}

.lookalike-registrar {
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 8px;
}

/* More Info */
.lookalike-more-info {
  padding: 12px 16px;
  text-align: center;
  background-color: #f8fafc;
  border-radius: 0 0 8px 8px;
  border: 1px solid var(--border-color);
  border-top: none;
  margin-top: -1px;
}

.lookalike-more-info p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* Threat Info Box */
.threat-info-box {
  display: flex;
  gap: 16px;
  padding: 16px;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.threat-info-box .info-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #0284c7;
}

.threat-info-content {
  flex: 1;
}

.threat-info-content p {
  font-size: 14px;
  color: #0369a1;
  margin: 0 0 8px;
}

.threat-info-content p:last-child {
  margin-bottom: 0;
}

/* Empty State */
.threat-empty-state {
  padding: 48px 24px;
  text-align: center;
}

.threat-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #22c55e;
}

.threat-empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.threat-empty-state p {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

.threat-empty-state .last-check-info {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================
   DARK THEME - THREAT INTELLIGENCE
   ============================================ */

[data-theme="dark"] .threat-count-badge.threat-high {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

[data-theme="dark"] .threat-count-badge.threat-medium {
  background-color: rgba(234, 179, 8, 0.2);
  color: #fcd34d;
}

[data-theme="dark"] .threat-count-badge.threat-none {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

[data-theme="dark"] .threat-alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .threat-alert-content strong,
[data-theme="dark"] .threat-alert-content p {
  color: #fca5a5;
}

[data-theme="dark"] .threat-alert-icon {
  color: #f87171;
}

[data-theme="dark"] .threat-summary {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .threat-summary-item.threat-summary-danger .threat-summary-value {
  color: #f87171;
}

[data-theme="dark"] .lookalike-domains-table-wrapper {
  border-color: var(--border-color);
}

[data-theme="dark"] .lookalike-domains-table th {
  background-color: #2d3748;
  color: var(--text-secondary);
}

[data-theme="dark"] .lookalike-domains-table td {
  border-color: var(--border-color);
}

[data-theme="dark"] .lookalike-domains-table tbody tr:hover {
  background-color: #2d3748;
}

[data-theme="dark"] .lookalike-row-danger {
  background-color: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .lookalike-row-danger:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="dark"] .lookalike-type-badge {
  background-color: #374151;
  color: #d1d5db;
}

[data-theme="dark"] .lookalike-status.lookalike-status-danger {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

[data-theme="dark"] .lookalike-status.lookalike-status-warning {
  background-color: rgba(234, 179, 8, 0.2);
  color: #fcd34d;
}

[data-theme="dark"] .lookalike-status.lookalike-status-safe {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

[data-theme="dark"] .lookalike-severity-high {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

[data-theme="dark"] .lookalike-severity-medium {
  background-color: rgba(234, 179, 8, 0.2);
  color: #fcd34d;
}

[data-theme="dark"] .lookalike-severity-low {
  background-color: rgba(14, 165, 233, 0.2);
  color: #7dd3fc;
}

[data-theme="dark"] .lookalike-details-row td {
  background-color: #374151;
}

[data-theme="dark"] .lookalike-details-row:hover td {
  background-color: #4b5563;
}

[data-theme="dark"] .lookalike-more-info {
  background-color: #2d3748;
  border-color: var(--border-color);
}

[data-theme="dark"] .threat-info-box {
  background-color: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.3);
}

[data-theme="dark"] .threat-info-box .info-icon {
  color: #7dd3fc;
}

[data-theme="dark"] .threat-info-content p {
  color: #7dd3fc;
}

[data-theme="dark"] .threat-empty-icon {
  color: #86efac;
}

/* ============================================
   RESPONSIVE - THREAT INTELLIGENCE
   ============================================ */

@media (max-width: 768px) {
  .threat-summary {
    flex-direction: column;
    gap: 16px;
  }

  .threat-summary-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .lookalike-domains-table th:nth-child(3),
  .lookalike-domains-table td:nth-child(3),
  .lookalike-domains-table th:nth-child(5),
  .lookalike-domains-table td:nth-child(5) {
    display: none;
  }

  .lookalike-domain-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .threat-alert {
    flex-direction: column;
    gap: 12px;
  }

  .threat-info-box {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .lookalike-domains-table th:nth-child(2),
  .lookalike-domains-table td:nth-child(2),
  .lookalike-domains-table th:nth-child(4),
  .lookalike-domains-table td:nth-child(4) {
    display: none;
  }

  .lookalike-domains-table th,
  .lookalike-domains-table td {
    padding: 10px 12px;
  }

  .btn-link-small {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* ==========================================================================
   Forensic Reports (RUF) Section
   ========================================================================== */

/* Dashboard Card Styles */
.forensic-reports-card {
  margin-bottom: 24px;
}

.forensic-reports-card .section-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: var(--text-secondary);
}

.forensic-reports-card h2 {
  display: flex;
  align-items: center;
}

/* Forensic Badge */
.forensic-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

.forensic-badge.forensic-has-data {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.forensic-badge.forensic-no-data {
  background-color: rgba(148, 163, 184, 0.1);
  color: var(--text-secondary);
}

[data-theme="dark"] .forensic-badge.forensic-has-data {
  background-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .forensic-badge.forensic-no-data {
  background-color: rgba(148, 163, 184, 0.15);
}

/* Forensic Summary Stats */
.forensic-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.forensic-stat {
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.forensic-stat-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.forensic-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.forensic-stat-value.forensic-danger {
  color: #ef4444;
}

/* Recent Reports Section */
.forensic-recent {
  margin-bottom: 24px;
}

.forensic-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.forensic-recent-header h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.forensic-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.forensic-view-all-link:hover {
  text-decoration: underline;
}

/* Reports List */
.forensic-reports-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forensic-report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.forensic-report-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.forensic-report-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.forensic-severity-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.forensic-severity-indicator.forensic-severity-critical {
  background-color: #dc2626;
}

.forensic-severity-indicator.forensic-severity-high {
  background-color: #f97316;
}

.forensic-severity-indicator.forensic-severity-medium {
  background-color: #eab308;
}

.forensic-severity-indicator.forensic-severity-low {
  background-color: #22c55e;
}

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

.forensic-report-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.forensic-report-source {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

.forensic-report-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.forensic-report-details {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.forensic-report-from {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forensic-report-reason {
  color: var(--text-secondary);
}

.forensic-report-results {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.forensic-result {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.forensic-result-pass {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.forensic-result-fail {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

[data-theme="dark"] .forensic-result-pass {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .forensic-result-fail {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Quick Filters */
.forensic-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.forensic-filters-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.forensic-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
}

.forensic-filter-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
}

.forensic-filter-btn svg {
  color: inherit;
}

/* Empty State */
.forensic-empty {
  text-align: center;
  padding: 48px 24px;
}

.forensic-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  color: var(--text-secondary);
  opacity: 0.5;
}

.forensic-empty-icon svg {
  width: 100%;
  height: 100%;
}

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

.forensic-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto 24px;
}

.forensic-setup-info {
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.forensic-setup-info h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.forensic-setup-info p {
  margin: 0 0 12px;
  max-width: none;
}

.forensic-info-box {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 6px;
  font-size: 13px;
  color: #854d0e;
}

[data-theme="dark"] .forensic-info-box {
  background-color: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.25);
  color: #fbbf24;
}

/* ==========================================================================
   Forensic Reports List Page
   ========================================================================== */

/* Stats Grid */
.forensic-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.forensic-stat-card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.forensic-stat-card-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.forensic-stat-card-value {
  display: block;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
}

.forensic-stat-card-spf {
  border-left: 3px solid #3b82f6;
}

.forensic-stat-card-dkim {
  border-left: 3px solid #8b5cf6;
}

.forensic-stat-card-alignment {
  border-left: 3px solid #f97316;
}

/* Filter Tabs */
.forensic-list-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.forensic-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.forensic-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
}

.forensic-filter-tab:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.forensic-filter-tab.active {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.filter-tab-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.forensic-spf-indicator {
  background-color: #3b82f6;
}

.forensic-dkim-indicator {
  background-color: #8b5cf6;
}

.forensic-alignment-indicator {
  background-color: #f97316;
}

.forensic-filter-tab.active .filter-tab-indicator {
  background-color: #fff;
}

.forensic-result-count {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Reports Table */
.forensic-reports-table {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.forensic-reports-header {
  display: grid;
  grid-template-columns: 100px 140px 1fr 140px 200px 100px;
  gap: 16px;
  padding: 14px 20px;
  background-color: var(--background);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.forensic-reports-body {
  display: flex;
  flex-direction: column;
}

.forensic-report-row {
  display: grid;
  grid-template-columns: 100px 140px 1fr 140px 200px 100px;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color 0.2s;
}

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

.forensic-report-row:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .forensic-report-row:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

/* Severity Badge */
.forensic-severity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.forensic-severity-badge.forensic-severity-critical {
  background-color: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.forensic-severity-badge.forensic-severity-high {
  background-color: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}

.forensic-severity-badge.forensic-severity-medium {
  background-color: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
}

.forensic-severity-badge.forensic-severity-low {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

[data-theme="dark"] .forensic-severity-badge.forensic-severity-critical {
  background-color: rgba(220, 38, 38, 0.2);
  color: #f87171;
}

[data-theme="dark"] .forensic-severity-badge.forensic-severity-high {
  background-color: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

[data-theme="dark"] .forensic-severity-badge.forensic-severity-medium {
  background-color: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .forensic-severity-badge.forensic-severity-low {
  background-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

/* Column Styles */
.forensic-col-source {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forensic-source-ip {
  font-family: monospace;
  font-size: 13px;
  color: var(--text-primary);
}

.forensic-source-country {
  font-size: 12px;
  color: var(--text-secondary);
}

.forensic-col-sender {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.forensic-header-from {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forensic-envelope-from {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forensic-col-type {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forensic-failure-type {
  font-size: 14px;
  color: var(--text-primary);
}

.forensic-failure-reason {
  font-size: 12px;
  color: var(--text-secondary);
}

.forensic-col-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.forensic-auth-result {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

.forensic-auth-result.forensic-auth-pass {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.forensic-auth-result.forensic-auth-fail {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

[data-theme="dark"] .forensic-auth-result.forensic-auth-pass {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .forensic-auth-result.forensic-auth-fail {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.forensic-col-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.forensic-date {
  font-size: 13px;
  color: var(--text-primary);
}

.forensic-time {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Pagination */
.forensic-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 16px 0;
}

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

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

.pagination-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-link:hover:not(.disabled) {
  border-color: #3b82f6;
  color: #3b82f6;
}

.pagination-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-page:hover:not(.active) {
  border-color: #3b82f6;
  color: #3b82f6;
}

.pagination-page.active {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.pagination-ellipsis {
  padding: 0 8px;
  color: var(--text-secondary);
}

/* Empty List State */
.forensic-empty-list {
  text-align: center;
  padding: 64px 24px;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.forensic-empty-list .forensic-empty-icon {
  margin-bottom: 24px;
}

.forensic-empty-list h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.forensic-empty-list p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px;
}

/* ==========================================================================
   Forensic Report Detail Page
   ========================================================================== */

/* Severity Banner */
.forensic-detail-severity {
  padding: 16px 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}

.forensic-detail-severity.forensic-severity-critical {
  background-color: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.forensic-detail-severity.forensic-severity-high {
  background-color: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.forensic-detail-severity.forensic-severity-medium {
  background-color: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.forensic-detail-severity.forensic-severity-low {
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .forensic-detail-severity.forensic-severity-critical {
  background-color: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .forensic-detail-severity.forensic-severity-high {
  background-color: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.25);
}

[data-theme="dark"] .forensic-detail-severity.forensic-severity-medium {
  background-color: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.25);
}

[data-theme="dark"] .forensic-detail-severity.forensic-severity-low {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.25);
}

.severity-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.severity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.forensic-severity-critical .severity-icon {
  color: #dc2626;
}

.forensic-severity-high .severity-icon {
  color: #ea580c;
}

.forensic-severity-medium .severity-icon {
  color: #ca8a04;
}

.forensic-severity-low .severity-icon {
  color: #16a34a;
}

[data-theme="dark"] .forensic-severity-critical .severity-icon {
  color: #f87171;
}

[data-theme="dark"] .forensic-severity-high .severity-icon {
  color: #fb923c;
}

[data-theme="dark"] .forensic-severity-medium .severity-icon {
  color: #fbbf24;
}

[data-theme="dark"] .forensic-severity-low .severity-icon {
  color: #4ade80;
}

.severity-text {
  display: flex;
  flex-direction: column;
}

.severity-text strong {
  font-size: 16px;
  color: var(--text-primary);
}

.severity-text span {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Detail Grid */
.forensic-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* Detail Cards */
.forensic-detail-card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.forensic-detail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--background);
  border-bottom: 1px solid var(--border-color);
}

.forensic-detail-card-header h2 {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.forensic-detail-card-header .section-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: var(--text-secondary);
}

.forensic-detail-card-body {
  padding: 20px;
}

/* Redacted Badge */
.forensic-redacted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #3b82f6;
}

[data-theme="dark"] .forensic-redacted-badge {
  background-color: rgba(59, 130, 246, 0.15);
}

/* Authentication Grid */
.forensic-auth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.forensic-auth-item {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.forensic-auth-item.forensic-auth-passed {
  background-color: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.2);
}

.forensic-auth-item.forensic-auth-failed {
  background-color: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .forensic-auth-item.forensic-auth-passed {
  background-color: rgba(34, 197, 94, 0.1);
}

[data-theme="dark"] .forensic-auth-item.forensic-auth-failed {
  background-color: rgba(239, 68, 68, 0.1);
}

.forensic-auth-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.forensic-auth-icon {
  display: flex;
  align-items: center;
}

.forensic-auth-passed .forensic-auth-icon {
  color: #16a34a;
}

.forensic-auth-failed .forensic-auth-icon {
  color: #dc2626;
}

[data-theme="dark"] .forensic-auth-passed .forensic-auth-icon {
  color: #4ade80;
}

[data-theme="dark"] .forensic-auth-failed .forensic-auth-icon {
  color: #f87171;
}

.forensic-auth-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.forensic-auth-result-badge {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.forensic-auth-passed .forensic-auth-result-badge {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.forensic-auth-failed .forensic-auth-result-badge {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

[data-theme="dark"] .forensic-auth-passed .forensic-auth-result-badge {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .forensic-auth-failed .forensic-auth-result-badge {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.forensic-auth-detail {
  display: flex;
  gap: 8px;
  font-size: 13px;
  margin-top: 6px;
}

.forensic-auth-label {
  color: var(--text-secondary);
}

.forensic-auth-value {
  color: var(--text-primary);
  font-family: monospace;
  font-size: 12px;
}

/* Info List */
.forensic-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forensic-info-row {
  display: flex;
  gap: 12px;
}

.forensic-info-label {
  flex-shrink: 0;
  width: 120px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.forensic-info-value {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-all;
}

.forensic-message-id,
.forensic-hash,
.forensic-report-id {
  font-family: monospace;
  font-size: 12px;
  background-color: var(--background);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.forensic-ip-lookup-link {
  margin-left: 8px;
  color: #3b82f6;
  vertical-align: middle;
}

.forensic-ip-lookup-link:hover {
  color: #2563eb;
}

/* Status Badge */
.forensic-status-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.forensic-status-badge.forensic-status-processed {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.forensic-status-badge.forensic-status-pending {
  background-color: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
}

.forensic-status-badge.forensic-status-failed {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

[data-theme="dark"] .forensic-status-badge.forensic-status-processed {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .forensic-status-badge.forensic-status-pending {
  background-color: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .forensic-status-badge.forensic-status-failed {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Headers Section */
.forensic-headers-card {
  grid-column: 1 / -1;
}

.forensic-toggle-headers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.forensic-toggle-headers:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.forensic-headers-body {
  background-color: #1e293b;
  padding: 20px;
}

[data-theme="dark"] .forensic-headers-body {
  background-color: #0f172a;
}

.forensic-headers-content {
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
}

.forensic-header-row {
  display: flex;
  margin-bottom: 8px;
}

.forensic-header-name {
  color: #93c5fd;
  margin-right: 8px;
  flex-shrink: 0;
}

.forensic-header-value {
  color: #e2e8f0;
  word-break: break-all;
}

.forensic-raw-headers {
  color: #e2e8f0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Linked Data Card */
.forensic-linked-card {
  grid-column: 1 / -1;
}

.forensic-linked-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.forensic-linked-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forensic-linked-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.forensic-linked-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forensic-linked-org {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.forensic-linked-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.forensic-linked-stats {
  display: flex;
  gap: 12px;
  align-items: center;
}

.forensic-linked-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.forensic-linked-disposition {
  padding: 3px 8px;
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Actions */
.forensic-detail-actions {
  margin-top: 24px;
}

/* Responsive */
@media (max-width: 1024px) {
  .forensic-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .forensic-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .forensic-detail-grid {
    grid-template-columns: 1fr;
  }

  .forensic-auth-grid {
    grid-template-columns: 1fr;
  }

  .forensic-reports-header {
    display: none;
  }

  .forensic-report-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .forensic-col-severity {
    order: -1;
  }

  .forensic-col-results {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .forensic-col-date {
    text-align: left;
    flex-direction: row;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .forensic-summary {
    grid-template-columns: 1fr;
  }

  .forensic-stats-grid {
    grid-template-columns: 1fr;
  }

  .forensic-list-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .forensic-filter-tabs {
    flex-wrap: wrap;
  }

  .forensic-filter-tab {
    flex: 1;
    justify-content: center;
  }

  .forensic-pagination {
    flex-direction: column;
    gap: 16px;
  }

  .pagination-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .forensic-report-details {
    flex-direction: column;
    gap: 4px;
  }

  .forensic-report-from {
    max-width: none;
  }

  .forensic-info-row {
    flex-direction: column;
    gap: 4px;
  }

  .forensic-info-label {
    width: auto;
  }
}

@media (max-width: 480px) {
  .forensic-report-results {
    flex-wrap: wrap;
  }

  .pagination-pages {
    display: none;
  }
}

/* =================================================
   Organizations Styles
   ================================================= */

/* Organization Cards List */
.organizations-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
}

.organization-card {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.organization-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

[data-theme="dark"] .organization-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.organization-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.organization-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.organization-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

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

.organization-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.organization-name a {
  color: inherit;
  text-decoration: none;
}

.organization-name a:hover {
  color: var(--brand-primary);
}

.organization-slug {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.organization-role {
  flex-shrink: 0;
}

/* Role Badges */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
  text-transform: capitalize;
}

.role-badge-lg {
  padding: 6px 14px;
  font-size: 14px;
}

.role-owner {
  background-color: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

.role-admin {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.role-viewer {
  background-color: rgba(100, 116, 139, 0.15);
  color: #64748b;
}

[data-theme="dark"] .role-owner {
  background-color: rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
}

[data-theme="dark"] .role-admin {
  background-color: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

[data-theme="dark"] .role-viewer {
  background-color: rgba(100, 116, 139, 0.25);
  color: #cbd5e1;
}

.organization-card-body {
  padding: 20px;
}

.organization-stats {
  display: flex;
  gap: 32px;
}

.org-stat {
  display: flex;
  flex-direction: column;
}

.org-stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.org-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.organization-card-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .organization-card-footer {
  background: rgba(255, 255, 255, 0.02);
}

/* Organization Header Info */
.organization-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.organization-header-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.organization-header-icon svg {
  width: 28px;
  height: 28px;
  color: white;
}

/* Team Summary */
.team-summary {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.team-stat {
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 10px;
  min-width: 100px;
}

[data-theme="dark"] .team-stat {
  background: rgba(59, 130, 246, 0.1);
}

.team-stat-pending {
  background: rgba(234, 179, 8, 0.1);
}

[data-theme="dark"] .team-stat-pending {
  background: rgba(234, 179, 8, 0.15);
}

.team-stat-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.team-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.team-info-note {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}

[data-theme="dark"] .team-info-note {
  background: rgba(255, 255, 255, 0.05);
}

/* Form Helpers */
.form-container-narrow {
  max-width: 640px;
}

.form-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-color);
}

.form-section:last-of-type {
  margin-bottom: 24px;
  padding-bottom: 0;
  border-bottom: none;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.form-section-title .optional-tag {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

.form-section-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-group-half {
  flex: 1;
}

.form-group-quarter {
  flex: 0 0 25%;
  min-width: 80px;
}

.form-value-readonly {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] .form-value-readonly {
  background: rgba(255, 255, 255, 0.06);
}

.form-actions-inline {
  margin-top: 20px;
}

/* Settings Sections */
.settings-container {
  max-width: 800px;
}

.settings-section {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 24px;
  margin-bottom: 24px;
}

.settings-section-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

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

.settings-section-header p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.settings-section-danger {
  border-color: rgba(239, 68, 68, 0.3);
}

.settings-section-danger .settings-section-header {
  border-bottom-color: rgba(239, 68, 68, 0.3);
}

.settings-section-danger .settings-section-header h2 {
  color: #ef4444;
}

.danger-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.danger-action-info h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.danger-action-info p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* 4-column stats grid */
.stats-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .stats-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Stat icon colors */
.stat-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.stat-icon-green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.stat-icon-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.stat-icon-orange {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Organizations Responsive */
@media (max-width: 768px) {
  .organizations-list {
    grid-template-columns: 1fr;
  }

  .organization-header-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .page-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .team-summary {
    gap: 16px;
  }

  .team-stat {
    padding: 12px 16px;
    min-width: 80px;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .form-group-half,
  .form-group-quarter {
    flex: none;
    width: 100%;
    min-width: unset;
  }

  .danger-action {
    flex-direction: column;
    gap: 16px;
  }
}

/* ====================================================
   Organization Members Management Styles
   ==================================================== */

.members-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

.members-section {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 24px;
  margin-bottom: 24px;
}

.members-section-header {
  margin-bottom: 20px;
}

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

.members-section-header p {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

/* Invite Form */
.invite-form {
  margin-top: 16px;
}

.invite-form-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.form-group-email {
  flex: 2;
  min-width: 200px;
}

.form-group-role {
  flex: 1;
  min-width: 200px;
}

.form-group-submit {
  flex: 0 0 auto;
}

.form-group-submit .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Members Table */
.members-table-wrapper {
  overflow-x: auto;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
}

.members-table th,
.members-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.members-table th {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .members-table th {
  background: rgba(255, 255, 255, 0.02);
}

.members-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .members-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.members-table tbody tr.current-user {
  background: rgba(59, 130, 246, 0.05);
}

.member-email {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.member-avatar.pending {
  background: var(--border-color);
  color: var(--text-secondary);
}

.member-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-email-text {
  color: var(--text-primary);
  font-weight: 500;
}

.member-you-badge {
  display: inline-block;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="dark"] .member-you-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.member-date {
  color: var(--text-secondary);
  font-size: 14px;
  white-space: nowrap;
}

.member-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

/* Role Badges */
.role-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.role-owner {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

[data-theme="dark"] .role-owner {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.role-admin {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

[data-theme="dark"] .role-admin {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.role-viewer {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

[data-theme="dark"] .role-viewer {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}

/* Invitation Status */
.invitation-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.invitation-status.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

[data-theme="dark"] .invitation-status.pending {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.invitation-status.expired {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

[data-theme="dark"] .invitation-status.expired {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Small Buttons */
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Role Cards */
.members-section-info {
  background: transparent;
  border: none;
  padding: 0;
}

.role-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.role-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.role-card-header {
  margin-bottom: 16px;
}

.role-permissions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.role-permissions li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.role-permissions li:last-child {
  border-bottom: none;
}

.role-permissions li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

.permission-yes::before {
  content: '✓';
  color: #22c55e;
  font-weight: bold;
}

.permission-no::before {
  content: '✕';
  color: #ef4444;
  font-weight: bold;
}

.permission-no {
  color: var(--text-secondary);
}

/* Modal Small Size */
.modal-sm {
  max-width: 400px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .members-container {
    padding: 16px;
  }

  .invite-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-group-email,
  .form-group-role,
  .form-group-submit {
    flex: none;
    width: 100%;
    min-width: unset;
  }

  .form-group-submit .btn {
    width: 100%;
    justify-content: center;
  }

  .role-cards {
    grid-template-columns: 1fr;
  }

  .member-actions {
    flex-direction: column;
  }

  .members-table th,
  .members-table td {
    padding: 10px 12px;
  }
}

/* =================================
   Client Management Styles
   ================================= */

/* Clients Grid Layout */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Client Card */
.client-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.client-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.client-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.client-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.client-icon svg {
  width: 20px;
  height: 20px;
  color: white;
  stroke: currentColor;
}

.client-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.client-card-stats {
  display: flex;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}

.client-stat {
  display: flex;
  flex-direction: column;
}

.client-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.client-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.client-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.contact-name {
  color: var(--text-primary);
}

.contact-email {
  color: var(--text-secondary);
}

/* Client Notes */
.client-notes {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* Alert Toggles */
.alert-toggles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alert-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--main-bg);
  border-radius: 8px;
  gap: 20px;
}

.toggle-info h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.toggle-info p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.toggle-control {
  flex-shrink: 0;
}

.toggle-checkbox {
  width: 48px;
  height: 26px;
  appearance: none;
  background: var(--border-color);
  border-radius: 26px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s;
}

.toggle-checkbox:checked {
  background: #22c55e;
}

.toggle-checkbox::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-checkbox:checked::before {
  transform: translateX(22px);
}

.form-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 24px 0;
}

.threshold-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-suffix {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Modal Styles for Domain Assignment */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background: var(--card-bg);
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

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

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-body p {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--border-color);
}

/* Checkbox List */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--main-bg);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.checkbox-item:hover {
  background: var(--border-color);
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-item span {
  font-size: 14px;
  color: var(--text-primary);
}

/* Search Bar */
.search-bar {
  margin-bottom: 20px;
}

.search-input-group {
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-primary);
}

.search-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Danger Card */
.danger-card {
  border-color: #fecaca;
}

.danger-card .card-header {
  border-bottom-color: #fecaca;
}

.danger-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.danger-action-info h4 {
  font-size: 15px;
  font-weight: 600;
  color: #dc2626;
  margin: 0 0 4px 0;
}

.danger-action-info p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.text-danger {
  color: #dc2626 !important;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.breadcrumb a {
  color: var(--brand-primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Form Description */
.form-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .clients-grid {
    grid-template-columns: 1fr;
  }

  .client-card-stats {
    gap: 16px;
  }

  .danger-action {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .search-input-group {
    flex-direction: column;
  }
}

/* Dark mode support */
[data-theme="dark"] .client-card {
  background: var(--card-bg);
}

[data-theme="dark"] .alert-toggle {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .checkbox-item {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .checkbox-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .modal-content {
  background: var(--card-bg);
}

[data-theme="dark"] .danger-card {
  border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .danger-card .card-header {
  border-bottom-color: rgba(220, 38, 38, 0.3);
}

/* Bulk Operations Grid */
.bulk-operations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.bulk-operation {
  padding: 20px;
  background: var(--main-bg);
  border-radius: 8px;
}

.bulk-operation h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.bulk-operation p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
}

/* Client Mini Cards (for organization page) */
.clients-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.client-card-sm {
  padding: 16px;
}

.client-card-sm .client-card-header {
  margin-bottom: 8px;
}

.client-card-sm .client-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.client-card-sm .client-icon svg {
  width: 16px;
  height: 16px;
}

.client-card-sm .client-name {
  font-size: 14px;
}

.client-mini-stats {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Client Badge */
.client-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--main-bg);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary);
}

/* Card Header Actions */
.card-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-form {
  display: inline-flex;
}

.form-select-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Text Link */
.text-link {
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 14px;
}

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

[data-theme="dark"] .bulk-operation {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .client-badge {
  background: rgba(255, 255, 255, 0.1);
}

/* Organization Dashboard - Domains Needing Attention */
.attention-card {
  border-left: 4px solid #f59e0b;
}

.attention-card .card-header {
  background: rgba(245, 158, 11, 0.05);
}

.card-title-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  stroke: #f59e0b;
  vertical-align: middle;
}

.attention-count {
  font-size: 14px;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

.attention-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.attention-item {
  background: var(--main-bg);
  border-radius: 8px;
  padding: 16px;
  border-left: 3px solid transparent;
}

.attention-item.attention-warning {
  border-left-color: #f59e0b;
}

.attention-item.attention-danger {
  border-left-color: #ef4444;
}

.attention-item.attention-info {
  border-left-color: #3b82f6;
}

.attention-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.attention-item-header svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.attention-warning .attention-item-header svg {
  stroke: #f59e0b;
}

.attention-danger .attention-item-header svg {
  stroke: #ef4444;
}

.attention-info .attention-item-header svg {
  stroke: #3b82f6;
}

.attention-item-count {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.attention-item-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.attention-domain-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.attention-domain-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--card-bg);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 13px;
  transition: background-color 0.2s;
}

.attention-domain-item:hover {
  background: rgba(59, 130, 246, 0.1);
}

.attention-domain-item .domain-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-badge-sm {
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(100, 116, 139, 0.15);
  border-radius: 3px;
  color: var(--text-secondary);
}

.attention-view-all {
  display: inline-flex;
  align-items: center;
  color: var(--brand-primary);
  font-size: 13px;
  text-decoration: none;
}

.attention-view-all:hover {
  text-decoration: underline;
}

/* Client Summary Table */
.client-summary-table {
  margin-bottom: 0;
}

.client-name-cell {
  font-weight: 500;
}

.attention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Quick Filters */
.quick-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--main-bg);
  border-bottom: 1px solid var(--border-color);
}

.quick-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.quick-filter-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: 4px;
}

.quick-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s;
}

.quick-filter-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.quick-filter-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.quick-filter-btn.quick-filter-warning:not(.active) {
  border-color: #f59e0b;
  color: #b45309;
}

.quick-filter-btn.quick-filter-warning:hover,
.quick-filter-btn.quick-filter-warning.active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: white;
}

.quick-filter-btn.quick-filter-danger:not(.active) {
  border-color: #ef4444;
  color: #b91c1c;
}

.quick-filter-btn.quick-filter-danger:hover,
.quick-filter-btn.quick-filter-danger.active {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.client-filter-group {
  display: flex;
  align-items: center;
}

/* Active Filters Bar */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(59, 130, 246, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.active-filters-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--brand-primary);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.filter-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.filter-tag-remove:hover {
  background: rgba(255, 255, 255, 0.3);
}

.clear-filters-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  margin-left: auto;
}

.clear-filters-link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Dark Theme Adjustments */
[data-theme="dark"] .attention-card {
  border-left-color: #f59e0b;
}

[data-theme="dark"] .attention-card .card-header {
  background: rgba(245, 158, 11, 0.08);
}

[data-theme="dark"] .attention-count {
  background: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .attention-item {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .attention-domain-item {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .attention-domain-item:hover {
  background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .client-badge-sm {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .attention-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .quick-filters {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .quick-filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .quick-filter-btn.quick-filter-warning:not(.active) {
  color: #fbbf24;
}

[data-theme="dark"] .quick-filter-btn.quick-filter-danger:not(.active) {
  color: #f87171;
}

[data-theme="dark"] .active-filters {
  background: rgba(59, 130, 246, 0.08);
}

/* Responsive adjustments for organization dashboard */
@media (max-width: 768px) {
  .attention-summary {
    grid-template-columns: 1fr;
  }

  .quick-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-filter-group {
    justify-content: flex-start;
  }

  .client-filter-group {
    width: 100%;
  }

  .client-filter-group .form-select-sm {
    width: 100%;
  }

  .active-filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .clear-filters-link {
    margin-left: 0;
    margin-top: 8px;
  }
}


/* Onboarding Checklist Card */
.onboarding-checklist-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}

.onboarding-checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.onboarding-checklist-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding-checklist-title svg {
  width: 24px;
  height: 24px;
  color: var(--brand-primary, #3b82f6);
}

.onboarding-checklist-title h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  margin: 0;
}

.onboarding-progress-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}

.onboarding-progress-mini span {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
}

.progress-bar-mini {
  width: 80px;
  height: 6px;
  background-color: rgba(59, 130, 246, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--brand-primary, #3b82f6);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.onboarding-checklist-body {
  padding: 16px 20px;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(59, 130, 246, 0.08);
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checklist-icon svg {
  width: 14px;
  height: 14px;
  color: #10b981;
}

.checklist-number {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-primary, #3b82f6);
}

.checklist-item.completed .checklist-icon {
  background-color: rgba(16, 185, 129, 0.15);
}

.checklist-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary, #1e293b);
}

.checklist-item.completed .checklist-text {
  color: var(--text-secondary, #64748b);
  text-decoration: line-through;
}

.checklist-action {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-primary, #3b82f6);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: rgba(59, 130, 246, 0.1);
  transition: background-color 0.2s ease;
}

.checklist-action:hover {
  background-color: rgba(59, 130, 246, 0.2);
}

.onboarding-checklist-footer {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 20px;
  background-color: rgba(59, 130, 246, 0.03);
  border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.btn-link {
  background: none;
  border: none;
  color: var(--text-secondary, #64748b);
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--text-primary, #1e293b);
  text-decoration: underline;
}

/* Dark mode for onboarding checklist */
[data-theme="dark"] .onboarding-checklist-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .onboarding-checklist-header {
  border-bottom-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .onboarding-checklist-title h3 {
  color: #f1f5f9;
}

[data-theme="dark"] .onboarding-progress-mini span {
  color: #94a3b8;
}

[data-theme="dark"] .progress-bar-mini {
  background-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .checklist-item {
  border-bottom-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .checklist-icon {
  background-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .checklist-item.completed .checklist-icon {
  background-color: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .checklist-text {
  color: #f1f5f9;
}

[data-theme="dark"] .checklist-item.completed .checklist-text {
  color: #64748b;
}

[data-theme="dark"] .checklist-action {
  background-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .checklist-action:hover {
  background-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .onboarding-checklist-footer {
  background-color: rgba(59, 130, 246, 0.05);
  border-top-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .btn-link {
  color: #94a3b8;
}

[data-theme="dark"] .btn-link:hover {
  color: #f1f5f9;
}

/* Responsive adjustments for onboarding checklist */
@media (max-width: 640px) {
  .onboarding-checklist-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .onboarding-progress-mini {
    width: 100%;
  }

  .progress-bar-mini {
    flex: 1;
  }

  .checklist-item {
    flex-wrap: wrap;
  }

  .checklist-action {
    margin-left: 36px;
    margin-top: 4px;
  }
}

/* ============================================
   Dashboard V2 Redesign Styles
   ============================================ */

/* Dashboard Topbar - Compact V2 */
.dashboard-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 4px;
}

.topbar-spacer {
  flex: 1;
}

/* Theme Toggle - Compact */
.theme-toggle-wrapper {
  position: relative;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--card-bg);
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--brand-primary);
}

/* Theme toggle button icons - use specific selector to avoid conflicts */
.theme-toggle .theme-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  display: none;
}

.theme-toggle .theme-icon-light {
  display: block;
}

[data-theme-setting="dark"] .theme-toggle .theme-icon-light { display: none; }
[data-theme-setting="dark"] .theme-toggle .theme-icon-dark { display: block; }
[data-theme-setting="system"] .theme-toggle .theme-icon-light { display: none; }
[data-theme-setting="system"] .theme-toggle .theme-icon-system { display: block; }

.theme-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
  z-index: 100;
}

.theme-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Theme dropdown options - use specific selector to avoid conflicts with settings page */
.theme-dropdown .theme-option {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: left;
}

.theme-dropdown .theme-option:first-child {
  border-radius: 5px 5px 0 0;
}

.theme-dropdown .theme-option:last-child {
  border-radius: 0 0 5px 5px;
}

.theme-dropdown .theme-option:hover {
  background-color: rgba(59, 130, 246, 0.08);
}

.theme-dropdown .theme-option.active {
  background-color: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.theme-dropdown .theme-option svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block !important;
  visibility: visible !important;
  color: currentColor;
}

/* Dark mode for theme toggle */
[data-theme="dark"] .theme-toggle {
  background-color: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--brand-primary);
}

[data-theme="dark"] .theme-dropdown {
  background-color: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .theme-dropdown .theme-option {
  color: #e2e8f0;
}

[data-theme="dark"] .theme-dropdown .theme-option:hover {
  background-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .theme-dropdown .theme-option.active {
  background-color: rgba(59, 130, 246, 0.2);
}

/* ============================================
   V2 Domain Page Header - Compact
   ============================================ */

.domain-page-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.domain-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.domain-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.domain-status-indicator.active {
  background-color: #22c55e;
}

.domain-status-indicator.pending {
  background-color: #f59e0b;
}

.domain-status-indicator.inactive {
  background-color: #64748b;
}

.domain-page-header h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.domain-external-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.domain-external-link:hover {
  color: var(--brand-primary);
}

.domain-external-link svg {
  width: 14px;
  height: 14px;
}

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

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn:hover {
  color: var(--text-primary);
  border-color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.04);
}

.action-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.action-btn.primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.action-btn.primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Dark mode domain header */
[data-theme="dark"] .domain-page-header h1 {
  color: #f1f5f9;
}

[data-theme="dark"] .action-btn {
  background-color: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

[data-theme="dark"] .action-btn:hover {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: var(--brand-primary);
  color: #f1f5f9;
}

/* ============================================
   V2 Status Card - Compact
   ============================================ */

.status-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.status-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.status-card-header.warning {
  /* No background gradient in v2 */
}

.status-card-header.danger {
  /* No background gradient in v2 */
}

.status-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.status-icon.warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

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

.status-icon svg {
  width: 18px;
  height: 18px;
}

.status-card-header h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.status-card-body {
  padding: 16px;
}

.status-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.metric-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.metric-value.status-active {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #22c55e;
}

.metric-value.status-pending {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #f59e0b;
}

.metric-value .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Dark mode status card */
[data-theme="dark"] .status-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .status-card-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .status-card-header h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .metric-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .metric-value {
  color: var(--text-primary);
}

/* ============================================
   V2 Email Activity Chart - Compact
   ============================================ */

.chart-card .dashboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-bar-container {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 80px;
  padding-bottom: 20px;
  position: relative;
}

.chart-bar {
  flex: 1;
  min-width: 3px;
  background: #ef4444;
  border-radius: 1px 1px 0 0;
  transition: opacity 0.15s ease;
  position: relative;
}

.chart-bar:hover {
  opacity: 0.8;
}

.chart-bar[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 6px;
  background-color: #1e293b;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 10;
  margin-bottom: 3px;
}

.chart-x-axis {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 10px;
  color: var(--text-secondary);
}

.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  color: var(--text-secondary);
  gap: 6px;
  font-size: 12px;
}

.chart-empty svg {
  width: 24px;
  height: 24px;
  opacity: 0.4;
}

/* ============================================
   V2 Section Headers - Compact
   ============================================ */

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 12px 0;
}

.section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.section-dot.success {
  background-color: #22c55e;
}

.section-dot.warning {
  background-color: #f59e0b;
}

.section-dot.info {
  background-color: var(--brand-primary);
}

.section-header h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* ============================================
   V2 Feature Cards Grid - Compact
   ============================================ */

.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .feature-cards-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
  transition: border-color 0.15s ease;
}

.feature-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

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

.feature-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-icon svg {
  width: 14px;
  height: 14px;
}

.feature-icon.dmarc {
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.feature-icon.spf {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.feature-icon.dkim {
  background-color: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.feature-icon.bimi {
  background-color: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.feature-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-radius: 4px;
}

.feature-badge.active {
  background-color: #22c55e;
  color: #ffffff;
}

.feature-badge.inactive {
  background-color: #374151;
  color: #9ca3af;
}

.feature-badge.warning {
  background-color: #f59e0b;
  color: #ffffff;
}

.feature-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Dark mode feature cards */
[data-theme="dark"] .feature-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .feature-card:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

[data-theme="dark"] .feature-title {
  color: var(--text-primary);
}

[data-theme="dark"] .feature-badge.inactive {
  background-color: #4b5563;
  color: #d1d5db;
}

[data-theme="dark"] .feature-description {
  color: var(--text-secondary);
}

/* Dark mode - section headers */
[data-theme="dark"] .section-header h3 {
  color: var(--text-secondary);
}

/* Dark mode - chart */
[data-theme="dark"] .chart-timeframe {
  color: var(--text-secondary);
}

[data-theme="dark"] .chart-x-axis {
  color: var(--text-secondary);
}

[data-theme="dark"] .chart-empty {
  color: var(--text-secondary);
}

/* ============================================
   V2 Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
  .dashboard-topbar {
    padding: 6px 0;
  }

  .domain-page-header {
    gap: 10px;
  }

  .domain-page-header h1 {
    font-size: 18px;
  }

  .domain-actions {
    gap: 4px;
  }

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

  .status-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .chart-bar-container {
    height: 60px;
  }
}

/* ============================================
   DMARC Analytics Section
   ============================================ */

.analytics-section-header {
  margin-top: 32px;
  margin-bottom: 16px;
}

/* Analytics Controls (Period Filter + Export) */
.analytics-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.period-filter {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 4px;
}

.period-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.period-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.period-btn.active {
  background: var(--accent-color);
  color: white;
}

.export-controls {
  display: flex;
  gap: 8px;
}

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-export:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
}

.export-icon {
  width: 16px;
  height: 16px;
}

/* Analytics Cards Grid */
.analytics-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .analytics-cards-grid {
    grid-template-columns: 1fr;
  }
}

.analytics-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.analytics-card .dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.analytics-card .card-header-icon {
  width: 20px;
  height: 20px;
  color: var(--accent-color);
}

.analytics-card .dashboard-card-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.analytics-card .dashboard-card-body {
  padding: 20px;
}

/* Performance Card */
.performance-card .performance-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.gauge-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 6px solid currentColor;
  margin-bottom: 12px;
}

.gauge-circle.rate-good {
  color: #22c55e;
  border-color: #22c55e;
}

.gauge-circle.rate-warning {
  color: #f59e0b;
  border-color: #f59e0b;
}

.gauge-circle.rate-danger {
  color: #ef4444;
  border-color: #ef4444;
}

.gauge-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.gauge-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.gauge-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
}

.gauge-trend.trend-up {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.gauge-trend.trend-down {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.gauge-trend .trend-icon {
  width: 14px;
  height: 14px;
}

.trend-period {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: 4px;
}

/* Auth Breakdown */
.auth-breakdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.auth-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-metric-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.auth-metric-value {
  font-size: 15px;
  font-weight: 600;
}

.auth-metric-value.rate-good { color: #22c55e; }
.auth-metric-value.rate-warning { color: #f59e0b; }
.auth-metric-value.rate-danger { color: #ef4444; }

.auth-metric-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.auth-metric-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.auth-metric-fill.rate-good { background: #22c55e; }
.auth-metric-fill.rate-warning { background: #f59e0b; }
.auth-metric-fill.rate-danger { background: #ef4444; }

.auth-metric-trend {
  font-size: 11px;
  font-weight: 500;
}

.auth-metric-trend.trend-up { color: #22c55e; }
.auth-metric-trend.trend-down { color: #ef4444; }
.auth-metric-trend.trend-stable { color: var(--text-secondary); }

/* Message Volume */
.message-volume {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.volume-stat {
  display: flex;
  flex-direction: column;
}

.volume-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.volume-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.volume-trend {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.volume-trend.trend-up {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.volume-trend.trend-down {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Sources Card */
.sources-table-wrapper {
  overflow-x: auto;
  margin: -20px;
  padding: 0 20px;
}

.sources-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sources-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.sources-table th.text-right {
  text-align: right;
}

.sources-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.sources-table td.text-right {
  text-align: right;
}

.source-row:hover {
  background: var(--bg-secondary);
}

.source-row.needs-attention {
  background: rgba(239, 68, 68, 0.05);
}

.source-row.needs-attention:hover {
  background: rgba(239, 68, 68, 0.1);
}

.source-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.source-name .warning-icon {
  width: 16px;
  height: 16px;
  color: #f59e0b;
  flex-shrink: 0;
}

.rate-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
}

.rate-badge.rate-good {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.rate-badge.rate-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.rate-badge.rate-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Source IPs Section */
.source-ips-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.source-ips-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.source-ips-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-color);
}

.source-ips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-ip-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.source-ip-chip:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
}

.source-ip-chip.rate-good {
  border-color: rgba(34, 197, 94, 0.3);
}

.source-ip-chip.rate-warning {
  border-color: rgba(245, 158, 11, 0.3);
}

.source-ip-chip.rate-danger {
  border-color: rgba(239, 68, 68, 0.3);
}

.source-ip-chip .ip-address {
  font-family: monospace;
  font-weight: 500;
}

.source-ip-chip .ip-stats {
  color: var(--text-secondary);
}

.source-ip-chip .ip-rate {
  font-weight: 600;
}

.source-ip-chip.rate-good .ip-rate { color: #22c55e; }
.source-ip-chip.rate-warning .ip-rate { color: #f59e0b; }
.source-ip-chip.rate-danger .ip-rate { color: #ef4444; }

/* Source IP Modal */
.source-ip-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 0;
  z-index: 1000;
}

.source-ip-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.source-ip-dialog .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.source-ip-dialog .modal-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.source-ip-dialog .modal-header-icon {
  width: 20px;
  height: 20px;
  color: var(--accent-color);
}

.source-ip-dialog .modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.source-ip-dialog .modal-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.source-ip-dialog .modal-close svg {
  width: 16px;
  height: 16px;
}

.source-ip-dialog .modal-body {
  padding: 20px;
}

.source-ip-dialog .modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
}

/* IP Header */
.ip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ip-address-display {
  font-family: monospace;
  font-size: 18px;
  font-weight: 600;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.copy-btn:hover {
  background: var(--bg-tertiary);
}

.copy-btn .copy-icon {
  width: 14px;
  height: 14px;
}

/* Assessment Badge */
.assessment-section {
  margin-bottom: 20px;
}

.assessment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.assessment-badge .assessment-icon {
  width: 16px;
  height: 16px;
}

.assessment-badge.assessment-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.assessment-badge.assessment-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.assessment-badge.assessment-error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* IP Stats Grid */
.ip-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.ip-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.ip-stat-value {
  font-size: 20px;
  font-weight: 700;
}

.ip-stat-value.rate-good { color: #22c55e; }
.ip-stat-value.rate-warning { color: #f59e0b; }
.ip-stat-value.rate-danger { color: #ef4444; }

.ip-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* IP Detail Sections */
.ip-detail-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.ip-detail-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ip-detail-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.ip-detail-section .detail-icon {
  width: 16px;
  height: 16px;
}

.rdns-value {
  display: block;
  font-family: monospace;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  word-break: break-all;
}

.provider-info {
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.provider-name {
  font-weight: 500;
  margin: 0 0 4px 0;
}

.provider-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.provider-location .location-icon {
  width: 14px;
  height: 14px;
}

/* SPF Suggestion Box */
.spf-suggestion-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
}

.spf-include {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  font-weight: 500;
  color: #22c55e;
}

.copy-btn-small {
  padding: 4px 8px;
  font-size: 11px;
  background: rgba(34, 197, 94, 0.1);
  border: none;
  border-radius: 4px;
  color: #22c55e;
  cursor: pointer;
}

.copy-btn-small:hover {
  background: rgba(34, 197, 94, 0.2);
}

/* Assessment Reasons */
.assessment-reasons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reason-item {
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px dashed var(--border-color);
}

.reason-item:last-child {
  border-bottom: none;
}

.reason-item.reason-warning {
  color: #f59e0b;
}

/* Recommendations Card */
.recommendations-card .dashboard-card-header {
  position: relative;
}

.recommendations-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent-color);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 11px;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommendation-item {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.recommendation-item.priority-high {
  border-left: 3px solid #ef4444;
}

.recommendation-item.priority-medium {
  border-left: 3px solid #f59e0b;
}

.recommendation-item.priority-low {
  border-left: 3px solid #3b82f6;
}

.recommendation-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  cursor: pointer;
  list-style: none;
}

.recommendation-header::-webkit-details-marker {
  display: none;
}

.recommendation-header:hover {
  background: var(--bg-tertiary);
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.priority-badge .priority-icon {
  width: 12px;
  height: 12px;
}

.priority-badge.priority-high {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.priority-badge.priority-medium {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.priority-badge.priority-low {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.recommendation-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.category-badge {
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.expand-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

details[open] .expand-icon {
  transform: rotate(180deg);
}

.recommendation-body {
  padding: 16px;
  background: var(--bg-primary);
}

.recommendation-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.recommendation-ips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.ips-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.ip-code {
  font-family: monospace;
  font-size: 12px;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.ips-more {
  font-size: 12px;
  color: var(--text-secondary);
}

.recommendation-actions {
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.actions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.actions-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-color);
}

.action-steps {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
}

.action-step {
  font-size: 13px;
  line-height: 1.6;
  padding: 4px 0;
  color: var(--text-primary);
}

/* All Clear Message */
.recommendations-card.all-clear .card-header-icon.success {
  color: #22c55e;
}

.all-clear-message {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
}

.all-clear-icon {
  width: 32px;
  height: 32px;
  color: #22c55e;
  flex-shrink: 0;
}

.all-clear-text strong {
  display: block;
  font-size: 15px;
  color: #22c55e;
  margin-bottom: 4px;
}

.all-clear-text p {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

/* Analytics Empty State */
.analytics-empty-card {
  margin-bottom: 20px;
}

.analytics-empty {
  text-align: center;
  padding: 40px 20px;
}

.analytics-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.analytics-empty h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.analytics-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 400px;
  margin: 0 auto;
}

/* Dark mode overrides for analytics */
[data-theme="dark"] .source-ip-dialog {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .source-ip-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* Responsive adjustments for analytics */
@media (max-width: 768px) {
  .analytics-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .period-filter {
    justify-content: center;
  }

  .export-controls {
    justify-content: center;
  }

  .analytics-cards-grid {
    grid-template-columns: 1fr;
  }

  .ip-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .recommendation-header {
    flex-wrap: wrap;
  }

  .recommendation-title {
    order: 1;
    width: 100%;
    margin-top: 8px;
  }

  .sources-table th,
  .sources-table td {
    padding: 8px;
    font-size: 12px;
  }
}