/* ═══════════════════════════════════════════════════════════════════
   legacy/app-legacy.css

   Residual app-specific CSS being progressively migrated into the
   modular component tree. Bootstrap 5.3 source was relocated to
   vendor/bootstrap.css 2026-05-25 as Phase 3a of the legacy-elimination
   plan — this file used to be 30,140 lines (including Bootstrap), now
   contains only the ~8,200 lines of app-specific code awaiting
   component extraction.

   Wrapped in @layer legacy { @layer vendor { } } so the cascade order
   declared in vendor/bootstrap.css resolves these rules at lowest
   priority — components/* and tokens/* override per the documented
   layer order.

   See doc/css-architecture.md §5 for the migration tracking table and
   §7 P0 for the remaining-work checklist.
   ═══════════════════════════════════════════════════════════════════ */

@layer legacy {
@layer vendor {

/* Log Analyzer section moved to components/log-analyzer.css 2026-05-25 */
/* ============================================
   UTILITIES
   ============================================ */
.text-end {
  text-align: right;
}

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

.w-10 {
  width: 10%;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

/* Wizard core (form, progress, panel, form fields, alerts, sidebar, responsive, dark, motion)
   moved to components/wizard-panels.css 2026-05-25.
   Plan/domain-type/version/template card families below remain (canonical owner is selection-cards.css).
   Cross-cutting @media (hover: none) wizard references later remain (touch-device transform suppression). */
/* selection-card reduced-motion overrides moved to components/selection-cards.css 2026-05-25 */
:root {
  accent-color: var(--cloud);
  --sidebar-w: 256px;
  /* Admin sidebar tokens — re-toned to share the page's surface system so
     the nav reads as part of the design rather than a hard dark slab next
     to light cards. Portals (.portal-client / .portal-reseller in
     client_portal.css and the overrides below this block) re-bind these
     tokens to their own dark themes — those still win because their
     selector is more specific than :root. The previous dark values were:
       --sidebar-bg: #0b1120; --sidebar-surface: #0f1729;
       --sidebar-border: rgba(56,189,248,.08);
       --sidebar-text: rgba(148,163,184,.85);
       --sidebar-text-hover: #e2e8f0;
       --sidebar-active-bg: rgba(14,165,233,.12);
       --sidebar-active-text: #38bdf8;  --sidebar-active-border: #0ea5e9;
     They live in git history if you need to revert. */
  --sidebar-bg: var(--content-bg);
  --sidebar-surface: var(--card-bg);
  --sidebar-border: var(--card-border);
  --sidebar-text: var(--text-secondary);
  --sidebar-text-hover: var(--text-primary);
  --sidebar-active-bg: color-mix(in srgb, var(--cloud) 10%, transparent);
  --sidebar-active-text: var(--cloud-dark);
  --sidebar-active-border: var(--cloud);
  --content-bg: #f8fafc;
  --cloud: #0ea5e9;
  --cloud-light: #38bdf8;
  --cloud-dark: #0284c7;
  --cloud-bg: rgba(14, 165, 233, 0.07);
  --cloud-glow: rgba(14, 165, 233, 0.25);
  --teal: #14b8a6;
  --teal-bg: rgba(20, 184, 166, 0.08);
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.08);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.08);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.08);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.08);
  --card-bg: #fafbfc;
  --card-border: #edf2f7;
  --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.04);
  --card-shadow-hover: 0 4px 16px rgba(15, 23, 42, 0.08);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;
  /* Radius scale — token names mirror client_portal.css so the two
     portals speak one design language. `--radius` is preserved as a
     legacy alias for callers that already use it (= --radius-md). */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.625rem;   /* 10px */
  --radius-lg: 0.875rem;   /* 14px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.25rem;   /* 20px */
  --radius-full: 9999px;
  --radius: var(--radius-md);
  /* Shadow elevation scale — mirrors client_portal.css naming so both
     portals can write `box-shadow: var(--shadow-md)`. Dark theme flips
     --shadow-base-color to pure black; depth percentages stay the same. */
  --shadow-base-color: #0f172a;
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--shadow-base-color) 5%, transparent);
  --shadow-md:
    0 1px 2px color-mix(in srgb, var(--shadow-base-color) 4%, transparent),
    0 4px 8px color-mix(in srgb, var(--shadow-base-color) 6%, transparent);
  --shadow-lg:
    0 1px 3px color-mix(in srgb, var(--shadow-base-color) 5%, transparent),
    0 8px 20px color-mix(in srgb, var(--shadow-base-color) 8%, transparent);
  --shadow-xl:
    0 4px 8px color-mix(in srgb, var(--shadow-base-color) 5%, transparent),
    0 12px 32px color-mix(in srgb, var(--shadow-base-color) 10%, transparent);
  --shadow-inner: inset 0 2px 4px color-mix(in srgb, var(--shadow-base-color) 4%, transparent);
  /* Transition tokens — name parity with client_portal.css */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration: 0.2s;
  --text-2xs: 0.579rem;
  --text-xs: 0.694rem;
  --text-sm: 0.833rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background: var(--content-bg);
}

a {
  color: var(--cloud);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
a:hover {
  color: var(--cloud-dark);
}

::selection {
  background: var(--cloud);
  color: #fff;
}

.font-mono {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", ui-monospace, monospace;
  font-size: 0.8125em;
  letter-spacing: -0.02em;
}

/* Admin Sidebar — moved to components/sidebar.css 2026-05-25 */
/* .app-content + .app-topbar moved to components/layout-shell.css 2026-05-25 */

/* Topbar (.topbar-queue-spinner family + .topbar-service-error family),
   global search (.global-search-form/-input/-actions/-results, .search-
   results-list/-hint), search results (.search-group/-more, .search-
   result-item/-title/-meta), .index-actions, .quick-actions-rail, plus
   the @media (max-width: 992px) responsive override for .quick-actions-
   rail — ALL moved to components/layout-shell.css 2026-05-25 as Phase 3
   cleanup. Token-equivalent values (e.g. `#fff` → `var(--color-white)`,
   inline shadow strings → CSS variables) but no behavior change. */

/* .app-breadcrumbs family moved to components/layout-shell.css 2026-05-25 */

/* .page-header moved to components/heroes-and-page-headers.css 2026-05-25 */

/* Dashboard Hero + details.dash-section + .dash-section-label/-body — moved to components/dashboard-hero.css 2026-05-25 */

/* Sub-grouping inside the SOA-override form: Identity / Timing / Zone
 * Transfer. Each group is a subtle 4px-indent boxed cluster with a tiny
 * uppercase label that mirrors `.dash-section-label`. Keeps a long form
 * scannable without nesting <fieldset>s (which override Bootstrap form
 * styling in awkward ways). */
.zone-override-group {
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.625rem;
  border-left: 2px solid var(--border-color);
  background: rgba(0, 0, 0, 0.015);
  border-radius: 0 4px 4px 0;
}
html[data-bs-theme=dark] .zone-override-group {
  background: rgba(255, 255, 255, 0.02);
}
.zone-override-group__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.zone-override-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border-color);
}

