/* ══════════════════════════════════════════════════════════════════════
   FixaOS — Tokens de tema (claro / escuro / automático)
   Fonte única de cor para as telas migradas (por ora: dashboard + shell
   compartilhado em layouts/main.php). Nenhum hex deve existir fora daqui
   nas partes que já usam --fx-token.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --surface-0: #F4F5F7;
  --surface-1: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-nav: #131A2B;

  --text-1: #1A2233;
  --text-2: #5C6474;
  --text-3: #8A91A0;
  --text-4: #B7BDC8;

  --accent: #378ADD;
  --accent-hover: #2C6FB0;
  --accent-bg: #E6F1FB;
  --accent-text: #185FA5;

  --success: #0F6E56;  --success-bg: #F0F7F4;  --success-fill: #4FA37E;
  --warning: #854F0B;  --warning-bg: #FBF7EF;  --warning-fill: #D9A441;
  --danger:  #A32D2D;  --danger-bg:  #FCEBEB;  --danger-fill:  #C2453F;

  --border: #E3E6EB;
  --border-strong: #C4C9D2;
  --radius: 9px;
  --radius-lg: 12px;

  /* Sem isto, o navegador decide a cor dos controles NATIVOS (ex.: o ícone do calendário de
     input[type=date]) pela preferência do SISTEMA, não pelo tema escolhido no app — se o SO
     estiver no escuro mas o usuário escolheu claro aqui, o navegador desenha um ícone branco
     (pensado pra fundo escuro) em cima do input branco do tema claro, e ele fica invisível. */
  color-scheme: light;
}

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

  --surface-0: #0F1523;
  --surface-1: #1A2233;
  --surface-2: #212B3E;
  --surface-nav: #131A2B;

  --text-1: #E8EBF0;
  --text-2: #A9B0BF;
  --text-3: #8B93A5;
  --text-4: #5B6377;

  --accent: #3B82D6;
  --accent-hover: #4A8FDF;
  --accent-bg: rgba(93,162,232,0.13);
  --accent-text: #8FBEF0;

  --success: #6FCFAC;  --success-bg: rgba(93,202,165,0.11);  --success-fill: #4FA37E;
  --warning: #EBB55F;  --warning-bg: rgba(250,199,117,0.11); --warning-fill: #EBB55F;
  --danger:  #F09595;  --danger-bg:  rgba(226,75,74,0.13);   --danger-fill:  #C2453F;

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
}

/* ── Base: o corpo da aplicação passa a obedecer os tokens ─────────────── */
body {
  background: var(--surface-0);
  color: var(--text-1);
}

/* ── Transições de tema — só cor, nunca layout (spec 1.6) ───────────────
   Escopo restrito às superfícies que realmente mudam de cor entre os temas,
   para não pagar o custo de recalcular transição em toda a árvore do DOM. */
body, .card, .dropdown-menu, .dropdown-item, .modal-content, .modal-header, .modal-footer,
.form-control, .form-select, .list-group-item, #topbar, .table, canvas,
.fx-dash, .fx-dash * {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, fill .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .card, .dropdown-menu, .dropdown-item, .modal-content, .modal-header, .modal-footer,
  .form-control, .form-select, .list-group-item, #topbar, .table, canvas,
  .fx-dash, .fx-dash * {
    transition: none !important;
  }
}

/* ── Scrollbars ──────────────────────────────────────────────────────── */
html { scrollbar-color: var(--border-strong) var(--surface-0); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ── Autofill do navegador ───────────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-1);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset;
  box-shadow: 0 0 0 1000px var(--surface-1) inset;
  caret-color: var(--text-1);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Bootstrap: baseline escuro para os componentes usados em toda a
   aplicação (dropdowns, modais, inputs, cards, tabelas). Isso é necessário
   para os tokens funcionarem globalmente sem deixar as outras telas com
   texto ilegível quando o usuário liga o tema escuro; não é um redesenho
   dessas telas — cores específicas em style="" inline continuam como estão
   até serem migradas.
   Os !important abaixo são necessários porque public/css/app.css já define
   essas mesmas propriedades com !important (padrão pré-existente do
   projeto) — sem isso, o override do tema escuro simplesmente perde a
   guerra de especificidade e o texto fica ilegível. ────────────────────── */
[data-theme="dark"] .dropdown-menu {
  background: var(--surface-1) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.5) !important;
}
[data-theme="dark"] .dropdown-item { color: var(--text-1) !important; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background: var(--surface-2) !important; color: var(--text-1) !important; }
[data-theme="dark"] .dropdown-divider { border-color: var(--border) !important; }
[data-theme="dark"] .dropdown-header { color: var(--text-2) !important; }
/* app.css:113 tem "#topbar h6 { color: #0f172a !important }" — pensada só pro título da página
   (.tb-titulo), mas como o dropdown "Aparência" também é um <h6> dentro de #topbar, essa regra
   legada acaba pegando ele também, e o #topbar (ID) na especificidade dela não é vencido por
   nenhuma combinação de classe sozinha. Repete o mesmo #topbar aqui pra empatar no ID e, com
   mais uma classe/atributo no seletor, vencer por especificidade — sem precisar mexer na regra
   legada (que continua certa pro título da página, fora do escopo desta correção). */
