html[data-theme="modern-saas"] body {
  background: var(--modern-saas-page-bg);
}

html[data-theme="modern-saas"] .app-shell {
  background: var(--modern-saas-page-bg);
}

html[data-theme="modern-saas"] h1,
html[data-theme="modern-saas"] h2,
html[data-theme="modern-saas"] h3,
html[data-theme="modern-saas"] h4,
html[data-theme="modern-saas"] h5,
html[data-theme="modern-saas"] h6,
html[data-theme="modern-saas"] .heading-page,
html[data-theme="modern-saas"] .heading-section,
html[data-theme="modern-saas"] .empty-state-title {
  font-family: var(--font-heading, var(--font-sans));
  letter-spacing: -0.025em;
}

html[data-theme="modern-saas"] .nav-sidebar-item-active {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  color: var(--nav-active-text);
  box-shadow: var(--nav-active-shadow);
}

html[data-theme="modern-saas"] .theme-toggle-button {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(var(--color-primary-rgb) / 0.04));
  border-color: var(--theme-toggle-border);
  box-shadow: var(--theme-toggle-shadow);
}

html[data-theme="modern-saas"] .surface-frame-elevated,
html[data-theme="modern-saas"] .surface-table thead {
  backdrop-filter: none;
}

html[data-theme="modern-saas"] .surface-frame-elevated {
  background: var(--modern-saas-panel-bg);
  border-color: var(--modern-saas-panel-border);
  box-shadow: var(--modern-saas-panel-highlight), var(--shadow-card);
}

html[data-theme="modern-saas"] .app-header-shell,
html[data-theme="modern-saas"] .sidebar-brand-card,
html[data-theme="modern-saas"] .sidebar-footer-card {
  background: var(--modern-saas-panel-bg);
  backdrop-filter: none;
  border-color: var(--modern-saas-panel-border);
  box-shadow: var(--modern-saas-panel-highlight), var(--shadow-sm);
}

html[data-theme="modern-saas"] .dashboard-chart-card {
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

html[data-theme="modern-saas"] .kpi-card,
html[data-theme="modern-saas"] .guidance-card,
html[data-theme="modern-saas"] .intro-action-link,
html[data-theme="modern-saas"] .intro-note-card,
html[data-theme="modern-saas"] .activity-timeline-item {
  background: var(--modern-saas-panel-bg);
  border-color: var(--modern-saas-panel-border);
  box-shadow: var(--modern-saas-panel-highlight), var(--shadow-sm);
}

html[data-theme="modern-saas"] .kpi-card:hover,
html[data-theme="modern-saas"] .intro-action-link:hover {
  border-color: var(--modern-saas-hover-border);
}

html[data-theme="modern-saas"] .surface-table {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

html[data-theme="modern-saas"] .surface-table thead {
  background: var(--modern-saas-panel-bg);
  border-color: var(--modern-saas-panel-border);
}

html[data-theme="modern-saas"] .surface-table tbody tr:hover {
  background-color: var(--modern-saas-table-row-hover);
}

html[data-theme="modern-saas"] .status-pill-tab,
html[data-theme="modern-saas"] .chart-legend-toggle {
  border-color: var(--modern-saas-panel-border);
}

html[data-theme="modern-saas"] .chart-legend-toggle {
  background: var(--control-bg);
  border-color: var(--control-border);
  color: var(--color-text-secondary);
}

html[data-theme="modern-saas"] .chart-legend-toggle[aria-pressed="true"],
html[data-theme="modern-saas"] .chart-legend-toggle:has(input:checked) {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  color: var(--nav-active-text);
  box-shadow: var(--nav-active-shadow);
}

html[data-theme="modern-saas"] .empty-state {
  background: var(--state-empty-bg);
  border-color: var(--state-border-subtle);
}

html[data-theme="modern-saas"] [role="dialog"] {
  background: var(--color-bg-card);
  border-color: var(--color-border);
  box-shadow: var(--shadow-modal);
}

html[data-theme="modern-saas"].dark .theme-toggle-button {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(var(--color-primary-rgb) / 0.12));
  border-color: var(--theme-toggle-border);
  box-shadow: var(--theme-toggle-shadow);
}

html[data-theme="modern-saas"] .auth-showcase {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(var(--color-primary-rgb) / 0.05));
}

html[data-theme="modern-saas"].dark .auth-showcase {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(var(--color-primary-rgb) / 0.1));
}

@media (max-width: 640px) {
  html[data-theme="modern-saas"] .dashboard-chart-card {
    padding: 1rem;
  }

  html[data-theme="modern-saas"] .responsive-data-table tbody tr {
    border-color: var(--modern-saas-panel-border);
    box-shadow: var(--modern-saas-panel-highlight), var(--shadow-sm);
  }

  html[data-theme="modern-saas"] .responsive-data-table td {
    border-color: var(--modern-saas-panel-border);
  }

  html[data-theme="modern-saas"] .surface-table td,
  html[data-theme="modern-saas"] .surface-table th {
    padding-inline: 0.875rem;
  }

  html[data-theme="modern-saas"] .kpi-card,
  html[data-theme="modern-saas"] .guidance-card,
  html[data-theme="modern-saas"] .intro-action-link,
  html[data-theme="modern-saas"] .activity-timeline-item {
    border-radius: var(--radius-lg);
  }
}