/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ---- Ícones de linha usados fora da sidebar (badges, banners, títulos) ---- */
.icon-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-inline svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.icon-badge svg {
  width: 22px;
  height: 22px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: transparent;
  color: var(--text-body);
  border-color: var(--border-subtle);
}

.btn-ghost:hover {
  background: var(--overlay-soft);
  border-color: var(--border-strong);
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.btn-danger:hover {
  filter: brightness(1.15);
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--fs-xs);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Visualmente igual a :disabled, mas continua clicável — usado quando o clique precisa
   disparar feedback (toast) explicando por que a ação está bloqueada, em vez de simplesmente
   não fazer nada (o que o atributo disabled nativo faz, sem chance de explicar o motivo). */
.btn-soft-disabled {
  opacity: 0.5;
}

.btn-soft-disabled:hover {
  filter: none;
}

/* ---- Icon quick-action buttons ---- */
.icon-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-3);
}

.icon-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card-raised);
  color: var(--text-body);
  cursor: pointer;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.icon-action:hover {
  border-color: var(--color-primary-600);
  background: var(--surface-card);
  transform: translateY(-2px);
}

.icon-action .icon-badge {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card-raised);
  border: 1px solid var(--border-subtle);
  color: var(--color-primary);
  font-size: 16px;
}

/* ---- Page title row (usado no admin e no portal) ---- */
.page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-title-row p {
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ---- Cards ---- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

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

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.card-clickable:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* ---- Grid helpers ---- */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-kpi {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---- Avatars ---- */
.avatar-square {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-card-raised);
  border: 1px solid var(--border-subtle);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

/* ---- Status pill ---- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill[data-status="pago"] {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-pill[data-status="pendente"] {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-pill[data-status="ativo"] {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-pill[data-status="inativo"] {
  background: var(--overlay-mid);
  color: var(--text-muted);
}

/* ---- Badges (roles / small labels) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--overlay-mid);
  color: var(--text-body);
}

.badge-primary {
  background: rgba(212, 175, 124, 0.14);
  color: var(--color-primary);
}

/* ---- KPI tiles ---- */
.kpi-tile {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.kpi-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.kpi-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.kpi-delta {
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: var(--space-1);
}

.kpi-delta.up {
  color: var(--color-success);
}

.kpi-delta.down {
  color: var(--color-danger);
}

.kpi-sparkline {
  margin-top: var(--space-3);
  display: block;
  width: 100%;
  height: 32px;
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.kpi-icon svg {
  width: 18px;
  height: 18px;
}

/* ---- Donut (rosca) com legenda ---- */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.donut-legend {
  flex: 1;
  min-width: 160px;
}

.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--fs-sm);
}

.donut-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend-label {
  flex: 1;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.donut-legend-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.donut-segment {
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.donut-segment:hover {
  filter: brightness(1.2);
}

.donut-wrap:has(.donut-segment:hover) .donut-segment:not(:hover) {
  opacity: 0.35;
}

.radial-hoverable {
  cursor: pointer;
}

.radial-hoverable:hover svg circle:last-child {
  filter: brightness(1.3) !important;
}

/* ---- Tables ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.table {
  width: 100%;
  font-size: var(--fs-sm);
}

.table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--surface-card-raised);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr.total-row td {
  font-weight: 700;
  background: var(--surface-card-raised);
}

.table tr.total-row-strong td {
  font-weight: 700;
  background: rgba(212, 175, 124, 0.08);
  color: var(--color-primary-bright);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table tbody tr:hover {
  background: var(--overlay-faint);
}

/* ---- Open items list (contas a receber / pagar) ---- */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}

.list-row:last-child {
  border-bottom: none;
}

.list-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.list-row-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-row-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---- Sidebar / Topbar shell ---- */
#app-shell {
  display: flex;
  min-height: 100vh;
  /* Garante que sidebar/topbar/conteúdo sempre pintem por cima do .topo-backdrop (fixed,
     z-index:0) injetado pelo nav.js — sem isso a ordem de empilhamento do CSS deixaria o
     backdrop por cima de conteúdo estático comum. */
  position: relative;
  z-index: 1;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface-sidebar);
  color: var(--color-gray-700);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-3);
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--border-subtle);
  transition: width 0.18s ease;
}

.sidebar-collapse-btn {
  position: absolute;
  top: 26px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-card-raised);
  border: 1px solid var(--border-subtle);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  z-index: 6;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-collapse-btn:hover {
  border-color: var(--color-primary);
  color: var(--text-body);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-6);
  color: var(--text-body);
  white-space: nowrap;
}

