/*!
 * ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
 * ║  🚀 ERP.DOTCOMPANY - SMART DATE COMPONENT CSS v1.0.1                                     ║
 * ║  📅 Criado: 13/Nov/2025                                                                   ║
 * ║  🎯 Estilos para campos de data com calendário inteligente                               ║
 * ╚═══════════════════════════════════════════════════════════════════════════════════════════╝
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📝 INPUT COM ÍCONE DE CALENDÁRIO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Classe para inputs com ícone à esquerda (pl = padding left) */
.pl-icon {
  padding-left: 2.5rem !important; /* 40px - espaço para o ícone */
}

/* Wrapper do SmartDate */
[data-smart-date-wrapper] {
  position: relative;
  display: block;
}

/* Ícone do calendário */
[data-smart-date-icon] {
  position: absolute;
  left: 0.75rem; /* 12px */
  top: 50%;
  transform: translateY(-50%);
  color: #3b82f6; /* Azul */
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
  transition: color 0.2s ease;
}

[data-smart-date-icon]:hover {
  color: #1d4ed8; /* Azul escuro */
}

/* Dark mode para o ícone */
.dark [data-smart-date-icon] {
  color: #60a5fa; /* Azul claro */
}

.dark [data-smart-date-icon]:hover {
  color: #93c5fd; /* Azul mais claro */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📅 CALENDÁRIO MODAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Overlay do calendário */
[data-smart-date-overlay] {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal do calendário */
[data-smart-date-overlay] > div {
  background-color: white;
  border: 2px solid #3b82f6;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 1rem;
  width: 20rem; /* 320px */
  max-width: 90vw;
}

/* Dark mode para o modal */
.dark [data-smart-date-overlay] > div {
  background-color: #1f2937; /* gray-800 */
  color: white;
}

/* Botões de navegação do mês */
.btn-nav-month {
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease;
}

.btn-nav-month:hover {
  background-color: #f3f4f6; /* gray-100 */
}

.dark .btn-nav-month:hover {
  background-color: #374151; /* gray-700 */
}

/* Grid de dias */
[data-days-grid] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 1rem;
}

/* Botões dos dias */
[data-days-grid] button {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

[data-days-grid] button:not(:disabled):hover {
  background-color: #f3f4f6; /* gray-100 */
}

.dark [data-days-grid] button:not(:disabled):hover {
  background-color: #374151; /* gray-700 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔧 UTILITÁRIOS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Esconde elementos com x-cloak do Alpine.js */
[x-cloak] {
  display: none !important;
}

/* Animações suaves - @keyframes slideInUp definido em _animations.css */
[data-smart-date-overlay] {
  animation: slideInUp 0.2s ease-out;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🌙 DARK MODE COMPLETO - CALENDÁRIO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Paleta Dark Mode:
   --bg-page: #09090B
   --bg-surface: #18181B
   --bg-card: #1F1F23
   --bg-hover: #27272A
   --text-primary: #F9FAFB
   --text-secondary: #E5E7EB
   --text-muted: #9CA3AF
   --border: #27272A
   --border-light: #3F3F46
   --color-primary: #A78BFA
*/

/* Overlay dark mode */
.dark [data-smart-date-overlay] {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Modal do calendário dark mode */
.dark [data-smart-date-overlay] > div {
  background-color: #1F1F23;
  border: 2px solid #A78BFA;
  color: #F9FAFB;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
              0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Header do calendário (mês/ano) */
.dark [data-smart-date-overlay] .font-semibold,
.dark [data-smart-date-overlay] .text-lg {
  color: #F9FAFB;
}

/* Botões de navegação do mês dark mode */
.dark .btn-nav-month {
  color: #E5E7EB;
  background-color: transparent;
}

.dark .btn-nav-month:hover {
  background-color: #27272A;
  color: #F9FAFB;
}

/* Dias da semana (Dom, Seg, Ter...) */
.dark [data-days-grid] + div,
.dark .text-xs.font-medium,
.dark [data-smart-date-overlay] .grid > span {
  color: #9CA3AF;
}

/* Botões dos dias dark mode */
.dark [data-days-grid] button {
  color: #E5E7EB;
  background-color: transparent;
}

.dark [data-days-grid] button:not(:disabled):hover {
  background-color: #27272A;
  color: #F9FAFB;
}

/* Dia atual */
.dark [data-days-grid] button.today,
.dark [data-days-grid] button[data-today="true"] {
  border: 1px solid #A78BFA;
  color: #A78BFA;
}

/* Dia selecionado */
.dark [data-days-grid] button.selected,
.dark [data-days-grid] button[aria-selected="true"],
.dark [data-days-grid] button.bg-blue-500,
.dark [data-days-grid] button.bg-blue-600 {
  background-color: #A78BFA !important;
  color: #09090B !important;
  border-color: #A78BFA !important;
}

/* Dias desabilitados */
.dark [data-days-grid] button:disabled {
  color: #3F3F46;
  cursor: not-allowed;
}

/* Dias de outros meses */
.dark [data-days-grid] button.other-month,
.dark [data-days-grid] button.text-gray-400 {
  color: #3F3F46;
}

/* Botões de ação (Hoje, Limpar, Cancelar) */
.dark [data-smart-date-overlay] button.btn-secondary,
.dark [data-smart-date-overlay] button[type="button"]:not([data-days-grid] button) {
  background-color: #27272A;
  border: 1px solid #3F3F46;
  color: #E5E7EB;
}

.dark [data-smart-date-overlay] button.btn-secondary:hover,
.dark [data-smart-date-overlay] button[type="button"]:not([data-days-grid] button):hover {
  background-color: #3F3F46;
  color: #F9FAFB;
}

/* Botão primário (Confirmar/OK) */
.dark [data-smart-date-overlay] button.btn-primary,
.dark [data-smart-date-overlay] button.bg-blue-500,
.dark [data-smart-date-overlay] button.bg-blue-600 {
  background-color: #A78BFA;
  border-color: #A78BFA;
  color: #09090B;
}

.dark [data-smart-date-overlay] button.btn-primary:hover,
.dark [data-smart-date-overlay] button.bg-blue-500:hover,
.dark [data-smart-date-overlay] button.bg-blue-600:hover {
  background-color: #8B5CF6;
  border-color: #8B5CF6;
}

/* Input de data dark mode */
.dark [data-smart-date-wrapper] input,
.dark input[data-smart-date] {
  background-color: #1F1F23;
  border-color: #3F3F46;
  color: #F9FAFB;
}

.dark [data-smart-date-wrapper] input::placeholder,
.dark input[data-smart-date]::placeholder {
  color: #9CA3AF;
}

.dark [data-smart-date-wrapper] input:focus,
.dark input[data-smart-date]:focus {
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

/* Divisores e linhas */
.dark [data-smart-date-overlay] hr,
.dark [data-smart-date-overlay] .border-t {
  border-color: #27272A;
}

/* Labels e textos auxiliares */
.dark [data-smart-date-overlay] label,
.dark [data-smart-date-overlay] .text-sm {
  color: #9CA3AF;
}

/* Seletor de mês/ano (se houver dropdown) */
.dark [data-smart-date-overlay] select {
  background-color: #1F1F23;
  border-color: #3F3F46;
  color: #F9FAFB;
}

.dark [data-smart-date-overlay] select:focus {
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

/* Ícone atualizado para paleta dark */
.dark [data-smart-date-icon] {
  color: #A78BFA;
}

.dark [data-smart-date-icon]:hover {
  color: #C4B5FD;
}

/* Input disabled dark mode */
.dark [data-smart-date-wrapper] input:disabled,
.dark input[data-smart-date]:disabled {
  background-color: #18181B;
  color: #9CA3AF;
  border-color: #27272A;
  cursor: not-allowed;
}

/* Input readonly dark mode */
.dark [data-smart-date-wrapper] input:read-only,
.dark input[data-smart-date]:read-only {
  background-color: #18181B;
  color: #E5E7EB;
}

/* Input error state dark mode */
.dark [data-smart-date-wrapper].error input,
.dark input[data-smart-date].error,
.dark [data-smart-date-wrapper].is-invalid input,
.dark input[data-smart-date].is-invalid {
  border-color: #FCA5A5;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15);
}

/* Focus visible dark mode */
.dark [data-smart-date-wrapper] input:focus-visible,
.dark input[data-smart-date]:focus-visible {
  outline: 2px solid #A78BFA;
  outline-offset: 2px;
}

/* Botão clear/limpar dark mode */
.dark [data-smart-date-wrapper] .clear-btn,
.dark [data-smart-date-wrapper] button[aria-label*="limpar"] {
  color: #9CA3AF;
}

.dark [data-smart-date-wrapper] .clear-btn:hover,
.dark [data-smart-date-wrapper] button[aria-label*="limpar"]:hover {
  color: #FCA5A5;
}

/* Semana atual highlight dark mode */
.dark [data-days-grid] button.current-week {
  background-color: rgba(167, 139, 250, 0.1);
}

/* Range selection dark mode (date range picker) */
.dark [data-days-grid] button.in-range {
  background-color: rgba(167, 139, 250, 0.2);
  color: #E5E7EB;
}

.dark [data-days-grid] button.range-start,
.dark [data-days-grid] button.range-end {
  background-color: #A78BFA;
  color: #09090B;
}

/* Quick select buttons dark mode */
.dark [data-smart-date-overlay] .quick-select button,
.dark [data-smart-date-overlay] [class*="preset"] button {
  background-color: #27272A;
  border-color: #3F3F46;
  color: #E5E7EB;
}

.dark [data-smart-date-overlay] .quick-select button:hover,
.dark [data-smart-date-overlay] [class*="preset"] button:hover {
  background-color: #3F3F46;
  color: #F9FAFB;
}

.dark [data-smart-date-overlay] .quick-select button.active,
.dark [data-smart-date-overlay] [class*="preset"] button.active {
  background-color: #A78BFA;
  border-color: #A78BFA;
  color: #09090B;
}

/* Time picker dark mode (se houver) */
.dark [data-smart-date-overlay] input[type="time"] {
  background-color: #1F1F23;
  border-color: #3F3F46;
  color: #F9FAFB;
}

.dark [data-smart-date-overlay] input[type="time"]:focus {
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

/* Year/Month selector grid dark mode */
.dark [data-smart-date-overlay] .year-grid button,
.dark [data-smart-date-overlay] .month-grid button {
  color: #E5E7EB;
}

.dark [data-smart-date-overlay] .year-grid button:hover,
.dark [data-smart-date-overlay] .month-grid button:hover {
  background-color: #27272A;
}

.dark [data-smart-date-overlay] .year-grid button.selected,
.dark [data-smart-date-overlay] .month-grid button.selected {
  background-color: #A78BFA;
  color: #09090B;
}

/* Scrollbar no modal dark mode */
.dark [data-smart-date-overlay] ::-webkit-scrollbar {
  width: 6px;
}

.dark [data-smart-date-overlay] ::-webkit-scrollbar-track {
  background: #18181B;
}

.dark [data-smart-date-overlay] ::-webkit-scrollbar-thumb {
  background: #3F3F46;
  border-radius: 3px;
}

.dark [data-smart-date-overlay] ::-webkit-scrollbar-thumb:hover {
  background: #52525B;
}

/* Print styles */
@media print {
  [data-smart-date-overlay] {
    display: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-smart-date-overlay] {
    animation: none;
  }

  [data-smart-date-icon],
  .btn-nav-month,
  [data-days-grid] button {
    transition: none;
  }
}

/* Alto contraste dark mode */
@media (prefers-contrast: high) {
  .dark [data-smart-date-overlay] > div {
    border-width: 3px;
    border-color: #F9FAFB;
  }

  .dark [data-days-grid] button {
    border: 1px solid #3F3F46;
  }

  .dark [data-days-grid] button.selected {
    border-color: #F9FAFB;
  }
}