/* ============================================================
   monitoramento-territorial.css — só o que é específico da tela
   ============================================================ */

#map {
    height: 520px;
    width: 100%;
    border-radius: var(--t-radius-md);
    overflow: hidden;
    border: 1px solid var(--t-border);
}

@media (max-width: 700px) {
    #map { height: 360px; }
}

/* Alternador entre rua e satélite */
.mt-modos {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--t-surface-soft);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-pill);
}

.mt-modo {
    padding: 5px 14px;
    font: inherit;
    font-size: var(--t-fs-xs);
    font-weight: 600;
    color: var(--t-muted);
    background: transparent;
    border: 0;
    border-radius: var(--t-radius-pill);
    cursor: pointer;
}

.mt-modo:hover { color: var(--t-text); }

.mt-modo.is-ativo {
    color: var(--t-on-accent);
    background: var(--t-primary);
}

/* Célula com nome do ACS e nome do usuário */
.ui-table .acs-name {
    display: block;
    font-weight: 600;
    color: var(--t-text);
}

.ui-table .acs-subtitle {
    display: block;
    font-size: var(--t-fs-xs);
    color: var(--t-muted);
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-size: var(--t-fs-xs);
    font-weight: 600;
    border-radius: var(--t-radius-pill);
    white-space: nowrap;
}

.status-chip.ok  { color: var(--t-ok);      background: var(--t-ok-soft); }
.status-chip.off { color: var(--t-neutral); background: var(--t-neutral-soft); }

.ui-table .btn-link {
    font: inherit;
    font-size: var(--t-fs-sm);
    color: var(--t-primary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ui-table .btn-link:hover { color: var(--t-primary-dark); }

/* Balão do marcador no mapa */
.popup-title {
    display: block;
    font-weight: 700;
    color: var(--t-text);
    margin-bottom: 2px;
}

.popup-meta {
    display: block;
    font-size: var(--t-fs-xs);
    color: var(--t-muted);
}