/* ============================================================
   WeOngoing — UI Refresh (camada de polimento visual)

   Arquivo 100% ADITIVO: carregado DEPOIS de styles.css/login.css
   e só sobrescreve propriedades visuais (cor, sombra, borda,
   espaçamento sutil, transição). Nenhum seletor aqui esconde,
   remove ou reordena conteúdo; nenhum layout/fluxo é alterado.

   ROLLBACK: remover a tag <link> do ui-refresh.css nas páginas
   (ou apagar este arquivo) desfaz todo o refresh instantaneamente.
   ============================================================ */

/* ---------- Seleção de texto combinando com a marca ---------- */
::selection {
  background: rgba(94, 31, 79, 0.16);
  color: var(--ink-900, #1F1A1E);
}

/* ---------- Scrollbars globais discretas (webkit) ----------
   O board do Kanban e as colunas já têm regras próprias mais
   específicas — isto cobre main, modais, painéis e listas. */
.main::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.notif-list::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.side-panel::-webkit-scrollbar {
  width: 10px;
}
.main::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.notif-list::-webkit-scrollbar-thumb,
.side-panel::-webkit-scrollbar-thumb {
  background: rgba(94, 31, 79, 0.14);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.main::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.notif-list::-webkit-scrollbar-thumb:hover,
.side-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(94, 31, 79, 0.26);
  border: 3px solid transparent;
  background-clip: padding-box;
}
.main::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.notif-list::-webkit-scrollbar-track,
.side-panel::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 125, 0.35);
  border: 3px solid transparent;
  background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-track { background: transparent; }
.main, .modal-body, .notif-list, .side-panel { scrollbar-width: thin; scrollbar-color: rgba(94,31,79,0.2) transparent; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }

/* ---------- Topbar: vidro sutil + hierarquia ---------- */
.topbar {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(42, 23, 41, 0.02);
}
.topbar-search input {
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.topbar-search input:hover {
  border-color: var(--border);
}
.topbar-search input:focus {
  border-color: var(--primary-mid);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(123, 45, 104, 0.10), var(--shadow-sm);
}
.topbar-user {
  border: 1px solid transparent;
  transition: var(--transition);
}
.topbar-user:hover {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ---------- Sidebar: movimento mais fluido ---------- */
.nav-item {
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-item:active { transform: scale(0.985); }
.nav-item.active {
  box-shadow: inset 0 0 0 1px rgba(212, 175, 125, 0.22);
}
.nav-item.active::before {
  width: 3px;
  box-shadow: 0 0 10px rgba(212, 175, 125, 0.55);
}

/* ---------- Page header: hierarquia tipográfica ---------- */
.page-kicker {
  letter-spacing: 0.22em;
  color: var(--gold-deep);
}
.page-header h1 { letter-spacing: -0.02em; }
.page-header p { line-height: 1.55; }

/* ---------- Botões: micro-interações refinadas ---------- */
.btn {
  transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease),
              background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn-ghost {
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  box-shadow: var(--shadow);
}
.btn-icon {
  transition: var(--transition);
}
.btn-icon:active { transform: scale(0.94); }

/* ---------- Cards de estatística (kanban-meta / dash) ---------- */
.stat {
  border-color: var(--border-soft);
  transition: var(--transition);
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border);
}

/* ---------- Kanban: colunas com respiro e profundidade ---------- */
.kanban-column {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF9 100%);
  border-color: var(--border-soft);
}
.kanban-column:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}
.column-header { border-bottom: 1px solid var(--border-soft); }
.column-count {
  box-shadow: inset 0 0 0 1px rgba(94, 31, 79, 0.08);
}

/* Card do funil: hover com elevação mais nítida (mantém o
   translateY existente; só reforça sombra/borda). */
.card {
  box-shadow: 0 1px 2px rgba(42, 23, 41, 0.03);
}
.card:hover {
  box-shadow: 0 8px 20px rgba(42, 23, 41, 0.08), 0 2px 4px rgba(42, 23, 41, 0.04);
}

/* ---------- Chips e pills: definição sutil ---------- */
.chip.gold    { box-shadow: inset 0 0 0 1px rgba(138, 103, 51, 0.18); }
.chip.warning { box-shadow: inset 0 0 0 1px rgba(194, 138, 45, 0.20); }
.chip.danger  { box-shadow: inset 0 0 0 1px rgba(179, 58, 58, 0.16); }
.chip.success { box-shadow: inset 0 0 0 1px rgba(46, 188, 116, 0.20); }

/* ---------- Chips de filtro / tabs: estados ativos refinados ---------- */
.filter-chip {
  transition: var(--transition);
}
.filter-chip.active {
  box-shadow: var(--shadow-sm);
}
.gestor-tab, .admin-tab, .gestor-cat {
  transition: var(--transition);
}

/* ---------- Modal: camadas e foco ---------- */
.modal {
  border: 1px solid rgba(236, 231, 234, 0.9);
  box-shadow: 0 24px 64px rgba(42, 23, 41, 0.16), 0 6px 16px rgba(42, 23, 41, 0.08);
}
.modal-header { border-bottom-color: var(--border-soft); }
.modal-footer { border-top-color: var(--border-soft); }
.modal-kicker { letter-spacing: 0.22em; color: var(--gold-deep); }
.modal-close { border: 1px solid transparent; }
.modal-close:hover { border-color: var(--error-line); }

/* ---------- Campos de formulário: foco mais elegante ---------- */
.field input, .field select, .field textarea {
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--border);
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(123, 45, 104, 0.10), var(--shadow-sm);
}

/* ---------- Menus flutuantes: elevação consistente ---------- */
.user-menu, .notif-panel {
  border: 1px solid var(--border-soft);
  box-shadow: 0 18px 44px rgba(42, 23, 41, 0.14), 0 4px 10px rgba(42, 23, 41, 0.05);
}
.user-menu-item { transition: background 0.15s ease, color 0.15s ease; }
.notif-item { transition: background 0.15s ease; }

/* ---------- Toasts: contraste e suavidade ---------- */
.toast {
  box-shadow: 0 16px 40px rgba(42, 23, 41, 0.28), 0 4px 10px rgba(42, 23, 41, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Painel lateral ---------- */
.side-panel {
  box-shadow: -24px 0 64px rgba(42, 23, 41, 0.14);
}

/* ---------- Login (login.html carrega login.css + este arquivo) ---------- */
.login-card h1 { letter-spacing: -0.03em; }
.login-aside {
  background: radial-gradient(circle at 85% -10%, rgba(212,175,125,0.14) 0%, transparent 55%),
              linear-gradient(178deg, var(--wine-900) 0%, var(--wine-700) 100%);
}
.login-card .btn-primary {
  box-shadow: 0 10px 26px rgba(94, 31, 79, 0.20);
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.18s ease;
}
.login-card .btn-primary:hover {
  box-shadow: 0 14px 34px rgba(94, 31, 79, 0.28);
}
.login-card .btn-primary:active { transform: translateY(0) scale(0.99); }
.login-card input:focus {
  border-color: var(--wine-600) !important;
  box-shadow: 0 0 0 3px rgba(123, 45, 104, 0.10);
}

/* ---------- Reduced motion: desativa as micro-animações novas ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-item, .btn, .btn-icon, .stat, .filter-chip,
  .gestor-tab, .admin-tab, .gestor-cat {
    transition: none;
  }
  .nav-item:active, .btn:active, .btn-icon:active { transform: none; }
  .stat:hover { transform: none; }
}