@import url('./site-brand.css');

/* Shared theme layer. Existing page styles remain the dark-mode source of truth. */
:root {
  --site-header-block-space: clamp(1rem, 2vw, 1.5rem);
  --ambient-circle-size: 75vh;
  --nav-panel: rgba(5, 9, 7, 0.98);
  --nav-panel-border: rgba(255, 255, 255, 0.12);
  --nav-account-border: rgba(255, 255, 255, 0.16);
  --nav-toggle-border: rgba(255, 255, 255, 0.14);
  --nav-auth-divider: rgba(255, 255, 255, 0.08);
  --nav-control: rgba(255, 255, 255, 0.045);
  --nav-control-strong: rgba(8, 12, 10, 0.82);
  --nav-text: rgba(203, 213, 225, 0.82);
  --nav-divider: rgba(255, 255, 255, 0.11);
  --nav-hover: rgba(74, 222, 128, 0.07);
  --surface-input: rgba(0, 0, 0, 0.2);
  --debug-text: rgba(255, 255, 255, 0.45);
  --drop-surface: rgba(0, 0, 0, 0.15);
  --surface-soft: rgba(255, 255, 255, 0.025);
  --surface-elevated: rgba(10, 14, 12, 0.98);
  --elevated-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --status-error: #fca5a5;
  --status-error-strong: #ef4444;
  --status-warning: #f59e0b;
}

@supports (height: 100dvh) {
  :root {
    --ambient-circle-size: 75dvh;
  }
}

/* Scale the original 34rem circle and 14rem outer spread as one 62rem motif. */
.marketing-ambient {
  --ambient-ring-gap: calc(var(--ambient-circle-size) * 7 / 62);
  top: 50%;
  right: calc(var(--ambient-circle-size) * -16 / 62);
  width: calc(var(--ambient-circle-size) * 34 / 62);
  height: calc(var(--ambient-circle-size) * 34 / 62);
  transform: translateY(-50%);
}

html[data-theme='light'] {
  color-scheme: light;
  --color-accent: #167a48;
  --color-accent-rgb: 22, 122, 72;
  --theme-color: #167a48;
  --theme-color-rgb: 22, 122, 72;
  --bg-deep: #f7f9f5;
  --bg-panel: rgba(255, 255, 255, 0.78);
  --bg-panel-strong: #e8f0e9;
  --sidebar-glass: rgba(247, 249, 245, 0.86);
  --border-light: rgba(20, 33, 25, 0.14);
  --text-primary: #142119;
  --text-muted: #56655d;
  --status-online: #177245;
  --status-offline: #64748b;
  --status-maintenance: #9a5b00;
  --nav-panel: rgba(252, 253, 249, 0.98);
  --nav-panel-border: rgba(20, 33, 25, 0.14);
  --nav-account-border: rgba(20, 33, 25, 0.16);
  --nav-toggle-border: rgba(20, 33, 25, 0.14);
  --nav-auth-divider: rgba(20, 33, 25, 0.12);
  --nav-control: rgba(20, 33, 25, 0.045);
  --nav-control-strong: rgba(252, 253, 249, 0.94);
  --nav-text: #46574e;
  --nav-divider: rgba(20, 33, 25, 0.13);
  --nav-hover: rgba(22, 122, 72, 0.08);
  --surface-input: rgba(20, 33, 25, 0.045);
  --debug-text: var(--text-muted);
  --drop-surface: rgba(20, 33, 25, 0.04);
  --surface-soft: rgba(20, 33, 25, 0.025);
  --surface-elevated: rgba(252, 253, 249, 0.98);
  --elevated-shadow: 0 24px 60px rgba(20, 33, 25, 0.16);
  --status-error: #b42332;
  --status-error-strong: #b42332;
  --status-warning: #9a5b00;
}

/* Keep full-page headers balanced above and below the shared brand row. */
.homepage-wrapper,
.marketing-shell,
.account-shell,
.admin-wrapper,
.logo-lab-shell {
  padding-top: 0;
}

.homepage-header,
.marketing-header,
.account-page-header,
.admin-header,
.logo-lab-header {
  min-height: 0;
  padding-block: var(--site-header-block-space);
}

