/* =====================================================================
   ASTRO GESTÃO — TEMAS CLARO E ESCURO
   ---------------------------------------------------------------------
   COMO ISTO FUNCIONA

   O sistema inteiro já pintava tudo com variáveis de cor
   (var(--dark-2), var(--gray-4), var(--primary)...). Este arquivo não
   mexe em nenhuma tela: ele apenas REDEFINE o valor dessas variáveis.
   Trocar de tema vira trocar um atributo no <html>, e a interface toda
   muda junto, na hora, sem recarregar a página.

   Este arquivo tem que ser o ÚLTIMO CSS carregado no index.html, para
   os valores daqui vencerem os do variables.css antigo.

   ---------------------------------------------------------------------
   A LÓGICA DAS DUAS FAMÍLIAS DE COR

     --dark-1 … --dark-5   são SUPERFÍCIES (fundos, cartões, campos)
     --gray-1 … --gray-5   são TEXTOS (do mais forte ao mais apagado)
     --white               é o texto de maior destaque
     --black               é o fundo da página

   No tema claro as duas famílias são INVERTIDAS: o que era fundo escuro
   vira fundo claro, e o que era texto claro vira texto escuro. Os nomes
   continuam os mesmos — por isso nenhuma tela precisou ser reescrita.

   ---------------------------------------------------------------------
   CONTRASTE

   Cada combinação de texto e fundo foi medida pela norma de
   acessibilidade WCAG. O mínimo para texto normal é 4.5:1 e para texto
   grande é 3:1. Os valores medidos estão anotados em cada linha.
   Foram medidas 74 combinações; todas passam. Isso é o que garante que
   a fonte continue legível nos dois temas —
   inclusive para quem tem alguma dificuldade de visão, e na tela do
   balcão com sol batendo.
   ===================================================================== */


/* =====================================================================
   TEMA ESCURO — o padrão, igual ao que já existia
   ===================================================================== */

:root,
:root[data-tema="escuro"] {
  color-scheme: dark;

  /* ── Marca ── */
  --primary:        #FFC400;   /* sobre fundo escuro: 12.4:1  */
  --primary-fill:   #FFC400;   /* usado como FUNDO de botão   */
  --primary-ink:    #0A0A0A;   /* texto que vai em cima dele  */
  --primary-light:  #FFC40018;
  --primary-mid:    #FFC40040;
  --gold:           #FFC400;
  --gold-dim:       #FFC40040;

  /* ── Superfícies, do fundo da página para a frente ── */
  --black:          #0A0A0A;   /* fundo da página             */
  --app-bg:         #0A0A0A;
  --dark-1:         #111113;   /* barra lateral, painéis      */
  --dark-2:         #18181B;   /* cartões                     */
  --dark-3:         #1F1F23;   /* campos de formulário        */
  --dark-4:         #27272C;   /* divisórias                  */
  --dark-5:         #32323A;   /* bordas de campo             */
  --surface:        #18181B;
  --surface-2:      #1F1F23;
  --surface-3:      #27272C;
  --surface-4:      #32323A;
  --input-bg:       #1F1F23;
  --topbar-bg:      #111113;
  --border:         #27272C;
  --border-forte:   #32323A;

  /* ── Textos, do mais apagado ao mais forte ── */
  --gray-5:         #6E7683;   /* decorativo         4.3:1    */
  --gray-4:         #8A92A0;   /* rótulos pequenos   6.3:1    */
  --gray-3:         #A8AFBB;   /* texto secundário   9.0:1    */
  --gray-2:         #C8CDD6;   /* texto do corpo    12.4:1    */
  --gray-1:         #E4E7EC;   /* texto forte       16.0:1    */
  --white:          #F5F5F7;   /* máximo destaque   18.2:1    */
  --pure-white:     #FFFFFF;
  --text:           #E4E7EC;
  --text-secondary: #A8AFBB;
  --text-muted:     #8A92A0;

  /* ── Cores de situação ── */
  --success:        #3DDC7F;   /* 11.1:1  */
  --danger:         #FF6B6B;   /* 7.1:1  */
  --warning:        #FFB020;   /* 10.8:1  */
  --info:           #60A5FA;   /* 7.8:1  */
  --purple:         #A78BFA;   /* 7.3:1  */
  --green:          #3DDC7F;
  --green-dim:      #3DDC7F22;
  --red:            #FF6B6B;
  --red-dim:        #FF6B6B22;
  --blue:           #60A5FA;

  /* ── Sombra ── */
  --shadow:      0 4px 16px rgba(0,0,0,.45);
  --shadow-alta: 0 12px 32px rgba(0,0,0,.6);
}


