/**
 * Preferências globais do app: tamanho da fonte, posição do logo, modo escuro.
 * Ativo conforme data-font-size, data-logo-position e data-theme-mode no root.
 */

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

/* --- Tamanho da fonte (escala base em rem; html recebe data-font-size via App) --- */
html[data-font-size="small"] {
  font-size: 14px !important;
}

html[data-font-size="medium"] {
  font-size: 16px !important;
}

html[data-font-size="large"] {
  font-size: 18px !important;
}

/* --- Família da fonte (html recebe data-font-family via App) --- */
html[data-font-family="system"] {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
html[data-font-family="inter"] {
  font-family: 'Inter', system-ui, sans-serif !important;
}
html[data-font-family="roboto"] {
  font-family: 'Roboto', system-ui, sans-serif !important;
}
html[data-font-family="open_sans"] {
  font-family: 'Open Sans', system-ui, sans-serif !important;
}
html[data-font-family="lato"] {
  font-family: 'Lato', system-ui, sans-serif !important;
}

/* --- Header: sem cor de fundo, sem borda --- */
.app-header {
  background-color: transparent !important;
  border: none !important;
}

/* --- Posição do logo (refinamento; o layout principal vem do App) --- */
html[data-logo-position="center"] .app-logo-wrap {
  justify-content: center !important;
  text-align: center !important;
}

html[data-logo-position="center"] .app-logo-wrap > div {
  align-items: center !important;
}

/* ========== MODO ESCURO — TEMA PADRÃO (html tem data-theme e data-theme-mode via App) ========== */
html[data-theme="padrao"][data-theme-mode="dark"] .min-h-screen.bg-steel-50,
html[data-theme="padrao"][data-theme-mode="dark"] .min-h-screen {
  background-color: #0f1215 !important;
}

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

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

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

/* Conteúdo principal: fundo e cards escuros */
html[data-theme="padrao"][data-theme-mode="dark"] main {
  background-color: #0f1215 !important;
}

html[data-theme="padrao"][data-theme-mode="dark"] .bg-white {
  background-color: #1a1f24 !important;
  border-color: #2a343c !important;
}

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

html[data-theme="padrao"][data-theme-mode="dark"] .bg-steel-50 {
  background-color: #151a1e !important;
}

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

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

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

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

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

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

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

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

/* Rodapé dos modais: cor padrão em dark (não herdar .bg-white do card) */
html[data-theme="padrao"][data-theme-mode="dark"] .modal-footer-dark {
  background-color: #222930 !important;
}

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

html[data-theme="padrao"][data-theme-mode="dark"] .text-steel-700 {
  color: #e5e7eb !important;
}

html[data-theme="padrao"][data-theme-mode="dark"] .text-steel-600 {
  color: #d1d5db !important;
}

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

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

html[data-theme="padrao"][data-theme-mode="dark"] input,
html[data-theme="padrao"][data-theme-mode="dark"] select,
html[data-theme="padrao"][data-theme-mode="dark"] textarea {
  background-color: #1f2933 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

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

html[data-theme="padrao"][data-theme-mode="dark"] input::placeholder,
html[data-theme="padrao"][data-theme-mode="dark"] textarea::placeholder {
  color: #6b7280 !important;
}

/* Modo escuro — qualquer tema (fallback para garantir botões + E-mail / + Tel) */
html[data-theme-mode="dark"] .app-btn-add-contact {
  color: #9ca3af !important;
}

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