/*
  SPOT Design System — v2
  Override layer loaded after Phoenix/Bootstrap.
  Three concerns: tokens, glass surfaces, premium motion.
*/

/* ── 1. Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --sp-accent:        oklch(44% 0.13 162);
  --sp-accent-bright: oklch(56% 0.16 162);
  --sp-accent-dim:    oklch(36% 0.10 162);
  --sp-accent-soft:   oklch(44% 0.13 162 / 10%);
  --sp-accent-border: oklch(44% 0.13 162 / 22%);

  --sp-bg:       oklch(97.5% 0.006 85);
  --sp-surface:  oklch(99.5% 0.003 85);
  --sp-border:   oklch(91%   0.007 85);
  --sp-text-1:   oklch(18%   0.015 260);
  --sp-text-2:   oklch(46%   0.012 260);
  --sp-text-3:   oklch(65%   0.010 260);

  --sp-success:      oklch(50% 0.14 160);
  --sp-success-soft: oklch(50% 0.14 160 / 12%);
  --sp-warning:      oklch(62% 0.16 72);
  --sp-warning-soft: oklch(62% 0.16 72 / 12%);
  --sp-danger:       oklch(52% 0.22 27);
  --sp-danger-soft:  oklch(52% 0.22 27 / 10%);

  /* Shadow scale */
  --sp-shadow-xs: 0 1px 2px oklch(0% 0 0 / 5%);
  --sp-shadow-sm: 0 2px 8px oklch(0% 0 0 / 6%), 0 1px 2px oklch(0% 0 0 / 4%);
  --sp-shadow-md: 0 4px 16px oklch(0% 0 0 / 8%), 0 1px 4px oklch(0% 0 0 / 5%);
  --sp-shadow-lg: 0 8px 32px oklch(0% 0 0 / 10%), 0 2px 8px oklch(0% 0 0 / 5%);

  /* Easing */
  --sp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sp-duration: 200ms;
}

/* ── 2. Global resets ───────────────────────────────────────────────────────── */

/* Link colour */
a { color: var(--sp-accent); }
a:hover { color: var(--sp-accent-bright); }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--sp-accent) !important;
  outline-offset: 2px !important;
}
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--sp-surface), 0 0 0 0.25rem var(--sp-accent) !important;
}

/* Form focus border */
.form-control:focus,
.form-select:focus {
  border-color: var(--sp-accent) !important;
}

/* ── 3. Glass top navbar ────────────────────────────────────────────────────── */
.navbar-top.fixed-top,
nav.navbar-top {
  background: oklch(99% 0.004 85 / 82%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  box-shadow: 0 1px 0 oklch(88% 0.008 85), var(--sp-shadow-xs) !important;
}

/* Glass vertical nav */
.navbar-vertical {
  background: oklch(98% 0.005 85 / 90%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-right: 1px solid var(--sp-border) !important;
}

/* Logo */
.navbar .logo svg,
.navbar-brand svg {
  stroke: var(--sp-accent) !important;
}

/* Active + hover nav links */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link:hover {
  color: var(--sp-accent) !important;
}
.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link:hover .nav-link-icon {
  color: var(--sp-accent) !important;
}

/* ── 4. Premium buttons ─────────────────────────────────────────────────────── */
.btn-phoenix-primary,
.btn-primary:not(.btn-phoenix-secondary):not(.btn-outline-primary) {
  background-color: var(--sp-accent) !important;
  border-color:     var(--sp-accent) !important;
  color: #fff !important;
  box-shadow: var(--sp-shadow-sm) !important;
  transition: background-color var(--sp-duration) var(--sp-ease-out),
              transform         150ms var(--sp-ease-out),
              box-shadow        var(--sp-duration) var(--sp-ease-out) !important;
}
.btn-phoenix-primary:hover,
.btn-primary:not(.btn-phoenix-secondary):not(.btn-outline-primary):hover {
  background-color: var(--sp-accent-bright) !important;
  border-color:     var(--sp-accent-bright) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--sp-shadow-md), 0 0 0 3px var(--sp-accent-soft) !important;
}
.btn-phoenix-primary:active,
.btn-primary:not(.btn-phoenix-secondary):not(.btn-outline-primary):active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: var(--sp-shadow-xs) !important;
}

/* ── 5. Glass cards ─────────────────────────────────────────────────────────── */
.card,
.db-chart-card,
.biz-card,
.steps-wrap {
  background: oklch(99.5% 0.003 85 / 88%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: var(--sp-shadow-sm) !important;
  transition: transform var(--sp-duration) var(--sp-ease-out),
              box-shadow var(--sp-duration) var(--sp-ease-out) !important;
}
.card:hover,
.db-chart-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--sp-shadow-md) !important;
}

/* ── 6. Stat cards — glass + lift ───────────────────────────────────────────── */
.db-stat {
  background: oklch(99.5% 0.003 85 / 80%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 1rem !important;
  padding: 1.1rem 1.25rem !important;
  box-shadow: var(--sp-shadow-sm) !important;
  transition: transform var(--sp-duration) var(--sp-ease-out),
              box-shadow var(--sp-duration) var(--sp-ease-out) !important;
}
.db-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sp-shadow-lg) !important;
}

