/* =====================================================
   TEMA ESCURO (padrao)
   ===================================================== */
:root,
[data-theme="dark"] {
  --gold: #eab308;
  --gold-hover: #fbbf24;
  --black: #000;

  --bg-950: #09090b;
  --bg-900: #18181b;
  --bg-800: #27272a;
  --bg-700: #3f3f46;
  --bg-600: #52525b;

  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  --border-accent: rgba(234, 179, 8, 0.4);
  --border-subtle: rgba(63, 63, 70, 1);

  --sidebar-bg: #18181b;
  --sidebar-border: rgba(234, 179, 8, 0.4);
  --card-bg: #18181b;
  --input-bg: #27272a;
  --topbar-bg: rgba(24, 24, 27, 0.85);
  --scrollbar-track: #27272a;
  --scrollbar-thumb: #eab308;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   TEMA CLARO
   ===================================================== */
[data-theme="light"] {
  --gold: #ca8a04;
  --gold-hover: #a16207;
  --black: #f8fafc;

  --bg-950: #f1f5f9;
  --bg-900: #ffffff;
  --bg-800: #f8fafc;
  --bg-700: #e2e8f0;
  --bg-600: #cbd5e1;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --border-accent: rgba(202, 138, 4, 0.5);
  --border-subtle: #e2e8f0;

  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(202, 138, 4, 0.4);
  --card-bg: #ffffff;
  --input-bg: #f1f5f9;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --scrollbar-track: #e2e8f0;
  --scrollbar-thumb: #ca8a04;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   BASE GLOBAL
   ===================================================== */
body {
  background-color: var(--bg-950);
  color: var(--text-primary);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-gold { background: var(--gold); color: #000; }
a:hover { color: var(--gold); }

/* Tabelas */
table th, table td { border-color: var(--border-subtle); }

/* =====================================================
   BADGES DE ROLE (admin, advogado, credor)
   Classes customizadas que funcionam em ambos os temas
   ===================================================== */
.role-badge--admin {
  background-color: rgba(127, 29, 29, 0.35);
  color: #fca5a5;
}
.role-badge--advogado {
  background-color: rgba(29, 78, 216, 0.25);
  color: #93c5fd;
}
.role-badge--credor {
  background-color: rgba(21, 128, 61, 0.25);
  color: #86efac;
}

[data-theme="light"] .role-badge--admin {
  background-color: #b91c1c;
  color: #ffffff;
}
[data-theme="light"] .role-badge--advogado {
  background-color: #1d4ed8;
  color: #ffffff;
}
[data-theme="light"] .role-badge--credor {
  background-color: #15803d;
  color: #ffffff;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
#sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--sidebar-bg) !important;
  border-right-color: var(--sidebar-border) !important;
  transition: background-color 0.3s ease;
}

#sidebar .sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

/* Itens de navegacao da sidebar no tema claro */
[data-theme="light"] #sidebar a {
  color: var(--text-secondary);
}
[data-theme="light"] #sidebar a:hover {
  background-color: var(--bg-800);
  color: var(--gold);
}
[data-theme="light"] #sidebar .text-yellow-400 {
  color: var(--gold) !important;
}
[data-theme="light"] #sidebar .text-zinc-400 {
  color: var(--text-muted) !important;
}
[data-theme="light"] #sidebar .text-zinc-500 {
  color: var(--text-muted) !important;
}

/* Desabilitar tooltips CSS nativos na sidebar - usamos JavaScript */
#sidebar [data-tooltip]::before,
#sidebar [data-tooltip]::after {
  display: none !important;
}

/* =====================================================
   TOPBAR
   ===================================================== */
[data-theme="light"] .bg-zinc-900\/80,
[data-theme="light"] .bg-zinc-900\/85 {
  background-color: var(--topbar-bg) !important;
}

/* =====================================================
   INPUTS E FORMULARIOS
   ===================================================== */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-muted);
}