.sidebar-brand-textwrap {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  overflow: hidden;
}

.sidebar-brand-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-brand-subtitle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--color-gray-600);
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-link-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.sidebar-link:hover .sidebar-link-icon,
.sidebar-link.active .sidebar-link-icon {
  color: currentColor;
}

.sidebar-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Sidebar retraída ---- */
body.sidebar-collapsed .sidebar {
  width: 76px;
}

body.sidebar-collapsed .sidebar .sidebar-link-text,
body.sidebar-collapsed .sidebar .sidebar-section-label,
body.sidebar-collapsed .sidebar-brand-textwrap {
  display: none;
}

body.sidebar-collapsed .sidebar .sidebar-link-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--overlay-soft);
}

body.sidebar-collapsed .sidebar .sidebar-link-icon svg {
  width: 16px;
  height: 16px;
}

body.sidebar-collapsed .sidebar .sidebar-link.active .sidebar-link-icon {
  background: var(--overlay-strong);
}

body.sidebar-collapsed .sidebar .sidebar-link {
  justify-content: center;
  padding: 8px 4px;
}

body.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-600);
  padding: var(--space-4) var(--space-3) var(--space-2);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  cursor: pointer;
}

.sidebar-link:hover {
  background: var(--surface-sidebar-active);
  color: var(--text-body);
}

.sidebar-link.active {
  background: var(--surface-sidebar-active);
  color: var(--color-primary);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-7);
  /* Transparente, não var(--surface-page) — deixa o gradiente do body (ver base.css) passar por
     trás em vez de cortar com uma faixa sólida. */
  background: transparent;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ---- Seletor de competência (topbar admin e portal) ---- */
.competencia-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.competencia-picker select {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.competencia-picker select:hover {
  background: var(--overlay-soft);
  border-color: var(--border-strong);
}

.competencia-picker select option {
  color: var(--text-body);
  background: var(--surface-card);
  font-weight: 500;
}

.content {
  padding: var(--space-7);
  flex: 1;
}

.content-narrow {
  max-width: 960px;
}

/* ---- Alternador de tema (topbar) ---- */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card-raised);
  color: var(--text-body);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-toggle-btn:hover {
  border-color: var(--color-primary);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
}

/* ---- Session pill (topbar) ---- */
.session-pill {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  cursor: pointer;
}

.session-pill:hover {
  border-color: var(--border-strong);
}

.session-pill .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-card-raised);
  border: 1px solid var(--border-subtle);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}

.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text-body);
}

.tab.active {
  color: var(--color-primary-bright);
  border-bottom-color: var(--color-primary);
}

/* ---- Forms ---- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-raised);
  color: var(--text-body);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-muted);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary-bright);
  box-shadow: 0 0 0 3px rgba(212, 175, 124, 0.15);
}

.form-field textarea {
  resize: vertical;
  min-height: 90px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* Grade de lançamento manual por categoria (DRE) — usa auto-fill (não auto-fit) para que a
   largura das colunas fique igual em todas as linhas, mesmo quando uma delas tem poucos itens
   (ex.: 3 categorias de receita vs. 9 de dedução); sem isso a linha com menos itens esticava e
   ficava com colunas bem mais largas que as outras. Rótulos longos são truncados numa linha só
   (com title= mostrando o nome completo) para as caixas de valor ficarem sempre alinhadas. */
.form-grid-manual {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.form-grid-manual .form-field label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Modal / toast ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: var(--space-5);
}

.modal {
  background: var(--surface-card-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.toast-stack {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 60;
}

.toast {
  background: var(--surface-card-raised);
  border: 1px solid var(--border-strong);
  color: var(--text-body);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  animation: toast-in 0.15s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Banner "Vendo como [cliente]" (modo operador, ver nav.js: mountAppShell) ---- */
.impersonation-banner {
  background: var(--color-info-bg);
  color: var(--color-info);
  padding: 8px var(--space-7);
  gap: var(--space-3);
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  justify-content: space-between;
}

.impersonation-banner button {
  flex-shrink: 0;
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--text-muted);
}

/* ---- Radar ---- */
.radar-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}

.radar-item:last-child {
  border-bottom: none;
}

.radar-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
}

.radar-dot.green {
  background: var(--color-success);
}

.radar-dot.yellow {
  background: var(--color-warning);
}

.radar-dot.red {
  background: var(--color-danger);
}

/* ---- Filter bar ---- */
.filter-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  align-items: center;
}

.filter-bar select,
.filter-bar input {
  font-size: var(--fs-sm);
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card-raised);
  color: var(--text-body);
}