.btn-xs {
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

/* .dash-infra-* rules moved to components/dashboard-infra.css 2026-05-25
   (Phase 3 cleanup). Includes the responsive @container override that was
   formerly at the bottom of this file. */

.resource-icon.icon-audit-create {
  background: var(--success-bg);
  color: var(--success);
}
.resource-icon.icon-audit-update {
  background: var(--cloud-bg);
  color: var(--cloud);
}
.resource-icon.icon-audit-destroy {
  background: var(--danger-bg);
  color: var(--danger);
}
.resource-icon.icon-audit-publish {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}
.resource-icon.icon-audit-activate {
  background: var(--success-bg);
  color: var(--success);
}
.resource-icon.icon-audit-deactivate {
  background: rgba(100, 116, 139, 0.08);
  color: #64748b;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* .onboarding-step, .onboarding-step:hover, .onboarding-label, .onboarding-label:hover, .onboarding-desc
   moved to components/color-refinements.css 2026-05-27 */

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onboarding-check {
  font-size: 1.1rem;
  line-height: 1;
  padding-top: 0.1rem;
}

/* @media (max-width: 639px) responsive overrides moved to
   components/dashboard-hero.css (.dash-hero rules) and
   components/dashboard-infra.css (.dash-infra-grid) 2026-05-25. */
/* .card + .card:hover moved to components/cards.css 2026-05-25 */

/* Lines 320-358 (39 lines) extracted to app-panel.css 2026-05-26 (round 3). */

/* Collapsible card — uses native <details>/<summary>. The summary keeps
   the same look as a static .card-header and gains a chevron that
   rotates when the card is open. The default disclosure triangle is
   suppressed; interactive children (links, buttons inside the header)
   keep working because the spec exempts them from the summary toggle. */
.card--collapsible > summary.card-header {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.card--collapsible > summary.card-header::-webkit-details-marker {
  display: none;
}
.card--collapsible > summary.card-header::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: auto; /* pushes chevron to the right regardless of header content */
  padding-left: 0.5rem;
  font-size: 0.625rem;
  color: var(--text-muted);
  transition: transform 160ms ease;
}
.card--collapsible[open] > summary.card-header::after {
  transform: rotate(180deg);
}
.card--collapsible > summary.card-header:hover {
  background: color-mix(in srgb, currentColor 4%, transparent);
}
/* When collapsed, h-100 + flex parent shouldn't pad below the summary —
   keep the card visually compact. */
.card--collapsible:not([open]) {
  height: auto !important;
}

/* Lines 357-540 (184 lines) extracted to contact-card.css 2026-05-26 (round 5). */
/* Lines 358-482 (orphan contact-card family + .soft-badge) moved to contact-card.css 2026-05-26 (round 5 cleanup). */

/* Lines 775-861 (87 lines) extracted to dropdown-menus.css 2026-05-26 (round 5). */
/*
 * Status dot — inline dot + text label (e.g., "● Active", "● Offline").
 * Uses class-based variants: .online, .offline, .ok, .warning, .error, .danger.
 *
 * IMPORTANT: The client portal has a DIFFERENT .status-dot convention —
 * standalone 8px circles using data-status attributes (no text content).
 * That variant is scoped to .status-dot[data-status] in client_portal.css
 * to avoid colliding with this text-bearing version. Do not add width/height
 * constraints here — the element must size to its text content.
 */
/* .badge app-specific override moved to components/badges.css 2026-05-25 (component values win per cascade layer) */

.badge-yes, .badge-active {
  background: var(--success-bg);
  color: var(--success);
}

.badge-no, .badge-inactive {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge-ok {
  background: var(--success-bg);
  color: var(--success);
}

.badge-error {
  background: var(--danger-bg);
  color: var(--danger);
}

.app-actions {
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-tab-form .nav-tabs {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
  gap: 0;
}
.app-tab-form .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.625rem 1rem;
  transition: all var(--duration) var(--ease);
  background: transparent;
}
.app-tab-form .nav-tabs .nav-link:hover {
  color: var(--text-secondary);
  border-bottom-color: var(--border-color);
}
.app-tab-form .nav-tabs .nav-link.active {
  color: var(--cloud);
  border-bottom-color: var(--cloud);
}
.app-tab-form .tab-pane {
  padding-top: 1.25rem;
}

.app-form-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  max-width: 720px;
}
.app-form-card .app-form-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: #f8fafc;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.app-form-card .app-form-header .form-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  background: var(--cloud-bg);
  color: var(--cloud);
}
.app-form-card .app-form-header .form-header-text {
  flex: 1;
}
.app-form-card .app-form-header .form-header-text h1, .app-form-card .app-form-header .form-header-text .h1 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.3;
}
.app-form-card .app-form-header .form-header-text .form-header-sub {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.app-form-card .app-form-body {
  padding: 1.5rem;
}
.app-form-card .app-form-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: #f8fafc;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin: 1.5rem -1.5rem -1.5rem;
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.app-form-card--wide {
  max-width: 860px;
}

.form-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-bottom: 0.5rem;
  margin-top: 1.25rem;
  margin-bottom: 0.875rem;
  border-bottom: 1px solid var(--border-color);
}
.form-section-title i {
  margin-right: 0.375rem;
  font-size: 0.625rem;
  opacity: 0.7;
}

.form-tab-intro {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.app-form-errors {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--danger-bg);
  border: 1px solid rgba(239, 68, 68, 0.12);
  margin-bottom: 1.25rem;
}
.app-form-errors .error-icon {
  flex-shrink: 0;
  color: var(--danger);
  font-size: 0.875rem;
  margin-top: 1px;
}
.app-form-errors ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: #b91c1c;
}
.app-form-errors ul li + li {
  margin-top: 0.25rem;
}
.app-form-errors ul li::before {
  content: "•";
  color: var(--danger);
  margin-right: 0.375rem;
}

.form-toggle-group {
  display: inline-flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

/* .template-picker + .template-picker-group-label moved to
   components/selection-cards.css 2026-05-25. Layout properties merged
   into the component; group-label values intentionally diverge (slightly
   smaller font + tighter margin). */

/* .template-picker-cards + .template-card family (classic-form variant) moved to components/selection-cards.css 2026-05-25 */

@keyframes tab-attention-pulse {
  0%, 100% {
    color: inherit;
  }
  50% {
    color: var(--cloud);
  }
}
.tab-attention .nav-link {
  animation: tab-attention-pulse 0.5s ease 3;
}

.app-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color var(--duration) var(--ease);
}
.app-back-link:hover {
  color: var(--cloud);
}
.app-back-link i {
  font-size: 0.625rem;
}

/* Lines 1309-1335 (27 lines) extracted to tables.css 2026-05-26 (round 3). */

/* Lines 1273-1500 (228 lines) extracted to ws-overview.css 2026-05-26 (round 5). */
/* Sub-section divider for grouped attributes-tables inside a panel.
   Used to organize long attribute lists (e.g. Web Space Details) into
   "Identity", "System", "Filesystem", "Timestamps" groups. Each group
   carries an uppercase title with a leading icon; consecutive groups
   are visually separated by a top rule. */
