/* ========================================
   SEMEAR ERP - SISTEMA DE TEMAS v3.0 OTIMIZADO
   ========================================

   IMPORTANTE: Todas as variaveis CSS estao em _css-variables.css
   Este arquivo contem apenas estilos de componentes e overrides dark.
   NAO defina variaveis --primary, --background, etc aqui.
   ======================================== */

/* 🎯 Reset e Base */
* {
  box-sizing: border-box;
}

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--background);
  transition: background-color 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 📜 Scrollbar Customizada */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
  opacity: 0.3;
}

*::-webkit-scrollbar-thumb:hover {
  opacity: 0.5;
}

/* 🎨 Menu/Sidebar Styles
   NOTA: NÃO afeta #sidebar-component (autônomo com CSS próprio) */
aside:not(#sidebar-component) {
  background: var(--menu-bg);
  color: var(--menu-text);
  transition: all 0.3s ease;
}

/* Menu Items */
aside .menu-item {
  position: relative;
  color: var(--menu-text);
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 48px;
  display: flex;
  align-items: center;
}

aside .menu-item:hover:not(.menu-item-disabled) {
  background-color: var(--menu-hover);
  transform: translateX(2px);
}

aside .menu-item.active,
aside .menu-item.bg-white\/15 {
  background: var(--menu-active);
}

/* Menu Icons */
aside .menu-item i.bi {
  color: var(--menu-icon);
  transition: color 0.2s;
  flex-shrink: 0;
}

aside .menu-item:hover i.bi,
aside .menu-item.active i.bi {
  color: var(--menu-text);
}

/* Menu Search Input - CORRIGIDO */
aside input[type="text"],
aside input[type="search"] {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--menu-text);
}

aside input[type="text"]:focus,
aside input[type="search"]:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

aside input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* 🌟 Componentes Base */

/* Buttons */
.btn,
button:not(.menu-item) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
}

/* ========================================
   PRESERVAR CORES TAILWIND EM BOTÕES
   Bootstrap .btn define background: transparent que sobrescreve Tailwind.
   Estas regras garantem que botões com bg-* Tailwind mantenham suas cores.
   ======================================== */
.btn.bg-red-600, button.bg-red-600 {
  background-color: rgb(220, 38, 38) !important;
  color: white !important;
}
.btn.bg-red-600:hover, button.bg-red-600:hover,
.btn.hover\:bg-red-700:hover, button.hover\:bg-red-700:hover {
  background-color: rgb(185, 28, 28) !important;
}

.btn.bg-green-600, button.bg-green-600 {
  background-color: rgb(22, 163, 74) !important;
  color: white !important;
}
.btn.bg-green-600:hover, button.bg-green-600:hover,
.btn.hover\:bg-green-700:hover, button.hover\:bg-green-700:hover {
  background-color: rgb(21, 128, 61) !important;
}

.btn.bg-blue-600, button.bg-blue-600 {
  background-color: rgb(37, 99, 235) !important;
  color: white !important;
}
.btn.bg-blue-600:hover, button.bg-blue-600:hover,
.btn.hover\:bg-blue-700:hover, button.hover\:bg-blue-700:hover {
  background-color: rgb(29, 78, 216) !important;
}

.btn.bg-yellow-500, button.bg-yellow-500 {
  background-color: rgb(234, 179, 8) !important;
  color: black !important;
}

.btn.bg-orange-500, button.bg-orange-500 {
  background-color: rgb(249, 115, 22) !important;
  color: white !important;
}

.btn.bg-purple-600, button.bg-purple-600 {
  background-color: rgb(147, 51, 234) !important;
  color: white !important;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Botões secundários no modo escuro */
/* Exclui também classes Tailwind bg-* para não sobrescrever cores personalizadas */
.dark .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-yellow"]):not([class*="bg-purple"]):not([class*="bg-orange"]),
.dark button:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.menu-item):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-yellow"]):not([class*="bg-purple"]):not([class*="bg-orange"]) {
  background-color: #27272A;
  color: #FAFAFA;
  border: 1px solid #3F3F46;
}

.dark .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-yellow"]):not([class*="bg-purple"]):not([class*="bg-orange"]):hover,
.dark button:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.menu-item):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-yellow"]):not([class*="bg-purple"]):not([class*="bg-orange"]):hover {
  background-color: #3F3F46;
}

/* Cards */
.card,
.card-premium {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Cards no modo escuro - força estilos escuros */
.dark .card,
.dark .card-premium {
  background: #18181B !important;
  border-color: #27272A !important;
  color: #FAFAFA !important;
}

/* ==========================================
   🌙 DARK MODE - Override global para bg-white e modais
   Fix: elementos com bg-white ou background:white inline em dark mode
   ========================================== */

/* Tailwind bg-white → dark surface */
.dark .bg-white:not(.wizard-circle-active):not(.wizard-circle-pending) {
  background-color: #18181B !important;
}

/* Modais com fundo escuro - classe utilitária para aplicar em templates */
.dark .dark-modal-surface {
  background-color: #18181B !important;
  color: #FAFAFA !important;
  border-color: #27272A !important;
}

/* Textos hardcoded que ficam invisiveis em dark mode */
.dark .dark-text-auto {
  color: #E5E7EB !important;
}

.dark .dark-text-muted {
  color: #A1A1AA !important;
}

/* Inputs - CORRIGIDO PARA ÍCONES */
.input-group {
  position: relative;
}

.input-group .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.input-group input {
  padding-left: 40px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s ease;
  outline: none;
}

/* ⚠️ IMPORTANTE: Não sobrescrever padding quando houver classes específicas */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]).pr-10,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]).pr-12,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]).pl-10,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]).pl-12 {
  padding: 12px 16px; /* Será sobrescrito pelas regras específicas abaixo */
}

