/* Hukopets Importer — Design System
   ─────────────────────────────────────────────────────────────────────────
   Painel de administração moderno, na linha do MatDash: superfícies brancas
   sobre fundo suave, cantos macios, sombras difusas e cor pastel a classificar.
   O verde da Hukopets é a cor primária, executada com a vivacidade e a
   profundidade das referências.

   Uma decisão explícita separa-nos da referência: a densidade. As demos são
   arejadas porque mostram seis linhas; aqui trabalham-se milhares. As tabelas
   são deliberadamente mais apertadas — o ar entra entre blocos, não entre
   linhas.

   Todo o aspeto vive nestes tokens — os templates não conhecem cores.        */

:root {
  /* ── Primária: o verde da casa, com energia ────────────────────── */
  --primary: #0e9f7e;
  --primary-dark: #0b8267;
  --primary-darker: #096b55;
  --primary-soft: #e4f6f1;
  --primary-softer: #eef8f5;
  --primary-tint: #f6fcfa;   /* seleção de linha: presente, nunca dominante */

  /* ── Paleta de apoio (classificação) ───────────────────────────── */
  --success: #13b98a;
  --success-soft: #e3f8f1;
  --info: #539bff;
  --info-soft: #ecf4ff;
  --warning: #f0a020;
  --warning-soft: #fdf2e0;
  --danger: #f2705a;
  --danger-soft: #fdece9;
  --purple: #7c6bf5;
  --purple-soft: #efedfe;
  --cyan: #49beff;
  --cyan-soft: #e8f7ff;

  --success-dark: #0f9d75;
  --danger-dark: #dd5b45;
  --neutral-soft: #eef2f5;

  /* ── Tintas: o texto e o ícone que assentam sobre um pastel ──────
     Uma tinta por família, e só uma. Cada pastel de classificação tem
     exatamente uma cor de escrita — é isto que faz um estado ler igual
     esteja num badge, num alerta, numa nota ou num chip de ícone.      */
  --success-ink: #0b7d5d;
  --danger-ink: #c8452c;
  --warning-ink: #96620d;
  --info-ink: #2b6bc4;
  --lilac-ink: #5344c4;
  --sky-ink: #1c86c7;

  /* ── Neutros ───────────────────────────────────────────────────── */
  --bg: #f4f7f6;
  --surface: #ffffff;
  --surface-alt: #fafcfb;
  --border: #e8eef1;
  --border-strong: #d8e2e6;

  --text: #2a3547;
  --text-2: #5a6a85;
  --text-3: #8b9bb4;

  /* ── Forma ─────────────────────────────────────────────────────── */
  --radius-lg: 16px;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-xs: 3px;   /* só indicadores de poucos pixels: marca parcial, chave da legenda */

  /* ── Profundidade: deslocamento + desfoque suave, nunca halo ───── */
  --shadow-xs: 0 1px 2px rgba(42, 53, 71, 0.05);
  --shadow-card: 0 1px 2px rgba(42, 53, 71, 0.04), 0 6px 18px -8px rgba(42, 53, 71, 0.10);
  --shadow-md: 0 2px 4px rgba(42, 53, 71, 0.04), 0 14px 32px -12px rgba(42, 53, 71, 0.18);
  --shadow-pop: 0 4px 8px rgba(42, 53, 71, 0.05), 0 24px 56px -16px rgba(42, 53, 71, 0.26);
  --shadow-primary: 0 4px 12px rgba(14, 159, 126, 0.30);
  --shadow-primary-strong: 0 6px 18px rgba(14, 159, 126, 0.38);
  --shadow-success: 0 4px 12px rgba(19, 185, 138, 0.30);
  --shadow-danger: 0 4px 12px rgba(242, 112, 90, 0.32);
  --shadow-bar: 0 -6px 24px rgba(42, 53, 71, 0.08);
  --focus-ring: 0 0 0 3px rgba(14, 159, 126, 0.14);
  --overlay: rgba(42, 53, 71, 0.45);

  /* ── Métrica ───────────────────────────────────────────────────── */
  --sidebar-width: 248px;
  --topbar-h: 60px;
  --gutter: 1.5rem;

  /* ── Vozes ─────────────────────────────────────────────────────── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ Base ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

::selection { background: var(--primary-soft); color: var(--primary-darker); }

/* ══ Barra lateral (clara) ══════════════════════════════════════════ */
.sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow-y: auto;
  scrollbar-width: none;
  transition: transform 0.3s var(--ease-out);
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-header {
  padding: 1.25rem 1.25rem 1rem;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--text);
}

.sidebar-brand-icon {
  width: 34px; height: 34px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9375rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-primary);
}