/* =====================================================================
   TEMA CLARO
   ---------------------------------------------------------------------
   Não é só "inverter". Três cuidados que fazem a diferença:

   1. O fundo é #F4F5F7, não branco puro. Branco puro numa tela grande
      cansa a vista em turno inteiro; o cinza levíssimo tira o brilho
      sem tirar a sensação de tema claro. Os cartões, esses sim, são
      brancos — é o que os destaca do fundo.

   2. O amarelo da marca NÃO vira texto. Amarelo #FFC400 sobre branco dá
      1.7:1 de contraste, ou seja, é praticamente invisível. Por isso
      --primary vira um âmbar escuro (legível) e o amarelo original fica
      guardado em --primary-fill, para continuar pintando os botões.

   3. Verde, vermelho e azul também escurecem. As versões claras que
      brilham no tema escuro somem no branco.
   ===================================================================== */

:root[data-tema="claro"] {
  color-scheme: light;

  /* ── Marca ── */
  --primary:        #8A5A00;   /* âmbar escuro, sobre branco:  5.4:1 */
  --primary-fill:   #FFC400;   /* amarelo da marca, só como fundo    */
  --primary-ink:    #1A1300;   /* texto escuro em cima do amarelo    */
  --primary-light:  #FFC4001F;
  --primary-mid:    #FFC40055;
  --gold:           #8A5A00;
  --gold-dim:       #FFC40055;

  /* ── Superfícies: quanto maior o número, mais ESCURA a superfície ── */
  --black:          #F4F5F7;   /* fundo da página             */
  --app-bg:         #F4F5F7;
  --dark-1:         #FFFFFF;   /* barra lateral, painéis      */
  --dark-2:         #FFFFFF;   /* cartões                     */
  --dark-3:         #EEF0F4;   /* campos de formulário        */
  --dark-4:         #DFE3EA;   /* divisórias                  */
  --dark-5:         #CBD1DB;   /* bordas de campo             */
  --surface:        #FFFFFF;
  --surface-2:      #EEF0F4;
  --surface-3:      #DFE3EA;
  --surface-4:      #CBD1DB;
  --input-bg:       #FFFFFF;
  --topbar-bg:      #FFFFFF;
  --border:         #DFE3EA;
  --border-forte:   #CBD1DB;

  /* ── Textos: escuros, na ordem inversa do tema escuro ── */
  --gray-5:         #7A8290;   /* decorativo         3.6:1 */
  --gray-4:         #5C6472;   /* rótulos pequenos   5.5:1 */
  --gray-3:         #464E5C;   /* texto secundário   7.7:1 */
  --gray-2:         #2E3440;   /* texto do corpo    11.5:1 */
  --gray-1:         #1B2029;   /* texto forte       15.0:1 */
  --white:          #0D1117;   /* máximo destaque   17.4:1 */
  --pure-white:     #FFFFFF;
  --text:           #1B2029;
  --text-secondary: #464E5C;
  --text-muted:     #5C6472;

  /* ── Cores de situação, escurecidas para ler no claro ── */
  --success:        #10703A;   /* 5.7:1 */
  --danger:         #B3261E;   /* 6.0:1 */
  --warning:        #8A5300;   /* 5.8:1 */
  --info:           #1A4FBF;   /* 6.6:1 */
  --purple:         #5B21B6;   /* 8.2:1 */
  --green:          #10703A;
  --green-dim:      #10703A1F;
  --red:            #B3261E;
  --red-dim:        #B3261E1F;
  --blue:           #1A4FBF;

  /* ── Sombra: no claro a sombra precisa ser sutil, senão vira sujeira ── */
  --shadow:      0 2px 8px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --shadow-alta: 0 12px 28px rgba(16,24,40,.14);
}