[data-theme="dark"] #topbar .dropdown-header { color: var(--text-2) !important; }

[data-theme="dark"] .modal-content { background: var(--surface-1) !important; color: var(--text-1) !important; border-color: var(--border) !important; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--border) !important; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

[data-theme="dark"] .form-control,
/* .form-select usa "background" (shorthand) do Bootstrap pra embutir a seta
   como background-image; sobrescrever com "background: X" apaga essa seta.
   Por isso aqui é background-color + a seta redesenhada numa cor clara,
   senão o campo fica sem nenhum indicador de que é um select no tema escuro. */
[data-theme="dark"] .form-select {
  background-color: var(--surface-2) !important; color: var(--text-1) !important; border-color: var(--border) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}
[data-theme="dark"] .form-control:focus {
  background: var(--surface-2) !important; color: var(--text-1) !important; border-color: var(--accent) !important;
}
[data-theme="dark"] .form-select:focus {
  background-color: var(--surface-2) !important; color: var(--text-1) !important; border-color: var(--accent) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-3) !important; }
[data-theme="dark"] .form-control:disabled { background: var(--surface-1) !important; color: var(--text-3) !important; }

/* input[type=date]: um pouco de respiro pro ícone nativo do calendário não ficar colado na
   borda direita do campo — sem isso, ao lado de "dd/mm/aaaa" o campo parece apertado. */
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 6px; padding: 2px; cursor: pointer; }
input[type="date"] { padding-right: .5rem; }

[data-theme="dark"] .card { background: var(--surface-1); color: var(--text-1); border-color: var(--border) !important; }
[data-theme="dark"] .card-header { background: var(--surface-1) !important; color: var(--text-1) !important; border-color: var(--border) !important; }
[data-theme="dark"] .table { color: var(--text-1) !important; }
[data-theme="dark"] .table > :not(caption) > * > * { background: transparent !important; color: var(--text-1) !important; border-color: var(--border) !important; }
[data-theme="dark"] .table thead th { background: var(--surface-2) !important; color: var(--text-3) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .table-light { background: var(--surface-2) !important; color: var(--text-1) !important; }
[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: var(--surface-2) !important; }
[data-theme="dark"] .list-group-item { background: var(--surface-1); color: var(--text-1); border-color: var(--border); }
[data-theme="dark"] .btn-outline-secondary { color: var(--text-2) !important; border-color: var(--border-strong) !important; }
[data-theme="dark"] .text-muted { color: var(--text-3) !important; }
[data-theme="dark"] .form-label { color: var(--text-2) !important; }
/* .form-text (dica abaixo de campo, ex.: "JPG, PNG ou WebP até 2MB") nunca tinha cor própria no
   tema escuro — herdava um cinza claro pensado pra fundo claro e ficava quase ilegível. Mesma
   categoria de bug de contraste já corrigida em vários outros componentes deste projeto. */
[data-theme="dark"] .form-text { color: var(--text-3) !important; }

/* ── Marketplace: sempre em tema claro, independente do tema escuro ligado
   pelo usuário (área de vitrine/anúncios tem identidade visual própria). ── */
.fx-no-dark {
  --surface-0: #F4F5F7; --surface-1: #FFFFFF; --surface-2: #F7F8FA; --surface-nav: #131A2B;
  --text-1: #1A2233; --text-2: #5C6474; --text-3: #8A91A0; --text-4: #B7BDC8;
  --accent: #378ADD; --accent-hover: #2C6FB0; --accent-bg: #E6F1FB; --accent-text: #185FA5;
  --success: #0F6E56; --success-bg: #F0F7F4; --success-fill: #4FA37E;
  --warning: #854F0B; --warning-bg: #FBF7EF; --warning-fill: #D9A441;
  --danger:  #A32D2D; --danger-bg:  #FCEBEB; --danger-fill:  #C2453F;
  --border: #E3E6EB; --border-strong: #C4C9D2;
  background: var(--surface-0);
  color: var(--text-1);
  color-scheme: light;
}

/* ── Impressão e PDF: sempre em tema claro, mesmo com o escuro ativo ────
   (as telas de impressão/orçamento usam layouts próprios que não incluem
   este arquivo, então isso é apenas um cinto-de-segurança). */
@media print {
  html, body { background: #fff !important; color: #1A2233 !important; }
  [data-theme] { color-scheme: light; }
}