@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 */
input.pl-10,
textarea.pl-10,
select.pl-10 {
  padding-left: 2.5rem !important;
}

input.pl-8,
textarea.pl-8,
select.pl-8 {
  padding-left: 2rem !important;
}

/* Style empty date inputs with lighter placeholder text */
input[type="date"]:not(:focus):invalid,
input[type="date"]:not(:focus)[value=""] {
  color: #e5e7eb !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: #e5e7eb;
}

/* 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;
  border-radius: 0.5rem 0.5rem 0 0;
}

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

.flatpickr-current-month {
  padding-top: 10px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600;
  font-size: 1rem;
  color: white !important;
  background: transparent !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
  -webkit-appearance: none;
  appearance: none;
}

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

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  font-size: 1rem;
  color: white !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !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: white transparent transparent transparent !important;
}

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

/* Navigation arrows */
.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;
}

/* 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;
}