/* =====================================================
   CARDS E CONTAINERS
   ===================================================== */
[data-theme="light"] .bg-zinc-900 {
  background-color: var(--card-bg) !important;
}
[data-theme="light"] .bg-zinc-950 {
  background-color: var(--bg-950) !important;
}
[data-theme="light"] .bg-zinc-800 {
  background-color: var(--bg-800) !important;
}
[data-theme="light"] .bg-black {
  background-color: var(--bg-950) !important;
}
[data-theme="light"] .border-zinc-800,
[data-theme="light"] .border-zinc-700 {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .text-zinc-400 {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .text-zinc-500 {
  color: var(--text-muted) !important;
}
[data-theme="light"] .text-zinc-300 {
  color: var(--text-primary) !important;
}
[data-theme="light"] .text-gray-100 {
  color: var(--text-primary) !important;
}
[data-theme="light"] .bg-zinc-800\/80 {
  background-color: var(--input-bg) !important;
}
[data-theme="light"] .bg-zinc-800\/50 {
  background-color: rgba(241, 245, 249, 0.8) !important;
}
[data-theme="light"] .bg-zinc-700 {
  background-color: var(--bg-700) !important;
}
[data-theme="light"] .bg-zinc-600 {
  background-color: var(--bg-600) !important;
}
[data-theme="light"] .border-zinc-600 {
  border-color: var(--bg-600) !important;
}
[data-theme="light"] .text-zinc-200,
[data-theme="light"] .text-zinc-100 {
  color: var(--text-primary) !important;
}
[data-theme="light"] .text-white {
  color: var(--text-primary) !important;
}
[data-theme="light"] .text-gray-400 {
  color: var(--text-secondary) !important;
}

/* =====================================================
   MODO CLARO - SIDEBAR NAVEGACAO
   Cores de texto coloridas na sidebar adaptadas
   ===================================================== */
[data-theme="light"] #sidebar .text-yellow-400,
[data-theme="light"] #sidebar .text-yellow-500 {
  color: #a16207 !important;
}
[data-theme="light"] #sidebar .text-yellow-300 {
  color: #92400e !important;
}
[data-theme="light"] #sidebar .hover\:text-yellow-300:hover {
  color: #92400e !important;
}
[data-theme="light"] #sidebar .text-cyan-400 {
  color: #0e7490 !important;
}
[data-theme="light"] #sidebar .text-blue-400 {
  color: #1d4ed8 !important;
}
[data-theme="light"] #sidebar .text-purple-400 {
  color: #7c3aed !important;
}
[data-theme="light"] #sidebar .text-green-400 {
  color: #15803d !important;
}
[data-theme="light"] #sidebar .text-emerald-400 {
  color: #047857 !important;
}
[data-theme="light"] #sidebar .text-red-400 {
  color: #b91c1c !important;
}
[data-theme="light"] #sidebar .text-orange-400 {
  color: #c2410c !important;
}
[data-theme="light"] #sidebar a:hover {
  background-color: #f1f5f9 !important;
}
[data-theme="light"] #sidebar .hover\:bg-zinc-800:hover {
  background-color: #f1f5f9 !important;
}
[data-theme="light"] #sidebar .hover\:bg-red-900\/20:hover {
  background-color: #fee2e2 !important;
}
[data-theme="light"] #sidebar .hover\:text-red-400:hover {
  color: #b91c1c !important;
}
[data-theme="light"] #sidebar .hover\:bg-blue-900\/20:hover {
  background-color: #dbeafe !important;
}
[data-theme="light"] #sidebar .hover\:text-blue-400:hover {
  color: #1d4ed8 !important;
}

/* =====================================================
   MODO CLARO - TOPBAR (texto branco em fundo branco)
   Aplica apenas em contextos sem fundo colorido
   ===================================================== */