/* Input com ícone à esquerda */
input.has-icon-left {
  padding-left: 40px !important;
}

/* Input com ícone à direita */
input.has-icon-right {
  padding-right: 40px !important;
}

/* ========================================
   🎯 SISTEMA DE PADDING PARA ÍCONES (DEFINITIVO)
   ======================================== */

/* Tailwind pr-10, pr-12 (ícones à direita) */
input.pr-10:not([type="checkbox"]):not([type="radio"]),
textarea.pr-10,
select.pr-10,
.pr-10.form-control {
  padding-right: 2.5rem !important; /* 40px */
}

input.pr-12:not([type="checkbox"]):not([type="radio"]),
textarea.pr-12,
select.pr-12,
.pr-12.form-control {
  padding-right: 3rem !important; /* 48px */
}

/* Tailwind pl-10, pl-12 (ícones à esquerda) */
input.pl-10:not([type="checkbox"]):not([type="radio"]):not([class*="currency"]),
textarea.pl-10:not([class*="currency"]),
select.pl-10:not([class*="currency"]),
.pl-10.form-control:not([class*="currency"]) {
  padding-left: 2.5rem !important; /* 40px */
}

input.pl-12:not([type="checkbox"]):not([type="radio"]):not([class*="currency"]),
textarea.pl-12:not([class*="currency"]),
select.pl-12:not([class*="currency"]),
.pl-12.form-control:not([class*="currency"]) {
  padding-left: 3rem !important; /* 48px */
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Inputs no modo escuro */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark select,
.dark textarea {
  background-color: #18181B;
  border-color: #27272A;
  color: #FAFAFA;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #71717A;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  background-color: #18181B;
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled {
  background-color: #09090B;
  color: #52525B;
  cursor: not-allowed;
}

/* Label styles */
label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
}

/* Tables
   IMPORTANTE: Estas regras ficam em @layer base para que classes Tailwind
   (que rodam em @layer utilities) possam sobrescrever quando necessario.
   Sem @layer, regras unlayered SEMPRE vencem layered no CSS Cascade,
   causando conflito com Tailwind v4 (ex: text-white em tabelas dark-bg).
   Ref: CSS Cascade Layers - https://developer.mozilla.org/en-US/docs/Web/CSS/@layer */
@layer base {
  table {
    width: 100%;
    border-collapse: collapse;
    border-color: var(--border);
  }

  table th {
    background: #F5F8FA;
    color: var(--text);
    font-weight: 600;
    padding: 14px;
    text-align: left;
    border-bottom: 2px solid var(--border);
  }

  .dark table th {
    background: #18181B;
    border-bottom-color: #27272A;
    color: #FAFAFA;
  }

  table td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }

  table tr:hover td {
    background: rgba(var(--primary-rgb), 0.02);
  }

  /* Tabelas no modo escuro */
  .dark table {
    border-color: #27272A;
  }

  .dark table thead {
    background-color: #18181B;
    border-bottom-color: #27272A;
  }

  .dark table td {
    background-color: transparent;
    color: #E5E7EB;
    border-color: #27272A;
  }

  .dark table tbody tr:hover td {
    background-color: #27272A;
  }
}

.dark table tbody tr:nth-child(even) {
  background-color: #0F0F0F;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-primary {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.badge-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

/* Badges no modo escuro */
.dark .badge {
  background-color: rgba(167, 139, 250, 0.15);
  color: #C4B5FD;
  border: 1px solid #3F3F46;
}

.dark .badge-primary {
  background-color: rgba(167, 139, 250, 0.15);
  color: #C4B5FD;
}

.dark .badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6EE7B7;
}

.dark .badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #FCD34D;
}

.dark .badge-error,
.dark .badge-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #FCA5A5;
}

.dark .badge-info {
  background-color: rgba(59, 130, 246, 0.15);
  color: #93C5FD;
}

/* 📱 Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
}

/* Input com ícone - estrutura correta */
.input-icon-group {
  position: relative;
  display: block;
}

.input-icon-group i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 16px;
}

.input-icon-group i.icon-left {
  left: 14px;
  z-index: 10;
}

.input-icon-group i.icon-right {
  right: 14px;
  z-index: 10;
}

.input-icon-group input {
  width: 100%;
}

.input-icon-group input.pl-icon {
  padding-left: 42px !important;
}

.input-icon-group input.pr-icon {
  padding-right: 42px !important;
}

/* CORREÇÃO ADICIONAL: Ícones dentro de containers relativos */
.relative > i.bi,
.relative > .bi {
  z-index: 5;
  pointer-events: none;
}

/* Garantir que inputs dentro de .relative com ícones tenham padding */
.relative:has(> i.bi) input,
.relative:has(> .absolute) input {
  padding-right: 2.5rem !important;
}

/* 🎯 Transições Suaves */
.theme-transitioning * {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* 📊 Components específicos */

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 200px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
}

/* Dropdown no modo escuro */
.dark .dropdown-menu,
.dark [role="menu"] {
  background-color: #18181B;
  border-color: #27272A;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.dark .dropdown-item,
.dark [role="menuitem"] {
  color: #E5E7EB;
}

.dark .dropdown-item:hover,
.dark [role="menuitem"]:hover {
  background-color: #27272A;
  color: #FAFAFA;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  max-width: 500px;
  width: 90%;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

/* Modal no modo escuro */
.dark .modal,
.dark .modal-content {
  background-color: #18181B;
  color: #FAFAFA;
  border-color: #27272A;
}

.dark .modal-header {
  background-color: #18181B;
  border-bottom-color: #27272A;
  color: #FAFAFA;
}

.dark .modal-footer {
  background-color: #18181B;
  border-top-color: #27272A;
}

/* 📱 Responsividade */
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }
  
  .card {
    padding: 16px;
  }
  
  .btn {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    padding: 10px 14px;
    font-size: 16px; /* Evita zoom no iOS */
  }
  
  .input-icon-group input.pl-icon {
    padding-left: 38px;
  }
  
  .input-icon-group i {
    font-size: 18px;
  }
}

