/**
 * Tema Velzon — inspirado no template Velzon (Themesbrand)
 * Ativo quando o root tem data-theme="velzon".
 * Cores e tipografia baseados no dashboard Velzon (Bootstrap 5).
 */

/* --- Botões de salvar / ação principal: animação no hover (light e dark) --- */
.app-btn-save {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.app-btn-save:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.app-btn-save:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
html[data-theme-mode="dark"] .app-btn-save:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
html[data-theme-mode="dark"] .app-btn-save:active:not(:disabled) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Variáveis do tema Velzon --- */
[data-theme="velzon"] {
  --velzon-primary: #405189;
  --velzon-primary-hover: #364574;
  --velzon-primary-light: #5b6e9e;
  --velzon-sidebar-bg: #405189;
  --velzon-sidebar-hover: rgba(255, 255, 255, 0.08);
  --velzon-body-bg: #f3f6f9;
  --velzon-card-bg: #ffffff;
  --velzon-card-border: #eff2f7;
  --velzon-header-bg: #ffffff;
  --velzon-header-border: #eff2f7;
  --velzon-text: #495057;
  --velzon-text-muted: #74788d;
  --velzon-border: #eff2f7;
}

/* --- Corpo e layout principal --- */
[data-theme="velzon"].min-h-screen,
[data-theme="velzon"] .min-h-screen.bg-steel-50 {
  background-color: var(--velzon-body-bg) !important;
}

/* --- Sidebar (menu lateral) — azul Velzon --- */
[data-theme="velzon"] aside.bg-steel-900 {
  background-color: var(--velzon-sidebar-bg) !important;
}

[data-theme="velzon"] aside .text-steel-400 {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="velzon"] aside button.hover\:bg-steel-800:hover,
[data-theme="velzon"] aside button:not(.bg-brand-600):hover {
  background-color: var(--velzon-sidebar-hover) !important;
}

[data-theme="velzon"] aside button.text-steel-300 {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="velzon"] aside .text-brand-500 {
  color: #fff !important;
}

[data-theme="velzon"] aside .bg-brand-600 {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

[data-theme="velzon"] aside h1 .text-white {
  color: #fff !important;
}

/* --- Header (barra superior) — sem fundo, sem borda --- */
[data-theme="velzon"] .app-header {
  background-color: transparent !important;
  border: none !important;
}

[data-theme="velzon"] .app-header button {
  color: var(--velzon-text) !important;
}

[data-theme="velzon"] .app-header button:hover {
  background-color: rgba(64, 81, 137, 0.08) !important;
  color: var(--velzon-primary) !important;
}

[data-theme="velzon"] .app-header .bg-red-500 {
  background-color: #f06548 !important;
}

/* --- Botões primários (brand → primary Velzon) --- */
[data-theme="velzon"] .bg-brand-600,
[data-theme="velzon"] .bg-brand-700,
[data-theme="velzon"] .hover\:bg-brand-700:hover {
  background-color: var(--velzon-primary) !important;
}

[data-theme="velzon"] .text-brand-600,
[data-theme="velzon"] .text-brand-700,
[data-theme="velzon"] .text-brand-500 {
  color: var(--velzon-primary) !important;
}

[data-theme="velzon"] .border-brand-500,
[data-theme="velzon"] .focus\:ring-brand-500:focus,
[data-theme="velzon"] .focus\:border-brand-500:focus {
  border-color: var(--velzon-primary) !important;
}

[data-theme="velzon"] .focus\:ring-brand-500:focus {
  box-shadow: 0 0 0 2px rgba(64, 81, 137, 0.25) !important;
}

[data-theme="velzon"] .ring-brand-500 {
  --tw-ring-color: var(--velzon-primary) !important;
}

/* --- Cards e containers --- */
[data-theme="velzon"] .bg-white.rounded-xl {
  background-color: var(--velzon-card-bg) !important;
  border-color: var(--velzon-card-border) !important;
}

[data-theme="velzon"] .border-steel-200 {
  border-color: var(--velzon-border) !important;
}

[data-theme="velzon"] .border-steel-100 {
  border-color: #f6f6f6 !important;
}

/* --- Textos --- */
[data-theme="velzon"] .text-steel-800,
[data-theme="velzon"] .text-steel-900 {
  color: #212529 !important;
}

[data-theme="velzon"] .text-steel-700 {
  color: var(--velzon-text) !important;
}

[data-theme="velzon"] .text-steel-600 {
  color: var(--velzon-text) !important;
}

[data-theme="velzon"] .text-steel-500 {
  color: var(--velzon-text-muted) !important;
}

/* --- Fundos suaves --- */
[data-theme="velzon"] .bg-steel-50 {
  background-color: #f8f9fa !important;
}

[data-theme="velzon"] .bg-steel-100 {
  background-color: #eff2f7 !important;
}

[data-theme="velzon"] .bg-brand-50\/50,
[data-theme="velzon"] .bg-brand-50 {
  background-color: rgba(64, 81, 137, 0.08) !important;
}

/* --- Inputs e formulários --- */
[data-theme="velzon"] input:focus,
[data-theme="velzon"] select:focus,
[data-theme="velzon"] textarea:focus {
  --tw-ring-color: rgba(64, 81, 137, 0.25) !important;
  border-color: var(--velzon-primary) !important;
}

/* --- Links e hover em conteúdo --- */
[data-theme="velzon"] a.text-brand-600:hover,
[data-theme="velzon"] .hover\:text-brand-600:hover {
  color: var(--velzon-primary-hover) !important;
}

/* --- Tipografia: Poppins (comum no Velzon) --- */
[data-theme="velzon"] {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

[data-theme="velzon"] .font-logo-steelo {
  font-family: 'Poppins', sans-serif !important;
}

/* --- Ajustes de sombra (estilo Velzon mais suave) --- */
[data-theme="velzon"] .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="velzon"] .shadow-lg {
  box-shadow: 0 4px 12px rgba(64, 81, 137, 0.15) !important;
}

/* ========== VELZON — MODO ESCURO (html tem data-theme e data-theme-mode via App) ========== */
html[data-theme="velzon"][data-theme-mode="dark"] .min-h-screen,
html[data-theme="velzon"][data-theme-mode="dark"] .min-h-screen.bg-steel-50 {
  background-color: #1a1d21 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] aside.bg-steel-900 {
  background-color: #2d3340 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .app-header {
  background-color: transparent !important;
  border: none !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .app-header button {
  color: #e9ecef !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .app-header button:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-white.rounded-xl,
html[data-theme="velzon"][data-theme-mode="dark"] .bg-white {
  background-color: #232a33 !important;
  border-color: #2d3340 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-steel-50 {
  background-color: #1e2228 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-brand-600 {
  border-color: rgb(230, 57, 70) !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-steel-50\/50,
html[data-theme="velzon"][data-theme-mode="dark"] .bg-steel-50\/30 {
  background-color: transparent !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .hover\:bg-steel-50:hover {
  background-color: rgb(18 21 24) !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .hover\:bg-steel-50\/50:hover {
  background-color: rgb(18 21 24) !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-steel-100 {
  background-color: #2d3340 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-steel-200 {
  background-color: #1f2933 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-white\/60,
html[data-theme="velzon"][data-theme-mode="dark"] .bg-white\/80 {
  background-color: rgb(18 22 26) !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .divide-steel-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 51 51) !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .bg-gray-50 {
  background-color: #040c12 !important;
}

/* Rodapé dos modais: cor padrão em dark */
html[data-theme="velzon"][data-theme-mode="dark"] .modal-footer-dark {
  background-color: #222930 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .border-steel-200,
html[data-theme="velzon"][data-theme-mode="dark"] .border-steel-100 {
  border-color: #2d3340 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .text-steel-800,
html[data-theme="velzon"][data-theme-mode="dark"] .text-steel-900 {
  color: #f1f3f5 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .text-steel-700,
html[data-theme="velzon"][data-theme-mode="dark"] .text-steel-600 {
  color: #dee2e6 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .text-steel-500 {
  color: #adb5bd !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] .app-btn-add-contact {
  color: #9ca3af !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] main {
  background-color: #1a1d21 !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] input,
html[data-theme="velzon"][data-theme-mode="dark"] select,
html[data-theme="velzon"][data-theme-mode="dark"] textarea {
  background-color: #2d3340 !important;
  border-color: #3d4552 !important;
  color: #f1f3f5 !important;
}

/* Caixa do endereço de entrega: mesmo bg em tudo para o estilo outlined */
html[data-theme="velzon"][data-theme-mode="dark"] .delivery-address-box {
  background-color: #2d3340 !important;
}
html[data-theme="velzon"][data-theme-mode="dark"] .delivery-address-box input,
html[data-theme="velzon"][data-theme-mode="dark"] .delivery-address-box textarea,
html[data-theme="velzon"][data-theme-mode="dark"] .delivery-address-box [role="combobox"] {
  background-color: #2d3340 !important;
}
html[data-theme="velzon"][data-theme-mode="dark"] .delivery-address-box label {
  background-color: #2d3340 !important;
}
/* Descarga e Capacidade: mesma altura */
.delivery-descarga-fields input {
  min-height: 56px !important;
}

html[data-theme="velzon"][data-theme-mode="dark"] input::placeholder,
html[data-theme="velzon"][data-theme-mode="dark"] textarea::placeholder {
  color: #868e96 !important;
}