/* Tema TradeGo para o Django Admin — reescreve as CSS custom properties que
   o admin já usa (base.css / dark_mode.css), então toda a UI padrão (botões,
   links, tabelas, breadcrumbs, mensagens) herda a marca automaticamente.

   Sempre no visual claro/quente (petróleo + brasa + off-white) — o mesmo
   usado no app do promotor (templates/promotor_app.html), que não tem modo
   escuro. Por isso não há aqui nenhum bloco @media (prefers-color-scheme:
   dark) nem html[data-theme="dark"]: o admin fica com essa mesma cara
   independente do tema do sistema/navegador do usuário.

   Superfícies: --body-bg é o fundo da página; --tg-surface é o "cartão"
   (header, módulos, filtros, cards do dashboard) — sempre um tom acima do
   fundo, pra dar profundidade sem depender de barras escuras chapadas. */

html[data-theme="light"],
:root {
  --primary: #14303C;               /* petróleo */
  --secondary: #0E2530;             /* petróleo profundo */
  --accent: #F26A3D;                /* brasa */
  --primary-fg: #fff;

  --body-fg: #14303C;
  --body-bg: #F1EFEA;
  --body-quiet-color: #7C8A8E;
  --body-loud-color: #14303C;

  --tg-surface: #FCFAF7;
  --tg-surface-border: #E2DFD8;

  --header-color: #14303C;
  --header-branding-color: var(--accent);
  --header-bg: var(--tg-surface);
  --header-link-color: #14303C;

  --breadcrumbs-fg: #7C8A8E;
  --breadcrumbs-link-fg: #7C8A8E;
  --breadcrumbs-bg: #FCFAF7;

  --link-fg: #9E3C19;               /* brasa com contraste seguro p/ texto pequeno */
  --link-hover-color: #7A2D12;
  --link-selected-fg: #14303C;

  --hairline-color: #E2DFD8;
  --border-color: #D9D5CC;

  --error-fg: #B3261E;

  --message-success-bg: #E4F0E7;
  --message-warning-bg: #FDF3D9;
  --message-error-bg: #FBE9E9;

  --darkened-bg: #FCFAF7;
  --selected-bg: #EDEEEC;
  --selected-row: #FDF3D9;

  --button-fg: #fff;
  --button-bg: var(--accent);
  --button-hover-bg: #D85A2F;
  --default-button-bg: #D85A2F;
  --default-button-hover-bg: #B94822;
  --close-button-bg: #A9B4B7;
  --close-button-hover-bg: #8C989B;
  --delete-button-bg: #B3261E;
  --delete-button-hover-bg: #8C1D17;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);

  --tg-badge-ink-bg: #EAF1F3;   --tg-badge-ink-fg: #2F6B7E;
  --tg-badge-verde-bg: #E7F5EC; --tg-badge-verde-fg: #29915F;
  --tg-badge-vermelho-bg: #FCEBEA; --tg-badge-vermelho-fg: #C0392F;

  --font-family-primary: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-monospace: "IBM Plex Mono", ui-monospace, Menlo, Monaco, monospace;
}

* { box-sizing: border-box; }

body { -webkit-font-smoothing: antialiased; }

/* O admin padrão do Django trava a página inicial ("dashboard") em 600px —
   pensado pra caber a listagem de apps + sidebar de ações recentes. Nosso
   painel usa cards/gráfico/tabelas e o admin é usado principalmente no
   desktop, então liberamos a largura. */
.dashboard #content {
  width: auto;
  max-width: 1400px;
  margin: 0 auto;
}

/* Marca no cabeçalho */
#site-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
#site-name img {
  width: 26px;
  height: 26px;
  display: block;
}
#site-name a {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 19px;
}
#branding h1, #branding h1 a:link, #branding h1 a:visited {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Cabeçalho claro e limpo, como uma superfície elevada — sem barra escura
   chapada — separado do conteúdo por uma linha fina + sombra bem sutil.
   Mesma lógica em claro e escuro: header e navbar usam --tg-surface,
   sempre um tom acima do fundo da página (--body-bg). */
#header {
  /* base.css do Django define overflow:hidden no #header, o que recorta
     o dropdown (position:absolute) da navbar. Nossa navbar não precisa
     desse corte. */
  overflow: visible;
  background: var(--header-bg);
  border-bottom: 1px solid var(--tg-surface-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  padding: 16px 40px;
}
#user-tools {
  color: var(--body-quiet-color);
  font-size: 12.5px;
}
#user-tools a { color: var(--header-link-color); }
#user-tools a:hover { color: var(--link-fg); }