/* 🎨 Utilities */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

.bg-primary { background-color: var(--primary); }
.bg-surface { background-color: var(--surface); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }

.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-error { border-color: var(--error); }

/* Shadows */
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Spacing helpers */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }

/* Animations - @keyframes centralizados em _animations.css */
.animate-fadeIn {
  animation: fadeIn 0.3s ease;
}

.animate-slideInUp {
  animation: slideInUp 0.3s ease;
}

/* ==========================================
   🌙 MELHORIAS ADICIONAIS MODO ESCURO
   ========================================== */

/* Textos e Títulos no modo escuro */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: #FAFAFA;
}

.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800 {
  color: #E5E7EB;
}

.dark .text-gray-500 {
  color: #A1A1AA;
}

.dark .text-gray-400 {
  color: #71717A;
}

/* Links no modo escuro */
.dark a:not(.btn):not(.menu-item) {
  color: #C4B5FD;
}

.dark a:not(.btn):not(.menu-item):hover {
  color: #A78BFA;
}

/* Listas no modo escuro */
.dark ul li,
.dark ol li {
  color: #E5E7EB;
}

.dark .list-group-item {
  background-color: #18181B;
  border-color: #27272A;
  color: #FAFAFA;
}

.dark .list-group-item:hover {
  background-color: #27272A;
}

/* Bordas e divisórias no modo escuro */
.dark .border,
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: #27272A;
}

.dark .divide-y > *,
.dark .divide-x > * {
  border-color: #27272A;
}

/* Alertas no modo escuro */
.dark .alert {
  border-color: #27272A;
}

.dark .alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: #93C5FD;
  border-color: rgba(59, 130, 246, 0.3);
}

.dark .alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.3);
}

.dark .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.3);
}

.dark .alert-danger,
.dark .alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Scrollbar no modo escuro */
.dark *::-webkit-scrollbar-track {
  background: #0A0A0A;
}

.dark *::-webkit-scrollbar-thumb {
  background: #3F3F46;
}

.dark *::-webkit-scrollbar-thumb:hover {
  background: #52525B;
}

/* Seleção de texto no modo escuro */
.dark ::selection {
  background-color: rgba(167, 139, 250, 0.3);
  color: #FAFAFA;
}

/* Form helpers no modo escuro */
.dark .form-text,
.dark .help-text,
.dark small {
  color: #A1A1AA;
}

.dark .input-group-text {
  background-color: #27272A;
  border-color: #27272A;
  color: #A1A1AA;
}

/* Checkboxes e Radio buttons no modo escuro */
.dark input[type="checkbox"],
.dark input[type="radio"] {
  border-color: #3F3F46;
  background-color: #18181B;
}

.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked {
  background-color: #A78BFA;
  border-color: #A78BFA;
}

/* Tooltips no modo escuro */
.dark .tooltip,
.dark [role="tooltip"] {
  background-color: #27272A;
  color: #FAFAFA;
  border-color: #3F3F46;
}

/* Footer no modo escuro - Atualizado para tema consistente
   NOTA: NÃO afeta #footer-desktop-component e #footer-mobile-component (autônomos) */
.dark footer:not(#footer-desktop-component):not(#footer-mobile-component) {
  background-color: #0A0A0A !important;
  border-top-color: #27272A !important;
  color: #E5E7EB !important;
}

/* Links e textos do footer em dark mode */
.dark footer:not(#footer-desktop-component):not(#footer-mobile-component) a {
  color: #A78BFA !important; /* purple-400 */
}

.dark footer:not(#footer-desktop-component):not(#footer-mobile-component) a:hover {
  color: #C4B5FD !important; /* purple-300 */
}

.dark footer:not(#footer-desktop-component):not(#footer-mobile-component) p,
.dark footer:not(#footer-desktop-component):not(#footer-mobile-component) span {
  color: #E5E7EB !important;
}

.dark footer:not(#footer-desktop-component):not(#footer-mobile-component) strong {
  color: #FAFAFA !important;
}

/* Bottom Navigation Mobile no modo escuro */
.dark .bottom-nav {
  background-color: #0A0A0A !important;
  border-top-color: #27272A !important;
}

.dark .bottom-nav a,
.dark .bottom-nav button {
  color: #A1A1AA !important;
}

.dark .bottom-nav a:hover,
.dark .bottom-nav button:hover {
  color: #A78BFA !important;
}

/* ========================================
   🌙 REGRAS GLOBAIS DE DARK MODE
   ======================================== */

/* Header desktop no modo escuro
   NOTA: NÃO afeta #header-desktop-component e #header-mobile-component (autônomos) */
.dark header:not(#header-desktop-component):not(#header-mobile-component) {
  background-color: #0A0A0A !important;
  border-bottom-color: #27272A !important;
}

/* Modals e overlays no modo escuro */
.dark .modal-content,
.dark [class*="modal"],
.dark [class*="dropdown"] {
  background-color: #18181B !important;
  border-color: #27272A !important;
  color: #E5E7EB !important;
}

/* Cards e containers no modo escuro - Regra principal em linhas 280-285 */
/* Esta seção mantém seletores adicionais que não estão na regra principal */
.dark [class*="card-"]:not(.card),
.dark .panel,
.dark [class*="container-"] {
  background-color: #18181B !important;
  border-color: #27272A !important;
}

/* Inputs e formulários no modo escuro */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
  background-color: #18181B !important;
  border-color: #27272A !important;
  color: #E5E7EB !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #71717A !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: #A78BFA !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1) !important;
}