.sidebar-brand-text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sidebar-nav {
  flex: 1;
  padding: 0.25rem 0.75rem 0.75rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-section { padding: 0; }

.sidebar-section-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 1rem 0.75rem 0.375rem;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.125rem;
  transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}

.sidebar-nav-item i {
  font-size: 1.0625rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-3);
  transition: color 0.16s var(--ease-out);
}

.sidebar-nav-item:hover {
  background: var(--primary-softer);
  color: var(--primary-dark);
}
.sidebar-nav-item:hover i { color: var(--primary); }

.sidebar-nav-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-primary);
}
.sidebar-nav-item.active i { color: #fff; }

.sidebar-footer {
  padding: 0.75rem;
  flex-shrink: 0;
  position: relative;
  border-top: 1px solid var(--border);
}

/* ── Menu do utilizador ──────────────────────────────────────────── */
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  transition: background-color 0.16s var(--ease-out);
  user-select: none;
}
.user-menu-trigger:hover,
.user-menu-trigger.open { background: var(--primary-softer); }

.sidebar-user-avatar {
  width: 34px; height: 34px;
  background: var(--primary-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-dark);
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.sidebar-user-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-caret {
  font-size: 0.6875rem;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.24s var(--ease-out);
}
.user-menu-trigger.open .user-menu-caret { transform: rotate(180deg); }

.user-popup {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0.75rem;
  right: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  padding: 0.375rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  z-index: 200;
}
.user-menu-trigger.open .user-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.user-popup-header {
  padding: 0.5rem 0.625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-popup-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.14s var(--ease-out), color 0.14s var(--ease-out);
  text-align: left;
}
.user-popup-item:hover { background: var(--primary-softer); color: var(--primary-dark); }
.user-popup-item i { font-size: 0.9375rem; width: 18px; text-align: center; }

.user-popup-divider { height: 1px; background: var(--border); margin: 0.25rem 0.25rem; }

.user-popup-logout { color: var(--danger); }
.user-popup-logout:hover { background: var(--danger-soft); color: var(--danger); }

/* ── Overlay + topbar ────────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  z-index: 1039;
}

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.875rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}

.topbar-toggle {
  background: var(--primary-softer);
  border: none;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  font-size: 1.25rem;
  color: var(--primary-dark);
  cursor: pointer;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.topbar-brand {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

/* ══ Conteúdo ═══════════════════════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* min-width:0 é o que permite a um item de flex encolher abaixo da largura
     natural do seu conteúdo. Sem isto, uma tabela larga empurra a largura da
     página inteira e tudo passa a transbordar à direita. */
  min-width: 0;
}

.page-content, .alert-container { min-width: 0; max-width: 100%; }

.alert-container { padding: 1.25rem var(--gutter) 0; }

.page-content {
  flex: 1;
  padding: 1.5rem var(--gutter) 2.5rem;
}

/* ── Cabeçalho de página ─────────────────────────────────────────── */
.page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.page-sub {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin: 0.1875rem 0 0;
}

.folio-rule { display: none; }

/* ══ Cartões ════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  padding: 1.125rem 1.5rem 0.875rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

.card-body { padding: 1.5rem; }

.card-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  border-radius: 0 !important;
  padding: 1rem 1.5rem;
}

/* Anatomia dos cartões da referência: imagem a sangrar no topo, título
   forte, texto de apoio esbatido, ação em baixo. */
.card > img:first-child,
.card-img-top { width: 100%; display: block; object-fit: cover; }

.card-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: 0.8125rem;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Título de secção, fora do cartão — como na referência. */
.section-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 0.875rem;
}

/* ══ Cartões de resumo pastel ═══════════════════════════════════════
   Os blocos tingidos do topo, à maneira da referência.                   */
.summary-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }

.summary-card {
  flex: 1 1 190px;
  min-width: 180px;
  border-radius: var(--radius-lg);
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border: 1px solid transparent;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out);
}
.summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.summary-card-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
}

.summary-card-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.summary-card-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 0.125rem;
}

.summary-card--mint   { background: var(--primary-soft); }
.summary-card--mint   .summary-card-icon { color: var(--primary-dark); }
.summary-card--sky    { background: var(--cyan-soft); }
.summary-card--sky    .summary-card-icon { color: var(--sky-ink); }
.summary-card--lilac  { background: var(--purple-soft); }
.summary-card--lilac  .summary-card-icon { color: var(--lilac-ink); }
.summary-card--peach  { background: var(--danger-soft); }
.summary-card--peach  .summary-card-icon { color: var(--danger-ink); }
.summary-card--amber  { background: var(--warning-soft); }
.summary-card--amber  .summary-card-icon { color: var(--warning-ink); }

/* ══ Tabelas ════════════════════════════════════════════════════════
   Densidade deliberada: mais apertadas que a referência, porque aqui
   passam milhares de linhas.                                              */
