/* Dark theme overlay — re-skins Bootstrap to match samples-new-theme/
 * (Momo Gateway ESP32uE: navy bg + cyan accent).
 *
 * Drop this <link> AFTER Bootstrap's stylesheet so its rules take precedence.
 * No HTML structure changes — every override is purely visual.
 */

:root {
  --bg: #0a0f1c;
  --bg2: #111827;
  --card: #1a2233;
  --card2: #212c44;
  --border: #2a3552;
  --border2: #3a4868;
  --text: #e8ecf6;
  --text2: #a8b3cc;
  --muted: #6b7691;
  --accent: #06b6d4;
  --accent2: #0891b2;
  --accent3: #0e7490;
  --ok: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --shadow: 0 4px 14px rgba(0,0,0,.35);
  --font: "Century Gothic","CenturyGothic","AppleGothic","URW Gothic L",
          "ITC Avant Garde Gothic","Avenir","Futura","Nunito","Quicksand",
          "Segoe UI",sans-serif;
}

html, body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font);
  letter-spacing: .2px;
}

/* Force inline light backgrounds (e.g., style="background:#f5f5f5") to dark */
body, body * {
  scrollbar-color: var(--border2) var(--bg);
}

a { color: var(--accent); transition: color .15s; }
a:hover { color: var(--text); text-decoration: none; }

/* ====== text ====== */
.text-muted,
.text-secondary { color: var(--text2) !important; }
small, .small { color: var(--text2); }
h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: 600; letter-spacing: .5px; }
/* Bootstrap `.card-title` has its own color rule that beats the generic h5 → force white */
.card-title,
h1.card-title, h2.card-title, h3.card-title,
h4.card-title, h5.card-title, h6.card-title { color: #fff !important; }

/* ====== cards ====== */
.card {
  background: linear-gradient(180deg, var(--card) 0%, var(--card2) 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow);
  color: var(--text);
}
.card-header, .card-footer {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text);
}
.card-body { color: var(--text); }

/* ====== forms ====== */
.form-label, label {
  color: var(--text2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px !important;
}
.form-control,
.form-select,
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=url], input[type=search],
textarea, select {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus,
input:focus, textarea:focus, select:focus {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,.15) !important;
  outline: none;
}
.form-control::placeholder { color: var(--muted); }
.form-control:disabled,
.form-select:disabled,
input:disabled { opacity: .5; background: var(--bg2) !important; }
.form-check-input {
  background-color: var(--bg);
  border-color: var(--border2);
}
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-label { color: var(--text) !important; text-transform: none; letter-spacing: normal; font-weight: 400 !important; font-size: 13px !important; }

