/* ==========================================================================
   Nestor — tema-escuro.css
   Modo escuro em AZUL PROFUNDO, nao em preto/cinza.

   Como funciona:
   - Tudo aqui pende de :root[data-theme="dark"]. O atributo e escrito por
     js/tema.js antes da primeira pintura (script inline no <head>), pra nao
     dar flash branco.
   - A regra e redefinir TOKEN, nao componente. O resto do CSS ja consome
     --color-*, entao a troca de tema desce sozinha. Este arquivo so trata os
     poucos pontos que nasceram com cor fixa (backdrops, Quill, sombras) e as
     variaveis do proprio Bootstrap.
   - Carrega DEPOIS de components.css nos dois documentos.

   Escala de fundo, do mais fundo pro mais alto:
     --color-bg        #12112a  chao da pagina
     --color-surface   #1b1a3c  card, header, sidebar, modal
     --color-surface-2 #232250  input, hover, bloco elevado
   Tres niveis, e nao dois, porque no claro a separacao vem da sombra — e
   sombra some no escuro. Aqui quem separa e a luminancia.
   ========================================================================== */

:root[data-theme="dark"] {
  /* ---- Marca ----
     O #232158 da marca e escuro demais pra viver sobre fundo escuro: vira um
     borrao. No escuro o acento sobe de luminancia e mantem o mesmo matiz. */
  /* Rampa do funil no escuro: NAO e a mesma do claro invertida por acaso — la
     ela vai de claro pra escuro, aqui de escuro pra claro, porque o que
     precisa crescer e o contraste contra o fundo. Nos dois casos a etapa mais
     avancada e a de mais peso visual. Validada contra a superficie escura
     (#1b1a3c): dE 17,7 em deuteranopia, protanopia e tritanopia, e
     luminosidade monotonica 0,43 -> 0,79. */
  --color-funil-1: #4a4680;
  --color-funil-2: #7b76c4;
  --color-funil-3: #b6b2f7;
  --color-on-funil-1: #ffffff;
  --color-on-funil-2: #ffffff;
  --color-on-funil-3: #1b1a3c;

  --color-primary: #8d88f2;
  --color-primary-hover: #a09bf5;
  --color-primary-dark: #6f69e0;
  --color-primary-light: rgba(141, 136, 242, 0.16);

  /* Texto que fica EM CIMA do acento. No claro e branco; aqui o acento e
     claro, entao branco sobre ele nao teria contraste — inverte pro azul
     mais escuro da escala. */
  --color-on-primary: #14132e;
  --color-on-primary-soft: rgba(0, 0, 0, 0.18);

  /* ---- Fundo e superficies ---- */
  --color-bg: #12112a;
  --color-surface: #1b1a3c;
  --color-surface-2: #232250;

  /* ---- Texto ---- */
  --color-text: #eae9f8;
  --color-text-muted: #a8a6cf;
  --color-text-muted-2: #7d7aad;

  /* ---- Estados ----
     Escolhidos pra servir aos DOIS usos que o sistema faz deles: preenchimento
     com texto branco por cima (badge, botao) e cor de texto sobre fundo
     escuro. Dai nao serem nem tao claros nem tao saturados quanto o padrao de
     dark theme. Os *-bg viram verniz translucido do proprio tom, que se
     acomoda em qualquer superficie da escala. */
  --color-success: #3fa85c;
  --color-success-bg: rgba(63, 168, 92, 0.18);
  --color-warning: #d99b1f;
  --color-warning-bg: rgba(217, 155, 31, 0.18);
  --color-danger: #e05f4d;
  --color-danger-bg: rgba(224, 95, 77, 0.18);
  --color-info: #4d8ef7;
  --color-info-bg: rgba(77, 142, 247, 0.18);
  --color-neutral: #8a88b0;
  --color-neutral-bg: rgba(138, 136, 176, 0.16);
  --color-purple: #9b7ff5;
  --color-purple-bg: rgba(155, 127, 245, 0.18);

  /* ---- Bordas ---- */
  --color-border: #2d2b5c;
  --color-border-strong: #3a3775;

  /* ---- Sombras ----
     No claro a sombra era azulada e sutil. Aqui precisa ser preta e mais
     densa: sobre fundo escuro, sombra clara nao existe. */
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-popover: 0 10px 34px rgba(0, 0, 0, 0.55);

  /* ---- Vidro do bottom-nav ---- */
  --glass-nav-bg: rgba(27, 26, 60, 0.62);

  /* No escuro a luz vem do acento, nao do branco: um vidro esbranquicado
     sobre fundo azul-noite parece sujeira, nao brilho. */
  --glass-overlay: linear-gradient(
    to bottom,
    rgba(141, 136, 242, 0.16) 0%,
    rgba(35, 34, 80, 0.30) 48%,
    rgba(18, 17, 42, 0.36) 100%
  );

  --glass-highlight: rgba(178, 174, 255, 0.5);
  --glass-borda: rgba(141, 136, 242, 0.24);
  --glass-nav-shadow:
    0 10px 30px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.35);

  /* ---- Bootstrap 5.3 ----
     O Bootstrap tem tema escuro proprio, em cinza-chumbo. Sem reapontar as
     variaveis dele, form-control/dropdown/modal/table viriam cinzas no meio
     de uma interface azul. Aqui elas passam a ler a nossa escala. */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-secondary-bg: var(--color-surface-2);
  --bs-tertiary-bg: var(--color-surface);
  --bs-border-color: var(--color-border);
  --bs-heading-color: var(--color-text);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 141, 136, 242;

  color-scheme: dark;
}

