/* ===================================================================
   01. TEMA GLOBAL (LIGHT / DARK) + PALETA SEMÂNTICA
   =================================================================== */

/* Fonte da marca (logo) */
.app-logo-font {
  font-family: "Comfortaa", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 🌙 Tema Escuro (padrão) */
:root {
  /* Base */
  --bg: #030517;
  --text: #e5e7eb;
  --text-muted: #9ba5c1;
  --border: #1f2937; /*#1e293b;*/

  /* Sidebar */
  --sidebar-bg: #070c1e;
  --sidebar-border: #1f2937;
  --sidebar-text: #e5e7eb;

  /* Cards */
  --card-border: var(--sidebar-border);

  /* Cards / superfícies */
  --card-bg: #070c1e;
  --card-gradient: var(--card-bg);
  --card: var(--card-bg);

  /* Campos (inputs/select/textarea) */
  --field-bg: #020617;
  --field-border: #1f2937;
  --field-text: #e5e7eb;

  /* Títulos / dashboards */
  --text-h1: #f9fafb;
  --text-dashboard: #f9fafb;

  /* Scrollbar */
  --scrollbar-bg: #080a2b;
  --scrollbar-thumb: #818cf8;  /* Indigo-700 */
  --scrollbar-button: #8b5cf6; /* Indigo-500 */

  /* Semânticas — botões / badges */
  --primary: #4f46e5;
  --primary-hover: #6366f1;
  --on-primary: #ffffff;

  --success: #059669;
  --success-hover: #10b981;
  --on-success: #ffffff;

  --danger: #ef4444;
  --danger-soft-bg: rgba(248, 113, 113, 0.18);
  --danger-soft-text: #fecaca;

  --warning: #eab308;
  --warning-soft-bg: rgba(234, 179, 8, 0.20);
  --warning-soft-text: #facc15;

  --chip-bg: rgba(148, 163, 184, 0.16);

  /* Auxiliares para o select premium (nomes estilo Tailwind) */
  --bg-950: #020617;
  --bg-900: #020617;
  --border-800: #1f2937;
  --text-200: #e5e7eb;
  --indigo-600: #4f46e5;
  --indigo-glow: rgba(79, 70, 229, 0.35);
  --blue-royal: #4f46e5;

  /* Hover de superfície */
  --surface-hover: rgba(148, 163, 184, 0.26);
}

/* Força Tailwind .border a usar o tema escuro corretamente */
:root:not(.light) .interest-table-wrapper {
    border-color: var(--border) !important;
}

/* DARK MODE — linhas internas da tabela de INTERESSES */
:root:not(.light) #interest-tbody.divide-y > tr,
:root:not(.light) #interest-tbody.divide-y > * > tr {
    border-top-width: 1px !important;
    border-style: solid !important;
    border-color: var(--border) !important;
}

/* CORES DOS BOTÕES DE NAVEGAÇÃO TEMA DARK */
:root:not(.light) .hover\:bg-slate-700:hover,
:root:not(.light) .hover\:bg-slate-800:hover {
  background-color: #334155 !important; /* slate-700 */
}

/******************************************************/

/* 🌞 Tema Claro */
.light {
  --bg: #f8fafc;
  --text: #0b101d;
  --text-muted: #47446c; /* LINHA PARA AJUSTAR COR DOS MENUS E LABELS */
  /* Mais contraste no light: usar o mesmo tom da divisória do menu */
  --border: var(--sidebar-border);

  /* Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-border: #d1d5db;
  --sidebar-text: #111827;

  /* Cards */
  --card-border: var(--sidebar-border);

  /* Cards */
  --card-bg: #ffffff;
  --card-gradient: #ffffff;
  --card: var(--card-bg);

  /* Campos */
  --field-bg: #f1f5f9;
  --field-border: var(--sidebar-border);
  --field-text: #111827;

  /* Dashboard */
  --text-h1: #0f172a;
  --text-dashboard: #0f172a;

  /* Scrollbar */
  --scrollbar-bg: #e5e7eb;
  --scrollbar-thumb: #9ca3af;
  --scrollbar-button: #6b7280;

  /* Semânticas — ajustadas pra melhor contraste no light */
  --primary: #4f46e5;
  --primary-hover: #3b2ed1;
  --on-primary: #ffffff;

  --success: #059669;
  --success-hover: #047857;
  --on-success: #ffffff;

  --danger: #b91c1c;
  --danger-soft-bg: rgba(248, 113, 113, 0.12);
  --danger-soft-text: #b91c1c;

  --warning: #c27803;
  --warning-soft-bg: rgba(234, 179, 8, 0.12);
  --warning-soft-text: #92400e;

  --chip-bg: rgba(233, 106, 81, 0.12);

  --bg-950: #f8fafc;
  --bg-900: #f1f5f9;
  --border-800: var(--sidebar-border);
  --text-200: #111827;
  --indigo-600: #4f46e5;
  --indigo-glow: rgba(79, 70, 229, 0.3);
  --blue-royal: #4f46e5;

  --surface-hover: rgba(184, 148, 148, 0.18);

  /* ==========================================================
     CONTROLES DO TEMA LIGHT (TONALIDADE + OPACIDADE)
     Ajuste fino aqui sem afetar o tema dark (padrão).
     ========================================================== */
  --lt-ink-rgb: 15 23 42;       /* slate-900 */
  --lt-muted-rgb: 71 85 105;    /* slate-600 */
  --lt-accent-rgb: 79 70 229;   /* indigo-600 */

  /* Cores semânticas (RGB) para light */
  --lt-success-rgb: 16 156 116; /* emerald-500 */
  --lt-success-ink-rgb: 6 95 70; /* emerald-800 */
  --lt-info-rgb: 37 99 235;     /* blue-600 */
  --lt-info-ink-rgb: 30 64 175; /* blue-800 */
  --lt-danger-rgb: 220 38 38;   /* red-600 */
  --lt-danger-ink-rgb: 153 27 27; /* red-800 */
  --lt-warning-rgb: 202 138 4;  /* amber-600 */
  --lt-warning-ink-rgb: 146 64 14; /* amber-800 */

  --lt-border-rgb: 209 213 219;        /* gray-300 (igual a divisória do menu) */
  --lt-border-strong-rgb: 209 213 219; /* gray-300 */

  --lt-surface-0: #ffffff;
  --lt-surface-1: #f8fafc;
  --lt-surface-2: #f1f5f9;
  --lt-surface-3: #e2e8f0;
  --lt-surface-4: #e5e7eb;

  --lt-accent-alpha-strong: 0.95;
  --lt-accent-alpha: 0.85;
  --lt-accent-alpha-soft: 0.72;
  --lt-accent-bg-alpha: 0.08;
  --lt-accent-border-alpha: 0.22;

  /* Alfas para alertas/botões no light (aumente aqui se quiser mais “vivo”) */
  --lt-alert-bg-alpha: 0.14;
  --lt-alert-border-alpha: 0.40;
  --lt-action-bg-alpha: 0.16;
  --lt-action-bg-hover-alpha: 0.26;
  --lt-action-border-alpha: 0.45;

  --lt-divider-alpha: 0.75;
  --lt-shadow-alpha: 0.07;

  --lt-border-weak: rgb(var(--lt-border-rgb) / 1);
  --lt-border-strong: rgb(var(--lt-border-strong-rgb) / 1);
  --lt-accent-color: rgb(var(--lt-accent-rgb) / var(--lt-accent-alpha));
  --lt-accent-color-strong: rgb(var(--lt-accent-rgb) / var(--lt-accent-alpha-strong));
  --lt-accent-bg: rgb(var(--lt-accent-rgb) / var(--lt-accent-bg-alpha));
  --lt-accent-border: rgb(var(--lt-accent-rgb) / var(--lt-accent-border-alpha));

  --lt-hover-bg: var(--lt-surface-3);
  --lt-hover-bg-strong: #adbccc;
  --lt-btn-bg: var(--lt-surface-4);
  --lt-btn-text: #334155;
  --lt-progress-track: #d4d4d4;
  --lt-table-head-bg: var(--lt-surface-3);
}

