/* Manutenção Lavoura — "caderneta de campo".
   Sibling of the fleet app's design system: same family faces, carrying the
   Xanadu crimson and grounded with soil brown and straw gold. Mobile-first:
   the farm manager uses this one-handed, on a phone, in the sun. */

:root {
  /* Tells the browser which scheme its own widgets — the date picker above
     all — should be drawn in. Without it the calendar pops up white on a
     dark page. */
  color-scheme: light;

  --papel: #F7F5EE;
  --ficha-bg: #FFFFFF;
  --linha: #E4DFCE;
  /* A brown-black rather than a green-black: the ink has to sit under the
     crimson without pulling the page back towards the old green. */
  --tinta: #29241B;
  --tinta-64: #29241BA3;

  /* The lit face of the red hexagon in the Xanadu mark. It carries identity
     and every interactive surface — links, primary buttons, the active tab. */
  --marca: #8D0609;
  /* Foreground on the crimson fill; white clears 4.5:1 on it, and dark ink
     clears it on the lighter rose used in dark mode. */
  --sobre-marca: #fff;
  /* The mark's other hexagon, kept for one job: confirming that a record was
     saved. Nothing that means "attention" is the same colour as the app. */
  --sucesso: #2E7D43;
  --solo: #6B4F2E;
  --solo-tint: #6B4F2E1A;
  /* Deeper than the straw wash it is tinted from: this one carries text, and
     4.5:1 on paper is what makes it legible on a phone in the sun. */
  --palha: #8A6510;
  --palha-tint: #C99A2E26;
  /* Brighter and warmer than the brand, because with a red app an overdue
     service must not read as chrome. Every state using it also carries a
     word, so the alarm never rests on hue alone. */
  --perigo: #C0391B;
  --perigo-tint: #C0391B14;

  --topo-bg: #6B0A10;
  --topo-linha: rgba(255, 255, 255, 0.12);
  --topo-tinta: #F6E4E2;
  --topo-tinta-64: #D3A7A6;

  --r: 10px;
  --r-sm: 6px;
  --sombra: 0 1px 2px rgba(41, 36, 27, 0.06), 0 4px 14px rgba(41, 36, 27, 0.05);
  --sombra-alta: 0 8px 28px rgba(41, 36, 27, 0.18);
  --sulco: rgba(107, 79, 46, 0.07);

  /* Comfortable one-handed target on a phone, per the WCAG 2.2 minimum. */
  --alvo: 44px;
  --foco: rgba(141, 6, 9, 0.55);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --papel: #16120F;
  --ficha-bg: #211C17;
  --linha: #38302A;
  --tinta: #EFE9E2;
  --tinta-64: #EFE9E2A3;

  /* The crimson is far too dark to read on a dark page, so the brand inverts
     to the rose it makes when lightened; danger stays warmer and brighter
     than it, as in the light theme. */
  --marca: #F0736F;
  --sobre-marca: #1C0E0F;
  --sucesso: #4CBE6C;
  --solo: #C9A470;
  --solo-tint: #C9A47026;
  --palha: #D9AE4B;
  --palha-tint: #D9AE4B26;
  --perigo: #FF8B5E;
  --perigo-tint: #FF8B5E26;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.4);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.55);
  --sulco: rgba(201, 164, 112, 0.06);
  --foco: rgba(240, 115, 111, 0.7);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The live filter hides cards, and a class rule like .ficha{display:flex}
   would otherwise outrank the [hidden] presentation hint. */
[hidden] { display: none !important; }

body {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  /* Pull-to-refresh would reload the page and drop a half-typed record. */
  overscroll-behavior-y: contain;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums slashed-zero;
}

a { color: var(--marca); }
h1, h2, h3 { margin: 0; }

a, button, input, select, textarea, label {
  -webkit-tap-highlight-color: rgba(46, 125, 67, 0.15);
  touch-action: manipulation;
}

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- icons ---------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Tabler geometry is drawn for a 2px stroke on a 24px grid. */
.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

/* ---------- top bar ---------- */

.topo {
  background: var(--topo-bg);
  color: var(--topo-tinta);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--topo-linha);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* The mark is crimson on a crimson bar, so it sits on a paper tile — the way
   the hexagons sit on white in the Xanadu logo — instead of dissolving into it. */
.marca img {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  padding: 3px;
  background: var(--topo-tinta);
}
.marca-txt { line-height: 1.05; min-width: 0; }
.marca-txt strong { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; display: block; }
.marca-txt span { font-size: 0.66rem; color: var(--topo-tinta-64); letter-spacing: 0.06em; text-transform: uppercase; }

.nav-topo { display: flex; gap: 4px; margin-left: 8px; }

.nav-topo a {
  color: var(--topo-tinta-64);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 7px 12px;
  border-radius: var(--r-sm);
}

.nav-topo a:hover { color: var(--topo-tinta); background: rgba(255, 255, 255, 0.07); }
.nav-topo a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.12); }