.attributes-group + .attributes-group {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}
.attributes-group__title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.attributes-group__title i {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* .alert app-specific override moved to components/alerts.css 2026-05-25 */
/* Alerts use a tinted bg + accent-color text + a hair-thin accent border.
   The border uses color-mix on the bg color so it stays subtle but reads
   as a connected boundary, no harsh full-opacity edges. */
.alert.alert-success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 22%, transparent);
  color: var(--color-success);
}
.alert.alert-danger {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 22%, transparent);
  color: var(--color-danger);
}
.alert.alert-info {
  background: color-mix(in srgb, var(--cloud, #0ea5e9) 10%, transparent);
  border-color: color-mix(in srgb, var(--cloud, #0ea5e9) 22%, transparent);
  color: var(--cloud-dark, #0284c7);
}
.alert.alert-warning {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
  color: var(--color-warning-dark);
}
.alert.alert-light {
  background: color-mix(in srgb, var(--text-muted, #94a3b8) 6%, transparent);
  border-color: var(--card-border);
  color: var(--text-secondary);
}
.alert > i:first-child,
.alert > .fa:first-child {
  margin-inline-end: 0.5rem;
  opacity: 0.85;
}

/* .domain-hero-status family moved to components/color-refinements.css 2026-05-27 */

.stat-domain-active .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-domain-inactive .stat-icon-wrap {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-domain-publish .stat-icon-wrap {
  background: var(--info-bg);
  color: var(--info);
}

.stat-domain-nginx .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-domain-php .stat-icon-wrap {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.stat-user-provisioned .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-user-unprovisioned .stat-icon-wrap {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.stat-user-domains .stat-icon-wrap {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.stat-user-shell .stat-icon-wrap {
  background: var(--teal-bg);
  color: var(--teal);
}

.stat-nginx-active .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-nginx-inactive .stat-icon-wrap {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-nginx-domains .stat-icon-wrap {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.stat-nginx-workers .stat-icon-wrap {
  background: var(--cloud-bg);
  color: var(--cloud);
}

.stat-php-active .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-php-inactive .stat-icon-wrap {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-php-domains .stat-icon-wrap {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.stat-php-memory .stat-icon-wrap {
  background: var(--cloud-bg);
  color: var(--cloud);
}

.stat-php-limits .stat-icon-wrap {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.stat-varnish-active .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-varnish-inactive .stat-icon-wrap {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-varnish-conns .stat-icon-wrap {
  background: var(--cloud-bg);
  color: var(--cloud);
}

.stat-varnish-ttl .stat-icon-wrap {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}

.stat-varnish-backend .stat-icon-wrap {
  background: var(--teal-bg);
  color: var(--teal);
}

.stat-server-cpu .stat-icon-wrap {
  background: var(--cloud-bg);
  color: var(--cloud);
}

.stat-server-memory .stat-icon-wrap {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.stat-server-disk .stat-icon-wrap {
  background: var(--teal-bg);
  color: var(--teal);
}

.stat-server-uptime .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-log-success .stat-icon-wrap {
  background: var(--success-bg);
  color: var(--success);
}

.stat-log-warning .stat-icon-wrap {
  background: var(--warning-bg);
  color: var(--warning);
}

.stat-log-failed .stat-icon-wrap {
  background: var(--danger-bg);
  color: var(--danger);
}

.stat-log-job .stat-icon-wrap {
  background: var(--cloud-bg);
  color: var(--cloud);
}

.stat-log-time .stat-icon-wrap {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}

.stat-log-output .stat-icon-wrap {
  background: var(--teal-bg);
  color: var(--teal);
}

.log-output {
  margin: 0;
  padding: 1rem 1.25rem;
  background: #0f172a;
  color: #e2e8f0;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  max-height: 600px;
  overflow-y: auto;
}
.log-output::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.log-output::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 3px;
}
.log-output::-webkit-scrollbar-track {
  background: transparent;
}
.log-output .log-line-error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  display: inline-block;
  width: 100%;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
}
.log-output .log-line-warn {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.1);
  display: inline-block;
  width: 100%;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
}
.log-output .log-line-ok {
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
  display: inline-block;
  width: 100%;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
}
.log-output .log-line-rollback {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
  display: inline-block;
  width: 100%;
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
  font-weight: 600;
}

.markdown-body > :last-child {
  margin-bottom: 0;
}
.markdown-body h3, .markdown-body .h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 1.25rem 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #f1f5f9;
}
.markdown-body h3:first-child, .markdown-body .h3:first-child {
  margin-top: 0;
}
.markdown-body p {
  margin: 0 0 0.75rem;
}
.markdown-body ul, .markdown-body ol {
  margin: 0 0 0.75rem;
  padding-left: 1.5rem;
}
.markdown-body ul li, .markdown-body ol li {
  margin-bottom: 0.25rem;
}
.markdown-body ul li strong, .markdown-body ol li strong {
  color: var(--text-primary);
}
.markdown-body code {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
  font-size: 0.8em;
  background: #f1f5f9;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  color: var(--cloud-dark);
}
.markdown-body pre {
  margin: 0 0 0.75rem;
  padding: 0.875rem 1rem;
  background: #0f172a;
  border-radius: var(--radius);
  overflow-x: auto;
}
.markdown-body pre code {
  background: none;
  padding: 0;
  color: #e2e8f0;
  font-size: 0.8125rem;
}
.markdown-body table {
  width: 100%;
  margin: 0 0 0.75rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.markdown-body table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 0.875rem;
  background: #f8fafc;
}
.markdown-body table td {
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text-primary);
  vertical-align: top;
}
.markdown-body table tbody tr:hover {
  background: var(--cloud-bg);
}
.markdown-body a {
  color: var(--cloud);
  text-decoration: none;
}
.markdown-body a:hover {
  color: var(--cloud-dark);
  text-decoration: underline;
}
.markdown-body strong {
  font-weight: 600;
}
.markdown-body blockquote {
  margin: 0 0 0.75rem;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--cloud);
  background: var(--cloud-bg);
  color: var(--text-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* .settings-panel moved to components/color-refinements.css 2026-05-27 */

.settings-dash {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.setting-row:hover {
  background: var(--cloud-bg);
}

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

.setting-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* .setting-label i, .setting-description moved to components/color-refinements.css 2026-05-27 */

.setting-control {
  flex-shrink: 0;
}

.setting-form {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.setting-input {
  width: 120px !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.setting-textarea {
  font-family: var(--font-family-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  width: 100% !important;
}

.setting-row:has(.setting-textarea) {
  flex-direction: column;
  align-items: stretch;
}
.setting-row:has(.setting-textarea) .setting-control {
  flex-shrink: unset;
}
.setting-row:has(.setting-textarea) .setting-form {
  flex-direction: column;
  align-items: stretch;
}
.setting-row:has(.setting-textarea) .setting-form .btn {
  align-self: flex-end;
}

/* Lines 2120-2269 (150 lines) extracted to security-hero.css 2026-05-26 (round 3). */

.severity-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease);
}
.severity-icon.icon-severity-critical {
  background: var(--danger-bg);
  color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.06);
}
.severity-icon.icon-severity-warning {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.06);
}
.severity-icon.icon-severity-pass {
  background: var(--success-bg);
  color: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.06);
}

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.severity-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.severity-badge-critical {
  background: var(--danger-bg);
  color: var(--danger);
}
.severity-badge-critical::before {
  background: var(--danger);
  animation: pulse-severity 2s infinite;
}

.severity-badge-warning {
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
}
.severity-badge-warning::before {
  background: #f59e0b;
}

.severity-badge-pass {
  background: var(--success-bg);
  color: #166534;
}
.severity-badge-pass::before {
  background: var(--success);
}

.severity-badge-neutral {
  background: rgba(108, 117, 125, 0.12);
  color: #495057;
}
.severity-badge-neutral::before {
  background: #6c757d;
}

@keyframes pulse-severity {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}
.finding-group::-webkit-details-marker {
  display: none;
}
.finding-group {
  border-radius: var(--radius-lg) !important;
  transition: box-shadow var(--duration) var(--ease);
}
.finding-group:hover {
  box-shadow: var(--card-shadow-hover);
}
.finding-group .finding-group-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0.875rem 1.125rem;
  transition: background var(--duration) var(--ease);
}
.finding-group .finding-group-toggle::-webkit-details-marker {
  display: none;
}
.finding-group .finding-group-toggle::marker {
  display: none;
  content: "";
}
.finding-group .finding-group-toggle:hover {
  background: rgba(14, 165, 233, 0.03);
}
.finding-group .finding-group-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.finding-group .finding-group-service-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.finding-group.service-nginx .finding-group-service-icon {
  background: var(--success-bg);
  color: var(--success);
}
.finding-group.service-php .finding-group-service-icon {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}
.finding-group.service-varnish .finding-group-service-icon {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
}
.finding-group.service-ssh .finding-group-service-icon {
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
}
.finding-group.service-bind .finding-group-service-icon {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}
.finding-group .finding-group-chevron {
  font-size: 0.5625rem;
  color: var(--text-muted);
  transition: transform 0.3s var(--ease);
  margin-right: 0.25rem;
}
.finding-group .finding-group-counts {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.finding-group[open] .finding-group-chevron {
  transform: rotate(90deg);
}
.finding-group[open] .finding-group-toggle {
  border-bottom: 1px solid var(--border-color);
}
.finding-group > .card-body {
  animation: finding-reveal 0.25s var(--ease);
}

@keyframes finding-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.service-card {
  position: relative;
  /* No `overflow: hidden` — would clip dropdown menus from any future Actions
     button (the admin/services pages follow the same shape as dash-hero).
     The ::before stripe clips its own corners now. */
  z-index: 10;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  /* Match the parent's top corners so the stripe stays inside the rounded card. */
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.service-card.service-nginx::before {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}
.service-card.service-php::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}
.service-card.service-varnish::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.service-card.service-ssh::before {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
}
.service-card.service-bind::before {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

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

.finding-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  transition: all var(--duration) var(--ease);
}
.finding-item:last-child {
  border-bottom: none;
}
.finding-item:hover {
  background: var(--cloud-bg);
}
.finding-item:hover .severity-icon {
  transform: scale(1.08);
}

.finding-body {
  flex: 1;
  min-width: 0;
}

.finding-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.finding-setting {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.finding-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(241, 245, 249, 0.6);
  border-radius: var(--radius);
  font-size: 0.75rem;
}
.finding-meta .finding-current,
.finding-meta .finding-recommended {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.finding-meta .finding-current .val-label,
.finding-meta .finding-recommended .val-label {
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
}
.finding-meta .finding-current strong,
.finding-meta .finding-recommended strong {
  color: var(--text-primary);
  font-weight: 700;
}
.finding-meta .finding-arrow {
  color: var(--text-muted);
  font-size: 0.5625rem;
}

.finding-description {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.375rem;
  line-height: 1.5;
}

.security-all-clear {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(20, 184, 166, 0.04) 100%), var(--card-bg);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}
.security-all-clear .all-clear-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}
.security-all-clear .all-clear-text strong {
  color: var(--text-primary);
  font-size: 0.9375rem;
}
.security-all-clear .all-clear-text p {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.security-empty {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(234, 179, 8, 0.03) 100%), var(--card-bg);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}
.security-empty .empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #eab308);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
.security-empty .empty-text strong {
  color: var(--text-primary);
  font-size: 0.9375rem;
}
.security-empty .empty-text p {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* .security-hero @media responsive moved to components/security-hero.css
   2026-05-26 (round 3 cleanup). */
@media (max-width: 639px) {
  .finding-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
}
.sysreq-card .sysreq-icon {
  background: var(--cloud-bg);
  color: var(--cloud);
}

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

.sysreq-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.sysreq-item:last-child {
  border-bottom: none;
}

.sysreq-status-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-top: 2px;
}
.sysreq-status-icon.sysreq-status-pass {
  background: var(--success-bg);
  color: var(--success);
}
.sysreq-status-icon.sysreq-status-fail {
  background: var(--danger-bg);
  color: var(--danger);
}
.sysreq-status-icon.sysreq-status-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.sysreq-body {
  flex: 1;
  min-width: 0;
}

.sysreq-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.sysreq-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.sysreq-detail {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.severity-badge-pass {
  background: var(--success-bg);
  color: var(--success);
}

/* .mobile-hamburger, .sidebar-overlay, .sidebar-body-locked moved to
   components/sidebar.css 2026-05-25. Component version uses semantic
   tokens (--overlay-hover, --sidebar-overlay, --z-modal-backdrop) so
   the dark-theme overrides previously at lines 4158-4165 become
   unnecessary. */

/* Lines 1746-1757 (.server-bar @media) moved to domain-sidebar.css 2026-05-26 (round 5 cleanup). */
@media (max-width: 767.98px) {
  /* .app-content padding moved to components/layout-shell.css 2026-05-25 */
  .dash-hero-actions,
  .page-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .dash-hero-actions .btn,
  .page-actions .btn {
    width: 100%;
  }
  .dash-hero-top {
    flex-direction: column;
    gap: 0.75rem;
  }
  .btn, .nav-link, .btn-icon, .sidebar-signout {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-outline-success,
  .btn-outline-danger,
  .btn-outline-warning {
    padding: 0.625rem 1rem;
    font-size: 0.95rem;
  }
  /* .app-panel responsive moved to components/app-panel.css 2026-05-26. */
  /* .gauge-card / .gauge-header / .stat-card responsive overrides moved
     to components/gauge-cards.css and components/stat-cards.css 2026-05-25. */
  /* .app-breadcrumbs responsive override moved to components/layout-shell.css
     2026-05-25. */
}
@media (max-width: 575.98px) {
  /* .app-content padding + .global-search-input responsive moved to
     components/layout-shell.css 2026-05-25. */
  .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .resource-item {
    flex-wrap: wrap;
  }
  .resource-item .resource-action {
    width: 100%;
    margin-top: 0.25rem;
  }
  .setting-module-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .setting-module-control {
    width: 100%;
    justify-content: flex-start;
  }
  .stack-health-item {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
  .domain-switcher-label {
    max-width: 120px;
  }
}
.offline-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--danger);
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 2000;
}
.offline-banner.visible {
  display: block;
}

/* .tag-pill moved to components/color-refinements.css 2026-05-27 */

.tag-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  border-radius: 0.5rem;
  border: 1px solid #e9ecef;
}

.tag-filter-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6c757d;
  white-space: nowrap;
}

/* Thin vertical separator between toolbar groups */
/* .toolbar-sep moved to components/color-refinements.css 2026-05-27 */

/* When sort/filter controls are inside a flex toolbar, flatten them */
.d-flex > .sort-controls {
  display: contents;
}
.d-flex > .tag-filter-bar {
  margin-bottom: 0 !important;
  padding: 0;
  background: transparent;
  border: none;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.25rem 0;
}

/* .sort-label, .sort-option family moved to components/color-refinements.css 2026-05-27 */

.provisioning-pulse {
  animation: pulse-opacity 1.5s ease-in-out infinite;
}

@keyframes pulse-opacity {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.queue-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  vertical-align: middle;
}

.tab-with-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

.tab-summary {
  display: block;
  font-size: 0.68rem;
  color: #6c757d;
  font-weight: 400;
  margin-top: 1px;
  white-space: nowrap;
}

.nav-link.active .tab-summary {
  color: var(--cloud, #0d6efd);
}

.celebration-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 0.9rem;
}

.celebration-banner.celebration-ssl {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: #1a1a2e;
}

.celebration-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.celebration-emoji {
  font-size: 1.5rem;
}

.celebration-sub {
  opacity: 0.85;
  font-size: 0.82rem;
}

.celebration-animate {
  animation: celebration-slide-in 0.4s ease-out;
}

@keyframes celebration-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* .tag-filter-pill family moved to components/tag-filter-pills.css 2026-05-27 */

.tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.tag-filter-clear {
  font-size: 0.78rem;
  color: #dc3545;
  text-decoration: none;
}
.tag-filter-clear:hover {
  text-decoration: underline;
}

.tag-remove {
  color: rgba(255, 255, 255, 0.7);
  margin-left: 0.2rem;
  text-decoration: none;
}
.tag-remove:hover {
  color: #fff;
}

.bulk-tag-card {
  transition: all 0.2s ease;
}

@keyframes item-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* @keyframes card-enter + .stat-card/.gauge-card/.app-panel entry animation
   + nth-child stagger delays moved to components/cross-cutting.css 2026-05-25. */

.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* .dash-infra-item hover-lift moved to components/dashboard-infra.css and
   .dash-link-card .gauge-card hover-lift moved to components/gauge-cards.css
   2026-05-25. */

:focus-visible {
  outline: 2px solid var(--cloud);
  outline-offset: 2px;
  border-radius: var(--radius);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* .form-control / .form-select :focus-visible { outline: none } moved to
   components/forms.css 2026-05-26 (round 4 cleanup). */

input[type=checkbox],
input[type=radio] {
  accent-color: var(--cloud);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible {
  outline: 2px solid var(--cloud);
  outline-offset: 2px;
}

input[type=range] {
  accent-color: var(--cloud);
  height: 6px;
  cursor: pointer;
}

.form-control:user-invalid {
  border-color: var(--danger);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc3545' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}
.form-control:user-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.form-control:user-valid:not(:placeholder-shown) {
  border-color: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23198754' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}
.form-control:user-valid:not(:placeholder-shown):focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px var(--success-bg);
}

/* .form-control / .form-select / .form-check-input :focus + :focus-visible
   rules moved to components/forms.css and components/button-table-polish.css
   2026-05-26 (round 4 cleanup). The component versions use design tokens
   (--input-focus-border, --input-focus-shadow, --form-cloud-focus). */

.form-group:has(.form-control:focus) .form-label {
  color: var(--cloud);
}

.form-group:has(.form-control:required) .form-label::after {
  content: " *";
  color: var(--danger);
  font-weight: 600;
}

.form-check-input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  background: var(--card-bg);
  position: relative;
  transition: all var(--duration) var(--ease);
}
.form-check-input[type=checkbox] {
  border-radius: 4px;
}
.form-check-input[type=checkbox]:checked {
  background: var(--cloud);
  border-color: var(--cloud);
}
.form-check-input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input[type=radio]:checked {
  border-color: var(--cloud);
  background: var(--cloud);
}
.form-check-input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}
.form-check-input:hover:not(:disabled) {
  border-color: var(--cloud);
}
.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* .form-check-input:focus-visible moved to components/button-table-polish.css
   2026-05-26 (round 4 cleanup). */

.form-switch .form-check-input {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--border-color);
  border: none;
  position: relative;
  transition: background var(--duration) var(--ease);
}
.form-switch .form-check-input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease);
}
.form-switch .form-check-input:checked {
  background: var(--cloud);
}
.form-switch .form-check-input:checked::after {
  transform: translateX(18px);
}
.form-switch .form-check-input:focus-visible {
  outline: 2px solid var(--cloud);
  outline-offset: 2px;
}

.form-group:has([maxlength]) {
  position: relative;
}
.input-group:has(.form-control:focus) .input-group-text {
  border-color: var(--cloud);
}
.input-group:has(.form-control:user-invalid) .input-group-text {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
.input-group:has(.form-control:user-valid) .input-group-text {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230ea5e9' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  appearance: none;
  cursor: pointer;
}
/* .form-select:focus moved to components/forms.css 2026-05-26
   (round 4 cleanup) — single-property override replaced by full
   token-driven version. */
.form-select:has(option:checked:disabled) {
  color: var(--text-muted);
}

input[type=range].form-range {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  outline: none;
  accent-color: var(--cloud);
}
input[type=range].form-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--cloud);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
input[type=range].form-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}
input[type=range].form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--cloud);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
input[type=range].form-range::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}
input[type=range].form-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
input[type=range].form-range:disabled::-webkit-slider-thumb, input[type=range].form-range:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}
textarea.form-control.resize-none {
  resize: none;
}
textarea.form-control.resize-horizontal {
  resize: horizontal;
}
textarea.form-control.resize-both {
  resize: both;
}

.invalid-feedback,
.valid-feedback {
  display: none;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.invalid-feedback {
  color: var(--danger);
}

.valid-feedback {
  color: var(--success);
}

.form-group:has(.form-control:user-invalid) .invalid-feedback,
.form-group:has(.form-control.is-invalid) .invalid-feedback {
  display: block;
}

.form-group:has(.form-control:user-valid) .valid-feedback {
  display: block;
}

.btn-submitting {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-submitting::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-control,
  .form-select,
  .form-check-input,
  .btn,
  input[type=range]::-webkit-slider-thumb,
  input[type=range]::-moz-range-thumb {
    transition: none !important;
    animation: none !important;
  }
  .alert-success.alert-dismissible {
    animation: none !important;
  }
  .scroll-top-btn {
    transition: none !important;
  }
}
/* @media (forced-colors: active) form a11y rules moved to
   components/forms.css 2026-05-26 (round 4 cleanup). */
@media print {
  .form-control,
  .form-select {
    border: 1px solid #000;
    background: transparent;
  }
  .btn[type=submit] {
    background: transparent;
    border: 2px solid #000;
    color: #000;
  }
}
/* view-transition-name rules moved to components/layout-shell.css + dashboard-hero.css 2026-05-25 */

/* .app-content container-type moved to components/layout-shell.css 2026-05-25 */

/* @container main responsive overrides moved to components/layout-shell.css
   2026-05-25 — layout-shell already had the identical block, this was a pure
   duplicate. Includes .security-hero, .domain-hero-status, .attributes-table
   responsive variants. */
.whats-next-card {
  background: linear-gradient(135deg, var(--cloud-bg, rgba(14, 165, 233, 0.06)) 0%, rgba(139, 92, 246, 0.04) 100%);
  border: 1px solid var(--cloud, #0ea5e9);
  border-left: 4px solid var(--cloud, #0ea5e9);
  border-radius: 10px;
  overflow: hidden;
  animation: card-enter 0.4s var(--ease-spring, ease) both;
}

.whats-next-steps {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1rem;
}

.whats-next-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  color: var(--text-primary, #1e293b);
}
.whats-next-step > i {
  font-size: 0.9rem;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}
.whats-next-step.complete > i {
  color: var(--success, #22c55e);
}
.whats-next-step.complete .whats-next-label {
  text-decoration: line-through;
  color: var(--text-muted, #94a3b8);
}
.whats-next-step a.whats-next-label {
  color: var(--cloud, #0ea5e9);
  text-decoration: none;
  font-weight: 500;
}
.whats-next-step a.whats-next-label:hover {
  text-decoration: underline;
}
.whats-next-step .whats-next-info {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  margin-left: auto;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  margin: 0 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  color: var(--sidebar-text, rgba(255, 255, 255, 0.55));
  font-size: var(--text-xs, 0.75rem);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.theme-toggle .theme-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  transition: background 0.3s;
  flex-shrink: 0;
}
.theme-toggle .theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #1e293b;
}

[data-theme=dark] .theme-toggle .theme-toggle-track {
  background: var(--cloud, #0ea5e9);
}

[data-theme=dark] .theme-toggle .theme-toggle-thumb {
  transform: translateX(16px);
  color: #0f172a;
}

.nav-tabs-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-tabs-scroll::-webkit-scrollbar {
  display: none;
}
.nav-tabs-scroll .nav-tabs {
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}

@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme=light]) {
    --content-bg: #0f1419;
    --card-bg: rgba(30, 41, 59, 0.75);
    --card-border: rgba(148, 163, 184, 0.1);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
    --card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* Dark-mode shadow base — flip to pure black so the elevation scale
       defined in :root produces darker shadows automatically. */
    --shadow-base-color: #000;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.12);
    --cloud: #38bdf8;
    --cloud-light: #7dd3fc;
    --cloud-dark: #0ea5e9;
    --cloud-bg: rgba(56, 189, 248, 0.1);
    --cloud-glow: rgba(56, 189, 248, 0.3);
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.1);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.1);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.1);
    --info: #60a5fa;
    --info-bg: rgba(96, 165, 250, 0.1);
    --teal: #2dd4bf;
    --teal-bg: rgba(45, 212, 191, 0.1);
  }
  html:not([data-bs-theme=light]) body {
    background: linear-gradient(135deg, #0f1419 0%, #131a22 50%, #0f1419 100%);
  }
  html:not([data-bs-theme=light]) ::selection {
    background: var(--cloud);
    color: #0f172a;
  }
  html:not([data-bs-theme=light]) .global-search-input {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(148, 163, 184, 0.12);
    color: var(--text-primary);
  }
  html:not([data-bs-theme=light]) .global-search-input::placeholder {
    color: var(--text-muted);
  }
  html:not([data-bs-theme=light]) .global-search-input:focus {
    background: rgba(30, 41, 59, 0.9);
  }
  html:not([data-bs-theme=light]) .search-results-list {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.1);
  }
  html:not([data-bs-theme=light]) .card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  html:not([data-bs-theme=light]) .stat-card::after {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(56, 189, 248, 0.08));
  }
  html:not([data-bs-theme=light]) .table thead th {
    background: rgba(30, 41, 59, 0.5);
    color: var(--text-muted);
    border-bottom-color: var(--border-color);
  }
  html:not([data-bs-theme=light]) .table td {
    border-bottom-color: rgba(148, 163, 184, 0.06);
  }
  html:not([data-bs-theme=light]) .attributes-table th, html:not([data-bs-theme=light]) .attributes-table td {
    border-bottom-color: rgba(148, 163, 184, 0.08);
  }
  html:not([data-bs-theme=light]) .resource-list .resource-item {
    border-bottom-color: rgba(148, 163, 184, 0.06);
  }
  html:not([data-bs-theme=light]) .resource-list .resource-meta .badge.bg-secondary {
    border-color: rgba(148, 163, 184, 0.2);
  }
  html:not([data-bs-theme=light]) .domain-list .dropdown .btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.1);
  }
  html:not([data-bs-theme=light]) .dash-hero-link:hover {
    background: rgba(56, 189, 248, 0.08);
  }
  html:not([data-bs-theme=light]) .app-form-card .app-form-header {
    background: rgba(30, 41, 59, 0.5);
  }
  html:not([data-bs-theme=light]) .app-form-card .app-form-footer {
    background: rgba(30, 41, 59, 0.5);
  }
  html:not([data-bs-theme=light]) .form-section-title {
    border-bottom-color: var(--border-color);
  }
  html:not([data-bs-theme=light]) .form-tab-intro {
    border-bottom-color: var(--border-color);
  }
  html:not([data-bs-theme=light]) .app-tab-form .nav-tabs {
    border-bottom-color: var(--border-color);
  }
  html:not([data-bs-theme=light]) .setting-row {
    border-bottom-color: rgba(148, 163, 184, 0.06);
  }
  /* .domain-hero-status moved to components/color-refinements.css 2026-05-27 */
  html:not([data-bs-theme=light]) .gauge-card .gauge-track {
    background: rgba(148, 163, 184, 0.1);
  }
  html:not([data-bs-theme=light]) .progress {
    background: rgba(148, 163, 184, 0.1);
  }
  html:not([data-bs-theme=light]) .alert.alert-success {
    background: var(--success-bg);
    color: var(--success);
  }
  html:not([data-bs-theme=light]) .alert.alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
  }
  html:not([data-bs-theme=light]) .alert.alert-info {
    background: var(--info-bg);
    color: var(--info);
  }
  html:not([data-bs-theme=light]) .alert.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
  }
  html:not([data-bs-theme=light]) .markdown-body code {
    background: rgba(148, 163, 184, 0.1);
    color: var(--cloud);
  }
  html:not([data-bs-theme=light]) .markdown-body table th {
    background: rgba(30, 41, 59, 0.5);
  }
  html:not([data-bs-theme=light]) .markdown-body table td {
    border-bottom-color: rgba(148, 163, 184, 0.06);
  }
  html:not([data-bs-theme=light]) .markdown-body h3, html:not([data-bs-theme=light]) .markdown-body .h3 {
    border-bottom-color: rgba(148, 163, 184, 0.08);
  }
  html:not([data-bs-theme=light]) .tag-filter-bar {
    background: rgba(30, 41, 59, 0.5);
    border-color: var(--border-color);
  }
  html:not([data-bs-theme=light]) .tag-filter-label {
    color: var(--text-muted);
  }
  html:not([data-bs-theme=light]) .offline-banner {
    background: var(--danger);
  }
  html:not([data-bs-theme=light]) .finding-meta {
    background: rgba(30, 41, 59, 0.4);
  }
  html:not([data-bs-theme=light]) .finding-item {
    border-bottom-color: rgba(148, 163, 184, 0.06);
  }
  html:not([data-bs-theme=light]) .app-breadcrumbs .breadcrumb-sep {
    color: var(--border-color);
  }
  html:not([data-bs-theme=light]) .badge-yes, html:not([data-bs-theme=light]) .badge-active {
    background: var(--success-bg);
    color: var(--success);
  }
  html:not([data-bs-theme=light]) .badge-no, html:not([data-bs-theme=light]) .badge-inactive {
    background: var(--danger-bg);
    color: var(--danger);
  }
  /* .sidebar-overlay + .mobile-hamburger dark-theme overrides removed —
     components/sidebar.css uses semantic tokens (--sidebar-overlay,
     --overlay-hover) that auto-swap with the theme. 2026-05-25. */
  html:not([data-bs-theme=light]) .dash-hero {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%), var(--card-bg);
  }
  html:not([data-bs-theme=light]) .security-hero {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%), var(--card-bg);
  }
  html:not([data-bs-theme=light]) .security-all-clear {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06) 0%, rgba(45, 212, 191, 0.04) 100%), var(--card-bg);
    border-color: rgba(74, 222, 128, 0.15);
  }
  html:not([data-bs-theme=light]) .security-empty {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(234, 179, 8, 0.03) 100%), var(--card-bg);
    border-color: rgba(251, 191, 36, 0.15);
  }
  html:not([data-bs-theme=light]) .score-chip.chip-pass {
    background: var(--success-bg);
    color: var(--success);
  }
  html:not([data-bs-theme=light]) .score-chip.chip-warning {
    background: var(--warning-bg);
    color: var(--warning);
  }
  html:not([data-bs-theme=light]) .score-chip.chip-critical {
    background: var(--danger-bg);
    color: var(--danger);
  }
  html:not([data-bs-theme=light]) .severity-badge-pass {
    background: var(--success-bg);
    color: var(--success);
  }
  html:not([data-bs-theme=light]) .severity-badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
  }
  html:not([data-bs-theme=light]) .severity-badge-critical {
    background: var(--danger-bg);
    color: var(--danger);
  }
  html:not([data-bs-theme=light]) .severity-badge-neutral {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
  }
  html:not([data-bs-theme=light]) .sysreq-item {
    border-bottom-color: var(--border-color);
  }
  html:not([data-bs-theme=light]) .app-form-errors {
    background: var(--danger-bg);
    border-color: rgba(248, 113, 113, 0.15);
  }
  html:not([data-bs-theme=light]) .app-form-errors ul {
    color: var(--danger);
  }
  html:not([data-bs-theme=light]) .bg-light {
    background: rgba(30, 41, 59, 0.6) !important;
    color: var(--text-primary);
  }
  html:not([data-bs-theme=light]) .form-control, html:not([data-bs-theme=light]) .form-select {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.15);
    color: var(--text-primary);
  }
  html:not([data-bs-theme=light]) .form-control::placeholder, html:not([data-bs-theme=light]) .form-select::placeholder {
    color: var(--text-muted);
  }
  html:not([data-bs-theme=light]) .form-control:focus, html:not([data-bs-theme=light]) .form-select:focus {
    background: rgba(30, 41, 59, 0.8);
    border-color: var(--cloud);
    color: var(--text-primary);
  }
  html:not([data-bs-theme=light]) .form-text {
    color: var(--text-muted);
  }
  html:not([data-bs-theme=light]) .form-label {
    color: var(--text-primary);
  }
  html:not([data-bs-theme=light]) .btn-outline-secondary {
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
  }
  html:not([data-bs-theme=light]) .btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-primary);
  }
  html:not([data-bs-theme=light]) .text-warning {
    color: var(--warning) !important;
  }
}
html[data-bs-theme=dark] {
  --content-bg: #0f1419;
  --card-bg: rgba(30, 41, 59, 0.75);
  --card-border: rgba(148, 163, 184, 0.1);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-base-color: #000;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: rgba(148, 163, 184, 0.12);
  --cloud: #38bdf8;
  --cloud-light: #7dd3fc;
  --cloud-dark: #0ea5e9;
  --cloud-bg: rgba(56, 189, 248, 0.1);
  --cloud-glow: rgba(56, 189, 248, 0.3);
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.1);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.1);
  --teal: #2dd4bf;
  --teal-bg: rgba(45, 212, 191, 0.1);
}
html[data-bs-theme=dark] body {
  background: linear-gradient(135deg, #0f1419 0%, #131a22 50%, #0f1419 100%);
}
html[data-bs-theme=dark] ::selection {
  background: var(--cloud);
  color: #0f172a;
}
/* .app-sidebar dark-theme override removed — covered by the
   html:not([data-bs-theme=light]) .app-sidebar rule above, which
   already matches explicit dark + auto + default themes. */
html[data-bs-theme=dark] .global-search-input {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(148, 163, 184, 0.12);
  color: var(--text-primary);
}
html[data-bs-theme=dark] .global-search-input::placeholder {
  color: var(--text-muted);
}
html[data-bs-theme=dark] .global-search-input:focus {
  background: rgba(30, 41, 59, 0.9);
}
html[data-bs-theme=dark] .search-results-list {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.1);
}
html[data-bs-theme=dark] .card {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-bs-theme=dark] .stat-card::after {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(56, 189, 248, 0.08));
}
html[data-bs-theme=dark] .table thead th {
  background: rgba(30, 41, 59, 0.5);
  color: var(--text-muted);
  border-bottom-color: var(--border-color);
}
html[data-bs-theme=dark] .table td {
  border-bottom-color: rgba(148, 163, 184, 0.06);
}
html[data-bs-theme=dark] .attributes-table th, html[data-bs-theme=dark] .attributes-table td {
  border-bottom-color: rgba(148, 163, 184, 0.08);
}
html[data-bs-theme=dark] .resource-list .resource-item {
  border-bottom-color: rgba(148, 163, 184, 0.06);
}
html[data-bs-theme=dark] .resource-list .resource-meta .badge.bg-secondary {
  border-color: rgba(148, 163, 184, 0.2);
}
html[data-bs-theme=dark] .domain-list .dropdown .btn-outline-secondary:hover {
  background: rgba(148, 163, 184, 0.1);
}
html[data-bs-theme=dark] .dash-hero-link:hover {
  background: rgba(56, 189, 248, 0.08);
}
html[data-bs-theme=dark] .app-form-card .app-form-header {
  background: rgba(30, 41, 59, 0.5);
}
html[data-bs-theme=dark] .app-form-card .app-form-footer {
  background: rgba(30, 41, 59, 0.5);
}
html[data-bs-theme=dark] .form-section-title {
  border-bottom-color: var(--border-color);
}
html[data-bs-theme=dark] .form-tab-intro {
  border-bottom-color: var(--border-color);
}
html[data-bs-theme=dark] .app-tab-form .nav-tabs {
  border-bottom-color: var(--border-color);
}
html[data-bs-theme=dark] .setting-row {
  border-bottom-color: rgba(148, 163, 184, 0.06);
}
html[data-bs-theme=dark] .gauge-card .gauge-track {
  background: rgba(148, 163, 184, 0.1);
}
html[data-bs-theme=dark] .progress {
  background: rgba(148, 163, 184, 0.1);
}
html[data-bs-theme=dark] .alert.alert-success {
  background: var(--success-bg);
  color: var(--success);
}
html[data-bs-theme=dark] .alert.alert-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
html[data-bs-theme=dark] .alert.alert-info {
  background: var(--info-bg);
  color: var(--info);
}
html[data-bs-theme=dark] .alert.alert-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
html[data-bs-theme=dark] .markdown-body code {
  background: rgba(148, 163, 184, 0.1);
  color: var(--cloud);
}
html[data-bs-theme=dark] .markdown-body table th {
  background: rgba(30, 41, 59, 0.5);
}
html[data-bs-theme=dark] .markdown-body table td {
  border-bottom-color: rgba(148, 163, 184, 0.06);
}
html[data-bs-theme=dark] .markdown-body h3, html[data-bs-theme=dark] .markdown-body .h3 {
  border-bottom-color: rgba(148, 163, 184, 0.08);
}
html[data-bs-theme=dark] .tag-filter-bar {
  background: rgba(30, 41, 59, 0.5);
  border-color: var(--border-color);
}
html[data-bs-theme=dark] .tag-filter-label {
  color: var(--text-muted);
}
html[data-bs-theme=dark] .offline-banner {
  background: var(--danger);
}
html[data-bs-theme=dark] .finding-meta {
  background: rgba(30, 41, 59, 0.4);
}
html[data-bs-theme=dark] .finding-item {
  border-bottom-color: rgba(148, 163, 184, 0.06);
}
html[data-bs-theme=dark] .app-breadcrumbs .breadcrumb-sep {
  color: var(--border-color);
}
html[data-bs-theme=dark] .badge-yes, html[data-bs-theme=dark] .badge-active {
  background: var(--success-bg);
  color: var(--success);
}
html[data-bs-theme=dark] .badge-no, html[data-bs-theme=dark] .badge-inactive {
  background: var(--danger-bg);
  color: var(--danger);
}
/* .sidebar-overlay + .mobile-hamburger dark-theme overrides removed —
   covered by the html:not([data-bs-theme=light]) versions above. */