/* ===================================================================
   02. RESET DE CORES & INTEGRAÇÃO COM TAILWIND (TEXTOS / BORDAS / BG)
   =================================================================== */

/* Aplica variáveis globais */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Troca de tema instantânea (sem efeito componente a componente) */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation: none !important;
}

/* Sidebar respeita tema */
#sidebar {
  background-color: var(--sidebar-bg) !important;
  border-color: var(--sidebar-border) !important;
  color: var(--sidebar-text) !important;
}

/* Evita animação ao aplicar estado salvo do sidebar */
.sidebar-preload #sidebar {
  transition: none !important;
}

/* Área principal */
.app-main {
  background-color: var(--bg) !important;
}

/* =======================
   Textos base (Tailwind)
   ======================= */

/* Todas as variações slate usam texto padrão do tema */
.text-slate-50,
.text-slate-100,
.text-slate-200,
.text-slate-300,
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700,
.text-slate-800,
.text-slate-900,
[class*="text-slate-100"],
[class*="text-slate-200"],
[class*="text-slate-300"],
[class*="text-slate-400"],
[class*="text-slate-500"],
[class*="text-slate-600"],
[class*="text-slate-700"],
[class*="text-slate-800"],
[class*="text-slate-900"] {
  color: var(--text) !important;
}

/* Muted (texto secundário) */
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700 {
  color: var(--text-muted) !important;
}

/* Muito claras → título especial */
.text-slate-50 {
  color: var(--text-h1) !important;
}

/* Headers de tabela e textos muito suaves */
thead th,
.text-slate-300 {
  color: var(--text-muted) !important;
}

/* LIGHT — aumenta contraste de indigos (ex: "Valor Total" e check de "Principal") */
.light .text-indigo-300,
.light .text-indigo-400,
.light .text-indigo-500 {
  color: var(--lt-accent-color) !important;
}
.light .text-indigo-600,
.light .text-indigo-700 {
  color: var(--lt-accent-color-strong) !important;
}

/* LIGHT — Alertas (flash messages) mais legíveis */
.light .bg-green-500\/10 {
  background-color: rgb(var(--lt-success-rgb) / var(--lt-alert-bg-alpha)) !important;
}
.light .border-green-500\/40 {
  border-color: rgb(var(--lt-success-rgb) / var(--lt-alert-border-alpha)) !important;
}
.light .text-green-100,
.light .text-green-200 {
  color: rgb(var(--lt-success-ink-rgb) / 1) !important;
}

.light .bg-blue-500\/10 {
  background-color: rgb(var(--lt-info-rgb) / var(--lt-alert-bg-alpha)) !important;
}
.light .border-blue-500\/40 {
  border-color: rgb(var(--lt-info-rgb) / var(--lt-alert-border-alpha)) !important;
}
.light .text-blue-100,
.light .text-blue-200 {
  color: rgb(var(--lt-info-ink-rgb) / 1) !important;
}

.light .bg-red-500\/10 {
  background-color: rgb(var(--lt-danger-rgb) / var(--lt-alert-bg-alpha)) !important;
}
.light .border-red-500\/40 {
  border-color: rgb(var(--lt-danger-rgb) / var(--lt-alert-border-alpha)) !important;
}
.light .text-red-100,
.light .text-red-200 {
  color: rgb(var(--lt-danger-ink-rgb) / 1) !important;
}

.light .bg-yellow-500\/10 {
  background-color: rgb(var(--lt-warning-rgb) / var(--lt-alert-bg-alpha)) !important;
}
.light .border-yellow-500\/40 {
  border-color: rgb(var(--lt-warning-rgb) / var(--lt-alert-border-alpha)) !important;
}
.light .text-yellow-100,
.light .text-yellow-200 {
  color: rgb(var(--lt-warning-ink-rgb) / 1) !important;
}

/* LIGHT — Status badges e botões de ação (Visualizar/Editar) */
.light .bg-emerald-500\/10 {
  background-color: rgb(var(--lt-success-rgb) / var(--lt-alert-bg-alpha)) !important;
}
.light .border-emerald-500\/40 {
  border-color: rgb(var(--lt-success-rgb) / var(--lt-alert-border-alpha)) !important;
}
.light .text-emerald-300 {
  color: rgb(var(--lt-success-ink-rgb) / 1) !important;
}

.light .bg-blue-500\/10 {
  background-color: rgb(var(--lt-info-rgb) / var(--lt-alert-bg-alpha)) !important;
}
.light .text-blue-300 {
  color: rgb(var(--lt-info-ink-rgb) / 1) !important;
}

.light .bg-green-300\/20 {
  background-color: rgb(var(--lt-success-rgb) / var(--lt-action-bg-alpha)) !important;
}
.light .border-green-300\/40 {
  border-color: rgb(var(--lt-success-rgb) / var(--lt-action-border-alpha)) !important;
}
.light .text-green-200 {
  color: rgb(var(--lt-success-ink-rgb) / 1) !important;
}
.light .hover\:bg-green-300\/30:hover {
  background-color: rgb(var(--lt-success-rgb) / var(--lt-action-bg-hover-alpha)) !important;
}

.light .bg-blue-600\/20 {
  background-color: rgb(var(--lt-info-rgb) / var(--lt-action-bg-alpha)) !important;
}
.light .border-blue-500\/40 {
  border-color: rgb(var(--lt-info-rgb) / var(--lt-action-border-alpha)) !important;
}
.light .hover\:bg-blue-600\/30:hover {
  background-color: rgb(var(--lt-info-rgb) / var(--lt-action-bg-hover-alpha)) !important;
}