.search-field {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.search-field input {
  width: 100%;
  padding-left: 34px;
}

.search-field::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  box-shadow: 5px 5px 0 -3px var(--text-muted);
}

/* ---- Ranking bars (maiores despesas, composição) ---- */
.bar-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.bar-track {
  height: 20px;
  background: var(--surface-card-raised);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
}

.bar-label {
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-value {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ---- Barra de progresso (indicadores da Visão Geral) ---- */
.progress-row {
  margin-bottom: var(--space-4);
}

.progress-row:last-child {
  margin-bottom: 0;
}

.progress-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.progress-row-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-body);
}

.progress-row-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--overlay-mid);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-success);
}

.progress-fill.estourado {
  background: var(--color-danger);
}

/* ---- Linha de pendência (título + subtítulo + valor + badge), usada na Visão Geral ---- */
.pendencia-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pendencia-row:last-child {
  border-bottom: none;
}

.pendencia-row-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pendencia-row-icon svg {
  width: 16px;
  height: 16px;
}

.pendencia-row-main {
  flex: 1;
  min-width: 0;
}

.pendencia-row-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pendencia-row-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pendencia-row-end {
  text-align: right;
  flex-shrink: 0;
}

.pendencia-row-value {
  font-weight: 600;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.pendencia-row-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 3px;
  white-space: nowrap;
}

/* ---- Seletor de período (Mensal / Trimestral / Anual) ---- */
.chart-toggle {
  display: inline-flex;
  background: var(--overlay-mid);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.chart-toggle button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chart-toggle button.active {
  background: var(--surface-card-raised);
  color: var(--text-body);
  box-shadow: var(--shadow-sm);
}

/* ---- Anel radial (KPI de margem) ---- */
.kpi-radial-wrap {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}

/* ---- Tooltip de gráfico (sparkline, fluxo de caixa, evolução da margem) ---- */
.chart-hit {
  cursor: pointer;
}

.chart-tooltip {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--surface-card-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: var(--fs-xs);
  color: var(--text-body);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
  line-height: 1.6;
}

.chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.chart-tooltip .tip-title {
  display: block;
  font-weight: 700;
  color: var(--text-body);
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-subtle);
}

.chart-tooltip .tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-tooltip .tip-row strong {
  margin-left: auto;
  padding-left: 10px;
  font-variant-numeric: tabular-nums;
}

.chart-tooltip .tip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ---- Linhas de topografia (textura de fundo, telas de autenticação/hero) ----
   Nada de glow/blur colorido — só arcos finos (border, sem fill) na opacidade de --grid-line
   (3%), sugerindo curvas de nível de mapa topográfico. Nunca deve prejudicar a leitura. */
.topo-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.topo-line {
  position: absolute;
  border: 1px solid var(--grid-line);
  border-radius: 50%;
}

.topo-line.l1 {
  width: 900px;
  height: 900px;
  top: -320px;
  left: -220px;
}

.topo-line.l2 {
  width: 680px;
  height: 680px;
  top: -200px;
  left: -100px;
}

.topo-line.l3 {
  width: 1100px;
  height: 1100px;
  bottom: -420px;
  right: -320px;
}

.topo-line.l4 {
  width: 820px;
  height: 820px;
  bottom: -280px;
  right: -180px;
}

/* ==========================================================================
   Responsivo — mobile/tablet retrato. A sidebar vira uma folha subindo de
   baixo (bottom sheet, fixed) aberta pelo botão de menu no topbar (admin) ou
   pelo item "Mais" da bottom nav (app) em vez de ficar fixa ao lado do
   conteúdo; tudo que era grade de 2-3 colunas empilha em 1 coluna.
   Um único breakpoint cobre celular e tablet retrato — não há necessidade
   de um layout intermediário nesta fase.
   ========================================================================== */

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
}

.mobile-menu-btn svg {
  width: 18px;
  height: 18px;
}

