/* ════════════════════════════════════════════════════════════════
   responsive-dark-fix.css
   V2.0 — Dark Mode Contrast Fix + Responsive Design
   Grupo Certificar — Ferramentas

   Este arquivo corrige:
   1. Contraste insuficiente no tema escuro (cores hardcoded)
   2. Responsividade para desktop-first + mobile

   Carregado APÓS todos os outros CSS para ter precedência.
   ════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PARTE 1 — DARK MODE CONTRAST FIXES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1.1 Variáveis adicionais para dark mode ── */
[data-theme="dark"] {
  --text-strong: #f1f5f9;
  --text-secondary: #cbd5e1;
  --dark-card: #1e293b;
  --dark-card-hover: #263548;
  --dark-surface: #162032;
  --dark-input: #1e293b;
  --dark-blue-bg: #1e3a5f;
  --dark-green-bg: #14532d;
  --dark-yellow-bg: #451a03;
  --dark-red-bg: #450a0a;
  --dark-purple-bg: #3b1f6e;
  --dark-indigo-bg: #272066;
}

/* ── 1.2 Global text overrides ── */
[data-theme="dark"] body {
  color: #e2e8f0;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] li {
  color: inherit;
}

/* ── 1.3 Links ── */
[data-theme="dark"] a {
  color: var(--primary);
}

[data-theme="dark"] a:hover {
  color: var(--primary-hover);
}

/* ── 1.4 Hardcoded dark text colors → light ── */
/* These are colors that are dark on light bg but unreadable on dark bg */
[data-theme="dark"] [style*="color:#1e40af"],
[data-theme="dark"] [style*="color: #1e40af"] {
  color: #93bbfc !important;
}

[data-theme="dark"] [style*="color:#92400e"],
[data-theme="dark"] [style*="color: #92400e"] {
  color: #fbbf24 !important;
}

[data-theme="dark"] [style*="color:#6b21a8"],
[data-theme="dark"] [style*="color: #6b21a8"] {
  color: #c4b5fd !important;
}

[data-theme="dark"] [style*="color:#15803d"],
[data-theme="dark"] [style*="color: #15803d"] {
  color: #4ade80 !important;
}

[data-theme="dark"] [style*="color:#166534"],
[data-theme="dark"] [style*="color: #166534"] {
  color: #4ade80 !important;
}

[data-theme="dark"] [style*="color:#713f12"],
[data-theme="dark"] [style*="color: #713f12"] {
  color: #fbbf24 !important;
}

[data-theme="dark"] [style*="color:#78350f"],
[data-theme="dark"] [style*="color: #78350f"] {
  color: #fbbf24 !important;
}

[data-theme="dark"] [style*="color:#1e3a5f"],
[data-theme="dark"] [style*="color: #1e3a5f"] {
  color: #93bbfc !important;
}

[data-theme="dark"] [style*="color:#3730a3"],
[data-theme="dark"] [style*="color: #3730a3"] {
  color: #a5b4fc !important;
}

[data-theme="dark"] [style*="color:#d97706"],
[data-theme="dark"] [style*="color: #d97706"] {
  color: #fbbf24 !important;
}

[data-theme="dark"] [style*="color:#dc2626"],
[data-theme="dark"] [style*="color: #dc2626"] {
  color: #f87171 !important;
}

[data-theme="dark"] [style*="color:#16a34a"],
[data-theme="dark"] [style*="color: #16a34a"] {
  color: #4ade80 !important;
}

[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color: #1f2937"] {
  color: #e2e8f0 !important;
}

[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"] {
  color: #e2e8f0 !important;
}

[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #4b5563"] {
  color: #cbd5e1 !important;
}

[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color: #9ca3af"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"] {
  color: #e2e8f0 !important;
}

[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"] {
  color: #cbd5e1 !important;
}