/* Tables no modo escuro */
.dark table {
  background-color: #18181B !important;
  border-color: #27272A !important;
}

.dark thead {
  background-color: #0A0A0A !important;
  border-color: #27272A !important;
}

.dark tbody tr {
  border-color: #27272A !important;
}

.dark tbody tr:hover {
  background-color: #27272A !important;
}

/* Breadcrumbs no modo escuro */
.dark nav[aria-label="Breadcrumb"] {
  color: #E5E7EB !important;
}

.dark nav[aria-label="Breadcrumb"] a {
  color: #A78BFA !important;
}

.dark nav[aria-label="Breadcrumb"] a:hover {
  color: #C4B5FD !important;
}

/* Tooltips e popups no modo escuro */
.dark [role="tooltip"],
.dark .tooltip,
.dark [class*="popup"] {
  background-color: #18181B !important;
  border-color: #27272A !important;
  color: #E5E7EB !important;
}

/* Badges e tags no modo escuro */
.dark .badge,
.dark [class*="badge-"],
.dark .tag,
.dark [class*="tag-"] {
  background-color: #27272A !important;
  color: #E5E7EB !important;
}

/* Alerts no modo escuro */
.dark .alert,
.dark [class*="alert-"] {
  border-color: #27272A !important;
}

/* Divisores no modo escuro */
.dark hr,
.dark .divider,
.dark [class*="border-"] {
  border-color: #27272A !important;
}

/* Botões e elementos interativos no modo escuro */
.dark button:not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-yellow"]) {
  background-color: #27272A !important;
  color: #E5E7EB !important;
}

