@import url('https://fonts.googleapis.com/css2?family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap');
@import "tailwindcss";

/* Set Vend Sans as default font */
@layer base {
  html, body, * {
    font-family: 'Vend Sans', system-ui, sans-serif;
  }
}

@theme {
  --font-sans: 'Vend Sans', system-ui, sans-serif;
}

/* Global form input styling - outside @layer for higher specificity */
/* Exclude inputs inside .dark-form containers (superadmin, etc.) */
input[type="text"]:not(.dark-form input):not(.dark-input),
input[type="email"]:not(.dark-form input):not(.dark-input),
input[type="password"]:not(.dark-form input):not(.dark-input),
input[type="number"]:not(.dark-form input):not(.dark-input),
input[type="tel"]:not(.dark-form input):not(.dark-input),
input[type="url"]:not(.dark-form input):not(.dark-input),
input[type="search"]:not(.dark-form input):not(.dark-input),
input[type="date"]:not(.dark-form input):not(.dark-input),
input[type="datetime-local"]:not(.dark-form input):not(.dark-input),
input[type="time"]:not(.dark-form input):not(.dark-input),
input[type="month"]:not(.dark-form input):not(.dark-input),
input[type="week"]:not(.dark-form input):not(.dark-input),
textarea:not(.dark-form textarea):not(.dark-input),
select:not(.dark-form select):not(.dark-input) {
  padding: 0.75rem 1rem !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}

input[type="text"]:focus:not(.dark-form input):not(.dark-input),
input[type="email"]:focus:not(.dark-form input):not(.dark-input),
input[type="password"]:focus:not(.dark-form input):not(.dark-input),
input[type="number"]:focus:not(.dark-form input):not(.dark-input),
input[type="tel"]:focus:not(.dark-form input):not(.dark-input),
input[type="url"]:focus:not(.dark-form input):not(.dark-input),
input[type="search"]:focus:not(.dark-form input):not(.dark-input),
input[type="date"]:focus:not(.dark-form input):not(.dark-input),
input[type="datetime-local"]:focus:not(.dark-form input):not(.dark-input),
input[type="time"]:focus:not(.dark-form input):not(.dark-input),
input[type="month"]:focus:not(.dark-form input):not(.dark-input),
input[type="week"]:focus:not(.dark-form input):not(.dark-input),
textarea:focus:not(.dark-form textarea):not(.dark-input),
select:focus:not(.dark-form select):not(.dark-input) {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

/* Allow custom padding for inputs with icons - use high specificity to override global styles */
input[type="text"].pl-10:not(.dark-form input):not(.dark-input),
input[type="email"].pl-10:not(.dark-form input):not(.dark-input),
input[type="password"].pl-10:not(.dark-form input):not(.dark-input),
input[type="number"].pl-10:not(.dark-form input):not(.dark-input),
input[type="tel"].pl-10:not(.dark-form input):not(.dark-input),
input[type="url"].pl-10:not(.dark-form input):not(.dark-input),
input[type="search"].pl-10:not(.dark-form input):not(.dark-input),
textarea.pl-10:not(.dark-form textarea):not(.dark-input),
select.pl-10:not(.dark-form select):not(.dark-input) {
  padding-left: 2.5rem !important;
}

input[type="text"].pl-8:not(.dark-form input):not(.dark-input),
input[type="email"].pl-8:not(.dark-form input):not(.dark-input),
input[type="password"].pl-8:not(.dark-form input):not(.dark-input),
input[type="number"].pl-8:not(.dark-form input):not(.dark-input),
input[type="tel"].pl-8:not(.dark-form input):not(.dark-input),
input[type="url"].pl-8:not(.dark-form input):not(.dark-input),
input[type="search"].pl-8:not(.dark-form input):not(.dark-input),
textarea.pl-8:not(.dark-form textarea):not(.dark-input),
select.pl-8:not(.dark-form select):not(.dark-input) {
  padding-left: 2rem !important;
}

/* WebKit browsers - style the date format text when empty */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #9ca3af;
}

/* When date has a value, show normal color */
input[type="date"]:valid::-webkit-datetime-edit-text,
input[type="date"]:valid::-webkit-datetime-edit-month-field,
input[type="date"]:valid::-webkit-datetime-edit-day-field,
input[type="date"]:valid::-webkit-datetime-edit-year-field {
  color: #111827;
}

/* Focus state - show normal color for usability */
input[type="date"]:focus::-webkit-datetime-edit-text,
input[type="date"]:focus::-webkit-datetime-edit-month-field,
input[type="date"]:focus::-webkit-datetime-edit-day-field,
input[type="date"]:focus::-webkit-datetime-edit-year-field {
  color: #111827;
}