.table {
  font-size: 0.8125rem;
  color: var(--text);
  margin-bottom: 0;
  border-color: var(--border);
  /* O Bootstrap 5.3 pinta as células com um box-shadow inset de 9999px em vez
     de background. Essa camada fica por cima de qualquer background nosso e
     alastra em blocos que ignoram as colunas. Desligamo-la por completo e
     passamos a controlar o fundo das linhas só com background-color. */
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-bg-type: transparent;
  --bs-table-bg-state: transparent;
  --bs-table-hover-bg: transparent;
  --bs-table-active-bg: transparent;
  --bs-table-striped-bg: transparent;
}
.table > :not(caption) > * > * { box-shadow: none !important; }

.table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--surface-alt) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  padding: 0.6875rem 0.75rem;
  white-space: nowrap;
  vertical-align: middle;
}

/* Densidade: a altura da linha é o recurso escasso deste ecrã. Cada valor
   aqui foi apertado contra o alvo de linhas visíveis, não por gosto. */
.table tbody td {
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
  background: transparent;
}

.table tbody tr:last-child td { border-bottom: none !important; }
.table-hover tbody tr:hover td { background: var(--primary-softer) !important; }

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

.table-responsive { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* A folha de dados: um cartão que contém a tabela. */
.ledger-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ── Tabela agrupada ─────────────────────────────────────────────── */
/* Larguras fixas: sem isto o navegador ignora os width dos cabeçalhos, o
   título parte-se em cinco linhas e as colunas numéricas colapsam. */
/* min-width obriga a tabela a rolar dentro do seu contentor em ecrãs
   estreitos, em vez de espremer as colunas até o texto se sobrepor. */
.table--grouped { table-layout: fixed; width: 100%; min-width: 940px; }

.table--grouped tbody tr.group-row td { background-color: var(--surface); }
.table--grouped tbody tr.group-row:hover td { background-color: var(--primary-softer); }

/* Seleção: um sinal, não uma inundação. A linha ganha um tom muito leve e
   uma barra na margem; quem grita é a caixa picada, não o fundo. Com
   centenas de linhas selecionadas o ecrã tem de continuar legível. */
.table--grouped tbody tr.group-row.is-selected td,
.table--grouped tbody tr.group-row.table-primary td,
.table tbody tr.table-primary td {
  background-color: var(--primary-tint);
}
.table--grouped tbody tr.group-row.is-selected:hover td,
.table--grouped tbody tr.group-row.table-primary:hover td {
  background-color: var(--primary-softer);
}
.table--grouped tbody tr.group-row.is-selected td:first-child,
.table--grouped tbody tr.group-row.table-primary td:first-child {
  box-shadow: inset 3px 0 0 0 var(--primary) !important;
}

.table--grouped tbody tr.drop-hover td,
.table tbody tr.table-success td {
  background-color: var(--success-soft);
  box-shadow: inset 0 1px 0 0 var(--success), inset 0 -1px 0 0 var(--success) !important;
}

.table--grouped tbody tr.group-row.is-settled td { color: var(--text-3); }

/* O título ocupa duas linhas no máximo: mantém a altura da linha previsível
   e a densidade estável seja qual for o comprimento do nome do produto. */
.entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-meta, .entry-sub { overflow: hidden; text-overflow: ellipsis; }

/* Variantes: sub-entradas recuadas num painel suave. */
.variants-cell {
  padding: 0 !important;
  background: var(--surface-alt) !important;
}
.variants-inner {
  margin: 0.25rem 0.75rem 0.75rem 3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.variants-inner .table { font-size: 0.75rem; }
.variants-inner .table thead th {
  background: var(--surface-alt) !important;
  padding: 0.5rem 0.75rem;
  font-size: 0.625rem;
}
.variants-inner .table tbody td { padding: 0.5rem 0.75rem; color: var(--text-2); }
.table--plain tbody tr:nth-of-type(even) td { background: transparent; }
.variant-tick-cell { padding-left: 1rem !important; }

/* ── A entrada ───────────────────────────────────────────────────── */
.entry-title { font-weight: 600; color: var(--text); line-height: 1.3; }
.entry-meta  { font-size: 0.75rem; color: var(--text-2); line-height: 1.35; }
.entry-sub   { font-size: 0.6875rem; color: var(--text-3); line-height: 1.3; }

/* NÃO usar ".figure": é uma classe do Bootstrap com display:inline-block, que
   retira a célula da grelha da tabela. */
.num-mono { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; }
.is-zero { color: var(--text-3); font-weight: 400; }

.ink-ok   { color: var(--success); font-weight: 600; }
.ink-hold { color: var(--warning); font-weight: 600; }
.ink-fail { color: var(--danger); font-weight: 600; }
.ink-info { color: var(--info); font-weight: 600; }

/* Anotações da entrada: pastilhas suaves. */
.entry-notes { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.125rem; }
.entry-notes:empty { display: none; }
.note {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.0625rem 0.4375rem;
  border-radius: 100px;
  background: var(--surface-alt);
  color: var(--text-2);
  border: 1px solid var(--border);
  line-height: 1.45;
}
.note--hold  { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; }
.note--ok    { background: var(--success-soft); color: var(--success-ink); border-color: transparent; }
.note--count { background: var(--purple-soft);  color: var(--lilac-ink); border-color: transparent; }

/* ══ Marcas de estado (badges) ══════════════════════════════════════
   Pastilhas suaves: fundo tingido, texto escuro da mesma família.         */
.badge {
  display: inline-block;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  padding: 0.3125rem 0.625rem !important;
  border-radius: 100px !important;
  line-height: 1.2;
  white-space: nowrap;
}

.badge.bg-success   { background-color: var(--success-soft) !important; color: var(--success-ink) !important; }
.badge.bg-primary   { background-color: var(--primary-soft) !important; color: var(--primary-darker) !important; }
.badge.bg-danger    { background-color: var(--danger-soft)  !important; color: var(--danger-ink) !important; }
.badge.bg-warning,
.badge.bg-warning.text-dark { background-color: var(--warning-soft) !important; color: var(--warning-ink) !important; }
.badge.bg-info,
.badge.bg-info.text-dark    { background-color: var(--info-soft) !important; color: var(--info-ink) !important; }
.badge.bg-secondary { background-color: var(--neutral-soft) !important; color: var(--text-2) !important; }

.badge.badge-count {
  background: var(--primary-soft) !important;
  color: var(--primary-darker) !important;
  font-family: var(--font-mono) !important;
  padding: 0.1875rem 0.4375rem !important;
}

/* ══ Botões ═════════════════════════════════════════════════════════ */
.btn {
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius) !important;
  padding: 0.5rem 0.9375rem;
  border-width: 1px;
  line-height: 1.5;
  transition: background-color 0.16s var(--ease-out),
              border-color 0.16s var(--ease-out),
              color 0.16s var(--ease-out),
              box-shadow 0.16s var(--ease-out),
              transform 0.16s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }

.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: var(--shadow-primary-strong);
}

