/* QR Service — shared design tokens + dark-mode (night mode) overrides.
   Source of truth for colors across landing, business, admin, auth, and
   customer surfaces. Per-surface CSS files consume var(--*) from here. */

:root {
  /* Brand */
  --accent: #1f58c7;
  --accent-dark: #1746a0;
  --accent-soft: #eaf0fb;
  --accent-on: #ffffff;
  --accent-ring: rgba(31, 88, 199, 0.18);

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f8f9fb;
  --surface: #ffffff;
  --surface-elev: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.92);

  /* Text */
  --ink: #2b2f38;
  --ink-soft: #545965;
  --muted: #7d8287;
  --ink-on-accent: #ffffff;

  /* Lines */
  --line: #eef0f2;
  --line-strong: #d9dde3;

  /* Semantic */
  --success: #1f9d57;
  --success-soft: #e7f6ee;
  --success-ink: #137c45;
  --warning: #e0941f;
  --warning-soft: #fdf1e3;
  --warning-ink: #b56a16;
  --danger: #d9534f;
  --danger-soft: #fbe9e8;
  --info-soft: #e8f0fb;

  /* Components */
  --star-empty: #d9dde3;
  --star-filled: #f5b301;
  --shadow-card: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* Radius */
  --radius: 0.6rem;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Brand — slightly brighter to keep AA contrast on dark surfaces */
  --accent: #4a82e0;
  --accent-dark: #6b9cf0;
  --accent-soft: #1a2540;
  --accent-on: #ffffff;
  --accent-ring: rgba(74, 130, 224, 0.28);

  /* Surfaces — cool, near-black palette tuned to brand blue */
  --bg: #0f1419;
  --bg-alt: #161c25;
  --surface: #1a2030;
  --surface-elev: #232a3a;
  --surface-overlay: rgba(15, 20, 25, 0.88);

  /* Text */
  --ink: #e6e9ef;
  --ink-soft: #b4bac6;
  --muted: #8088a0;
  --ink-on-accent: #ffffff;

  /* Lines */
  --line: #262d3d;
  --line-strong: #323b50;

  /* Semantic */
  --success: #34c47a;
  --success-soft: #18301f;
  --success-ink: #4fd494;
  --warning: #f0a93e;
  --warning-soft: #3a2a10;
  --warning-ink: #f3b357;
  --danger: #ec7570;
  --danger-soft: #3a1c1b;
  --info-soft: #1a2540;

  /* Components */
  --star-empty: #3a4154;
  --star-filled: #f5b301;
  --shadow-card: 0 0 24px 0 rgba(0, 0, 0, 0.35), 0 1px 0 0 rgba(255, 255, 255, 0.02);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ── Cross-cutting dark patches ─────────────────────────────────────────────
   Bootstrap 5.1.3 has no native data-bs-theme, and app.min.css carries an
   unused legacy [data-layout-mode=dark] block that doesn't match the brand.
   We override only the surfaces our pages actually use, keyed off the html
   attribute so we never fight the legacy body-attribute system. */

:root[data-theme="dark"] body,
:root[data-theme="dark"] #layout-wrapper,
:root[data-theme="dark"] .main-content,
:root[data-theme="dark"] .page-content {
  background: var(--bg);
  color: var(--ink-soft);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .page-title { color: var(--ink); }

:root[data-theme="dark"] hr { border-color: var(--line); opacity: 1; }

:root[data-theme="dark"] .text-muted { color: var(--muted) !important; }
:root[data-theme="dark"] .text-dark { color: var(--ink) !important; }
:root[data-theme="dark"] .text-secondary { color: var(--ink-soft) !important; }
:root[data-theme="dark"] .text-body { color: var(--ink-soft) !important; }

:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white { background-color: var(--surface) !important; color: var(--ink); }
:root[data-theme="dark"] .bg-body { background-color: var(--bg) !important; }

/* Cards / modals / dropdowns / popovers */
:root[data-theme="dark"] .card {
  background-color: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line);
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
  background-color: transparent;
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .modal-content {
  background-color: var(--surface-elev);
  color: var(--ink-soft);
  border-color: var(--line);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { border-color: var(--line); }
:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface-elev);
  color: var(--ink-soft);
  border-color: var(--line);
  box-shadow: var(--shadow-overlay);
}
:root[data-theme="dark"] .dropdown-item { color: var(--ink-soft); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--accent-soft);
  color: var(--ink);
}
:root[data-theme="dark"] .dropdown-item.active,
:root[data-theme="dark"] .dropdown-item:active {
  background-color: var(--accent);
  color: var(--ink-on-accent);
}
:root[data-theme="dark"] .dropdown-divider { border-color: var(--line); }
:root[data-theme="dark"] .popover { background-color: var(--surface-elev); border-color: var(--line); }
:root[data-theme="dark"] .popover-body { color: var(--ink-soft); }
:root[data-theme="dark"] .tooltip-inner { background-color: var(--surface-elev); color: var(--ink); }