/* Global placeholder styling - very light gray (gray-200) */
::placeholder {
  color: #e5e7eb !important;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #e5e7eb !important;
  opacity: 1;
}

::-moz-placeholder {
  color: #e5e7eb !important;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #e5e7eb !important;
  opacity: 1;
}

/* Flatpickr custom styling to match app theme */
.flatpickr-calendar {
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  font-family: 'Vend Sans', system-ui, sans-serif;
}

/* Month/year header */
.flatpickr-months {
  background: #78592a !important;
  border-radius: 0.5rem 0.5rem 0 0;
}

.flatpickr-months .flatpickr-month {
  background: transparent !important;
  height: 44px;
  color: white !important;
  fill: white !important;
}

.flatpickr-current-month {
  padding-top: 10px;
  color: white !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600;
  font-size: 1rem;
  color: #374151 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem !important;
  cursor: pointer;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: white;
  color: #374151;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  font-size: 1rem;
  color: #374151 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 0.25rem;
  padding: 0 0.25rem !important;
}

.flatpickr-current-month .numInputWrapper {
  background: transparent !important;
}

.flatpickr-current-month .numInputWrapper span {
  border: none !important;
  background: transparent !important;
}

.flatpickr-current-month .numInputWrapper span:after {
  border-color: #374151 transparent transparent transparent !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-color: transparent transparent #374151 transparent !important;
}

/* Navigation arrows - ensure white fill */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: white !important;
  color: white !important;
  padding: 10px 12px;
  top: 0;
  height: 44px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: rgba(255, 255, 255, 0.15);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: white !important;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  fill: white !important;
}

/* Today button styling */
.flatpickr-today-button {
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  padding: 0.5rem;
  text-align: center;
  cursor: pointer;
  color: #78592a;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 0.75rem 0.75rem;
  transition: background 0.15s ease;
}

.flatpickr-today-button:hover {
  background: #e5e7eb;
}

/* Weekday header */
.flatpickr-weekdays {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.flatpickr-weekday {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* Days */
.flatpickr-day {
  color: #374151;
  font-weight: 500;
  border-radius: 0.375rem;
}

.flatpickr-day:hover {
  background: #f3f4f6;
  border-color: #f3f4f6;
}

.flatpickr-day.today {
  border-color: #78592a;
  background: transparent;
}

.flatpickr-day.today:hover {
  background: #78592a;
  border-color: #78592a;
  color: white;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #78592a;
  border-color: #78592a;
  color: white;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #d1d5db;
}

.flatpickr-day.disabled {
  color: #d1d5db;
}

/* Alt input (display input) styling */
input.flatpickr-input[readonly],
.flatpickr-input.flatpickr-mobile {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  cursor: pointer;
}

/* Make the alt input look clickable */
.flatpickr-input + input.flatpickr-input {
  cursor: pointer;
}

/* Animated background blobs used on landing & SEO pages */
@keyframes blob {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(20px, -50px) scale(1.1);
  }
  50% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  75% {
    transform: translate(50px, 50px) scale(1.05);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Uitklapmenu's binnen het mobiele hoofdmenu.

   Op een telefoon klapt de hele navigatie uit als één paneel met een eigen
   scroll. De groepen daarbinnen (Leden, Organisatie, Financieel) zijn zelf ook
   uitklapmenu's en stonden absoluut gepositioneerd, zoals op een breed scherm
   hoort. Daardoor zweefden ze over het paneel heen en knipte de scrollrand van
   het paneel ze af: bij Organisatie kwam je niet verder dan Vergaderingen, en
   alles daaronder was onbereikbaar. Tom meldde dat voor Ledenvoordelen.

   Binnen het paneel schuiven ze nu gewoon mee. Vanaf 768px verandert er niets. */
@media (max-width: 767px) {
  /* Het paneel zelf mag scrollen als het langer is dan het scherm. Dit stond
     eerst als Tailwind-klasse op het element, maar zonder md-uitzondering gold
     het ook op een breed scherm: overflow-y maakt volgens de CSS-regels ook de
     x-as scrollend, en dan verscheen er een horizontale schuifbalk onder de
     menubalk. */
  [data-mobiel-menu] {
    max-height: 80vh;
    overflow-y: auto;
  }

  [data-mobiel-menu] [data-dropdown-target="menu"] {
    position: static;
    width: 100%;
    margin-top: 0.25rem;
    box-shadow: none;
  }
}