/* ═══════════════════════════════════════════════════════════
   Orkestria — Sistema de Temas  |  theme.css
   dark = padrão (CSS inline de cada página)
   light = ativado via html[data-theme="light"]
   Sidebar permanece sempre dark (identidade de marca)
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   TOKENS DE MARCA  (independe do tema)
   ────────────────────────────────────────────────────────── */
:root {
  --brand-navy:      #051933;
  --brand-navy-dark: #12132e;
  --brand-accent:    #00FFFF;
  --brand-blue:      #0099cc;
  --brand-deep:      #003963;
  --brand-gray:      #b9b9b9;
  --font-primary:    'Inter', 'Ubuntu', sans-serif;
  --font-display:    'Ubuntu', 'Inter', sans-serif;
}

/* ──────────────────────────────────────────────────────────
   TOKENS DE TEMA — dark
   ────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --bg-page:        #050913;
  --bg-surface:     rgba(12,17,35,0.75);
  --bg-card:        rgba(13,18,38,0.65);
  --border-subtle:  rgba(255,255,255,0.07);
  --accent:         #a5b4fc;
}

/* ──────────────────────────────────────────────────────────
   TOKENS DE TEMA — light
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --text-primary:   #051933;
  --text-secondary: #1e3a5f;
  --text-muted:     #475569;
  --bg-page:        #ffffff;
  --bg-surface:     #ffffff;
  --bg-card:        #f0f7ff;
  --border-subtle:  rgba(0,99,163,0.14);
  --accent:         #003963;
}

/* ──────────────────────────────────────────────────────────
   TIPOGRAFIA
   ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { font-family: var(--font-display); }

/* ──────────────────────────────────────────────────────────
   TRANSIÇÃO SUAVE AO ALTERNAR TEMA
   ────────────────────────────────────────────────────────── */
body,
header, aside,
input, textarea, select,
.nav-item, .section-label,
.badge, .filter-tab, .tab-btn,
.cselect-btn, .cselect-panel,
.btn-run, .btn-logs, .btn-toggle,
.btn-del, .btn-edit, .btn-stop, .btn-ctx {
  transition-property: background-color, border-color, color, box-shadow !important;
  transition-duration: 0.22s !important;
  transition-timing-function: ease !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — html[data-theme="light"]
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1. BODY
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] body {
  background: #ffffff !important;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(0,99,204,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(0,153,204,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(0,57,99,0.03)  0%, transparent 50%) !important;
  color: #051933 !important;
}

/* ──────────────────────────────────────────────────────────
   2. SIDEBAR — sempre dark (identidade visual)
      NOTA: :not(.sidebar) no .glass abaixo garante que o
      override de fundo branco não afete o sidebar.
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] aside.sidebar {
  background: #051933 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Todos os textos dentro do sidebar — legíveis sobre #051933 */
