/* Contabilidex — painel: marca, tipografia e tema claro/escuro */

:root {
  --cx-cyan: #02b0dc;
  --cx-blue: #0159a3;
  --cx-orange: #fa8900;
  --cx-bg: #f3f5f8;
  --cx-surface: #ffffff;
  --cx-border: #e5e7eb;
  --cx-text: #1e293b;
  --cx-muted: #64748b;
  --cx-sidebar: #f8fafc;
  --cx-sidebar-border: #e2e8f0;
  --cx-nav-hover: #eef8fc;
  --cx-nav-active: #e0f5fb;
}

html.dark {
  --cx-bg: #0b1220;
  --cx-surface: #111827;
  --cx-border: #1f2a3d;
  --cx-text: #e5e7eb;
  --cx-muted: #94a3b8;
  --cx-sidebar: #0f172a;
  --cx-sidebar-border: #1e293b;
  --cx-nav-hover: #1e293b;
  --cx-nav-active: #0c4a6e;
  color-scheme: dark;
}

body.painel-shell {
  background: var(--cx-bg);
  color: var(--cx-text);
}

.cx-sidebar {
  background: var(--cx-sidebar);
  border-right: 1px solid var(--cx-sidebar-border);
  color: var(--cx-text);
}

.cx-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cx-muted);
  transition: background-color .15s ease, color .15s ease;
}

.cx-nav-link:hover {
  background: var(--cx-nav-hover);
  color: var(--cx-blue);
}

.cx-nav-link.is-active {
  background: var(--cx-nav-active);
  color: var(--cx-blue);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cx-cyan);
}

html.dark .cx-nav-link.is-active {
  color: #7dd3fc;
  box-shadow: inset 3px 0 0 var(--cx-cyan);
}

html.dark .cx-nav-link:hover {
  color: #7dd3fc;
}

.cx-nav-section {
  border-radius: 0.75rem;
  border: 1px solid var(--cx-border);
  background: color-mix(in srgb, var(--cx-surface) 80%, transparent);
}

.cx-header {
  background: color-mix(in srgb, var(--cx-surface) 92%, transparent);
  border-bottom: 1px solid var(--cx-border);
  backdrop-filter: blur(10px);
}

.cx-footer {
  background: var(--cx-surface);
  border-top: 1px solid var(--cx-border);
  color: var(--cx-muted);
}

.cx-surface {
  background: var(--cx-surface);
  border-color: var(--cx-border);
  color: var(--cx-text);
}

.cx-logo img,
.cx-logo svg {
  height: 2.25rem;
  width: auto;
  display: block;
}

.cx-brand-mark {
  height: 2rem;
  width: auto;
}

/* Cards / listas no conteúdo herdam melhor contraste no dark */
html.dark .bg-white {
  background-color: var(--cx-surface) !important;
}
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: #0f172a !important;
}
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
  border-color: var(--cx-border) !important;
}
html.dark .text-gray-900,
html.dark .text-gray-800 {
  color: #f1f5f9 !important;
}
html.dark .text-gray-700,
html.dark .text-gray-600 {
  color: #cbd5e1 !important;
}
html.dark .text-gray-500,
html.dark .text-gray-400 {
  color: #94a3b8 !important;
}
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: #1e293b !important;
}
html.dark .shadow-sm,
html.dark .shadow-lg {
  --tw-shadow-color: rgb(0 0 0 / 0.35);
}

@media (max-width: 768px) {
  header nav { flex-wrap: wrap; gap: 0.5rem; }
}