.topo :focus-visible { outline-color: var(--topo-tinta); }

.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icone-btn {
  background: none;
  border: 0;
  color: var(--topo-tinta-64);
  width: var(--alvo);
  height: var(--alvo);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  padding: 0;
}

.icone-btn:hover { color: var(--topo-tinta); background: rgba(255, 255, 255, 0.07); }
.icone-btn svg { width: 19px; height: 19px; }

html[data-theme="dark"] .so-claro { display: none; }
html:not([data-theme="dark"]) .so-escuro { display: none; }

/* ---------- main ---------- */

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) 92px max(16px, env(safe-area-inset-left));
}

@media (min-width: 720px) {
  main { padding-bottom: 40px; }
}

.pagina-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}

.pagina-cabeca h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.pagina-cabeca .sub { margin: 2px 0 0; color: var(--tinta-64); font-size: 0.92rem; }

.titulo-maquina { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cabeca-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* .acao is sized for the card grid, where it fills its column. */
.cabeca-acoes .acao { flex: none; width: auto; }

@media (max-width: 480px) {
  .cabeca-acoes { width: 100%; }
  .cabeca-acoes > .acao, .cabeca-acoes > .botao { flex: 1 1 100%; width: 100%; }
}

h2 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--solo);
  margin: 26px 0 10px;
}

.cartao-titulo { margin: 0 0 14px; }

.voltar {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  font-size: 0.85rem;
  color: var(--tinta-64);
  text-decoration: none;
}

.voltar:hover { color: var(--marca); }

.nota { margin: 0 0 14px; font-size: 0.78rem; color: var(--tinta-64); }

/* ---------- messages ---------- */

.faixa {
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 0.92rem;
  margin: 0 0 14px;
}

.faixa.erro { background: var(--perigo-tint); border: 1px solid var(--perigo); color: var(--perigo); }

/* Offline notice: htmx swallows a failed navigation, so without this a tap
   with no signal looks like nothing happened at all. */
.sem-rede {
  position: sticky;
  top: 0;
  z-index: 39;
  background: var(--palha-tint);
  border-bottom: 1px solid var(--palha);
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  padding: 8px 16px;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--palha-tint);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 12px;
}

.estado:empty { display: none; }

.estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--palha);
  flex: none;
}

.msg { font-weight: 600; margin: 14px 0 0; }
.msg:empty { display: none; }
.msg.ok { color: var(--sucesso); }
.msg.aviso { color: var(--palha); }
.msg.erro { color: var(--perigo); }

.vazio {
  color: var(--tinta-64);
  background: var(--solo-tint);
  border: 1px dashed var(--linha);
  border-radius: var(--r);
  padding: 18px 16px;
  font-size: 0.95rem;
}

/* ---------- fichas (machine cards) ---------- */

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 12px;
}

.ficha {
  background: var(--ficha-bg);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.ficha:hover { border-color: var(--marca); transform: translateY(-1px); }

.ficha-topo { display: flex; align-items: center; gap: 10px; }

.ficha-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--solo-tint);
  color: var(--solo);
}

.ficha-icone .icone { width: 26px; height: 26px; }
.ficha-icone.grande { width: 52px; height: 52px; }
.ficha-icone.grande .icone { width: 32px; height: 32px; }

