/* ══════════════════════════════════════════════════════════════
   CORPORATE v18 — refinamento visual sóbrio (azul cobalto / ardósia)
   ════════════════════════════════════════════════════════════════
   Camada ADITIVA, carregada por último. Eleva o aspeto para um look
   institucional/corporativo coeso, sem alterar a estrutura nem partir
   os temas. Mexe só em: acento, superfícies, bordas, sombras,
   cartões, tabelas, botões e KPIs.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Acento mais contido: âmbar profundo em vez de coral-néon.
     Mantém o calor para CTAs/KPIs mas com ar mais sério. */
  --accent:     #c2701c;
  --accent-dk:  #9a560f;
  --accent-lt:  #fbf2e8;
  --accent-rgb: 194,112,28;

  /* Fundo mais limpo e neutro (menos saturado) */
  --bg:    #eef2f7;
  --bg-2:  #e6ecf3;
  --bg-3:  #dbe3ec;

  /* Bordas ligeiramente mais definidas para hierarquia clara */
  --border-subtle: rgba(30,58,95,.07);
  --border:        rgba(30,58,95,.13);
  --border-strong: rgba(30,58,95,.22);

  /* Sombras corporativas: mais discretas e nítidas */
  --sh-2: 0 1px 2px rgba(15,42,82,.05), 0 1px 3px rgba(15,42,82,.05);
  --sh-3: 0 1px 3px rgba(15,42,82,.05), 0 4px 12px rgba(15,42,82,.07);
  --sh-4: 0 2px 6px rgba(15,42,82,.06), 0 10px 28px rgba(15,42,82,.09);
}

/* ── Cartões: superfície branca, borda fina, sombra discreta ────── */
.card, .panel, .kpi-card, .stat-card, .widget, .data-card, .info-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-2) !important;
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.card:hover, .panel:hover, .kpi-card:hover, .stat-card:hover {
  box-shadow: var(--sh-3) !important;
  border-color: var(--border-strong) !important;
}

/* ── Cabeçalhos de secção: tipografia institucional ─────────────── */
.section-title, .panel-title, .card-title, .view-title {
  letter-spacing: -.01em;
  color: var(--text);
}

/* ── Tabelas: cabeçalho ardósia, linhas com zebra subtil ────────── */
table thead th,
.table thead th,
.tbl thead th {
  background: #f3f6fb !important;
  color: var(--text-2) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border) !important;
  padding: 11px 14px !important;
}
table tbody td,
.table tbody td,
.tbl tbody td {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 11px 14px !important;
}
table tbody tr:nth-child(even) td { background: rgba(30,58,95,.015); }
table tbody tr:hover td { background: var(--surface-hover) !important; }

/* ── Botões: corporativos, flat com profundidade subtil ─────────── */
.btn-primary, button.primary, .btn.primary {
  background: var(--grad-brand) !important;
  border: 1px solid var(--primary-dk) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(15,42,82,.12) !important;
  font-weight: 600 !important;
}
.btn-primary:hover, button.primary:hover {
  background: var(--grad-brand-dk) !important;
}
.btn-secondary, .btn.secondary, button.secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-2) !important;
  font-weight: 600 !important;
}
.btn-secondary:hover, button.secondary:hover {
  background: var(--surface-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary-dk) !important;
}

/* ── KPIs / números de destaque ─────────────────────────────────── */
.kpi-value, .stat-value, .metric-value {
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--text);
}
.kpi-label, .stat-label, .metric-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  font-weight: 600;
}

/* ── Topbar: linha de assentamento mais nítida ──────────────────── */
.topbar { border-bottom: 1px solid var(--border) !important; }

/* ── Foco institucional coeso (acessível) ───────────────────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Legibilidade do texto (labels e conteúdo em superfície clara) ─
   Garante contraste suficiente sem afetar zonas de fundo escuro
   (sidebar, login, topbar, botões coloridos). */
.form-label, .field-label, label:not(.switch):not(.toggle) {
  color: var(--text-2) !important;
  font-weight: 600;
}
.modal-box, .modal-box p, .modal-box li, .modal-box span,
.card p, .card li, .widget p, .widget li,
.form-group small, .form-hint, .help-text {
  color: var(--text-2);
}
.modal-box h1, .modal-box h2, .modal-box h3, .modal-box h4,
.card-title, .widget-title, .section-title {
  color: var(--text) !important;
}
small, .text-muted, .muted { color: var(--text-muted); }

/* Corrige cartões que referenciam um token inexistente (--bg-secondary)
   — assenta-os numa superfície clara definida, evitando texto sem
   contraste em fundo herdado. */
[style*="--bg-secondary"] { background: var(--surface-alt) !important; }

/* ── Scrollbar discreta (desktop) ───────────────────────────────── */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: 999px;
    border: 2px solid var(--bg);
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--primary-soft); }
}

/* ══════════════════════════════════════════════════════════════
   ÍCONES — formato consistente (especialmente no telemóvel)
   ══════════════════════════════════════════════════════════════ */
/* Ícones SVG dentro de botões: tamanho coerente, alinhados ao texto,
   nunca esticados nem esmagados. */
.btn svg, .btn-sm svg, .btn-icon svg {
  width: 1.05em; height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -0.14em;
}
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Emoji/ícones em cartões e títulos alinham verticalmente com o texto */
.stat-icon, .kpi-icon { display: inline-flex; align-items: center; justify-content: center; }
.stat-icon span, .kpi-icon span { line-height: 1; }

/* Logótipo do login mantém SEMPRE a proporção (não fica esmagado) */
#login-screen .login-logo img.app-logo {
  object-fit: contain !important;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* No telemóvel, normaliza o tamanho dos ícones para não destoarem */
  .btn svg, .btn-sm svg, .btn-icon svg { width: 1em; height: 1em; }
  .stat-icon { width: 40px; height: 40px; border-radius: 10px; }
  .stat-icon span { font-size: 1.25rem !important; }
  /* Logo do login num tamanho confortável no telemóvel */
  #login-screen .login-logo img.app-logo { width: 76px !important; height: 76px !important; }
  .login-title { font-size: 1.9rem !important; }
  /* Botões com ícone+texto: espaçamento e alinhamento certos */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
}