/* GeneOS shared semantic presentation layer.
   Load after each page-local stylesheet so legacy GeneOS surfaces share
   the same dark/light contract while migration removes page-local values. */
:root {
  color-scheme: dark;
  --gx-brand: #3b82f6;
  --gx-brand-strong: #2563eb;
  --gx-brand-soft: #93c5fd;
  --gx-violet: #8b5cf6;
  --gx-positive: #10b981;
  --gx-warning: #f59e0b;
  --gx-critical: #ef4444;
  --gx-info: #06b6d4;
  --gx-page: #04080f;
  --gx-page-raised: #060a14;
  --gx-surface: #0a1224;
  --gx-surface-raised: #0f1a2e;
  --gx-surface-hover: #152038;
  --gx-text: #f0f4ff;
  --gx-text-muted: rgba(200, 215, 255, .68);
  --gx-text-subtle: rgba(140, 165, 220, .58);
  --gx-border: rgba(59, 130, 246, .22);
  --gx-border-subtle: rgba(59, 130, 246, .12);
  --gx-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  --gx-glass: color-mix(in srgb, var(--gx-surface) 88%, transparent);
  --gx-safe-top: env(safe-area-inset-top, 0px);
  --gx-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Compatibility aliases for the independent legacy GeneOS page roots. */
  --dark: var(--gx-page);
  --dark2: var(--gx-page-raised);
  --bg: var(--gx-page);
  --bg-deep: var(--gx-page);
  --bg-surface: var(--gx-surface);
  --bg-card: var(--gx-surface);
  --accent: var(--gx-brand);
  --warning: var(--gx-warning);
  --danger: var(--gx-critical);
  --purple: var(--gx-violet);
  --surface: var(--gx-surface);
  --surface2: var(--gx-surface-raised);
  --surface3: var(--gx-surface-hover);
  --blue: var(--gx-brand);
  --blue2: var(--gx-brand-soft);
  --blue3: color-mix(in srgb, var(--gx-brand-soft) 76%, white);
  --blue-dark: var(--gx-brand-strong);
  --text: var(--gx-text);
  --text2: var(--gx-text-muted);
  --text3: var(--gx-text-subtle);
  --red: var(--gx-critical);
  --gold: var(--gx-warning);
  --green: var(--gx-positive);
  --violet: var(--gx-violet);
  --teal: var(--gx-info);
  --ios-blue: var(--gx-brand);
  --ios-green: var(--gx-positive);
  --ios-red: var(--gx-critical);
  --ios-orange: var(--gx-warning);
  --ios-teal: var(--gx-brand-soft);
  --ios-purple: var(--gx-violet);
  --ios-bg: var(--gx-page);
  --ios-bg2: var(--gx-page-raised);
  --ios-surface: color-mix(in srgb, var(--gx-surface) 90%, transparent);
  --ios-border: var(--gx-border-subtle);
  --ios-border-focus: var(--gx-border);
  --ios-text: var(--gx-text);
  --ios-muted: var(--gx-text-subtle);
  --ios-sub: var(--gx-text-muted);
  --wiz-glass: color-mix(in srgb, var(--gx-surface) 88%, transparent);
  --wiz-glass-border: var(--gx-border-subtle);
  --wiz-shadow: var(--gx-shadow);
  --wiz-shadow-lg: var(--gx-shadow);
  --gx-glow: color-mix(in srgb, var(--gx-brand) 45%, transparent);
  --gx-glow-dim: color-mix(in srgb, var(--gx-brand) 12%, transparent);
  --gx-glow-bright: color-mix(in srgb, var(--gx-brand-soft) 60%, transparent);
  --gx-glass: color-mix(in srgb, var(--gx-surface) 88%, transparent);
  --gx-glass-border: var(--gx-border-subtle);
}

html[data-geneos-theme="light"] {
  color-scheme: light;
  --gx-page: #f6f9ff;
  --gx-page-raised: #eef4ff;
  --gx-surface: #ffffff;
  --gx-surface-raised: #f8fbff;
  --gx-surface-hover: #eaf2ff;
  --gx-text: #14213d;
  --gx-text-muted: #52647f;
  --gx-text-subtle: #6c7c95;
  --gx-border: rgba(37, 99, 235, .24);
  --gx-border-subtle: rgba(37, 99, 235, .12);
  --gx-shadow: 0 16px 42px rgba(30, 64, 175, .12);
  --gx-glass: color-mix(in srgb, white 88%, transparent);
  --ios-surface: color-mix(in srgb, white 88%, transparent);
  --wiz-glass: color-mix(in srgb, white 88%, transparent);
  --wiz-glass-border: var(--gx-border-subtle);
  /* Legacy login and account pages define this compact variable family in
     page-local :root blocks. Override it at the active theme scope so those
     surfaces do not retain dark text/surface values in light mode. */
  --s2: var(--gx-surface);
  --s3: var(--gx-surface-raised);
  --t: var(--gx-text);
  --td: var(--gx-text-muted);
  --bd: var(--gx-border);
  --g: var(--gx-brand-strong);
  --ga: var(--gx-brand);
}