/* Breadcrumbs mais discretas, com respiro */
div.breadcrumbs {
  background: var(--breadcrumbs-bg);
  border-bottom: 1px solid var(--hairline-color);
  color: var(--breadcrumbs-fg);
  padding: 12px 40px;
  font-size: 12.5px;
}
div.breadcrumbs a { color: var(--breadcrumbs-fg); }
div.breadcrumbs a:hover { color: var(--link-fg); }

/* Navbar superior (menus / submenus) — substitui a sidebar padrão do admin */
.tg-navbar {
  background: var(--tg-surface);
  border-bottom: 1px solid var(--tg-surface-border);
}
.tg-navbar-menu,
.tg-navbar-submenu {
  list-style: none;
}
.tg-navbar-menu {
  margin: 0; padding: 0 40px; display: flex; gap: 2px;
}
.tg-navbar-item {
  position: relative;
  list-style-type: none; /* o base.css do Django define li{list-style:square} */
}
.tg-navbar-submenu li { list-style-type: none; }
.tg-navbar-link, .tg-navbar-link:link, .tg-navbar-link:visited { text-decoration: none; color: var(--body-fg); }
.tg-navbar-label,
.tg-navbar-link {
  position: relative;
  display: block; padding: 12px 18px; color: var(--body-fg); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer; user-select: none;
  background: none; border: none; border-radius: 8px 8px 0 0; font-family: inherit; line-height: inherit;
  transition: background-color .15s ease, color .15s ease;
}
.tg-navbar-label::after,
.tg-navbar-link::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.tg-navbar-item:hover .tg-navbar-label,
.tg-navbar-item:hover .tg-navbar-link,
.tg-navbar-link.tg-ativo,
.tg-navbar-item.tg-aberto .tg-navbar-label {
  background: rgba(242, 106, 61, 0.1);
  color: var(--link-fg);
}
.tg-navbar-item:hover .tg-navbar-label::after,
.tg-navbar-item:hover .tg-navbar-link::after,
.tg-navbar-link.tg-ativo::after,
.tg-navbar-item.tg-aberto .tg-navbar-label::after {
  transform: scaleX(1);
}
.tg-navbar-submenu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--tg-surface); border: 1px solid var(--tg-surface-border);
  border-top: 3px solid var(--accent); border-radius: 0 10px 10px 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,.16); list-style: none; margin: 0; padding: 8px 0; z-index: 1000;
}
.tg-navbar-item.tg-aberto .tg-navbar-submenu {
  display: block;
}
.tg-navbar-submenu li a {
  display: block; padding: 10px 18px; color: var(--body-fg); font-size: 13px; text-decoration: none;
  transition: background-color .12s ease, padding-left .12s ease, color .12s ease;
}
.tg-navbar-submenu li a:hover {
  background: var(--darkened-bg); color: var(--link-fg); padding-left: 22px;
}

/* Módulos (as "caixas" do admin) ganham cartão com sombra suave,
   cantos arredondados e um header com mais peso visual */
.module {
  border-radius: 12px;
  border: 1px solid var(--tg-surface-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  overflow: hidden;
  background: var(--tg-surface);
}
.module h2, .module caption, .inline-group h2 {
  background: transparent;
  color: var(--body-loud-color);
  border-bottom: 1px solid var(--hairline-color);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.module table { border: none; }

/* Botões: sombra sutil e leve elevação ao passar o mouse,
   em vez do flat 1:1 padrão do Django admin */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  font-weight: 600;
  letter-spacing: .01em;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover, a.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}
.button:active, input[type=submit]:active { transform: translateY(0); }

/* Listagens (results): zebra + hover mais claro, cabeçalho com mais respiro */
#changelist table thead th {
  background: var(--darkened-bg);
  font-weight: 700;
  letter-spacing: .01em;
}
#changelist table tbody tr:hover {
  background: var(--selected-bg);
}
#changelist .results {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--tg-surface-border);
}

/* Filtro lateral como cartão próprio */
#changelist-filter {
  border-radius: 12px;
  border: 1px solid var(--tg-surface-border);
  background: var(--tg-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#changelist-filter h2 {
  border-radius: 12px 12px 0 0;
}

/* Paginação e submit-row com mais espaço vertical */
.paginator { padding: 12px 0; }
.submit-row {
  border-radius: 0 0 12px 12px;
  border-top: 1px solid var(--hairline-color);
  background: var(--tg-surface);
}

/* App list da home padrão (quando a navbar tg não substitui tudo) */
.app-list .module caption, .app-list .module th {
  font-weight: 600;
}
.model-list tr:hover { background: var(--selected-bg); }

/* Botão vermelho de excluir no rodapé do formulário: o Django fixa
   height:.9375rem, e com a fonte do tema o texto ("Excluir este
   agendamento", "Excluir visita") vazava para fora do botão. */
.submit-row a.deletelink {
  height: auto;
  line-height: 1.25;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}