html[data-theme="light"] .sidebar .text-white      { color: #ffffff              !important; }
html[data-theme="light"] .sidebar .text-slate-200  { color: rgba(255,255,255,.88) !important; }
html[data-theme="light"] .sidebar .text-slate-300  { color: rgba(255,255,255,.78) !important; }
html[data-theme="light"] .sidebar .text-slate-400  { color: rgba(255,255,255,.70) !important; }
html[data-theme="light"] .sidebar .text-slate-500  { color: rgba(255,255,255,.62) !important; }
html[data-theme="light"] .sidebar .text-slate-600  { color: rgba(255,255,255,.54) !important; }
html[data-theme="light"] .sidebar .text-green-400  { color: #4ade80              !important; }
html[data-theme="light"] .sidebar .text-violet-300 { color: #c4b5fd              !important; }
html[data-theme="light"] .sidebar .mono            { color: rgba(255,255,255,.54) !important; }

/* Nav items — contraste mínimo ~10:1 contra #051933 */
html[data-theme="light"] .sidebar .nav-item {
  color: rgba(255,255,255,0.80) !important;
}
html[data-theme="light"] .sidebar .nav-item:hover {
  background: rgba(255,255,255,0.09) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .sidebar .nav-item.active {
  background: rgba(0,153,204,0.22) !important;
  border-color: rgba(0,153,204,0.45) !important;
  color: #5fd8f5 !important;
}
html[data-theme="light"] .sidebar .nav-item svg { opacity: 1 !important; }

/* Section labels */
html[data-theme="light"] .sidebar .section-label {
  color: rgba(255,255,255,0.55) !important;
}

/* Botão toggle de tema dentro do sidebar */
html[data-theme="light"] .sidebar button.w-full {
  color: rgba(255,255,255,0.78) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
html[data-theme="light"] .sidebar button.w-full:hover {
  background: rgba(255,255,255,0.09) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .sidebar .border-white\/5 { border-color: rgba(255,255,255,0.09) !important; }

/* ──────────────────────────────────────────────────────────
   3. GLASS COMPONENTS
      :not(.sidebar) evita que o fundo branco seja aplicado
      no sidebar que também usa a classe .glass
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .glass:not(.sidebar) {
  background: #ffffff !important;
  border-color: rgba(0,99,163,0.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .glass-card {
  background: #f0f7ff !important;
  border-color: rgba(0,99,163,0.11) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .glass-card:hover {
  background: #e4f1ff !important;
  border-color: rgba(0,153,204,0.28) !important;
  box-shadow: 0 6px 24px rgba(0,99,163,0.10) !important;
  transform: translateY(-1px);
}

/* Bordas esquerda coloridas dos cards de script (card-*)
   A regra glass-card acima anulava a border-left com !important e
   especificidade maior (0,2,1) vs (0,1,0) dos card-*. Estes
   overrides restauram as cores após o glass-card, mesma
   especificidade (0,2,1) mas definidos depois — cascata ganha. */
html[data-theme="light"] .card-success { border-left-color: rgba(74,222,128,0.90)  !important; }
html[data-theme="light"] .card-error   { border-left-color: rgba(248,113,113,0.90) !important; }
html[data-theme="light"] .card-timeout { border-left-color: rgba(250,204,21,0.90)  !important; }
html[data-theme="light"] .card-none    { border-left-color: rgba(0,99,163,0.18)    !important; }
html[data-theme="light"] .card-running {
  border-left-color: rgba(56,189,248,0.90) !important;
  background: rgba(14,165,233,0.05) !important;
}

/* ──────────────────────────────────────────────────────────
   4. HEADER / TOPBAR
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] header.glass:not(.sidebar) {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(0,99,163,0.10) !important;
  box-shadow: 0 1px 12px rgba(0,57,99,0.07) !important;
}
html[data-theme="light"] header h1 { color: #051933 !important; }
html[data-theme="light"] header p  { color: #64748b !important; }

/* ──────────────────────────────────────────────────────────
   5. TAILWIND TEXT UTILITIES — conteúdo principal
      Versões escuras acessíveis (WCAG AA ≥ 4.5:1 sobre branco)
   ────────────────────────────────────────────────────────── */

/* Neutros */
html[data-theme="light"] .text-white       { color: #051933 !important; }
html[data-theme="light"] .text-slate-100   { color: #1e3a5f !important; }
html[data-theme="light"] .text-slate-200   { color: #1e3a5f !important; }
html[data-theme="light"] .text-slate-300   { color: #334155 !important; }
html[data-theme="light"] .text-slate-400   { color: #475569 !important; }
html[data-theme="light"] .text-slate-500   { color: #64748b !important; }
html[data-theme="light"] .text-slate-600   { color: #475569 !important; }
html[data-theme="light"] .text-slate-700   { color: #334155 !important; }

/* Semânticos — versões escuras com ≥7:1 contraste sobre branco */
html[data-theme="light"] .text-green-300   { color: #15803d !important; }
html[data-theme="light"] .text-green-400   { color: #15803d !important; }
html[data-theme="light"] .text-green-500   { color: #166534 !important; }
html[data-theme="light"] .text-red-300     { color: #b91c1c !important; }
html[data-theme="light"] .text-red-400     { color: #b91c1c !important; }
html[data-theme="light"] .text-red-500     { color: #991b1b !important; }
html[data-theme="light"] .text-yellow-300  { color: #a16207 !important; }
html[data-theme="light"] .text-yellow-400  { color: #a16207 !important; }
html[data-theme="light"] .text-amber-300   { color: #b45309 !important; }
html[data-theme="light"] .text-amber-400   { color: #b45309 !important; }
html[data-theme="light"] .text-orange-300  { color: #c2410c !important; }
html[data-theme="light"] .text-orange-400  { color: #c2410c !important; }
html[data-theme="light"] .text-sky-300     { color: #0369a1 !important; }
html[data-theme="light"] .text-sky-400     { color: #0369a1 !important; }
html[data-theme="light"] .text-blue-300    { color: #1d4ed8 !important; }
html[data-theme="light"] .text-blue-400    { color: #1d4ed8 !important; }
html[data-theme="light"] .text-indigo-300  { color: #3730a3 !important; }
html[data-theme="light"] .text-indigo-400  { color: #4338ca !important; }
html[data-theme="light"] .text-indigo-500  { color: #4338ca !important; }
html[data-theme="light"] .text-violet-300  { color: #5b21b6 !important; }
html[data-theme="light"] .text-violet-400  { color: #6d28d9 !important; }
html[data-theme="light"] .text-purple-300  { color: #7e22ce !important; }
html[data-theme="light"] .text-purple-400  { color: #7e22ce !important; }
html[data-theme="light"] .text-cyan-300    { color: #0e7490 !important; }
html[data-theme="light"] .text-cyan-400    { color: #0891b2 !important; }
html[data-theme="light"] .text-emerald-300 { color: #166534 !important; }
html[data-theme="light"] .text-emerald-400 { color: #166534 !important; }
html[data-theme="light"] .text-emerald-500 { color: #14532d !important; }
html[data-theme="light"] .text-fuchsia-400 { color: #a21caf !important; }
html[data-theme="light"] .text-pink-400    { color: #be185d !important; }

/* Hover text — evita texto branco invisível sobre fundo claro */
html[data-theme="light"] .hover\:text-white:hover         { color: #051933 !important; }
html[data-theme="light"] .hover\:text-indigo-300:hover    { color: #3730a3 !important; }
html[data-theme="light"] .hover\:text-indigo-400:hover    { color: #4338ca !important; }
html[data-theme="light"] .hover\:text-violet-400:hover    { color: #6d28d9 !important; }
html[data-theme="light"] .hover\:text-sky-300:hover       { color: #0369a1 !important; }

/* Botões com fundo gradiente — mantém texto branco (legível sobre indigo/violet) */
html[data-theme="light"] .bg-gradient-to-r { color: #ffffff !important; }

/* ──────────────────────────────────────────────────────────
   6. INPUTS / TEXTAREA / SELECT
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff !important;
  border: 1px solid rgba(0,99,163,0.22) !important;
  color: #051933 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: rgba(5,25,51,0.35) !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: #0099cc !important;
  box-shadow: 0 0 0 3px rgba(0,153,204,0.14) !important;
  background: #ffffff !important;
}
html[data-theme="light"] select option {
  background: #ffffff !important;
  color: #051933 !important;
}
html[data-theme="light"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #051933 !important;
}

/* ──────────────────────────────────────────────────────────
   7. BOTÕES DE AÇÃO (index.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .btn-run {
  background: rgba(22,163,74,0.10) !important;
  color: #15803d !important;
  border-color: rgba(22,163,74,0.30) !important;
}
html[data-theme="light"] .btn-run:hover {
  background: rgba(22,163,74,0.18) !important;
  border-color: rgba(22,163,74,0.50) !important;
  box-shadow: 0 0 12px rgba(22,163,74,0.18) !important;
}
html[data-theme="light"] .btn-logs {
  background: rgba(29,78,216,0.08) !important;
  color: #1d4ed8 !important;
  border-color: rgba(29,78,216,0.22) !important;
}
html[data-theme="light"] .btn-logs:hover {
  background: rgba(29,78,216,0.16) !important;
  border-color: rgba(29,78,216,0.40) !important;
  box-shadow: 0 0 12px rgba(29,78,216,0.15) !important;
}
html[data-theme="light"] .btn-toggle {
  background: rgba(71,85,105,0.07) !important;
  color: #475569 !important;
  border-color: rgba(71,85,105,0.18) !important;
}
html[data-theme="light"] .btn-toggle:hover {
  background: rgba(71,85,105,0.14) !important;
  color: #1e3a5f !important;
}
html[data-theme="light"] .btn-del {
  background: rgba(185,28,28,0.08) !important;
  color: #b91c1c !important;
  border-color: rgba(185,28,28,0.22) !important;
}
html[data-theme="light"] .btn-del:hover {
  background: rgba(185,28,28,0.15) !important;
  border-color: rgba(185,28,28,0.40) !important;
}
html[data-theme="light"] .btn-edit {
  background: rgba(161,98,7,0.08) !important;
  color: #a16207 !important;
  border-color: rgba(161,98,7,0.22) !important;
}
html[data-theme="light"] .btn-edit:hover {
  background: rgba(161,98,7,0.16) !important;
  border-color: rgba(161,98,7,0.40) !important;
}
html[data-theme="light"] .btn-stop {
  background: rgba(185,28,28,0.08) !important;
  color: #b91c1c !important;
  border-color: rgba(185,28,28,0.20) !important;
}
html[data-theme="light"] .btn-stop:hover {
  background: rgba(185,28,28,0.16) !important;
  border-color: rgba(185,28,28,0.38) !important;
}
html[data-theme="light"] .btn-ctx {
  background: rgba(71,85,105,0.07) !important;
  color: #475569 !important;
  border-color: rgba(71,85,105,0.14) !important;
}
html[data-theme="light"] .btn-ctx:hover {
  background: rgba(71,85,105,0.13) !important;
  color: #1e3a5f !important;
}

/* ──────────────────────────────────────────────────────────
   8. BADGES DE STATUS (inline nas cards de script)
   ────────────────────────────────────────────────────────── */
/* "Executando" badge — bg-sky-500/12 text-sky-300 */
html[data-theme="light"] .badge.bg-sky-500\/12,
html[data-theme="light"] [class*="badge"][class*="sky"] {
  color: #0369a1 !important;
  border-color: rgba(3,105,161,0.30) !important;
}
/* "Inativo" badge — bg-slate-500/10 text-slate-500 */
html[data-theme="light"] .badge.bg-slate-500\/10,
html[data-theme="light"] [class*="badge"][class*="slate-500"] {
  color: #475569 !important;
  border-color: rgba(71,85,105,0.25) !important;
}
/* "Admin" badge — bg-amber-500/10 text-amber-400 */
html[data-theme="light"] .badge.bg-amber-500\/10,
html[data-theme="light"] [class*="badge"][class*="amber"] {
  color: #b45309 !important;
  border-color: rgba(180,83,9,0.28) !important;
}
/* Tag badges — bg-indigo-500/10 text-indigo-300 */
html[data-theme="light"] .badge.bg-indigo-500\/10,
html[data-theme="light"] [class*="badge"][class*="indigo"] {
  color: #3730a3 !important;
  border-color: rgba(55,48,163,0.28) !important;
}

/* ──────────────────────────────────────────────────────────
   9. BADGES DE BANCO DE DADOS (connections/query)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .db-sqlserver {
  background: rgba(185,28,28,0.09) !important;
  color: #b91c1c !important;
  border-color: rgba(185,28,28,0.28) !important;
}
html[data-theme="light"] .db-mysql {
  background: rgba(133,77,14,0.09) !important;
  color: #854d0e !important;
  border-color: rgba(133,77,14,0.28) !important;
}
html[data-theme="light"] .db-postgres {
  background: rgba(30,64,175,0.09) !important;
  color: #1e40af !important;
  border-color: rgba(30,64,175,0.28) !important;
}
html[data-theme="light"] .db-oracle {
  background: rgba(154,52,18,0.09) !important;
  color: #9a3412 !important;
  border-color: rgba(154,52,18,0.28) !important;
}
html[data-theme="light"] .db-bigquery {
  background: rgba(22,101,52,0.09) !important;
  color: #166534 !important;
  border-color: rgba(22,101,52,0.28) !important;
}

/* ──────────────────────────────────────────────────────────
   10. BADGES DE ROLE (admin.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .role-admin {
  background: rgba(185,28,28,0.09) !important;
  color: #b91c1c !important;
  border-color: rgba(185,28,28,0.28) !important;
}
html[data-theme="light"] .role-operator {
  background: rgba(133,77,14,0.09) !important;
  color: #854d0e !important;
  border-color: rgba(133,77,14,0.28) !important;
}
html[data-theme="light"] .role-viewer {
  background: rgba(67,56,202,0.09) !important;
  color: #3730a3 !important;
  border-color: rgba(67,56,202,0.28) !important;
}

/* ──────────────────────────────────────────────────────────
   11. FILTER TABS (index.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .filter-tab {
  background: #f0f7ff !important;
  border-color: rgba(0,99,163,0.14) !important;
  color: #475569 !important;
}
html[data-theme="light"] .filter-tab:hover {
  background: #e4f1ff !important;
  color: #003963 !important;
}
html[data-theme="light"] .filter-tab.filter-tab-active {
  background: rgba(0,153,204,0.12) !important;
  border-color: rgba(0,153,204,0.38) !important;
  color: #003963 !important;
}
html[data-theme="light"] .filter-tab[data-filter="error"].filter-tab-active {
  background: rgba(185,28,28,0.09) !important;
  border-color: rgba(185,28,28,0.35) !important;
  color: #b91c1c !important;
}
html[data-theme="light"] .filter-tab[data-filter="timeout"].filter-tab-active {
  background: rgba(133,77,14,0.09) !important;
  border-color: rgba(133,77,14,0.35) !important;
  color: #a16207 !important;
}
html[data-theme="light"] .filter-tab[data-filter="success"].filter-tab-active {
  background: rgba(22,101,52,0.09) !important;
  border-color: rgba(22,101,52,0.35) !important;
  color: #15803d !important;
}
html[data-theme="light"] .filter-tab[data-filter="pending"].filter-tab-active {
  background: rgba(71,85,105,0.09) !important;
  border-color: rgba(71,85,105,0.35) !important;
  color: #334155 !important;
}
html[data-theme="light"] .filter-cnt {
  background: rgba(5,25,51,0.09) !important;
  color: #051933 !important;
}

/* ──────────────────────────────────────────────────────────
   12. FREQ BUTTONS (modal de agendamento)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .freq-btn {
  background: #f0f7ff !important;
  border-color: rgba(0,99,163,0.14) !important;
  color: #475569 !important;
}
html[data-theme="light"] .freq-btn .text-slate-300 { color: #334155 !important; }
html[data-theme="light"] .freq-btn .text-slate-600 { color: #475569 !important; }
html[data-theme="light"] .freq-btn.selected {
  background: rgba(0,153,204,0.12) !important;
  border-color: rgba(0,153,204,0.40) !important;
  color: #003963 !important;
}
html[data-theme="light"] .freq-btn.selected::after { color: #0099cc !important; }
html[data-theme="light"] .freq-btn.selected-none {
  background: rgba(71,85,105,0.08) !important;
  border-color: rgba(71,85,105,0.22) !important;
  color: #475569 !important;
}

/* ──────────────────────────────────────────────────────────
   13. CONTEXT MENU
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .ctx-item              { color: #475569 !important; background: transparent !important; }
html[data-theme="light"] .ctx-item:hover        { background: rgba(0,99,163,0.07) !important; color: #051933 !important; }
html[data-theme="light"] .ctx-item.ctx-danger   { color: #b91c1c !important; }
html[data-theme="light"] .ctx-item.ctx-danger:hover { background: rgba(185,28,28,0.08) !important; color: #991b1b !important; }
html[data-theme="light"] .ctx-divider           { background: rgba(0,99,163,0.10) !important; }

/* ──────────────────────────────────────────────────────────
   14. DROPDOWN CUSTOMIZADO (.cselect)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .cselect-panel {
  background: #ffffff !important;
  border-color: rgba(0,99,163,0.15) !important;
  box-shadow: 0 12px 40px rgba(0,57,99,0.15) !important;
}
html[data-theme="light"] .cselect-opt           { color: #475569 !important; }
html[data-theme="light"] .cselect-opt:hover     { background: rgba(0,153,204,0.08) !important; color: #003963 !important; }
html[data-theme="light"] .cselect-opt.sel       { background: rgba(0,153,204,0.14) !important; color: #003963 !important; font-weight: 600; }
html[data-theme="light"] .cselect-btn           { background: #f0f7ff !important; border-color: rgba(0,99,163,0.20) !important; color: #1e3a5f !important; }
html[data-theme="light"] .cselect-btn:hover     { background: #e4f1ff !important; border-color: rgba(0,153,204,0.35) !important; color: #003963 !important; }
html[data-theme="light"] .cselect.open .cselect-btn { border-color: rgba(0,153,204,0.50) !important; background: rgba(0,153,204,0.08) !important; color: #003963 !important; }

/* ──────────────────────────────────────────────────────────
   15. TAB BUTTONS (admin.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .tab-btn               { color: #64748b !important; }
html[data-theme="light"] .tab-btn.active        { background: rgba(0,153,204,0.10) !important; border-color: rgba(0,153,204,0.28) !important; color: #003963 !important; }
html[data-theme="light"] .tab-btn:not(.active):hover { background: rgba(0,99,163,0.05) !important; color: #475569 !important; }

/* ──────────────────────────────────────────────────────────
   16. TYPE BUTTONS (connections.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .type-btn {
  background: #f0f7ff !important;
  border-color: rgba(0,99,163,0.14) !important;
}
html[data-theme="light"] .type-btn:hover { background: #e4f1ff !important; }
html[data-theme="light"] .type-btn.selected {
  border-color: rgba(0,153,204,0.70) !important;
  background: rgba(0,153,204,0.10) !important;
}

/* ──────────────────────────────────────────────────────────
   17. SQL EDITOR (query.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] #sqlEditor {
  background: #f8fafc !important;
  color: #051933 !important;
  border-color: rgba(0,99,163,0.22) !important;
}
html[data-theme="light"] #sqlEditor:focus {
  border-color: #0099cc !important;
  box-shadow: 0 0 0 3px rgba(0,153,204,0.12) !important;
}
html[data-theme="light"] #sqlEditor::placeholder { color: rgba(5,25,51,0.30) !important; }

/* ──────────────────────────────────────────────────────────
   18. TABELA DE RESULTADOS (query.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .result-table th {
  background: #eef2ff !important;
  color: #003963 !important;
  border-color: rgba(0,99,163,0.20) !important;
}
html[data-theme="light"] .result-table td {
  color: #1e3a5f !important;
  border-color: rgba(0,99,163,0.07) !important;
}
html[data-theme="light"] .result-table tr:hover td { background: rgba(0,99,163,0.04) !important; }
html[data-theme="light"] .result-table td.null-val  { color: rgba(5,25,51,0.30) !important; }

/* ──────────────────────────────────────────────────────────
   19. ATALHOS DE TECLADO <kbd> (query.html)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] kbd {
  background: rgba(5,25,51,0.07) !important;
  border-color: rgba(5,25,51,0.18) !important;
  color: #051933 !important;
}

/* ──────────────────────────────────────────────────────────
   20. DATA LINEAGE — labels do grafo D3
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .node-label { fill: #051933 !important; }

/* ──────────────────────────────────────────────────────────
   21. MODAL OVERLAY (mantém escuro)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .modal-overlay { background: rgba(5,25,51,0.62) !important; }

/* ──────────────────────────────────────────────────────────
   22. SCROLLBAR
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,153,204,0.35) !important; }

/* ──────────────────────────────────────────────────────────
   23. UTILITÁRIOS TAILWIND GENÉRICOS
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .border-white\/5  { border-color: rgba(0,99,163,0.10) !important; }
html[data-theme="light"] .border-white\/7  { border-color: rgba(0,99,163,0.10) !important; }
html[data-theme="light"] .bg-white\/2      { background: rgba(0,99,163,0.03)  !important; }
html[data-theme="light"] .bg-white\/5      { background: rgba(0,99,163,0.05)  !important; }
html[data-theme="light"] .bg-white\/6      { background: rgba(0,99,163,0.05)  !important; }
html[data-theme="light"] .hover\:bg-white\/6:hover  { background: rgba(0,99,163,0.08) !important; }
html[data-theme="light"] .hover\:bg-white\/8:hover  { background: rgba(0,99,163,0.08) !important; }

/* ──────────────────────────────────────────────────────────
   24. BOTÃO TOGGLE NA LOGIN PAGE
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] #loginThemeBtn {
  background: rgba(0,99,163,0.07) !important;
  border-color: rgba(0,99,163,0.18) !important;
  color: #003963 !important;
}

/* ──────────────────────────────────────────────────────────
   25. BLOCOS DE CÓDIGO / SNIPPETS (connections, index logs)
       bg-black/20, bg-black/25, bg-black/30 em modo claro
       renderizam como cinza médio sobre fundo branco.
       Substituímos por azul-marca bem suave, mantendo o
       destaque visual sem comprometer legibilidade.
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .bg-black\/20 {
  background: rgba(0,99,163,0.05) !important;
  border-color: rgba(0,99,163,0.12) !important;
}
html[data-theme="light"] .bg-black\/25 {
  background: rgba(0,99,163,0.06) !important;
  border-color: rgba(0,99,163,0.12) !important;
}
html[data-theme="light"] .bg-black\/30 {
  background: rgba(0,99,163,0.07) !important;
  border-color: rgba(0,99,163,0.13) !important;
}

/* ──────────────────────────────────────────────────────────
   26. BOTÕES DE AÇÃO NAS CARDS DE CONEXÃO (raw Tailwind)
       Esses botões usam classes Tailwind diretas (não .btn-*)
       e não eram cobertos pelas regras de seção 7.
   ────────────────────────────────────────────────────────── */

/* Emerald — botão copiar + botão CSV export (query.html) */
html[data-theme="light"] .bg-emerald-500\/8  { background: rgba(22,101,52,0.07) !important; }
html[data-theme="light"] .bg-emerald-500\/10 { background: rgba(22,101,52,0.09) !important; }
html[data-theme="light"] .bg-emerald-500\/18 { background: rgba(22,101,52,0.14) !important; }
html[data-theme="light"] .hover\:bg-emerald-500\/18:hover { background: rgba(22,101,52,0.14) !important; }
html[data-theme="light"] .border-emerald-500\/12 { border-color: rgba(22,101,52,0.28) !important; }
html[data-theme="light"] .border-emerald-500\/15 { border-color: rgba(22,101,52,0.28) !important; }
html[data-theme="light"] .hover\:border-emerald-500\/30:hover { border-color: rgba(22,101,52,0.45) !important; }

/* Cyan — botão testar conexão (card + modal) */
html[data-theme="light"] .bg-cyan-500\/8   { background: rgba(8,145,178,0.07) !important; }
html[data-theme="light"] .bg-cyan-500\/18  { background: rgba(8,145,178,0.14) !important; }
html[data-theme="light"] .bg-cyan-600\/20  { background: rgba(14,116,144,0.10) !important; }
html[data-theme="light"] .hover\:bg-cyan-500\/18:hover  { background: rgba(8,145,178,0.14) !important; }
html[data-theme="light"] .hover\:bg-cyan-600\/35:hover  { background: rgba(14,116,144,0.18) !important; }
html[data-theme="light"] .border-cyan-500\/12  { border-color: rgba(8,145,178,0.28) !important; }
html[data-theme="light"] .border-cyan-500\/30  { border-color: rgba(8,145,178,0.35) !important; }
html[data-theme="light"] .hover\:border-cyan-500\/30:hover { border-color: rgba(8,145,178,0.35) !important; }
html[data-theme="light"] .hover\:border-cyan-500\/50:hover { border-color: rgba(8,145,178,0.55) !important; }

/* Indigo — botão editar conexão */
html[data-theme="light"] .bg-indigo-500\/8  { background: rgba(67,56,202,0.07) !important; }
html[data-theme="light"] .bg-indigo-500\/18 { background: rgba(67,56,202,0.14) !important; }
html[data-theme="light"] .border-indigo-500\/12 { border-color: rgba(67,56,202,0.28) !important; }
html[data-theme="light"] .border-indigo-500\/15 { border-color: rgba(67,56,202,0.28) !important; }
html[data-theme="light"] .border-indigo-500\/18 { border-color: rgba(67,56,202,0.22) !important; }
html[data-theme="light"] .hover\:bg-indigo-500\/18:hover  { background: rgba(67,56,202,0.14) !important; }
html[data-theme="light"] .hover\:border-indigo-500\/30:hover { border-color: rgba(67,56,202,0.45) !important; }

/* ──────────────────────────────────────────────────────────
   27. GRAFO D3 (lineage) — fundo do canvas
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] #graph-canvas { background: #f0f7ff !important; }

/* ──────────────────────────────────────────────────────────
   28. LINKS D3 — stroke em modo claro (cores escuras legíveis)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .link.read    { stroke: #059669 !important; }
html[data-theme="light"] .link.write   { stroke: #c2410c !important; }
html[data-theme="light"] .link.uses    { stroke: #4338ca !important; }
html[data-theme="light"] .link.fetch   { stroke: #0e7490 !important; }
html[data-theme="light"] .link.consume { stroke: #059669 !important; }

/* ──────────────────────────────────────────────────────────
   29. LISTA DE NÓS (lineage) — legibilidade modo claro
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .list-item {
  background: rgba(255,255,255,0.55) !important;
  color: #1e293b !important;
}
html[data-theme="light"] .list-item:hover {
  background: rgba(0,99,163,0.10) !important;
  color: #003963 !important;
}
html[data-theme="light"] .list-item.selected {
  background: rgba(0,153,204,0.14) !important;
  color: #003963 !important;
  border-color: rgba(0,153,204,0.40) !important;
}

/* ──────────────────────────────────────────────────────────
   29b. PAINEL LATERAL + INPUT FILTRO (lineage) — modo claro
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] #lineagePanel {
  background: rgba(240,248,255,0.92) !important;
  border-color: rgba(0,99,163,0.14) !important;
}
html[data-theme="light"] #lineagePanel .border-b {
  border-color: rgba(0,99,163,0.12) !important;
}
html[data-theme="light"] #listSearch {
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(0,99,163,0.25) !important;
  color: #1e293b !important;
}
html[data-theme="light"] #listSearch::placeholder { color: #64748b !important; }

/* .list-item sem fundo próprio — herda o azul-claro do panel */
html[data-theme="light"] .list-item { background: transparent !important; }

/* ──────────────────────────────────────────────────────────
   30. BOTÕES bg-indigo-600 — texto permanece branco (Bug 6.1)
       .text-white em modo claro recebe #051933, mas sobre
       fundo indigo (#4f46e5) o contraste cai para 3.1:1.
       Esta regra restaura #fff (contraste 8.6:1 sobre indigo).
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .bg-indigo-600              { color: #ffffff !important; }
html[data-theme="light"] .bg-indigo-500              { color: #ffffff !important; }
html[data-theme="light"] .hover\:bg-indigo-500:hover { color: #ffffff !important; }

/* ──────────────────────────────────────────────────────────
   31. TOGGLE SWITCH — trilho bg-white/10 invisível (Bug 6.2)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .bg-white\/10 { background: rgba(0,99,163,0.12) !important; }

/* ──────────────────────────────────────────────────────────
   32. BORDAS border-white/6 (Bug 6.4)
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .border-white\/6 { border-color: rgba(0,99,163,0.10) !important; }

/* ──────────────────────────────────────────────────────────
   33. BADGES API REST e SMTP — modo claro
   ────────────────────────────────────────────────────────── */
html[data-theme="light"] .db-api {
  background: rgba(15,118,110,0.09) !important;
  color: #0f766e !important;
  border-color: rgba(15,118,110,0.28) !important;
}
html[data-theme="light"] .db-smtp {
  background: rgba(29,78,216,0.09) !important;
  color: #1d4ed8 !important;
  border-color: rgba(29,78,216,0.28) !important;
}