/* Lists & tables */
:root[data-theme="dark"] .list-group-item {
  background-color: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line);
}
:root[data-theme="dark"] .list-group-item-action:hover,
:root[data-theme="dark"] .list-group-item-action:focus { background-color: var(--bg-alt); color: var(--ink); }
:root[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-soft);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--ink);
  --bs-table-border-color: var(--line);
  color: var(--ink-soft);
}
:root[data-theme="dark"] .table thead th { color: var(--muted); border-color: var(--line); }
:root[data-theme="dark"] .table tbody tr { border-color: var(--line); }

/* Form controls */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem var(--accent-ring);
}
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-select:disabled { background-color: var(--bg-alt); color: var(--muted); }
:root[data-theme="dark"] .input-group-text {
  background-color: var(--bg-alt);
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .form-check-input {
  background-color: var(--surface);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
:root[data-theme="dark"] .form-label { color: var(--ink-soft); }

/* Buttons (only the ones whose default colors look bad in dark) */
:root[data-theme="dark"] .btn-light {
  background-color: var(--surface-elev);
  border-color: var(--line-strong);
  color: var(--ink);
}
:root[data-theme="dark"] .btn-light:hover { background-color: var(--bg-alt); border-color: var(--line-strong); color: var(--ink); }
:root[data-theme="dark"] .btn-outline-secondary {
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--surface-elev); color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] .btn-link { color: var(--accent); }
:root[data-theme="dark"] .btn-link:hover { color: var(--accent-dark); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); }

/* Alerts — keep semantic hue but dim background */
:root[data-theme="dark"] .alert-warning {
  background-color: var(--warning-soft);
  color: var(--warning-ink);
  border-color: rgba(240, 169, 62, 0.35);
}
:root[data-theme="dark"] .alert-danger {
  background-color: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(236, 117, 112, 0.35);
}
:root[data-theme="dark"] .alert-success {
  background-color: var(--success-soft);
  color: var(--success-ink);
  border-color: rgba(52, 196, 122, 0.35);
}
:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .alert-primary {
  background-color: var(--accent-soft);
  color: var(--accent-dark);
  border-color: rgba(74, 130, 224, 0.35);
}

/* Badges */
:root[data-theme="dark"] .badge.bg-light { background-color: var(--bg-alt) !important; color: var(--ink); }

/* Progress */
:root[data-theme="dark"] .progress { background-color: var(--bg-alt); }

/* Pagination */
:root[data-theme="dark"] .page-link {
  background-color: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line);
}
:root[data-theme="dark"] .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); }
:root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--bg-alt); color: var(--muted); }

/* Borders */
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end { border-color: var(--line) !important; }

/* Topbar / sidebar from app.min.css — keep dark sidebar but recolor topbar */
:root[data-theme="dark"] #page-topbar {
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .navbar-brand-box .logo span,
:root[data-theme="dark"] .navbar-brand-box .logo .text-white { color: var(--ink) !important; }
:root[data-theme="dark"] .header-item { color: var(--ink-soft); }
:root[data-theme="dark"] .header-item:hover { color: var(--ink); }

