:root {
  color-scheme: light;
  --surface-page:    #f9f9f7;
  --surface-card:    #fcfcfb;
  --text-primary:    #0b0b0b;
  --text-secondary:  #52514e;
  --text-muted:      #898781;
  --gridline:        #e1e0d9;
  --border:          rgba(11, 11, 11, 0.10);
  --sequential-400:  #3987e5;
  --sequential-200:  #9ec5f4;
  --sequential-100:  #cde2fb;
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;
  --status-neutral:  #898781;
  --sidebar-bg:      #ffffff;
  --sidebar-text:    #52514e;
  --sidebar-text-active: #0b0b0b;
  --sidebar-accent:  #3987e5;
}

/* Tema sempre claro, independente da preferência do sistema — pedido do
   usuário ("tirar essa cor preta, deixar mais clara e agradável"). */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--surface-page);
  color: var(--text-primary);
}

.app-shell {
  min-height: 100vh;
}

/* Sidebar — fica recolhida (só uma tira de 8px, encostada na borda) e
   desliza pra fora ao passar o mouse, sobrepondo o conteúdo em vez de
   empurrá-lo. Pedido do usuário: "deve ficar oculta, aparecer quando
   passar o mouse". */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /* Acima de qualquer coisa que a página possa desenhar por cima (ex. os
     panes internos do Leaflet no Mapa, que usam z-index até ~700). */
  z-index: 1000;
  transform: translateX(-210px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Botão sempre visível pra abrir/fechar a sidebar por clique — não depende
   de acertar a tira de 10px com o mouse (funciona em qualquer página,
   inclusive touch, onde não existe :hover). */
.sidebar-toggle {
  position: fixed;
  /* 70px pra não colidir com os controles de zoom do Leaflet, que ficam
     no canto superior esquerdo do Mapa (mesma posição que outras páginas
     não usam, então fica igual em todas). */
  top: 70px;
  left: 16px;
  z-index: 1001;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Tira sempre visível (o "puxador") — sem cor própria, a sidebar sozinha
   (fundo branco) quase não aparece contra o fundo claro da página. Some
   suavemente assim que a sidebar abre. */
.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: var(--sequential-400);
  opacity: 0.5;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.sidebar:hover,
.sidebar:focus-within,
.sidebar.is-open {
  transform: translateX(0);
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
}

.sidebar:hover::after,
.sidebar:focus-within::after,
.sidebar.is-open::after {
  opacity: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sidebar-text-active);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.sidebar-brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sequential-400);
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a,
.sidebar-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--sidebar-text);
}

.sidebar-nav li.active a {
  color: var(--sidebar-text-active);
  background: rgba(57, 135, 229, 0.08);
  border-left: 3px solid var(--sidebar-accent);
  padding-left: 17px;
}

.sidebar-nav li.disabled span {
  color: rgba(11, 11, 11, 0.25);
  cursor: not-allowed;
}

.sidebar-user {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--sidebar-text);
}

.sidebar-user a,
.sidebar-user .link-button {
  color: var(--sequential-400);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

/* Main content */
.main {
  min-width: 0;
  margin-left: 10px;
  padding: 24px 28px 40px;
}

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.page-header h1 {
  font-size: 1.4rem;
  margin: 0;
}

.page-header .subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Status summary tiles */
.status-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.status-tile {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-tile .status-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.status-tile .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-tile .status-value {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.status-good     { background: var(--status-good); }
.status-warning  { background: var(--status-warning); }
.status-serious  { background: var(--status-serious); }
.status-critical { background: var(--status-critical); }
.status-neutral  { background: var(--status-neutral); }

/* Equipment cards */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.equip-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

.equip-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.equip-card-head h2 {
  font-size: 1.05rem;
  margin: 0 0 2px;
}

.equip-card-head .equip-sub {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-page);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.badge .status-dot { width: 8px; height: 8px; border-radius: 50%; }

.equip-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.equip-stat .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.equip-stat .value {
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.meter-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--gridline);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: var(--sequential-400);
  border-radius: 999px;
}

.equip-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--gridline);
  padding-top: 10px;
  margin-top: 4px;
}

.map-placeholder {
  margin-top: 20px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.map-placeholder a {
  color: var(--sequential-400);
  font-weight: 600;
}

.empty-state {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Página de mapa (full-bleed) */
.main--map {
  padding: 0;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
  background: var(--gridline);
}

.map-panel {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: calc(100% - 32px);
}

.map-panel .equip-card {
  width: 300px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Resumo de status em anel (donut) */
.status-ring-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.status-ring {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-ring-hole {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.status-ring-hole .total-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.status-ring-hole .total-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.status-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.status-legend .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-legend b { color: var(--text-primary); }

/* Ajustes de popup/marker do Leaflet para casar com a paleta */
.leaflet-popup-content-wrapper {
  background: var(--surface-card);
  color: var(--text-primary);
  border-radius: 10px;
}

.leaflet-popup-tip {
  background: var(--surface-card);
}

.marker-pin {
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface-card);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.marker-pin .marker-icon {
  transform: rotate(45deg);
  font-size: 15px;
  line-height: 1;
}

/* Mensagens (django.contrib.messages) */
.messages {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  background: var(--surface-card);
}

.message.success { border-color: var(--status-good); }
.message.error   { border-color: var(--status-critical); }

/* Formulário de cadastro (Equipamentos) */
.form-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.form-card h2 {
  font-size: 1.05rem;
  margin: 0 0 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  align-items: end;
}

.form-field label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-page);
  color: var(--text-primary);
}

.field-error {
  color: var(--status-critical);
  font-size: 0.78rem;
  margin-top: 4px;
}

.form-field-submit { display: flex; gap: 10px; }

.btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.equip-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-primary {
  background: var(--sequential-400);
  border-color: var(--sequential-400);
  color: #fff;
}

.btn-danger {
  background: transparent;
  color: var(--status-critical);
  border-color: var(--status-critical);
}

.leaflet-tooltip.talhao-label {
  background: transparent;
  border: none;
  box-shadow: none;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}

.leaflet-tooltip.talhao-label::before {
  display: none;
}

/* Relatórios */
.tabela-scroll {
  overflow-x: auto;
}

.tabela-relatorio {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabela-relatorio th,
.tabela-relatorio td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tabela-relatorio th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.tabela-relatorio tbody tr:hover {
  background: var(--surface-page);
}