.btn-outline-primary {
  color: var(--primary-dark) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
}
.btn-outline-primary:hover {
  background: var(--primary-soft) !important;
  border-color: var(--primary-soft) !important;
  color: var(--primary-darker) !important;
}
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
  box-shadow: var(--shadow-success);
}
.btn-success:hover { background: var(--success-dark) !important; border-color: var(--success-dark) !important; }

.btn-outline-success {
  color: var(--success-ink) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
}
.btn-outline-success:hover {
  background: var(--success-soft) !important;
  border-color: var(--success-soft) !important;
}

.btn-outline-secondary {
  color: var(--text-2) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
}
.btn-outline-secondary:hover {
  background: var(--surface-alt) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active {
  background: var(--text-2) !important;
  border-color: var(--text-2) !important;
  color: #fff !important;
}

.btn-outline-info {
  color: var(--info-ink) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
}
.btn-outline-info:hover { background: var(--info-soft) !important; border-color: var(--info-soft) !important; }

.btn-outline-warning {
  color: var(--warning-ink) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
}
.btn-outline-warning:hover { background: var(--warning-soft) !important; border-color: var(--warning-soft) !important; }

.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  box-shadow: var(--shadow-danger);
}
.btn-danger:hover { background: var(--danger-dark) !important; border-color: var(--danger-dark) !important; }

.btn-outline-danger {
  color: var(--danger-ink) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
}
.btn-outline-danger:hover { background: var(--danger-soft) !important; border-color: var(--danger-soft) !important; }

.btn-sm { font-size: 0.75rem; padding: 0.375rem 0.6875rem; border-radius: var(--radius-sm) !important; }

/* Grupos segmentados: os botões encostam-se e só as pontas levam raio.
   Sem isto, o !important do raio geral arredondava todos e o grupo
   deixava de ler como um controlo único. */
.btn-group > .btn,
.btn-group > .btn-check + .btn { border-radius: 0 !important; }

.btn-group > .btn:first-child,
.btn-group > .btn-check:first-child + .btn {
  border-start-start-radius: var(--radius-sm) !important;
  border-end-start-radius: var(--radius-sm) !important;
}
.btn-group > .btn:last-child,
.btn-group > .btn-check:last-of-type + .btn:last-child {
  border-start-end-radius: var(--radius-sm) !important;
  border-end-end-radius: var(--radius-sm) !important;
}
.btn-group > .btn:not(:first-child),
.btn-group > .btn-check + .btn { margin-left: -1px; }
.btn-group > .btn:hover,
.btn-group > .btn-check:checked + .btn { z-index: 1; }

