/* Geo Sentry — viewer theme (mode + accent) */

/* ── Accent palettes ─────────────────────────────────────────────────────── */
html[data-view-accent="blue"] {
  --cyan: #00e5ff;
  --cyan-dim: #00b8d4;
  --cyan-glow: rgba(0, 229, 255, 0.35);
  --cyan-muted: rgba(0, 229, 255, 0.12);
  --border: rgba(0, 229, 255, 0.14);
  --border-focus: rgba(0, 229, 255, 0.55);
}

html[data-view-accent="green"] {
  --cyan: #34d399;
  --cyan-dim: #10b981;
  --cyan-glow: rgba(52, 211, 153, 0.35);
  --cyan-muted: rgba(52, 211, 153, 0.12);
  --border: rgba(52, 211, 153, 0.16);
  --border-focus: rgba(52, 211, 153, 0.55);
}

html[data-view-accent="purple"] {
  --cyan: #c084fc;
  --cyan-dim: #a855f7;
  --cyan-glow: rgba(192, 132, 252, 0.35);
  --cyan-muted: rgba(192, 132, 252, 0.12);
  --border: rgba(192, 132, 252, 0.16);
  --border-focus: rgba(168, 85, 247, 0.55);
}

html[data-view-accent="red"] {
  --cyan: #f87171;
  --cyan-dim: #ef4444;
  --cyan-glow: rgba(248, 113, 113, 0.35);
  --cyan-muted: rgba(248, 113, 113, 0.12);
  --border: rgba(248, 113, 113, 0.16);
  --border-focus: rgba(239, 68, 68, 0.55);
}

/* ── Light mode surfaces ─────────────────────────────────────────────────── */
html[data-view-mode="light"] {
  --black-stealth: #e8edf4;
  --black-panel: #ffffff;
  --black-elevated: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  color-scheme: light;
}

html[data-view-mode="light"] body {
  background-color: var(--black-stealth);
  color: var(--text-primary);
}

html[data-view-mode="light"] .ambient-bg {
  background: #e2e8f0;
}

html[data-view-mode="light"] .ambient-bg__base {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #e8edf4 45%, #dde4ee 100%);
}

html[data-view-mode="light"] .ambient-bg__grid,
html[data-view-mode="light"] .ambient-bg__mesh,
html[data-view-mode="light"] .ambient-bg__glow,
html[data-view-mode="light"] .ambient-bg__scan {
  opacity: 0.15;
}

html[data-view-mode="light"] .site-header,
html[data-view-mode="light"] .cc-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

html[data-view-mode="light"] .site-persona-bar {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

html[data-view-mode="light"] .agency-card,
html[data-view-mode="light"] .cc-card,
html[data-view-mode="light"] .cc-gate,
html[data-view-mode="light"] .agency-modal__panel,
html[data-view-mode="light"] .cc-scan-modal__panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
}

html[data-view-mode="light"] .agency-client-list button {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-primary);
}

html[data-view-mode="light"] .agency-client-list button.is-active {
  background: var(--cyan-muted);
  color: var(--cyan-dim);
}

html[data-view-mode="light"] input,
html[data-view-mode="light"] textarea,
html[data-view-mode="light"] select {
  background: #fff;
  color: var(--text-primary);
  border-color: rgba(15, 23, 42, 0.14);
}

html[data-view-mode="light"] .btn-ghost {
  color: var(--text-secondary);
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-view-mode="light"] .btn-ghost:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-primary);
}

html[data-view-mode="light"] .share-report__muted {
  color: var(--text-muted);
}

html[data-view-mode="light"] .agency-modal__backdrop,
html[data-view-mode="light"] .cc-scan-modal__backdrop {
  background: rgba(15, 23, 42, 0.35);
}

html[data-view-mode="light"] .logo span {
  color: var(--cyan-dim);
}

/* ── Agency dashboard (hardcoded dark-theme colors in agency.css) ───────── */
html[data-view-mode="light"] .agency-card,
html[data-view-mode="light"] .agency-main,
html[data-view-mode="light"] .agency-page {
  color: var(--text-primary);
}

html[data-view-mode="light"] #agency-title,
html[data-view-mode="light"] .agency-detail h2,
html[data-view-mode="light"] .agency-dialog__title {
  color: var(--text-primary);
}

html[data-view-mode="light"] #agency-plan,
html[data-view-mode="light"] .agency-page .share-report__muted,
html[data-view-mode="light"] .agency-dialog__hint,
html[data-view-mode="light"] .gs-places-hint {
  color: var(--text-secondary);
}

html[data-view-mode="light"] .agency-field__label,
html[data-view-mode="light"] .agency-wl-form label,
html[data-view-mode="light"] .agency-form-grid label {
  color: var(--text-primary);
}

