/* ================================================================
   RADARPET — Identidade Visual Global
   Estiliza selects, inputs de data/hora, checkboxes e radios
   com as cores da marca (#f97316 brand-500 / #ea580c brand-600)
   ================================================================ */

/* Accent color nativo: calendário, horário, checkbox, radio */
:root {
  accent-color: #f97316;
  color-scheme: light;
}

/* ── SELECT ───────────────────────────────────────────────── */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Seta laranja personalizada */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 34px !important;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

select:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18) !important;
  outline: none !important;
}

/* Opção selecionada dentro do dropdown nativo */
select option:checked {
  background: #f97316;
  color: #fff;
}

/* ── DATE / TIME / DATETIME-LOCAL ─────────────────────────── */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18) !important;
  outline: none !important;
}

/* Ícone do calendário/relógio — tinge de laranja via filter */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  opacity: .75;
  /* Converte preto → laranja brand-500 */
  filter: invert(58%) sepia(95%) saturate(1200%) hue-rotate(347deg) brightness(101%) contrast(97%);
  transition: opacity .15s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ── CHECKBOX ─────────────────────────────────────────────── */
input[type="checkbox"] {
  accent-color: #f97316;
  cursor: pointer;
}

/* ── RADIO ────────────────────────────────────────────────── */
input[type="radio"] {
  accent-color: #f97316;
  cursor: pointer;
}

/* ── RANGE (caso exista) ──────────────────────────────────── */
input[type="range"] {
  accent-color: #f97316;
}

/* ── BADGES DE EXPIRAÇÃO ─────────────────────────────────────── */
.badge-expiry {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.badge-exp-expired { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.badge-exp-urgent  { background: #fff7ed; color: #ea580c; border: 1px solid #fdba74; }
.badge-exp-warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-exp-ok      { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* ── FLATPICKR — tema laranja completo ───────────────────────── */
.flatpickr-calendar {
  border: 2px solid #f97316 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(249,115,22,.2) !important;
  font-family: system-ui, sans-serif !important;
  overflow: hidden;
}
.flatpickr-months {
  background: #f97316 !important;
  border-radius: 0 !important;
  padding: 2px 0;
}
.flatpickr-month, .flatpickr-current-month,
.flatpickr-prev-month, .flatpickr-next-month { color: #fff !important; fill: #fff !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #fff !important; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: rgba(255,255,255,.15) !important; border-radius: 8px; }
.flatpickr-current-month input.cur-year { color: #fff !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #f97316 !important; color: #fff !important; border: none !important;
  font-weight: 700; font-size: 14px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { background: #fff; color: #111; }
.flatpickr-weekdays { background: #fff7ed !important; }
span.flatpickr-weekday { background: #fff7ed !important; color: #ea580c !important; font-weight: 700 !important; }
.flatpickr-day {
  border-radius: 8px !important;
  color: #374151;
  transition: background .12s, color .12s;
}
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
  background: #fff7ed !important; border-color: #f97316 !important; color: #ea580c !important;
}
.flatpickr-day.today {
  border-color: #f97316 !important; color: #f97316 !important; font-weight: 700 !important;
}
.flatpickr-day.today:hover { background: #f97316 !important; color: #fff !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.flatpickr-day.inRange {
  background: #ffedd5 !important; border-color: #ffedd5 !important; color: #ea580c !important;
}
.flatpickr-time { border-top: 1px solid #ffedd5 !important; background: #fff !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm {
  color: #374151 !important; font-weight: 600;
}
.flatpickr-time input:hover, .flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .numInputWrapper:hover { background: #fff7ed !important; color: #ea580c !important; }
.flatpickr-time .arrowUp::after   { border-bottom-color: #f97316 !important; }
.flatpickr-time .arrowDown::after { border-top-color:    #f97316 !important; }
.flatpickr-time .numInput:focus { border-color: #f97316 !important; outline: none; }
/* Input estilizado ao abrir Flatpickr */
.flatpickr-input.active {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.18) !important;
}

/* Ícone de calendário laranja no input do Flatpickr */
.flatpickr-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 17px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* Cabeçalho do mês: corrige select nativo dentro do Flatpickr */
.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  /* Reset do custom select — aqui é nativo mesmo */
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  display: inline-block !important;
  background-image: none !important;
}
.flatpickr-current-month .numInputWrapper {
  width: 60px !important;
}
.flatpickr-current-month input.cur-year {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* ── TEXT / EMAIL / TEL / PASSWORD — focus laranja ─────────── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18) !important;
  outline: none !important;
}