html[data-bs-theme=dark] .dash-hero {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%), var(--card-bg);
}
html[data-bs-theme=dark] .security-hero {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%), var(--card-bg);
}
html[data-bs-theme=dark] .security-all-clear {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.06) 0%, rgba(45, 212, 191, 0.04) 100%), var(--card-bg);
  border-color: rgba(74, 222, 128, 0.15);
}
html[data-bs-theme=dark] .security-empty {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(234, 179, 8, 0.03) 100%), var(--card-bg);
  border-color: rgba(251, 191, 36, 0.15);
}
html[data-bs-theme=dark] .score-chip.chip-pass {
  background: var(--success-bg);
  color: var(--success);
}
html[data-bs-theme=dark] .score-chip.chip-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
html[data-bs-theme=dark] .score-chip.chip-critical {
  background: var(--danger-bg);
  color: var(--danger);
}
html[data-bs-theme=dark] .severity-badge-pass {
  background: var(--success-bg);
  color: var(--success);
}
html[data-bs-theme=dark] .severity-badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
html[data-bs-theme=dark] .severity-badge-critical {
  background: var(--danger-bg);
  color: var(--danger);
}
html[data-bs-theme=dark] .severity-badge-neutral {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
html[data-bs-theme=dark] .sysreq-item {
  border-bottom-color: var(--border-color);
}
html[data-bs-theme=dark] .app-form-errors {
  background: var(--danger-bg);
  border-color: rgba(248, 113, 113, 0.15);
}
html[data-bs-theme=dark] .app-form-errors ul {
  color: var(--danger);
}
/* .portal-client / .portal-reseller .app-sidebar dark-theme tints
   removed — covered by the html:not([data-bs-theme=light]) versions above. */
html[data-bs-theme=dark] .bg-light {
  background: rgba(30, 41, 59, 0.6) !important;
  color: var(--text-primary);
}
html[data-bs-theme=dark] .form-control, html[data-bs-theme=dark] .form-select {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.15);
  color: var(--text-primary);
}
html[data-bs-theme=dark] .form-control::placeholder, html[data-bs-theme=dark] .form-select::placeholder {
  color: var(--text-muted);
}
html[data-bs-theme=dark] .form-control:focus, html[data-bs-theme=dark] .form-select:focus {
  background: rgba(30, 41, 59, 0.8);
  border-color: var(--cloud);
  color: var(--text-primary);
}
html[data-bs-theme=dark] .form-text {
  color: var(--text-muted);
}
html[data-bs-theme=dark] .form-label {
  color: var(--text-primary);
}
html[data-bs-theme=dark] .btn-outline-secondary {
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
}
html[data-bs-theme=dark] .btn-outline-secondary:hover {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-primary);
}
html[data-bs-theme=dark] .text-warning {
  color: var(--warning) !important;
}