/* O segmento selecionado usa a primária, tal como a aba ativa e o item
   ativo do menu: no sistema, verde significa "é este". */
.btn-group > .btn.active,
.btn-group > .btn-check:checked + .btn {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-group > .btn.active .badge { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; }

/* ══ Ações de linha ═════════════════════════════════════════════════
   Os botões de uma célula de ações precisam de um intervalo declarado.
   Separados só por espaço de HTML, a folga variava com o tamanho da
   fonte e nunca era a mesma em duas tabelas.                            */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  white-space: nowrap;
}
.row-actions--start { justify-content: flex-start; }

.btn-link { font-weight: 600; box-shadow: none; }

/* ══ Campos ═════════════════════════════════════════════════════════ */
.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 0.375rem;
}

.form-control, .form-select {
  font-size: 0.8125rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius) !important;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.form-control::placeholder { color: var(--text-3); }

.form-control-sm, .form-select-sm {
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-sm) !important;
}

.form-text { font-size: 0.75rem; color: var(--text-3); }

.form-check-input {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--border-strong);
  width: 1.0625rem; height: 1.0625rem;
  margin-top: 0.15rem;
  cursor: pointer;
  transition: background-color 0.14s var(--ease-out), border-color 0.14s var(--ease-out);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.form-check-label { cursor: pointer; }

.input-group-text {
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius) !important;
  color: var(--text-2);
  font-size: 0.8125rem;
}

/* ══ Avisos ═════════════════════════════════════════════════════════ */
.alert {
  border: none;
  border-radius: var(--radius-lg) !important;
  font-size: 0.8125rem;
  padding: 0.875rem 1.125rem;
  box-shadow: var(--shadow-xs);
}
.alert-success { background: var(--success-soft); color: var(--success-ink); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.alert-info    { background: var(--info-soft);    color: var(--info-ink); }
.alert-warning { background: var(--warning-soft); color: var(--warning-ink); }

/* ══ Miniaturas ═════════════════════════════════════════════════════ */
.product-img-thumb {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
}
.product-img-thumb--sm,
.img-missing--sm { width: 28px !important; height: 28px !important; }

.img-missing,
.product-img-thumb.is-missing {
  display: inline-block;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 1px), var(--border-strong) 50%, transparent calc(50% + 1px)),
    var(--surface-alt);
}

.selected-row td,
tr.table-primary td { background-color: var(--primary-soft) !important; }

/* ══ Progresso ══════════════════════════════════════════════════════ */
.import-progress {
  height: 8px;
  border-radius: 100px;
  background: var(--border);
  overflow: hidden;
  display: flex;
}
.import-progress .progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--success));
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s var(--ease-out);
}
.progress { border-radius: 100px !important; background: var(--border); height: 8px; }
.progress-bar-striped.bg-success, .progress .bg-success { background-color: var(--primary) !important; }

/* ══ Barra de ação fixa ═════════════════════════════════════════════
   O pé do ecrã: o total selecionado e o despacho, sempre à vista.         */
.review-confirm-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 0.75rem var(--gutter);
  z-index: 500;
  box-shadow: var(--shadow-bar);
}

.review-confirm-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.review-confirm-info { font-size: 0.8125rem; color: var(--text-2); }

body:has(.review-confirm-bar) .page-content { padding-bottom: 6rem; }

.carry-block {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--primary-soft);
  border-radius: var(--radius);
  padding: 0.4375rem 0.875rem;
}
.carry-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-dark);
}
.carry-total {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-darker);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.carry-unit { font-size: 0.75rem; font-weight: 600; color: var(--primary-dark); }

.carry-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.carry-divider { width: 1px; height: 1.75rem; background: var(--border); margin: 0 0.25rem; }

/* ══ Abas da revisão ════════════════════════════════════════════════
   Duas listas disjuntas — para importar e postas de lado. A aba ativa é
   uma pastilha sólida, o mesmo mecanismo do item ativo da navegação: o
   operador tem de saber sempre em que folha está a picar.               */
.review-tabs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}

.review-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out),
              border-color 0.16s var(--ease-out);
}
.review-tab:hover { background: var(--primary-softer); color: var(--primary-dark); }

.review-tab.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.review-tab-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.4375rem;
  border-radius: 100px;
  background: var(--surface-alt);
  color: var(--text-2);
}
.review-tab.is-on .review-tab-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.review-tab-hint {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-left: 0.375rem;
  max-width: 52ch;
}

/* ══ Filtros ════════════════════════════════════════════════════════ */
.ledger-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.625rem 0.5rem;
  margin-bottom: 1.25rem;
  overflow: visible;
}

