/* ---------- light theme, one source of truth ----------
 *
 * Loaded by BOTH the gateway's own pages and - injected by the proxy - the
 * seven engine panels. The engines ship the mother panel's stylesheet, which
 * this file never modifies; it only re-points the tokens that sheet already
 * uses, plus the handful of places it hardcoded a dark colour.
 *
 * The theme is applied to <html data-theme> by a tiny inline script in the
 * page head BEFORE first paint. Selecting on html[data-theme="light"] beats
 * :root on specificity, so load order does not matter.
 */

html[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f4fa;
  --border: #dbe1ee;
  --border-soft: #e9edf6;
  --text: #121724;
  --text-dim: #55607a;
  --text-faint: #838ca1;
  /* Deepened: the dark-theme accents are tuned to glow on near-black and fail
     contrast as text on white. */
  --accent-1: #2f6fe0;
  --accent-2: #7c4ddb;
  --accent-3: #b83fd0;
  --green: #0f9d63;
  --green-bg: rgba(15, 157, 99, .10);
  --red: #d92d20;
  --red-bg: rgba(217, 45, 32, .09);
  --amber: #b45309;
  --amber-bg: rgba(180, 83, 9, .10);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -14px rgba(16, 24, 40, .16);
  --shadow-card-hover: 0 1px 2px rgba(16, 24, 40, .06), 0 18px 40px -16px rgba(47, 111, 224, .26);
  --shadow-modal: 0 24px 64px -12px rgba(16, 24, 40, .28);
  --glow-opacity: .07;
  --grid-line: rgba(18, 23, 36, .045);
  --grid-opacity: .6;
  --chrome-bg: rgba(255, 255, 255, .84);
  --panel-bg: linear-gradient(180deg, #ffffff, #fbfcfe);
  --card-glass: linear-gradient(180deg, #ffffff, #fafbfe);
  --inset-bg: #f5f7fc;
  --hover-tint: rgba(18, 23, 36, .04);

  color-scheme: light;
}

/* ---- the mother stylesheet's hardcoded dark surfaces ----
   These predate the theme and are literals, so tokens cannot reach them.
   Overridden by selector instead of by editing seven copies of a file this
   rebuild is under orders never to edit. */
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .84); }
html[data-theme="light"] .live-status-card,
html[data-theme="light"] .topology-card,
html[data-theme="light"] .card {
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}
html[data-theme="light"] .live-status-table tr:hover td { background: rgba(18, 23, 36, .035); }
html[data-theme="light"] .fs-empty-hint { background: rgba(18, 23, 36, .02); }
html[data-theme="light"] .modal-backdrop { background: rgba(20, 26, 40, .45); }
/* Tinted chips built on the dark accents wash out on white. */
html[data-theme="light"] .bg-glow { opacity: .5; }

/* ---- toggle ---- */
.theme-toggle {
  position: relative;
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent-1); background: var(--hover-tint, rgba(255,255,255,.05)); }
.theme-toggle svg { grid-area: 1 / 1; transition: opacity .2s var(--ease), transform .3s var(--ease); }
/* Dark active -> offer the sun, i.e. what you would switch TO. */
.theme-toggle .th-moon { opacity: 0; transform: rotate(-70deg) scale(.6); }
.theme-toggle .th-sun  { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle .th-sun  { opacity: 0; transform: rotate(70deg) scale(.6); }
html[data-theme="light"] .theme-toggle .th-moon { opacity: 1; transform: none; }

/* Only while switching. Left on permanently it would also animate every
   hover and focus change on the page. */
html.theme-anim, html.theme-anim body, html.theme-anim body * {
  transition: background-color .28s var(--ease), border-color .28s var(--ease),
              color .22s var(--ease) !important;
}

/* ---- floating nav injected onto the engine panels ----
   Was inline styles with hardcoded dark colours, which is exactly what breaks
   in light mode. Now tokenised like everything else. */
#v2fNav {
  position: fixed; bottom: 16px; inset-inline-start: 16px; z-index: 9998;
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font, "Vazirmatn", sans-serif); direction: rtl;
}
.v2f-nav-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 11px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--text); background: var(--chrome-bg, rgba(19,24,38,.92));
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.45);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.v2f-nav-btn:hover { border-color: var(--accent-1); transform: translateY(-1px); }
.v2f-nav-btn.accent {
  color: var(--ink, #0a0d14);
  background: var(--accent-grad);
  border: none;
  box-shadow: 0 8px 24px -8px rgba(110,168,254,.55);
}
#v2fNav .theme-toggle {
  height: 34px; width: 34px;
  background: var(--chrome-bg, rgba(19,24,38,.92));
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.45);
}