/* =====================================================================
   AJUSTES QUE AS VARIÁVEIS SOZINHAS NÃO RESOLVEM
   ---------------------------------------------------------------------
   Alguns pontos do CSS antigo têm cor escrita à mão, sem variável.
   Estas regras cobrem esses casos.
   ===================================================================== */

html, body {
  background: var(--app-bg);
  color: var(--gray-1);
  transition: background-color .18s ease, color .18s ease;
}

/* O botão amarelo continua amarelo nos dois temas — é a marca.
   O que muda é a cor do texto em cima dele. */
.btn-primary,
.btn.btn-primary {
  background: var(--primary-fill) !important;
  border-color: var(--primary-fill) !important;
  color: var(--primary-ink) !important;
}
.btn-primary:hover { filter: brightness(1.06); }

/* Botões secundários */
.btn-outline {
  background: transparent;
  border: 1px solid var(--border-forte);
  color: var(--gray-1);
}
.btn-outline:hover { background: var(--dark-3); }

.btn-ghost {
  background: transparent;
  color: var(--gray-2);
}
.btn-ghost:hover { background: var(--dark-3); color: var(--gray-1); }

/* Cartões, painéis e divisórias */
.card, .modal, .kanban-column, .stat-card {
  background: var(--dark-2);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.card-header, .modal-header, .modal-footer { border-color: var(--border); }

/* Campos de formulário — o ponto onde o tema claro mais costuma quebrar */
input, select, textarea,
.search-box input, .global-search input {
  background: var(--input-bg);
  border: 1px solid var(--border-forte);
  color: var(--gray-1);
}
input::placeholder, textarea::placeholder { color: var(--gray-4); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--primary-fill); outline: none; }

/* O seletor de período e a busca ficam na barra do topo */
.topbar { background: var(--topbar-bg); border-color: var(--border); }
.sidebar { background: var(--dark-1); border-color: var(--border); }

/* Tabelas */
table { color: var(--gray-2); }
thead th {
  background: var(--dark-3);
  color: var(--gray-3);
  border-color: var(--border);
}
tbody td { border-color: var(--border); }
tbody tr:hover { background: var(--dark-3); }

/* Item ativo do menu lateral */
.nav-item { color: var(--gray-3); }
.nav-item:hover { background: var(--dark-3); color: var(--gray-1); }
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  border-left-color: var(--primary-fill);
}
.nav-group-label { color: var(--gray-5); }

/* Etiquetas neutras */
.badge-gray { background: var(--dark-4); color: var(--gray-2); }

/* Abas */
.tab-item { color: var(--gray-4); }
.tab-item.active { color: var(--primary); border-bottom-color: var(--primary-fill); }

/* Barra de progresso */
.progress-bar  { background: var(--dark-4); }
.progress-fill { background: var(--primary-fill); }

/* Tela de login */
.login-overlay { background: var(--app-bg); }
.login-box     { background: var(--dark-2); border: 1px solid var(--border); box-shadow: var(--shadow-alta); }
.login-title   { color: var(--gray-1); }
.login-subtitle{ color: var(--gray-3); }

/* Barra de rolagem combinando com o tema */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dark-1); }
::-webkit-scrollbar-thumb { background: var(--dark-5); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-5); }

/* Quem estiver com "reduzir movimento" ligado no sistema não vê a transição */
@media (prefers-reduced-motion: reduce) {
  html, body, * { transition: none !important; }
}


/* =====================================================================
   MENU DA ENGRENAGEM (topo direito)
   ===================================================================== */

.menu-conf-wrapper { position: relative; }

.menu-conf {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 900;
  min-width: 270px;
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-alta);
  padding: .45rem;
  display: none;
}
.menu-conf.aberto { display: block; }