[data-theme="light"] .bg-zinc-900\/80 .text-white,
[data-theme="light"] .bg-zinc-900\/85 .text-white,
[data-theme="light"] .bg-zinc-900 .text-white,
[data-theme="light"] .bg-zinc-800 .text-white {
  color: var(--text-primary) !important;
}

/* =====================================================
   MODO CLARO - BADGES DE ROLE (admin, advogado, credor)
   ===================================================== */
[data-theme="light"] .bg-red-900\/30 {
  background-color: #fee2e2 !important;
}
[data-theme="light"] .text-red-300 {
  color: #b91c1c !important;
}
[data-theme="light"] .bg-blue-900\/30 {
  background-color: #dbeafe !important;
}
[data-theme="light"] .text-blue-300 {
  color: #1d4ed8 !important;
}
[data-theme="light"] .bg-green-900\/30 {
  background-color: #dcfce7 !important;
}
[data-theme="light"] .text-green-300 {
  color: #15803d !important;
}
[data-theme="light"] .bg-yellow-900\/30 {
  background-color: #fef9c3 !important;
}
[data-theme="light"] .text-yellow-300 {
  color: #a16207 !important;
}
[data-theme="light"] .bg-purple-900\/30 {
  background-color: #f3e8ff !important;
}
[data-theme="light"] .text-purple-300 {
  color: #7c3aed !important;
}
[data-theme="light"] .bg-orange-900\/30 {
  background-color: #ffedd5 !important;
}
[data-theme="light"] .text-orange-300 {
  color: #c2410c !important;
}
[data-theme="light"] .bg-cyan-900\/30 {
  background-color: #cffafe !important;
}
[data-theme="light"] .text-cyan-300 {
  color: #0e7490 !important;
}
[data-theme="light"] .bg-emerald-900\/30 {
  background-color: #d1fae5 !important;
}
[data-theme="light"] .text-emerald-300 {
  color: #047857 !important;
}

/* =====================================================
   MODO CLARO - TEXTO COLORIDO SEMANTICO
   text-{color}-400 fica muito claro no fundo branco
   ===================================================== */
[data-theme="light"] .text-red-400 {
  color: #dc2626 !important;
}
[data-theme="light"] .text-green-400 {
  color: #16a34a !important;
}
[data-theme="light"] .text-blue-400 {
  color: #2563eb !important;
}
[data-theme="light"] .text-yellow-400 {
  color: #ca8a04 !important;
}
[data-theme="light"] .text-yellow-500 {
  color: #a16207 !important;
}
[data-theme="light"] .text-purple-400 {
  color: #9333ea !important;
}
[data-theme="light"] .text-orange-400 {
  color: #ea580c !important;
}
[data-theme="light"] .text-cyan-400 {
  color: #0891b2 !important;
}
[data-theme="light"] .text-emerald-400 {
  color: #059669 !important;
}
[data-theme="light"] .text-pink-400 {
  color: #db2777 !important;
}
[data-theme="light"] .text-rose-400 {
  color: #e11d48 !important;
}
[data-theme="light"] .text-indigo-400 {
  color: #4338ca !important;
}
[data-theme="light"] .text-violet-400 {
  color: #7c3aed !important;
}
[data-theme="light"] .text-amber-400 {
  color: #b45309 !important;
}

/* =====================================================
   MODO CLARO - FUNDOS SEMANTICOS
   bg-{color}-900/30, /20, /10 e bg-{color}-950/20
   Substituidos por tons suaves e legíveis
   ===================================================== */