.ficha-id { min-width: 0; }
.ficha-nome { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.3; color: inherit; text-decoration: none; }
a.ficha-nome:hover { color: var(--marca); }
.ficha-tipo { font-size: 0.78rem; color: var(--tinta-64); }
.ficha-ultima { font-size: 0.82rem; color: var(--tinta-64); }
.ficha-ultima .mono { color: var(--tinta); }

.ficha-leitura { font-size: 0.78rem; color: var(--tinta-64); }
.ficha-leitura b { font-weight: 600; color: var(--tinta); }

/* ---------- próxima manutenção ---------- */

.proxima {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  /* Colour is spent on the exception, not the rule: a service that is merely
     coming up gets the neutral soil wash, so the one card that is overdue is
     the only red on a page full of machines. */
  background: var(--sulco);
}

.proxima .icone { width: 20px; height: 20px; margin-top: 2px; color: var(--solo); }
.proxima.vencida { background: var(--perigo-tint); }
.proxima.vencida .icone { color: var(--perigo); }

.proxima-rotulo {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-64);
}

.proxima.vencida .proxima-rotulo { color: var(--perigo); }
.proxima-descricao { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.proxima-prazo { display: block; font-size: 0.82rem; color: var(--tinta-64); }
.proxima-sem { margin: 0; font-size: 0.85rem; color: var(--tinta-64); }

/* ---------- card actions ---------- */

/* Registrar takes its own row: three labelled buttons never fit across a
   card on a phone, and dropping the labels leaves a bare trash can. */
.ficha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}

.ficha-acoes .destaque { flex: 1 1 100%; }
.ficha-acoes form { margin: 0; display: flex; flex: 1 1 calc(50% - 3px); }
.ficha-acoes > .acao:not(.destaque) { flex: 1 1 calc(50% - 3px); }

.acao {
  flex: 1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  background: none;
  color: var(--tinta-64);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.acao .icone { width: 16px; height: 16px; }
.acao:hover { border-color: var(--marca); color: var(--marca); }
.acao.destaque { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.acao.destaque:hover { filter: brightness(1.08); color: var(--sobre-marca); }
.acao.perigo:hover { border-color: var(--perigo); color: var(--perigo); }

/* ---------- history ---------- */

.mes { margin: 0 0 22px; }

.mes-titulo {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--solo);
}

.registros { list-style: none; margin: 0; padding: 0; }

.registro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--ficha-bg);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.registro-dia {
  flex: none;
  width: 42px;
  display: grid;
  place-items: center;
  padding: 5px 0;
  border-radius: var(--r-sm);
  background: var(--solo-tint);
  color: var(--solo);
  line-height: 1.1;
}

.registro-dia strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.15rem;
  font-weight: 700;
}

.registro-dia span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }

.registro-corpo { flex: 1; min-width: 0; }

.registro-maquina {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tinta-64);
  text-decoration: none;
}

.registro-maquina .icone { width: 15px; height: 15px; }
.registro-maquina:hover { color: var(--marca); }
.registro-descricao { margin: 2px 0 0; font-weight: 600; line-height: 1.35; }
.registro-obs { margin: 3px 0 0; font-size: 0.85rem; color: var(--tinta-64); }

.registro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }

.etiqueta {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--solo-tint);
  font-size: 0.72rem;
  color: var(--tinta-64);
}

.etiqueta b { font-weight: 600; color: var(--tinta); }
.etiqueta.troca { background: var(--palha-tint); }
.etiqueta.troca b { color: var(--palha); }

.registro-autor { font-size: 0.72rem; color: var(--tinta-64); }

.registro-editar {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: var(--alvo);
  min-height: var(--alvo);
  border-radius: var(--r-sm);
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--tinta-64);
  text-decoration: none;
}

.registro-editar .icone { width: 17px; height: 17px; }
.registro-editar:hover { color: var(--marca); background: var(--solo-tint); }

/* ---------- forms ---------- */

.cartao {
  background: var(--ficha-bg);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 18px;
  /* Full-page width would stretch a date field across half a monitor. */
  max-width: 36rem;
  margin: 0 0 16px;
}

/* Labels point at their control with `for` instead of wrapping it: a wrapping
   label re-dispatches the tap onto the control, which some mobile browsers
   read as a second toggle and use to close the date picker they just opened. */
