/* ════════════════════════════════════════════════════════════════
   POLISH v10 — Padronização final das cores e contornos
   Princípios:
   1. Cor SÓLIDA por defeito; gradiente só em CTAs primários (1 botão)
   2. Hierarquia por opacidade (não por nova cor)
   3. Sombra única e subtil
   4. Texto sempre em cor sólida (sem gradient-text)
   5. Bordas finas (1px) consistentes
   6. Cantos arredondados normalizados (8px / 12px / 16px)
   7. Hover/active calmos (sem transform, sem glow)
═══════════════════════════════════════════════════════════════ */

/* ── BODY: fundo limpo ─────────────────────────────────────────── */
body {
  background: var(--bg) !important;
}

/* ── TOPBAR: cor sólida em vez de gradiente ────────────────────── */
.topbar {
  background: var(--primary) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
}

/* ── STAT CARDS ────────────────────────────────────────────────── */
.stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.stat-card::before { display: none !important; }
.stat-card:hover {
  border-color: rgba(var(--primary-rgb),.32) !important;
  box-shadow: 0 1px 3px rgba(12,44,82,.06) !important;
  transform: none !important;
}
.stat-card .stat-icon {
  background: var(--primary-lt) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

/* ── KPI CARDS ─────────────────────────────────────────────────── */
.kpi-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.kpi-card::before { display: none !important; }
.kpi-card:hover {
  border-color: rgba(var(--primary-rgb),.32) !important;
  box-shadow: 0 1px 3px rgba(12,44,82,.06) !important;
  transform: none !important;
}
.kpi-card .kpi-value {
  /* Cor sólida em vez de gradient-text */
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--primary-dk) !important;
}

/* ── WIDGETS ───────────────────────────────────────────────────── */
.widget {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.widget-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 14px 16px !important;
}
.widget-title {
  /* Cor sólida em vez de gradient-text */
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
}

/* ── BOTÕES ────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
.btn-primary::after { display: none !important; }
.btn-primary:hover {
  background: var(--primary-dk) !important;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb),.22) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

.btn-success {
  background: var(--green) !important;
  color: #fff !important; border: none !important; box-shadow: none !important;
}
.btn-success:hover { background: var(--green-dk) !important; }
.btn-danger {
  background: var(--red) !important;
  color: #fff !important; border: none !important; box-shadow: none !important;
}
.btn-danger:hover { background: var(--red-dk) !important; }
.btn-warning {
  background: var(--amber) !important;
  color: #fff !important; border: none !important; box-shadow: none !important;
}
.btn-warning:hover { background: var(--amber-dk) !important; }

.btn-secondary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.btn-secondary:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
}

/* ── HIER CARDS (estabelecimentos, marketplace, etc.) ──────────── */
.hier-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.hier-card:hover {
  transform: none !important;
  border-color: rgba(var(--primary-rgb),.32) !important;
  box-shadow: 0 1px 3px rgba(12,44,82,.06) !important;
}

/* ── TABS ──────────────────────────────────────────────────────── */
.tab-btn.active {
  color: var(--primary-dk) !important;
}
.tab-btn.active::after {
  background: var(--primary) !important;
  height: 2px !important;
  border-radius: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* ── VIEW HEADER (título principal das vistas) ─────────────────── */
.view-header h1,
.view-header h2,
.view-header .header-title {
  /* Cor sólida em vez de gradient-text */
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
}

/* ── INFO PANEL ────────────────────────────────────────────────── */
.info-panel {
  background: var(--surface-cobalt) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
}

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.empty-state {
  background: var(--surface-alt) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 12px !important;
}

/* ── BADGES — flat e calmos ────────────────────────────────────── */
.badge {
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  border-width: 1px !important;
}

/* ── MODAIS ────────────────────────────────────────────────────── */
.modal-content, #modal {
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(12,44,82,.18) !important;
}
.modal-header, #modal-header {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 16px 20px !important;
}
.modal-title, #modal-title {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.modal-footer, #modal-footer {
  background: var(--surface-alt) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 12px 16px !important;
}

/* ── DRAWER ────────────────────────────────────────────────────── */
.drawer-content, #drawer {
  box-shadow: -16px 0 40px rgba(12,44,82,.16) !important;
}
.drawer-header, #drawer-header {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.drawer-title, #drawer-title {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* ── FORMULÁRIOS — inputs limpos ───────────────────────────────── */
.form-control, .field-input, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="time"], select, textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-control:focus, .field-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.12) !important;
  outline: none !important;
}
.form-label, .field-label {
  color: var(--text-2) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
}

/* ── PWA BANNER / INSTALL BUTTON ───────────────────────────────── */
#pwa-update-banner {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 28px rgba(12,44,82,.16) !important;
}
.pwa-banner-btn-primary {
  background: var(--primary) !important;
  box-shadow: none !important;
}
.pwa-banner-btn-primary:hover {
  background: var(--primary-dk) !important;
}
.pwa-install-btn {
  background: var(--primary) !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb),.28) !important;
}
.pwa-install-btn:hover {
  background: var(--primary-dk) !important;
}

