/* ============================================================
   Dashboard Comercial — Tema visual (replicando o mockup)
   ============================================================ */

:root {
  --sidebar-bg-1: #5B0A0A;
  --sidebar-bg-2: #3D0707;
  --bg: #F6F7FB;
  --card: #FFFFFF;
  --text: #1F2733;
  --muted: #6B7280;
  --primary: #2D4F8A;
  --positive: #1E9E5A;
  --negative: #C0392B;
  --border: #E9ECF2;

  /* Tokens de design premium */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 28px rgba(45,79,138,0.16);
  --kpi-glow: none;

  /* Paleta ACL Data — usada no portal de abertura */
  --duby-bg: #ffffff;
  --duby-principal: #1F6AAB;   /* azul médio (texto DATA da logo) */
  --duby-comp-1: #1A5790;      /* hover */
  --duby-comp-2: #14416E;      /* gradiente médio */
  --duby-tipografia: #0F2545;  /* texto principal navy */
  --duby-extra: #5DC1E8;       /* ciano do swoosh — acento */

  /* Gradiente azul ACL Data (anexo Figma) — fundo do login */
  --acl-grad-1: #30648A;
  --acl-grad-2: #5FBADD;

  /* Login dark navy (paleta do arquivo da logo ACL Data) */
  --login-bg-glow: #16315C;   /* brilho azul atrás da logo (centro) */
  --login-bg-deep: #0C1E3D;   /* navy base */
  --login-bg-edge: #081328;   /* navy nas bordas */
  --login-card:    #122A4D;   /* card um pouco mais claro que o fundo */
  --login-card-bd: rgba(255,255,255,0.10);
  --login-input:   #0E2142;   /* fundo dos inputs */
  --login-input-bd: rgba(255,255,255,0.16);
  --login-text:    #EAF1F9;   /* texto claro */
  --login-muted:   #93A4BA;   /* labels/subtítulo */
}