/* Os menus de filtro abrem para fora do cartão e têm de passar por cima da
   tabela. Sem esta ordem de empilhamento explícita a lista de categorias
   aparecia cortada na margem inferior do bloco de filtros. */
.summary-row, .ledger-filters, .ledger-sheet, .ledger-empty { position: relative; }
.ledger-filters            { z-index: 30; }
.summary-row               { z-index: 20; }
.ledger-sheet, .ledger-empty { z-index: 10; }
.filter-multi-dd .dropdown-menu { z-index: 1050; }

.lf-cell { padding: 0.375rem 0.5rem; }

.lf-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 0.3125rem;
}

.lf-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
}
.lf-clear:hover { color: var(--danger); }

/* ══ Rodapé da tabela ═══════════════════════════════════════════════ */
.ledger-foot {
  padding: 0.8125rem 1.125rem;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.ledger-foot-count { font-size: 0.75rem; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ══ Pré-visualização da imagem ═════════════════════════════════════ */
.img-preview-pop {
  position: fixed;
  z-index: 2000;
  display: none;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 6px;
}
.img-preview-pop img {
  max-width: 320px;
  max-height: 320px;
  display: block;
  border-radius: var(--radius);
}

/* ══ Caixa de seleção com marca ═════════════════════════════════════ */
.tick-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px; height: 20px;
  padding: 0;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #fff;
  transition: background-color 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out),
              transform 0.18s var(--ease-out);
}
.tick-box:hover { border-color: var(--primary); transform: scale(1.06); }
.tick-box:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.tick-box .tick-mark path {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.tick-box.is-on {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: var(--shadow-primary);
}
.tick-box.is-on .tick-mark path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s var(--ease-out);
}

.tick-part { display: none; }
.tick-box.is-part { border-color: var(--primary); background: var(--primary-soft); }
.tick-box.is-part .tick-part {
  display: block;
  position: absolute;
  left: 4px; right: 4px;
  height: 2px;
  border-radius: var(--radius-xs);
  background: var(--primary);
}

.tick-box--settled {
  border-color: var(--border);
  background: var(--surface-alt);
  color: var(--text-3);
  cursor: default;
}

/* ══ Autenticação ═══════════════════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--primary-soft), transparent 62%),
    radial-gradient(900px 460px at 92% 108%, var(--purple-soft), transparent 60%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card { width: 100%; max-width: 410px; }

.auth-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.auth-logo-icon {
  width: 44px; height: 44px;
  background: var(--primary);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: var(--shadow-primary);
}

.auth-logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ══ Estatísticas ═══════════════════════════════════════════════════ */
.stat-num {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.stat-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 0.375rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-card-icon.green { background: var(--primary-soft); color: var(--primary-dark); }
.stat-card-icon.blue  { background: var(--info-soft);    color: var(--info-ink); }
.stat-card-icon.red   { background: var(--danger-soft);  color: var(--danger-ink); }
.stat-card-icon.gray  { background: var(--purple-soft);  color: var(--lilac-ink); }

.stat-card-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.stat-card-lbl { font-size: 0.75rem; color: var(--text-2); font-weight: 600; }

/* ══ Zona de largada ════════════════════════════════════════════════ */
#dropZone,
.dropzone-card {
  border: 2px dashed var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface-alt);
  padding: 2.25rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
#dropZone:hover,
.dropzone-card:hover,
.dropzone-card.drag-over,
#dropZone.drag-over {
  border-color: var(--primary) !important;
  background-color: var(--primary-softer) !important;
}

.dropzone-icon {
  width: 56px; height: 56px;
  margin: 0 auto 0.875rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

.dropzone-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.dropzone-sub { font-size: 0.8125rem; color: var(--text-3); }

/* ══ Abas ═══════════════════════════════════════════════════════════
   À maneira da referência: a aba ativa é uma pastilha sólida na cor
   primária e as restantes são texto simples. A linha inferior clássica
   do Bootstrap desaparece — o que separa as abas do conteúdo é o
   espaço, não um traço.                                                  */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-tabs-link-active-bg: transparent;
  border-bottom: none;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 0.5625rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.16s var(--ease-out),
              color 0.16s var(--ease-out),
              box-shadow 0.16s var(--ease-out);
}

.nav-tabs .nav-link i,
.nav-pills .nav-link i { opacity: 0.85; }

.nav-tabs .nav-link:hover:not(.active),
.nav-pills .nav-link:hover:not(.active) {
  background: var(--primary-softer);
  color: var(--primary-dark);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-primary);
}

.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ══ Cartão de boas-vindas ══════════════════════════════════════════
   O bloco de entrada, à maneira da referência: superfície da cor da
   casa, os dois números que interessam e a ação principal.              */
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: #fff;
  padding: 1.75rem;
  height: 100%;
  box-shadow: 0 10px 28px -14px rgba(14, 159, 126, 0.55);
}