/* Shared Ground Audio identity */
.ground-audio-brand-mark {
  display: block;
  /* Match the 44px account circle, accounting for the SVG's 110/128 visible diameter. */
  width: calc(44px * 128 / 110);
  height: calc(44px * 128 / 110);
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 0.3rem rgba(74, 222, 128, 0.38));
}

html[data-theme='light'] .ground-audio-brand-mark {
  filter: brightness(0.55) saturate(1.1) drop-shadow(0 0 0.12rem rgba(22, 122, 72, 0.16));
}

/* Theme control */
.site-theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--nav-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  font-family: var(--font-title, sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.site-theme-toggle:hover {
  border-color: var(--color-accent, var(--theme-color, #4ade80));
  background: var(--nav-hover);
  color: var(--color-accent, var(--theme-color, #4ade80));
}

.site-theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent, var(--theme-color, #4ade80));
  outline-offset: 3px;
}

.site-theme-toggle-navigation {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.78rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--nav-text);
  font-size: 0.68rem;
}

.site-theme-toggle-navigation::before {
  position: absolute;
  left: 0;
  width: 1px;
  height: 0.8rem;
  background: var(--nav-divider);
  content: '';
}

/* Shared navigation */
.site-navigation-account-toggle {
  border-color: var(--nav-account-border);
  background: var(--nav-control);
}

.site-navigation-account-fallback {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12), transparent 50%),
    rgba(var(--color-accent-rgb, 74, 222, 128), 0.08);
}

.site-navigation-account-menu {
  border-color: var(--nav-panel-border);
  background: var(--nav-panel);
  box-shadow: var(--elevated-shadow);
}

.site-navigation-account-menu .site-navigation-link:hover,
.site-navigation-account-menu .site-navigation-link[aria-current='page'] {
  background-color: var(--nav-hover);
}

.site-navigation-link {
  color: var(--nav-text);
}

.site-navigation-auth {
  border-color: var(--nav-auth-divider);
}

.site-navigation-link:not(.site-navigation-listen)::before {
  background: var(--nav-divider);
}

.site-navigation-account-status,
.site-navigation-status {
  color: var(--status-error);
}

.site-navigation-toggle {
  border-color: var(--nav-toggle-border);
  background: var(--nav-control-strong);
  color: var(--text-primary, #f8fafc);
}

@media (max-width: 1080px) {
  .site-navigation-panel {
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-color: var(--nav-panel-border);
    background: var(--nav-panel);
    box-shadow: var(--elevated-shadow);
  }

  .site-theme-toggle-navigation {
    width: 100%;
    min-height: 48px;
    justify-content: flex-end;
    padding: 0 1rem;
    border-radius: 7px;
  }

  .site-theme-toggle-navigation::before {
    display: none;
  }

  .site-theme-toggle-navigation:hover {
    background: var(--nav-hover);
  }

  .site-navigation-link:hover,
  .site-navigation-link[aria-current='page'] {
    background: var(--nav-hover);
  }
}

/* Marketing */
html[data-theme='light'] .feature-card,
html[data-theme='light'] .about-story {
  background: rgba(20, 33, 25, 0.025);
}

html[data-theme='light'] .marketing-ambient {
  opacity: 1;
  border-color: rgba(var(--color-accent-rgb), 0.19);
  background: rgba(var(--color-accent-rgb), 0.018);
  box-shadow:
    0 0 0 var(--ambient-ring-gap) rgba(var(--color-accent-rgb), 0.06),
    0 0 0 calc(var(--ambient-ring-gap) * 2) rgba(var(--color-accent-rgb), 0.045);
}

html[data-theme='light'] .account-ambient {
  opacity: 1;
}

/* Sign-in, registration, and account pages */
html[data-theme='light'] .ambient-glow {
  background: radial-gradient(
    circle,
    rgba(var(--color-accent-rgb), 0.1) 0%,
    rgba(247, 249, 245, 0) 70%
  );
}

html[data-theme='light'] .login-card,
html[data-theme='light'] .account-card {
  box-shadow: 0 20px 44px rgba(20, 33, 25, 0.12);
}

html[data-theme='light'] .input-group input,
html[data-theme='light'] .account-field input,
html[data-theme='light'] .measurement-system-control,
html[data-theme='light'] .email-action-status,
html[data-theme='light'] .verification-complete-session,
html[data-theme='light'] .status-panel {
  background: var(--surface-input);
}

html[data-theme='light'] .input-group input:focus {
  background: rgba(255, 255, 255, 0.9);
}

html[data-theme='light'] .btn-submit {
  color: #fff;
}

html[data-theme='light'] .btn-submit:hover {
  background: #115f3b;
}

html[data-theme='light'] .btn-secondary:hover {
  background: var(--nav-hover);
}

html[data-theme='light'] .error-message,
html[data-theme='light'] .email-action-field-error,
html[data-theme='light'] .email-action-status[data-state='error'],
html[data-theme='light'] .email-action-noscript,
html[data-theme='light'] .account-form-status.is-error,
html[data-theme='light'] .settings-save-status.is-error,
html[data-theme='light'] .account-button-danger,
html[data-theme='light'] .sonos-auth-status.error {
  color: var(--status-error);
}

html[data-theme='light'] .email-action-mark[data-state='error'] {
  color: var(--status-error-strong);
}

html[data-theme='light'] .status-lbl {
  color: var(--status-warning);
}

/* Administration shell and controls. Spectrum canvases remain dark instruments. */
html[data-theme='light'] .admin-scope-bar {
  background: rgba(247, 249, 245, 0.97);
  box-shadow: 0 10px 28px rgba(20, 33, 25, 0.12);
}

html[data-theme='light'] .scope-segmented,
html[data-theme='light'] .scope-node-picker input,
html[data-theme='light'] .inventory-toolbar input,
html[data-theme='light'] .inventory-toolbar select,
html[data-theme='light'] .input-group input,
html[data-theme='light'] .input-group select,
html[data-theme='light'] .input-group textarea,
html[data-theme='light'] .site-cms-input-group input,
html[data-theme='light'] .site-cms-input-group textarea,
html[data-theme='light'] .spectrum-mode-select,
html[data-theme='light'] .num-input,
html[data-theme='light'] .node-editor-form input,
html[data-theme='light'] .node-editor-form select,
html[data-theme='light'] .node-editor-form textarea {
  background: rgba(20, 33, 25, 0.045);
  color: var(--text-primary);
}

html[data-theme='light'] .metrics-timeframe-control .select-input,
html[data-theme='light'] #pm2-log-type {
  background: rgba(20, 33, 25, 0.045) !important;
  color: var(--text-primary) !important;
}

html[data-theme='light'] .input-group select option {
  background: #fbfcf8;
  color: var(--text-primary);
}

html[data-theme='light'] .admin-tabs,
html[data-theme='light'] .sub-tabs,
html[data-theme='light'] .metrics-toolbar,
html[data-theme='light'] .chart-card-controls,
html[data-theme='light'] .site-cms-page-tabs,
html[data-theme='light'] .spectrum-mode-control {
  background: rgba(20, 33, 25, 0.04);
}

html[data-theme='light'] .control-card,
html[data-theme='light'] .form-card,
html[data-theme='light'] .node-card,
html[data-theme='light'] .retired-node-card,
html[data-theme='light'] .chart-card,
html[data-theme='light'] .metrics-section-shell,
html[data-theme='light'] .metrics-board,
html[data-theme='light'] .cellular-link-card,
html[data-theme='light'] .fleet-ota-panel,
html[data-theme='light'] .device-configuration-card,
html[data-theme='light'] .site-cms-section,
html[data-theme='light'] .site-cms-preview,
html[data-theme='light'] .verification-test-section,
html[data-theme='light'] .smart-node-group,
html[data-theme='light'] .node-editor-access-details,
html[data-theme='light'] .abr-ladder-preview,
html[data-theme='light'] .abr-model-strip,
html[data-theme='light'] .server-buffer-stats,
html[data-theme='light'] .hardware-health-stats,
html[data-theme='light'] .firmware-provenance-strip,
html[data-theme='light'] .scope-context-panel {
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme='light'] .smart-node-group,
html[data-theme='light'] .fleet-table-container,
html[data-theme='light'] .firmware-provenance-strip > div,
html[data-theme='light'] .cellular-link-metric,
html[data-theme='light'] .commission-identifiers > div,
html[data-theme='light'] .node-editor-identifiers > div,
html[data-theme='light'] .commission-success-identifiers > div,
html[data-theme='light'] .site-cms-fieldset,
html[data-theme='light'] .verification-test-routing,
html[data-theme='light'] .verification-test-path li,
html[data-theme='light'] .partition-card,
html[data-theme='light'] .partition-slot,
html[data-theme='light'] .device-config-control,
html[data-theme='light'] .node-config-details,
html[data-theme='light'] .node-config-apply-status,
html[data-theme='light'] .node-audio-mode-card,
html[data-theme='light'] .spectrum-stats,
html[data-theme='light'] .chart-card--primary,
html[data-theme='light'] .fleet-ota-progress .progress-track {
  background: rgba(20, 33, 25, 0.04) !important;
  border-color: var(--border-light);
}

html[data-theme='light'] .smart-node-group > summary,
html[data-theme='light'] .tab-btn:hover,
html[data-theme='light'] .tab-link:hover,
html[data-theme='light'] .node-editor-close:hover,
html[data-theme='light'] .btn-secondary:hover,
html[data-theme='light'] .chart-focus-button,
html[data-theme='light'] .metrics-refresh-button {
  background: var(--nav-hover);
}

html[data-theme='light'] .commission-progress-track {
  background: rgba(20, 33, 25, 0.1);
}

html[data-theme='light'] .chart-card.is-focused {
  background: rgba(232, 240, 233, 0.96);
  box-shadow: 0 12px 36px rgba(20, 33, 25, 0.14);
}

html[data-theme='light'] .fleet-table th {
  background: #e8f0e9;
  color: var(--text-muted);
}

html[data-theme='light'] .fleet-table td {
  border-color: var(--border-light);
}

html[data-theme='light'] .smart-group-source a,
html[data-theme='light'] .node-config-apply-status[data-state='loading'],
html[data-theme='light'] .spectrum-state.is-connecting,
html[data-theme='light'] .spectrum-state.is-waiting,
html[data-theme='light'] .spectrum-legend .is-left,
html[data-theme='light'] .metrics-live-state.is-syncing,
html[data-theme='light'] .server-buffer-state.is-surplus {
  color: #0875ad;
}

html[data-theme='light'] .cellular-link-state.is-good,
html[data-theme='light'] .cellular-link-metric.is-good > small,
html[data-theme='light'] .partition-badge.active,
html[data-theme='light'] .connection-status-badge.online,
html[data-theme='light'] .metrics-live-state.is-live,
html[data-theme='light'] .server-buffer-state.is-healthy,
html[data-theme='light'] .hardware-health-state.is-healthy {
  color: var(--status-online);
}

html[data-theme='light'] .status-pill.retired,
html[data-theme='light'] .status-pill.unavailable,
html[data-theme='light'] .cellular-link-state.is-poor,
html[data-theme='light'] .cellular-link-metric.is-poor > small,
html[data-theme='light'] .btn-card-delete,
html[data-theme='light'] .btn-remove-file,
html[data-theme='light'] .error-message,
html[data-theme='light'] .btn-danger-secondary,
html[data-theme='light'] .node-editor-weblet-status.is-error,
html[data-theme='light'] .node-editor-revoke,
html[data-theme='light'] .retire-node-kicker,
html[data-theme='light'] .site-cms-status.is-error,
html[data-theme='light'] .verification-test-status[data-state='error'],
html[data-theme='light'] .abr-ladder-preview.is-invalid .abr-ladder-values,
html[data-theme='light'] .partition-badge.rollback,
html[data-theme='light'] .connection-status-badge.offline,
html[data-theme='light'] .node-config-apply-status[data-state='error'],
html[data-theme='light'] .btn-node-reboot,
html[data-theme='light'] .spectrum-state.is-error,
html[data-theme='light'] .spectrum-toggle.is-stop,
html[data-theme='light'] #metrics-spectrum-clipping.is-clipping,
html[data-theme='light'] .server-buffer-state.is-critical,
html[data-theme='light'] .hardware-health-state.is-critical {
  color: var(--status-error-strong);
}

html[data-theme='light'] .metrics-live-state.is-stale {
  color: var(--status-warning);
}

html[data-theme='light'] .spectrum-card:not(:fullscreen):not(.is-fullscreen) {
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--color-accent-rgb), 0.08), transparent 42%),
    rgba(255, 255, 255, 0.72);
}