html[data-geneos-theme] body {
  background: var(--gx-page);
  color: var(--gx-text);
}

/* GeneOS pages were built independently and many use --white directly for
   content headings. In light mode that legacy token must be semantic ink,
   while intentionally dark header/splash surfaces keep a light foreground. */
html[data-geneos-theme="light"] body {
  --white: var(--gx-text);
}

html[data-geneos-theme="light"] :is(
  body > nav, .mobile-menu, #gn-splash
) {
  --white: #f0f4ff;
  --text: #f0f4ff;
  --t: #f0f4ff;
  --td: rgba(200, 215, 255, .76);
}

html[data-geneos-theme="light"] :is(.ha-shell, #ha-page-header, #ha-gene-panel) {
  --ha-accent: var(--gx-brand-strong);
  --ha-info: var(--gx-brand-strong);
  --ha-text: var(--gx-text);
  --ha-muted: var(--gx-text-muted);
  --ha-bg: var(--gx-page);
  --ha-card: var(--gx-surface);
  --ha-border: var(--gx-border);
}

html[data-geneos-theme="light"] :is(
  .hero h1, .section-h, .section-title, .upload-title,
  .dp-label, .demo-badge, .ci-patient, .error-msg,
  .sidebar-link.active, .hn-link.active
) {
  color: var(--gx-text) !important;
  -webkit-text-fill-color: var(--gx-text) !important;
}

html[data-geneos-theme="light"] :is(
  .hero h1 .accent, .section-tag, .badge, .hero-badge,
  .sidebar-link.active, .hn-link.active
) {
  color: var(--gx-brand-strong) !important;
  -webkit-text-fill-color: var(--gx-brand-strong) !important;
  background-image: none !important;
}

html[data-geneos-theme="light"] :is(
  .cm, .code-comment, .code-muted, .gn-splash-sub,
  .gn-splash-status, .section-subtitle
) {
  color: var(--gx-text-muted) !important;
}

html[data-geneos-theme="light"] .geneos-theme-toggle {
  background: var(--gx-surface) !important;
  color: var(--gx-text) !important;
  border-color: var(--gx-border) !important;
}

html[data-geneos-theme="light"] .wiz-dna-bg {
  max-width: 100vw;
  overflow: clip;
}

html[data-geneos-theme="light"] .wiz-dna-col {
  overflow: hidden;
}

html[data-geneos-theme="light"] .gx-glass,
html[data-geneos-theme="light"] .gx-glow-card,
html[data-geneos-theme="light"] .gx-toast,
html[data-geneos-theme="light"] .gx-toast.ok,
html[data-geneos-theme="light"] .gx-toast.err {
  background: var(--gx-glass) !important;
  border-color: var(--gx-border) !important;
  color: var(--gx-text);
}

html[data-geneos-theme="light"] .rpt-header,
html[data-geneos-theme="light"] .vault-hero,
html[data-geneos-theme="light"] .hdr,
html[data-geneos-theme="light"] .ha-site-header,
html[data-geneos-theme="light"] .ha-rpt-toast .rt-hdr,
html[data-geneos-theme="light"] #wiz-gate {
  background: color-mix(in srgb, var(--gx-page-raised) 92%, transparent) !important;
  color: var(--gx-text) !important;
}

html[data-geneos-theme="light"] .ha-sug-item,
html[data-geneos-theme="light"] .ha-quest-item,
html[data-geneos-theme="light"] .ha-col-body,
html[data-geneos-theme="light"] .ha-rpt-toast .rt-section,
html[data-geneos-theme="light"] .wiz-avatar-face,
html[data-geneos-theme="light"] .gate-card,
html[data-geneos-theme="light"] .sub-tabs,
html[data-geneos-theme="light"] .action-item,
html[data-geneos-theme="light"] .bp-pathway,
html[data-geneos-theme="light"] .intel-member,
html[data-geneos-theme="light"] .intel-source,
html[data-geneos-theme="light"] .intel-kv,
html[data-geneos-theme="light"] .intel-disposition {
  background: var(--gx-surface-raised) !important;
  color: var(--gx-text);
}

html[data-geneos-theme] .gx-ambient::before,
html[data-geneos-theme] .gx-ambient::after {
  opacity: .055;
}

.geneos-theme-toggle,
.geneos-mobile-nav {
  min-height: 44px;
  border: 1px solid var(--gx-border);
  border-radius: 999px;
  background: var(--gx-glass);
  color: var(--gx-text);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .15);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  cursor: pointer;
  font: 700 12px Inter, system-ui, sans-serif;
  letter-spacing: .02em;
  touch-action: manipulation;
}

.geneos-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  white-space: nowrap;
}

.geneos-theme-toggle:hover {
  border-color: var(--gx-brand);
  color: var(--gx-brand-strong);
}
html[data-geneos-theme] .site-header {
  min-height: calc(66px + var(--gx-safe-top));
  padding-top: calc(16px + var(--gx-safe-top)) !important;
}

html[data-geneos-theme="light"] .site-header,
html[data-geneos-theme="light"] #topbar,
html[data-geneos-theme="light"] .hdr {
  background: color-mix(in srgb, var(--gx-page-raised) 88%, transparent) !important;
}