[data-theme="light"] .bg-red-900\/20,
[data-theme="light"] .bg-red-950\/20,
[data-theme="light"] .bg-red-900\/5 {
  background-color: #fef2f2 !important;
}
[data-theme="light"] .bg-green-900\/30,
[data-theme="light"] .bg-green-900\/20,
[data-theme="light"] .bg-green-950\/20 {
  background-color: #f0fdf4 !important;
}
[data-theme="light"] .bg-blue-900\/30,
[data-theme="light"] .bg-blue-900\/20,
[data-theme="light"] .bg-blue-950\/20 {
  background-color: #eff6ff !important;
}
[data-theme="light"] .bg-yellow-900\/30,
[data-theme="light"] .bg-yellow-900\/20 {
  background-color: #fefce8 !important;
}
[data-theme="light"] .bg-purple-900\/30,
[data-theme="light"] .bg-purple-900\/20,
[data-theme="light"] .bg-purple-950\/30,
[data-theme="light"] .bg-purple-900\/10,
[data-theme="light"] .bg-purple-950\/20 {
  background-color: #faf5ff !important;
}
[data-theme="light"] .bg-orange-900\/30,
[data-theme="light"] .bg-orange-900\/20 {
  background-color: #fff7ed !important;
}
[data-theme="light"] .bg-cyan-900\/30,
[data-theme="light"] .bg-cyan-900\/20 {
  background-color: #ecfeff !important;
}
[data-theme="light"] .bg-emerald-900\/30,
[data-theme="light"] .bg-emerald-900\/20 {
  background-color: #ecfdf5 !important;
}
[data-theme="light"] .bg-red-500\/10 {
  background-color: #fef2f2 !important;
}
[data-theme="light"] .bg-green-500\/10,
[data-theme="light"] .bg-green-600\/20 {
  background-color: #f0fdf4 !important;
}
[data-theme="light"] .bg-purple-600\/20 {
  background-color: #faf5ff !important;
}

/* =====================================================
   MODO CLARO - BORDAS SEMANTICAS
   ===================================================== */
[data-theme="light"] .border-red-600\/30,
[data-theme="light"] .border-red-600\/40,
[data-theme="light"] .border-red-600\/50 {
  border-color: #fca5a5 !important;
}
[data-theme="light"] .border-green-600\/30,
[data-theme="light"] .border-green-600\/40,
[data-theme="light"] .border-green-600\/50 {
  border-color: #86efac !important;
}
[data-theme="light"] .border-blue-600\/30,
[data-theme="light"] .border-blue-600\/40,
[data-theme="light"] .border-blue-600\/50 {
  border-color: #93c5fd !important;
}
[data-theme="light"] .border-yellow-600\/30,
[data-theme="light"] .border-yellow-600\/40 {
  border-color: #fde047 !important;
}
[data-theme="light"] .border-purple-600\/20,
[data-theme="light"] .border-purple-600\/30,
[data-theme="light"] .border-purple-600\/50 {
  border-color: #d8b4fe !important;
}
[data-theme="light"] .border-orange-600\/30,
[data-theme="light"] .border-orange-600\/50 {
  border-color: #fdba74 !important;
}
[data-theme="light"] .border-cyan-600\/30,
[data-theme="light"] .border-cyan-600\/50 {
  border-color: #67e8f9 !important;
}
[data-theme="light"] .border-emerald-600\/30,
[data-theme="light"] .border-emerald-600\/50 {
  border-color: #6ee7b7 !important;
}
[data-theme="light"] .border-red-500\/30 {
  border-color: #fca5a5 !important;
}
[data-theme="light"] .border-green-500\/50 {
  border-color: #86efac !important;
}

/* =====================================================
   MODO CLARO - ACOES COM CORES (botoes e links)
   ===================================================== */
[data-theme="light"] .bg-red-600\/10,
[data-theme="light"] .bg-red-600\/20 {
  background-color: #fee2e2 !important;
}
[data-theme="light"] .hover\:bg-red-600\/30:hover {
  background-color: #fecaca !important;
}
[data-theme="light"] .bg-red-600\/10 .text-red-400,
[data-theme="light"] .text-red-400 {
  color: #dc2626 !important;
}
[data-theme="light"] .border-red-600\/30 {
  border-color: #fca5a5 !important;
}

/* =====================================================
   MODO CLARO - LIXEIRA (linha vermelha suave)
   ===================================================== */