.hero-card .page-title { color: #fff; }
.hero-sub { color: rgba(255, 255, 255, 0.82); font-size: 0.8125rem; margin: 0.375rem 0 1.25rem; max-width: 46ch; }

.hero-figures { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hero-fig {
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-fig-lbl { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); }

.hero-card .btn-hero {
  background: #fff;
  color: var(--primary-darker);
  border: none;
  font-weight: 700;
}
.hero-card .btn-hero:hover { background: rgba(255, 255, 255, 0.9); color: var(--primary-darker); }

/* A marca de água é decoração assumida: fica atrás do conteúdo, muito
   esbatida, e nunca tapa texto. */
.hero-watermark {
  position: absolute;
  right: -0.5rem;
  bottom: -2.5rem;
  font-size: 11rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}

/* ══ Anel de proporção ══════════════════════════════════════════════
   Desenhado a partir de números reais, sem biblioteca de gráficos.     */
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.donut { width: 132px; height: 132px; flex-shrink: 0; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--border); stroke-width: 14; }
.donut-arc {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}
.donut-arc--ok   { stroke: var(--primary); }
.donut-arc--fail { stroke: var(--danger); }

.donut-center {
  transform: rotate(90deg);
  transform-origin: center;
  font-weight: 700;
  fill: var(--text);
  font-size: 1.375rem;
}

.donut-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.donut-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.donut-key { width: 10px; height: 10px; border-radius: var(--radius-xs); flex-shrink: 0; }
.donut-key--ok    { background: var(--primary); }
.donut-key--fail  { background: var(--danger); }
.donut-key--rest  { background: var(--border); }
.donut-legend .val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══ Barra de composição ════════════════════════════════════════════
   Reparte um total em segmentos proporcionais. Uma leitura que sete
   números lado a lado não dão: quanto de quê, em relação ao todo.       */
.stack-bar {
  display: flex;
  height: 14px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--border);
}
/* Sem transição: a largura é escrita pelo servidor e nunca muda no cliente,
   por isso animá-la seria código morto a custar trabalho de layout. */
.stack-bar > span { display: block; height: 100%; }
.stack-seg--ok      { background: var(--primary); }
.stack-seg--valid   { background: var(--success); }
.stack-seg--invalid { background: var(--warning); }
.stack-seg--fail    { background: var(--danger); }
.stack-seg--settled { background: var(--text-3); }

.stack-legend {
  list-style: none;
  padding: 0;
  margin: 1.125rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}