/* ====== buttons ====== */
.btn {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  border-radius: 6px;
  transition: all .15s;
}
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #001520 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent2) !important;
  border-color: var(--accent2) !important;
  color: #001520 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,182,212,.3);
}
.btn-secondary { background: var(--card2) !important; border-color: var(--border) !important; color: var(--text) !important; }
.btn-secondary:hover { background: var(--border) !important; color: var(--text) !important; }
.btn-success { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.btn-warning { background: var(--warn) !important; border-color: var(--warn) !important; color: #000 !important; }
.btn-danger { background: var(--bad) !important; border-color: var(--bad) !important; color: #fff !important; }
.btn-info { background: var(--accent3) !important; border-color: var(--accent3) !important; color: #fff !important; }
.btn-outline-primary { color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-outline-primary:hover { background: var(--accent) !important; color: #001520 !important; }
.btn-outline-secondary { color: var(--text2) !important; border-color: var(--border2) !important; }
.btn-outline-secondary:hover { background: var(--border) !important; color: var(--text) !important; }
.btn-outline-info { color: var(--accent) !important; border-color: var(--accent3) !important; }
.btn-outline-info:hover { background: var(--accent3) !important; color: #fff !important; }
.btn-outline-danger { color: var(--bad) !important; border-color: var(--bad) !important; }
.btn-outline-danger:hover { background: var(--bad) !important; color: #fff !important; }

/* ====== tables ====== */
.table {
  color: var(--text) !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(6,182,212,.08);
  --bs-table-hover-color: #fff;
  --bs-table-border-color: var(--border);
}
.table thead th {
  color: var(--text2) !important;
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.table td, .table th { border-color: var(--border) !important; }

/* ====== badges ====== */
.bg-primary { background: var(--accent) !important; color: #001520 !important; }
.bg-success { background: var(--ok) !important; }
.bg-warning { background: var(--warn) !important; color: #000 !important; }
.bg-danger { background: var(--bad) !important; }
.bg-info { background: var(--accent3) !important; }
.bg-secondary { background: var(--card2) !important; color: var(--text) !important; }
.bg-light { background: var(--card) !important; color: var(--text) !important; }

/* ====== modals ====== */
.modal-content {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text);
}
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-title { color: #fff; }
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .7;
}
.btn-close:hover { opacity: 1; }

/* ====== nav / sidebar ====== */
.navbar, .nav, .sidebar { background: var(--card) !important; border-color: var(--border) !important; }
.nav-link { color: var(--text2) !important; }
.nav-link:hover { color: var(--text) !important; }
.nav-link.active { color: var(--accent) !important; }
.dropdown-menu {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background: var(--border) !important; color: #fff !important; }

/* ====== misc ====== */
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }
hr { border-color: var(--border); }
code, pre {
  background: var(--bg2);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}
pre code { padding: 0; background: transparent; }

/* Pagination */
.page-link { background: var(--card2) !important; border-color: var(--border) !important; color: var(--text2) !important; }
.page-link:hover { background: var(--border) !important; color: var(--text) !important; }
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #001520 !important; }
.page-item.disabled .page-link { background: var(--bg2) !important; color: var(--muted) !important; }

/* Override common inline light bg */
[style*="background:#f5f5f5"],
[style*="background: #f5f5f5"],
[style*="background-color:#f5f5f5"],
[style*="background-color: #f5f5f5"] { background: var(--bg) !important; }

/* ============================================================
 * ADMIN TEMPLATE OVERRIDES (Modernize-style layout)
 * Targets the page-wrapper / body-wrapper / left-sidebar /
 * app-header structure used by every page except login.
 * Scoped to :not(.login) so it doesn't conflict with login styles.
 * ============================================================ */

body:not(.login),
body:not(.login) .page-wrapper,
body:not(.login) .body-wrapper {
  background: var(--bg) !important;
}

/* Top app header / navbar */
body:not(.login) .app-header,
body:not(.login) .navbar,
body:not(.login) .navbar-light {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
}
body:not(.login) .navbar-light .navbar-nav .nav-link,
body:not(.login) .app-header .nav-link {
  color: var(--text2) !important;
}
body:not(.login) .navbar-light .navbar-nav .nav-link:hover,
body:not(.login) .app-header .nav-link:hover {
  color: var(--accent) !important;
}

/* Left sidebar */
body:not(.login) .left-sidebar,
body:not(.login) .sidebar-nav,
body:not(.login) .scroll-sidebar {
  background: linear-gradient(180deg, #0b1322 0%, #0a0f1c 100%) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.3);
}
body:not(.login) .brand-logo {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  /* Match the app-header (navbar) height so the two top bars line up.
   * Modernize default header ≈ 70px; tweak if your build differs. */
  height: 70px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
body:not(.login) .brand-logo .logo-img {
  display: flex;
  align-items: center;
  height: 100%;
}
/* Override the inline `style="width:100%"` on the img in sidebar.html.
 * max-height ≈ 75% of brand-logo height (70px) for visual breathing room. */
body:not(.login) .brand-logo .logo-img img {
  width: auto !important;
  max-height: 52px;
  height: auto;
  display: block;
}

/* Sidebar section captions ("Home", "Management", "Monitor", "System") */
body:not(.login) .nav-small-cap {
  color: var(--accent) !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 10px !important;
  opacity: 1;
}
body:not(.login) .nav-small-cap .hide-menu { color: var(--accent) !important; }
body:not(.login) .nav-small-cap-icon { color: var(--accent) !important; opacity: .5; }

/* Sidebar items + links */
body:not(.login) .sidebar-item .sidebar-link {
  color: var(--text2) !important;
  border-left: 3px solid transparent;
  padding: 11px 16px !important;
  font-size: 13px;
  letter-spacing: .3px;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all .15s;
}
body:not(.login) .sidebar-item .sidebar-link:hover {
  background: rgba(6,182,212,.06) !important;
  color: var(--text) !important;
  border-left-color: var(--accent3) !important;
}
body:not(.login) .sidebar-item .sidebar-link.active,
body:not(.login) .sidebar-item.selected > .sidebar-link {
  background: rgba(6,182,212,.12) !important;
  color: #fff !important;
  border-left-color: var(--accent) !important;
  font-weight: 600;
}
body:not(.login) .sidebar-link span[class*="solar--"],
body:not(.login) .sidebar-link .ti {
  color: var(--accent) !important;
  opacity: .85;
}

/* Sidebar toggle button + hamburger */
body:not(.login) .sidebartoggler { color: var(--text2) !important; }
body:not(.login) .sidebartoggler:hover { color: var(--accent) !important; }

/* Container fluid backgrounds */
body:not(.login) .container-fluid { background: transparent !important; }

/* Override "white-bg" inline hover from per-page <style> (e.g., ui-devices) */
.sortable:hover { background: rgba(6,182,212,.08) !important; }

/* Brand-logo image: if logo is white-on-white it may look bad — drop a soft
 * cyan tint so it shows up on dark sidebar */
body:not(.login) .brand-logo .logo-img img {
  filter: drop-shadow(0 0 6px rgba(6,182,212,.2));
}

/* ============================================================
 * LIST GROUP (Bootstrap) — used in ui-decoders sidebar
 * ============================================================ */
.list-group { background: transparent !important; }
.list-group-item,
.list-group-item-action {
  background: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: rgba(6,182,212,.08) !important;
  color: #fff !important;
}
.list-group-item.active,
.list-group-item-action.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #001520 !important;
}

/* ============================================================
 * CODEMIRROR — used in ui-decoders code editor
 * ============================================================ */
.CodeMirror {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: Consolas, "Courier New", monospace !important;
}
.CodeMirror-gutters {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
}
.CodeMirror-linenumber { color: var(--muted) !important; }
.CodeMirror-cursor { border-left-color: var(--accent) !important; }
.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected { background: rgba(6,182,212,.20) !important; }
.CodeMirror-line::selection,
.CodeMirror-line ::selection { background: rgba(6,182,212,.30) !important; }
/* JS syntax tokens — keep readable but tinted */
.cm-keyword    { color: #c084fc !important; }   /* purple */
.cm-atom       { color: #f59e0b !important; }
.cm-number     { color: #fb923c !important; }   /* orange */
.cm-string     { color: #86efac !important; }   /* green */
.cm-string-2   { color: #86efac !important; }
.cm-comment    { color: var(--muted) !important; font-style: italic; }
.cm-variable,
.cm-variable-2,
.cm-variable-3 { color: var(--text) !important; }
.cm-def        { color: var(--accent) !important; }
.cm-property   { color: #93c5fd !important; }   /* light blue */
.cm-operator   { color: var(--text2) !important; }
.cm-meta       { color: var(--text2) !important; }
.cm-bracket    { color: var(--text2) !important; }
.cm-tag        { color: var(--bad) !important; }
.cm-attribute  { color: var(--warn) !important; }
.cm-builtin    { color: var(--accent) !important; }

/* Test-output panel (`bg-light` already overridden globally, but kept here
 * as a defensive rule in case page CSS bumps specificity) */
.test-output, .test-output.bg-light {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ============================================================
 * UI-MQTT — per-page inline styles forced light, override here.
 * Selectors get extra specificity via `body:not(.login)`.
 * ============================================================ */
body:not(.login) .topic-tree-panel,
body:not(.login) .detail-panel {
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
body:not(.login) .payload-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
body:not(.login) .tree-label:hover {
  background: rgba(6,182,212,.10) !important;
  color: #fff !important;
}
body:not(.login) .tree-label.active {
  background: var(--accent) !important;
  color: #001520 !important;
}
/* .msg-feed is already dark (#1e1e1e #d4d4d4) — keep as-is, just nudge border */
body:not(.login) .msg-feed {
  border: 1px solid var(--border) !important;
}

/* ============================================================
 * LOGIN PAGE — only active when <body class="login">
 * Animated background: pulsing radial glow + drifting grid +
 * diagonal scanlines + floating cyan dots. All decorative
 * (z-index:0/1), the card stays on top (z-index:2).
 * ============================================================ */

body.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #0d1a30 0%, #0a0f1c 70%) !important;
  overflow: hidden;
  position: relative;
}

/* Tighten Bootstrap's page-wrapper to a fixed-width centered card */
body.login .page-wrapper {
  background: transparent !important;
  position: relative;
  z-index: 2;
  width: 100%;
}
body.login .col-md-6,
body.login [class*="col-"] {
  max-width: 400px;
  width: 100%;
  flex: none;
}

/* Card sizing per sample */
body.login .card {
  padding: 32px 28px 24px;
  backdrop-filter: blur(4px);
  background: linear-gradient(180deg, rgba(26,34,51,.92) 0%, rgba(33,44,68,.92) 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(6,182,212,.08);
  animation: card-in .6s ease-out;
}
body.login .card-body { padding: 0; }

/* Logo */
body.login .logo,
body.login .card img {
  display: block;
  max-width: 180px;
  width: 60%;
  margin: 0 auto 14px;
  height: auto;
  /* slight cyan glow on logo */
  filter: drop-shadow(0 0 12px rgba(6,182,212,.25));
  animation: logo-float 4s ease-in-out infinite;
}

/* Title under the logo */
body.login p,
body.login .brand-h1 {
  text-align: center;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 22px !important;
}

/* Decorative layers */
body.login::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(6,182,212,.20) 0%, transparent 40%),
    radial-gradient(circle at 82% 72%, rgba(14,116,144,.18) 0%, transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(8,145,178,.14) 0%, transparent 50%);
  animation: bg-pulse 10s ease-in-out infinite alternate;
}
body.login::after {
  content: '';
  position: fixed;
  inset: -10% -10%;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(0deg, transparent 49.5%, rgba(6,182,212,.10) 50%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(6,182,212,.07) 50%, transparent 50.5%);
  background-size: 64px 64px;
  animation: grid-flow 18s linear infinite;
}
/* Diagonal scanlines disabled — clashed with the orthogonal grid above. */
body.login .scanlines { display: none; }

/* Floating cyan dots */
body.login .dots {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
body.login .dots i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(6,182,212,.7);
  opacity: 0;
}
/* Use full `animation:` shorthand with explicit `infinite` so the loop
 * can't be lost via cascade from any other animation-* rule. */
body.login .dots i:nth-child(1)  {left: 8%; width:3px;height:3px; animation:dot-r 11s linear -2.3s infinite}
body.login .dots i:nth-child(2)  {left:22%; width:2px;height:2px; animation:dot-l 14s linear -7.1s infinite}
body.login .dots i:nth-child(3)  {left:35%; width:3px;height:3px; animation:dot-s  9s linear -4.6s infinite}
body.login .dots i:nth-child(4)  {left:48%; width:4px;height:4px; animation:dot-l 13s linear -0.8s infinite}
body.login .dots i:nth-child(5)  {left:61%; width:3px;height:3px; animation:dot-r 10s linear -8.5s infinite}
body.login .dots i:nth-child(6)  {left:74%; width:2px;height:2px; animation:dot-s 15s linear -3.2s infinite}
body.login .dots i:nth-child(7)  {left:88%; width:3px;height:3px; animation:dot-l 12s linear -6.0s infinite}
body.login .dots i:nth-child(8)  {left:15%; width:4px;height:4px; animation:dot-s 11s linear -9.4s infinite}
body.login .dots i:nth-child(9)  {left:41%; width:2px;height:2px; animation:dot-r 16s linear -1.7s infinite}
body.login .dots i:nth-child(10) {left:68%; width:3px;height:3px; animation:dot-l 13s linear -5.5s infinite}

/* Sign-in button gets a soft glow on the login page */
body.login .btn-primary {
  box-shadow: 0 4px 16px rgba(6,182,212,.25);
}
body.login .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(6,182,212,.45);
}

/* ====== Keyframes ====== */
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes bg-pulse {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.08); }
}
@keyframes grid-flow {
  from { transform: translate(0, 0); }
  to   { transform: translate(64px, 64px); }
}
@keyframes lines-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(90px, 90px); }
}
@keyframes dot-r {
  0%   { top: 105%; opacity: 0; transform: translateX(0); }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { top: -5%;  opacity: 0; transform: translateX(60px); }
}
@keyframes dot-l {
  0%   { top: 105%; opacity: 0; transform: translateX(0); }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { top: -5%;  opacity: 0; transform: translateX(-50px); }
}
@keyframes dot-s {
  0%   { top: 105%; opacity: 0; transform: translateX(0); }
  10%  { opacity: .8; }
  50%  { transform: translateX(15px); }
  90%  { opacity: .8; }
  100% { top: -5%;  opacity: 0; transform: translateX(-10px); }
}

/* Respect "reduce motion" user setting */
@media (prefers-reduced-motion: reduce) {
  body.login::before,
  body.login::after,
  body.login .scanlines,
  body.login .dots i,
  body.login .logo,
  body.login .card {
    animation: none;
  }
}