/* ─────────────────────────────────────────────────────────────────────────── */
/* Houndarr — Station App Styles                                              */
/* Custom CSS for animations, scrollbar, and states Tailwind can't express.  */
/* Design tokens live in tokens.css; this file consumes them.                 */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── Scrollbar gutter ───────────────────────────────────────────────────── */
html {
  scrollbar-gutter: stable both-edges;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0e1117; /* surface-1 */
}

::-webkit-scrollbar-thumb {
  background: #2a3448; /* border-default */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3d4f6b; /* border-strong */
}

/* ── Mobile nav backdrop ────────────────────────────────────────────────── */
.mobile-nav-backdrop {
  background: rgba(2, 6, 23, 0);
  pointer-events: none;
  transition:
    background  var(--dur-base) var(--ease-station),
    backdrop-filter var(--dur-base) var(--ease-station);
  backdrop-filter: blur(0px);
}

.mobile-nav-backdrop.is-visible {
  background: rgba(2, 6, 23, 0.65);
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

/* ── Mobile nav menu ────────────────────────────────────────────────────── */
.mobile-nav-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  border-top-color: transparent;
  transition:
    max-height var(--dur-slow) var(--ease-station),
    opacity    var(--dur-base) var(--ease-station),
    transform  var(--dur-slow) var(--ease-station);
}

.mobile-nav-menu.is-open {
  max-height: 18rem;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-top-color: var(--color-border-subtle);
}

.mobile-nav-icon {
  transition: transform var(--dur-base) var(--ease-station);
}

#mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon {
  transform: rotate(90deg);
}

/* ── Shell nav link transitions ─────────────────────────────────────────── */
.shell-nav-link {
  transition:
    background-color var(--dur-base) var(--ease-station),
    color            var(--dur-base) var(--ease-station);
}

/* Larger tap targets inside the mobile nav */
#mobile-nav-menu .shell-nav-link {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
}

/* ── App content loading / entering ────────────────────────────────────── */
#app-content {
  transition:
    opacity   var(--dur-fast) var(--ease-station),
    transform var(--dur-base) var(--ease-station);
}

#app-content.is-shell-loading {
  opacity: 0.45;
  transform: translateY(3px);
}

#app-content.is-shell-entering {
  animation: shell-content-enter var(--dur-base) var(--ease-station);
}

@keyframes shell-content-enter {
  from {
    opacity: 0.65;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Active status pulsing dot (Dashboard instance cards) ────────────────── */
@keyframes station-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
  }
}

.station-pulse-dot {
  animation: station-pulse 2.8s var(--ease-station) infinite;
}

/* ── Brand focus ring ────────────────────────────────────────────────────── */
.focus-brand:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.38);
}

/* ── Login/Setup background radial glow ─────────────────────────────────── */
.auth-glow-bg {
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(6, 182, 212, 0.08) 0%, transparent 70%),
    var(--color-base);
}

/* ── Body atmosphere — desktop ambient depth ────────────────────────────── */
body {
  background-image:
    radial-gradient(ellipse 55% 40% at 0% 0%,    rgba(6, 182, 212, 0.055) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(14, 116, 144, 0.030) 0%, transparent 55%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(34, 211, 238, 0.018) 31px,
      rgba(34, 211, 238, 0.018) 32px
    );
}

/* ── Nav atmospheric glow ───────────────────────────────────────────────── */
body > nav {
  box-shadow:
    0 1px 0 #1e2638,
    0 2px 20px rgba(6, 182, 212, 0.065);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-backdrop {
    transition: none;
  }
  .mobile-nav-menu,
  .mobile-nav-icon,
  .shell-nav-link,
  #app-content,
  #app-content.is-shell-loading,
  #app-content.is-shell-entering,
  .station-pulse-dot {
    transition: none;
    animation: none;
    transform: none;
  }
}