/* WSPRO — dark theme. Loaded after app.css (and admin.css); everything here applies only when <html data-theme="dark">.
   The palette changes through the same variables the light theme uses; the rest are the places the light design wrote a colour in by hand. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1013;
  --surface: #171A1F;
  --ink: #ECEEF1;
  --ink-2: #B4B9C1;
  --ink-3: #8B919A;
  --line: #262A31;
  --line-2: #363B44;
  --inset: #12151A;
  --accent: #6C93FF;
  --accent-top: #8FAEFF;
  --accent-deep: #4F78EC;
  --accent-base: #2B4FB8;
  --accent-soft: #1B2644;
  --ok: #4CC07E;
  --ok-soft: #12291C;
  --bad: #FF7A6E;
  --bad-soft: #301917;
  --warn: #E3A04B;
  --warn-soft: #2B2112;
  --shadow-ink: rgba(0, 0, 0, 0.55);
  --viz-muted: #3A404A; --viz-bar: #5E6675; --viz-grid: #232830;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* glass header, cards and the like */
:root[data-theme="dark"] .glass { background: rgba(23, 26, 31, 0.72); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px -14px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .glass::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 46%); }
@media (max-width: 719px) { :root[data-theme="dark"] .glass { background: rgba(23, 26, 31, 0.95); } }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .ad-card { background: var(--surface); border-color: var(--line); }

