/*
 * Light and dark theme for the PayHero desk.
 * Light tokens stay in payhero-ui.css. This file remaps them when
 * html[data-theme="dark"] is set, and styles the theme toggle.
 */

.theme-toggle {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-control);
  cursor: pointer;
}

.theme-toggle svg { width: 20px; height: 20px; }
.theme-icon-sun { display: none; }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--ring-focus); }

html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }

.login-main,
.pick-screen { position: relative; }

.theme-toggle.is-login {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* PayHero text and lines are real colors. ui.css and Tailwind read the
     matching *-rgb channels, so the two systems do not overwrite each other. */
  --ink: #f4f7fb;
  --muted: #a9b6c9;
  --line: #3a4a64;
  --ink-strong: #ffffff;
  --text-2: #d7e0ec;
  --text-3: #c5d0e0;
  --subtle: #96a6bb;
  --faint: #8b9cb3;
  --placeholder: #8b9cb3;
  --link: #7ee0c8;
  --chart-tick: #96a6bb;

  --card: #1c2536;
  --canvas: #141b2a;
  --inset: #243044;
  --thead: #243044;
  --pill: #2a384e;
  --row-hover: #243246;
  --menu-hover: #2a384e;
  --btn-hover: #2c3b52;
  --track: #314158;

  --card-line: #3a4a64;
  --input-line: #3a4a64;
  --soft-line: #3a4a64;
  --divider: #314158;
  --hover-line: #4d6282;
  --green-line: rgba(126, 224, 200, 0.35);

  --green-tint: rgba(0, 170, 133, 0.18);

  --success: #34d399;
  --success-text: #6ee7b7;
  --success-bg: rgba(52, 211, 153, 0.16);
  --warning-text: #fcd34d;
  --warning-bg: rgba(251, 191, 36, 0.16);
  --info-text: #7dd3fc;
  --info-bg: rgba(56, 189, 248, 0.16);
  --danger-text: #fda4af;
  --danger-strong: #fda4af;
  --danger-bg: rgba(251, 113, 133, 0.16);
  --danger-bg-hover: rgba(251, 113, 133, 0.24);
  --danger-line: rgba(251, 113, 133, 0.45);

  --shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-control: 0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-input: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-menu: 0 18px 40px rgba(0, 0, 0, 0.45);

  --paper-rgb: 20 27 42;
  --mist-rgb: 28 37 54;
  --fill-rgb: 36 48 68;
  --ink-rgb: 244 247 251;
  --muted-rgb: 169 182 201;
  --line-rgb: 58 74 100;
  --brand-rgb: 0 170 133;
  --ok-rgb: 110 231 183;
  --danger-rgb: 253 164 175;
  --hover-rgb: 255 255 255;

  --tabs-ink: #f4f7fb;
  --tabs-muted: #a9b6c9;
  --tabs-faint: #8b9cb3;
  --tabs-line: #3a4a64;
  --tabs-hover-bg: rgba(255, 255, 255, 0.06);
  --tabs-active-bg: #1c2536;
  --tabs-close-hover: #2a384e;
  --tabs-canvas: #141b2a;
  --tabs-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body.desk,
html[data-theme="dark"] body.login-body,
html[data-theme="dark"] body.is-embed {
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 170, 133, 0.16), transparent 34%),
    radial-gradient(circle at 96% 10%, rgba(61, 206, 180, 0.1), transparent 30%),
    #0e1522;
}

html[data-theme="dark"] .desk-top,
html[data-theme="dark"] .phone-nav {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .phone-nav-item { color: #a9b6c9; }
html[data-theme="dark"] .phone-nav-item.is-active,
html[data-theme="dark"] .phone-nav-item.is-open {
  color: #7ee0c8;
  background: rgba(0, 170, 133, 0.16);
}

html[data-theme="dark"] .desk-top-divider { background: rgba(255, 255, 255, 0.1); }

html[data-theme="dark"] .login-chart,
html[data-theme="dark"] .login-chart strong {
  color: #121826;
}

html[data-theme="dark"] .login-chart p { color: #64748b; }

html[data-theme="dark"] .dash-balance.is-low,
html[data-theme="dark"] .dash-meet-pill.is-warning,
html[data-theme="dark"] .dash-meet-dot.is-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: transparent;
}

html[data-theme="dark"] .dash-meet-pill.is-success,
html[data-theme="dark"] .dash-icon-btn.is-done,
html[data-theme="dark"] .login-note {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: transparent;
}

html[data-theme="dark"] .dash-meet-pill.is-info {
  background: var(--info-bg);
  color: var(--info-text);
}

html[data-theme="dark"] .dash-quick-icon.is-amber,
html[data-theme="dark"] .dash-quick-icon.is-violet,
html[data-theme="dark"] .dash-quick-icon.is-sky {
  background: var(--inset);
  color: var(--ink);
}

html[data-theme="dark"] .pick-choice {
  border-color: var(--card-line);
  background: var(--inset);
}

html[data-theme="dark"] .kb-chat-md pre {
  background: #0e1522;
  color: var(--ink-strong);
}

/* Inner pages: leftover light fills and dark text. */
html[data-theme="dark"] .dash-panel.dash-performance {
  background: linear-gradient(180deg, rgba(0, 170, 133, 0.16) 0%, var(--card) 58%);
}

html[data-theme="dark"] .dash-panel.dash-performance.is-rose {
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.14) 0%, var(--card) 58%);
}