/* ── TOAST — sem vidro fosco, fundo sólido ─────────────────────── */
.toast {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 6px 20px rgba(12,44,82,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 10px !important;
}

/* ── NAV BADGE (na sidebar e em outros locais) ─────────────────── */
.nav-badge {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* ── TABELAS ───────────────────────────────────────────────────── */
table {
  border-collapse: separate;
  border-spacing: 0;
}
table th {
  background: var(--surface-alt) !important;
  color: var(--text-2) !important;
  font-weight: 600 !important;
  font-size: .78rem !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border) !important;
}
table td {
  border-bottom: 1px solid var(--border-subtle) !important;
}
table tr:hover td {
  background: var(--surface-hover) !important;
}

/* ── DIVIDERS / linhas de separação ────────────────────────────── */
hr {
  border: 0 !important;
  border-top: 1px solid var(--border-subtle) !important;
  margin: 16px 0 !important;
}

/* ── BREADCRUMB ────────────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* ── LOGIN PRESERVADO ──────────────────────────────────────────── */
/* Mantém os elementos de login (orbe, mesh, gradiente cobalto) que
   foram afinados anteriormente — não interferimos com eles. */

/* ════════════════════════════════════════════════════════════════
   v11 — Paleta Azul + Branco modernizada + Modais estáveis
═══════════════════════════════════════════════════════════════ */

/* ── MODAL OVERLAY mais opaco e SEM fechar ao clicar fora ──────── */
.modal-overlay, #modal-overlay {
  background: rgba(7, 25, 47, .55) !important;     /* mais escuro: indica bloqueio */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.drawer-overlay, #drawer-overlay {
  background: rgba(7, 25, 47, .42) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Cursor por defeito no overlay (não convida a clicar) */
.modal-overlay, #modal-overlay,
.drawer-overlay, #drawer-overlay {
  cursor: default !important;
}

/* Caixas com sombra mais pronunciada para destacar do overlay */
.modal-box, #modal-box {
  box-shadow: 0 20px 50px rgba(7,25,47,.32),
              0 4px 14px rgba(7,25,47,.18) !important;
  border-radius: 16px !important;
}
.drawer-panel, #drawer-panel {
  box-shadow: -16px 0 50px rgba(7,25,47,.32) !important;
}

