/*
 * Tema visual da Gestao.
 *
 * Esta folha muda apenas a apresentacao do admin. As regras de negocio,
 * permissoes e formularios continuam sendo controlados pelo Django.
 *
 * PADRAO VISUAL "FICHA DE BALCAO" (direcao A, 24/09/2026) -----------------
 * A partir desta versao, esta folha e a admin_padrao.css passam a ser a
 * UNICA fonte de cor, canto e sombra do sistema. O guia completo, com o
 * porque de cada token e exemplos de HTML, mora em PADRAO-VISUAL.md, na
 * raiz do repositorio (regra 24 do PADRAO-DO-SISTEMA.md).
 *
 * Os 13 tokens abaixo (--fundo, --folha, --tinta...) sao a UNICA fonte de
 * cor do projeto: nenhuma outra variavel deste arquivo ou de
 * admin_padrao.css escreve um hex por conta propria — todas apontam para
 * um destes treze, com var(). Cor nova entra AQUI, nunca solta numa tela.
 */

:root {
  /* ---- paleta da casa (direcao A - ficha de balcao) ---- */
  --fundo: #eceef0;
  --folha: #ffffff;
  --tinta: #1a1d21;
  --tinta-2: #565c64;
  --borda: #d3d6da;
  --borda-forte: #8e949b;
  --menu-fundo: #1c1f24;
  --menu-texto: #cfd4da;
  --menu-filete: #7fa2ff;
  --acao: #1f4fbf;
  --acao-forte: #17398c;
  --perigo: #b3261e;
  --sucesso: #1e6f38;
  --alerta: #8a5200;
  --aviso-fundo: #fff6e5;
  --aviso-borda: #d9a441;
  --aviso-texto: #3d2a00;
  --selecao: #e8eefb;
  --raio: 3px;
  --raio-selo: 2px;

  /* carimbo de status da O.S. (ficha e lista) — mapeamento fechado do
     dono, 24/09/2026. Situação usa o mesmo formato de carimbo, mapeada
     caso a caso em admin.py/agenda.py. */
  --status-entrada: #4d535b;
  --status-orcamento: var(--alerta);
  --status-aberto: var(--acao);
  --status-andamento: #0f5f73;
  --status-pausado: #9a3412;
  --status-concluido: var(--sucesso);
  --status-faturado: #5b2bb5;
  --status-cancelado: var(--perigo);
  --status-finalizado: #4d535b;

  /* tons claros dos semanticos (fundo de aviso/selo), derivados a mao das
     cores acima para manter contraste >= 4,5:1 com o texto que entra por
     cima — ver a conta em PADRAO-VISUAL.md */
  --sucesso-fraco: #e7f3ec;
  --sucesso-linha: #a9cdb6;
  --perigo-fraco: #fbeae9;
  --perigo-linha: #e3aeaa;
  --alerta-fraco: var(--aviso-fundo);
  --alerta-linha: var(--aviso-borda);

  /* letra */
  --fonte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Barlow Semi Condensed", "Barlow", "Segoe UI", sans-serif;
  --fonte-mono: "IBM Plex Mono", Consolas, monospace;

  /* ---- variaveis do proprio Django, apontando para a paleta acima ---- */
  --primary: var(--acao);
  --secondary: var(--tinta);
  --accent: var(--folha);
  --primary-fg: #fff;

  --body-fg: var(--tinta);
  --body-bg: var(--fundo);
  --body-quiet-color: var(--tinta-2);
  --body-loud-color: var(--tinta);

  --header-color: var(--menu-texto);
  --header-branding-color: #fff;
  --header-bg: var(--menu-fundo);
  --header-link-color: #fff;

  --breadcrumbs-fg: var(--tinta-2);
  --breadcrumbs-link-fg: var(--acao);
  --breadcrumbs-bg: var(--folha);

  --link-fg: var(--acao);
  --link-hover-color: var(--acao-forte);
  --link-selected-fg: var(--acao-forte);

  --hairline-color: var(--borda);
  --border-color: var(--borda);
  --error-fg: var(--perigo);
  --message-success-bg: var(--sucesso-fraco);
  --message-warning-bg: var(--aviso-fundo);
  --message-error-bg: var(--perigo-fraco);

  --darkened-bg: var(--fundo);
  --selected-bg: var(--selecao);
  --selected-row: var(--selecao);

  --button-fg: #fff;
  --button-bg: var(--acao);
  --button-hover-bg: var(--acao-forte);
  /* Salvar e sempre o botao PRINCIPAL (azul), nunca verde: os quatro
     botoes da casa (principal/secundario/perigo/link) estao descritos em
     PADRAO-VISUAL.md. */
  --default-button-bg: var(--acao);
  --default-button-hover-bg: var(--acao-forte);
  --close-button-bg: var(--borda-forte);
  --close-button-hover-bg: var(--tinta-2);
  --delete-button-bg: var(--perigo);
  --delete-button-hover-bg: #8f1e18;

  --gestao-card: var(--folha);
  --gestao-shadow: none;
  --gestao-shadow-hover: none;
  --gestao-radius: var(--raio);
  --gestao-transition: 140ms ease;

  /* O Windows no escuro nao pode mais deixar cartao escuro em pagina
     clara (ver o bloco no fim do arquivo): o sistema fica sempre claro
     nesta etapa. */
  color-scheme: light;
}