.dark button:hover:not([class*="bg-blue"]):not([class*="bg-purple"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-yellow"]) {
  background-color: #3F3F46 !important;
}

/* Sobrescrever bg-gray-100, bg-gray-800, etc no dark mode */
.dark [class*="bg-gray-100"],
.dark [class*="bg-gray-50"] {
  background-color: #27272A !important;
}

.dark [class*="hover:bg-gray-100"]:hover,
.dark [class*="hover:bg-gray-200"]:hover {
  background-color: #3F3F46 !important;
}

.dark [class*="bg-gray-800"],
.dark [class*="bg-gray-900"] {
  background-color: #18181B !important;
}

.dark [class*="hover:bg-gray-800"]:hover,
.dark [class*="hover:bg-gray-700"]:hover {
  background-color: #27272A !important;
}

/* Texto cinza no dark mode */
.dark [class*="text-gray-500"],
.dark [class*="text-gray-600"],
.dark [class*="text-gray-700"] {
  color: #A1A1AA !important;
}

.dark [class*="text-gray-800"],
.dark [class*="text-gray-900"] {
  color: #E5E7EB !important;
}

/* Links com cores consistentes */
.dark a:not([class*="bg-"]) {
  color: #A78BFA;
}

.dark a:not([class*="bg-"]):hover {
  color: #C4B5FD;
}

/* Sidebar/Menu lateral
   NOTA: NÃO afeta #sidebar-component (autônomo com CSS próprio) */
.dark aside:not(#sidebar-component) {
  background-color: #0A0A0A !important;
  border-color: #27272A !important;
}

/* Menu items hover */
.dark .menu-item:hover,
.dark nav a:hover {
  background-color: rgba(167, 139, 250, 0.1) !important;
}

/* Dropdowns e menus contextuais */
.dark [role="menu"],
.dark [role="listbox"],
.dark .dropdown-menu {
  background-color: #18181B !important;
  border-color: #27272A !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark [role="menuitem"]:hover,
.dark [role="option"]:hover,
.dark .dropdown-item:hover {
  background-color: #27272A !important;
  color: #A78BFA !important;
}

/* Busca global */
.dark #busca-global,
.dark [class*="search"] {
  background-color: #18181B !important;
  border-color: #27272A !important;
}

/* Loading screens e skeletons */
.dark .skeleton,
.dark [class*="skeleton"] {
  background: linear-gradient(90deg, #27272A 25%, #3F3F46 50%, #27272A 75%) !important;
}

/* Scrollbars no dark mode - Definido em linhas 860-868 */

/* Garantir que o background principal seja preto */
.dark body,
.dark main,
.dark [data-dashboard] {
  background-color: #0A0A0A !important;
}

/* Code blocks no modo escuro */
.dark pre,
.dark code {
  background-color: #0F0F0F;
  border-color: #27272A;
  color: #E5E7EB;
}

.dark pre code {
  background-color: transparent;
}

/* Accordions no modo escuro */
.dark .accordion-item {
  background-color: #18181B;
  border-color: #27272A;
}

.dark .accordion-header {
  background-color: #18181B;
  color: #FAFAFA;
}

.dark .accordion-button {
  background-color: #18181B;
  color: #FAFAFA;
}

.dark .accordion-button:hover {
  background-color: #27272A;
}

/* Progress bars no modo escuro */
.dark .progress {
  background-color: #27272A;
}

.dark .progress-bar {
  background-color: #A78BFA;
}

/* Widgets e Dashboard cards no modo escuro */
.dark .widget,
.dark .dashboard-card,
.dark .info-box,
.dark .stats-box,
.dark .metric-card {
  background-color: #18181B;
  border-color: #27272A;
  color: #FAFAFA;
}

.dark .widget-header {
  background-color: #18181B;
  border-bottom-color: #27272A;
  color: #FAFAFA;
}

/* Notificações no modo escuro */
.dark .notification {
  background-color: #18181B;
  border-color: #27272A;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark .notification-unread {
  background-color: rgba(167, 139, 250, 0.05);
}

/* Skeleton loaders no modo escuro */
.dark .skeleton {
  background: linear-gradient(
    90deg,
    #18181B 0%,
    #27272A 50%,
    #18181B 100%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
}

/* @keyframes skeleton-loading - Definido em _animations.css como skeletonLoading */

/* Tags e chips no modo escuro */
.dark .tag,
.dark .chip {
  background-color: #27272A;
  color: #E5E7EB;
  border-color: #3F3F46;
}

/* Hover states no modo escuro */
.dark .hover\:bg-gray-50:hover {
  background-color: #18181B;
}

.dark .hover\:bg-gray-100:hover {
  background-color: #27272A;
}

.dark .hover\:bg-white:hover {
  background-color: #18181B;
}

/* Status indicators no modo escuro */
.dark .status-indicator {
  border-color: #27272A;
}

.dark .status-online {
  background-color: #10B981;
}

.dark .status-offline {
  background-color: #6B7280;
}

.dark .status-busy {
  background-color: #EF4444;
}

/* Transições suaves para mudança de tema */
.dark * {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* ==========================================
   🔧 CORREÇÃO DEFINITIVA: ÍCONES E INPUTS
   Sistema robusto e inteligente v2.0

   📌 IMPORTANTE - MUDANÇA DE ARQUITETURA (2025-10-14):
   ==========================================

   ESTA SEÇÃO FOI MOVIDA PARA: base_form_mobile_fix.css v1.1.0

   MOTIVO DA MUDANÇA:
   - Consolidar TODAS as correções de ícones mobile em um único arquivo
   - Facilitar manutenção (1 arquivo ao invés de 2)
   - Evitar conflitos e duplicação de regras CSS
   - Melhor organização: Desktop (theme-styles.css) vs Mobile (base_form_mobile_fix.css)

   O QUE FOI MOVIDO:
   - Remoção de ícones nativos do browser (👤 @ 🌐 📞)
   - Padding inteligente para ícones customizados (✓ ⚠️)
   - Select com seta SVG customizada
   - Proteção para inputs monetários
   - Todas as regras de responsividade mobile

   ONDE ENCONTRAR AGORA:
   - Arquivo: project/static/css/base_form_mobile_fix.css
   - Seção: "CORREÇÃO MOBILE: ÍCONES NATIVOS E PADDING" (linhas 506-755)
   - Versão: v1.1.0
   - Documentação: MOBILE_FORM_ICONS_FIX_v1.1.md

   ATENÇÃO PARA FUTURAS IAs/DESENVOLVEDORES:
   - NÃO reativar estas regras aqui (causará conflitos)
   - NÃO duplicar código entre os 2 arquivos
   - SEMPRE editar base_form_mobile_fix.css para correções mobile
   - MANTER theme-styles.css apenas para estilos desktop/gerais

   ========================================== */

/* ⚠️ SEÇÃO COMENTADA - VER base_form_mobile_fix.css v1.1.0 */
/*

PROBLEMA RESOLVIDO:
- Ícones de validação (✓ ⚠) sobrepunham o texto digitado
- Falta de padding adequado em inputs com ícones à direita/esquerda
- Conflitos entre classes form-control, pr-10, touchable

SOLUÇÃO:
1. Detecção automática com :has() (browsers modernos)
2. Fallback com seletor de irmão adjacente (~ )
3. Classes explícitas .has-icon-right/.has-icon-left
4. Padding inteligente: 2.75rem (44px) para ícones
5. Proteção para inputs monetários (currency)
6. Responsividade mobile com padding aumentado

COMPATIBILIDADE:
- Chrome 105+, Safari 15.4+, Firefox 121+ (:has)
- Fallback para browsers antigos

*/

/* ⬇️ CÓDIGO ABAIXO FOI MOVIDO PARA base_form_mobile_fix.css - NÃO DESCOMENTAR ⬇️ */
/*
1. ÍCONES: Posicionamento e aparência
.absolute.inset-y-0.right-0,
.absolute.inset-y-0.left-0 {
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
}

.absolute.inset-y-0.right-0 {
  padding-right: 0.75rem;
}

.absolute.inset-y-0.left-0 {
  padding-left: 0.75rem;
}

/* Ícones Bootstrap Icons dentro de containers absolutos - validação de formulários */
.absolute i.bi-exclamation-circle-fill,
.absolute i.bi-check-circle-fill {
  font-size: 16px;
  min-width: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ⬇️ SEÇÃO 2-9: TODO CÓDIGO COMENTADO - VER base_form_mobile_fix.css ⬇️
/* 2. INPUTS COM ÍCONES: Padding automático e inteligente */

/* Método 1: Detectar automaticamente com :has() (Chrome 105+, Safari 15.4+, Firefox 121+) */
/* IMPORTANTE: Excluir email e url dessa regra, eles têm regra própria */
div.relative:has(> .absolute.inset-y-0.right-0) > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="email"]):not([type="url"]),
div.relative:has(> .absolute.inset-y-0.right-0) > textarea {
  padding-right: 2.75rem !important; /* 44px - espaço para ícone */
}

div.relative:has(> .absolute.inset-y-0.left-0) > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="email"]):not([type="url"]):not([class*="currency"]),
div.relative:has(> .absolute.inset-y-0.left-0) > textarea:not([class*="currency"]) {
  padding-left: 2.75rem !important; /* 44px - espaço para ícone */
}

/* Método 2: Fallback para browsers que não suportam :has() */
/* Usar seletor de irmão adjacente - EXCLUINDO email, url, select */
div.relative > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="email"]):not([type="url"]) ~ .absolute.inset-y-0.right-0,
div.relative > textarea ~ .absolute.inset-y-0.right-0 {
  display: flex;
}