/* buttons */
:root[data-theme="dark"] .btn-secondary { background: linear-gradient(180deg, #2A2F37 0%, #22262D 55%, #1C2026 100%); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 #0A0C0F, 0 5px 10px -3px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .btn-secondary::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)); }
:root[data-theme="dark"] .btn-secondary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 0 #0A0C0F, 0 3px 7px -3px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .btn-secondary:active { background: linear-gradient(180deg, #1C2026, #22262D); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 #0A0C0F; }
:root[data-theme="dark"] .btn[disabled], :root[data-theme="dark"] .btn:disabled { opacity: 0.5; }
:root[data-theme="dark"] .icon-btn:hover, :root[data-theme="dark"] .dev-acts .icon-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .count-badge { box-shadow: 0 0 0 2px var(--bg); }

/* form controls */
:root[data-theme="dark"] .input, :root[data-theme="dark"] .select, :root[data-theme="dark"] .textarea { background: var(--inset); border-color: var(--line-2); color: var(--ink); }
:root[data-theme="dark"] .input::placeholder { color: #6B717A; }
:root[data-theme="dark"] .input:focus, :root[data-theme="dark"] .select:focus { background: #14171C; }
:root[data-theme="dark"] .input-group .addon { background: #1D2127; color: var(--ink-2); border-color: var(--line-2); }
:root[data-theme="dark"] .switch .track { background: #3A404A; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .switch input:checked + .track { background: var(--accent); }
:root[data-theme="dark"] .switch .thumb { background: #F2F4F7; }
:root[data-theme="dark"] .seg, :root[data-theme="dark"] .lang-switch { background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .seg button[aria-pressed="true"], :root[data-theme="dark"] .seg button[aria-selected="true"], :root[data-theme="dark"] .lang-switch button[aria-pressed="true"] { background: #2A2F37; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .chip { background: rgba(255, 255, 255, 0.07); color: var(--ink-2); }
:root[data-theme="dark"] .chip.ok { background: var(--ok-soft); color: var(--ok); }
:root[data-theme="dark"] .chip.bad { background: var(--bad-soft); color: var(--bad); }
:root[data-theme="dark"] .chip.warn { background: var(--warn-soft); color: var(--warn); }

/* things that were written as "ink background, light text": ink is light now, so they get their own dark surface */
:root[data-theme="dark"] .toast, :root[data-theme="dark"] .viz-tip { background: #2A2F37; color: var(--ink); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7); }
:root[data-theme="dark"] .toast .t-body, :root[data-theme="dark"] .viz-tip span { color: #A9AFB8; }
:root[data-theme="dark"] .cta-band { background: #1B2233; color: var(--ink); }
:root[data-theme="dark"] .cta-band h2 { color: var(--ink); }
:root[data-theme="dark"] .cta-band p { color: #A9AFB8; }
:root[data-theme="dark"] .ov-top li:first-child .rk { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .brand-mark { background: var(--accent-deep); }
:root[data-theme="dark"] .bar > span { background: var(--accent); }
:root[data-theme="dark"] .bar.muted > span { background: #5E6675; }
:root[data-theme="dark"] .bar.open > span { background: repeating-linear-gradient(135deg, #3A404A 0 6px, #2A2F37 6px 12px); }
:root[data-theme="dark"] .bar.open.run > span { background-image: repeating-linear-gradient(135deg, var(--accent) 0 6px, #3E5FB8 6px 12px); }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .timer-bar, :root[data-theme="dark"] .hbar, :root[data-theme="dark"] .fun-bar, :root[data-theme="dark"] .pw-meter i, :root[data-theme="dark"] .ready-card .rc-bar { background: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .ready-card .rc-bar span, :root[data-theme="dark"] .fun-bar span { background: var(--accent); }
:root[data-theme="dark"] .readiness .r-ready { background: #5E6675; }
:root[data-theme="dark"] .readiness .r-offline, :root[data-theme="dark"] .legend .r-offline { background: repeating-linear-gradient(135deg, #7A3A35 0 3px, var(--bad-soft) 3px 6px); }
:root[data-theme="dark"] .rc-live.off i { background: #5E6675; }

/* modals, drawers, overlays */
:root[data-theme="dark"] .overlay { background: rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .side-scrim { background: rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .modal, :root[data-theme="dark"] .drawer { background: var(--surface); border-color: var(--line); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75); }
:root[data-theme="dark"] .modal-ico { background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .note { background: var(--inset); }
:root[data-theme="dark"] .note.warn { background: var(--warn-soft); color: #F0C58A; }
:root[data-theme="dark"] .note.bad { background: var(--bad-soft); color: #FFB1A9; }
:root[data-theme="dark"] .ann { background: var(--accent-soft); color: #BFD0FF; }
:root[data-theme="dark"] .ann.warn { background: var(--warn-soft); color: #F0C58A; }
:root[data-theme="dark"] .ann-ico { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .danger-zone { border-color: #5A2A26; }

/* navigation */
:root[data-theme="dark"] .nav a:hover, :root[data-theme="dark"] .set-nav button:hover, :root[data-theme="dark"] .site-links a:hover, :root[data-theme="dark"] .st-nav button:hover, :root[data-theme="dark"] .ad-nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
:root[data-theme="dark"] .ad-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .ad-nav .cnt { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .ad-side-foot { border-top-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .ad-search { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .ad-search:hover { background: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .kbd, :root[data-theme="dark"] .quick-reasons button { background: #22262D; border-color: var(--line-2); color: var(--ink-2); }
:root[data-theme="dark"] .avatar { background: #2A3040; }
:root[data-theme="dark"] .mock { background: var(--surface); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.8); }
:root[data-theme="dark"] .mock-top .dots i { background: #3A404A; }
:root[data-theme="dark"] .link-demo canvas, :root[data-theme="dark"] .qr-box { background: #fff; }
:root[data-theme="dark"] .qr-expired { background: rgba(23, 26, 31, 0.93); }

/* tables and lists */
:root[data-theme="dark"] .ad-tbl thead th, :root[data-theme="dark"] .tbl thead th { background: var(--inset); color: var(--ink-3); }
:root[data-theme="dark"] .ad-tbl tbody tr.click:hover td, :root[data-theme="dark"] .ad-tbl tr.hl td, :root[data-theme="dark"] .tk-item:hover { background: #1C2026; }
:root[data-theme="dark"] .wq-item.focus { background: #19213A; }
:root[data-theme="dark"] .tk-item[aria-selected="true"], :root[data-theme="dark"] .ib-conv[aria-selected="true"] { background: #1D2433; }
:root[data-theme="dark"] .ib-conv:hover { background: #1C2026; }
:root[data-theme="dark"] .tk-msg { background: var(--inset); }
:root[data-theme="dark"] .delta-chip, :root[data-theme="dark"] .type-withdrawal { background: rgba(255, 255, 255, 0.07); color: var(--ink-2); }
:root[data-theme="dark"] .chip.role-admin, :root[data-theme="dark"] .type-refund { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .chip.role-developer, :root[data-theme="dark"] .chip.tier-developer { background: #2A2340; color: #C4B1FF; }
:root[data-theme="dark"] .chip.tier-team { background: #15303A; color: #8FD3E6; }
:root[data-theme="dark"] .c-mute { background: #5E6675; }
:root[data-theme="dark"] .tl .dot { background: var(--surface); }
:root[data-theme="dark"] .savebar, :root[data-theme="dark"] .ann-prev, :root[data-theme="dark"] .media-drop img { background: var(--surface); }
:root[data-theme="dark"] .media-drop { background: var(--inset); }

/* the WhatsApp-style previews and the inbox keep WhatsApp's own dark look */
:root[data-theme="dark"] .wa-bar, :root[data-theme="dark"] .ib-th-head, :root[data-theme="dark"] .ib-comp, :root[data-theme="dark"] .ib-att-prev { background: #202C33; border-color: #2A3942; color: var(--ink); }
:root[data-theme="dark"] .wa-bg, :root[data-theme="dark"] .ib-thread { background-color: #0B141A; background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px); }
:root[data-theme="dark"] .wa-msg, :root[data-theme="dark"] .bub.them, :root[data-theme="dark"] .typing-bub { background: #202C33; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .wa-msg .body { color: #E9EDEF; }
:root[data-theme="dark"] .wa-msg .foot, :root[data-theme="dark"] .wa-msg .time, :root[data-theme="dark"] .bub .meta { color: #8696A0; }
:root[data-theme="dark"] .wa-btns div { background: #202C33; color: #53BDEB; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .bub.me { background: #005C4B; color: #E9EDEF; }
:root[data-theme="dark"] .bub.them { color: #E9EDEF; }
:root[data-theme="dark"] .ib-day { background: #182229; color: #8696A0; box-shadow: none; }
:root[data-theme="dark"] .ib-list { background: var(--surface); }
:root[data-theme="dark"] .bub .au { color: #53BDEB; }
:root[data-theme="dark"] .ticks path { stroke: #8696A0; }
:root[data-theme="dark"] .ticks.read path { stroke: #53BDEB; }
:root[data-theme="dark"] .typing-bub i { background: #8696A0; }

/* charts */
:root[data-theme="dark"] .viz-grid { stroke: #232830; }
:root[data-theme="dark"] .viz-tick { fill: #8B919A; }
:root[data-theme="dark"] .viz-area { opacity: 0.18; }

/* images and logos are not inverted; very bright pictures are toned down a little */
:root[data-theme="dark"] img:not([src^="data:image/svg"]) { filter: brightness(0.92); }
:root[data-theme="dark"] .qr-box img, :root[data-theme="dark"] .link-demo canvas, :root[data-theme="dark"] .av img { filter: none; }

/* the theme button itself */
.theme-btn .ico { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.theme-btn:active .ico { transform: rotate(25deg) scale(.9); }
@media (prefers-reduced-motion: reduce) { .theme-btn .ico { transition: none; } }