/* Tailwind is handled via tailwindcss-rails gem */
/* Custom overrides */

.active {
  @apply bg-primary/10 text-primary font-semibold;
}

/* Pagy nav styling */
.pagy nav {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.pagy nav a,
.pagy nav span {
  padding: 0.25rem 0.6rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  border: 1px solid hsl(var(--b3));
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  text-decoration: none;
  transition: all 0.15s;
}

.pagy nav a:hover {
  background: hsl(var(--p));
  color: hsl(var(--pc));
  border-color: hsl(var(--p));
}

.pagy nav span.current {
  background: hsl(var(--p));
  color: hsl(var(--pc));
  border-color: hsl(var(--p));
  font-weight: 600;
}

/* Hide number spinners on compact inputs (Chrome/Safari) so digits aren't covered */
input[type="number"].\[appearance\:textfield\]::-webkit-inner-spin-button,
input[type="number"].\[appearance\:textfield\]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Scrolling subscription payment reminder (shared/_payment_ticker) */
.payment-ticker {
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.375rem 0;
  background-color: var(--fallback-wa, oklch(var(--wa) / 1));
  color: var(--fallback-wac, oklch(var(--wac) / 1));
}
.payment-ticker--overdue {
  background-color: var(--fallback-er, oklch(var(--er) / 1));
  color: var(--fallback-erc, oklch(var(--erc) / 1));
}
.payment-ticker__track {
  display: inline-flex;
  animation: payment-ticker-scroll 30s linear infinite;
}
.payment-ticker:hover .payment-ticker__track {
  animation-play-state: paused;
}
.payment-ticker__item {
  padding-right: 6rem;
}
@keyframes payment-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .payment-ticker__track { animation: none; }
}

/* Keep page content inside the window next to the sidebar. Without this the drawer's
   grid column grows to fit wide tables, so their overflow-x-auto never kicks in. */
.drawer-content {
  min-width: 0;
}
.drawer-content > main {
  min-width: 0;
  max-width: 100%;
}

/* Navbar profile chip */
.profile-chip{display:flex;align-items:center;gap:.6rem;padding:.25rem .6rem .25rem .3rem;border-radius:9999px;cursor:pointer;transition:background-color .15s}
.profile-chip:hover,.profile-chip:focus{background-color:oklch(var(--b2))}
.profile-chip-avatar{position:relative;width:2.5rem;height:2.5rem;flex-shrink:0}
.profile-chip-img{width:100%;height:100%;border-radius:9999px;object-fit:cover;border:1px solid oklch(var(--b3));background:#fff}
.profile-chip-initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:9999px;background-color:oklch(var(--p));color:oklch(var(--pc));font-weight:700;font-size:.9rem}
.profile-chip-dot{position:absolute;right:0;bottom:1px;width:.7rem;height:.7rem;border-radius:9999px;background-color:oklch(var(--su));border:2px solid oklch(var(--b1))}
.profile-chip-text{line-height:1.2;max-width:18rem}
.profile-chip-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-chip-sub{font-size:.7rem;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}