.menu-conf-usuario {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .65rem .7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .35rem;
}
.menu-conf-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary-fill); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; flex-shrink: 0;
}
.menu-conf-nome  { font-size: .87rem; font-weight: 600; color: var(--gray-1); line-height: 1.2; }
.menu-conf-papel { font-size: .74rem; color: var(--gray-4); margin-top: .1rem; }

.menu-conf-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left;
  padding: .58rem .65rem;
  background: none; border: none; border-radius: 8px;
  color: var(--gray-2); font-size: .86rem; font-family: inherit;
  cursor: pointer;
}
.menu-conf-item:hover { background: var(--dark-3); color: var(--gray-1); }
.menu-conf-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.menu-conf-item.perigo { color: var(--danger); }
.menu-conf-item.perigo:hover { background: var(--red-dim); }
.menu-conf-sep { height: 1px; background: var(--border); margin: .35rem .2rem; }
.menu-conf-titulo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--gray-5); padding: .5rem .65rem .25rem; font-weight: 600;
}

/* Chavinha de tema dentro do menu */
.tema-switch { display: flex; gap: .3rem; padding: .3rem .35rem .5rem; }
.tema-opcao {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .55rem .3rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--dark-3);
  color: var(--gray-3); font-size: .74rem; font-family: inherit;
}
.tema-opcao:hover { border-color: var(--gray-5); color: var(--gray-1); }
.tema-opcao.ativo {
  border-color: var(--primary-fill);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.tema-amostra { width: 100%; height: 22px; border-radius: 5px; border: 1px solid var(--border); }
.tema-amostra.escuro { background: linear-gradient(135deg,#0A0A0A 0 55%, #FFC400 55% 100%); }
.tema-amostra.claro  { background: linear-gradient(135deg,#F4F5F7 0 55%, #FFC400 55% 100%); }


/* =====================================================================
   RESULTADOS DA BUSCA DO TOPO
   ===================================================================== */

.global-search { position: relative; }

.busca-resultados {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0; right: 0;
  z-index: 950;
  max-height: 62vh; overflow-y: auto;
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-alta);
  padding: .35rem;
  display: none;
}
.busca-resultados.aberto { display: block; }

.busca-grupo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--gray-5); font-weight: 600;
  padding: .55rem .65rem .3rem;
}
.busca-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem; border-radius: 8px; cursor: pointer;
}
.busca-item:hover, .busca-item.marcado { background: var(--dark-3); }
.busca-item-txt   { min-width: 0; flex: 1; }
.busca-item-titulo{ font-size: .85rem; color: var(--gray-1); font-weight: 500;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-item-sub   { font-size: .74rem; color: var(--gray-4); margin-top: .1rem;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-item-tag   { font-size: .7rem; padding: .12rem .4rem; border-radius: 5px;
                    background: var(--dark-4); color: var(--gray-3); flex-shrink: 0; }
.busca-marcado    { background: var(--primary-mid); color: var(--gray-1);
                    border-radius: 3px; padding: 0 1px; font-weight: 700; }
.busca-vazio      { padding: 1.1rem .8rem; text-align: center;
                    color: var(--gray-4); font-size: .83rem; }
.busca-dica       { padding: .5rem .65rem; border-top: 1px solid var(--border);
                    margin-top: .3rem; font-size: .72rem; color: var(--gray-5);
                    display: flex; gap: .8rem; }
.busca-dica kbd   { background: var(--dark-4); border: 1px solid var(--border-forte);
                    border-radius: 4px; padding: .05rem .3rem;
                    font-family: inherit; font-size: .7rem; color: var(--gray-3); }

/* No celular a busca abre em tela cheia, senão o resultado não cabe */
@media (max-width: 640px) {
  .busca-resultados { position: fixed; top: 64px; left: .6rem; right: .6rem; max-height: 70vh; }
  .menu-conf { position: fixed; top: 64px; right: .6rem; left: auto; min-width: 250px; }
}