/* Stat icons — single spruce accent */
.db-stat-icon {
  background: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
  border-radius: 0.65rem !important;
  box-shadow: inset 0 1px 0 oklch(44% 0.13 162 / 15%) !important;
}
.db-stat-num { color: var(--sp-text-1) !important; }

/* ── 7. Accent-consistent components ────────────────────────────────────────── */
.biz-icon {
  background: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
}

.btn-xs.primary {
  color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
}
.btn-xs.primary:hover {
  background: var(--sp-accent) !important;
  color: #fff !important;
}

.step-num.todo {
  background: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
}
.step-cta {
  border-color: var(--sp-accent) !important;
  color: var(--sp-accent) !important;
}
.step-cta:hover {
  background: var(--sp-accent) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.badge-phoenix-primary {
  background-color: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
}

/* ── 8. Chat bubble ─────────────────────────────────────────────────────────── */
#spot-bubble-btn {
  background: var(--sp-accent) !important;
  box-shadow: 0 4px 20px var(--sp-accent-soft), var(--sp-shadow-md) !important;
  transition: transform 200ms var(--sp-ease-out), box-shadow 200ms var(--sp-ease-out) !important;
}
#spot-bubble-btn:hover {
  transform: scale(1.07) !important;
  box-shadow: 0 6px 28px oklch(44% 0.13 162 / 45%), var(--sp-shadow-lg) !important;
}
#spot-bubble-btn:active { transform: scale(0.95) !important; }
#spot-bubble-btn.has-update::after { border-color: var(--sp-accent) !important; }

.sc-send { background: var(--sp-accent) !important; }
.sc-send:hover { background: var(--sp-accent-bright) !important; }
.sc-dot { background: var(--sp-accent) !important; }
.sc-problem-confirm { background: var(--sp-accent) !important; }
.sc-report-btn { background: var(--sp-accent) !important; }
.sc-report-btn:hover { background: var(--sp-accent-bright) !important; color: #fff !important; }

/* ── 9. View-business studio button ─────────────────────────────────────────── */
.btn-studio {
  background: var(--sp-accent) !important;
  box-shadow: 0 4px 16px var(--sp-accent-soft) !important;
  transition: transform var(--sp-duration) var(--sp-ease-out),
              box-shadow var(--sp-duration) var(--sp-ease-out) !important;
}
.btn-studio:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px oklch(44% 0.13 162 / 35%) !important;
}

/* ── 10. Page load animation ─────────────────────────────────────────────────── */
@keyframes sp-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sp-anim-1 { animation: sp-fade-up 420ms var(--sp-ease-out) both; }
.sp-anim-2 { animation: sp-fade-up 420ms var(--sp-ease-out) 60ms both; }
.sp-anim-3 { animation: sp-fade-up 420ms var(--sp-ease-out) 120ms both; }
.sp-anim-4 { animation: sp-fade-up 420ms var(--sp-ease-out) 180ms both; }
.sp-anim-5 { animation: sp-fade-up 420ms var(--sp-ease-out) 240ms both; }

@media (prefers-reduced-motion: reduce) {
  .sp-anim-1, .sp-anim-2, .sp-anim-3, .sp-anim-4, .sp-anim-5 {
    animation: none !important;
  }
}

/* ── 11. Count-up helper — numbers animate via JS, this hides the raw value ── */
[data-count-up] { transition: opacity 200ms; }

/* ── 12. Landing-page specifics ──────────────────────────────────────────────── */
/* Ensure the landing page nav stays dark — don't apply the glass override there */
nav#navbar {
  background: oklch(12% 0.010 250 / 88%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid oklch(100% 0 0 / 7%) !important;
  box-shadow: none !important;
}

/* ── 13. Table row hover ─────────────────────────────────────────────────────── */
.table tbody tr {
  transition: background-color 150ms !important;
}
.table tbody tr:hover {
  background-color: var(--sp-accent-soft) !important;
}

/* ── 14. Input / select focus ────────────────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--sp-accent) !important;
  box-shadow: 0 0 0 3px var(--sp-accent-soft) !important;
}

/* ── 15. Pagination active ───────────────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
}
.page-link {
  color: var(--sp-accent) !important;
}
.page-link:hover {
  color: var(--sp-accent-bright) !important;
}

/* ── 16. Tabs active ─────────────────────────────────────────────────────────── */
.nav-tabs .nav-link.active {
  color: var(--sp-accent) !important;
  border-bottom-color: var(--sp-accent) !important;
}
.nav-tabs .nav-link:hover {
  color: var(--sp-accent) !important;
}

/* ── 17. Badge / pill overrides ──────────────────────────────────────────────── */
.badge.bg-primary,
.badge-phoenix-primary {
  background-color: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
}

/* ── 18. Dropdown active ─────────────────────────────────────────────────────── */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--sp-accent) !important;
}

/* ── 19. Checkbox / radio accent ─────────────────────────────────────────────── */
.form-check-input:checked {
  background-color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
}

/* ── 20. Progress bar ────────────────────────────────────────────────────────── */
.progress-bar {
  background-color: var(--sp-accent) !important;
}