/* Css custom que será usado em todas as telas */

/* Animação do Bee Loader */
.bee-loader {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bee-loader div {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Botão com gradiente laranja (amarelo para laranja) */
.btn-gradient {
  background: linear-gradient(135deg, #f9b505 0%, #ff6a00 100%);
  color: white;
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #ff6a00 0%, #f9b505 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}

/* Gradiente laranja para textos e ícones */
.text-gradient {
  background: linear-gradient(135deg, #f9b505 0%, #ff6a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Para ícones SVG, usar fill com gradiente via CSS */
.icon-gradient {
  fill: url(#gradient-orange);
}

/* Gradiente para backgrounds (bordas, círculos, etc) */
.bg-gradient {
  background: linear-gradient(135deg, #f9b505 0%, #ff6a00 100%);
}

/* Para focus ring nos inputs */
.focus-gradient:focus {
  outline: none;
  ring-color: #f9b505;
  border-color: transparent;
}

/* Submenu expansível */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  display: none;
}

.submenu.hidden {
  display: none;
  max-height: 0;
}

.submenu.open {
  max-height: 500px !important;
  transition: max-height 0.3s ease-in;
  display: block !important;
}

#minhaEmpresaIcon.rotated {
  transform: rotate(180deg);
}

/* Loading Overlay Animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* —— Tema escuro (classe .dark no html) —— */
.dark .menu-item-active {
  background-color: rgba(249, 181, 5, 0.14);
}
.dark .menu-item-active::before {
  background: linear-gradient(180deg, #b45309, #f9b505);
}

.dark #sidebar a.menu-item.text-gray-700,
.dark #sidebar button.menu-item.text-gray-700 {
  color: #d1d5db;
}
.dark #sidebar a.menu-item.text-gray-700:hover,
.dark #sidebar button.menu-item.text-gray-700:hover {
  background-color: #1f2937;
}

/* Cards do dashboard (classe .dashboard-card) no modo escuro */
.dark main .dashboard-card {
  background-color: #111827;
  border-color: #374151;
}
.dark main .dashboard-card p.text-2xl.font-bold,
.dark main .dashboard-card h2.text-lg.font-bold {
  color: #f3f4f6 !important;
}
.dark main .dashboard-card .text-gray-600,
.dark main .dashboard-card .text-gray-500 {
  color: #9ca3af !important;
}

/* —— DataTables 2 (integração Tailwind CDN) — modo escuro ——
   Linhas pares já recebem dark:even:bg-gray-900/50 no JS; as ímpares ficam
   transparentes e herdavam fundo branco do card → texto claro sumia. */
html.dark table.dataTable tbody > tr,
.dark table.dataTable tbody > tr {
  background-color: #111827 !important;
}
html.dark table.dataTable tbody > tr:nth-child(even),
.dark table.dataTable tbody > tr:nth-child(even) {
  background-color: #1f2937 !important;
}
html.dark table.dataTable tbody > tr > td,
.dark table.dataTable tbody > tr > td {
  color: #e5e7eb;
  border-color: #374151;
}
html.dark table.dataTable thead > tr > th,
.dark table.dataTable thead > tr > th {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-bottom-color: #374151 !important;
}
html.dark .dataTables_wrapper,
.dark .dataTables_wrapper {
  color: #d1d5db;
}
html.dark div.dt-processing,
html.dark div[class*='dt-processing'],
.dark div.dt-processing,
.dark div[class*='dt-processing'] {
  background-color: rgba(17, 24, 39, 0.95) !important;
  color: #9ca3af !important;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
html.dark table.dataTable tbody a:not(.btn):not([class*='bg-']),
.dark table.dataTable tbody a:not(.btn):not([class*='bg-']) {
  color: #93c5fd;
}
html.dark table.dataTable tbody a:not(.btn):not([class*='bg-']):hover,
.dark table.dataTable tbody a:not(.btn):not([class*='bg-']):hover {
  color: #bfdbfe;
}
html.dark .dataTables_wrapper .dt-empty,
.dark .dataTables_wrapper .dt-empty {
  color: #9ca3af;
}

/* —— Fallback dark para telas de CRUD (create/edit) —— */
.dark main .bg-white {
  background-color: #111827 !important;
}
.dark main .border-gray-200 {
  border-color: #374151 !important;
}
.dark main .border-gray-300 {
  border-color: #4b5563 !important;
}
.dark main .text-gray-900 {
  color: #f3f4f6 !important;
}
.dark main .text-gray-700 {
  color: #d1d5db !important;
}
.dark main .text-gray-600,
.dark main .text-gray-500 {
  color: #9ca3af !important;
}
.dark main input:not([type='checkbox']):not([type='radio']):not([type='color']),
.dark main select,
.dark main textarea {
  background-color: #1f2937;
  border-color: #4b5563;
  color: #f3f4f6;
}
.dark main input::placeholder,
.dark main textarea::placeholder {
  color: #9ca3af;
}
.dark main input:disabled,
.dark main textarea:disabled,
.dark main select:disabled {
  background-color: #111827;
  color: #9ca3af;
  border-color: #374151;
}
.dark main .hover\:bg-gray-50:hover {
  background-color: #1f2937 !important;
}

/* Overrides pós-Tailwind (faixa de sombra no dark): ver tailwind-overrides.css (link por último no app.blade) */