html[data-theme='light'] .spectrum-overlay {
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

html[data-theme='light'] .spectrum-card:fullscreen,
html[data-theme='light'] .spectrum-card.is-fullscreen {
  --color-accent: #4ade80;
  --color-accent-rgb: 74, 222, 128;
  --border-light: rgba(255, 255, 255, 0.08);
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
}

html[data-theme='light'] .spectrum-card:fullscreen .spectrum-mode-select,
html[data-theme='light'] .spectrum-card.is-fullscreen .spectrum-mode-select {
  background: rgba(0, 0, 0, 0.42);
}

html[data-theme='light'] .spectrum-card:fullscreen .spectrum-state.is-connecting,
html[data-theme='light'] .spectrum-card:fullscreen .spectrum-state.is-waiting,
html[data-theme='light'] .spectrum-card:fullscreen .spectrum-legend .is-left,
html[data-theme='light'] .spectrum-card.is-fullscreen .spectrum-state.is-connecting,
html[data-theme='light'] .spectrum-card.is-fullscreen .spectrum-state.is-waiting,
html[data-theme='light'] .spectrum-card.is-fullscreen .spectrum-legend .is-left {
  color: #38bdf8;
}

html[data-theme='light'] .spectrum-card:fullscreen .spectrum-state.is-error,
html[data-theme='light'] .spectrum-card:fullscreen .spectrum-toggle.is-stop,
html[data-theme='light'] .spectrum-card.is-fullscreen .spectrum-state.is-error,
html[data-theme='light'] .spectrum-card.is-fullscreen .spectrum-toggle.is-stop {
  color: #f87171;
}

html[data-theme='light'] .node-editor-dialog,
html[data-theme='light'] .retire-node-dialog,
html[data-theme='light'] .commission-success-dialog {
  background: #fbfcf8;
  box-shadow: 0 24px 80px rgba(20, 33, 25, 0.24);
}

html[data-theme='light'] .node-editor-preview,
html[data-theme='light'] .file-drop-zone,
html[data-theme='light'] .fleet-ota-drop-zone,
html[data-theme='light'] .commission-session,
html[data-theme='light'] .node-editor-issued-invite,
html[data-theme='light'] .node-editor-access-row,
html[data-theme='light'] .site-cms-note,
html[data-theme='light'] .verification-test-note,
html[data-theme='light'] .metrics-empty-message,
html[data-theme='light'] .hardware-health-meta,
html[data-theme='light'] .node-config-details-body {
  background: rgba(20, 33, 25, 0.04);
}

html[data-theme='light'] .file-drop-zone,
html[data-theme='light'] .partition-card {
  background: rgba(20, 33, 25, 0.04) !important;
}

html[data-theme='light'] .slider-group > p {
  color: var(--text-muted) !important;
}

html[data-theme='light'] .abr-controller-status p,
html[data-theme='light'] .abr-ladder-preview > p,
html[data-theme='light'] .control-help {
  color: var(--text-muted);
}

html[data-theme='light'] .log-console,
html[data-theme='light'] .commission-log {
  border-color: rgba(20, 33, 25, 0.16);
  background: #17211c;
  color: #d9e7de;
}

html[data-theme='light'] .upload-overlay {
  background: rgba(247, 249, 245, 0.9);
}

html[data-theme='light'] .spinner {
  border-color: rgba(20, 33, 25, 0.1);
  border-top-color: var(--color-accent);
}

html[data-theme='light'] .node-editor-dialog::backdrop,
html[data-theme='light'] .retire-node-dialog::backdrop,
html[data-theme='light'] .commission-success-dialog::backdrop {
  background: rgba(20, 33, 25, 0.48);
}

html[data-theme='light'] .apexcharts-menu,
html[data-theme='light'] .apexcharts-tooltip,
html[data-theme='light'] .apexcharts-xaxistooltip,
html[data-theme='light'] .apexcharts-yaxistooltip {
  border-color: var(--border-light) !important;
  background: #fbfcf8 !important;
  color: var(--text-primary) !important;
}

html[data-theme='light'] .apexcharts-toolbar svg {
  fill: var(--text-muted);
}

html[data-theme='light'] .apexcharts-yaxis text,
html[data-theme='light'] .apexcharts-yaxis-annotations text {
  fill: var(--text-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-theme-toggle {
    transition: none;
  }
}