/* Quando há .absolute seguido de input, adicionar padding */
div.relative > .absolute.inset-y-0.right-0 ~ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="email"]):not([type="url"]),
div.relative > .absolute.inset-y-0.right-0 ~ textarea {
  padding-right: 2.75rem !important;
}

/* Método 3: Classe explícita .has-icon-right (mais robusto) */
input.has-icon-right:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select.has-icon-right,
textarea.has-icon-right {
  padding-right: 2.75rem !important;
}

input.has-icon-left:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="currency"]),
select.has-icon-left:not([class*="currency"]),
textarea.has-icon-left:not([class*="currency"]) {
  padding-left: 2.75rem !important;
}

/* 3. INPUTS COM CLASSES DE VALIDAÇÃO */
input.border-red-500:not([type="checkbox"]):not([type="radio"]),
input.border-green-500:not([type="checkbox"]):not([type="radio"]),
select.border-red-500,
select.border-green-500,
textarea.border-red-500,
textarea.border-green-500 {
  padding-right: 2.75rem !important;
}

/* 4. FORM-CONTROL: Padding base (pode ser sobrescrito) */
.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="pr-"]):not([class*="pl-"]) {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 5. INPUTS MONETÁRIOS: Proteção especial */
.currency-input-wrapper .form-control,
.currency-input-wrapper input,
input[data-money]:not([type="checkbox"]):not([type="radio"]),
input.currency:not([type="checkbox"]):not([type="radio"]) {
  padding-left: 3.5rem !important;
  padding-right: 0.75rem !important;
}

/* 6. INPUTS MONETÁRIOS: Proteção especial (NÃO MEXER) */
/* Esta seção estava funcionando, manter como está */

/* Evitar ícones nativos do browser */
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* Esconder ícones de autofill do browser em email/url */
input[type="email"]::-webkit-contacts-auto-fill-button,
input[type="url"]::-webkit-contacts-auto-fill-button {
  display: none !important;
}

/* ❌ REMOVIDO: Essas regras estavam estragando campos que funcionavam */

/* 7. RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  /* Aumentar padding para melhor UX touch */
  div.relative:has(> .absolute.inset-y-0.right-0) > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  div.relative:has(> .absolute.inset-y-0.right-0) > select,
  div.relative:has(> .absolute.inset-y-0.right-0) > textarea,
  input.pr-10:not([type="checkbox"]):not([type="radio"]),
  input.touchable.pr-10:not([type="checkbox"]):not([type="radio"]) {
    padding-right: 3rem !important;
  }

  /* Ícones em containers absolutos - manter tamanho padrão */
  .absolute i.bi {
    font-size: inherit;
  }
}

/* 8. REGRA CATCH-ALL: Garantia final de padding para todos os inputs com pr-10 */
/* Esta regra tem máxima especificidade para sobrescrever tudo */
input.form-control.touchable.pr-10:not([type="checkbox"]):not([type="radio"]),
input.form-control.pr-10:not([type="checkbox"]):not([type="radio"]),
.form-control.pr-10:not([type="checkbox"]):not([type="radio"]) {
  padding-right: 2.75rem !important;
}

/* 🎯 CORREÇÃO CIRÚRGICA: REMOVER ÍCONES NATIVOS DO BROWSER */
/* Estes ícones aparecem automaticamente em alguns browsers (Chrome, Edge, Safari) */

/* REMOVER TODOS OS ÍCONES NATIVOS - Técnica robusta */
input.form-control::-webkit-textfield-decoration-container {
  display: none !important;
}

input.form-control::-webkit-inner-spin-button,
input.form-control::-webkit-outer-spin-button,
input.form-control::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
}

/* EMAIL: Remover ícone @ nativo */
input[type="email"].form-control,
input[type="email"].touchable {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
}

/* EMAIL com ícone de validação */
input[type="email"].form-control.touchable.pr-10,
input[type="email"].form-control.pr-10 {
  padding-right: 2.75rem !important;
}

/* URL/Site: Remover ícone 🌐 nativo */
input[type="url"].form-control,
input[type="url"].touchable {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
}

/* TEXT: Remover ícones nativos (👤 em nome, 📞 em telefone) */
input[type="text"].form-control,
input[type="text"].touchable {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
}

/* SELECT: Remover ícone nativo e manter apenas seta */
select.form-control,
select.touchable {
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  /* Adicionar seta customizada */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2.5rem !important; /* Distanciamento à direita para seta */
}

/* 🎯 SELECT COM CLASSE .pl-icon: Ajustar padding esquerdo para não grudar no ícone */
select.pl-icon,
select.form-control.pl-icon,
select.touchable.pl-icon {
  padding-left: 2.75rem !important; /* 44px - espaço para ícone à esquerda */
}

/* SELECT SEM .pl-icon: Padding normal */
select.form-control:not(.pl-icon),
select.touchable:not(.pl-icon) {
  padding-left: 1rem !important; /* 16px - padding normal */
}

/* TEL: Remover ícone 📞 nativo */
input[type="tel"].form-control,
input[type="tel"].touchable {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
}

/* SELECT no modo escuro: seta clara */
.dark select.form-control,
.dark select.touchable {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23E5E7EB' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
}

/* 9. DEBUG: Adicionar borda visual temporária (remover em produção) */
/*
.relative:has(> .absolute.inset-y-0.right-0) > input {
  outline: 2px solid rgba(0, 255, 0, 0.3);
}

.relative:has(> .absolute.inset-y-0.right-0) > input.pr-10 {
  outline: 2px solid rgba(0, 0, 255, 0.3);
}
*/


⬆️ FIM DA SEÇÃO COMENTADA ⬆️ */

/* ==========================================
   📱 ÍCONE CUSTOMIZADO: IMPRESSORA + WHATSAPP
   Ícone híbrido para economizar espaço na interface
   ========================================== */