/* Cores semânticas de erro/aviso (ex: botões Remover/Desfazer) */
.text-red-300 {
  color: var(--danger-soft-text) !important;
}
.text-yellow-300 {
  color: var(--warning-soft-text) !important;
}

/* =======================
   Bordas Tailwind → tema
   ======================= */

/* Bordas genéricas slate → borda temática */
[class*="border-slate"] {
  border-color: var(--border) !important;
}

/* No LIGHT, muitos componentes (Flowbite/Tailwind) usam border-gray-*. Padroniza no mesmo tom do menu. */
.light [class*="border-gray"] {
  border-color: var(--border) !important;
}

/* Tabs (Flowbite): deixar a linha sob as abas no mesmo tom de divisória no LIGHT */
.light [data-tabs-toggle] button[role="tab"] {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  border-bottom-color: transparent !important; /* evita “linha grossa” sob os botões */
  color: rgb(var(--lt-muted-rgb) / 1) !important;
}

.light [data-tabs-toggle] button[role="tab"]:hover {
  background-color: rgb(var(--lt-accent-rgb) / 0.06) !important;
  color: rgb(var(--lt-ink-rgb) / 1) !important;
  border-bottom-color: rgb(var(--lt-accent-rgb) / 0.35) !important;
}

.light [data-tabs-toggle] button[role="tab"][aria-selected="true"] {
  border-bottom-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Tabs (Flowbite) — DARK: mesmo layout/efeito do light, mantendo paleta dark */
:root:not(.light) [data-tabs-toggle] button[role="tab"] {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  border-bottom-color: transparent !important; /* mantém a linha de base contínua no container */
  color: rgba(226, 232, 240, 0.85) !important; /* slate-200 */
}

/* Hover em item NÃO selecionado (imagem 3 no light → equivalente no dark) */
:root:not(.light) [data-tabs-toggle] button[role="tab"]:hover {
  background-color: rgba(148, 163, 184, 0.10) !important; /* slate suave */
  color: rgba(248, 250, 252, 1) !important; /* slate-50 */
  border-bottom-color: rgba(99, 102, 241, 0.40) !important; /* indigo hover */
}

/* Item selecionado (imagem 1) */
:root:not(.light) [data-tabs-toggle] button[role="tab"][aria-selected="true"] {
  border-bottom-color: var(--primary-hover) !important;
  color: var(--primary-hover) !important;
  background-color: transparent !important;
}

/* Item selecionado com hover (imagem 2) */
:root:not(.light) [data-tabs-toggle] button[role="tab"][aria-selected="true"]:hover {
  background-color: rgba(148, 163, 184, 0.12) !important;
  border-bottom-color: var(--primary-hover) !important;
  color: var(--primary-hover) !important;
}

/* Tabelas seguem o tema */
table,
thead,
tbody,
th,
td {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Cabeçalho da tabela (dark) */
thead th {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-muted) !important;
}

/* Cabeçalho no light (mais claro) */
.light thead th {
  background-color: var(--lt-table-head-bg) !important;
  color: var(--text-muted) !important;
}

/* LIGHT — divisores mais suaves */
.light table th,
.light table td,
.light table,
.light thead,
.light tbody {
  border-color: var(--lt-border-weak) !important;
}

/* LIGHT — corrige Tailwind `divide-y` (linhas entre <tr>)
   Sem isso, tabelas com `divide-y divide-slate-*` podem ficar com divisória escura demais no tema claro. */
.light table .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--lt-border-weak) !important;
}

/* LIGHT — cabeçalho da tabela mais claro */
.light thead th {
  background-color: var(--lt-table-head-bg) !important;
  color: rgb(var(--lt-muted-rgb) / 1) !important;
  border-bottom: 1px solid var(--lt-border-weak) !important;
}

/* =======================
   Backgrounds Tailwind → tema
   ======================= */

/* Cards principais, painéis, etc. */
.bg-slate-900\/60,
.card,
.bg-card {
  background: var(--card-gradient, var(--card)) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
}

/* LIGHT — superfícies com classes tailwind escuras */
.light .bg-slate-950,
.light .bg-slate-950\/80,
.light .bg-slate-950\/60,
.light .bg-slate-950\/40 {
  background-color: var(--sidebar-bg) !important;
  color: var(--text) !important;
}

.light .bg-slate-900,
.light .bg-slate-900\/80,
.light .bg-slate-900\/70,
.light .bg-slate-900\/60,
.light .bg-slate-900\/40 {
  background-color: var(--sidebar-bg) !important;
  color: var(--text) !important;
}

.light .bg-slate-800,
.light .bg-slate-800\/40,
.light .bg-slate-700,
.light .bg-slate-700\/40 {
  background-color: var(--lt-surface-3) !important;
  color: var(--text) !important;
}

/* LIGHT — bordas Tailwind escuras (evita contornos muito fortes no tema claro) */
.light .border-slate-900,
.light .border-slate-800,
.light .border-slate-700,
.light .border-slate-600 {
  border-color: var(--sidebar-border) !important;
}

/* LIGHT — menu ativo/hover em tons neutros */
.light #sidebar .bg-slate-800 {
  background-color: var(--lt-hover-bg) !important;
}

.light #sidebar .text-indigo-300 { /* AJUSTAR COR DO MENU ATIVO NO TEMA LIGHT */
  color: #3b2ce6d2 !important;
}

.light #sidebar a:hover,
.light #sidebar summary:hover {
  background-color: var(--lt-hover-bg) !important;
  color: rgb(var(--lt-ink-rgb) / 1) !important;
}

/* LIGHT — hover de botões (slate) em cinza claro */
.light .hover\:bg-slate-900:hover,
.light .hover\:bg-slate-800:hover,
.light .hover\:bg-slate-700:hover,
.light .hover\:bg-slate-600:hover,
.light .hover\:bg-slate-500:hover {
  background-color: var(--lt-hover-bg) !important;
  color: rgb(var(--lt-ink-rgb) / 1) !important;
}

/* Botão primário (ex: Salvar, Nova oportunidade) */
.bg-indigo-600,
.bg-indigo-500,
.bg-indigo-700 {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
}
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--primary-hover) !important;
}

/* Botões de sucesso (ex: Adicionar interesse/etapa) */
.bg-emerald-600,
.bg-emerald-500 {
  background-color: var(--success) !important;
  color: var(--on-success) !important;
}
.hover\:bg-emerald-500:hover,
.hover\:bg-emerald-600:hover {
  background-color: var(--success-hover) !important;
}

/* Soft-danger (ex: Remover) */
.bg-red-500\/20 {
  background-color: var(--danger-soft-bg) !important;
  color: var(--danger-soft-text) !important;
}

/* Soft-warning (ex: Desfazer) */
.bg-yellow-500\/20 {
  background-color: var(--warning-soft-bg) !important;
  color: var(--warning-soft-text) !important;
}