[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#777"],
[data-theme="dark"] [style*="color: #777"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color: #888"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color: #999"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#aaa"],
[data-theme="dark"] [style*="color: #aaa"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#2563eb"],
[data-theme="dark"] [style*="color: #2563eb"] {
  color: #60a5fa !important;
}

[data-theme="dark"] [style*="color:#3b82f6"],
[data-theme="dark"] [style*="color: #3b82f6"] {
  color: #60a5fa !important;
}

[data-theme="dark"] [style*="color:#3b5998"],
[data-theme="dark"] [style*="color: #3b5998"] {
  color: #93bbfc !important;
}

[data-theme="dark"] [style*="color:#e74c3c"],
[data-theme="dark"] [style*="color: #e74c3c"] {
  color: #f87171 !important;
}

[data-theme="dark"] [style*="color:#27ae60"],
[data-theme="dark"] [style*="color: #27ae60"] {
  color: #4ade80 !important;
}

[data-theme="dark"] [style*="color:#c62828"],
[data-theme="dark"] [style*="color: #c62828"] {
  color: #f87171 !important;
}

/* ── 1.5 Hardcoded light backgrounds → dark ── */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
  background: #1e293b !important;
  background-color: #1e293b !important;
}

[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fafafa"] {
  background: #162032 !important;
}

[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"] {
  background: #162032 !important;
}

[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"] {
  background: #0f172a !important;
}

[data-theme="dark"] [style*="background:#e5e7eb"],
[data-theme="dark"] [style*="background: #e5e7eb"],
[data-theme="dark"] [style*="background:#e2e8f0"],
[data-theme="dark"] [style*="background: #e2e8f0"] {
  background: #334155 !important;
}

/* Colored light backgrounds → dark variants */
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #dbeafe"],
[data-theme="dark"] [style*="background:#e0e7ff"],
[data-theme="dark"] [style*="background: #e0e7ff"],
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background:#f0f4ff"],
[data-theme="dark"] [style*="background: #f0f4ff"] {
  background: #1e3a5f !important;
}

[data-theme="dark"] [style*="background:#dcfce7"],
[data-theme="dark"] [style*="background: #dcfce7"],
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"] {
  background: #14532d !important;
}

[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"],
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"] {
  background: #451a03 !important;
}

[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"] {
  background: #450a0a !important;
}

[data-theme="dark"] [style*="background:#f3e8ff"],
[data-theme="dark"] [style*="background: #f3e8ff"] {
  background: #3b1f6e !important;
}

/* Border overrides for inline styles */
[data-theme="dark"] [style*="border-color:#e5e7eb"],
[data-theme="dark"] [style*="border-color: #e5e7eb"],
[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] {
  border-color: #334155 !important;
}

[data-theme="dark"] [style*="border:1px solid #bbf7d0"],
[data-theme="dark"] [style*="border: 1px solid #bbf7d0"] {
  border-color: #166534 !important;
}

[data-theme="dark"] [style*="border:1px solid #d1d5db"],
[data-theme="dark"] [style*="border: 1px solid #d1d5db"] {
  border-color: #475569 !important;
}

/* ── 1.6 Proposta Editor (Fullscreen) — COMPLETE dark mode ── */
[data-theme="dark"] #proposta-editor-fullscreen {
  background: #0f172a !important;
}