html[data-view-mode="light"] .agency-field__optional,
html[data-view-mode="light"] .agency-signin__optional {
  color: var(--text-muted);
}

html[data-view-mode="light"] .agency-form-grid label.agency-field input,
html[data-view-mode="light"] .agency-form-grid input,
html[data-view-mode="light"] .agency-wl-form input[type='text'],
html[data-view-mode="light"] .agency-wl-form input[type='url'],
html[data-view-mode="light"] .agency-keys-list input,
html[data-view-mode="light"] .agency-webhook-form input[type='url'],
html[data-view-mode="light"] .agency-webhook-form input[type="url"] {
  background: #fff;
  color: var(--text-primary);
  border-color: rgba(15, 23, 42, 0.18);
}

html[data-view-mode="light"] .agency-form-grid input::placeholder,
html[data-view-mode="light"] .agency-webhook-form input::placeholder {
  color: #94a3b8;
}

html[data-view-mode="light"] .agency-client-list button {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-primary);
}

html[data-view-mode="light"] .agency-client-list button.is-active {
  color: var(--cyan-dim);
}

html[data-view-mode="light"] .agency-key-row,
html[data-view-mode="light"] .agency-webhook-row {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-primary);
}

html[data-view-mode="light"] .agency-key-name,
html[data-view-mode="light"] .agency-webhook-url {
  color: var(--text-primary);
}

html[data-view-mode="light"] .agency-share-box {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-secondary);
}

html[data-view-mode="light"] .agency-dialog__panel {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
}

html[data-view-mode="light"] .site-persona-bar__tab {
  color: var(--text-secondary);
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

html[data-view-mode="light"] .site-persona-bar__tab.is-active {
  color: var(--cyan-dim);
}

html[data-view-mode="light"] .nav-cta {
  color: var(--text-secondary);
}

/* ── Command Center / embedded report (hardcoded white in cyber-tech.css) ─ */
html[data-view-mode="light"] .cc-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-view-mode="light"] .cc-card-title,
html[data-view-mode="light"] .cc-mission-action,
html[data-view-mode="light"] .cc-stat-list li strong {
  color: var(--text-primary);
}

html[data-view-mode="light"] .cc-card-sub,
html[data-view-mode="light"] .cc-scan-age,
html[data-view-mode="light"] .cc-score-label,
html[data-view-mode="light"] .cc-stat-list li,
html[data-view-mode="light"] .cc-mission-steps,
html[data-view-mode="light"] .cc-insight-body {
  color: var(--text-secondary);
}

html[data-view-mode="light"] .cc-mission-item {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-view-mode="light"] .cc-mission-num {
  color: var(--text-muted);
}

html[data-view-mode="light"] .cc-mission-item:has(.impact--low) {
  border-left-color: rgba(15, 23, 42, 0.2);
}

html[data-view-mode="light"] .impact--low {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-muted);
}

html[data-view-mode="light"] .cc-stat-list li {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

html[data-view-mode="light"] .dashboard-competitors-list__item {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-view-mode="light"] .dashboard-competitors-list__name {
  color: var(--text-primary);
}

html[data-view-mode="light"] .dashboard-competitors-list__note {
  color: var(--text-muted);
}

html[data-view-mode="light"] .cc-btn {
  color: var(--text-secondary);
  border-color: rgba(15, 23, 42, 0.14);
  background: #fff;
}

html[data-view-mode="light"] .cc-btn:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.04);
}

html[data-view-mode="light"] .btn-ghost {
  color: var(--text-secondary);
  border-color: rgba(15, 23, 42, 0.16);
}

html[data-view-mode="light"] .btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.05);
}

html[data-view-mode="light"] .share-report__cell {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-primary);
}

html[data-view-mode="light"] .cc-insight-block {
  background: rgba(15, 23, 42, 0.02);
}

html[data-view-mode="light"] .cc-insight-title {
  color: var(--text-primary);
}

html[data-view-mode="light"] .cc-insight-list li {
  color: var(--text-secondary);
}

html[data-view-mode="light"] .cc-rival-item,
html[data-view-mode="light"] .cc-mission-item {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-view-mode="light"] .cc-rival-name,
html[data-view-mode="light"] .cc-rival-reviews,
html[data-view-mode="light"] .cc-mission-action,
html[data-view-mode="light"] .cc-check span {
  color: var(--text-primary);
}

html[data-view-mode="light"] .cc-rival-meta,
html[data-view-mode="light"] .cc-rival-velocity,
html[data-view-mode="light"] .cc-empty,
html[data-view-mode="light"] .cc-action-intro {
  color: var(--text-muted);
}

html[data-view-mode="light"] .cc-health-tip,
html[data-view-mode="light"] .cc-mission-steps {
  color: var(--text-secondary);
}