/* ── Cabeçalhos de modal e drawer cobalto+branco ───────────────── */
.modal-header, #modal-header,
.drawer-header {
  background: linear-gradient(180deg, #15569e 0%, #0f4279 100%) !important;
  color: #ffffff !important;
  border-bottom: none !important;
  padding: 16px 20px !important;
}
.modal-title, #modal-title,
.drawer-title, #drawer-title,
.modal-header h3, .drawer-header h3 {
  color: #ffffff !important;
}
.modal-close {
  color: rgba(255,255,255,.85) !important;
  transition: background .12s ease, color .12s ease !important;
  border-radius: 8px !important;
  padding: 6px !important;
}
.modal-close:hover {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

/* ── Limpeza geral da paleta — só azul cobalto + branco + cinzas */
.stat-icon { color: var(--primary-dk) !important; }

/* Tab activa: linha azul cobalto sólida */
.tab-btn.active::after {
  background: var(--primary) !important;
}

/* Badges com tons azuis para info, mantendo semânticos para estado */
.badge-info, .badge-blue { background: #e8f1fa !important; color: #0f4279 !important; border:1px solid rgba(21,86,158,.20) !important; }

/* Cards de dashboard: bordas e sombras subtis no tom cobalto */
.dashboard-grid > .widget,
.stats-grid > .stat-card,
.kpi-grid > .kpi-card,
.hier-grid > .hier-card {
  border: 1px solid #dce6f3 !important;
  background: #ffffff !important;
}

/* Hover dos cards: cobalto subtil */
.stat-card:hover, .kpi-card:hover, .hier-card:hover {
  border-color: rgba(21,86,158,.30) !important;
  box-shadow: 0 2px 6px rgba(7,25,47,.08), 0 0 0 1px rgba(21,86,158,.04) !important;
}

/* Inputs alinhados ao tema */
input.form-control, select.form-control, textarea.form-control,
.field-input {
  background: #ffffff !important;
  border: 1px solid #dce6f3 !important;
  color: #0c1a27 !important;
  border-radius: 8px !important;
}
.form-control:hover, .field-input:hover {
  border-color: #a8c5e6 !important;
}

/* Botões secundários — claros e neutros */
.btn-secondary, .btn-ghost {
  background: #ffffff !important;
  color: #0c1a27 !important;
  border: 1px solid #dce6f3 !important;
}
.btn-secondary:hover, .btn-ghost:hover {
  background: #f5f8fc !important;
  border-color: #a8c5e6 !important;
}

/* Empty-state mais clean */
.empty-state {
  background: #f5f8fc !important;
  border: 1px dashed #c5d7ec !important;
  color: #475569 !important;
}

/* Notification badge azul-cobalto em vez de vermelho gritante */
.notif-badge, .topbar-notif-badge {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR v11 — Refinamento final do estilo
═══════════════════════════════════════════════════════════════ */

/* ── Fundo: subtil gradiente vertical para profundidade ─────────── */
.sidebar {
  background: linear-gradient(180deg, #0a2848 0%, #0c2c52 30%, #0c2c52 100%) !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.05),
              4px 0 24px rgba(0,0,0,.20),
              inset -1px 0 0 rgba(0,0,0,.10) !important;
}

/* ── Header da sidebar mais refinado ────────────────────────────── */
.sidebar-header {
  padding: 20px 18px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.sidebar-brand-name {
  font-size: .98rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}
.sidebar-brand-sub {
  font-size: .68rem !important;
  color: rgba(255,255,255,.50) !important;
  margin-top: 2px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.sidebar-logo {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.sidebar-logo img { width: 34px !important; height: 34px !important; }

/* ── Painel do utilizador (foto + nome + perfil) ────────────────── */
.sidebar-user {
  padding: 20px 16px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%) !important;
}
.sidebar-user-name {
  color: #ffffff !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}
.role-badge {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  font-size: .68rem !important;
  border-radius: 999px !important;
}

/* ── Section labels mais subtis ─────────────────────────────────── */
.nav-section { padding: 20px 18px 6px !important; }
.nav-section:first-child { padding-top: 12px !important; }
.nav-section-label {
  font-size: .62rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.38) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* ── Nav items — mais espaçados, ícones mais consistentes ───────── */
.nav-item {
  margin: 1px 12px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,.70) !important;
  font-weight: 500 !important;
  font-size: .82rem !important;
  letter-spacing: -0.005em !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  transition: all .14s ease !important;
}
.nav-item svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  opacity: .85;
  transition: opacity .14s ease !important;
}
.nav-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
}
.nav-item:hover svg { opacity: 1 !important; transform: none !important; }

/* ── Active state — limpo e claro ───────────────────────────────── */
.nav-item.active {
  background: rgba(255,255,255,.13) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  position: relative;
}
.nav-item.active svg { opacity: 1 !important; color: #ffffff !important; }
.nav-item.active::before {
  /* Barrinha lateral fina à esquerda — indicador visual subtil */
  content: '' !important;
  position: absolute !important;
  left: -12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 60% !important;
  background: #ffffff !important;
  border-radius: 0 3px 3px 0 !important;
  display: block !important;
  box-shadow: 0 0 8px rgba(255,255,255,.30) !important;
  opacity: 1 !important;
}

/* ── Nav badge — discreto */
.nav-badge {
  margin-left: auto !important;
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  min-width: 18px !important;
  text-align: center !important;
  box-shadow: none !important;
}
.nav-item.active .nav-badge {
  background: rgba(255,255,255,.26) !important;
}

/* ── Sidebar footer (logout) ────────────────────────────────────── */
.sidebar-footer {
  padding: 14px 12px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  background: rgba(0,0,0,.08) !important;
}
.sidebar-logout {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  background: transparent !important;
  color: rgba(255,255,255,.62) !important;
  border-radius: 8px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  width: 100% !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all .14s ease !important;
}
.sidebar-logout svg { width: 18px !important; height: 18px !important; opacity: .8 !important; }
.sidebar-logout:hover {
  background: rgba(239,68,68,.18) !important;
  color: #fecaca !important;
}
.sidebar-logout:hover svg { opacity: 1 !important; }

/* ── Botão sidebar-toggle (recolher/expandir) ───────────────────── */
.sidebar-toggle {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.62) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  transition: all .14s ease !important;
}
.sidebar-toggle:hover {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}

/* ── Modo recolhido: ícones centralizados, sem labels ───────────── */
body.sb-collapsed .sidebar {
  width: 68px !important;
}
body.sb-collapsed .nav-item {
  justify-content: center !important;
  padding: 9px 0 !important;
}
body.sb-collapsed .nav-item.active::before { left: -8px !important; }
body.sb-collapsed .nav-label,
body.sb-collapsed .sidebar-brand-name,
body.sb-collapsed .sidebar-brand-sub,
body.sb-collapsed .sidebar-user-name,
body.sb-collapsed .sidebar-user-role,
body.sb-collapsed .nav-section-label,
body.sb-collapsed .nav-badge { display: none !important; }
body.sb-collapsed .sidebar-logo { width: 38px !important; height: 38px !important; }
body.sb-collapsed .sidebar-logo img { width: 28px !important; height: 28px !important; }

/* ── Scrollbar mais subtil ──────────────────────────────────────── */
.sidebar-nav::-webkit-scrollbar { width: 5px !important; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  border: none !important;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.20) !important;
}