/*
 * Dark theme for the PayHero desk.
 * Light values stay on :root in desk.css. This file only remaps tokens.
 */

html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #0e1420;

  --ink: #f4f7fb;
  --ink-strong: #ffffff;
  --text-2: #d7e0ec;
  --text-3: #c9d4e4;
  --muted: #a9b6c9;
  --subtle: #96a6bb;
  --faint: #8b9cb3;
  --placeholder: #8b9cb3;
  --link: #f8a800;

  --canvas: #141b2a;
  --card: #1c2536;
  --inset: #243044;
  --thead: #243044;
  --pill: #243044;
  --row-hover: #28364c;
  --menu-hover: #2c3b54;
  --btn-hover: #2c3b54;
  --track: #2a384e;
  --disabled: #2a384e;
  --meter: #9aabbf;

  --line: #3a4a64;
  --card-line: #3a4a64;
  --input-line: #3a4a64;
  --soft-line: #3a4a64;
  --divider: #31425c;
  --hover-line: #4a5d7a;
  --green-line: #6b5420;
  --hairline: #3a4a64;

  --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.4);

  --tint-green-bg: rgba(52, 211, 153, 0.16);
  --tint-sky-bg: rgba(56, 189, 248, 0.16);
  --tint-sky-text: #7dd3fc;
  --tint-rose-bg: rgba(251, 113, 133, 0.16);
  --tint-rose-text: #fda4af;
  --tint-amber-bg: rgba(251, 191, 36, 0.16);
  --tint-amber-text: #fcd34d;
  --tint-violet-bg: rgba(167, 139, 250, 0.18);
  --tint-violet-text: #c4b5fd;
  --tint-warm-bg: rgba(251, 191, 36, 0.16);
  --tint-warm-text: #fcd34d;
  --tint-soft-sky-bg: rgba(56, 189, 248, 0.16);
  --tint-soft-sky-text: #7dd3fc;
  --tint-soft-violet-bg: rgba(167, 139, 250, 0.18);
  --tint-open-bg: rgba(52, 211, 153, 0.16);
  --tint-open-text: #6ee7b7;
  --tint-open-pill-bg: rgba(52, 211, 153, 0.16);
  --tint-schedule-bg: rgba(251, 191, 36, 0.16);
  --tint-result-bg: rgba(52, 211, 153, 0.12);
  --tint-result-line: rgba(126, 224, 200, 0.4);

  --chart-tick: #96a6bb;
  --star: #fcd34d;
  --panel-wash: linear-gradient(180deg, rgba(248, 168, 0, 0.18) 0%, var(--card) 72%);
  --panel-wash-rose: linear-gradient(180deg, rgba(251, 113, 133, 0.16) 0%, var(--card) 72%);
  --page-bg:
    radial-gradient(circle at 8% 0%, rgba(248, 168, 0, 0.16), transparent 34%),
    radial-gradient(circle at 96% 10%, rgba(56, 189, 248, 0.1), transparent 32%),
    #0e1420;

  --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --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.25);
  --shadow-menu: 0 18px 40px rgba(0, 0, 0, 0.45);

  --tabs-hover-bg: rgba(255, 255, 255, 0.06);
  --tabs-close-hover: #2c3b54;
}

html[data-theme="dark"] .desk-top {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .desk-top-divider {
  background: var(--line);
}

html[data-theme="dark"] .login-foot {
  border-top-color: var(--line);
}

html[data-theme="dark"] .desk-avatar {
  box-shadow: 0 0 0 3px var(--canvas), 0 6px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .desk-presence,
html[data-theme="dark"] .dash-rank {
  border-color: var(--card);
}

/* The login hero chart stays a light card on the navy panel. */
html[data-theme="dark"] .login-chart {
  background: linear-gradient(180deg, #fff8e8 0%, #fff 70%);
  color: #121826;
  --ink: #121826;
  --ink-strong: #0c1222;
  --text-2: #334155;
  --muted: #64748b;
  --subtle: #8a94a8;
  --link: #9d6e00;
  --success-bg: #dcfce7;
  --success-text: #15803d;
}

html[data-theme="dark"] #desk-main input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9cb3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-control);
  cursor: pointer;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .theme-icon-sun {
  display: none;
}

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

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

.theme-toggle:hover {
  border-color: var(--hover-line);
  background: var(--btn-hover);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

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

#desk-main .placeholder\:text-slate-500::placeholder,
.desk-dialog .placeholder\:text-slate-500::placeholder,
.login-input input::placeholder {
  color: var(--placeholder);
}

/* Tailwind utilities used outside the desk remaps. bg-gray-500 stays the modal scrim. */
.bg-white {
  background-color: var(--card);
}

.text-gray-900 {
  color: var(--ink);
}

.text-gray-500 {
  color: var(--muted);
}

.border-gray-200 {
  border-color: var(--card-line);
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--divider);
}

.hover\:bg-gray-50:hover {
  background-color: var(--row-hover);
}