/* Fundo escurecido atrás da gaveta — cobre o conteúdo inteiro e fecha a gaveta ao ser tocado.
   Só existe visualmente abaixo do breakpoint mobile (ver media query); em telas largas fica
   sempre display:none, então não atrapalha nada mesmo estando sempre no DOM. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 38;
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }

  /* O botão de retrair/expandir desktop não faz sentido na gaveta mobile — quem abre/fecha é
     sempre o botão de menu do topbar + o fundo escurecido. */
  .sidebar-collapse-btn {
    display: none;
  }

  #app-shell {
    display: block;
  }

  /* "Mais" (bottom nav do app) e o menu do topbar (admin) abrem isto como uma folha subindo de
     baixo (bottom sheet) — não mais uma gaveta deslizando da lateral, que lembra painel de
     desktop. Mais nativo de app de celular. */
  .sidebar {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 78vh;
    height: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    z-index: 46;
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }

  .sidebar::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 999px;
    margin: 0 auto var(--space-4);
  }

  body.mobile-nav-open .sidebar {
    transform: translateY(0);
    box-shadow: var(--shadow-lg);
  }

  body.mobile-nav-open .sidebar-backdrop {
    display: block;
  }

  /* A folha mobile sempre abre "expandida" (com texto), mesmo que o usuário tenha deixado a
     sidebar retraída (ícones só) da última vez que usou em desktop — os dois estados são
     independentes por design (um é lido de localStorage, o outro nunca persiste). */
  body.sidebar-collapsed .sidebar {
    width: 100% !important;
  }

  body.sidebar-collapsed .sidebar .sidebar-link-text,
  body.sidebar-collapsed .sidebar .sidebar-section-label,
  body.sidebar-collapsed .sidebar-brand-textwrap {
    display: block !important;
  }

  body.sidebar-collapsed .sidebar .sidebar-link-icon {
    width: 20px !important;
    height: 20px !important;
    background: none !important;
  }

  body.sidebar-collapsed .sidebar .sidebar-link-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  body.sidebar-collapsed .sidebar .sidebar-link {
    justify-content: flex-start !important;
    padding: 10px var(--space-3) !important;
  }

  body.sidebar-collapsed .sidebar-brand {
    justify-content: flex-start !important;
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  .main-col {
    width: 100%;
    min-width: 0;
  }

  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    row-gap: var(--space-3);
  }

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

  /* Toda grade ad-hoc (2 ou 3 colunas via style="grid-template-columns:...") empilha em 1
     coluna — cobre KPIs, gráficos lado a lado, cards de cliente, formulários de categoria,
     bases de importação, etc. sem precisar editar cada página individualmente.
     minmax(0, 1fr) — não só "1fr" — porque uma coluna "1fr" sozinha não encolhe abaixo da
     largura mínima do conteúdo (tabelas, gráficos), o que estourava a tela pro lado. */
  .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .client-detail-header {
    flex-wrap: wrap;
  }

  .page-title-row h2 {
    font-size: var(--fs-lg);
  }

  .modal {
    padding: var(--space-5);
  }

  /* .list-row (contas a receber/pagar, categorias) tem selects com min-width fixo
     (220px/200px) lado a lado — não cabe em 375px. Empilha cada div-filho em uma
     linha própria e deixa os selects ocuparem a largura toda. */
  .list-row {
    flex-wrap: wrap;
  }

  .list-row > div {
    flex: 1 1 100%;
    min-width: 0;
  }

  .list-row select {
    width: 100%;
    min-width: 0 !important;
  }

  .impersonation-banner {
    padding: var(--space-2) var(--space-3);
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* Nome + cargo de quem está logado cabem bem em tablet; no celular, o cargo já é redundante
     (aparece nos outros lugares do app) e sobra pouco espaço no topbar quebrado em duas linhas. */
  .session-role-label {
    display: none;
  }
}

/* ==========================================================================
   Barra de navegação inferior (mobile, só na área do cliente) — em vez da
   gaveta lateral (usada só no admin), o app do cliente usa uma bottom tab
   bar fixa com os destinos mais usados + um item "Mais" que abre a mesma
   gaveta (.sidebar) por cima, reaproveitando o CSS/JS dela. Só existe
   visualmente abaixo do breakpoint mobile — em desktop fica sempre
   display:none (mountAppShell usa a sidebar normal). Ativada adicionando
   a classe body.has-bottom-nav (ver nav.js: mountAppShell).
   ========================================================================== */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-nav-height);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-sidebar);
  border-top: 1px solid var(--border-subtle);
  z-index: 45;
}

.bottom-nav-inner {
  display: flex;
  height: var(--bottom-nav-height);
}

.bottom-nav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0 2px;
}

.bottom-nav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav-item svg {
  width: 21px;
  height: 21px;
}

.bottom-nav-item.active {
  color: var(--color-primary-bright);
}


@media (max-width: 768px) {
  body.has-bottom-nav .bottom-nav {
    display: block;
  }

  /* No app do cliente quem abre a gaveta ("Mais") é a bottom nav, não um botão no topbar. */
  body.has-bottom-nav .mobile-menu-btn {
    display: none;
  }

  body.has-bottom-nav .content {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-6));
  }
}