/* ==========================================================================
   AgroTech – utilitários e composições transversais
   Camada fina: só o que é reutilizado em três ou mais páginas.
   ========================================================================== */

[x-cloak],
.is-hidden {
  display: none !important;
}

/* Composição ------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.stack--2 {
  gap: var(--space-2);
}

.stack--3 {
  gap: var(--space-3);
}

.stack--5 {
  gap: var(--space-5);
}

.stack--6 {
  gap: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.cluster--2 {
  gap: var(--space-2);
}

.between {
  justify-content: space-between;
}

.split {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.grid-3--tight {
  gap: var(--space-3);
}

/* Texto ------------------------------------------------------------------ */

.muted {
  color: var(--text-muted);
}

.soft {
  color: var(--text-soft);
}

.small {
  font-size: var(--text-xs);
  line-height: 1.55;
}

.tiny {
  font-size: var(--text-2xs);
  line-height: 1.5;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.nowrap {
  white-space: nowrap;
}

.text-end {
  text-align: end;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lede {
  max-width: 64ch;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1.65;
}

/* Secções ---------------------------------------------------------------- */

.section {
  margin-block-start: var(--space-6);
}

.section--tight {
  margin-block-start: var(--space-4);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.section-head__meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.divider {
  height: 1px;
  margin-block: var(--space-4);
  background: var(--border);
}

/* Cartões ----------------------------------------------------------------- */

.card--flush .card__body {
  padding: 0;
}

.card--flush .card__body > .table-wrap {
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
}

.card--quiet {
  box-shadow: none;
}

.card--scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.card__body--tight {
  padding: var(--space-4);
}

.card__body--flush {
  padding: 0;
}

.card__footer--muted {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Faixas de indicadores --------------------------------------------------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.stat-strip .kpi {
  padding: var(--space-4);
}

.stat-strip .kpi__value {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
}

/* Indicadores genéricos --------------------------------------------------- */

.metric {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.metric__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.legend-list__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-list__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.legend-list__dot--warning {
  background: var(--warning);
}

.legend-list__dot--info {
  background: var(--info);
}

/* Formulários ------------------------------------------------------------- */

.field-row--2 {
  display: grid;
  gap: var(--space-4);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.inline-form .field {
  flex: 1 1 13rem;
}

.inline-form .btn {
  flex: none;
}

.fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  border: 0;
}

.fieldset__legend {
  padding: 0;
  margin-block-end: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.form-actions--sticky {
  position: sticky;
  inset-block-end: var(--space-3);
  z-index: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
}

/* Imagem editorial -------------------------------------------------------- */

.media-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.media-card__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}

.media-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  background: linear-gradient(180deg, transparent, rgba(6, 16, 12, 0.78));
  color: #eef5ef;
  font-size: var(--text-2xs);
  letter-spacing: 0.02em;
}

.media-card__caption a {
  color: #eef5ef;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.media-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

/* Autenticação – fotografia real da Pexels --------------------------------- */

.auth__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(0.82) contrast(1.05);
  pointer-events: none;
  user-select: none;
}

.auth__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 20, 16, 0.5), rgba(6, 16, 12, 0.9) 78%),
    radial-gradient(70% 60% at 15% 0%, rgba(199, 243, 107, 0.14), transparent 60%);
  pointer-events: none;
}

.auth__brand > * {
  z-index: 2;
}

.auth__credit {
  color: #93a89e;
  font-size: var(--text-2xs);
}

.auth__credit a {
  color: inherit;
}

/* Mapa -------------------------------------------------------------------- */

.map--hero {
  min-height: 100%;
}

.map__empty {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  min-height: 13rem;
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.map__empty .icon {
  color: var(--border-strong);
}

.map--tall {
  min-height: 18rem;
}

/* Tabelas ----------------------------------------------------------------- */

.table-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.table-card .pagination {
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}

.table__link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.table__link:hover {
  color: var(--accent);
}

.cell-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* Checklist / onboarding -------------------------------------------------- */

.checklist--compact .check-item {
  padding: var(--space-3);
}

.check-item__box .icon {
  width: 0.85rem;
  height: 0.85rem;
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-md);
  background:
    linear-gradient(120deg, var(--accent-soft), transparent 70%),
    var(--surface);
}

.banner__body {
  min-width: 0;
  flex: 1;
}

.banner__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
}

.banner__text {
  margin-block-start: 0.15rem;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Estados honestos de módulos futuros ------------------------------------- */

.planned {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Zona de risco ----------------------------------------------------------- */

.danger-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface));
}

.danger-zone__body {
  flex: 1 1 14rem;
  min-width: 0;
}

.danger-zone__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--danger);
}

.danger-zone__text {
  margin-block-start: 0.15rem;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Design system ----------------------------------------------------------- */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.swatch {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.swatch__chip {
  height: 4.25rem;
  background: var(--swatch, var(--accent));
}

.swatch__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--space-3);
}

.swatch__name {
  font-size: var(--text-xs);
  font-weight: 600;
}

.swatch__value {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--border);
}

.type-row:last-child {
  border-block-end: 0;
}

.type-row__sample {
  flex: 1 1 14rem;
  min-width: 0;
}

.type-row__token {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.demo-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.code-block {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

/* Impressão --------------------------------------------------------------- */

@media print {
  .sidebar,
  .topbar,
  .bottom-nav,
  .toasts,
  .palette,
  .shell__scrim,
  .page__actions,
  .filters,
  .pagination {
    display: none !important;
  }

  .shell,
  .shell__main {
    display: block;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .card,
  .kpi,
  .table-card {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* Breakpoints ------------------------------------------------------------- */

@media (min-width: 40rem) {
  .field-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .stat-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat-strip--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page__header {
    align-items: center;
  }
}

@media (max-width: 47.999rem) {
  .page__actions {
    width: 100%;
  }

  .page__actions .btn {
    flex: 1 1 auto;
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Utilitários substitutos de estilos inline (CSP sem 'unsafe-inline') */
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.bt-line { border-block-start: 1px solid var(--border); }
.col-all { grid-column: 1 / -1; }
.uppercase { text-transform: uppercase; }
.mono { font-family: var(--font-mono); }
.gap-5 { gap: var(--space-5); }
.h-4rem { height: 4rem; }
.ds-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ds-subtitle { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.ds-unit { font-size: 0.45em; color: var(--text-muted); }
.hero-muted { font-weight: 400; font-size: 0.8em; color: #93a89e; }
.empty--on-dark { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #dbe9e1; }
.empty--on-dark .empty__title { color: #f6fbf7; }
.empty--on-dark .empty__text { color: #b8cbc1; }
.swatch-forest { background: var(--forest); } .swatch-navy { background: var(--navy); } .swatch-emerald { background: var(--emerald); }
.swatch-lime { background: var(--lime); } .swatch-ivory { background: var(--ivory); } .swatch-muted { background: var(--text-muted); }
.swatch-line { background: var(--line); } .swatch-amber { background: var(--amber); } .swatch-coral { background: var(--coral); } .swatch-blue { background: var(--blue); }
input[name='code'], input[name='country_code'] { text-transform: uppercase; }
textarea[name='geometry_geojson'] { font-family: var(--font-mono); }
.sk-line { height: 1rem; } .sk-60 { width: 60%; } .sk-85 { width: 85%; }
.mb-4 { margin-block-end: var(--space-4); }