/* ═══════════════════════════════════════════════════════════════════════════
   Sonder — sincronização de tema (light / dark) para demos em iframe
   Paleta: navy #0e2a47 · cream #f2e8d5 · orange #c25a3c · graphite #a8b4c4
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  color-scheme: dark;
}

/* ── Tokens compartilhados (por documento/iframe) ── */
html[data-theme="dark"] {
  --sonder-cream: #f2e8d5;
  --sonder-cream-muted: rgba(242, 232, 213, 0.65);
  --sonder-cream-soft: rgba(242, 232, 213, 0.45);
  --sonder-navy-deep: #0a2238;
  --sonder-navy: #0e2a47;
  --sonder-navy-mid: #12304d;
  --sonder-navy-light: #1a3f66;
  --sonder-blue: #7ec8db;
  --sonder-orange: #e07a5f;
  --sonder-border: rgba(242, 232, 213, 0.14);
  --sonder-border-strong: rgba(242, 232, 213, 0.22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MGC — pdv-operacional
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] body[data-demo="mgc"] {
  --primary: #8b83e8;
  --primary-hover: #7a72d6;
  --primary-light: rgba(139, 131, 232, 0.22);
  --ink: var(--sonder-cream);
  --rosy: var(--sonder-cream-muted);
  --rosy-light: var(--sonder-navy-light);
  --border: var(--sonder-border);
  --card: var(--sonder-navy-mid);
  background: linear-gradient(to bottom, var(--sonder-navy-deep) 0%, var(--sonder-navy) 100%) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] #screen-login {
  background: var(--sonder-navy-deep) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .main {
  background: transparent !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .login-card,
html[data-theme="dark"] body[data-demo="mgc"] .card,
html[data-theme="dark"] body[data-demo="mgc"] .modal,
html[data-theme="dark"] body[data-demo="mgc"] .sidebar,
html[data-theme="dark"] body[data-demo="mgc"] .total-box,
html[data-theme="dark"] body[data-demo="mgc"] .filter-bar {
  background: var(--sonder-navy-mid) !important;
  border-color: var(--sonder-border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .form-input {
  background: var(--sonder-navy) !important;
  border-color: var(--sonder-border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(139, 131, 232, 0.25) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .btn-secondary {
  background: var(--sonder-navy-light) !important;
  color: var(--sonder-cream) !important;
  border-color: var(--sonder-border) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .btn-secondary:hover {
  background: #245a8a !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .btn-ghost:hover {
  background: var(--primary-light) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .nav-item:hover {
  background: var(--sonder-navy-light) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .nav-item.active {
  background: var(--primary-light) !important;
  color: #c4bfff !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .user-pill {
  background: var(--sonder-navy-light) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .kpi-label,
html[data-theme="dark"] body[data-demo="mgc"] .eixo-input label {
  color: var(--sonder-cream-muted) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] th {
  background: var(--sonder-navy) !important;
  color: var(--sonder-cream-muted) !important;
  border-color: var(--sonder-border) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] td {
  color: var(--sonder-cream) !important;
  border-color: var(--sonder-border) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] tr:hover td {
  background: rgba(14, 42, 71, 0.55) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .tab {
  color: var(--sonder-cream-muted) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .tab.active,
html[data-theme="dark"] body[data-demo="mgc"] .tab:hover {
  color: #c4bfff !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .pesagem-tara {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .pesagem-final {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .eixo-excesso {
  background: rgba(250, 204, 21, 0.15) !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .login-hint {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .search-item:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .log-item {
  background: var(--sonder-navy) !important;
  border-color: var(--sonder-border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .log-item .meta {
  color: var(--sonder-cream-muted) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .modal-header,
html[data-theme="dark"] body[data-demo="mgc"] .modal-footer {
  border-color: var(--sonder-border) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .modal-header h3,
html[data-theme="dark"] body[data-demo="mgc"] .card-title,
html[data-theme="dark"] body[data-demo="mgc"] .page-header h1,
html[data-theme="dark"] body[data-demo="mgc"] .login-title {
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .page-header p,
html[data-theme="dark"] body[data-demo="mgc"] .login-sub,
html[data-theme="dark"] body[data-demo="mgc"] .sidebar-brand,
html[data-theme="dark"] body[data-demo="mgc"] .modal-close {
  color: var(--sonder-cream-muted) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .report-preview .group-header {
  background: var(--primary-light) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .badge-standby,
html[data-theme="dark"] body[data-demo="mgc"] .badge-pendente {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .badge-finalizado {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .badge-cancelado,
html[data-theme="dark"] body[data-demo="mgc"] .badge-erro {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .ticket .row {
  border-bottom-color: var(--sonder-border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .ticket .fase {
  border-color: var(--sonder-cream-muted) !important;
  color: var(--sonder-cream) !important;
}

/* KPI inline colors — manter legibilidade no escuro */
html[data-theme="dark"] body[data-demo="mgc"] .border-l-amber + .kpi-value,
html[data-theme="dark"] body[data-demo="mgc"] .kpi-value[style*="color:#b45309"] {
  color: #fcd34d !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .kpi-value[style*="color:#047857"] {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] body[data-demo="mgc"] .kpi-value[style*="color:#b91c1c"] {
  color: #fca5a5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRM — lagoinha-crm
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] body[data-demo="crm"] {
  --bg: var(--sonder-navy-deep);
  --surface: var(--sonder-navy-mid);
  --border: var(--sonder-border);
  --accent: var(--sonder-blue);
  background: var(--bg) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .board-container {
  background: var(--bg) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .demo-badge {
  background: rgba(14, 42, 71, 0.95) !important;
  color: var(--sonder-cream) !important;
  border: 1px solid var(--sonder-border);
}

html[data-theme="dark"] body[data-demo="crm"] .bg-pacific-700 {
  background-color: var(--sonder-navy) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .bg-pacific-800,
html[data-theme="dark"] body[data-demo="crm"] .hover\:bg-pacific-800:hover {
  background-color: var(--sonder-navy-light) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .border-pacific-800 {
  border-color: var(--sonder-border-strong) !important;
}

html[data-theme="dark"] body[data-demo="crm"] [class*="bg-white"] {
  background-color: var(--sonder-navy-mid) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .card-item {
  background: var(--sonder-navy) !important;
  border-color: var(--sonder-border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .card-item[data-golden="true"] {
  background: linear-gradient(to right, rgba(245, 158, 11, 0.14), var(--sonder-navy)) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .column-header {
  background: var(--sonder-navy-mid) !important;
  border-color: var(--sonder-border) !important;
}

html[data-theme="dark"] body[data-demo="crm"] [class*="text-gray-9"] {
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="crm"] [class*="text-gray-8"],
html[data-theme="dark"] body[data-demo="crm"] [class*="text-gray-7"] {
  color: rgba(242, 232, 213, 0.88) !important;
}

html[data-theme="dark"] body[data-demo="crm"] [class*="text-gray-6"],
html[data-theme="dark"] body[data-demo="crm"] [class*="text-gray-5"],
html[data-theme="dark"] body[data-demo="crm"] [class*="text-gray-4"] {
  color: var(--sonder-cream-muted) !important;
}

html[data-theme="dark"] body[data-demo="crm"] [class*="border-gray"] {
  border-color: var(--sonder-border) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .bg-gray-50,
html[data-theme="dark"] body[data-demo="crm"] .bg-gray-100,
html[data-theme="dark"] body[data-demo="crm"] .hover\:bg-gray-50:hover {
  background-color: rgba(14, 42, 71, 0.65) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .text-pacific-600,
html[data-theme="dark"] body[data-demo="crm"] .text-pacific-700,
html[data-theme="dark"] body[data-demo="crm"] .hover\:text-pacific-600:hover,
html[data-theme="dark"] body[data-demo="crm"] .hover\:text-pacific-700:hover {
  color: var(--sonder-blue) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .hover\:text-gray-700:hover,
html[data-theme="dark"] body[data-demo="crm"] .hover\:text-gray-600:hover {
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .modal-panel {
  background: var(--sonder-navy-mid) !important;
  border-color: var(--sonder-border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .drag-over {
  background: rgba(126, 200, 219, 0.1) !important;
  outline-color: var(--sonder-blue) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .activity-bar {
  background: var(--sonder-navy-light) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .activity-bar-fill {
  background: linear-gradient(90deg, var(--sonder-blue), #5498ab) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .scrollbar-elegant::-webkit-scrollbar-thumb {
  background: rgba(242, 232, 213, 0.25) !important;
}

html[data-theme="dark"] body[data-demo="crm"] #toast {
  background: var(--sonder-navy-mid) !important;
  color: var(--sonder-cream) !important;
  border: 1px solid var(--sonder-border);
}

html[data-theme="dark"] body[data-demo="crm"] .bg-red-100 {
  background: rgba(239, 68, 68, 0.15) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .text-red-700 {
  color: #fca5a5 !important;
}

html[data-theme="dark"] body[data-demo="crm"] .bg-yellow-100 {
  background: rgba(245, 158, 11, 0.15) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .text-yellow-700 {
  color: #fcd34d !important;
}

html[data-theme="dark"] body[data-demo="crm"] .bg-blue-100 {
  background: rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .text-blue-700 {
  color: #93c5fd !important;
}

html[data-theme="dark"] body[data-demo="crm"] .bg-green-100 {
  background: rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .text-green-700 {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] body[data-demo="crm"] .from-pacific-700 {
  --tw-gradient-from: #1e4d7b !important;
}

html[data-theme="dark"] body[data-demo="crm"] .to-pacific-500 {
  --tw-gradient-to: #5498ab !important;
}

html[data-theme="dark"] body[data-demo="crm"] .shadow-lg,
html[data-theme="dark"] body[data-demo="crm"] .shadow-xl,
html[data-theme="dark"] body[data-demo="crm"] .shadow-2xl,
html[data-theme="dark"] body[data-demo="crm"] .shadow-md {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] body[data-demo="crm"] input,
html[data-theme="dark"] body[data-demo="crm"] textarea {
  background: var(--sonder-navy) !important;
  border-color: var(--sonder-border-strong) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="crm"] input::placeholder,
html[data-theme="dark"] body[data-demo="crm"] textarea::placeholder {
  color: var(--sonder-cream-soft) !important;
}

html[data-theme="dark"] body[data-demo="crm"] kbd {
  background: var(--sonder-navy-light) !important;
  border-color: var(--sonder-border) !important;
  color: var(--sonder-cream-muted) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .hover\:bg-white\/80:hover {
  background-color: rgba(14, 42, 71, 0.85) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .border-dashed {
  border-color: var(--sonder-border-strong) !important;
}

html[data-theme="dark"] body[data-demo="crm"] .text-sm.font-medium:not([class*="text-"]) {
  color: var(--sonder-cream) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sonder Flow — fisconorte-operacional
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] body[data-demo="flow"] {
  --navy: var(--sonder-cream);
  --blue: #9bc4dc;
  --cream: var(--sonder-navy-deep);
  --graphite: var(--sonder-cream-muted);
  --border: var(--sonder-border);
  --card: var(--sonder-navy-mid);
  --sidebar: var(--sonder-navy);
  --node-bg: #0e2a47;
  background: var(--sonder-navy-deep) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .sidebar {
  background: var(--sidebar) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .sidebar-head {
  border-color: var(--border) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .logo,
html[data-theme="dark"] body[data-demo="flow"] .topbar h1,
html[data-theme="dark"] body[data-demo="flow"] #view-title {
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .logo-sub,
html[data-theme="dark"] body[data-demo="flow"] .stat-label,
html[data-theme="dark"] body[data-demo="flow"] .node-sub,
html[data-theme="dark"] body[data-demo="flow"] .int-meta,
html[data-theme="dark"] body[data-demo="flow"] .log-time {
  color: var(--sonder-cream-muted) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .nav-item {
  color: rgba(242, 232, 213, 0.82) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .nav-item:hover {
  background: var(--sonder-navy-light) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .nav-item.active {
  background: var(--sonder-navy-light) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .topbar {
  background: var(--sonder-navy-mid) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .stat,
html[data-theme="dark"] body[data-demo="flow"] .panel,
html[data-theme="dark"] body[data-demo="flow"] .int-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .panel-head {
  border-color: var(--border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .stat-value,
html[data-theme="dark"] body[data-demo="flow"] .int-name,
html[data-theme="dark"] body[data-demo="flow"] .node-title {
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .node {
  background: var(--node-bg) !important;
  border-color: var(--border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .node.done {
  background: rgba(18, 183, 106, 0.14) !important;
  border-color: rgba(18, 183, 106, 0.45) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .connector {
  background: var(--sonder-border-strong) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .connector::after {
  border-left-color: var(--sonder-border-strong) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .btn-ghost {
  color: var(--sonder-blue) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .log-row {
  border-color: var(--sonder-border) !important;
  color: var(--sonder-cream) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .log-tag.ok {
  background: rgba(18, 183, 106, 0.18) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] body[data-demo="flow"] .log-tag.run {
  background: rgba(194, 90, 60, 0.2) !important;
  color: var(--sonder-orange) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .log-tag.api {
  background: rgba(30, 77, 123, 0.35) !important;
  color: var(--sonder-blue) !important;
}

html[data-theme="dark"] body[data-demo="flow"] .panel-body[style*="color:var(--blue)"] {
  color: var(--sonder-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FinLayer — ajustes complementares (usa html.dark + Tailwind dark:)
   ═══════════════════════════════════════════════════════════════════════════ */

html.dark body[data-demo="finlayer"] {
  color: #e8eefc;
}

html.dark body[data-demo="finlayer"] .text-gray-500,
html.dark body[data-demo="finlayer"] .text-gray-400 {
  color: rgba(232, 238, 252, 0.55) !important;
}

html.dark body[data-demo="finlayer"] #welcome-screen p.text-gray-400 {
  color: rgba(232, 238, 252, 0.45) !important;
}

html.dark body[data-demo="finlayer"] .text-gray-600 {
  color: rgba(232, 238, 252, 0.72) !important;
}

html.dark body[data-demo="finlayer"] .text-gray-700 {
  color: rgba(232, 238, 252, 0.85) !important;
}

html.dark body[data-demo="finlayer"] .text-gray-900 {
  color: #e8eefc !important;
}

html.dark body[data-demo="finlayer"] input::placeholder,
html.dark body[data-demo="finlayer"] textarea::placeholder {
  color: rgba(232, 238, 252, 0.38) !important;
}

html.dark body[data-demo="finlayer"] .bg-gray-100 {
  background-color: rgba(12, 22, 42, 0.55) !important;
}

html.dark body[data-demo="finlayer"] .bg-gray-50 {
  background-color: rgba(10, 18, 34, 0.5) !important;
}

html.dark body[data-demo="finlayer"] .border-gray-200,
html.dark body[data-demo="finlayer"] .border-gray-100,
html.dark body[data-demo="finlayer"] .border-gray-300 {
  border-color: rgba(120, 150, 255, 0.12) !important;
}

html.dark body[data-demo="finlayer"] .hover\:bg-gray-100:hover {
  background-color: rgba(120, 150, 255, 0.08) !important;
}

html.dark body[data-demo="finlayer"] .hover\:bg-brand-100:hover {
  background-color: rgba(70, 95, 255, 0.15) !important;
}

html.dark body[data-demo="finlayer"] .hover\:text-brand-700:hover {
  color: #a5b4ff !important;
}

html.dark body[data-demo="finlayer"] #search-dropdown button,
html.dark body[data-demo="finlayer"] #search-dropdown div {
  color: #e8eefc !important;
}

html.dark body[data-demo="finlayer"] #search-dropdown button:hover {
  background: rgba(120, 150, 255, 0.1) !important;
}

/* Chart.js — eixos e legendas legíveis no escuro */
html.dark body[data-demo="finlayer"] canvas {
  filter: none;
}