.campo { margin: 0 0 14px; }
.campo label, .campo-titulo { display: block; font-weight: 600; font-size: 0.9rem; }
.campo .dica { display: block; font-weight: 400; color: var(--tinta-64); font-size: 0.78rem; margin-top: 1px; }

input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: var(--alvo);
  padding: 11px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 400;
  color: var(--tinta);
  background: var(--papel);
}

::placeholder { color: var(--tinta-64); opacity: 1; }

input:focus, select:focus, textarea:focus { border-color: var(--marca); }

input[type="number"], input[type="date"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* iOS gives date inputs their own intrinsic box and right-aligns the value,
   which leaves the date floating away from every other field on the form. */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
}

input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Enlarged: the default glyph is the only part of the field that opens the
   picker on a desktop browser, and it is a ~10px target. */
input[type="date"]::-webkit-calendar-picker-indicator {
  width: 24px;
  height: 24px;
  padding: 4px;
  margin-right: -4px;
  cursor: pointer;
  opacity: 0.75;
}

.campo-unidade { display: flex; align-items: center; gap: 10px; }
.campo-unidade input { flex: 1; margin-top: 0; min-width: 0; }
.campo-unidade select { width: auto; margin-top: 0; flex: none; }

.sufixo {
  font-weight: 600;
  color: var(--solo);
  min-width: 3.5em;
}

.busca { max-width: 24rem; }
.busca-campo { position: relative; display: flex; align-items: center; }

.busca-campo .icone {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--tinta-64);
  pointer-events: none;
}

.busca-campo input { padding-left: 40px; }

/* ---------- date field ---------- */

.campo-data-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.data-atalhos { display: flex; gap: 6px; }

.chip {
  background: var(--solo-tint);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--tinta);
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 34px;
  padding: 0 14px;
}

.chip:hover { border-color: var(--marca); color: var(--marca); }
.chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }

/* The native picker spells the date out in the *browser's* locale, so a
   pt-BR user can be shown 07/30/2026. This echo is never ambiguous. */
.data-extenso {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--tinta-64);
}

.data-extenso:empty { display: none; }
.data-extenso::first-letter { text-transform: uppercase; }

/* ---------- buttons ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--marca);
  color: var(--sobre-marca);
  border: 0;
  border-radius: var(--r-sm);
  min-height: var(--alvo);
  padding: 11px 20px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}

.botao:hover { filter: brightness(1.08); }
.botao.largo { width: 100%; padding: 13px; font-size: 1.02rem; }
.botao[disabled] { opacity: 0.6; cursor: progress; filter: none; }

.filtro { max-width: 22rem; }

/* ---------- bottom nav (mobile) ---------- */

.nav-fundo {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-around;
  background: var(--ficha-bg);
  border-top: 1px solid var(--linha);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(36, 41, 28, 0.08);
}

.nav-fundo a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--alvo);
  text-decoration: none;
  color: var(--tinta-64);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 4px 0;
  border-radius: var(--r-sm);
}

.nav-fundo a .icone { width: 23px; height: 23px; }
.nav-fundo a[aria-current="page"] { color: var(--marca); }

@media (min-width: 720px) {
  .nav-fundo { display: none; }
}

@media (max-width: 719px) {
  .nav-topo { display: none; }
}

/* ---------- login ---------- */

body.tela-entrada {
  background:
    repeating-linear-gradient(-6deg,
      transparent 0, transparent 26px,
      var(--sulco) 26px, var(--sulco) 28px),
    var(--papel);
}

.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  margin: -20px -16px -92px;
}

.entrada-cartao {
  width: 100%;
  max-width: 22rem;
  background: var(--ficha-bg);
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: var(--sombra-alta);
  padding: 30px 26px;
  text-align: center;
}

.entrada-cartao img { width: 64px; height: 64px; border-radius: 13px; }
.entrada-cartao h1 { font-size: 1.3rem; font-weight: 700; margin-top: 10px; }

.entrada-sub {
  color: var(--tinta-64);
  font-size: 0.82rem;
  margin: 2px 0 20px;
}

.entrada-cartao .campo { text-align: left; }