/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.bg-image {
  height: 100vh;
  background-image: url("/assets/hornet-06b5cb61.webp");
  background-size: cover;
  background-position: center;
}

@keyframes blink {
  0% { opacity: 1; }
  40% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}
.animate-blink {
  animation: blink 0.35s linear;
}

.fade-in {
  animation: fadeInRow 0.3s;
}
.fade-out {
  animation: fadeOutRow 0.3s;
}

@keyframes fadeInRow {
  0% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
  100% { opacity: 1; height: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
@keyframes fadeOutRow {
  0% { opacity: 1; height: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
}

/* Also for instant hiding for in-between states: */
.paid-row.opacity-0 {
  opacity: 0 !important;
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: all 0.3s;
}

.tab-btn {
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  color: #93c5fd; /* text-blue-300 */
  background: none;
}
.tab-btn:hover, .tab-btn:focus {
  color: #60a5fa; /* text-blue-400 */
  border-bottom-color: #60a5fa;
  background: #1e293b22; /* optional translucent bg */
}
.tab-btn.active {
  color: #38bdf8;     /* text-blue-400 */
  border-bottom-color: #2563eb; /* border-blue-600 */
  background: #1e293b;  /* bg-blue-900 */
}
/* Pagy */
.pagy.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  font-size: 0.95rem;
}
.pagy.nav a,
.pagy.nav span,
.pagy.nav .current {
  border-radius: 0.375rem;
  background: rgba(30,64,175,0.7); /* blue-900, 70% */
  color: #BFDBFE; /* blue-200 */
  padding: 0.4em 0.8em;
  transition: background 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.pagy.nav .current[aria-current="page"] {
  background: #1d4ed8;  /* blue-700 */
  color: #DBEAFE;       /* blue-100 */
  font-weight: bold;
  cursor: default;
  pointer-events: none;
}
.pagy.nav a[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(30,64,175,0.4);
  color: #60a5fa;
}
.pagy.nav .gap {
  padding-left: 0.8em;
  padding-right: 0.8em;
  color: #9ca3af;               /* gray-400 */
  background: transparent;
  cursor: default;
}
.pagy.nav a:hover:not([aria-current="page"]):not([aria-disabled="true"]) {
  background: rgba(32, 83, 202, 1);  /* blue-700 solid */
  color: #FFF;
}
/* end Pagy */


/* Presence: improve visibility of datetime-local calendar icon on dark backgrounds */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 1;
}

/* Hint dark UI for supporting UAs */
@supports (color-scheme: dark) {
  input[type="datetime-local"] {
    color-scheme: dark;
  }
}


/* Presence: force a custom calendar icon (white with black pixels) in Chromium-based browsers (Brave/Chrome) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <!-- Calendar body -->\
  <rect x='3' y='4' width='18' height='17' rx='2' ry='2' fill='%23ffffff'/>\
  <!-- Top header line (subtle separation) -->\
  <rect x='3' y='7' width='18' height='1' fill='%23000000' opacity='0.25'/>\
  <!-- Binding posts -->\
  <rect x='8' y='2' width='2' height='2' fill='%23ffffff'/>\
  <rect x='14' y='2' width='2' height='2' fill='%23ffffff'/>\
  <!-- Small black pixels (days) -->\
  <rect x='6'  y='10' width='2' height='2' fill='%23000000'/>\
  <rect x='10' y='10' width='2' height='2' fill='%23000000'/>\
  <rect x='14' y='10' width='2' height='2' fill='%23000000'/>\
  <rect x='6'  y='14' width='2' height='2' fill='%23000000'/>\
  <rect x='10' y='14' width='2' height='2' fill='%23000000'/>\
  <rect x='14' y='14' width='2' height='2' fill='%23000000'/>\
</svg>") no-repeat center center !important;
  background-size: 1em 1em !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer;
  -webkit-mask: none !important;
}


/* Presence: input-level background icon (cross-browser fallback) */
input[type="datetime-local"] {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <!-- White calendar body -->\
  <rect x='3' y='4' width='18' height='17' rx='2' ry='2' fill='%23ffffff'/>\
  <!-- Header separator -->\
  <rect x='3' y='7' width='18' height='1' fill='%23000000' opacity='0.25'/>\
  <!-- Binding posts -->\
  <rect x='8' y='2' width='2' height='2' fill='%23ffffff'/>\
  <rect x='14' y='2' width='2' height='2' fill='%23ffffff'/>\
  <!-- Black day pixels -->\
  <rect x='6'  y='10' width='2' height='2' fill='%23000000'/>\
  <rect x='10' y='10' width='2' height='2' fill='%23000000'/>\
  <rect x='14' y='10' width='2' height='2' fill='%23000000'/>\
  <rect x='6'  y='14' width='2' height='2' fill='%23000000'/>\
  <rect x='10' y='14' width='2' height='2' fill='%23000000'/>\
  <rect x='14' y='14' width='2' height='2' fill='%23000000'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem 1rem;
  padding-right: 2rem; /* ensure text doesn’t overlap the icon */
}

/* Safari-only: hide native indicator so our background icon shows through */
@supports (-webkit-touch-callout: none) {
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important; /* still clickable; just invisible */
  }
}