/* Paineis /conta/ e /admin/ -- layout de pagina, tabelas, formularios, dashboard, metas e kanban.
   Base de componentes em ui.css; cores 100% dos tokens da marca (claro/escuro). */
#login-screen, #app-shell { display: none; }
#app-shell { min-height: 100dvh; }

#topbar {
  position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));
  background: var(--surface-elevated); border-bottom: 1px solid var(--border-subtle);
}
#topbar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
#topbar .brand img { height: 34px; width: auto; }
#topbar .where { margin-right: auto; }
#topbar .who { font-size: 13px; color: var(--text-secondary); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar .actions { display: flex; align-items: center; gap: 8px; }
main { max-width: 1120px; margin: 24px auto; padding: 0 16px calc(24px + var(--safe-b)); }

.card { box-shadow: none; }
.card h2 { font-size: 17px; }
.section-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin: 22px 0 10px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.panel-header select, #account-selector { width: auto; min-width: 180px; margin-right: 8px; }
.panel-header h2 { margin: 0; }
.tag { margin-right: 4px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-grid label { display: block; margin-bottom: 6px; }
.checkbox-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; font-size: 13px; background: var(--surface);
}
.checkbox-grid label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; min-height: 32px; }
.password-reveal { background: var(--success-surface); color: var(--success-text); border: 1px solid var(--success-border); border-radius: var(--r-md); padding: 10px 12px; font-size: 14px; margin-top: 10px; }
.password-reveal code { background: var(--surface); padding: 2px 8px; border-radius: var(--r-sm); font-weight: 600; user-select: all; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi-card { background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.kpi-value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.funnel-stage { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.funnel-stage-label { width: 104px; font-size: 13px; color: var(--text-secondary); }
.funnel-stage-track { flex: 1; height: 22px; background: var(--surface-muted); border-radius: var(--r-sm); overflow: hidden; }
.funnel-stage-fill { height: 100%; background: var(--action-primary); min-width: 2px; }
.funnel-stage-count { width: 40px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-item { border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; background: var(--surface); }
.goal-item-top { font-size: 14px; margin-bottom: 10px; }

.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; }
.kanban-col { background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 10px; min-height: 220px; }
.kanban-col-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; cursor: grab; }
.kanban-card-title { font-weight: 600; margin-bottom: 3px; }
.kanban-card-meta { color: var(--text-secondary); font-size: 12px; }

@media (max-width: 560px) {
  #topbar .brand img { height: 28px; }
  #topbar .actions > a { display: none; }
}
@media (max-width: 720px) {
  #topbar .who, #topbar .where { display: none; }
  #topbar .actions { margin-left: auto; }
  main { margin-top: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 16px; border-radius: var(--r-md); }
  table { min-width: 520px; }
  .card:has(table) { overflow-x: auto; }
  .funnel-stage-label { width: 78px; }
  .kpi-value { font-size: 22px; }
}

/* seletor de territorio (shared/access-picker.js): busca, estado inteiro, municipios por estado */
.ap { display: flex; flex-direction: column; gap: 8px; }
.ap-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ap-search { flex: 1 1 220px; min-width: 0; }
.ap-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-summary { margin: 0; font-size: 13px; color: var(--text-secondary); }
.ap-summary b { color: var(--text-primary); }
.ap-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.ap-state { border-bottom: 1px solid var(--border-subtle); }
.ap-state:last-child { border-bottom: 0; }
.ap-state-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 44px; }
.ap-whole { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; flex: 1; cursor: pointer; }
.ap-state-head > b { flex: 1; }
.ap-badge { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border-subtle); color: var(--text-secondary); white-space: nowrap; }
.ap-badge-on { background: var(--success-surface); border-color: var(--success-border); color: var(--success-text); }
.ap-toggle { border: 0; background: transparent; color: var(--action-primary); font-size: 13px; font-weight: 600; min-height: 32px; padding: 4px 8px; cursor: pointer; }
.ap-state-body { padding: 4px 10px 10px; background: var(--surface-muted); }
.ap-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.ap-filter { flex: 1 1 180px; min-width: 0; }
.ap-munis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; max-height: 220px; overflow-y: auto; font-size: 13px; }
.ap-list > .ap-munis { padding: 8px; max-height: 300px; }
.ap-muni { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; min-height: 32px; }
.ap-quick { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
@media (max-width: 640px) { .ap-munis { grid-template-columns: repeat(2, 1fr); } }