/* ════════════════════════════════════════════════════════════════
   PALETA REFINADA v9 — Combinações cromáticas dinâmicas
   Aplica gradientes e tons aos elementos de maior impacto visual
   sem reescrever a estrutura existente.
═══════════════════════════════════════════════════════════════ */

/* ── Body com gradiente subtil de fundo ────────────────────────── */
body {
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(43,115,189,.07) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% -5%, rgba(249,115,22,.05) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Stat cards — gradiente subtil + hover dinâmico ────────────── */
.stat-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-cobalt) 100%) !important;
  border: 1px solid var(--border-subtle);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.stat-card::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-card-cool);
  border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-4);
}
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-icon {
  background: linear-gradient(135deg, var(--primary-lt) 0%, rgba(255,255,255,.6) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb),.08);
}

/* ── KPI cards — borda lateral em gradiente + valor com gradient text */
.kpi-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-cobalt) 100%);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.kpi-card::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--grad-brand); opacity: .85;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}
.kpi-card .kpi-value {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Widgets — fundo elevado + header com tom cobalto ─────────── */
.widget {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-elev) 100%);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--sh-2);
}
.widget-header {
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, transparent 0%, rgba(43,115,189,.025) 100%);
}
.widget-title {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* ── Botão primário com gradiente e brilho ────────────────────── */
.btn-primary {
  background: var(--grad-brand) !important;
  box-shadow: var(--sh-brand);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events: none; opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.btn-primary:hover { box-shadow: var(--sh-brand), 0 0 0 4px rgba(var(--primary-rgb),.14); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: translateY(1px); }

/* Botões success/danger/warning ganham gradiente subtil */
.btn-success {
  background: var(--grad-emerald) !important; color:#fff;
  box-shadow: 0 2px 10px rgba(var(--green-rgb),.30);
}
.btn-danger {
  background: var(--grad-rose) !important; color:#fff;
  box-shadow: 0 2px 10px rgba(var(--red-rgb),.28);
}
.btn-warning {
  background: var(--grad-warm) !important; color:#fff;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb),.32);
}

/* ── Topbar — gradiente em vez de cor lisa ────────────────────── */
.topbar {
  background: linear-gradient(90deg, var(--primary-dk) 0%, var(--primary) 50%, var(--primary-mid) 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 18px rgba(12,44,82,.18);
}

/* ── Badges com tonalidades de marca consistentes ─────────────── */
.badge { font-weight: 600; letter-spacing:.01em; }
.badge-primary { background: var(--primary-lt); color: var(--primary-dk); border:1px solid rgba(var(--primary-rgb),.18); }
.badge-green   { background: var(--green-lt);   color: var(--green-dk);   border:1px solid rgba(var(--green-rgb),.20); }
.badge-amber   { background: var(--amber-lt);   color: var(--amber-dk);   border:1px solid rgba(var(--amber-rgb),.22); }
.badge-red     { background: var(--red-lt);     color: var(--red-dk);     border:1px solid rgba(var(--red-rgb),.22); }
.badge-purple  { background: var(--purple-lt);  color: var(--purple-dk);  border:1px solid rgba(var(--purple-rgb),.22); }
.badge-orange  { background: var(--orange-lt);  color: var(--orange-dk);  border:1px solid rgba(var(--orange-rgb),.22); }
.badge-gray    { background: var(--gray-lt);    color: var(--gray-dk);    border:1px solid var(--border); }

/* ── Hier cards (estabelecimentos, marketplace, etc.) ─────────── */
.hier-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-cobalt) 100%);
  border: 1px solid var(--border-subtle);
  transition: transform .22s var(--ease-out),
              box-shadow .22s var(--ease-out),
              border-color .22s var(--ease-out);
}
.hier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--primary-rgb), .22);
  box-shadow: var(--sh-3);
}

/* ── Tabs com sublinhado em gradiente ─────────────────────────── */
.tab-btn.active {
  color: var(--primary-dk) !important;
  position: relative;
}
.tab-btn.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px;
  background: var(--grad-brand);
  border-radius: 999px 999px 0 0;
}

/* ── View headers — título com gradiente subtil ───────────────── */
.view-header h1,
.view-header h2,
.view-header .header-title {
  background: linear-gradient(135deg, var(--text) 0%, var(--primary-dk) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Info panels — fundo cobalto leve com borda esquerda ──────── */
.info-panel {
  background: linear-gradient(135deg, var(--primary-lt) 0%, rgba(255,255,255,.6) 100%);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
}

/* ── Empty state — superfície com gradiente subtil ────────────── */
.empty-state {
  background: var(--grad-sky);
  border-radius: var(--r-lg);
}

/* ── PWA banner e botão de instalação — alinhar à paleta nova ── */
#pwa-update-banner {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elev) 100%);
  border-color: rgba(var(--primary-rgb),.18);
}
.pwa-banner-btn-primary {
  background: var(--grad-brand);
  box-shadow: var(--sh-brand);
}
.pwa-install-btn {
  background: var(--grad-warm);
  box-shadow: 0 8px 26px rgba(var(--accent-rgb),.38);
}

/* ── Toast com vidro fosco + acento de cor ────────────────────── */
.toast {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-elev) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--sh-4);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
}