[data-theme="light"] .bg-red-900\/5 {
  background-color: #fff5f5 !important;
}

/* =====================================================
   MODO CLARO - ELEMENTOS DIVERSOS
   ===================================================== */
[data-theme="light"] .bg-zinc-900\/30 {
  background-color: rgba(248, 250, 252, 0.9) !important;
}
[data-theme="light"] kbd {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .bg-zinc-800\/30 {
  background-color: rgba(241, 245, 249, 0.6) !important;
}

/* =====================================================
   SCROLLBAR SIDEBAR
   ===================================================== */
#sidebar .sidebar-nav::-webkit-scrollbar {
  width: 8px;
}
#sidebar .sidebar-nav::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}
#sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid var(--scrollbar-track);
}
#sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--gold-hover);
}
#sidebar .sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* =====================================================
   TOGGLE DE TEMA - BOTAO
   ===================================================== */
#tema-toggle-btn {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--bg-700);
  border: 1px solid var(--border-accent);
  cursor: pointer;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

#tema-toggle-btn .toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  transition: transform 0.3s ease, background 0.3s ease;
}

[data-theme="light"] #tema-toggle-btn .toggle-knob {
  transform: translateX(20px);
}

[data-theme="light"] #tema-toggle-btn {
  background: #e2e8f0;
}

/* =====================================================
   SISTEMA DE TOOLTIPS GLOBAL
   ===================================================== */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 9999;
  pointer-events: none;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  background: #18181b;
  color: #fafafa;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid #eab308;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

[data-tooltip]::after {
  content: '';
  border: 6px solid transparent;
  border-top-color: #eab308;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Tooltip posicao inferior */
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 8px);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #eab308;
}

/* Tooltip posicao esquerda */
[data-tooltip-pos="left"]::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%);
}
[data-tooltip-pos="left"]::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 2px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: #eab308;
}

/* Tooltip posicao direita */
[data-tooltip-pos="right"]::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}
[data-tooltip-pos="right"]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 2px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: #eab308;
}

/* Tooltip com quebra de linha */
[data-tooltip-wrap]::before {
  white-space: normal;
  max-width: 250px;
  text-align: center;
}

/* =====================================================
   MODO CLARO - TELA DE LOGIN
   ===================================================== */
[data-theme="light"] body {
  background: var(--bg-950) !important;
  background-image: none !important;
}

[data-theme="light"] .bg-black\/50 {
  background-color: var(--input-bg) !important;
}

[data-theme="light"] .bg-black\/30 {
  background-color: rgba(241, 245, 249, 0.8) !important;
}

[data-theme="light"] .from-zinc-950,
[data-theme="light"] .via-black,
[data-theme="light"] .to-zinc-900 {
  --tw-gradient-from: var(--bg-950) !important;
  --tw-gradient-via: var(--bg-900) !important;
  --tw-gradient-to: var(--bg-950) !important;
}

/* =====================================================
   MODO CLARO - TRANSICAO SUAVE EM TODOS OS ELEMENTOS
   ===================================================== */
[data-theme="light"] * {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease;
}

/* =====================================================
   MODO CLARO - MODAIS E OVERLAYS
   ===================================================== */
[data-theme="light"] .bg-black\/70,
[data-theme="light"] .bg-black\/60,
[data-theme="light"] .bg-black\/50 {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

[data-theme="light"] .bg-zinc-900\/90,
[data-theme="light"] .bg-zinc-900\/95 {
  background-color: rgba(255, 255, 255, 0.97) !important;
}

/* =====================================================
   MODO CLARO - TABELAS
   ===================================================== */
[data-theme="light"] table {
  background-color: var(--card-bg);
}

[data-theme="light"] thead th {
  background-color: var(--bg-800) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

[data-theme="light"] tbody tr:hover {
  background-color: var(--bg-800) !important;
}

[data-theme="light"] tbody td {
  color: var(--text-primary);
  border-color: var(--border-subtle) !important;
}