/* Dual theme support for Sanchez HTML stack */

.theme-toggle-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  border-radius: 999px;
  padding: 8px 12px;
  font: 600 12px/1 Calibri, "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.theme-toggle-btn:hover { opacity: 0.9; }

html[data-theme="light"] {
  --lt-bg: #edf2f7;
  --lt-surface: #ffffff;
  --lt-surface-2: #f8fafc;
  --lt-border: #d6dde8;
  --lt-text: #1f2937;
  --lt-text-muted: #5b687a;
  --lt-accent: #2f5d8a;
  --lt-accent-2: #4f7fb3;
  --lt-success: #1f7a3e;
  --lt-warning: #a65a00;
  --lt-danger: #b42318;
  --lt-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body {
  background: linear-gradient(180deg, #f5f8fc 0%, #edf2f7 100%) !important;
  color: var(--lt-text) !important;
  font-family: Calibri, "Segoe UI", "Noto Sans", Arial, sans-serif !important;
}

html[data-theme="light"] header,
html[data-theme="light"] .top,
html[data-theme="light"] .hero,
html[data-theme="light"] .section,
html[data-theme="light"] .card,
html[data-theme="light"] .meta-card,
html[data-theme="light"] .nav,
html[data-theme="light"] .quick-links,
html[data-theme="light"] .stat-pill,
html[data-theme="light"] .service-card,
html[data-theme="light"] .service-item,
html[data-theme="light"] .container > .card {
  background: var(--lt-surface) !important;
  color: var(--lt-text) !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: var(--lt-shadow) !important;
}

html[data-theme="light"] .page-header,
html[data-theme="light"] .hero {
  background: linear-gradient(135deg, #223b57 0%, #3f6a97 100%) !important;
  border: 1px solid #355a81 !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .card-title,
html[data-theme="light"] .card-name { color: #1b2a41 !important; }

html[data-theme="light"] .subtitle,
html[data-theme="light"] p,
html[data-theme="light"] .card-desc,
html[data-theme="light"] .metric-label,
html[data-theme="light"] .meta-label,
html[data-theme="light"] .url,
html[data-theme="light"] .desc,
html[data-theme="light"] td,
html[data-theme="light"] li,
html[data-theme="light"] .info-bar,
html[data-theme="light"] .stat-pill .label { color: var(--lt-text-muted) !important; }

html[data-theme="light"] a,
html[data-theme="light"] .card-url,
html[data-theme="light"] .quick-links a,
html[data-theme="light"] .nav a,
html[data-theme="light"] .back { color: var(--lt-accent) !important; }

html[data-theme="light"] a:hover,
html[data-theme="light"] .quick-links a:hover,
html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .back:hover { color: var(--lt-accent-2) !important; }

html[data-theme="light"] table,
html[data-theme="light"] .status-table,
html[data-theme="light"] th,
html[data-theme="light"] td,
html[data-theme="light"] .mcp-row,
html[data-theme="light"] .mcp-row.header { border-color: var(--lt-border) !important; }

html[data-theme="light"] th,
html[data-theme="light"] .mcp-row.header { background: #ecf3fb !important; color: #243b53 !important; }

html[data-theme="light"] tr:hover td,
html[data-theme="light"] .service-item:hover { background: #f5f9ff !important; }

html[data-theme="light"] .status-healthy,
html[data-theme="light"] .status-up,
html[data-theme="light"] .pill-ok,
html[data-theme="light"] .badge-done,
html[data-theme="light"] .badge-fixed { color: var(--lt-success) !important; }

html[data-theme="light"] .status-warning,
html[data-theme="light"] .status-auth,
html[data-theme="light"] .pill-mid,
html[data-theme="light"] .badge-progress,
html[data-theme="light"] .badge-mitigated { color: var(--lt-warning) !important; }

html[data-theme="light"] .status-error,
html[data-theme="light"] .status-down,
html[data-theme="light"] .pill-off,
html[data-theme="light"] .badge-open,
html[data-theme="light"] .badge-critical { color: var(--lt-danger) !important; }

html[data-theme="light"] .badge,
html[data-theme="light"] .pill,
html[data-theme="light"] .status-badge {
  border-color: var(--lt-border) !important;
  background: #eef3fa !important;
}

html[data-theme="light"] .progress-bar { background: #e3ebf5 !important; }
html[data-theme="light"] .progress-fill {
  background: linear-gradient(90deg, #3f6a97 0%, #5f8abb 100%) !important;
}