html {
  background: var(--body-bg);
  color-scheme: light;
}

body {
  background: var(--body-bg);
  color: var(--body-fg);
  font-family: var(--fonte);
}

#content h1 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

#content h2,
#content h3 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
}

/* Cartoes e paineis padrao do admin: folha reta, borda fina, sem sombra,
   canto de 3px — nunca 12px, nunca com elevacao. */
.module,
.inline-group,
#changelist .results,
.submit-row,
.paginator,
#content-related .module {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: none;
  overflow: hidden;
}

.module,
.inline-group,
.submit-row,
#content-related .module {
  background: var(--gestao-card);
}

fieldset.module {
  overflow: visible;
}

/* Campos: 36px, borda forte, canto de 3px. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  border-color: var(--borda-forte);
  border-radius: var(--raio);
  min-height: 36px;
  transition: border-color var(--gestao-transition), box-shadow var(--gestao-transition);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--acao) !important;
  box-shadow: 0 0 0 3px rgba(31, 79, 191, .18) !important;
  outline: 0;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--tinta-2);
}

/* Botoes do proprio Django: sem elevacao, sem sombra ao passar o mouse —
   a diferenca de estado vem da cor, nunca de "levantar" a caixa. */
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button,
.object-tools a {
  border-radius: var(--raio);
  box-shadow: none;
  transition: background-color var(--gestao-transition), border-color var(--gestao-transition);
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover,
.object-tools a:hover {
  box-shadow: none;
  transform: none;
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active,
.submit-row input:active,
a.button:active,
.object-tools a:active {
  box-shadow: none;
  transform: none;
}

/* Tabelas: cabecalho e linha nos tons da casa; linha selecionada usa o
   token --selecao (nunca um azul escrito a mao). */
#changelist .results {
  background: var(--folha);
}

#result_list thead th {
  background: var(--fundo);
  color: var(--tinta-2);
  border-bottom: 1px solid var(--borda);
}

#result_list tbody tr,
.dashboard .module tbody tr {
  transition: background-color var(--gestao-transition);
}

#result_list tbody tr:hover,
.dashboard .module tbody tr:hover {
  background: var(--selecao);
}

#result_list tbody td,
#result_list tbody th {
  border-color: var(--borda);
}

#result_list tbody th a,
#result_list tbody td a,
.dashboard .module tbody th a,
.dashboard .module tbody td a,
.related-widget-wrapper a:not(.related-widget-wrapper-link) {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
}

#result_list tbody th a:hover,
#result_list tbody td a:hover,
.dashboard .module tbody th a:hover,
.dashboard .module tbody td a:hover,
.related-widget-wrapper a:not(.related-widget-wrapper-link):hover {
  color: var(--acao-forte);
  text-shadow: none;
  transform: translateX(3px);
  transition: color var(--gestao-transition), transform var(--gestao-transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
}

/* Mensagens (messagelist): mesma linguagem do aviso da casa — canto de
   3px, sem sombra, borda que diz a cor. */
.messagelist li {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: none;
}

.messagelist li.success {
  border-color: var(--sucesso-linha);
}

.messagelist li.warning {
  border-color: var(--aviso-borda);
}

.messagelist li.error {
  border-color: var(--perigo-linha);
}

.help,
p.help,
form p.help,
div.help,
form div.help,
div.help li {
  color: var(--tinta-2);
}

/*
 * Filtros de lista em formato de barra. O Django entrega uma coluna lateral
 * com todas as opções abertas; ela funciona, mas parece pertencer a outro
 * sistema. Mantemos os mesmos links e parâmetros, apenas apresentamos cada
 * grupo como um menu compacto. Isso vale automaticamente para toda listagem.
 */
#changelist.filtered {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}

#changelist.filtered .changelist-form-container {
  width: 100%;
}