/* ==========================================================================
   Ajustes que os tokens sozinhos nao alcancam
   ========================================================================== */

/* ---- Campos de formulario ----
   O Bootstrap pinta o input com --bs-body-bg, que aqui e o chao da pagina.
   Dentro de um card (--color-surface) o campo sumiria: mesma cor do fundo,
   so a borda separando. Usa a superficie elevada. */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .ns-drawer-tarefa-titulo-input {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] .ns-drawer-tarefa-titulo-input::placeholder {
  color: var(--color-text-muted-2);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] .ns-drawer-tarefa-titulo-input:focus {
  background-color: var(--color-surface-2);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(141, 136, 242, 0.2);
}

/* A seta do select e uma imagem embutida com stroke escuro; no escuro ela
   desaparece. Redesenha com o stroke claro. */
:root[data-theme="dark"] .form-select {
  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='%23a8a6cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---- Backdrops ----
   Eram rgba do azul da marca sobre fundo claro. Sobre fundo ja escuro isso
   quase nao escurece nada — o modal deixava de se destacar. */
:root[data-theme="dark"] .ns-modal-backdrop,
:root[data-theme="dark"] .ns-bottom-sheet-backdrop,
:root[data-theme="dark"] .modal-backdrop {
  background-color: rgba(4, 4, 16, 0.7);
}

/* ---- Contador das colunas do kanban ----
   Era rgba(0,0,0,0.06): preto sobre escuro = invisivel. */
:root[data-theme="dark"] .kanban-col__count {
  background: rgba(255, 255, 255, 0.09);
}

/* ---- Quill ----
   O quill.snow.css e um tema claro fixo: barra branca, borda cinza e icones
   desenhados com stroke/fill escuros. Precisa de tratamento explicito, senao
   fica uma caixa branca cravada no meio do modal escuro. */
:root[data-theme="dark"] .ql-toolbar.ql-snow,
:root[data-theme="dark"] .ql-container.ql-snow {
  border-color: var(--color-border);
}

:root[data-theme="dark"] .ql-toolbar.ql-snow {
  background-color: var(--color-surface-2);
}

:root[data-theme="dark"] .ql-container.ql-snow {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}

:root[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--color-text-muted-2);
}

/* Os icones da barra sao SVG inline: sem reapontar stroke e fill eles somem. */
:root[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: var(--color-text-muted);
}

:root[data-theme="dark"] .ql-snow .ql-fill {
  fill: var(--color-text-muted);
}

:root[data-theme="dark"] .ql-snow .ql-picker {
  color: var(--color-text-muted);
}

:root[data-theme="dark"] .ql-snow .ql-picker-options {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .ql-snow button:hover .ql-stroke,
:root[data-theme="dark"] .ql-snow button.ql-active .ql-stroke {
  stroke: var(--color-primary);
}

:root[data-theme="dark"] .ql-snow button:hover .ql-fill,
:root[data-theme="dark"] .ql-snow button.ql-active .ql-fill {
  fill: var(--color-primary);
}

/* ---- Notyf (toasts) ----
   Ele traz verde/vermelho proprios, que destoam da paleta. */
:root[data-theme="dark"] .notyf__toast {
  box-shadow: var(--shadow-popover);
}

/* ---- Barras de rolagem ----
   A barra clara padrao corta a tela escura. */
:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
  background-clip: content-box;
}

/* ---- PDF de orcamento ----
   Vai pro papel: e branco SEMPRE, tema nenhum encosta nele. O template ja usa
   cor fixa, mas a trava fica explicita pra nao virar bug quando alguem
   tokenizar aquelas regras sem lembrar do PDF. */
:root[data-theme="dark"] .pdf-template,
:root[data-theme="dark"] .pdf-template * {
  color-scheme: light;
}

:root[data-theme="dark"] .pdf-template {
  background: #fff;
  color: #1a1a1a;
}

/* ==========================================================================
   Botao de troca de tema (header)
   ========================================================================== */

.ns-header-tema {
  position: relative;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0;
  color: var(--color-text-muted);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ns-header-tema:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.ns-header-tema:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Um icone por tema, so um visivel de cada vez — troca sem repintar o botao. */
.ns-header-tema .ti-moon { display: block; }
.ns-header-tema .ti-sun { display: none; }

:root[data-theme="dark"] .ns-header-tema .ti-moon { display: none; }
:root[data-theme="dark"] .ns-header-tema .ti-sun { display: block; }

/* ---- Botao primario ----
   O .btn-primary do Bootstrap tem cor de texto propria (--bs-btn-color), que
   nao acompanha nossos tokens: ficava branco sobre o acento claro do escuro,
   com contraste de ~2.6:1. Aqui o texto inverte junto com o fundo. */
:root[data-theme="dark"] .btn-primary {
  --bs-btn-color: var(--color-on-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-active-color: var(--color-on-primary);
  --bs-btn-disabled-color: var(--color-on-primary);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}

/* Mesma historia do .btn-outline-primary, que herda a cor do acento. */
:root[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
}

/* ---- Logo ----
   A placa segue a cor da escrita "Nestor", que no escuro e o acento claro.
   O tracado branco herdado do tema claro cairia pra 3.0:1 em cima dele — o
   bonequinho ficava lavado. Aqui so o brightness(0) e aplicado: tracado
   escuro sobre a placa clara, mesma logica invertida do --color-on-primary. */
:root[data-theme="dark"] .brand-logo {
  filter: brightness(0);
}