/* ============== DARK MODE OVERRIDES =============== */
[data-theme="dark"] {
  --bg: #0F1320;
  --card: #1A1F2E;
  --text: #D7DBE3;
  --muted: #8A91A0;
  --primary: #5B86C7;
  --border: #272D3A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.50);
  --shadow-lg: 0 14px 32px rgba(0,0,0,0.60);
  --kpi-glow: 0 0 18px rgba(91,134,199,0.28);
}
[data-theme="dark"] .main-content {
  background: var(--bg);
  color: var(--text);
}
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] #react-entry-point,
[data-theme="dark"] #_dash-app-content { background: var(--bg); color: var(--text); }
[data-theme="dark"] .panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="dark"] .panel:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .page-title { color: var(--text); }
[data-theme="dark"] .page-title b { color: #FFF; }
[data-theme="dark"] .panel-title { color: var(--empresa-cor, #E0E0E0); }
[data-theme="dark"] .filter-label { color: var(--muted); }
[data-theme="dark"] .last-update { color: var(--muted); }
[data-theme="dark"] .form-label { color: #B8BCC4; }
[data-theme="dark"] .form-hint { color: #888; }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-dd .Select-control,
[data-theme="dark"] .dim-dropdown .Select-control,
[data-theme="dark"] .Select.is-focused > .Select-control {
  background: #262A31 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .Select-value-label,
[data-theme="dark"] .Select-placeholder,
[data-theme="dark"] .Select-input > input { color: var(--text) !important; }
[data-theme="dark"] .Select-menu-outer {
  background: #262A31 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .VirtualizedSelectOption { color: var(--text); }
[data-theme="dark"] .VirtualizedSelectFocusedOption { background: #2D3138 !important; }
[data-theme="dark"] .btn-toolbar {
  background: #262A31;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .btn-toolbar.btn-primary {
  background: var(--primary);
  color: #FFF;
}
[data-theme="dark"] .data-table { color: var(--text); }
[data-theme="dark"] .data-table th { background: #262A31; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .data-table td { border-color: var(--border); }
[data-theme="dark"] .data-table tbody tr:nth-child(odd) { background: #1B1E24; }
[data-theme="dark"] .data-table tbody tr:hover td { background: #262A31; }
[data-theme="dark"] .kpi-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .kpi-card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .kpi-value { color: #F0F2F6; }
[data-theme="dark"] .kpi-title { color: var(--muted); }
[data-theme="dark"] .delta-label { color: #888; }
[data-theme="dark"] .dev-table thead th,
[data-theme="dark"] .conf-table thead th {
  background: var(--card);
  color: var(--empresa-cor, #E0E0E0);
  border-color: var(--border);
}
[data-theme="dark"] .dev-table tbody td,
[data-theme="dark"] .conf-table tbody td {
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .dev-table tbody tr:hover td,
[data-theme="dark"] .conf-table tbody tr:hover td {
  background: #262A31;
}
[data-theme="dark"] .dev-table tfoot td { background: #262A31; }
[data-theme="dark"] .dev-table tbody tr.dev-row-selected td,
[data-theme="dark"] .conf-table tbody tr.conf-row-selected td {
  background: #232838;
}
[data-theme="dark"] .chip {
  background: #262A31;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .audit-changes {
  background: #1B1E24;
  border-left-color: var(--border);
}
[data-theme="dark"] .audit-detail-line { color: var(--text); }
[data-theme="dark"] .audit-field { color: #B8BCC4; }
[data-theme="dark"] .audit-before { background: #3a1f1f; color: #FF6E6E; }
[data-theme="dark"] .audit-after { background: #1f3a26; color: #7CD789; }
/* Compras DataTable */
[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner table {
  background: var(--card);
  color: var(--text);
}
[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background: var(--primary) !important;
}
[data-theme="dark"] .dash-cell {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .dash-cell.focused { background: #2D3138 !important; }
/* Botão de tema na sidebar */
.btn-theme {
  background: rgba(255,255,255,0.10);
  color: #FFF;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.btn-theme:hover { background: rgba(255,255,255,0.20); }
.user-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.user-actions .btn-logout,
.user-actions .btn-theme { flex: 1; justify-content: center; }
.app-shell.collapsed .btn-theme .menu-label,
.app-shell.collapsed .btn-logout .menu-label { display: none; }

* { box-sizing: border-box; }
html, body, #react-entry-point, #_dash-app-content {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============== LAYOUT ROOT =============== */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.main-content {
  flex: 1;
  min-width: 0;
  padding: 18px 24px;
  margin-left: 200px;
}

/* ============== SIDEBAR =============== */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 200px;
  height: 100vh;
  background: linear-gradient(180deg, var(--sidebar-bg-1) 0%, var(--sidebar-bg-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 0;
  box-shadow: 2px 0 6px rgba(0,0,0,0.08);
  /* Alto o bastante pra painéis internos (notif-panel, admin-menu-panel, ambos
     z-index:2000) escaparem do conteúdo principal — o sidebar é fixed+z-index,
     então cria seu próprio stacking context e um z-index baixo aqui capava
     esses painéis, mesmo com z-index alto neles. Abaixo dos modais fullscreen
     (zoom/anot/fin-cat: 2000-2100) e dos loaders (9000+). */
  z-index: 500;
  transition: width 0.06s ease-out;
}
.main-content { transition: margin-left 0.06s ease-out; }
.logo-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
  gap: 6px;
}
.sidebar-logo {
  max-width: 140px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: white;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: max-width 0.06s ease-out, max-height 0.06s ease-out,
              padding 0.06s ease-out;
}
.sidebar-empresa-name {
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  max-width: 160px;
}
.sidebar-empresa-name:empty { display: none; }

/* Botão chevron de recolher / expandir a sidebar */
.sidebar-toggle-btn {
  position: absolute;
  top: 16px;
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--sidebar-bg-1);
  border: 2px solid var(--sidebar-bg-1);
  cursor: pointer;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.sidebar-toggle-btn:hover {
  background: #FFE9E9;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.sidebar-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.25);
}
.sidebar-toggle-btn i {
  transition: transform 0.12s ease;
}
.app-shell.collapsed .sidebar-toggle-btn i {
  transform: rotate(180deg);
}
.logo-circle {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: white;
  color: var(--sidebar-bg-1);
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* .rocha-logo: legacy alias — preserva compat caso exista markup antigo;
   o componente atual usa .sidebar-logo. Mantém estilo similar ao novo. */
.rocha-logo {
  max-width: 140px;
  max-height: 70px;
  object-fit: contain;
  background: white;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  flex: 1;
}
.menu-link { text-decoration: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.menu-item:hover {
  background: rgba(255,255,255,0.08);
}
.menu-item.active {
  background: white;
  color: var(--sidebar-bg-1);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sidebar-bg-1);
}
.menu-icon {
  width: 20px;
  font-size: 16px;
  text-align: center;
  opacity: 0.9;
}
.menu-item.active .menu-icon { opacity: 1; }
.clear-filters {
  margin: 16px 10px 0 10px;
  font-size: 13px;
  opacity: 0.85;
}

/* ============== HEADER =============== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
/* Faixa única agrupando Ano/Mês/Dia + Empresa (pílulas) */
.filters-group {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ===== Botão "Filtros" (icon-only, na toolbar ao lado do Atualizar) ===== */
.filters-dropdown { position: relative; display: inline-flex; }
/* realce quando o painel está aberto (o botão herda .btn-icon) */
.filters-dropdown.open .filters-toggle-btn { filter: brightness(1.12); }

.filters-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.18), 0 2px 6px rgba(16,24,40,0.08);
  padding: 14px;
  min-width: 248px;
  max-height: 80vh;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.filters-dropdown.open .filters-panel { display: flex; }
/* setinha premium apontando para o botão */
.filters-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-left: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  border-top: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  transform: rotate(45deg);
}
/* dentro do painel: filtros empilhados, compactos */
.filters-panel .filters-row { flex-direction: column; align-items: stretch; gap: 10px; }
.filters-panel .filter-block,
.filters-panel .empresa-segmentador-wrap { width: 100%; }
.filters-panel .filter-label { margin-bottom: 3px; font-size: 10px; }
.filters-panel .Select-control { min-height: 30px !important; border-radius: 14px; }

.filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}
.filters-dropdown.open .filters-backdrop { display: block; }
.page-title {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--empresa-cor, #5C0A0A);
}
.page-title b { font-weight: 700; }

/* ===== Telas administrativas com a paleta ACL Data (navy + azul) ===== */
.admin-page {
  --empresa-cor: #0F2545;   /* títulos/cabeçalhos em navy ACL */
  --primary: #1F6AAB;       /* botões/ações/foco/edit em azul ACL */
}
.admin-page .btn-toolbar.btn-primary {
  background: var(--duby-principal);
  border-color: var(--duby-principal);
}
.admin-page .btn-toolbar.btn-primary:hover {
  background: #2A77BC;
  border-color: #2A77BC;
}
.filters-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.filter-block {
  display: flex;
  flex-direction: column;
}
.filter-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
.filter-block .Select-control,
.filter-block .dash-dropdown {
  min-width: 110px;
  font-size: 13px;
}

/* ====== Segmentadores Ano/Mês/Dia/Empresa como pílulas preenchidas ======
   Escopado aos filtros de período/empresa — NÃO afeta o f-dim ("FATURAMENTO
   POR") que também usa .dim-dropdown dentro de .panel-title. */
.filters-row .filter-block .Select-control,
.empresa-segmentador-wrap .Select-control {
  background: var(--empresa-cor, #1F3864) !important;
  border: 1px solid var(--empresa-cor, #1F3864) !important;
  border-radius: 18px;
  min-height: 32px;
  padding-left: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.filters-row .filter-block .Select-value-label,
.filters-row .filter-block .Select-placeholder,
.filters-row .filter-block .Select-input > input,
.filters-row .filter-block .Select--single > .Select-control .Select-value .Select-value-label,
.empresa-segmentador-wrap .Select-value-label,
.empresa-segmentador-wrap .Select-placeholder,
.empresa-segmentador-wrap .Select-input > input {
  color: #fff !important;
}
.filters-row .filter-block .Select-arrow,
.empresa-segmentador-wrap .Select-arrow {
  border-top-color: #fff;
}
.filters-row .filter-block .is-open .Select-arrow,
.empresa-segmentador-wrap .is-open .Select-arrow {
  border-top-color: transparent;
  border-bottom-color: #fff;
}
.filters-row .filter-block .Select-clear,
.empresa-segmentador-wrap .Select-clear {
  color: rgba(255,255,255,0.85);
}

/* ============== KPI CARDS =============== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
/* Linha com 3 cards (Compras) — sem isto os cards ficariam com 1/5 da largura. */
.kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.kpi-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.kpi-text { flex: 1; }
.kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--kpi-glow);
}
.kpi-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.kpi-delta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin-top: 6px;
}
.kpi-delta.positive { color: var(--positive); }
.kpi-delta.negative { color: var(--negative); }
.kpi-delta.neutral { color: var(--muted); }
.delta-pct { font-weight: 700; }
.delta-label { color: var(--muted); margin-left: 4px; }

/* Layout colunar dos KPIs (rótulo | valor anterior | %) — grid único p/ as duas
   linhas alinharem as colunas entre si. display:contents no wrapper de linha faz
   os 3 spans participarem do grid e herdarem a cor (verde alta / vermelho queda). */
.kpi-deltas.cols {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3px 10px;
  margin-top: 6px;
  font-size: 11px;
}
.kpi-delta-row { display: contents; }
.kpi-delta-row.positive { color: var(--positive); }
.kpi-delta-row.negative { color: var(--negative); }
.kpi-delta-row.neutral  { color: var(--muted); }
.kpi-deltas.cols .delta-label { color: inherit; margin-left: 0; }
.kpi-deltas.cols .delta-val { text-align: right; font-variant-numeric: tabular-nums; }
.kpi-deltas.cols .delta-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--empresa-cor, var(--primary)) 90%, #fff),
              color-mix(in srgb, var(--empresa-cor, var(--primary)) 65%, #000));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--empresa-cor, var(--primary)) 35%, transparent);
}

/* ============== PANELS / CARDS DE GRÁFICO =============== */
.panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* ESTABILIDADE DE LAYOUT (evita "abre pequeno" / layout que pula) -------------
   Rede de segurança: todo gráfico dentro de .panel reserva altura mínima já no
   primeiro paint, então o Plotly renderiza no tamanho certo em vez de nascer
   pequeno e "abrir" quando a cascata de resize roda. Alturas inline (style=...)
   maiores continuam valendo. Sparklines ficam em .dev-kpi-card, fora daqui. */
.panel .dash-graph { min-height: 300px; }
/* Revela cada gráfico suavemente quando a query volta e ele monta (fade-in só na
   1ª montagem — o Plotly reusa o nó no auto-refresh, então NÃO re-anima e não
   "pisca" a cada atualização). */
.panel .js-plotly-plot { animation: acl-chart-in .35s ease-out both; }
@keyframes acl-chart-in { from { opacity: 0; } to { opacity: 1; } }

/* ESQUELETO (shimmer) enquanto a query carrega — no lugar do branco. Usado como
   custom_spinner do dcc.Loading (components/loading.py). Preenche o espaço já
   reservado pela altura mínima do painel. */
.acl-skel {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.04);
  background-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0.00) 0%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.00) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: acl-skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes acl-skel-shimmer {
  0%   { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}
[data-theme="dark"] .acl-skel {
  background-color: rgba(255, 255, 255, 0.03);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.00) 100%);
}

/* Botão "expandir" no canto superior direito de cada panel */
.panel-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--empresa-cor, #5C0A0A);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.panel:hover .panel-expand { opacity: 0.9; }
.panel-expand:hover { background: rgba(0, 0, 0, 0.06); opacity: 1; }
[data-theme="dark"] .panel-expand { color: #E0E0E0; }
[data-theme="dark"] .panel-expand:hover { background: rgba(255, 255, 255, 0.1); }

/* Modal de apresentação (expandir gráfico) */
.zoom-wrap { display: none; }
.zoom-wrap.open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.zoom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sem teto de largura: o "expandir" é pra ocupar a tela. O teto de 1400px
     deixava faixa branca dos dois lados em monitor grande (1920+). */
  width: 96vw;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  padding: 16px 20px 20px;
}
.zoom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.zoom-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .zoom-title { color: #E0E0E0; }
.zoom-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #333);
}
.zoom-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .zoom-close { color: #E0E0E0; }
[data-theme="dark"] .zoom-close:hover { background: rgba(255, 255, 255, 0.12); }

/* Modebar premium dentro do modal de apresentação */
.zoom-modal .modebar {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 5px;
  box-shadow: var(--shadow-sm);
}
.zoom-modal .modebar-group { margin: 0 1px !important; }
.zoom-modal .modebar-btn svg { fill: var(--muted, #8A93A2); transition: fill 0.12s; }
.zoom-modal .modebar-btn:hover svg { fill: var(--empresa-cor, var(--primary)); }
.zoom-modal .modebar-btn.active svg { fill: var(--empresa-cor, var(--primary)); }
[data-theme="dark"] .zoom-modal .modebar {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .zoom-modal .modebar-btn svg { fill: #B8C0CC; }
.panel.panel--filtering {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 6px 16px rgba(31,56,100,0.18);
}
.panel:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  transform: translateY(-2px);
}
.panel:active,
.panel.is-clicked {
  box-shadow: 0 2px 6px rgba(31,56,100,0.18) inset, 0 6px 18px rgba(31,56,100,0.14);
  transform: translateY(0);
}
.kpi-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.kpi-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  transform: translateY(-2px);
}
/* Plotly cursor pointer nos elementos clicáveis */
.panel .js-plotly-plot .plotly .plot .barlayer .point,
.panel .js-plotly-plot .plotly .plot .surfacelayer .slice {
  cursor: pointer !important;
}
.panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--empresa-cor, #5C0A0A);
  margin-bottom: 6px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  padding-right: 30px;   /* reserva o canto p/ o botão expandir, sem sobrepor */
}
/* Ícone (i) com o significado da métrica — tooltip NATIVO via atributo `title`
   (hover). Usa o tooltip do navegador de propósito: ele é desenhado fora do
   fluxo do DOM, então nunca é cortado pelo overflow:hidden do .panel/.kpi-card
   (uma tooltip-box em CSS, posicionada dentro do painel, seria decepada perto
   das bordas — ver comentário da linha ~609). */
.info-icon {
  font-size: 11px;
  color: var(--muted);
  cursor: help;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.info-icon:hover { opacity: 1; color: var(--empresa-cor, var(--primary)); }

.panel-title .dim-dropdown {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 12px;
}

/* Seletor de métrica premium (R$ | Qtd | %) — segmented control */
.panel-title .metric-toggle { margin-left: auto; }
/* Painéis com DOIS seletores (ex.: Total/Média + R$/Qtd/%) agrupam os dois
   num wrapper — só ele recebe o margin-left:auto, senão o navegador reparte o
   espaço livre entre os dois `.metric-toggle` e abre um vão entre eles. */
.panel-title .panel-toggle-group { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.panel-title .panel-toggle-group .metric-toggle { margin-left: 0; }
.metric-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  flex-shrink: 0;
}
.metric-toggle label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted, #8A93A2);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.metric-toggle label:not(:last-child) { border-right: 1px solid var(--border); }
.metric-toggle input { display: none; }
.metric-toggle label:hover { background: rgba(0, 0, 0, 0.04); }
.metric-toggle label:has(input:checked) {
  background: var(--empresa-cor, var(--primary));
  color: #fff;
}
[data-theme="dark"] .metric-toggle label:hover { background: rgba(255, 255, 255, 0.06); }

.row-2col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
/* Coluna de painéis empilhados dentro de uma linha do grid (ex.: as duas roscas
   do Gerencial, uma sobre a outra, ao lado do painel de grupo). */
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* Painel que ESTICA: o card é alongado pelo grid até a altura da coluna vizinha,
   e o gráfico acompanha em vez de deixar faixa branca embaixo. O min-height é
   rede de segurança — dcc.Graph sem altura definida colapsa para zero. */
.panel-fill {
  display: flex;
  flex-direction: column;
}
.panel-fill .panel-body {
  position: relative;      /* âncora do .graph-fill abaixo */
  flex: 1 1 auto;
  min-height: 460px;       /* rede: sem isto um colapso vira gráfico de altura 0 */
}
/* O dcc.Loading envolve o gráfico em dois divs SEM classe: o de fora leva
   `position:relative` INLINE. Como ele é posicionado, é ELE (não o .panel-body)
   que ancora o .graph-fill absoluto — e, tendo como único filho um elemento
   absoluto, sua altura desaba para 0. O gráfico ficava sem altura de container e
   o Plotly caía no default dele, deixando faixa branca no resto do card. Esticar
   os dois wrappers devolve a altura do .panel-body à âncora. */
.panel-fill .panel-body > div,
.panel-fill .panel-body > div > div {
  height: 100%;
}
/* O gráfico é ANCORADO nesse wrapper (já esticado acima), não encadeado por
   height:100% no próprio dcc.Graph: o Loading quebra a cadeia de percentuais. */
.panel-fill .graph-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.row-2col-eq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Linha de um painel só, largura total. */
.row-1col { margin-bottom: 14px; }

/* Dois painéis de ranking lado a lado, colunas iguais (Grupo | SubGrupo etc.). */
.row-rank-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  /* Grid estica os itens pra igualar a altura por padrão (align-items:
     stretch) — com um ranking bem maior que o outro (ex.: dezenas de
     clientes vs. poucos vendedores), o card mais curto ficava com uma
     sobra de espaço em branco embaixo do gráfico, que tem altura própria
     fixa por número de linhas. Cada painel agora fica só do tamanho que
     precisa. */
  align-items: start;
}
/* min-width:0 — sem isso o item de grid usa a largura mínima do conteúdo e o
   par de painéis estoura a linha em nomes longos (cliente/produto). */
.row-rank-2col > .panel { min-width: 0; }
/* Abaixo de 1100px as barras horizontais não cabem em meia tela: empilha. */
@media (max-width: 1100px) {
  .row-rank-2col { grid-template-columns: 1fr; }
}

/* Três painéis lado a lado (ex.: Faturamento por Grupo/SubGrupo/Produto). */
.row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .row-3col { grid-template-columns: 1fr; }
}

/* ============== TABELA TOP VENDEDORES =============== */
.top-vendedores-table .dash-spreadsheet-container {
  border: none !important;
}
.top-vendedores-table table { border-collapse: collapse; }
.top-vendedores-table th {
  background: white !important;
  color: #555 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  border-bottom: 1px solid #DDD !important;
}
.top-vendedores-table td {
  font-size: 12px !important;
  padding: 8px 10px !important;
  color: white !important;
}
.top-vendedores-table .vend-row {
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.top-vendedores-table .vend-row:hover {
  filter: brightness(1.15);
}
.top-vendedores-table .vend-row.selected td {
  box-shadow: inset 0 0 0 2px white;
}
.top-vendedores-table .vend-row:active {
  transform: scale(0.995);
}

/* Top Produtos por filial: N tabelas lado a lado (grid-template-columns vem
   inline, com o nº de filiais em escopo). */
.top-prod-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}
.top-prod-col { min-width: 0; }
.top-prod-filial {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0 0 6px 2px;
  margin-bottom: 4px;
  border-bottom: 2px solid transparent;
}
/* Em telas estreitas as tabelas empilham (nomes de produto não cabem em 1/3). */
@media (max-width: 1100px) {
  .top-prod-grid { grid-template-columns: 1fr !important; }
}

/* ============== PLACEHOLDER =============== */
.placeholder-page {
  background: var(--card);
  border-radius: 8px;
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--border);
}
.placeholder-page h2 {
  color: #5C0A0A;
  margin-bottom: 8px;
}

/* ============== UTILS =============== */
.dim-dropdown .Select-control { border: 1px solid #DDD; min-height: 28px; }

/* ============== TOOLBAR (atualizar / limpar / timestamp) =============== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
}
/* Toggle "Por loja | Mensal" dos relatórios de pivô (Grupo/SubGrupo/Produto):
   reaproveita a pele do .metric-toggle, só alinhando à altura da toolbar. */
.view-toggle-wrap {
  display: flex;
  align-items: center;
}
.view-toggle-wrap .metric-toggle {
  margin: 0;
}
/* `hidden_columns` faz o DataTable renderizar o menu "Toggle Columns". Nesses
   relatórios as colunas ocultas são internas (marcador da linha de total e o
   valor numérico da variação, usado só para colorir), então o menu não serve
   a ninguém e ainda rouba altura da tabela. */
#grupo-table .dash-spreadsheet-menu,
#subgrupo-table .dash-spreadsheet-menu,
#produto-table .dash-spreadsheet-menu {
  display: none;
}
/* Retorno do upload de planilha (relatório Previsão). */
.upload-msg:empty { display: none; }
.upload-msg {
  margin: 6px 0 10px;
  font-size: 12px;
  border-radius: 6px;
  padding: 8px 12px;
}
.upload-msg .upload-ok {
  color: var(--positive);
}
.upload-msg .upload-erro {
  color: var(--negative);
}
#previsao-table .dash-spreadsheet-menu,
#pagamento-table .dash-spreadsheet-menu {
  display: none;
}
#previsao-table .dash-spreadsheet.dash-freeze-top,
#pagamento-table .dash-spreadsheet.dash-freeze-top {
  max-height: calc(100vh - 158px);
}
/* Compras: cabeçalho congelado ao rolar. Acima da tabela ficam o header do
   relatório e a linha de KPIs (filtros são popover, não ocupam altura).
   Sem `fixed_rows` (recursão do handleResize) — o header é fixado via
   `position: sticky`, e o rolo é o próprio contêiner do style_table.
   O dash_table NÃO usa `<thead>` real: cada linha do cabeçalho (título e a
   linha de filtro do `filter_action="native"`, que só o Compras usa) é uma
   `<table>` própria com `<th>` — por isso `thead{position:sticky}` não pega
   nada. E grudar TODO `th` (`.dash-spreadsheet-container th`) gruda a linha
   de filtro junto, sobrepondo-a na linha de título ao rolar. A fórmula certa
   é grudar só `th.dash-header` (linha de título) — a linha de filtro rola
   normalmente, sem sobrepor nada. */
#compras-table .dash-spreadsheet.dash-freeze-top,
#compras-table .dash-spreadsheet.dash-virtualized {
  max-height: calc(100vh - 240px);
}
#compras-table th.dash-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Pivôs (grupo/subgrupo/produto) e pagamento/previsao: idem compras — saíram do
   `fixed_rows` (recursão do handleResize). Como têm cabeçalho de 2 linhas
   (merge_duplicate_headers), fixa o thead inteiro em vez de th linha a linha,
   pra as duas linhas não empilharem no topo. O rolo é o style_table. */
#grupo-table thead,
#subgrupo-table thead,
#produto-table thead,
#pagamento-table thead,
#previsao-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* O dash_table embute `.dash-spreadsheet.dash-freeze-top, .dash-virtualized
   { max-height: 500px }`. O `height` do `style_table` vai no contêiner externo,
   mas quem rola é esse elemento interno — e max-height vence height. Sem
   sobrescrever aqui, a tabela trava em 500px e sobra tela em branco.
   O seletor com #id (1,2,0) já supera o do pacote (0,2,0): sem !important. */
#grupo-table .dash-spreadsheet.dash-freeze-top,
#grupo-table .dash-spreadsheet.dash-virtualized,
#subgrupo-table .dash-spreadsheet.dash-freeze-top,
#subgrupo-table .dash-spreadsheet.dash-virtualized,
#produto-table .dash-spreadsheet.dash-freeze-top,
#produto-table .dash-spreadsheet.dash-virtualized {
  max-height: calc(100vh - 118px);
}
.last-update {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ===== Lado direito do header: faixa de info (filtros ativos + atualizado) ===== */
.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.header-right .toolbar { margin-left: 0; }
.header-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 640px;
}
/* "Atualizado em ..." bem pequeno, na cor primária da empresa */
.header-info .last-update {
  font-size: 9.5px;
  color: var(--empresa-cor, var(--primary));
  font-weight: 600;
  opacity: 1;
  white-space: nowrap;
}

/* Barra de filtros ativos compacta + só informativa (sem remover) */
.header-info .active-filters {
  margin: 0;
  padding: 3px 8px;
  gap: 5px;
  border-radius: 999px;
}
.header-info .active-filters-label { font-size: 9.5px; margin: 0 2px 0 0; }
.header-info .chip {
  padding: 1px 9px;
  font-size: 11px;
  box-shadow: none;
}
.header-info .chip:hover { box-shadow: none; transform: none; }
.header-info .chip-label { font-size: 9.5px; }
.header-info .chip-close {   /* "×" para remover o filtro */
  display: inline-flex;
  width: 16px;
  height: 16px;
  font-size: 12px;
  margin-left: 4px;
}
.btn-toolbar {
  display: inline-flex;
  align-items: center;
  background: white;
  border: 1px solid #DDD;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-toolbar:hover { background: #F4F6FB; border-color: #BBB; }
.btn-toolbar.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.btn-toolbar.btn-primary:hover { background: #16294A; border-color: #16294A; }
/* Botões só com ícone (Atualizar / Limpar filtros): quadrados e centrados */
.btn-toolbar.btn-icon {
  justify-content: center;
  padding: 7px;
  width: 34px;
  height: 32px;
  font-size: 14px;
}
/* Botão de ícone primário (Atualizar) usa a cor primária do relatório/empresa */
.btn-toolbar.btn-primary.btn-icon {
  background: var(--empresa-cor, var(--primary));
  border-color: var(--empresa-cor, var(--primary));
}
.btn-toolbar.btn-primary.btn-icon:hover {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 85%, #000);
  border-color: color-mix(in srgb, var(--empresa-cor, var(--primary)) 85%, #000);
}

/* ============== ACTIVE FILTER CHIPS =============== */
/* ===== Barra de filtros ativos (premium) ===== */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
}
.active-filters:empty { display: none; }
.active-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 0 2px;
  align-self: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--empresa-cor, var(--primary));
  opacity: 0.85;
}
.active-filters-label::before {
  content: "\f0b0";                 /* funil (Font Awesome) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 35%, var(--border));
  color: var(--text);
  border-radius: 999px;
  padding: 4px 5px 4px 12px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(16,24,40,0.06);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.chip:hover {
  box-shadow: 0 3px 8px color-mix(in srgb, var(--empresa-cor, var(--primary)) 22%, transparent);
  border-color: var(--empresa-cor, var(--primary));
}
.chip-label {
  color: var(--muted);
  margin-right: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.chip-value {
  font-weight: 700;
  color: var(--empresa-cor, var(--primary));
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.chip-close:hover {
  background: var(--empresa-cor, var(--primary));
  color: #fff;
}

/* ============== LOGIN PAGE — paleta ACL Data =============== */
.login-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, var(--login-bg-glow) 0%, transparent 60%),
    linear-gradient(160deg, var(--login-bg-deep) 0%, var(--login-bg-edge) 100%);
  z-index: 100;
}
.login-card {
  background: var(--login-card);
  border: 1px solid var(--login-card-bd);
  border-top: 4px solid var(--duby-extra);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  width: 400px;
  max-width: 92vw;
  text-align: center;
}
.login-logo {
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
}
.login-logo img {
  max-width: 200px;
  max-height: 64px;
  object-fit: contain;
  display: block;
}
.login-brand {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--duby-principal);
  margin: 4px 0 2px;
}
.login-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--login-text);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.95;
}
.login-subtitle {
  font-size: 13px;
  color: var(--login-muted);
  margin: 0 0 22px;
}
.login-form { display: flex; flex-direction: column; text-align: left; }
.login-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--login-muted);
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 4px;
  font-weight: 600;
}
.login-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--login-input-bd);
  border-radius: 8px;
  font-size: 14px;
  background: var(--login-input);
  color: var(--login-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input::placeholder { color: #7C8DA3; }
.login-input:focus {
  border-color: var(--duby-extra);
  box-shadow: 0 0 0 3px rgba(93,193,232,0.25);
}
.login-error {
  color: #FF7A7A;
  font-size: 12px;
  min-height: 16px;
  margin-top: 10px;
  font-weight: 600;
}
.login-button {
  margin-top: 20px;
  background: var(--duby-principal);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(31,106,171,0.30);
}
.login-button:hover {
  background: #2A77BC;
  box-shadow: 0 6px 16px rgba(31,106,171,0.45);
}
.login-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(31,106,171,0.30);
}

/* Wordmark fallback — usado se não houver imagem da logomarca */
.duby-wordmark {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -1.2px;
  color: var(--duby-principal);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.duby-wordmark::after {
  content: '.';
  color: var(--duby-extra);
  margin-left: 1px;
}

/* ============== USER BOX (sidebar) =============== */
/* Região central rolável: menu ocupa o meio e empurra o rodapé p/ baixo */
.sidebar-menu-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.sidebar-menu-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 3px;
}

/* Bloco ADMIN fixado acima do rodapé (fora da área de scroll) */
.sidebar-admin {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 4px;
  margin-top: 4px;
}

/* Engrenagem ADMIN: botão compacto + popover (evita ocupar espaço fixo) */
.admin-menu-dropdown { position: relative; padding: 4px 8px; }
.admin-menu-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  padding: 9px 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.admin-menu-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.admin-menu-dropdown.open .admin-menu-toggle {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.admin-menu-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 8px;
  z-index: 2000;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 8px;
  display: none;
}
.admin-menu-dropdown.open .admin-menu-panel { display: block; }
.admin-menu-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  padding: 2px 8px 6px;
}
.admin-menu-panel .menu-nav { padding: 0; }
.admin-menu-panel .menu-item {
  color: var(--text, #333);
}
.admin-menu-panel .menu-item .menu-icon,
.admin-menu-panel .menu-item .menu-label { color: inherit; }
.admin-menu-panel .menu-item:hover,
.admin-menu-panel .menu-item.active {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 10%, transparent);
}
.admin-menu-backdrop {
  display: none;
}
.admin-menu-dropdown.open .admin-menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1999;
}
.app-shell.collapsed .admin-menu-toggle { justify-content: center; padding: 10px 8px; }
.app-shell.collapsed .admin-menu-panel { left: calc(100% + 8px); bottom: 0; }

/* Rodapé: usuário logado + ações (tema / sair) na parte inferior */
.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
/* Indicador de status do servidor (rodapé da sidebar) */
.srv-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px rgba(30,158,90,0.25);
  flex: 0 0 auto;
}
.app-shell.collapsed .srv-status #srv-status-text,
.app-shell.collapsed .srv-status span:last-child { display: none; }
.user-box {  /* compat: caso algum lugar ainda referencie */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}
/* Avatar com inicial, círculo colorido por papel */
.user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
  background: linear-gradient(135deg, #5B86C7, #2D4F8A);  /* fallback */
}
.user-avatar.role-admin   { background: linear-gradient(135deg, #4F8DF7, #2D4F8A); }
.user-avatar.role-gerente { background: linear-gradient(135deg, #34C38F, #1E9E5A); }
.user-avatar.role-user    { background: linear-gradient(135deg, #9AA3B2, #6B7280); }
.user-meta { line-height: 1.25; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badge de papel (pílula colorida) */
.user-role-badge {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
}
.user-role-badge.role-admin   { background: rgba(79,141,247,0.22); color: #BBD3FB; border: 1px solid rgba(79,141,247,0.45); }
.user-role-badge.role-gerente { background: rgba(52,195,143,0.20); color: #9BE8C7; border: 1px solid rgba(52,195,143,0.45); }
.user-role-badge.role-user    { background: rgba(255,255,255,0.14); color: #D7DBE3; border: 1px solid rgba(255,255,255,0.25); }
.btn-logout {
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.btn-logout:hover { background: rgba(255,255,255,0.22); }

/* ============== ADMIN MENU SECTION =============== */
.menu-section-title {
  margin: 14px 14px 4px;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* ============== FORM SUBSECTION (sub-card dentro do form-panel) =============== */
.form-subsection {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  background: #FAFBFE;
}
.form-subsection-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ============== FORMS (usuários, auditoria) =============== */
.form-panel {
  margin-bottom: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field.full { grid-column: 1 / -1; }
.form-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.form-input, .form-dd {
  padding: 6px 10px;
  border: 1px solid #DDD;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.form-input:focus, .form-dd:focus-within {
  border-color: var(--primary);
}
.form-hint {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
}
.form-feedback {
  font-size: 12px;
  color: var(--primary);
  margin-left: 8px;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.form-check label, .modules-check label {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}
.modules-check {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  padding: 6px 0;
}
.form-daterange .DateInput_input { font-size: 12px !important; padding: 5px 8px !important; }

/* ============== DATA TABLE (genérica) =============== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  text-align: left;
  background: #F5F7FB;
  border-bottom: 1px solid #DDD;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
  font-weight: 600;
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #EEE;
  vertical-align: middle;
}
.data-table tr:hover td { background: #FAFBFE; }

.btn-tab {
  background: white;
  border: 1px solid #DDD;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.btn-tab:hover { background: #F5F7FB; border-color: #BBB; }
.btn-edit { color: var(--primary); border-color: #C9D2E3; }
.btn-edit:hover { background: #E8EDF5; }
.btn-delete { color: var(--negative); border-color: #E8C9C9; }
.btn-delete:hover { background: #FCE9E9; }

.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ============== AUDIT COLORS =============== */
.audit-action {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #EEE;
  color: #444;
}
.audit-info { background: #E8EDF5; color: var(--primary); }
.audit-warn { background: #FFF3CD; color: #8A6500; }
.audit-fail { background: #FCE9E9; color: var(--negative); }
.audit-action { display: inline-block; }
.audit-action-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  color: #999;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.audit-detail-line {
  font-size: 12px;
  color: #444;
  margin-bottom: 4px;
}
.audit-changes {
  font-size: 11px;
  background: #FAFAF8;
  border-left: 2px solid #DDD;
  padding: 4px 8px;
  border-radius: 3px;
}
.audit-change-line {
  margin: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.audit-field { color: #666; font-weight: 600; }
.audit-before {
  color: #C00000;
  background: #FCE9E9;
  padding: 1px 4px;
  border-radius: 2px;
}
.audit-after {
  color: #2E7D32;
  background: #E7F3E9;
  padding: 1px 4px;
  border-radius: 2px;
}
.audit-arrow { color: #888; margin: 0 2px; }
.audit-table td { vertical-align: top; padding: 8px 10px; }

/* ============== FILTRO DE EMPRESA (dropdown suspenso) =============== */
.empresa-segmentador-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  margin: 0;
}
.empresa-segmentador-wrap .filter-label {
  margin: 0;
}
.empresa-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.empresa-error {
  font-size: 12px;
  color: var(--negative);
}

/* ============== UPLOAD / LOGO PREVIEW (admin de empresas) =============== */
.upload-box {
  border: 2px dashed #C9D2E3;
  border-radius: 8px;
  padding: 18px 14px;
  text-align: center;
  background: #FAFBFE;
  color: #555;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  margin-bottom: 8px;
}
.upload-box:hover {
  background: #F1F4FA;
  border-color: var(--primary);
}
.emp-logo-preview { margin-top: 6px; }
.emp-logo-thumb-big {
  height: 56px;
  max-width: 180px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  padding: 4px;
}
.emp-logo-thumb {
  height: 28px;
  max-width: 80px;
  object-fit: contain;
  border-radius: 4px;
  background: white;
  padding: 2px;
  border: 1px solid var(--border);
}
.emp-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #DDD;
  vertical-align: middle;
}
.emp-color-input {
  border: 1px solid #DDD;
  cursor: pointer;
}

/* ============== ICON PICKER DROPDOWN (admin de relatórios) =============== */
.icon-picker-dd .Select-menu-outer { max-height: 280px; }
.icon-picker-dd .VirtualizedSelectOption {
  display: flex !important;
  align-items: center !important;
  font-size: 13px;
}
.icon-picker-dd .Select-value-label .fa-solid,
.icon-picker-dd .VirtualizedSelectOption .fa-solid {
  color: var(--primary);
}

/* ============== SIDEBAR — COLLAPSED =============== */
.app-shell.collapsed .sidebar { width: 64px; }
.app-shell.collapsed .main-content { margin-left: 64px; }
.app-shell.collapsed .sidebar-logo,
.app-shell.collapsed .rocha-logo {
  max-width: 44px; max-height: 44px; padding: 2px;
}
.app-shell.collapsed .sidebar-empresa-name,
.app-shell.collapsed .menu-label,
.app-shell.collapsed .user-meta {
  display: none;
}

/* Segmentador de empresa na sidebar: fundo cor primária da empresa,
   texto branco. Usa --sidebar-bg-1 que já vem da cor primária. */
.empresa-fixed {
  background: var(--sidebar-bg-1, #5B0A0A);
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  margin: 4px 8px 12px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.empresa-selector {
  margin: 4px 8px 12px;
}
.empresa-selector .Select-control,
.empresa-selector .Select.is-open > .Select-control,
.empresa-selector .Select.is-focused > .Select-control {
  background: var(--sidebar-bg-1, #5B0A0A) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.empresa-selector .Select-value-label,
.empresa-selector .Select-placeholder,
.empresa-selector .Select-input > input {
  color: #FFFFFF !important;
}
.empresa-selector .Select-arrow { border-top-color: rgba(255,255,255,0.85); }
.empresa-selector .is-open .Select-arrow { border-bottom-color: rgba(255,255,255,0.85); }
.empresa-selector .Select-menu-outer {
  background: var(--sidebar-bg-1, #5B0A0A) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.empresa-selector .VirtualizedSelectOption,
.empresa-selector .Select-option {
  background: transparent !important;
  color: #FFFFFF !important;
}
.empresa-selector .VirtualizedSelectFocusedOption,
.empresa-selector .Select-option.is-focused {
  background: rgba(255,255,255,0.12) !important;
}
.empresa-selector .VirtualizedSelectSelectedOption,
.empresa-selector .Select-option.is-selected {
  background: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.empresa-selector label { color: rgba(255,255,255,0.7) !important; }

.app-shell.collapsed .empresa-selector,
.app-shell.collapsed .empresa-fixed,
.app-shell.collapsed .empresa-none,
.app-shell.collapsed .menu-section-title,
.app-shell.collapsed .btn-logout span {
  display: none;
}
.app-shell.collapsed .menu-item {
  justify-content: center;
  padding: 10px 8px;
  gap: 0;
}
.app-shell.collapsed .menu-nav { padding: 0 6px; }
.app-shell.collapsed .sidebar-footer {
  padding: 10px 4px 4px;
  align-items: center;
}
.app-shell.collapsed .user-info { justify-content: center; }
.app-shell.collapsed .user-actions { flex-direction: column; width: 100%; }
.app-shell.collapsed .btn-logout { padding: 6px 8px; }
.app-shell.collapsed .logo-wrap { margin-bottom: 16px; }

/* ============== RESPONSIVO — TABLET =============== */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .row-2col, .row-2col-eq { grid-template-columns: 1fr; }
  .filters-row { flex-wrap: wrap; gap: 8px; }
}

/* ============== RESPONSIVO — CELULAR =============== */
@media (max-width: 640px) {
  .sidebar { width: 64px; }
  .main-content { margin-left: 64px; padding: 12px 14px; }
  .sidebar-logo,
  .rocha-logo {
    max-width: 44px; max-height: 44px; padding: 2px;
  }
  .sidebar-empresa-name,
  .menu-label,
  .user-meta,
  .empresa-selector,
  .empresa-fixed,
  .empresa-none,
  .menu-section-title,
  .btn-logout span {
    display: none;
  }
  .menu-item { justify-content: center; padding: 10px 8px; gap: 0; }
  .menu-nav { padding: 0 6px; }
  .sidebar-footer { padding: 10px 4px 4px; align-items: center; }
  .user-info { justify-content: center; }
  .user-actions { flex-direction: column; width: 100%; }
  .btn-logout { padding: 6px 8px; }
  .logo-wrap { margin-bottom: 16px; }
  .kpi-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-title { font-size: 18px; }
  .toolbar { margin-left: 0; flex-wrap: wrap; }
  .dev-kpi-row-wrap { grid-template-columns: 1fr 1fr; }
}

/* ============== DEVOLUÇÃO ================== */
.dev-kpi-row-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dev-kpi-card {
  background: #2E1A6B;
  color: #fff;
  border-radius: 6px;
  padding: 10px 14px 6px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-height: 110px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
  user-select: none;
}
.dev-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.dev-kpi-card.dev-kpi-selected {
  box-shadow: 0 0 0 2px #fff inset, 0 4px 12px rgba(0,0,0,0.22);
}
.dev-kpi-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Fundo escuro do card: ícone claro em vez do --muted (cinza escuro, some). */
.dev-kpi-title .info-icon { color: rgba(255,255,255,0.75); }
.dev-kpi-title .info-icon:hover { color: #fff; }
.dev-kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dev-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-kpi-icon {
  font-size: 18px;
  color: rgba(255,255,255,0.55);
}
.dev-table-wrap {
  max-height: 360px;
  overflow-y: auto;
}
.dev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dev-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--empresa-cor, #1F3864);
}
.dev-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #F0F0F0;
}
.dev-table tbody tr:hover td {
  background: #FAFAF8;
}
.dev-table tbody tr.dev-row {
  transition: opacity 0.18s ease;
}
.dev-table tbody tr.dev-row-selected td {
  background: #EEF3FB;
  border-left: 3px solid var(--empresa-cor, #1F3864);
}
.dev-table tfoot td {
  padding: 8px 10px;
  border-top: 2px solid var(--empresa-cor, #1F3864);
  background: #FAFAF8;
}
@media (max-width: 900px) {
  .dev-kpi-row-wrap { grid-template-columns: 1fr 1fr; }
}

/* ============== CONFERENTE ================== */
.conf-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.conf-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conf-page-h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--empresa-cor, #1F3864);
  letter-spacing: -0.4px;
  line-height: 1.0;
}
.conf-subtitle {
  font-size: 11px;
  color: #888;
}
.conf-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  flex: 0 0 auto;
}
.conf-kpi-card {
  background: #2E1A6B;
  color: #fff;
  border-radius: 4px;
  padding: 6px 14px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.conf-kpi-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Fundo escuro do card: ícone claro em vez do --muted (cinza escuro, some). */
.conf-kpi-title .info-icon { color: rgba(255,255,255,0.75); }
.conf-kpi-title .info-icon:hover { color: #fff; }
.conf-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  background: rgba(0,0,0,0.18);
  padding: 4px 8px;
  border-radius: 3px;
  font-family: 'Segoe UI Mono', 'Consolas', monospace;
}
.conf-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.conf-filters-bar .filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.conf-table-wrap {
  max-height: 460px;
  overflow-y: auto;
}
.conf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.conf-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--empresa-cor, #1F3864);
}
.conf-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #F0F0F0;
}
.conf-table tbody tr:hover td {
  background: #FAFAF8;
}
.conf-table tbody tr.conf-row {
  transition: opacity 0.18s ease;
}
.conf-table tbody tr.conf-row-selected td {
  background: #EEF3FB;
  border-left: 3px solid var(--empresa-cor, #1F3864);
}
@media (max-width: 1100px) {
  .conf-page-header { flex-direction: column; }
  .conf-kpi-row { grid-template-columns: repeat(2, 1fr); width: 100%; }
}

/* ============================================================
   Sino de notificações de login (sidebar, só admin)
   ============================================================ */
.notif-dropdown { position: relative; padding: 4px 8px 0; }
.notif-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.notif-toggle:hover { background: rgba(255, 255, 255, 0.22); }
.notif-dropdown.open .notif-toggle { background: rgba(255, 255, 255, 0.28); }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: #E03131;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.notif-badge:empty { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 8px;
  z-index: 2000;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 10px;
  display: none;
}
.notif-dropdown.open .notif-panel { display: block; }
.notif-backdrop { display: none; }
.notif-dropdown.open .notif-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1999;
}
.notif-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  margin-bottom: 8px;
}
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-item {
  padding: 7px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, transparent);
}
.notif-item-top { display: flex; align-items: center; gap: 6px; }
.notif-item-icon { font-size: 11px; color: var(--empresa-cor, var(--primary)); }
.notif-item-user { font-weight: 600; font-size: 13px; color: var(--text, #333); }
.notif-item-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #8A93A2);
}
.notif-item-local { text-align: right; }
.notif-empty { font-size: 12px; color: var(--muted, #8A93A2); padding: 6px; }

/* ============================================================
   Modal de Anotações (resumo por regras + nota salva)
   ============================================================ */
.anot-wrap { display: none; }
.anot-wrap.open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2100;
}
.anot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.anot-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vw;
  max-width: 760px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  padding: 18px 22px 22px;
}
.anot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.anot-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .anot-title { color: #E0E0E0; }
.anot-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #333);
}
.anot-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .anot-close { color: #E0E0E0; }
.anot-resumo-inner { display: flex; flex-direction: column; gap: 12px; }
.anot-sec {
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 4px solid var(--border);
  background: var(--bg, #f6f7f9);
}
.anot-sec.anot-fortes { border-left-color: #2F9E44; background: rgba(47,158,68,0.07); }
.anot-sec.anot-fracos { border-left-color: #E03131; background: rgba(224,49,49,0.07); }
.anot-sec.anot-destaques { border-left-color: #1971C2; background: rgba(25,113,194,0.07); }
.anot-sec.anot-decisoes { border-left-color: #E8590C; background: rgba(232,89,12,0.07); }
.anot-sec-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text, #333);
}
.anot-fortes .anot-sec-title { color: #2F9E44; }
.anot-fracos .anot-sec-title { color: #E03131; }
.anot-destaques .anot-sec-title { color: #1971C2; }
.anot-decisoes .anot-sec-title { color: #E8590C; }
.anot-sec-list { margin: 0; padding-left: 20px; }
.anot-sec-list li { font-size: 13px; line-height: 1.5; color: var(--text, #333); }
[data-theme="dark"] .anot-sec-list li { color: #D8DEE6; }
.anot-empty { font-size: 13px; color: var(--muted, #8A93A2); padding: 8px 0; }
.anot-notes { margin-top: 16px; }
.anot-notes-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  margin-bottom: 6px;
}
.anot-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--card);
  color: var(--text, #333);
  box-sizing: border-box;
}
.anot-textarea:focus {
  outline: none;
  border-color: var(--empresa-cor, var(--primary));
}
.anot-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.anot-feedback { font-size: 12px; color: #2F9E44; font-weight: 600; }

/* ============================================================
   Insights & Decisões POR GRÁFICO — ícone lâmpada no panel-title +
   popover flutuante (posicionado via JS, ancorado no ícone clicado;
   foge do overflow:hidden do .panel — ver [[dashboard-chart-stability]]).
   ============================================================ */
.panel-insight-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted, #8A93A2);
  font-size: 13px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  opacity: 0.75;
}
.panel-insight-btn:hover {
  opacity: 1;
  color: #E8590C;
  background: rgba(232, 89, 12, 0.10);
}
.insight-wrap { display: none; }
.insight-wrap.open { display: block; }
.insight-backdrop {
  display: none;
}
.insight-wrap.open .insight-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2049;
}
.insight-panel {
  position: fixed;
  z-index: 2050;
  width: 320px;
  max-width: 92vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 12px 14px;
}
.insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.insight-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .insight-title { color: #E0E0E0; }
.insight-close {
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text, #333);
}
.insight-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .insight-close { color: #E0E0E0; }
.insight-body { display: flex; flex-direction: column; gap: 10px; }
.insight-sec-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  color: #1971C2;
}
.insight-sec-title.insight-dec-title { color: #E8590C; }
.insight-sec-list { margin: 0; padding-left: 18px; }
.insight-sec-list li { font-size: 12.5px; line-height: 1.5; color: var(--text, #333); }
[data-theme="dark"] .insight-sec-list li { color: #D8DEE6; }
.insight-empty { font-size: 12.5px; color: var(--muted, #8A93A2); padding: 4px 0; }

/* ============================================================
   Cards do relatório Vencimento (faixas de prazo a vencer)
   ============================================================ */
.venc-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}
.venc-kpi-card {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 6%, var(--card));
  border: 1px solid var(--border);
  border-left: 4px solid var(--empresa-cor, var(--primary));
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
/* Todos os cards (total + faixas) compartilham a mesma aparência. */
.venc-kpi-card.total { /* sem distinção visual — igual aos demais */ }
.venc-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.venc-kpi-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted, #8A93A2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.venc-kpi-icon { font-size: 15px; color: var(--empresa-cor, var(--primary)); }
.venc-kpi-card.alerta .venc-kpi-icon { color: #E03131; }
.venc-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #1A1A1A);
  line-height: 1.1;
}
[data-theme="dark"] .venc-kpi-value { color: #ECECEC; }
.venc-kpi-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #8A93A2);
}
@media (max-width: 1100px) {
  .venc-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Módulo Finanças — lista de contas conectadas
   ============================================================ */
.fin-contas-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.fin-conta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, var(--card));
  border: 1px solid var(--border);
}
.fin-conta-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-conta-banco { font-weight: 600; font-size: 13px; color: var(--text, #333); }
.fin-conta-tipo {
  font-size: 11px; color: var(--muted, #8A93A2);
  background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 10px;
}
.fin-conta-saldo { font-weight: 700; font-size: 14px; color: var(--text, #1A1A1A); }
[data-theme="dark"] .fin-conta-banco,
[data-theme="dark"] .fin-conta-saldo { color: #ECECEC; }

/* Finanças — KPI cards sempre em uma única linha (larguras iguais que encolhem). */
.fin-kpi-line {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* ============================================================
   Finanças — limites por categoria (barras de progresso)
   ============================================================ */
.fin-limite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.fin-limite-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
}
.fin-limite-card.estourado { border-color: #E03131; background: rgba(224,49,49,0.05); }
.fin-limite-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fin-limite-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fin-limite-nome { font-size: 12px; font-weight: 600; color: var(--text, #333);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-limite-tag { margin-left: auto; font-size: 10px; font-weight: 700;
                  color: #C00000; text-transform: uppercase; }
.fin-limite-track { height: 8px; border-radius: 6px; background: rgba(0,0,0,0.08);
                    overflow: hidden; }
.fin-limite-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.fin-limite-sub { margin-top: 6px; font-size: 11px; color: var(--muted, #8A93A2); }
[data-theme="dark"] .fin-limite-nome { color: #ECECEC; }

/* ============================================================
   Finanças — modal "Gerenciar Categorias"
   ============================================================ */
.fin-cat-wrap { display: none; }
.fin-cat-wrap.open { display: block; position: fixed; inset: 0; z-index: 2100; }
.fin-cat-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55);
                    backdrop-filter: blur(2px); }
.fin-cat-modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92vw; max-width: 640px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  padding: 18px 22px 22px;
}
.fin-cat-modal-head { display: flex; align-items: center; justify-content: space-between;
                      margin-bottom: 14px; }
.fin-cat-title { font-weight: 700; font-size: 16px; color: var(--empresa-cor, #2D4F8A); }
[data-theme="dark"] .fin-cat-title { color: #E0E0E0; }
.fin-cat-close { border: none; background: transparent; font-size: 20px; width: 34px;
                 height: 34px; border-radius: 8px; cursor: pointer; color: var(--text, #333); }
.fin-cat-close:hover { background: rgba(0,0,0,0.08); }
.fin-cat-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                margin-bottom: 14px; }
.fin-cat-rows { display: flex; flex-direction: column; gap: 6px; }
.fin-cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
               border-radius: 8px; border: 1px solid var(--border);
               background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 4%, var(--card)); }
.fin-cat-swatch { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; }
.fin-cat-nome { font-weight: 600; font-size: 13px; color: var(--text, #333); flex: 1;
                min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-cat-limite { font-size: 12px; color: var(--muted, #8A93A2); }
.fin-cat-actions { display: flex; gap: 6px; }

/* ============================================================
   Loader da marca ACL — overlay do dcc.Loading no page-content
   (aparece na transição login→dashboard e em recargas de página)
   ============================================================ */
@keyframes acl-spin { to { transform: rotate(360deg); } }
@keyframes acl-fade { from { opacity: 0; } to { opacity: 1; } }

.acl-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 9000;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  animation: acl-fade 0.2s ease-out;
}
[data-theme="dark"] .acl-loader {
  background: rgba(15, 19, 32, 0.55);
}
.acl-loader-badge {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acl-loader-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* leve pulsar pra dar vida sem distrair */
  animation: acl-fade 0.6s ease-in-out alternate infinite;
}
.acl-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--border, #E9ECF2);
  border-top-color: var(--primary, #2D4F8A);
  border-right-color: var(--primary, #2D4F8A);
  animation: acl-spin 0.9s linear infinite;
}
.acl-loader-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, #6B7280);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .acl-loader-ring {
  border-color: #272D3A;
  border-top-color: var(--primary, #5B86C7);
  border-right-color: var(--primary, #5B86C7);
}

/* ============================================================
   Lista rolável do painel "FATURAMENTO POR:" (Grupo/SubGrupo/Produto)
   Mostra TODAS as barras; a figura cresce e rola dentro deste container,
   que mantém a mesma altura visível do gráfico original (320px).
   ============================================================ */
.ranking-scroll {
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.ranking-scroll::-webkit-scrollbar { width: 8px; }
.ranking-scroll::-webkit-scrollbar-track { background: transparent; }
.ranking-scroll::-webkit-scrollbar-thumb {
  background: var(--border, #E9ECF2);
  border-radius: 8px;
}
.ranking-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted, #9AA3B2); }
.ranking-scroll { scrollbar-width: thin; scrollbar-color: var(--border, #E9ECF2) transparent; }

/* ============================================================
   Popover "Colunas" (Compras) — painel um pouco mais largo p/ caber
   os chips das colunas selecionadas.
   ============================================================ */
#compras-cols-filters-dropdown .filters-panel { min-width: 340px; }

/* ---- Loader de boot: logomarca girando, SÓ na tela de login (overlay #acl-boot) ---- */
/* O overlay e o controle de exibição vêm do index_string (app.py). */
#acl-boot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: var(--bg, #F6F7FB);
  transition: opacity .35s ease;
}
#acl-boot.show { display: flex; }
#acl-boot.hide { opacity: 0; }
#acl-boot img {
  width: 180px;
  height: auto;
  object-fit: contain;
  animation: acl-mark-pulse 1.15s ease-in-out infinite;
}
@keyframes acl-logo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Pulse "respiração" da logomarca ACL nos loaders (boot + troca de menu). */
@keyframes acl-mark-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.55; }
  50%      { transform: scale(1);    opacity: 1; }
}

/* ---- Loader de TROCA DE MENU: logomarca ACL pulsando sobre backdrop leve ---- */
/* Exibição controlada por clientside callbacks (app.py, #acl-nav). */
.acl-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  background: rgba(246, 247, 251, 0.72);
  background: color-mix(in srgb, var(--bg, #F6F7FB) 72%, transparent);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity .28s ease;
}
.acl-nav.show { display: flex; }
.acl-nav.hide { opacity: 0; }
.acl-nav img {
  width: 150px;
  height: auto;
  object-fit: contain;
  animation: acl-mark-pulse 1.15s ease-in-out infinite;
}
/* No tema escuro a marca ganha um leve realce p/ destacar do fundo. */
[data-theme="dark"] .acl-nav { background: rgba(15, 19, 32, 0.78); }
[data-theme="dark"] .acl-nav img { filter: brightness(1.35) saturate(1.1); }


/* ============================================================
   SLICER (components/slicer.py) — busca + "Selecionar tudo" + checkboxes.
   Usado no filtro PRODUTO de Compras (alta cardinalidade: ~9 mil itens).
   ============================================================ */
.slicer {
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 6px;
  background: var(--card, #fff);
  overflow: hidden;
}
.slicer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #E5E5E5);
}
.slicer-search i {
  color: var(--empresa-cor, #4B3FBB);
  font-size: 12px;
}
.slicer-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #1F2333);
}
.slicer-search-input::placeholder { color: var(--muted, #9AA3B2); }

/* "Selecionar tudo" fica fixo no topo, separado da lista rolável. */
.slicer-all {
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border, #E5E5E5);
  font-weight: 600;
}
.slicer-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 10px 6px;
}
.slicer-all label,
.slicer-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  /* nomes longos de produto não podem alargar o popover */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slicer-list label:hover { color: var(--empresa-cor, #4B3FBB); }
.slicer-all input[type="checkbox"],
.slicer-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  accent-color: var(--empresa-cor, #4B3FBB);
  cursor: pointer;
}
.slicer-hint {
  padding: 5px 10px;
  border-top: 1px solid var(--border, #E5E5E5);
  font-size: 11px;
  color: var(--muted, #9AA3B2);
}
.slicer-hint:empty { display: none; }
.slicer-list::-webkit-scrollbar { width: 8px; }
.slicer-list::-webkit-scrollbar-track { background: transparent; }
.slicer-list::-webkit-scrollbar-thumb {
  background: var(--border, #E9ECF2);
  border-radius: 8px;
}
.slicer-list { scrollbar-width: thin; scrollbar-color: var(--border, #E9ECF2) transparent; }

/* ============================================================
   SEGMENTADOR (components/segmentador.py) — cabeçalho colapsado + "Selecionar
   tudo" + checkboxes. Usado no MÊS do Comercial (lista curta e fixa).
   Reaproveita .slicer-all/.slicer-list para a pele dos checkboxes.
   A lista abre INLINE (não é position:absolute): o .filters-panel que hospeda
   isto tem overflow-y:auto e deceparia um popover absoluto.
   ============================================================ */
/* O cabeçalho é a MESMA pílula preenchida dos segmentadores de Ano/Dia/Filial
   (ver "Segmentadores Ano/Mês/Dia/Empresa como pílulas preenchidas" acima) —
   aqui à mão, porque aquelas regras miram o .Select-control do dcc.Dropdown. */
.seg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--empresa-cor, #1F3864);
  border-radius: 18px;
  background: var(--empresa-cor, #1F3864);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  font-family: inherit;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.seg-head-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-chev {
  flex: 0 0 auto;
  font-size: 10px;
  color: #fff;
  transition: transform .15s;
}
.seg.open .seg-chev { transform: rotate(180deg); }
/* Lista: card branco logo abaixo da pílula. */
.seg-body {
  display: none;
  margin-top: 6px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 10px;
  background: var(--card, #fff);
  overflow: hidden;
}
.seg.open .seg-body { display: block; }
/* 12 meses cabem sem rolar; acima disso rola dentro do próprio segmentador. */
.seg .seg-list { max-height: 320px; }

/* ---------- PREVISÃO — grade de lançamento manual ----------
   O menu do dropdown das células (Loja/Grupo/Centro/Mês) é desenhado DENTRO da
   tabela, então todo ancestral com `overflow: hidden|auto` o decepa — era por
   isso que a célula parecia vazia e sem opções. O .panel corta por padrão
   (linha 609); aqui o card precisa deixar o menu escapar. */
.previsao-edit-panel { overflow: visible; }
.previsao-edit-panel .dash-spreadsheet-container,
.previsao-edit-panel .dash-spreadsheet-inner,
.previsao-edit-panel .dash-spreadsheet { overflow: visible !important; }
/* O menu abre por cima das linhas de baixo, não empurrando a tabela. */
.previsao-edit-panel .Select-menu-outer {
  display: block !important;
  z-index: 60;
  max-height: 260px;
}
.previsao-edit-panel .Select-menu { max-height: 258px; }
/* Célula de valor: digitação livre, alinhada à direita como número. */
.previsao-edit-panel .dash-cell input.dash-cell-value { text-align: right; }
/* A célula em edição vem com um vermelho translúcido do dash_table por padrão,
   que parece "campo bloqueado / com erro". Troca por um realce azul discreto —
   só sinaliza foco, sem alarmar. */
.previsao-edit-panel .dash-cell.focused,
.previsao-edit-panel td.dash-cell--selected {
  background: #EAF1FB !important;
  box-shadow: inset 0 0 0 1.5px var(--empresa-cor, #1F3864);
}
[data-theme="dark"] .previsao-edit-panel .dash-cell.focused,
[data-theme="dark"] .previsao-edit-panel td.dash-cell--selected {
  background: #2D3138 !important;
}

/* ---- Dashboard de Vendedores: card hero de faturamento/meta ---- */
.vend-kpi-wrap { display: flex; }
.vend-kpi-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-left: 6px solid var(--empresa-cor, #1F3864);
  width: 100%;
}
.vend-kpi-title {
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted, #6B7280); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.vend-kpi-value {
  font-size: 30px; font-weight: 800; margin: 6px 0 10px;
  color: var(--empresa-cor, #1F3864);
}
.vend-kpi-sub { font-size: 12px; margin-top: 4px; color: var(--text, #1F2937); }
.vend-kpi-lbl { color: var(--muted, #6B7280); font-weight: 600; }
.vend-kpi-vs { font-weight: 700; }
.vend-kpi-vs.pos { color: var(--positive, #12805C); }
.vend-kpi-vs.neg { color: var(--negative, #C0202C); }
.vend-kpi-icon { font-size: 30px; color: var(--empresa-cor, #1F3864); opacity: .85; }
[data-theme="dark"] .vend-kpi-value,
[data-theme="dark"] .vend-kpi-icon { color: #9DB2E6; }

/* ---- Dashboard de Vendedores: top-5 por faturamento (pódio 1º-3º + 2 extras) ---- */
.podio-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 10px 0;
}
.podio-col { display: flex; flex-direction: column; align-items: center; width: 150px; }
.podio-photo {
  width: 68px; height: 68px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--card, #fff);
  box-shadow: var(--shadow-sm);
}
.podio-1 .podio-photo { width: 92px; height: 92px; }
.podio-nome { font-weight: 700; color: var(--text); margin-top: 8px; font-size: 14px; }
.podio-valor { font-weight: 800; font-size: 20px; color: var(--text); margin: 4px 0 12px; }
.podio-card {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14px;
}
.podio-1 .podio-card { height: 110px; background: var(--empresa-cor, #1F3864); }
.podio-2 .podio-card { height: 80px; background: #5AA0C8; }
.podio-3 .podio-card { height: 65px; background: #A9AFB8; }
.podio-4 .podio-card,
.podio-5 .podio-card { height: 50px; background: #C9CDD3; }
.podio-medal {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.podio-1 .podio-medal { background: linear-gradient(135deg, #FFD873, #E8A400); color: #5A3D00; }
.podio-2 .podio-medal { background: linear-gradient(135deg, #E4E7EB, #A6ADB8); color: #3A3F47; }
.podio-3 .podio-medal { background: linear-gradient(135deg, #D79A66, #A85F2E); color: #402C15; }
.podio-4 .podio-medal,
.podio-5 .podio-medal { background: #8A93A3; color: #fff; }
[data-theme="dark"] .podio-3 .podio-card { background: #7C838D; }
[data-theme="dark"] .podio-4 .podio-card,
[data-theme="dark"] .podio-5 .podio-card { background: #565C64; }

/* Variante do painel pra papel 'vendedor': só a posição própria (foto + card
   com a medalha do "nível"), nunca nome/foto/valor de colegas. Reaproveita
   `.podio-col`/`.podio-card` (mesma foto/cor por faixa 1º-5º) — só empilha a
   legenda da posição embaixo, por isso sobrescreve o flex-direction/align do
   `.podio-wrap` de que herda. */
.meu-rank-wrap {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 10px;
  gap: 10px;
}
.meu-rank-sub { font-size: 13px; font-weight: 600; color: var(--muted, #6B7280); }

/* MÊS do Cliente e do Vendedor como BOTÕES SEGMENTADOS: um dcc.Checklist (value =
   lista de meses) estilizado como fileira de pills. Clicar no mês inclui/remove; a
   pill acende na cor da empresa quando incluída. O checkbox nativo fica escondido.
   (O Comercial usava isto e passou a usar um dcc.Dropdown multi — ver vendas.py.) */
.mes-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.mes-segmented .mes-seg-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 10px;
  border: 1px solid var(--border, #E9ECF2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.mes-segmented .mes-seg-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mes-segmented .mes-seg-label:hover {
  border-color: var(--empresa-cor, #1F3864);
}
/* Selecionado: o label cujo input (escondido) está :checked. `:has()` é
   suportado nos navegadores em uso (Chrome/Firefox recentes). */
.mes-segmented .mes-seg-label:has(.mes-seg-input:checked) {
  background: var(--empresa-cor, #1F3864);
  border-color: var(--empresa-cor, #1F3864);
  color: #fff;
}