#changelist.filtered .results,
#changelist.filtered .paginator,
#changelist.filtered #toolbar,
#changelist.filtered .actions {
  margin-right: 0;
}

#changelist-filter {
  order: -1 !important;
  flex: 0 0 auto !important;
  position: relative;
  width: auto !important;
  min-height: 46px;
  margin: 0 0 14px !important;
  padding: 10px 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow: visible !important;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--folha);
  box-shadow: none;
}

#changelist-filter > h2 {
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--tinta) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  /* P6/P8 da auditoria da Parte 2 (25/09/2026): "FILTRO" ainda saía em
   * CAIXA ALTA — `#changelist-filter h2` do PRÓPRIO Django
   * (`changelists.css`) empata em especificidade com esta regra e
   * ganhava por vir depois na cascata (mesmo problema do `.submit-row
   * input.default`, em admin_padrao.css). `!important` decide a favor
   * da casa. */
  text-transform: none !important;
}

#changelist-filter-extra-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
}

#changelist-filter-extra-actions h3 {
  margin: 0 !important;
  padding: 0 !important;
}

#changelist-filter-extra-actions a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

#changelist-filter details {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#changelist-filter details > summary {
  min-height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--folha);
  color: var(--tinta);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  transition: border-color var(--gestao-transition), background-color var(--gestao-transition);
}

#changelist-filter details > summary::-webkit-details-marker { display: none; }
/* P8 da auditoria da Parte 2 (25/09/2026): a seta "→" antes do rótulo
 * ("→ Por empresa") é o PRÓPRIO Django (`changelists.css`,
 * `::before { content: '→' }`) — empata em especificidade com o que a
 * casa escreve e sobrava, duplicando o "⌄" que já indica abrir/fechar
 * logo depois do rótulo. `content: none` tira a seta; o indicador de
 * aberto/fechado continua só no `::after` abaixo. */
#changelist-filter details > summary::before,
#changelist-filter details[open] > summary::before {
  content: none !important;
}
#changelist-filter details > summary::after {
  content: "⌄";
  color: var(--tinta-2);
  font-size: 13px;
}

#changelist-filter details[open] > summary {
  border-color: var(--acao);
  background: var(--selecao);
  color: var(--acao-forte);
  box-shadow: none;
}

#changelist-filter details > ul {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  min-width: 190px;
  max-height: 320px;
  overflow: auto;
  margin: 0 !important;
  padding: 7px !important;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--folha);
  box-shadow: none;
}

#changelist-filter details > ul li {
  margin: 0 !important;
  padding: 0 !important;
}

#changelist-filter details > ul li a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--raio);
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

#changelist-filter details > ul li a:hover { background: var(--fundo); }
#changelist-filter details > ul li.selected a {
  background: var(--acao);
  color: #fff;
  font-weight: 600;
}

.gestao-explica-lista {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--folha);
}

.gestao-explica-lista h2 {
  margin: 0 0 3px;
  color: var(--tinta);
  font-size: 16px;
  font-weight: 700;
}

.gestao-explica-lista p { margin: 0; color: var(--tinta-2); }
.gestao-explica-icone {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: var(--raio);
  background: var(--acao);
  color: #fff;
  font-weight: 600;
}

.gestao-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--raio-selo);
  border: 1.5px solid currentColor;
  background: var(--folha);
  font-size: 12px;
  font-weight: 700;
}
.gestao-badge-ok { color: var(--sucesso); }
.gestao-badge-off { color: var(--perigo); }
.gestao-badge-info { color: var(--acao); }

@media (max-width: 900px) {
  #content {
    padding-left: 16px;
    padding-right: 16px;
  }

  #content h1 {
    font-size: 22px;
  }

  #changelist-filter {
    align-items: stretch;
  }

  #changelist-filter > h2 {
    width: 100%;
  }

  #changelist-filter details > ul {
    position: fixed;
    z-index: 80;
    top: auto;
    right: 14px;
    bottom: 14px;
    left: 14px;
    max-height: min(55vh, 360px);
  }
}