html[data-geneos-theme="light"] .ha-card,
html[data-geneos-theme="light"] .ha-suggestions,
html[data-geneos-theme="light"] .ha-quests,
html[data-geneos-theme="light"] .ha-rpt-section,
html[data-geneos-theme="light"] .ha-col-body,
html[data-geneos-theme="light"] .ha-col-hdr,
html[data-geneos-theme="light"] .token-card,
html[data-geneos-theme="light"] .clinic-bar,
html[data-geneos-theme="light"] .stat-card,
html[data-geneos-theme="light"] .table-wrap,
html[data-geneos-theme="light"] .form-section,
html[data-geneos-theme="light"] .report-section,
html[data-geneos-theme="light"] .patient-card,
html[data-geneos-theme="light"] .pw-card,
html[data-geneos-theme="light"] .proto-card,
html[data-geneos-theme="light"] .direction-card,
html[data-geneos-theme="light"] .interv-item {
  box-shadow: var(--gx-shadow);
}

html[data-geneos-theme="light"] .ha-sug-item,
html[data-geneos-theme="light"] .ha-quest-item,
html[data-geneos-theme="light"] .ha-col-body,
html[data-geneos-theme="light"] .ha-rpt-toast .rt-section {
  background: color-mix(in srgb, var(--gx-surface-raised) 88%, transparent);
}

html[data-geneos-theme="light"] input,
html[data-geneos-theme="light"] select,
html[data-geneos-theme="light"] textarea,
html[data-geneos-theme="light"] .table-filter,
html[data-geneos-theme="light"] .vault-search,
html[data-geneos-theme="light"] .vault-sort,
html[data-geneos-theme="light"] .api-code {
  background: var(--gx-surface-raised) !important;
  color: var(--gx-text) !important;
}

html[data-geneos-theme="light"] .ha-rpt-toast,
html[data-geneos-theme="light"] #ha-chat-panel,
html[data-geneos-theme="light"] #gc-panel,
html[data-geneos-theme="light"] .slide-panel,
html[data-geneos-theme="light"] .modal-card,
html[data-geneos-theme="light"] .modal-box {
  background: var(--gx-surface) !important;
  color: var(--gx-text);
}

@media (max-width: 900px) {
  .geneos-mobile-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 500;
    top: calc(var(--gx-safe-top) + 10px);
    left: 10px;
    width: 44px;
    padding: 0;
    font-size: 17px;
  }

  body.geneos-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 48;
    background: rgba(4, 8, 15, .45);
    backdrop-filter: blur(2px);
  }

  #sidebar {
    width: min(292px, calc(100vw - 52px)) !important;
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
    box-shadow: var(--gx-shadow);
  }
  #sidebar-logo {
    padding-top: calc(16px + var(--gx-safe-top)) !important;
  }

  #sidebar.geneos-docs-sidebar {
    display: block !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    padding: calc(16px + var(--gx-safe-top)) 0 calc(20px + var(--gx-safe-bottom)) !important;
  }

  .geneos-docs-header-nav { display: none; }

  body.geneos-nav-open #sidebar { transform: translateX(0); }
  #sidebar .logo-text,
  #sidebar .logo-sub,
  #sidebar .sb-section,
  #sidebar-links,
  #sidebar .sb-item span:not(.sb-icon):not(.sb-badge) { display: revert !important; }
  #sidebar .sb-item { justify-content: flex-start !important; min-height: 44px; }

  #main { margin-left: 0 !important; min-width: 0; }
  #topbar { padding-left: 64px !important; min-height: calc(54px + var(--gx-safe-top)); }
  #content { padding: 16px max(16px, env(safe-area-inset-left, 0px)) calc(28px + var(--gx-safe-bottom)) max(16px, env(safe-area-inset-right, 0px)) !important; }
  .slide-panel { width: min(100vw, 480px) !important; max-width: 100vw !important; }
  .modal-overlay,
  .modal-bg { align-items: flex-end !important; padding: 0 !important; }
  .modal-box,
  .modal-card { width: 100% !important; max-width: none !important; max-height: min(88dvh, 760px) !important; border-radius: 20px 20px 0 0 !important; padding-bottom: calc(20px + var(--gx-safe-bottom)) !important; }
  .form-row,
  .form-row-3 { grid-template-columns: 1fr !important; }
  .table-wrap,
  .vault-table-wrap { overscroll-behavior-x: contain; }
  .geneos-theme-toggle { min-height: 44px; }
}

@media (max-width: 640px) {
  .ha-shell { padding: calc(28px + var(--gx-safe-top)) 16px calc(96px + var(--gx-safe-bottom)) !important; }
  #ha-chat-fab,
  #gc-fab { bottom: calc(16px + var(--gx-safe-bottom)) !important; right: 16px !important; }
  #ha-chat-panel,
  #gc-panel { right: 8px !important; bottom: calc(80px + var(--gx-safe-bottom)) !important; width: calc(100vw - 16px) !important; height: min(70dvh, 620px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}