[data-theme="dark"] .proposta-toolbar {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .proposta-toolbar .toolbar-title {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .proposta-toolbar .toolbar-status {
  color: #94a3b8 !important;
}

[data-theme="dark"] .proposta-toolbar .btn-voltar {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .proposta-toolbar .btn-voltar:hover {
  background: #334155 !important;
}

[data-theme="dark"] .proposta-toolbar .btn-salvar {
  background: #1e293b !important;
  border-color: #60a5fa !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .proposta-toolbar .btn-salvar:hover {
  background: #1e3a5f !important;
}

[data-theme="dark"] .proposta-a4-page {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .prop-campo {
  border-bottom-color: #3b82f6 !important;
  background: #162032 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .prop-campo:focus {
  background: #1e3a5f !important;
  border-bottom-color: #60a5fa !important;
}

[data-theme="dark"] .prop-campo::placeholder {
  color: #475569 !important;
}

[data-theme="dark"] .prop-campo-readonly {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .prop-valor-calculado {
  background: #14532d !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .prop-btn-adicionar {
  border-color: #3b82f6 !important;
  background: #162032 !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .prop-btn-adicionar:hover {
  background: #1e3a5f !important;
}

[data-theme="dark"] .prop-img-drop {
  border-color: #3b82f6 !important;
  background: #162032 !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .prop-img-drop.dragover {
  background: #1e3a5f !important;
}

[data-theme="dark"] .prop-clausulas {
  background: #162032 !important;
  border-top-color: #334155 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .prop-processo-card {
  border-color: #334155 !important;
  background: #1e293b !important;
}

[data-theme="dark"] .prop-processo-card .btn-remove-processo {
  color: #64748b !important;
}

[data-theme="dark"] .prop-processo-card .btn-remove-processo:hover {
  color: #f87171 !important;
}

[data-theme="dark"] .prop-section-title {
  color: #94a3b8 !important;
}

[data-theme="dark"] .prop-totais {
  background: #162032 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .prop-textarea {
  background: #162032 !important;
  border-bottom-color: #3b82f6 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .prop-textarea:focus {
  background: #1e3a5f !important;
  border-bottom-color: #60a5fa !important;
}

/* ── 1.7 Dashboard ── */
[data-theme="dark"] .dash-stat-card {
  background: var(--white) !important;
}

[data-theme="dark"] .dash-stat-icon {
  opacity: 0.9;
}

[data-theme="dark"] .dash-stat-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .dash-stat-value {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .dash-badge-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .dash-badge-title {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .dash-badge-desc {
  color: #94a3b8 !important;
}

[data-theme="dark"] .dash-badge-next {
  color: #94a3b8 !important;
}

[data-theme="dark"] .ranking-period-btn {
  background: var(--white) !important;
  color: #94a3b8 !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .ranking-period-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ── 1.8 Results / Analysis cards ── */
[data-theme="dark"] .result-card,
[data-theme="dark"] .result-section {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .result-card h3,
[data-theme="dark"] .result-card h4 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .result-card p,
[data-theme="dark"] .result-card span {
  color: #cbd5e1 !important;
}

/* Badge colors in dark mode */
[data-theme="dark"] .passivel-badge.sim {
  background: #14532d !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .passivel-badge.nao {
  background: #450a0a !important;
  color: #f87171 !important;
}

/* ── 1.9 Modals ── */
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .proposta-modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .proposta-modal {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal h2,
[data-theme="dark"] .modal h3 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal p,
[data-theme="dark"] .modal span,
[data-theme="dark"] .modal label {
  color: #cbd5e1 !important;
}

/* ── 1.10 Reenvio modal (JS-generated) ── */
[data-theme="dark"] div[style*="border-radius:16px"][style*="max-width:520px"],
[data-theme="dark"] div[style*="border-radius:16px"][style*="max-width: 520px"] {
  background: #1e293b !important;
}

[data-theme="dark"] div[style*="border-radius:16px"] h3,
[data-theme="dark"] div[style*="border-radius:16px"] h4 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] div[style*="border-radius:16px"] p,
[data-theme="dark"] div[style*="border-radius:16px"] span,
[data-theme="dark"] div[style*="border-radius:16px"] label {
  color: #cbd5e1 !important;
}

[data-theme="dark"] div[style*="border-radius:16px"] input,
[data-theme="dark"] div[style*="border-radius:16px"] textarea {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

/* ── 1.11 Pipedrive pre-step modal ── */
[data-theme="dark"] .pipedrive-pre-step,
[data-theme="dark"] div[id*="pipedrive"] {
  background: #1e293b !important;
}

/* ── 1.12 Filter buttons / tab-like buttons ── */
[data-theme="dark"] button[style*="background:#e5e7eb"],
[data-theme="dark"] button[style*="background: #e5e7eb"] {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

/* ── 1.13 Table headers and rows ── */
[data-theme="dark"] table th {
  background: #162032 !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] table td {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] table tr:hover td {
  background: #162032 !important;
}

[data-theme="dark"] table tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.3);
}

/* ── 1.14 Select / dropdown in dark mode ── */
[data-theme="dark"] select option {
  background: #1e293b;
  color: #e2e8f0;
}

/* ── 1.15 Scrollbar dark mode ── */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f172a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ── 1.16 Code/pre blocks ── */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: #162032 !important;
  color: #e2e8f0 !important;
}

/* ── 1.17 Tooltip / popover dark mode ── */
[data-theme="dark"] [class*="tooltip"],
[data-theme="dark"] [class*="popover"] {
  background: #334155 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

/* ── 1.18 History/list items with hardcoded colors ── */
[data-theme="dark"] .history-item,
[data-theme="dark"] .historico-card,
[data-theme="dark"] [class*="history"] {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

/* ── 1.19 Script cards (Scripts Comerciais) ── */
[data-theme="dark"] .script-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .script-card .script-text {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .script-card .script-text .highlight {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93bbfc !important;
}

/* ── 1.20 Badges / status indicators ── */
[data-theme="dark"] .badge,
[data-theme="dark"] [class*="badge"] {
  border-color: transparent !important;
}

/* ── 1.21 Form fieldsets and legend ── */
[data-theme="dark"] fieldset {
  border-color: #334155 !important;
}

[data-theme="dark"] legend {
  color: #94a3b8 !important;
}

/* ── 1.22 Admin page — scope/KB/user cards (JS-generated) ── */
[data-theme="dark"] .admin-card,
[data-theme="dark"] .scope-card,
[data-theme="dark"] .user-card,
[data-theme="dark"] .kb-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: #e2e8f0 !important;
}

/* Generic card-like divs with white background in admin */
[data-theme="dark"] .card,
[data-theme="dark"] [class*="card"] {
  color: #e2e8f0;
}

[data-theme="dark"] .card-title {
  color: #f1f5f9 !important;
}

/* ── 1.23 Toast messages ── */
[data-theme="dark"] .toast {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* ── 1.24 Buttons with border styles ── */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] button[style*="border:1px solid"] {
  border-color: #475569 !important;
}

/* ── 1.25 Accordion in dark mode ── */
[data-theme="dark"] .accordion-header {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .accordion-body {
  color: #cbd5e1 !important;
}

/* ── 1.26 SVG stroke colors in dark mode ── */
[data-theme="dark"] svg[stroke="#0f4c81"] {
  stroke: #60a5fa;
}

/* ── 1.27 Messages / chat area ── */
[data-theme="dark"] .msg-content,
[data-theme="dark"] [class*="message"] {
  background: #162032 !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

/* ── 1.28 Box-shadow overrides ── */
[data-theme="dark"] [style*="box-shadow"] {
  --tw-shadow-color: rgba(0, 0, 0, 0.3);
}

/* ── 1.29 HR / dividers ── */
[data-theme="dark"] hr {
  border-color: #334155 !important;
}

/* ── 1.30 Modal-perguntas (question list) ── */
[data-theme="dark"] .modal-perguntas-lista li {
  background: #162032 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

/* ── 1.31 Modal-dica ── */
[data-theme="dark"] .modal-dica {
  background: #451a03 !important;
  color: #fbbf24 !important;
  border-color: #92400e !important;
}

/* ── 1.32 General catch-all for remaining light backgrounds ── */
[data-theme="dark"] [style*="background:#f8faff"],
[data-theme="dark"] [style*="background: #f8faff"] {
  background: #162032 !important;
}

[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"] {
  background: #1e3a5f !important;
}

[data-theme="dark"] [style*="background:#eef2ff"],
[data-theme="dark"] [style*="background: #eef2ff"] {
  background: #272066 !important;
}

/* ── 1.33 Propostas tab - table and status badges ── */
[data-theme="dark"] .propostas-table th {
  background: #162032 !important;
}

[data-theme="dark"] .proposta-status-badge.rascunho {
  background: #334155 !important;
  color: #94a3b8 !important;
}

/* ── 1.34 Login page (index.html) specifics ── */
[data-theme="dark"] .login-card {
  background: #1e293b !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .form-input {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

[data-theme="dark"] .security-badge {
  background: #162032 !important;
  color: #94a3b8 !important;
}

/* ── 1.35 Confirm/dialog modals from JS ── */
[data-theme="dark"] div[style*="position:fixed"][style*="z-index"] > div[style*="background:#fff"],
[data-theme="dark"] div[style*="position:fixed"][style*="z-index"] > div[style*="background: #fff"],
[data-theme="dark"] div[style*="position: fixed"][style*="z-index"] > div[style*="background:#fff"],
[data-theme="dark"] div[style*="position: fixed"][style*="z-index"] > div[style*="background: #fff"] {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

/* ── 1.36 Additional muted text override ── */
[data-theme="dark"] .muted,
[data-theme="dark"] .text-muted,
[data-theme="dark"] [class*="muted"] {
  color: #94a3b8 !important;
}

/* ── 1.37 Emphasis - strong and bold text should be brighter ── */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: #f1f5f9;
}

/* ── 1.38 User/admin info box colors ── */
[data-theme="dark"] .user-info {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .user-name {
  color: #e2e8f0 !important;
}

/* ── 1.39 Nav tab text should be clearly visible ── */
[data-theme="dark"] .nav-tab {
  color: #94a3b8 !important;
}

[data-theme="dark"] .nav-tab:hover {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .nav-tab.active {
  color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PARTE 2 — RESPONSIVE DESIGN (Desktop-first)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 2.1 Tablet Landscape (max-width: 1024px) ── */
@media (max-width: 1024px) {
  .main {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .header-inner {
    max-width: 100% !important;
  }

  .nav-tabs-inner {
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  .proposta-a4-page {
    width: 100% !important;
    max-width: 794px !important;
    padding: 32px 36px !important;
  }
}

/* ── 2.2 Tablet Portrait (max-width: 768px) ── */
@media (max-width: 768px) {
  .header {
    padding: 0 12px !important;
    height: 54px !important;
  }

  .logo-text {
    font-size: 13px !important;
  }

  .logo-text span {
    font-size: 10px !important;
  }

  /* Nav tabs: horizontal scroll */
  .nav-tabs-bar {
    top: 54px !important;
  }

  .nav-tabs-inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px !important;
  }

  .nav-tabs-inner::-webkit-scrollbar {
    display: none;
  }

  .nav-tab {
    padding: 10px 14px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }

  .nav-tab .tab-label {
    display: inline !important;
  }

  .main {
    padding: 24px 12px 40px !important;
    padding-top: calc(54px + 44px + 24px) !important;
  }

  /* Dashboard stats grid */
  .dash-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .dash-stat-card {
    padding: 14px !important;
  }

  /* Cards */
  .card {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  /* Upload row */
  .upload-row {
    grid-template-columns: 1fr !important;
  }

  /* Action row */
  .action-row {
    flex-direction: column !important;
  }

  /* Proposta modal */
  .proposta-modal {
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  .proposta-modal-body {
    padding: 16px !important;
  }

  .proposta-form-row {
    grid-template-columns: 1fr !important;
  }

  /* Results section */
  .result-section,
  .result-card {
    padding: 16px !important;
  }

  /* Proposta editor */
  .proposta-toolbar {
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .proposta-toolbar button {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  .proposta-a4-wrapper {
    padding: 16px 8px !important;
  }

  .proposta-a4-page {
    padding: 24px 20px !important;
    min-height: auto !important;
    font-size: 12px !important;
  }

  /* Propostas table — horizontal scroll */
  .propostas-list-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .propostas-table {
    min-width: 600px;
  }

  /* Admin page */
  .admin-nav,
  .admin-sidebar {
    width: 100% !important;
    position: static !important;
  }

  /* Admin grid */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Admin main content */
  .admin-main,
  .admin-content {
    margin-left: 0 !important;
    padding: 16px !important;
  }
}

/* ── 2.3 Mobile Landscape (max-width: 640px) ── */
@media (max-width: 640px) {
  .header-right .user-name {
    display: none !important;
  }

  .btn-logout span {
    display: none;
  }

  /* Dashboard quick actions */
  .dashboard-quick-actions {
    flex-direction: column !important;
  }

  .dashboard-quick-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Pipedrive options */
  .pipedrive-options {
    flex-direction: column !important;
  }

  /* Proposta send buttons */
  .proposta-send-btns {
    flex-direction: column !important;
  }

  .btn-send-proposta {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Passivel badges */
  .passivel-badges {
    flex-direction: column !important;
  }

  /* Modal overlays — full width on mobile */
  .proposta-modal-overlay {
    padding: 12px 8px !important;
  }

  .proposta-modal {
    border-radius: 10px !important;
  }

  /* Admin tabs */
  .admin-tabs,
  .nav-tabs-admin {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Generic flex layouts */
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }
}

/* ── 2.4 Mobile Portrait (max-width: 480px) ── */
@media (max-width: 480px) {
  body {
    font-size: 13px !important;
  }

  .header {
    height: 48px !important;
    padding: 0 10px !important;
  }

  .logo-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .logo-text {
    font-size: 12px !important;
  }

  .logo-text span {
    display: none;
  }

  .nav-tabs-bar {
    top: 48px !important;
  }

  .nav-tab {
    padding: 8px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }

  .nav-tab svg {
    width: 16px !important;
    height: 16px !important;
  }

  .main {
    padding-top: calc(48px + 40px + 16px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 32px !important;
  }

  /* Dashboard stats — single column */
  .dash-stats {
    grid-template-columns: 1fr !important;
  }

  /* Card title */
  .card-title {
    font-size: 14px !important;
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary,
  .btn-action {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* Form elements */
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 10px 12px !important;
  }

  /* Proposta editor — even tighter */
  .proposta-toolbar {
    padding: 6px 8px !important;
  }

  .proposta-toolbar .toolbar-title {
    font-size: 12px !important;
  }

  .proposta-a4-page {
    padding: 16px 12px !important;
    font-size: 11px !important;
  }

  /* Modal fullscreen on small devices */
  .proposta-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }

  .proposta-modal {
    border-radius: 0 !important;
    max-width: 100% !important;
    min-height: 100vh;
  }

  .proposta-modal-body {
    max-height: none !important;
    padding: 12px !important;
  }

  /* Badge smaller */
  .passivel-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* User avatar smaller */
  .user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  /* Footer */
  .footer {
    font-size: 11px !important;
    padding: 12px 8px !important;
  }
}

/* ── 2.5 Small phone (max-width: 360px) ── */
@media (max-width: 360px) {
  .nav-tab {
    padding: 8px 8px !important;
    font-size: 11px !important;
  }

  .card {
    padding: 12px !important;
  }

  .proposta-a4-page {
    padding: 12px 8px !important;
  }
}

/* ── 2.6 Admin page layout responsive ── */
@media (max-width: 768px) {
  /* Admin navigation — stack vertically */
  .admin-layout {
    flex-direction: column !important;
  }

  .admin-sidebar,
  .admin-nav,
  nav[class*="admin"] {
    width: 100% !important;
    position: static !important;
    height: auto !important;
  }

  .admin-main-content,
  .admin-body,
  main[class*="admin"] {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Admin tab navigation — horizontal scroll */
  .admin-tabs-bar,
  .admin-nav-tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 2.7 Print styles ── */
@media print {
  .header,
  .nav-tabs-bar,
  .footer,
  .btn-theme-toggle,
  .proposta-toolbar {
    display: none !important;
  }

  .main {
    padding-top: 0 !important;
    max-width: 100% !important;
  }

  .proposta-a4-page {
    box-shadow: none !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ── 2.8 Safe area for notched devices ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  .header {
    padding-left: calc(12px + env(safe-area-inset-left)) !important;
    padding-right: calc(12px + env(safe-area-inset-right)) !important;
  }
}

/* ── 2.9 Smooth transitions for theme switch ── */
html[data-theme] body,
html[data-theme] .header,
html[data-theme] .nav-tabs-bar,
html[data-theme] .card,
html[data-theme] .main,
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select,
html[data-theme] button {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── 2.10 Focus visible for accessibility ── */
*:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* ── 2.11 Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}