/* ════════════════════════════════════════════════════════════════
   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);
}