/* ── Inputs em focus com glow cobalto ─────────────────────────── */
.form-control:focus,
.field-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.14);
  outline: none;
}

/* ── Nav badge cores mais ricas ───────────────────────────────── */
.nav-badge {
  background: var(--grad-warm);
  color: #fff;
  box-shadow: 0 1px 4px rgba(var(--accent-rgb),.36);
}

/* ════════════════════════════════════════════════════════════════
   Acessibilidade — focus rings, skip-link, reduced-motion
═══════════════════════════════════════════════════════════════ */

/* Skip-to-content para utilizadores de teclado e leitores de ecrã */
.skip-to-content {
  position: absolute; top: -100px; left: 8px; z-index: 99999;
  background: var(--primary); color: #fff;
  padding: 8px 14px; border-radius: 8px;
  font-weight: 600; font-size: .85rem;
  box-shadow: var(--sh-brand);
  transition: top .15s var(--ease-out);
}
.skip-to-content:focus {
  top: 8px; outline: none;
}

/* Focus visível e consistente em qualquer elemento interactivo */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14);
}

/* Respeita preferência do utilizador de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .login-orb, .login-mesh, .login-logo::before { animation: none !important; }
}

/* Aumenta contraste em preferência de alto contraste */
@media (prefers-contrast: more) {
  :root {
    --border:         rgba(15,23,42,.30);
    --border-subtle:  rgba(15,23,42,.15);
    --text-muted:     #475569;
  }
  .badge { border-width: 2px; }
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR v10 — limpa, cores sólidas e contornos agradáveis
   Substitui o estilo barroco anterior por um look minimalista
   cobalto, com active state simples e divisores subtis.
═══════════════════════════════════════════════════════════════ */

/* Fundo sólido em vez do gradiente 3-stop + remoção do glow lateral */
.sidebar {
  background: var(--sb-bg) !important;
  border-top: none !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.04), 4px 0 24px rgba(0,0,0,.18) !important;
}
.sidebar::after { display: none !important; }

/* Header e perfil — sem fundos separados, só divisor fino */
.sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 18px 18px 16px !important;
}
.sidebar-user {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 18px 16px 16px !important;
}
.avatar-xl { animation: none !important; }   /* desactiva anel pulsante */

/* Caixa do logo na sidebar — mais limpa */
.sidebar-logo {
  background: rgba(255,255,255,.05) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

/* Role badge — flat, sem borda colorida */
.role-badge {
  background: rgba(255,255,255,.06) !important;
  border: none !important;
  color: var(--sb-tx) !important;
}

/* Cabeçalhos de secção — texto muted, sem linha em gradient */
.nav-section { padding: 18px 18px 6px !important; }
.nav-section:first-child { padding-top: 10px !important; }
.nav-section-label {
  font-size: .64rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.42) !important;
  letter-spacing: .12em !important;
}
.nav-section-label::after { display: none !important; }

/* Nav items — espaçados, contorno arredondado, hover suave */
.nav-item {
  margin: 1px 10px !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  color: rgba(255,255,255,.72) !important;
  font-weight: 500 !important;
  transition: background .15s ease, color .15s ease !important;
}
.nav-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
}
.nav-item:hover svg { transform: none !important; color: inherit !important; }
.nav-item:active { transform: none !important; }

/* Active — pill sólido subtil, sem glow nem barra lateral */
.nav-item.active {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.nav-item.active::before { display: none !important; }
.nav-item.active svg { color: #ffffff !important; }

/* Nav badge mais discreto */
.nav-badge {
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* Footer — divisor superior subtil */
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: transparent !important;
}

/* Botão de logout — flat, hover suave */
.sidebar-logout {
  color: rgba(255,255,255,.55) !important;
  background: transparent !important;
  border-radius: 9px !important;
  transition: background .15s ease, color .15s ease !important;
}
.sidebar-logout:hover {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}

/* Scrollbar — branco translúcido em vez de ciano */
.sidebar-nav {
  scrollbar-color: rgba(255,255,255,.14) transparent !important;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14) !important;
  background-clip: padding-box !important;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.24) !important;
  background-clip: padding-box !important;
}