html[data-view-mode="light"] .agency-detail__actions .btn-ghost,
html[data-view-mode="light"] .agency-detail__actions .cc-btn {
  color: var(--text-secondary);
  border-color: rgba(15, 23, 42, 0.18);
  background: #fff;
}

html[data-view-mode="light"] .agency-detail__actions .btn-ghost:hover,
html[data-view-mode="light"] .agency-detail__actions .cc-btn:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.05);
}

html[data-view-mode="light"] .gs-pillar,
html[data-view-mode="light"] .gs-platform-table th,
html[data-view-mode="light"] .gs-platform-table td {
  border-color: rgba(15, 23, 42, 0.1);
}

html[data-view-mode="light"] .gs-pillar {
  background: rgba(15, 23, 42, 0.03);
}

html[data-view-mode="light"] .gs-score-footnote {
  border-top-color: rgba(15, 23, 42, 0.1);
}

/* ── Theme picker UI ─────────────────────────────────────────────────────── */
.site-top {
  position: relative;
  z-index: 300;
}

.view-theme-wrap {
  position: relative;
}

.view-theme-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.view-theme-trigger__icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.85;
}

.view-theme-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 1200;
  min-width: 220px;
  padding: 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(11, 14, 18, 0.97);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}

.view-theme-panel--floating {
  position: fixed !important;
  z-index: 10050 !important;
  top: auto;
  right: auto;
}

html[data-view-mode="light"] .view-theme-panel {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.view-theme-panel[hidden] {
  display: none !important;
}

.view-theme-panel__title {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.view-theme-group + .view-theme-group {
  margin-top: 0.75rem;
}

.view-theme-group__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.view-theme-toggle {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.view-theme-toggle button {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

html[data-view-mode="light"] .view-theme-toggle button {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(15, 23, 42, 0.03);
}

.view-theme-toggle button:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

.view-theme-toggle button:active {
  transform: scale(0.97);
}

.view-theme-toggle button.is-active {
  border-color: var(--cyan);
  background: var(--cyan-muted);
  color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
}

.view-theme-toggle--accent button[data-view-accent="blue"].is-active {
  border-color: #00e5ff;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.12);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.view-theme-toggle--accent button[data-view-accent="green"].is-active {
  border-color: #34d399;
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.35);
}

.view-theme-toggle--accent button[data-view-accent="purple"].is-active {
  border-color: #c084fc;
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.35);
}

.view-theme-toggle--accent button[data-view-accent="red"].is-active {
  border-color: #f87171;
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.35);
}

.view-theme-toggle--accent button {
  flex: 1 1 calc(25% - 0.3rem);
  padding: 0.5rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.view-theme-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

html[data-view-mode="light"] .view-theme-swatch {
  border-color: rgba(15, 23, 42, 0.12);
}

.view-theme-swatch--blue { background: #00e5ff; }
.view-theme-swatch--green { background: #34d399; }
.view-theme-swatch--purple { background: #c084fc; }
.view-theme-swatch--red { background: #f87171; }

/* ── Themed UI surfaces (override hardcoded cyan in app shells) ─────────── */
html[data-view-accent] .btn-primary:hover {
  background: var(--cyan-dim);
}

html[data-view-accent] .cc-btn--primary {
  background: var(--cyan-muted);
  border-color: var(--border-focus);
  color: var(--cyan);
}

html[data-view-accent] .cc-btn--primary:hover {
  background: color-mix(in srgb, var(--cyan) 22%, transparent);
}

html[data-view-accent] .cc-card--actions {
  border-color: var(--cyan-muted);
}

html[data-view-accent] .command-center-progress {
  border-color: var(--border);
}

html[data-view-accent] .command-center-progress__title,
html[data-view-accent] .command-center-progress__step.is-active {
  color: var(--cyan);
}

html[data-view-accent] .command-center-progress__fill {
  background: linear-gradient(90deg, var(--cyan), var(--cyan-dim));
}

html[data-view-accent] .grid-rank-marker--hq .rank-badge,
html[data-view-accent] .grid-rank-marker--hq.rank-top .rank-badge,
html[data-view-accent] .grid-rank-marker--hq.rank-mid .rank-badge,
html[data-view-accent] .grid-rank-marker--hq.rank-low .rank-badge {
  background-color: var(--cyan-muted);
}

html[data-view-accent] .grid-rank-marker--hq.grid-rank-marker--scanning .scan-badge {
  background-color: var(--cyan-muted);
}

html[data-view-accent] .site-persona-bar__tab.is-active {
  border-color: var(--border-focus);
  background: var(--cyan-muted);
}

@media (max-width: 640px) {
  .view-theme-panel:not(.view-theme-panel--floating) {
    position: fixed;
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    min-width: 0;
  }
}