/* Utilitário opcional para textos de dashboard/indicadores */
.text-dashboard {
  color: var(--text-dashboard) !important;
}

/* ===================================================================
   03. LAYOUT GLOBAL / CONTAINER PRINCIPAL
   =================================================================== */

/* MOBILE — Aproveitamento máximo */
@media (max-width: 767px) {
  .app-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: calc(var(--app-mobile-header-h, 3.25rem) + env(safe-area-inset-top) + 14px) !important;
    padding-bottom: 18px !important;
  }
}

/* DESKTOP — Igual dashboard */
@media (min-width: 768px) {
  .app-main {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* ===================================================================
   04. SIDEBAR RESPONSIVO / TOGGLE
   =================================================================== */

/* Estado padrão: sidebar visível */
.sidebar {
  transition: width 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* DESKTOP: recolhido (classe aplicada no <body>) */
body.sidebar-collapsed .sidebar {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

body.sidebar-collapsed .sidebar * {
  opacity: 0;
}

/* Quando recolhe, o container principal pode ganhar mais espaço */
body.sidebar-collapsed .main-with-sidebar {
  margin-left: 0;
}

/* MOBILE: sidebar vira overlay */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    max-width: 80%;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    background: var(--sidebar-bg) !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.75);
  }

  /* Quando abrir o menu no mobile */
  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Overlay escuro atrás do menu mobile */
  .sidebar-backdrop {
    display: none;
  }

  body.sidebar-mobile-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    z-index: 40;
  }

  /* Backdrop do layout atual (id dedicado, sem depender da classe .sidebar-backdrop) */
  #sidebarBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    z-index: 45;
  }

  body.sidebar-mobile-open #sidebarBackdrop {
    display: block;
  }
}

/* ===================================================================
   05. MENU COLAPSADO (SIDEBAR SHRINK)
   =================================================================== */

/* Sidebar colapsado (w-16) */
#sidebar.w-16 #sidebarFooter {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Esconder textos quando colapsado */
#sidebar.w-16 .sidebar-full {
  display: none !important;
}

/* No modo shrink: ocultar módulos e mostrar apenas ícones dos submenus */
#sidebar.w-16 details > summary {
  display: none !important;
}

#sidebar.w-16 details > div {
  margin-left: 0 !important;
  padding-left: 0 !important;
  /* Garante que os links apareçam mesmo se o <details> estiver fechado */
  display: block !important;
}

#sidebar.w-16 .sidebar-label {
  display: none !important;
}

#sidebar.w-16 nav a {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  position: relative !important;
}

#sidebar.w-16 nav a .menu-icon {
  margin-right: 0 !important;
}

/* Tooltip flutuante do menu colapsado (controlado via JS) */
.sidebar-tooltip {
  position: fixed;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  z-index: 9999;
  transition: opacity 0.12s ease;
}

.sidebar-tooltip.is-visible {
  opacity: 1;
}

/* Botão sair ocupa toda largura no modo shrink */
#sidebar.w-16 #logoutBtn {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  padding: 0.6rem !important;
  gap: 0 !important;
}

/* Mostrar apenas o ícone no colapso */
#sidebar.w-16 #logoutBtn .logout-label {
  display: none !important;
}

#sidebar.w-16 #logoutBtn .menu-icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* Centralizar tema no modo colapsado */
#sidebar.w-16 #themeToggleDesktop {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  padding: 0.6rem 0 !important;
  margin: 0 auto !important;
  font-size: 20px !important;
}

/* Centralizar ícone do menu no sidebar colapsado */
#sidebar.w-16 #collapseBtn {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0.6rem 0 !important;
  font-size: 20px !important;
}

/* ===================================================================
   06. INPUTS PREMIUM / CAMPOS DE FORMULÁRIO
   =================================================================== */

/* Muitos templates usam <input> sem atributo type (default = text).
  Inclua input:not([type]) para aplicar o tema corretamente no light/dark. */
input:not([type]),
input[type="text"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select:not(.tw-select-button) {
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--field-text) !important;
  padding: 8px 12px !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  transition: 0.18s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
}

/* ===================================================================
   LOGIN — OVERRIDES (inputs sempre no tom dark)
   Requisito: manter a cor do “tema dark” mesmo no light.
   =================================================================== */

:root {
  --login-dark-bg: #3b2ed1; /* navy do tema dark (mesmo tom do screenshot) */
  --login-dark-border: #3b2ed1;
  --login-dark-text: #e5e7eb;
  --login-dark-muted: #c0c3cc;
}

input.login-input,
input.login-input:hover,
input.login-input:active,
input.login-input:disabled,
input.login-input[readonly] {
  background: #ffffff !important;
  border: 2px solid var(--login-dark-border) !important;
  box-shadow: none !important;
  color: #0f172a !important;
  caret-color: #0f172a !important;
  color-scheme: light;
}

input.login-input:focus,
input.login-input:focus-visible {
  background: #ffffff !important;
  border: 2px solid var(--login-dark-border) !important;
  box-shadow: 0 0 0 1px var(--login-dark-border) !important;
  outline: none !important;
}

input.login-input::placeholder {
  color: #94a3b8 !important;
}

/* Chrome/Edge/Safari autofill pode “pintar” o fundo; forçar BRANCO (sem variação) */
input.login-input:autofill,
input.login-input:-internal-autofill-selected,
input.login-input:-webkit-autofill,
input.login-input:-webkit-autofill:hover,
input.login-input:-webkit-autofill:focus,
input.login-input:-webkit-autofill:active {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  border: 2px solid var(--login-dark-border) !important;
  border-radius: 10px !important;

  /* Preencher o fundo via inset shadow (mais confiável que background em autofill) */
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;

  /* Evita variações de “amarelo/bege” em alguns builds do Chromium */
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  filter: none !important;
  color-scheme: light !important;

  /* Truque clássico: impede o browser de repintar o autofill */
  transition: background-color 9999s ease-out 0s !important;
}

/* Firefox autofill */
input.login-input:-moz-autofill {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid var(--login-dark-border) !important;
  box-shadow: 0 0 0 1px var(--login-dark-border), 0 0 0px 1000px #ffffff inset !important;
}

/* Botão do login no mesmo tom do input */
.login-btn {
  background-color: var(--login-dark-bg) !important;
  color: var(--login-dark-text) !important;
}

.login-btn:hover {
  filter: brightness(1.08);
}

/* Checkbox do login na mesma cor do botão
   Motivo: em alguns browsers/estilos, `accent-color` não aplica como esperado.
   Aqui usamos um estilo determinístico apenas para o login. */
input.login-checkbox[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* slate-300 */
  border-radius: 0.25rem !important;
  display: inline-grid !important;
  place-content: center !important;
  transition: 0.18s ease !important;
}