html[data-theme="dark"] .dash-metric-copy strong { color: var(--ink); }

html[data-theme="dark"] .dash-quick-result {
  background: var(--success-bg);
  border-color: var(--green-line);
}

html[data-theme="dark"] .dash-guest-stats p {
  background: var(--inset);
  color: var(--subtle);
}

html[data-theme="dark"] .desk-pill:not([class*="is-"]),
html[data-theme="dark"] .desk-count:not(.is-on) { background: var(--pill); }

html[data-theme="dark"] .desk-pill.is-violet {
  background: rgba(167, 139, 250, 0.18);
  color: #ddd6fe;
}

html[data-theme="dark"] .dash-meet-dot.is-success {
  background: var(--success-bg);
  color: var(--success-text);
}

html[data-theme="dark"] .dash-meet-dot.is-info {
  background: var(--info-bg);
  color: var(--info-text);
}

html[data-theme="dark"] .pick-kicker,
html[data-theme="dark"] .pick-go,
html[data-theme="dark"] .desk-link:hover,
html[data-theme="dark"] .dash-more:hover,
html[data-theme="dark"] .desk-back:hover { color: var(--link); }

html[data-theme="dark"] .pick-avatar,
html[data-theme="dark"] .dash-balance-icon {
  background: var(--green-tint);
  color: var(--link);
}

html[data-theme="dark"] .pick-choice.is-own { border-color: var(--green-line); }

html[data-theme="dark"] .dash-avatar.tone-1,
html[data-theme="dark"] .pick-avatar.tone-1 {
  background: var(--info-bg);
  color: var(--info-text);
}

html[data-theme="dark"] .dash-avatar.tone-2,
html[data-theme="dark"] .pick-avatar.tone-2 {
  background: rgba(244, 114, 182, 0.16);
  color: #fbcfe8;
}

html[data-theme="dark"] .dash-avatar.tone-3,
html[data-theme="dark"] .pick-avatar.tone-3 {
  background: var(--warning-bg);
  color: var(--warning-text);
}

html[data-theme="dark"] .dash-avatar.tone-4,
html[data-theme="dark"] .pick-avatar.tone-4 {
  background: rgba(167, 139, 250, 0.18);
  color: #ddd6fe;
}

html[data-theme="dark"] .text-brand,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .badge-brand,
html[data-theme="dark"] .creator-brand.is-active,
html[data-theme="dark"] .flow-step.is-active,
html[data-theme="dark"] .flow-step.is-alert:not(.is-active),
html[data-theme="dark"] .guide-step-num,
html[data-theme="dark"] .suggest-chip:hover,
html[data-theme="dark"] .suggest-chip.is-active,
html[data-theme="dark"] .home-see-all,
html[data-theme="dark"] .cal-cell.is-today .cal-num,
html[data-theme="dark"] .topup-amount.is-active,
html[data-theme="dark"] .topup-amount.is-active small,
html[data-theme="dark"] .kb-row-icon,
html[data-theme="dark"] .kb-name:hover,
html[data-theme="dark"] .kb-chat-md a { color: var(--link); }

html[data-theme="dark"] .text-brand { color: var(--link) !important; }

/* Legacy Tailwind utilities, if a page still uses them. bg-gray-500 stays the modal scrim. */
html[data-theme="dark"] .bg-white { background-color: var(--card) !important; }
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800 { color: var(--ink-strong) !important; }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 { color: var(--text-2) !important; }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 { color: var(--muted) !important; }
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }
html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--row-hover) !important; }