/* B16 [LEVE] (3ª rodada, 23/09/2026; D7, 4ª rodada, 24/09/2026): o
   PRÓPRIO Django (admin/filter.html) grava `open` em TODO filtro,
   sempre — funciona sem problema no admin padrão (lista estática, sem
   sobrepor nada). Aqui cada filtro virou um menu FLUTUANTE (`position:
   absolute` acima; `position: fixed` no celular, na regra logo
   acima). O `filters.js` do próprio Django só fecha o que a PESSOA já
   tinha fechado antes (lê o `sessionStorage`) — na primeira visita, ou
   sem JavaScript nenhum, TODOS ficam abertos ao mesmo tempo. Com
   JavaScript, a dobra "Filtros avançados" (montada por
   `os_change_list.html`) embrulha tudo isso e começa FECHADA quando
   não há filtro na URL — os menus internos ficam escondidos junto. SEM
   JavaScript essa dobra nunca é montada: os menus flutuantes cobriam a
   barra de ação em lote e até a marcação de cada O.S.

   D7: este bloco ESTAVA antes do `@media (max-width: 900px)` acima —
   mesma especificidade, e quem vem DEPOIS no arquivo vence a
   cascata. A ≤900px, sem JavaScript, a regra `position: fixed` do
   celular (acima) ganhava da `position: static` daqui, e os menus
   voltavam a flutuar por cima da lista (até dez empilhados,
   cobrindo a caixinha de cada O.S. e o botão "Ir"). Bastava MOVER este
   bloco para DEPOIS do `@media (max-width: 900px)` — sem JavaScript
   `scripting: none` tem de vencer em QUALQUER largura, não só acima de
   900px. */
@media (scripting: none) {
  #changelist-filter details > ul {
    position: static;
    z-index: auto;
    box-shadow: none;
    margin-top: 6px !important;
  }
  /* E9 [LEVE, regressão do D7] (5ª rodada, 24/09/2026): com o menu em
     `position: static` (linha acima), o link de cada filtro
     (`white-space: nowrap`, achado 448) deixou de ser um FLUTUANTE
     recortado por cima da lista e passou a empurrar a LARGURA do
     próprio fluxo do documento — um técnico com nome de 51 caracteres
     ("Maria Aparecida da Conceição Nascimento Albuquerque") esticava
     a página inteira (375px vira 388px; 407px com "Mostrar
     contagem"), porque `#changelist-filter` tem `overflow: visible
     !important` (achado 342) e nada mais recortava a largura. Sem
     JavaScript o único jeito de caber é deixar o nome QUEBRAR linha —
     com JavaScript o menu continua flutuante (absolute, recortado por
     `max-height`/`overflow: auto`) e este bloco nunca se aplica. */
  #changelist-filter details > ul li a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Respeita quem pede menos movimento no Windows ou no navegador. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/*
 * TEMA SEMPRE CLARO (24/09/2026) -----------------------------------------
 *
 * O Windows no escuro fazia o admin do Django reescrever `:root` com a
 * sua propria paleta escura (dark_mode.css) e travar `color-scheme: dark`
 * — os controles nativos (calendario, checkbox) ficavam escuros numa
 * pagina clara, e telas com <style> proprio (a ficha da O.S., a lista,
 * o menu) pintavam cartoes escuros por cima. Decisao do dono, registrada
 * na proposta de 24/09/2026: o sistema fica SEMPRE CLARO nesta etapa; o
 * escuro volta depois, feito de uma vez so.
 *
 * Este bloco fica no FIM do arquivo de proposito: e a ULTIMA palavra da
 * cascata sobre `:root`/`html[data-theme]`, e reafirma os MESMOS tokens
 * do topo — reverter e apagar so este bloco. Cobre as tres portas por
 * onde o Django liga o escuro: a preferencia do sistema operacional, o
 * atributo manual `data-theme="dark"` e o `"auto"` (o botao de tema do
 * admin foi removido, mas o atributo podia continuar valendo "auto").
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: var(--acao);
    --body-fg: var(--tinta);
    --body-bg: var(--fundo);
    --body-quiet-color: var(--tinta-2);
    --body-loud-color: var(--tinta);
    --header-color: var(--menu-texto);
    --header-bg: var(--menu-fundo);
    --breadcrumbs-bg: var(--folha);
    --hairline-color: var(--borda);
    --border-color: var(--borda);
    --selected-bg: var(--selecao);
    --selected-row: var(--selecao);
    --darkened-bg: var(--fundo);
    color-scheme: light;
  }
}

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

html[data-theme="dark"]:root,
html[data-theme="auto"]:root {
  --primary: var(--acao);
  --body-fg: var(--tinta);
  --body-bg: var(--fundo);
  --body-quiet-color: var(--tinta-2);
  --body-loud-color: var(--tinta);
  --header-color: var(--menu-texto);
  --header-bg: var(--menu-fundo);
  --breadcrumbs-bg: var(--folha);
  --hairline-color: var(--borda);
  --border-color: var(--borda);
  --selected-bg: var(--selecao);
  --selected-row: var(--selecao);
  --darkened-bg: var(--fundo);
}