/* Footer */
:root[data-theme="dark"] footer.footer { background-color: var(--surface); color: var(--muted); border-top: 1px solid var(--line); }

/* ── SweetAlert2 ──────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .swal2-popup {
  background-color: var(--surface-elev);
  color: var(--ink-soft);
}
:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-html-container { color: var(--ink); }
:root[data-theme="dark"] .swal2-input,
:root[data-theme="dark"] .swal2-textarea,
:root[data-theme="dark"] .swal2-select {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .swal2-actions .swal2-cancel {
  background-color: var(--bg-alt);
  color: var(--ink);
}
:root[data-theme="dark"] .swal2-close { color: var(--muted); }

/* ── formBuilder editor ───────────────────────────────────────────────────── */
:root[data-theme="dark"] .form-builder,
:root[data-theme="dark"] .formbuilder,
:root[data-theme="dark"] .frmb-control,
:root[data-theme="dark"] .form-wrap.form-builder { color: var(--ink-soft); }
:root[data-theme="dark"] .form-builder .frmb-control li {
  background-color: var(--surface-elev);
  color: var(--ink);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .form-builder .frmb-control li:hover { background-color: var(--accent-soft); }
:root[data-theme="dark"] .form-builder .frmb,
:root[data-theme="dark"] .form-builder .stage-wrap {
  background-color: var(--surface);
  border-color: var(--line);
}
:root[data-theme="dark"] .form-builder .frmb li.form-field {
  background-color: var(--surface-elev);
  border-color: var(--line);
  color: var(--ink-soft);
}
:root[data-theme="dark"] .form-builder .frmb li.form-field input,
:root[data-theme="dark"] .form-builder .frmb li.form-field textarea,
:root[data-theme="dark"] .form-builder .frmb li.form-field select {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
:root[data-theme="dark"] .form-builder .field-actions a { color: var(--ink-soft); }

/* Pickr color picker (form editor) */
:root[data-theme="dark"] .pickr .pcr-button { border-color: var(--line-strong); }
:root[data-theme="dark"] .pcr-app {
  background-color: var(--surface-elev) !important;
  color: var(--ink-soft) !important;
}

/* ── App theme toggle UI ──────────────────────────────────────────────────── */
.theme-toggle {
  position: relative;
  display: inline-flex;
}
.theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle__btn:hover { background-color: var(--bg-alt); }
.theme-toggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle__btn .bx { font-size: 1.25rem; line-height: 1; }
.theme-toggle__btn .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle__btn .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle__btn .icon-moon { display: inline-block; }

.theme-toggle__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  padding: 6px;
  z-index: 1080;
  display: none;
}
.theme-toggle.is-open .theme-toggle__menu { display: block; }
.theme-toggle__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 0.2rem);
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle__item:hover { background: var(--bg-alt); color: var(--ink); }
.theme-toggle__item .bx { font-size: 1.05rem; color: var(--muted); }
.theme-toggle__item.is-active { color: var(--accent); font-weight: 600; }
.theme-toggle__item.is-active .bx { color: var(--accent); }

/* Floating placement for surfaces without a header (auth/error pages).
   The partial wraps itself in .theme-toggle--floating when no header host
   is available; views consume it transparently. */
.theme-toggle--floating {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1090;
}
.theme-toggle--floating .theme-toggle__btn {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  color: var(--ink-soft);
}
.theme-toggle--floating .theme-toggle__btn:hover { color: var(--ink); }

/* Compact placement for the landing nav — strips the circular hit-area
   chrome so it matches the text-link sibling. */
.lp-nav .theme-toggle__btn { width: 36px; height: 36px; color: var(--ink-soft); }
.lp-nav .theme-toggle__btn:hover { color: var(--ink); }

/* Customer-page placement — small absolute toggle in the card area. */
.theme-toggle--customer { position: absolute; top: 8px; right: 8px; }
.theme-toggle--customer .theme-toggle__btn { width: 36px; height: 36px; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__btn { transition: none; }
}