.confirm-modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color, #eee);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.keyboard-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.keyboard-shortcuts-modal {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  width: 520px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.keyboard-shortcuts-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #eee);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.keyboard-shortcuts-header h3, .keyboard-shortcuts-header .h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.keyboard-shortcuts-body {
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.keyboard-shortcuts-body h4, .keyboard-shortcuts-body .h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #999);
  margin-bottom: 0.75rem;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.shortcut-row kbd {
  background: var(--surface-muted, #f1f1f1);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.8rem;
  font-family: inherit;
  min-width: 24px;
  text-align: center;
}
.shortcut-row span {
  margin-left: auto;
  font-size: 0.9rem;
}

[data-controller=clipboard] [data-clipboard-btn] {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}
[data-controller=clipboard] [data-clipboard-btn]:hover {
  opacity: 1;
}

@media (max-width: 992px) {
}

.whats-next-card .whats-next-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.whats-next-card .whats-next-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.4rem 0;
}
.whats-next-card .whats-next-step.completed {
  opacity: 0.6;
}
.whats-next-card .whats-next-check {
  padding-top: 2px;
}
.whats-next-card .whats-next-label {
  font-weight: 500;
}
.whats-next-card a.whats-next-label {
  color: var(--color-primary);
  text-decoration: none;
}
.whats-next-card a.whats-next-label:hover {
  text-decoration: underline;
}
.whats-next-card .whats-next-info {
  margin-top: 2px;
}
/* When whats-next is a collapsible <details>, use its own padding */
details.whats-next-card > .whats-next-steps {
  padding: 0.5rem 1rem 0.75rem;
}
details.whats-next-card > summary {
  color: var(--cloud, #0ea5e9);
  background: transparent;
  cursor: pointer;
}
details.whats-next-card > summary:hover {
  background: rgba(14, 165, 233, 0.08);
}
details.whats-next-card > summary::after {
  color: var(--cloud, #0ea5e9);
  opacity: 0.7;
}

.prerequisite-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prerequisite-banner i {
  font-size: 1.1rem;
}

.provision-stepper {
  display: flex;
  flex-direction: column;
}

.provision-step {
  display: flex;
  gap: 0.75rem;
  min-height: 48px;
}

.provision-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.provision-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: all 0.2s var(--ease);
}

.provision-step-icon--pending {
  background: var(--content-bg, #f8fafc);
  border: 2px solid var(--border-color, #e2e8f0);
  color: var(--text-muted, #94a3b8);
}

.provision-step-icon--running {
  background: var(--cloud, #0ea5e9);
  border: 2px solid var(--cloud, #0ea5e9);
  color: white;
  box-shadow: 0 0 0 4px var(--cloud-bg, rgba(14, 165, 233, 0.07));
  animation: stepper-pulse 2s ease-in-out infinite;
}

.provision-step-icon--completed {
  background: var(--success, #34d399);
  border: 2px solid var(--success, #34d399);
  color: white;
}

.provision-step-icon--failed {
  background: var(--danger, #f87171);
  border: 2px solid var(--danger, #f87171);
  color: white;
}

.provision-step-connector {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background: var(--border-color, #e2e8f0);
  margin: 2px 0;
}

.provision-step-connector--completed {
  background: var(--success, #34d399);
}

.provision-step-connector--running {
  background: linear-gradient(to bottom, var(--cloud, #0ea5e9), var(--border-color, #e2e8f0));
}

.provision-step-connector--failed {
  background: var(--danger, #f87171);
}

.provision-step-body {
  padding: 0.25rem 0 0.5rem;
  min-width: 0;
}

.provision-step-label {
  font-weight: 600;
  font-size: var(--text-sm, 0.833rem);
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}

.provision-step--completed .provision-step-label {
  color: var(--success, #34d399);
}

.provision-step--running .provision-step-label {
  color: var(--cloud, #0ea5e9);
}

.provision-step--failed .provision-step-label {
  color: var(--danger, #f87171);
}

.provision-step--pending .provision-step-label {
  color: var(--text-muted, #94a3b8);
}

.provision-step-desc {
  font-size: var(--text-xs, 0.694rem);
  color: var(--text-muted, #94a3b8);
  line-height: 1.3;
}

.provision-elapsed {
  font-size: var(--text-xs, 0.694rem);
  padding-left: 2.5rem;
}

.setup-progress-card .stepper {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}
.setup-progress-card .stepper-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.setup-progress-card .stepper-connector-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.setup-progress-card .stepper-connector {
  flex: 1;
  height: 3px;
  background: var(--border-color);
}
.setup-progress-card .stepper-connector.filled {
  background: var(--color-success);
}
.setup-progress-card .stepper-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  border: 3px solid var(--border-color);
  background: var(--surface-bg);
  color: var(--text-muted, #94a3b8);
  transition: all 0.2s ease;
}
.setup-progress-card .stepper-completed .stepper-node {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
.setup-progress-card .stepper-current .stepper-node {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
  animation: stepper-pulse 2s ease-in-out infinite;
}
@keyframes stepper-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary) 8%, transparent);
  }
}
.setup-progress-card .stepper-content {
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  max-width: 120px;
}
.setup-progress-card .stepper-label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  display: block;
}
.setup-progress-card .stepper-completed .stepper-label {
  color: var(--color-success);
}
.setup-progress-card .stepper-current .stepper-label {
  color: var(--color-text-base);
}
.setup-progress-card .stepper-pending .stepper-label {
  color: var(--text-muted, #94a3b8);
}
.setup-progress-card a.stepper-label {
  color: var(--color-primary);
  text-decoration: none;
}
.setup-progress-card a.stepper-label:hover {
  text-decoration: underline;
}
.setup-progress-card .stepper-hint {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 0.2rem;
  line-height: 1.25;
}
@media (max-width: 640px) {
  .setup-progress-card .stepper {
    flex-direction: column;
    gap: 0;
  }
  .setup-progress-card .stepper-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .setup-progress-card .stepper-connector-wrapper {
    flex-direction: column;
    width: 36px;
    flex-shrink: 0;
  }
  .setup-progress-card .stepper-connector {
    width: 3px;
    height: 20px;
    flex: none;
    margin: 0 auto;
  }
  .setup-progress-card .stepper-content {
    margin-top: 0;
    margin-left: 0.75rem;
    max-width: none;
    padding: 0.4rem 0;
  }
}

.troubleshooting-card .troubleshooting-steps {
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.troubleshooting-card .troubleshooting-steps li {
  margin-bottom: 0.5rem;
}

[data-controller=help-toggle] .d-none {
  display: none;
}

@keyframes celebrate-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
.search-input-group {
  max-width: 400px;
}

.progress-disk {
  height: 8px;
  max-width: 280px;
}

.icon-faded {
  opacity: 0.3;
}

.onboarding-label {
  font-size: 0.8rem;
}

.onboarding-text {
  font-size: 0.85rem;
}

.ip-set-raw {
  font-family: monospace;
  white-space: pre-wrap;
}

.select-narrow {
  max-width: 100px;
}

.impersonation-banner {
  background: linear-gradient(90deg, #7c3aed, #6d28d9);
  color: #fff;
  padding: 0.625rem 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -1.75rem -2rem 1.25rem -2rem;
  border-radius: 0;
}
.impersonation-banner i {
  opacity: 0.8;
}
.impersonation-banner .impersonation-return {
  margin-left: auto;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: background 0.15s;
}
.impersonation-banner .impersonation-return:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* .landing-body and .landing-body::before moved to components/landing-page.css
   2026-05-25 (Phase 3a fix). Legacy layer was losing to app-theme.css's
   `body { background: var(--surface-bg) }` in @layer components, causing the
   landing page to render with the light-theme body background instead of the
   intentionally-dark #0b1120. Component-layer rule with body.landing-body
   selector wins on specificity within the same layer. */

.landing {
  position: relative;
  z-index: 1;
}

.landing-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* .landing-hero moved to components/landing-page.css 2026-05-25 */

.landing-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.landing-brand h1, .landing-brand .h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #f1f5f9;
  margin: 0;
}

.landing-brand-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.35);
  font-size: 1.25rem;
  color: #fff;
}

.landing-tagline {
  font-size: 1.0625rem;
  color: #94a3b8;
  margin-bottom: 3rem;
}

.landing-portals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 640px;
  margin: 0 auto;
}

.health-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  cursor: help;
}

.health-dot-ok {
  background-color: #22c55e;
}

.health-dot-fail {
  background-color: #ef4444;
}

.health-dot-unknown {
  background-color: #94a3b8;
}

.setting-module {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.setting-module-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  gap: 1rem;
}

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

.setting-module-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  margin-bottom: 0.125rem;
}

.setting-module-icon {
  color: var(--muted);
  margin-right: 0.375rem;
}

.setting-module-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.setting-module-control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.setting-toggle-label {
  font-size: 0.75rem;
  color: var(--muted);
  user-select: none;
}

.setting-module-footer {
  border-top: 1px solid var(--border);
  padding: 0.5rem 1.25rem;
  background: rgba(0, 0, 0, 0.01);
}

.setting-module-help-link {
  font-size: 0.75rem;
  color: var(--cloud);
  text-decoration: none;
}
.setting-module-help-link:hover {
  text-decoration: underline;
}

.setting-module-help {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  padding: 0.5rem 0 0.25rem;
}

.action-items {
  margin-bottom: 1rem;
}

.action-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.action-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.action-item.action-item-critical {
  border-left: 3px solid #dc3545;
  background: rgba(220, 53, 69, 0.04);
}
.action-item.action-item-moderate {
  border-left: 3px solid #ffc107;
  background: rgba(255, 193, 7, 0.04);
}
.action-item.action-item-low {
  border-left: 3px solid #6c757d;
  background: rgba(108, 117, 125, 0.04);
}

.action-item-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.action-item-icon.icon-critical {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}
.action-item-icon.icon-moderate {
  background: rgba(255, 193, 7, 0.12);
  color: #b45309;
}
.action-item-icon.icon-low {
  background: rgba(108, 117, 125, 0.12);
  color: #6c757d;
}

.action-item-text {
  flex: 1;
  min-width: 0;
}

.action-item-title {
  font-weight: 600;
  font-size: 0.8125rem;
}

.action-item-desc {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

.stack-health-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stack-health-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.stack-health-item .stack-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.stack-health-item.health-active .stack-health-dot {
  background: #22c55e;
}
.stack-health-item.health-inactive .stack-health-dot {
  background: #ef4444;
}
.stack-health-item.health-unknown .stack-health-dot {
  background: #94a3b8;
}

.action-item-context {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.125rem;
  font-style: italic;
}

/* .content-header-bar layout moved to .client-topbar in
   components/portal-polish.css 2026-05-26 (portal-name-encoded
   selector rename). */

.domain-switcher {
  position: relative;
}

.domain-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.domain-switcher-btn:hover, .domain-switcher-btn:focus {
  border-color: var(--cloud);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.domain-switcher-btn .fa-globe {
  color: var(--cloud);
}

.domain-switcher-label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8125rem;
}

.domain-switcher-menu {
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.domain-switcher-item {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem;
}
.domain-switcher-item.active, .domain-switcher-item.active:hover, .domain-switcher-item.active:focus {
  background-color: rgba(99, 102, 241, 0.08);
  color: var(--text);
  font-weight: 600;
}

.domain-switcher-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.domain-switcher-dot.dot-green {
  background-color: #22c55e;
}
.domain-switcher-dot.dot-yellow {
  background-color: #f59e0b;
}
.domain-switcher-dot.dot-gray {
  background-color: #94a3b8;
}

.domain-switcher-name {
  font-family: "JetBrains Mono", monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.domain-switcher-badge {
  font-size: 0.65rem;
  flex-shrink: 0;
}

.domain-switcher-all {
  font-size: 0.8125rem;
  color: var(--cloud) !important;
}

/* .dash-bento family + responsive moved to components/dashboard-bento.css 2026-05-25 */
@media (max-width: 1199px) {
  .settings-dash {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .settings-dash {
    grid-template-columns: 1fr;
  }
}
/* .trend-flat moved to components/stat-cards.css 2026-05-25 */

/* .app-table polish moved to components/color-refinements.css 2026-05-27 */

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card-bg);
  box-shadow: inset 0 -1px 0 var(--border-color);
}

.dry-run-banner {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  text-align: center;
  padding: 0.375rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1100;
}
.dry-run-banner i {
  margin-right: 0.375rem;
}

/* Auto-dismiss removed for accessibility — alerts must remain visible
   until user explicitly dismisses them. Screen reader and keyboard users
   need persistent access to feedback messages. */
/* .dash-expandable details moved to components/dashboard-bento.css 2026-05-25 */

@keyframes details-slide-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.profile-card .card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.profile-card h6, .profile-card .h6 {
  margin-bottom: 0.25rem;
}

.badge-verified {
  font-size: var(--text-2xs);
  padding: 0.15em 0.5em;
  vertical-align: middle;
}

.traffic-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  padding: 0.5rem 0;
}
.traffic-chart .traffic-bar {
  flex: 1;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  transition: height var(--duration) var(--ease);
  position: relative;
}
.traffic-chart .traffic-bar.cached {
  background: var(--cloud);
}
.traffic-chart .traffic-bar.uncached {
  background: #e2e8f0;
}
.traffic-chart .traffic-bar:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-2xs);
  white-space: nowrap;
  pointer-events: none;
}
.license-feature-category {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--border-color);
}

.license-feature-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: var(--text-sm);
}

.license-feature-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  flex-shrink: 0;
}
.license-feature-check.enabled {
  background: color-mix(in srgb, var(--success) 22%, white);
  color: #059669;
}
.license-feature-check.disabled {
  background: var(--border-color);
  color: var(--text-muted);
}

.license-feature-icon {
  width: 14px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.license-feature-label {
  color: var(--text-primary);
  text-decoration: none;
}
.license-feature-label.disabled {
  color: var(--text-muted);
}
.license-feature-label:hover {
  color: var(--cloud);
}

.license-feature-badge {
  margin-left: auto;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.license-feature-badge.upgrade {
  background: color-mix(in srgb, var(--cloud) 20%, white);
  color: #0369a1;
}
.license-feature-badge.soon {
  background: var(--border-color);
  color: var(--text-muted);
}

.license-feature-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .license-free-card .card-header moved to components/license-and-log-cards.css 2026-05-25 */

.license-free-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
}

.license-free-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease);
}
.license-free-item:hover {
  background: color-mix(in srgb, var(--cloud) 10%, white);
}
.license-free-item i {
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: #059669;
}
.license-free-item span {
  color: var(--text-primary);
}

.license-free-upgrade {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.dropdown-item-form {
  display: contents;
}

.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--cloud);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.health-legend summary {
  cursor: pointer;
  list-style: none;
}
.health-legend summary::-webkit-details-marker {
  display: none;
}

.health-legend-body {
  display: flex;
  gap: 1rem;
}

.health-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.setting-category-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 0 0.375rem;
  margin: 0.5rem 0 0;
}

.scroll-top-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1040;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--cloud);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.scroll-top-btn:hover {
  background: var(--cloud-dark);
}

/* PHP Version Candidates List - Visual Radio Cards */
.php-candidates-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.php-candidate-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--surface-bg);
  transition: all 0.2s ease;
  cursor: pointer;
}

.php-candidate-card:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.php-candidate-card.installed {
  border-left: 4px solid var(--color-success);
}

.php-candidate-card.available {
  border-left: 4px solid var(--color-info);
}

.php-candidate-card.unknown {
  border-left: 4px solid var(--color-text-muted);
}

/* Already-added: disabled + visually dimmed. Used by the shared service
   version picker partial (PHP / nginx / Postfix / etc.) — admins can see
   what's installed but can't double-add it. */
.php-candidate-card.disabled,
.php-candidate-card.in_use {
  border-left: 4px solid var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text-muted) 4%, transparent);
  opacity: 0.65;
  cursor: not-allowed;
}
.php-candidate-card.disabled:hover,
.php-candidate-card.in_use:hover {
  border-color: var(--border-color);
  background: color-mix(in srgb, var(--color-text-muted) 4%, transparent);
}
.php-candidate-card.disabled .php-candidate-radio,
.php-candidate-card.in_use .php-candidate-radio,
.php-candidate-card.disabled .php-candidate-label,
.php-candidate-card.in_use .php-candidate-label {
  cursor: not-allowed;
}

.php-candidate-radio {
  padding-top: 0.125rem;
}

.php-candidate-radio input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.php-candidate-info {
  flex: 1;
}

.php-candidate-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  cursor: pointer;
}

.php-candidate-version {
  font-weight: 600;
  font-size: 1.1rem;
  font-family: var(--font-family-mono);
}

.php-candidate-status {
  font-size: 0.75rem;
  font-weight: 500;
}

.php-candidate-help {
  font-size: 0.875rem;
}

.php-candidate-card.selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: 0 0 0 0.125rem var(--color-primary);
}

/* .overview-hero family + .overview-section-title moved to components/heroes-and-page-headers.css 2026-05-25 */

/* .overview-card + .overview-link-card families + responsive moved to components/overview-and-services.css 2026-05-25 */

/* DNS Records section moved to components/dns-records.css 2026-05-25 */

/* Lines 5772-5836 (65 lines) extracted to legacy-utils.css 2026-05-26 (Option C). */
/* Lines 5837-5986 (150 lines) extracted to ownership-and-mail-timeline.css 2026-05-26 (Option C). */
/* Lines 5987-6173 (187 lines) extracted to mail-tracing.css 2026-05-26 (Option C). */
/* Lines 6174-6309 (136 lines) extracted to kpi-cards.css 2026-05-26 (Option C). */