.stack-legend li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; }
.stack-legend .lbl { color: var(--text-2); }
.stack-legend .val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.stack-legend .pct { font-size: 0.6875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ══ Barra de proporção em linha de tabela ══════════════════════════ */
.mini-bar {
  height: 6px;
  border-radius: 100px;
  background: var(--border);
  overflow: hidden;
  display: flex;
  min-width: 90px;
}
.mini-bar > span { display: block; height: 100%; }
.mini-bar .seg-ok   { background: var(--primary); }
.mini-bar .seg-fail { background: var(--danger); }
.mini-bar-lbl { font-size: 0.6875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ══ Registo de eventos ═════════════════════════════════════════════ */
.log-item { display: flex; align-items: flex-start; gap: 0.625rem; }
.log-level {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 0.625rem !important;
  padding: 0.1875rem 0.4375rem !important;
}
.log-msg { font-size: 0.8125rem; color: var(--text); line-height: 1.5; }
.log-time { font-size: 0.6875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ══ Chip de ícone ══════════════════════════════════════════════════
   O quadrado tingido que acompanha um título em cartões de ação.        */
.icon-chip {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  background: var(--surface-alt);
  color: var(--text-2);
}
.icon-chip--mint  { background: var(--primary-soft); color: var(--primary-dark); }
.icon-chip--sky   { background: var(--cyan-soft);    color: var(--sky-ink); }
.icon-chip--lilac { background: var(--purple-soft);  color: var(--lilac-ink); }
.icon-chip--amber { background: var(--warning-soft); color: var(--warning-ink); }
.icon-chip--peach { background: var(--danger-soft);  color: var(--danger-ink); }

.action-title { font-size: 0.875rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.action-sub   { font-size: 0.75rem; color: var(--text-2); }

/* ══ Estado vazio ═══════════════════════════════════════════════════
   Um só padrão para "não há nada aqui" em toda a aplicação.             */
.empty-state { padding: 3rem 1.5rem; text-align: center; }
.empty-state-icon {
  width: 56px; height: 56px;
  margin: 0 auto 0.875rem;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.empty-state-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.empty-state-sub {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin: 0.25rem 0 1rem;
  max-width: 44ch;
  margin-inline: auto;
}

/* ══ Estado vazio da tabela de produtos ═════════════════════════════ */
.ledger-empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ledger-empty-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.ledger-empty-sub { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.375rem; }

/* ══ Diversos ═══════════════════════════════════════════════════════ */
.font-monospace, .mono {
  font-family: var(--font-mono) !important;
  font-size: 0.8125em;
}

.text-primary, .text-success { color: var(--primary) !important; }
.text-muted { color: var(--text-3) !important; }

/* Os degraus da escala tipográfica, para os sítios onde um bloco de template
   precisa de um tamanho sem o inventar no atributo style. Um template não
   escreve font-size; escolhe um degrau. */
.type-title    { font-size: 1rem; }
.type-subtitle { font-size: 0.9375rem; }
.type-body     { font-size: 0.875rem; }
.type-compact  { font-size: 0.8125rem; }
.type-label    { font-size: 0.75rem; }
.type-micro    { font-size: 0.6875rem; }
.border-success, .border-primary { border-color: var(--primary) !important; }
.bg-light { background-color: var(--surface-alt) !important; }
.table-light, .table .table-light { --bs-table-bg: var(--surface-alt); }

.list-group-item {
  background: transparent;
  border-color: var(--border);
  font-size: 0.8125rem;
  padding: 0.75rem 1.125rem;
}

.modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.modal-title { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.modal-header { border-bottom: 1px solid var(--border); padding: 1.125rem 1.25rem 0.875rem; }
.modal-body { font-size: 0.8125rem; color: var(--text-2); padding: 1.125rem 1.25rem; }
.modal-footer { border-top: 1px solid var(--border); padding: 0.875rem 1.25rem; }

.dropdown-menu {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  font-size: 0.8125rem;
  background: var(--surface);
  padding: 0.375rem;
}
.dropdown-item { border-radius: var(--radius-sm); padding: 0.4375rem 0.625rem; }
.dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
  background: var(--primary-softer);
  color: var(--primary-dark);
}

.pagination { --bs-pagination-border-radius: var(--radius-sm); }
.page-link {
  border-radius: var(--radius-sm) !important;
  color: var(--text-2);
  border-color: var(--border);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.8125rem;
}
.page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.page-item.disabled .page-link { color: var(--text-3); background: var(--surface-alt); }

/* ══ Movimento ══════════════════════════════════════════════════════
   Uma sequência de entrada encenada — resumo, filtros, folha, barra —
   e não a mesma animação colada a tudo. Só transform e opacity, para
   nunca custar layout. Tudo parte de um estado já visível: se o
   JavaScript ou as animações falharem, a página fica legível na mesma.  */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseFoot {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

.summary-card,
.ledger-filters,
.ledger-sheet,
.ledger-empty,
.page-content > .card {
  animation: rise 0.5s var(--ease-out) both;
}

.summary-card:nth-child(1) { animation-delay: 0.02s; }
.summary-card:nth-child(2) { animation-delay: 0.07s; }
.summary-card:nth-child(3) { animation-delay: 0.12s; }
.summary-card:nth-child(4) { animation-delay: 0.17s; }
.ledger-filters { animation-delay: 0.16s; }
.ledger-sheet,
.ledger-empty  { animation-delay: 0.22s; }

.review-confirm-bar { animation: riseFoot 0.45s var(--ease-out) 0.3s both; }

/* As variantes abrem com o colapso do Bootstrap; suavizamos a curva. */
.collapse.collapsing { transition: height 0.3s var(--ease-out); }

/* Ícone do item de navegação: um deslize curto ao passar. */
.sidebar-nav-item i { transition: color 0.16s var(--ease-out), transform 0.22s var(--ease-out); }
.sidebar-nav-item:hover i { transform: translateX(2px); }

/* ══ Responsivo ═════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-pop); }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-overlay.overlay-open { display: block; }
  .main-wrapper { margin-left: 0; }
  .page-content { padding: 1rem 1rem 2rem; }
  .alert-container { padding: 1rem 1rem 0; }
  .review-confirm-bar { left: 0; padding: 0.75rem 1rem; }
  .review-confirm-inner { gap: 0.75rem; }
  .variants-inner { margin-left: 1rem; }
  .summary-row { gap: 0.75rem; }
  .summary-card { flex: 1 1 140px; min-width: 140px; padding: 0.875rem 1rem; }
  .summary-card-icon { width: 38px; height: 38px; font-size: 1.0625rem; }
  .summary-card-num { font-size: 1.25rem; }
  .carry-actions { width: 100%; }
  .carry-actions .btn { flex: 1 1 auto; }
}

@media (min-width: 992px) {
  .topbar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .summary-card:hover, .stat-card:hover, .tick-box:hover,
  .sidebar-nav-item:hover i { transform: none; }
}