input.login-checkbox[type="checkbox"]:checked,
input.login-checkbox[type="checkbox"]:indeterminate {
  background-color: var(--login-dark-bg) !important;
  border-color: var(--login-dark-bg) !important;
}

input.login-checkbox[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M11.5 3.75L5.75 10.5L2.75 7.5' fill='none' stroke='%23E5E7EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

input.login-checkbox[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7h8' fill='none' stroke='%23E5E7EB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

.login-title {
  color: var(--login-dark-bg) !important;
}

@media (max-width: 1023px) {
  .login-hero-copyright {
    display: none !important;
  }

  /* Mobile: mais respiro entre logo, título e texto (conforme screenshot) */
  .login-hero-inner {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  .login-hero-copy {
    margin-top: 2.75rem !important;
    margin-bottom: 0 !important;
  }

  .login-hero-subtext {
    margin-top: 2.25rem !important;
  }
}

/* Checkboxes / radios — padrão global do projeto
  - Marcado: azul do projeto (var(--primary))
  - Hover/Focus: ring com var(--indigo-glow)
  - Light: não sobrescrever o fundo no :checked (senão o check perde contraste)
  Observação: evite classes Tailwind de cor no próprio <input> que briguem com o tema. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary) !important;
  transition: 0.18s ease !important;
  cursor: pointer !important;
}

/* Garante contraste adequado no light mesmo quando o input tem classes Tailwind
   como `bg-slate-900` e `border-slate-700`. */
.light input[type="checkbox"],
.light input[type="radio"] {
  border-color: var(--sidebar-border) !important;
}

/* Unchecked: mantém fundo claro para não “sumir” no card */
.light input[type="checkbox"]:not(:checked):not(:indeterminate),
.light input[type="radio"]:not(:checked) {
  background-color: var(--sidebar-bg) !important;
}

/* Checked/indeterminate: força preenchimento azul seguindo a paleta do projeto */
.light input[type="checkbox"]:checked,
.light input[type="checkbox"]:indeterminate,
.light input[type="radio"]:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Hover/focus premium para checkbox/radio (seguir padrão do tema dark) */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--indigo-glow) !important;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--indigo-glow) !important;
}

/* No light, ao passar o mouse no checkbox desmarcado, não “acinzentar” o fundo */
.light input[type="checkbox"]:hover:not(:checked):not(:indeterminate),
.light input[type="radio"]:hover:not(:checked) {
  background-color: var(--sidebar-bg) !important;
}

.light input[type="checkbox"]:hover:checked,
.light input[type="checkbox"]:hover:indeterminate,
.light input[type="radio"]:hover:checked {
  background-color: var(--primary) !important;
}

/* Evita animação "deslizando" do ícone de data ao trocar tema/carregar página */
input[type="date"] {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

/* ===================================================================
   Ícone do calendário (input[type=date]) para DARK e LIGHT
   - Usa o mesmo desenho em ambos os temas, mudando só a cor.
   =================================================================== */

/* Faz o browser renderizar controles nativos (ícones/setas/spinners) no tema correto */
:root:not(.light) input,
:root:not(.light) select,
:root:not(.light) textarea {
  color-scheme: dark;
}

.light input,
.light select,
.light textarea {
  color-scheme: light;
}

/* 1) Esconde o ícone nativo de data (evita ícones diferentes por browser) */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark input[type="month"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  -webkit-appearance: none !important;
}

html.light input[type="date"]::-webkit-calendar-picker-indicator,
html.light input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.light input[type="month"]::-webkit-calendar-picker-indicator,
html.light input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  -webkit-appearance: none !important;
}

/* 2) Ícone SVG branco no tema escuro */
html.dark input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='3.75' width='10.5' height='9.5' rx='1.25'/%3E%3Cpath d='M5 2.5v2M11 2.5v2M3 6.5h10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 10px center !important;
  background-size: 16px 16px !important;
  padding-left: 32px !important; /* espaço interno para o ícone à esquerda */
}

/* 3) Mesmo ícone no tema claro, só mudando a cor (mais escura) */
html.light input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='3.75' width='10.5' height='9.5' rx='1.25'/%3E%3Cpath d='M5 2.5v2M11 2.5v2M3 6.5h10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 10px center !important;
  background-size: 16px 16px !important;
  padding-left: 32px !important; /* espaço interno para o ícone à esquerda */
}

/* Textarea não pode ter height fixa */
textarea {
  height: auto !important;
  min-height: 80px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Hover */
input:not(.login-input):not([type="checkbox"]):not([type="radio"]):hover,
textarea:hover,
select:hover:not(.tw-select-button) {
  background-color: var(--field-bg) !important;
  border-color: var(--primary) !important;
}

/* Focus */
input:not(.login-input):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus:not(.tw-select-button) {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--indigo-glow) !important;
  background-color: var(--field-bg) !important;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: #64748b !important;
}

/* Desabilitados (mantidos com leve transparência) */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* ===================================================================
   07. SELECT PREMIUM (Tailwind-like)
   =================================================================== */

.tw-select {
  position: relative;
  font-size: 13px;
  width: 100%;
  margin-top: 4px;
}

.tw-select-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  color: var(--field-text);
  cursor: pointer;
  transition: 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  min-height: 40px;
}

.tw-select-button:hover {
  border-color: var(--primary);
  background: var(--field-bg);
}

.tw-select.open .tw-select-button,
.tw-select-button:focus-visible {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--indigo-glow, rgba(79, 70, 229, 0.35)) !important;
  background-color: var(--field-bg) !important;
  outline: none !important;
}

.tw-select-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tw-select-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  padding: 6px 0;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  z-index: 2000;
}

.tw-select.open .tw-select-menu {
  display: block;
}

.tw-select-option {
  width: 100%;
  text-align: left;
  padding: 10px 36px 10px 14px;
  border: none;
  background: transparent;
  color: var(--text-200, var(--text));
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}

.tw-select-option:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.tw-select-option.is-selected {
  background: var(--surface-hover) !important;
  color: var(--text-200, var(--text)) !important;
}

.tw-select-option.is-selected::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.tw-select-option.is-selected:hover {
  background: var(--surface-hover) !important;
  color: var(--text-200, var(--text)) !important;
}

.tw-select-option[disabled],
.tw-select-option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.tw-select-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Em alguns browsers, o select nativo ainda "reserva" espaço em layout mobile (cards).
   Força display:none nas tabelas de interesses/etapas para não aparecer um campo vazio. */
.interest-table-wrapper select.tw-select-native,
.lines-table-wrapper select.tw-select-native {
  display: none !important;
}