/* Classe helper para usar o ícone SVG customizado */
.icon-print-whatsapp {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('/static/img/icons/print-whatsapp.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Versão maior para botões */
.icon-print-whatsapp-lg {
  width: 24px;
  height: 24px;
}

/* Versão pequena para uso em tabelas */
.icon-print-whatsapp-sm {
  width: 16px;
  height: 16px;
}

/* Botão com ícone combinado - estilo compacto */
.btn-print-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.btn-print-whatsapp:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.btn-print-whatsapp:active {
  transform: translateY(0);
}

/* Versão dropdown para escolher entre imprimir/WhatsApp */
.btn-print-whatsapp-dropdown {
  position: relative;
  display: inline-block;
}

.btn-print-whatsapp-dropdown .dropdown-menu-print-whatsapp {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  margin-top: 4px;
  padding: 4px;
  z-index: 1000;
  display: none;
}

.btn-print-whatsapp-dropdown:hover .dropdown-menu-print-whatsapp,
.btn-print-whatsapp-dropdown.active .dropdown-menu-print-whatsapp {
  display: block;
}

.dropdown-menu-print-whatsapp .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  color: var(--text);
  text-decoration: none;
}

.dropdown-menu-print-whatsapp .dropdown-item:hover {
  background: var(--background);
}

.dropdown-menu-print-whatsapp .dropdown-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* Modo escuro */
.dark .btn-print-whatsapp-dropdown .dropdown-menu-print-whatsapp {
  background: #18181B;
  border-color: #27272A;
}

.dark .dropdown-menu-print-whatsapp .dropdown-item {
  color: #E5E7EB;
}

.dark .dropdown-menu-print-whatsapp .dropdown-item:hover {
  background: #27272A;
}

/* ==========================================
   🚨 CORREÇÃO URGENTE: ÍCONES NATIVOS MOBILE
   APLICADA EM PRODUÇÃO (2025-10-14 23:30)
   v2.1.0 - ESPECIFICIDADE MÁXIMA
   ========================================== */

/* 🎯 TÉCNICA 1: REMOVER CONTAINER DE DECORAÇÃO (Chrome/Edge/Safari) */
input::-webkit-textfield-decoration-container,
input.form-control::-webkit-textfield-decoration-container,
input.touchable::-webkit-textfield-decoration-container,
.input-icon-group input::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* 🎯 TÉCNICA 2: REMOVER TODOS OS BOTÕES INTERNOS DO BROWSER */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
input::-webkit-calendar-picker-indicator,
input::-webkit-list-button,
input::-webkit-search-cancel-button,
input::-webkit-search-decoration,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* 🎯 TÉCNICA 3: REMOVER ÍCONES DE AUTOFILL/AUTOCOMPLETE */
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  position: absolute !important;
  right: -9999px !important;
  opacity: 0 !important;
}

/* 🎯 TÉCNICA 4: REMOVER ÍCONE NATIVO DE EMAIL (@) */
input[type="email"],
input[type="email"].form-control,
input[type="email"].touchable,
.input-icon-group input[type="email"] {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

input[type="email"]::-webkit-textfield-decoration-container,
input[type="email"]::-webkit-contacts-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
}

/* 🎯 TÉCNICA 5: REMOVER ÍCONE NATIVO DE URL (🌐) */
input[type="url"],
input[type="url"].form-control,
input[type="url"].touchable,
.input-icon-group input[type="url"] {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

input[type="url"]::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
}

/* 🎯 TÉCNICA 6: REMOVER ÍCONE NATIVO DE TEXT (👤) */
input[type="text"],
input[type="text"].form-control,
input[type="text"].touchable,
.input-icon-group input[type="text"] {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

input[type="text"]::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
}

/* 🎯 TÉCNICA 7: REMOVER ÍCONE NATIVO DE TEL (📞) */
input[type="tel"],
input[type="tel"].form-control,
input[type="tel"].touchable,
.input-icon-group input[type="tel"] {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

input[type="tel"]::-webkit-textfield-decoration-container {
  display: none !important;
  visibility: hidden !important;
}

/* 🎯 TÉCNICA 8: SELECT COM SETA CUSTOMIZADA */
select,
select.form-control,
select.touchable,
.input-icon-group select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2.5rem !important;
}

/* SELECT com .pl-icon: espaço para ícone à esquerda */
select.pl-icon,
.input-icon-group select.pl-icon {
  padding-left: 44px !important;
}

/* SELECT modo escuro: seta clara */
.dark select,
.dark select.form-control,
.dark select.touchable {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23E5E7EB' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
}

/* 🎯 TÉCNICA 9: PADDING INTELIGENTE PARA ÍCONES CUSTOMIZADOS (✓ ⚠️) */
/* Inputs dentro de .input-icon-group com .pl-icon */
.input-icon-group input.pl-icon,
.input-icon-group select.pl-icon,
.input-icon-group textarea.pl-icon {
  padding-left: 44px !important;
}

/* Inputs com classes Tailwind pr-10/pr-12 */
input.pr-10:not([type="checkbox"]):not([type="radio"]),
.input-icon-group input.pr-10 {
  padding-right: 3rem !important;
}

input.pr-12:not([type="checkbox"]):not([type="radio"]),
.input-icon-group input.pr-12 {
  padding-right: 3.5rem !important;
}

/* ==========================================
   🧙 WIZARD STEPPER - Theme-aware v2.0
   Usado em: notas_form.html, nfse_form.html
   Approach: CSS custom properties + inline :style
   O inline :style garante que cards SEMPRE renderizam.
   As var() adaptam cores por tema automaticamente.
   ========================================== */

