/* =====================================================================
   GEOBIOS — base de componentes (FASE 09.1), comum à ADMIN e ao Portal.
   Usa só os tokens de design-tokens.css. Peças: selo de situação, cabeçalho de página,
   cartão de indicador, estado vazio, tabela e painel lateral de edição.
   ===================================================================== */
.ds-status-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;border:1px solid transparent}
.ds-tone-success.ds-status-badge{color:var(--ds-success);background:var(--ds-success-bg)}
.ds-tone-info.ds-status-badge{color:var(--ds-info);background:var(--ds-info-bg)}
.ds-tone-warning.ds-status-badge{color:var(--ds-warning);background:var(--ds-warning-bg)}
.ds-tone-danger.ds-status-badge{color:var(--ds-danger);background:var(--ds-danger-bg)}
.ds-tone-neutral.ds-status-badge{color:var(--ds-ink-2);background:var(--ds-surface-2);border-color:var(--ds-line)}

.ds-page-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin:0 0 16px}
.ds-page-header-text{min-width:0;flex:1 1 320px}
.ds-page-header h2{margin:0;font-size:22px;line-height:1.25;color:var(--ds-ink)}
.ds-page-header p{margin:4px 0 0;max-width:70ch}
.ds-page-header-actions{display:flex;flex-wrap:wrap;gap:8px}

.ds-kpi-card{display:grid;gap:4px;align-content:start;text-align:left;min-width:0;padding:16px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);box-shadow:var(--ds-shadow-xs);color:var(--ds-ink);font:inherit}
button.ds-kpi-card{cursor:pointer}
button.ds-kpi-card:hover{border-color:var(--ds-line-strong);box-shadow:var(--ds-shadow-sm)}
button.ds-kpi-card:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds-kpi-value{font-size:28px;line-height:1.1;font-weight:800;overflow-wrap:anywhere}
.ds-kpi-label{font-size:14px;font-weight:700}
.ds-kpi-detail{font-size:12px;color:var(--ds-muted)}
.ds-kpi-card.is-zero .ds-kpi-value{color:var(--ds-subtle);font-weight:600}
.ds-kpi-card.ds-tone-danger:not(.is-zero){border-color:#efc4c4}
.ds-kpi-card.ds-tone-danger:not(.is-zero) .ds-kpi-value{color:var(--ds-danger)}

.ds-empty-state{display:grid;justify-items:start;gap:6px;padding:18px;border:1px dashed var(--ds-line-strong);border-radius:var(--ds-radius);background:var(--ds-surface-2);color:var(--ds-ink-2)}
.ds-empty-state b{color:var(--ds-ink)}
.ds-empty-state p{margin:0;color:var(--ds-muted);max-width:60ch}

.ds-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

.ds-drawer-scrim{position:fixed;inset:0;z-index:80;background:rgba(10,35,31,.32)}
.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(480px,100vw);display:flex;flex-direction:column;background:var(--ds-surface);box-shadow:var(--ds-shadow-lg);border-left:1px solid var(--ds-line)}
.ds-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ds-line)}
.ds-drawer-head h3{margin:0;font-size:17px}
.ds-drawer-body{flex:1;overflow:auto;padding:18px 20px;display:grid;align-content:start;gap:14px}
.ds-drawer-body form{display:grid;gap:12px}
.ds-drawer-body .monitor-rural-admin-form,.ds-drawer-body .inline-form{grid-template-columns:1fr}
.ds-drawer.hidden,.ds-drawer-scrim.hidden{display:none}
body.ds-drawer-open{overflow:hidden}

/* =====================================================================
   Experiência premium, PR 5 (08/11/2026) — identidade por módulo.
   A cor vem de [data-module] (design-tokens.css): no menu, cada grupo tem a sua; no cabeçalho,
   o body recebe o módulo da tela aberta (admin-shell.js). Só apresentação.
   ===================================================================== */
/* Menu (fundo escuro): ponto colorido no título do grupo e barra do item ativo na cor do módulo,
   clareada para manter contraste sobre o verde-escuro da barra lateral. */
/* UX P10: ponto do grupo mais saturado, para a cor do módulo aparecer no fundo escuro do menu. */
.sidebar .nav-group[data-module]{--ds-mod-on-dark:color-mix(in srgb,var(--ds-mod) 72%,#fff)}
/* 8 grupos cabem em 1440×900 sem rolar o menu (Administração recolhida). */
.sidebar .nav-group-heading{min-height:0;padding:6px 12px 2px;line-height:1.2;font-size:10.5px}
.sidebar .nav-group+.nav-group{padding-top:2px}
@media(min-width:1001px){.sidebar .nav-group .nav-item{min-height:35px;padding-top:6px;padding-bottom:6px}}
.sidebar .nav-group-heading .nav-group-label,.sidebar .nav-group-toggle .nav-group-label{display:inline-flex;align-items:center;gap:8px}
.sidebar .nav-group[data-module] .nav-group-label::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ds-mod-on-dark)}
.sidebar .nav-group[data-module] .nav-item.active{box-shadow:inset 3px 0 0 var(--ds-mod-on-dark),inset 0 0 0 1px rgba(255,255,255,.06)}
.sidebar .nav-group[data-module] .nav-item.active .nav-icon{color:var(--ds-mod-on-dark)}
body.ds-sidebar-collapsed .sidebar .nav-group[data-module] .nav-group-heading::before,
body.ds-sidebar-collapsed .sidebar .nav-group[data-module] .nav-group-toggle::before{border-top-color:var(--ds-mod-on-dark)}
/* Cabeçalho: faixa fina na cor do módulo e rótulo da trilha (ex.: TERRITÓRIO) na mesma cor. */
body[data-module] .app-shell .topbar{box-shadow:inset 0 3px 0 var(--ds-mod)}
body[data-module] .ds-breadcrumb .eyebrow{color:var(--ds-mod)}
/* Barra de áreas do celular: área ativa na cor do módulo. */
body[data-module] .ds-area-bar [data-area-view].active{color:var(--ds-mod);background:var(--ds-mod-bg)}
/* Estados vazios ilustrados: ícone do módulo num círculo suave; o texto não muda. */
.ds-empty-art{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ds-mod,var(--ds-brand-600));background:var(--ds-mod-bg,var(--ds-brand-50));box-shadow:0 0 0 6px color-mix(in srgb,var(--ds-mod,#0f4e47) 5%,transparent)}
.ds-empty-art .ds-icon{width:22px;height:22px}
.ds-empty-state{grid-template-columns:auto 1fr;align-items:center;column-gap:14px}
.ds-empty-text{display:grid;justify-items:start;gap:6px;min-width:0}
.app-shell .empty-data.ds-empty-illustrated{display:flex;align-items:center;gap:14px;text-align:left}
.app-shell .empty-data.ds-empty-illustrated .ds-empty-art{width:36px;height:36px;box-shadow:none}
.app-shell .empty-data.ds-empty-illustrated .ds-empty-art .ds-icon{width:18px;height:18px}