/* Evita scrollbars indevidas nas tabelas de interesse/etapas */
.interest-table-wrapper,
.lines-table-wrapper {
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* Tabela de interesses: colunas fixas e alinhadas */
.interest-table {
  table-layout: fixed !important;
  width: 100% !important;
}

.interest-table th:nth-child(1),
.interest-table td:nth-child(1) {
  width: 70% !important;
}

.interest-table th:nth-child(2),
.interest-table td:nth-child(2) {
  width: 15% !important;
  text-align: center !important;
}

.interest-table th:nth-child(3),
.interest-table td:nth-child(3) {
  width: 15% !important;
  text-align: right !important;
}

.interest-table td:nth-child(1) .tw-select {
  width: 100% !important;
}

/* ===================================================================
   08. INTERESSES & ETAPAS (LAYOUT MOBILE COMO CARDS)
   =================================================================== */

@media (max-width: 767px) {

  /* ---------- INTERESSES ---------- */

  .interest-table-wrapper {
    border: none !important;
    overflow-x: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .interest-table {
    display: block !important;
    width: 100% !important;
  }

  .interest-table thead {
    display: none !important;
  }

  #interest-tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 4px !important;
  }

  /* Cada linha vira um card */
  .interest-row {
    display: block !important;
    padding: 0.75rem 0.9rem !important;
    border-radius: 0.75rem !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important;
  }

  .interest-row + .interest-row {
    margin-top: 1rem !important;
  }

  /* Remove linha divisória (igual etapa) */
  .interest-row + .interest-row::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 0.9rem !important;
    right: 0.9rem !important;
    height: 0px !important;
    background: var(--border);
    opacity: 0 !important;
  }

  .interest-row td {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.2rem 0 !important;
    text-align: left !important;
  }

  .interest-row td[data-label]::before {
    content: attr(data-label) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }

  .interest-row td:last-child {
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 0.35rem;
    margin-top: 0.4rem;
  }

  .interest-row input,
  .interest-row select:not(.tw-select-button) {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--field-text) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .interest-row select {
    width: 100% !important;
    min-width: unset !important;
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--field-text) !important;
    box-shadow: none !important;
  }

  /* ---------- ETAPAS ---------- */

  .lines-table-wrapper {
    border: none !important;
    overflow-x: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .lines-table {
    display: block !important;
    width: 100% !important;
  }

  .lines-table thead {
    display: none !important;
  }

  #lines-tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 4px !important;
  }

  .line-row {
    display: block !important;
    padding: 0.75rem 0.9rem !important;
    border-radius: 0.75rem !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important;
  }

  .line-row + .line-row {
    margin-top: 1rem;
  }

  .line-row + .line-row::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0.9rem;
    right: 0.9rem;
    height: 0px;
    background: var(--border);
    opacity: 0.8;
  }

  .line-row td {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.2rem 0 !important;
    text-align: left !important;
  }

  .line-row td[data-label]::before {
    content: attr(data-label) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }

  .line-row td:last-child {
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 0.35rem;
    margin-top: 0.4rem;
  }

  .line-row td:last-child::before {
    content: "" !important;
  }

  .line-row input,
  .line-row select {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--field-text) !important;
    box-shadow: none !important;
  }
}

/* ===================================================================
   09. ESTADO DE REMOÇÃO (INTERESSES / ETAPAS)
   =================================================================== */

.interest-row.removed,
.line-row.removed {
  opacity: 0.45;
  filter: grayscale(1);
  pointer-events: none;
}

.interest-row.removed .undo-interest-btn,
.line-row.removed .undo-btn {
  pointer-events: all;
  opacity: 1;
  filter: none;
}

/* ===================================================================
   10. DASHBOARD — LISTA DE OPORTUNIDADES (MOBILE)
   =================================================================== */