/* === VERDE PREMIUM (default) === */
:root {
  /* Step Ativo */
  --wz-active-bg: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  --wz-active-border: #2563eb;
  --wz-active-shadow: 0 0 0 5px rgba(96,165,250,0.3), 0 10px 30px rgba(59,130,246,0.4);
  --wz-active-glow: 0 0 0 6px rgba(96,165,250,0.3);
  /* Step Concluído */
  --wz-done-bg: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --wz-done-border: #059669;
  --wz-done-shadow: 0 4px 15px rgba(52,211,153,0.35);
  --wz-done-glow: 0 4px 12px rgba(52,211,153,0.4);
  /* Step Pendente */
  --wz-pend-bg: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
  --wz-pend-border: #fbbf24;
  --wz-pend-color: #92400e;
  --wz-pend-shadow: 0 4px 12px rgba(251,191,36,0.25);
  --wz-pend-subtitle: #b45309;
  --wz-pend-icon: #f59e0b;
  --wz-pend-badge-bg: rgba(251,191,36,0.25);
  /* Círculo */
  --wz-circle-bg: white;
  /* Barra de Progresso */
  --wz-track-bg: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 100%);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
}

/* === ESCURO === */
.dark, html.theme-dark {
  --wz-active-bg: linear-gradient(135deg, #312e81 0%, #3730a3 100%);
  --wz-active-border: #4f46e5;
  --wz-active-shadow: 0 0 0 5px rgba(99,102,241,0.2), 0 10px 30px rgba(79,70,229,0.25);
  --wz-active-glow: 0 0 0 6px rgba(99,102,241,0.15);
  --wz-done-bg: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  --wz-done-border: #10b981;
  --wz-done-shadow: 0 4px 15px rgba(16,185,129,0.15);
  --wz-done-glow: 0 4px 12px rgba(16,185,129,0.15);
  --wz-pend-bg: linear-gradient(135deg, #27272a 0%, #1f1f23 100%);
  --wz-pend-border: #3f3f46;
  --wz-pend-color: #a1a1aa;
  --wz-pend-shadow: 0 4px 12px rgba(0,0,0,0.3);
  --wz-pend-subtitle: #71717a;
  --wz-pend-icon: #71717a;
  --wz-pend-badge-bg: rgba(63,63,70,0.5);
  --wz-circle-bg: #18181b;
  --wz-track-bg: linear-gradient(90deg, #27272a 0%, #1f1f23 100%);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #6366f1 100%);
}

/* === ROXO PREMIUM === */
html.theme-roxo {
  --wz-active-bg: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --wz-active-border: #6d28d9;
  --wz-active-shadow: 0 0 0 5px rgba(167,139,250,0.3), 0 10px 30px rgba(124,58,237,0.4);
  --wz-active-glow: 0 0 0 6px rgba(167,139,250,0.3);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #7c3aed 100%);
}

/* === BORDÔ PREMIUM === */
html.theme-bordo {
  --wz-active-bg: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  --wz-active-border: #be123c;
  --wz-active-shadow: 0 0 0 5px rgba(251,113,133,0.3), 0 10px 30px rgba(225,29,72,0.4);
  --wz-active-glow: 0 0 0 6px rgba(251,113,133,0.3);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #e11d48 100%);
}

/* === MALVA PREMIUM === */
html.theme-malva {
  --wz-active-bg: linear-gradient(135deg, #a89ea8 0%, #635768 100%);
  --wz-active-border: #514658;
  --wz-active-shadow: 0 0 0 5px rgba(168,158,168,0.3), 0 10px 30px rgba(99,87,104,0.4);
  --wz-active-glow: 0 0 0 6px rgba(168,158,168,0.3);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #635768 100%);
}

/* === OLIVA PREMIUM === */
html.theme-oliva {
  --wz-active-bg: linear-gradient(135deg, #a8aa99 0%, #636656 100%);
  --wz-active-border: #525548;
  --wz-active-shadow: 0 0 0 5px rgba(168,170,153,0.3), 0 10px 30px rgba(99,102,86,0.4);
  --wz-active-glow: 0 0 0 6px rgba(168,170,153,0.3);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #636656 100%);
}

/* === NÉVOA PREMIUM === */
html.theme-nevoa {
  --wz-active-bg: linear-gradient(135deg, #9eadb3 0%, #59696f 100%);
  --wz-active-border: #49585e;
  --wz-active-shadow: 0 0 0 5px rgba(158,173,179,0.3), 0 10px 30px rgba(89,105,111,0.4);
  --wz-active-glow: 0 0 0 6px rgba(158,173,179,0.3);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #59696f 100%);
}

/* === TAUPE PREMIUM === */
html.theme-taupe {
  --wz-active-bg: linear-gradient(135deg, #aba29c 0%, #675c58 100%);
  --wz-active-border: #564b48;
  --wz-active-shadow: 0 0 0 5px rgba(171,162,156,0.3), 0 10px 30px rgba(103,92,88,0.4);
  --wz-active-glow: 0 0 0 6px rgba(171,162,156,0.3);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #675c58 100%);
}

/* === AZUL PREMIUM === */
html.theme-light {
  --wz-active-bg: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  --wz-active-border: #0369a1;
  --wz-active-shadow: 0 0 0 5px rgba(56,189,248,0.3), 0 10px 30px rgba(2,132,199,0.4);
  --wz-active-glow: 0 0 0 6px rgba(56,189,248,0.3);
  --wz-fill-bg: linear-gradient(90deg, #10b981 0%, #0284c7 100%);
}

/* 🎯 TÉCNICA 10: RESPONSIVIDADE MOBILE */
/* 📱 CORREÇÃO: Aplicar mesmas regras em TODAS as resoluções (desktop E mobile) */
/* Desktop já funciona perfeitamente, agora mobile vai usar exatamente o mesmo CSS */