@media (max-width: 767px) {

  /* Remove comportamento de tabela */
  .opps-table {
    display: block !important;
    width: 100% !important;
  }

  .opps-table thead {
    display: none !important;
  }

  .opps-tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 0px !important;
  }

  /* Cada registro vira um card */
  .op-row {
    position: relative;
    display: block !important;
    background: var(--card-bg) !important;
    border: 0px solid var(--border) !important;
    border-radius: 0rem;
    padding: 1rem 1rem;
    margin-bottom: 0px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
  }

  .op-row + .op-row {
    margin-top: 0rem;
  }

  .op-row + .op-row::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1rem;
    right: 1rem;
    height: 0.1rem;
    background: var(--border);
    opacity: 1;
  }

  .op-row td {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 6px 0 !important;
    text-align: left !important;
  }

  .op-row td[data-label]::before {
    content: attr(data-label);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
  }

  .op-row td:last-child {
    flex-direction: column !important;
    gap: 0.4rem !important;
    margin-top: 0.6rem !important;
    width: 100% !important;
  }

  .op-row td:last-child a,
  .op-row td:last-child button {
    width: 100% !important;
    display: block !important;
  }

  /* Remove card externo do bloco no mobile */
  .opps-wrapper,
  .opps-container,
  .opps-table-wrapper,
  .w-full.border.rounded-xl {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* LIGHT — divisor mais suave entre cards mobile */
@media (max-width: 767px) {
  .light .op-row + .op-row::before {
    background: rgb(var(--lt-border-strong-rgb) / var(--lt-divider-alpha)) !important;
  }
}

/* Ajustes de STATUS / PERCENTUAL nos cards mobile */
@media (max-width: 767px) {

  .op-row td[data-label="Status"]::before {
    text-align: left !important;
    align-self: flex-start !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .op-row td[data-label="Status"] {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .op-status-badge {
    margin-top: 2px !important;
  }

  .op-row td[data-label="Percentual"] {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .op-percent-bar,
  .op-progress {
    margin-left: 0 !important;
  }
}

/* LIGHT — bordas na tabela de oportunidades */
.light .opps-table td,
.light .opps-table th {
  border-color: var(--lt-border-strong) !important;
}

.light .opps-table tbody tr {
  border-bottom: 1px solid var(--lt-border-strong) !important;
}

/* LIGHT — remove linha duplicada no último item */
.light .opps-table tbody tr:last-child {
  border-bottom: none !important;
}

@media (max-width: 767px) {
  .light .opps-table tbody tr {
    border-bottom: 0px !important;
  }
}

/* ===================================================================
   10.0 DOCUMENTOS — PADRÃO DE LABELS
   - Todas as labels das páginas de documentos em negrito
   - Cor seguindo o padrão mobile atual
   =================================================================== */

#quotation-form label,
#order-form label,
#quotation-form .doc-field-label,
#order-form .doc-field-label {
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

#quotation-form [class*="text-[10px]"][class*="uppercase"],
#quotation-form [class*="text-[11px]"][class*="uppercase"],
#order-form [class*="text-[10px]"][class*="uppercase"],
#order-form [class*="text-[11px]"][class*="uppercase"] {
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

.crm-page label,
.crm-page p.uppercase[class*="text-[11px]"],
.crm-page h2.uppercase {
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  #quotation-form td[data-label]::before,
  .doc-row td[data-label]::before {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
  }
}

/* ===================================================================
   10.1 LISTAGENS SAP — COTAÇÕES / PEDIDOS / NOTAS / REMESSAS (MOBILE)
   Mesmo padrão do dashboard: linha vira card com labels via data-label.
   =================================================================== */

@media (max-width: 767px) {

  /* Remove comportamento de tabela */
  .docs-table {
    display: block !important;
    width: 100% !important;
  }

  .docs-table thead {
    display: none !important;
  }

  .docs-tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 0px !important;
  }

  /* Cada registro vira um card */
  .doc-row {
    position: relative;
    display: block !important;
    background: var(--card-bg) !important;
    border: 0px solid var(--border) !important;
    border-radius: 0rem;
    padding: 1rem 1rem;
    margin-bottom: 0px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
  }

  .doc-row + .doc-row::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1rem;
    right: 1rem;
    height: 0.1rem;
    background: var(--border);
    opacity: 1;
  }

  .doc-row td {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 6px 0 !important;
    text-align: left !important;
  }

  .doc-row td[data-label]::before {
    content: attr(data-label);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-muted) !important;
    font-weight: 700;
    margin-bottom: 4px;
  }

  /* Ações: botões/links full-width */
  .doc-row td:last-child {
    flex-direction: column !important;
    gap: 0.4rem !important;
    margin-top: 0.6rem !important;
    width: 100% !important;
  }

  .doc-row td:last-child a,
  .doc-row td:last-child button {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    font-size: 0.9rem !important;
  }

  .op-row td:last-child a,
  .op-row td:last-child button {
    font-size: 0.9rem !important;
  }

  /* Mantém o contorno do container no mobile (mesmo padrão das oportunidades).
     A tabela já vira lista de cards via `.doc-row`, então não precisa “remover” a borda do bloco. */
}

/* LIGHT — divisor mais suave entre cards mobile */
@media (max-width: 767px) {
  .light .doc-row + .doc-row::before {
    background: rgb(var(--lt-border-strong-rgb) / var(--lt-divider-alpha)) !important;
  }
}

/* LIGHT — bordas na tabela (desktop) */
.light .docs-table td,
.light .docs-table th {
  border-color: var(--lt-border-strong) !important;
}

/* Badges de status (listagens SAP) — mantém aparência consistente em light/dark */
.doc-status-badge {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Badge de status das ETAPAS (oportunidades): light deve ficar mais "clean" (imagem 1)
   e dark mais "neon" (imagem 2). */
.line-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}

:root:not(.light) .line-status-badge.is-open {
  background-color: rgb(16 185 129 / 0.10);   /* emerald-500/10 */
  border-color: rgb(16 185 129 / 0.40);       /* emerald-500/40 */
  color: rgb(110 231 183 / 1);                /* emerald-300 */
}

:root:not(.light) .line-status-badge.is-closed {
  background-color: rgb(239 68 68 / 0.10);    /* red-500/10 */
  border-color: rgb(239 68 68 / 0.40);        /* red-500/40 */
  color: rgb(252 165 165 / 1);                /* red-300 */
}

.light .line-status-badge.is-open {
  background-color: rgb(var(--lt-success-rgb) / 0.08);
  border-color: rgb(var(--lt-success-rgb) / 0.35);
  color: rgb(var(--lt-success-ink-rgb) / 1);
}

.light .line-status-badge.is-closed {
  background-color: rgb(var(--lt-danger-rgb) / 0.08);
  border-color: rgb(var(--lt-danger-rgb) / 0.35);
  color: rgb(var(--lt-danger-ink-rgb) / 1);
}

@media (max-width: 767px) {
  .doc-status-badge {
    align-self: flex-start;
  }
}

/* Light: melhora contraste do texto dentro do badge */
.light .doc-status-badge.text-emerald-300 {
  color: rgb(5 122 85) !important; /* emerald-700 */
}

.light .doc-status-badge.text-red-300 {
  color: rgb(185 28 28) !important; /* red-700 */
}

/* Light: status Aberto/Aberta em azul mais forte (#4378EA) */
.light .doc-status-badge.text-sky-300 {
  color: #4378EA !important;
}

.light .doc-status-badge[class*="bg-sky-500/10"] {
  background-color: rgb(67 120 234 / 0.10) !important;
}

.light .doc-status-badge[class*="border-sky-500/40"] {
  border-color: rgb(67 120 234 / 0.45) !important;
}

/* ===================================================================
   11. SCROLLBAR GLOBAL
   =================================================================== */

/* Scrollbar (Firefox + WebKit) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

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

*::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

/* ===================================================================
   FORM / CONTENT PANEL — mesmo estilo do card da visualização
   =================================================================== */

.panel {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* leve profundidade */
}

/* Light mode - destaque suave */
.light .panel {
  background: var(--lt-surface-0) !important;
  border-color: var(--lt-border-strong) !important;
  box-shadow: 0 2px 6px rgb(0 0 0 / var(--lt-shadow-alpha));
}

/* ==========================================
   PROGRESS BAR — fundo e preenchimento reais
   ========================================== */

.progress-track {
  background-color: var(--progress-track, #1e293b) !important; /* slate-800 dark */
  border-radius: 999px;
}

.progress-fill {
  background-color: var(--progress-fill, var(--primary)) !important;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

/* Tema claro */
.light .progress-track {
  background-color: var(--lt-progress-track) !important;
}

.light .progress-fill {
  background-color: var(--primary) !important;
}

/* ==========================================
   BOTOES FIX COLORS — Opacidade e cores
   ========================================== */

/* Botões na coluna "Ações" (não aplicar em links da coluna #/seq) */
.light .opps-table .op-row td:last-child button,
.light .opps-table .op-row td:last-child a {
  background: var(--lt-accent-bg) !important;
  color: var(--lt-accent-color-strong) !important;
  border: 1px solid var(--lt-accent-border) !important;
}

.light .docs-table .doc-row td:last-child button,
.light .docs-table .doc-row td:last-child a {
  background: var(--lt-accent-bg) !important;
  color: var(--lt-accent-color-strong) !important;
  border: 1px solid var(--lt-accent-border) !important;
}

/* Exceção: botão PDF deve ser vermelho */
.light .docs-table .doc-row td:last-child a.doc-action-pdf {
  background: rgb(220 38 38 / 0.10) !important; /* red-600/10 */
  color: rgb(220 38 38 / 1) !important; /* red-600 */
  border-color: rgb(239 68 68 / 0.45) !important; /* red-500/45 */
}

.light .docs-table .doc-row td:last-child a.doc-action-pdf:hover {
  background: rgb(220 38 38 / 0.18) !important;
}

:root:not(.light) .opps-table .op-row td:last-child button,
:root:not(.light) .opps-table .op-row td:last-child a {
  background: rgba(99, 102, 241, 0.15) !important; /* leve indigo */
  color: var(--primary) !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
}

:root:not(.light) .docs-table .doc-row td:last-child button,
:root:not(.light) .docs-table .doc-row td:last-child a {
  background: rgba(99, 102, 241, 0.15) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
}

/* Exceção (dark): botão PDF vermelho */
:root:not(.light) .docs-table .doc-row td:last-child a.doc-action-pdf {
  background: rgb(239 68 68 / 0.10) !important; /* red-500/10 */
  color: rgb(252 165 165 / 1) !important;      /* red-300 */
  border-color: rgb(239 68 68 / 0.40) !important; /* red-500/40 */
}

:root:not(.light) .docs-table .doc-row td:last-child a.doc-action-pdf:hover {
  background: rgb(239 68 68 / 0.18) !important;
}

/* Modo: AÇÕES COMO TEXTO (sem pill) — documentos e oportunidades */
.light .docs-table.docs-actions-text .doc-row td:last-child a,
.light .docs-table.docs-actions-text .doc-row td:last-child button,
.light .opps-table.opps-actions-text .op-row td:last-child a,
.light .opps-table.opps-actions-text .op-row td:last-child button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

:root:not(.light) .docs-table.docs-actions-text .doc-row td:last-child a,
:root:not(.light) .docs-table.docs-actions-text .doc-row td:last-child button,
:root:not(.light) .opps-table.opps-actions-text .op-row td:last-child a,
:root:not(.light) .opps-table.opps-actions-text .op-row td:last-child button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.light .docs-table.docs-actions-text .doc-row td:last-child a:hover,
.light .opps-table.opps-actions-text .op-row td:last-child a:hover,
:root:not(.light) .docs-table.docs-actions-text .doc-row td:last-child a:hover,
:root:not(.light) .opps-table.opps-actions-text .op-row td:last-child a:hover {
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
  opacity: 0.9;
}

/* Cores dos links de ação (docs) */
.light .docs-table.docs-actions-text .doc-row td:last-child a.doc-action-view {
  color: var(--lt-accent-color-strong) !important;
}

:root:not(.light) .docs-table.docs-actions-text .doc-row td:last-child a.doc-action-view {
  color: var(--primary) !important;
}

.light .docs-table.docs-actions-text .doc-row td:last-child a.doc-action-pdf {
  color: rgb(220 38 38 / 1) !important; /* red-600 */
}

:root:not(.light) .docs-table.docs-actions-text .doc-row td:last-child a.doc-action-pdf {
  color: rgb(252 165 165 / 1) !important; /* red-300 */
}

/* Cores dos links de ação (oportunidades) */
.light .opps-table.opps-actions-text .op-row td:last-child a.op-action-view {
  color: var(--lt-accent-color-strong) !important;
}

.light .opps-table.opps-actions-text .op-row td:last-child a.op-action-edit {
  color: #eb5b13 !important;
}

:root:not(.light) .opps-table.opps-actions-text .op-row td:last-child a.op-action-view {
  color: var(--primary) !important;
}

:root:not(.light) .opps-table.opps-actions-text .op-row td:last-child a.op-action-edit {
  color: #eb7539 !important;
}

/* ================================================
   LIGHT MODE — Ajuste das linhas internas das ETAPAS
   ================================================ */

.light #lines-tbody.divide-y > tr,
.light #lines-tbody.divide-y > * > tr {
    border-top-width: 1px !important;
    border-style: solid !important;
    border-color: var(--border) !important; /* usa #d1d5db */
}

.light #interest-tbody.divide-y > tr,
.light #interest-tbody.divide-y > * > tr {
    border-top-width: 1px !important;
    border-style: solid !important;
    border-color: var(--border) !important;
}

@media (min-width: 768px) {
    #interest-tbody {
        display: table-row-group !important;
    }
    .interest-row {
        display: table-row !important;
    }
    .interest-row td {
        display: table-cell !important;
    }
}

/* ======================================================
   Força Tailwind .border a usar o tema escuro corretamente
   ========================================================= */

:root:not(.light) .lines-table-wrapper {
    border-color: var(--border) !important;
}

.light .hover\:bg-slate-700:hover,
.light .hover\:bg-slate-800:hover {
  background-color: var(--lt-hover-bg) !important; /* slate-200 */
}

/* HOVER DO .bg-slate-900 NO TEMA CLARO */
.light .hover\:bg-slate-900:hover {
  background-color: var(--lt-hover-bg) !important;
}

/* Força botão escuro a virar claro no tema light */
.light .bg-slate-900 {
  background-color: var(--lt-surface-2) !important;  /* slate-100 */
  color: var(--lt-btn-text) !important;             /* slate-700 */
}
.light .bg-slate-900:hover {
  background-color: var(--lt-hover-bg) !important;  /* slate-200 */
}

/* =====================================
   FIX - RADIO BUTTON
   ===================================== */
/* ⚠️ Corrige radios no mobile */
@media (max-width: 767px) {

  /* Remove estilo quebrado dos radios */
  .interest-row input[type="radio"],
  .line-row input[type="radio"] {
      all: unset !important;
      accent-color: var(--primary) !important; /* #4f46e5 */
      appearance: radio !important;
      width: 18px !important;
      height: 18px !important;
      margin-top: 4px !important;
      margin-bottom: 4px !important;
      cursor: pointer !important;
  }

  /* Reposiciona no layout mobile */
  .interest-row td:last-child,
  .line-row td:last-child {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 0.5rem !important;
  }
}

/* ================================
   LIGHT MODE → Botão Filtrar
   ================================ */

/* Aplica somente quando o tema LIGHT estiver ativo */
.light .btn-style {
  background-color: var(--lt-btn-bg) !important; /* slate-200 */
  color: var(--lt-btn-text) !important;          /* slate-700 */
}

.light .btn-style:hover {
  background-color: var(--lt-hover-bg) !important; /* match sidebar hover */
}

/* Override FINAL — garante hover claro em botões no tema light */
.light body button.btn-style:hover,
.light body a.btn-style:hover,
.light body .btn-style:hover,
.light body button:hover.hover\:bg-slate-900,
.light body button:hover.hover\:bg-slate-800,
.light body button:hover.hover\:bg-slate-700,
.light body button:hover.hover\:bg-slate-600,
.light body button:hover.hover\:bg-slate-500,
.light body a:hover.hover\:bg-slate-900,
.light body a:hover.hover\:bg-slate-800,
.light body a:hover.hover\:bg-slate-700,
.light body a:hover.hover\:bg-slate-600,
.light body a:hover.hover\:bg-slate-500 {
  background-color: var(--lt-hover-bg-strong) !important;
  color: rgb(var(--lt-ink-rgb) / 1) !important;
}

/* ================================
   Botões utilitários (projeto)
   ================================ */

.btn-adobe {
  background-color: #ff0000;
  color: #ffffff;
}

.btn-adobe:hover {
  background-color: #e60000;
}