/* ─── Validação de formulários ─── */
  .finput.field-error, .usr-input.field-error, .form-input.field-error,
  .filter-select.field-error, .config-input.field-error {
    border-color: var(--danger-text) !important;
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
  }
  .field-error-msg {
    font-size: 11px; color: var(--danger-text); margin-top: 3px;
    display: flex; align-items: center; gap: 4px;
  }
  .field-error-msg::before { content: '⚠'; font-size: 10px; }
  .finput.field-ok, .usr-input.field-ok {
    border-color: var(--success-text);
  }
  /* ─── Loading state padronizado ─── */
  .td-loading {
    text-align: center; padding: 2rem; color: var(--gray-400);
    font-size: 13px;
  }
  /* ─── Empty state melhorado ─── */
  .empty-state {
    text-align: center; padding: 3rem 2rem;
    color: var(--gray-400); font-size: 13px; line-height: 1.8;
  }
  .empty-state .empty-icon { font-size: 32px; margin-bottom: 0.5rem; }
  .empty-state p { margin: 0 0 1rem; }

  /* ─── Dropdown de exportação ─── */
  .export-dropdown-wrap { position: relative; display: inline-flex; }
  .export-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 50; min-width: 180px;
    overflow: hidden; animation: fadeInDown 0.12s ease; }
  @keyframes fadeInDown { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
  .export-menu-item { display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 14px; background: none; border: none; text-align: left;
    font-size: 13px; font-weight: 600; color: var(--gray-700); cursor: pointer;
    font-family: 'Poppins', sans-serif; transition: background 0.12s; }
  .export-menu-item:hover { background: var(--primary-pale); color: var(--primary); }
  .export-menu-item + .export-menu-item { border-top: 1px solid var(--gray-100); }
  body.dark .export-menu { background: #1a1d2e; border-color: rgba(255,255,255,0.1); }
  body.dark .export-menu-item { color: #d1d5db; }
  body.dark .export-menu-item:hover { background: rgba(37,99,235,0.15); color: #60a5fa; }

  /* ─── Inputs tipo date no filter-select ─── */
  input[type="date"].filter-select {
    padding: 6px 8px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    color: var(--gray-700);
  }

  /* ─── Todos os selects e inputs do sistema herdam a fonte ─── */
  select, input, textarea, button {
    font-family: 'Poppins', sans-serif;
  }

  /* ─── Cal nav btn: botão "Hoje" tem primary color via classe ─── */
  .cal-nav-btn { 
    padding: 6px 14px; border: 1.5px solid var(--gray-200); 
    background: var(--white); color: var(--gray-700); border-radius: 8px; 
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.15s; font-family: 'Poppins', sans-serif;
  }
  .cal-nav-btn:hover { background: var(--gray-100); }
  .cal-nav-btn.cal-nav-hoje,
  #cal-nav-btns button:nth-child(2) {
    background: var(--primary-solid); color: #fff; border-color: var(--primary-solid);
  }

  /* ─── Botão fechar modal Meta (bare button → padronizado) ─── */
  #modal-nova-meta button[onclick="fecharModalMeta()"] {
    background: none; border: none; cursor: pointer;
    font-size: 18px; color: var(--gray-400); line-height: 1;
    padding: 4px 8px; border-radius: 6px;
    transition: all 0.15s; font-family: 'Poppins', sans-serif;
  }
  #modal-nova-meta button[onclick="fecharModalMeta()"]:hover {
    background: var(--gray-100); color: var(--gray-700);
  }

  /* ─── Botão select vaga na matrix (inline → normalizado) ─── */
  #mtr-vaga-select {
    flex: 1; padding: 6px 10px;
    border: 1.5px solid var(--gray-200); border-radius: 8px;
    font-size: 12px; font-family: 'Poppins', sans-serif;
    background: var(--white); color: var(--gray-700);
    cursor: pointer;
  }
  #mtr-vaga-select:focus { outline: none; border-color: var(--primary); }

  /* ─── .btn-primary dentro de empty states (primeira meta) ─── */
  #metas-custom-empty .btn-primary.btn-sm {
    margin-top: 0.8rem;
  }

  /* ─── Consistência nos botões de ação da tabela de usuários ─── */
  #usr-tbody button.btn.btn-sm.btn-ghost[style*="color:var(--danger-text)"] {
    color: var(--danger-text) !important;
  }
  #usr-tbody button.btn.btn-sm.btn-ghost[style*="color:#16a34a"] {
    color: var(--success-text) !important;
  }

  /* ─── Hover visual nos stat-cards clicáveis ─── */
  .stat-card[onclick] { transition: transform 0.15s, box-shadow 0.15s; }
  .stat-card[onclick]:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.09); cursor: pointer; }

  /* ─── .notif-btn padronizado ─── */
  .notif-btn {
    background: none; border: none; cursor: pointer;
    font-size: 20px; padding: 4px 6px; border-radius: 8px;
    transition: background 0.15s;
  }
  .notif-btn:hover { background: var(--gray-100); }

  /* ─── Todos os .btn-ghost já têm border implícito pelo sistema ─── */
  .btn.btn-ghost { border: 1px solid transparent; }
  .btn.btn-ghost:hover { border-color: var(--gray-200); }

  /* ─── Separação visual de grupos de botões no page-header ─── */
  .page-header > div:last-child { gap: 0.5rem; }

  /* ─── Normalizar botão de fechar (✕ Fechar) em todos os modais ─── */
  .modal .btn-ghost.btn-sm[onclick^="fecharModal"] {
    font-size: 12px; color: var(--gray-500); padding: 5px 10px;
  }
  .modal .btn-ghost.btn-sm[onclick^="fecharModal"]:hover {
    background: var(--gray-100); color: var(--gray-800);
  }


  /* ══════════ CONFIG PAGE ══════════ */

  /* Barra de abas */
  /* ── CONFIG TABS — Kanban Style ── */
  .cfg-tabs-bar {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 2.5px solid var(--gray-100);
    flex-wrap: wrap;
  }
/* Painéis — visibilidade via inline style, não CSS */
  .cfg-panel.active { animation: cfgIn .2s ease; }
  @keyframes cfgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

  /* Campos de formulário */
  .cfg-field { display: flex; flex-direction: column; gap: 6px; }
  .cfg-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .cfg-input {
    padding: 12px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 13.5px;
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    color: var(--gray-900);
    width: 100%;
    transition: border-color .18s, box-shadow .18s, background .18s;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .cfg-input:hover:not(:focus) {
    border-color: var(--gray-300);
  }
  .cfg-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.10), 0 1px 2px rgba(0,0,0,0.04);
  }
  .cfg-input::placeholder { color: var(--gray-400); }
  select.cfg-input { cursor: pointer; }
  textarea.cfg-input { resize: vertical; min-height: 90px; line-height: 1.55; }
  .cfg-hint { font-size: 11.5px; color: var(--gray-400); line-height: 1.5; margin-top: 2px; }

  /* Kanban stage rows */
  .kanban-stage-row { display:flex; align-items:center; gap:.85rem; padding:.55rem 0; border-bottom:1px solid var(--gray-100); }
  .kanban-stage-row:last-child { border-bottom: none; }
  .kanban-stage-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
  .kanban-stage-input { flex:1; max-width:220px; padding:10px 13px !important; border:1.5px solid var(--gray-200) !important; border-radius:9px !important; font-size:13px !important; font-family:'Poppins',sans-serif !important; background:var(--gray-50) !important; color:var(--gray-900) !important; transition:border-color .15s, box-shadow .15s, background .15s !important; outline:none !important; }
  .kanban-stage-input:hover:not(:focus) { border-color:var(--gray-300) !important; background:var(--white) !important; }
  .kanban-stage-input:focus { border-color:var(--primary) !important; background:var(--white) !important; box-shadow:0 0 0 3px rgba(37,99,235,0.1) !important; }

  /* manut-card CSS movido para o bloco principal */

  /* Dark mode */
body.dark .cfg-input { background: #1a1d2e; border-color: #2a2f45; color: #e6f0ff; box-shadow: none; }
  body.dark .cfg-input:hover:not(:focus) { border-color: #3a4060; }
  body.dark .cfg-input:focus { background: #1e2130; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
  body.dark .cfg-input::placeholder { color: #3a4060; }
  body.dark .kanban-stage-input { background: #1a1d2e !important; border-color: #2a2f45 !important; color: #e6f0ff !important; }
  body.dark .kanban-stage-input:hover:not(:focus) { border-color: #3a4060 !important; }
  body.dark .kanban-stage-input:focus { background: #1e2130 !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important; }
  body.dark .kanban-stage-row { border-color: #2a2f45; }
  body.dark .manut-card { background: #1a1d2e; border-color: #2a2f45; }
  body.dark .manut-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.4); border-color: var(--primary); }
  body.dark .manut-card-title { color: #e2e8f0; }

  /* ─── Badges de status inline na tabela de usuários ─── */
  #usr-tbody .btn.btn-sm.btn-ghost { padding: 4px 8px; font-size: 12px; }

  /* ─── Dark mode: btn-warning/info/success-soft ─── */
  body.dark .btn-info    { background: rgba(219,234,254,0.12); color: #60a5fa; border-color: rgba(147,197,253,0.3); }
  body.dark .btn-whatsapp { background: #0f8340; border-color: #0d7739; }
  body.dark .btn-ghost   { background: rgba(255,255,255,0.06); color: var(--gray-600); }
  body.dark .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); }

body.dark .gr-badge,
  body.dark .bf-skill-lbl:hover,
  body.dark .bf-skill-lbl:has(input:checked),
  body.dark .bf-tab:hover,
  body.dark .task-ref,
  body.dark .add-cont-btn:hover,
  body.dark .rel-quicknav-pill:hover,
  body.dark .ment-toggle-tab.active,
  body.dark .tag-chip {
    color: var(--primary-dark);
  }
  /* Mesmo padrão, mas aplicado via estilo inline (id ou style.cssText) — precisa de
     !important pra vencer o inline. */
  body.dark #gcal-user-badge,
  body.dark #chat-thread-avatar,
  body.dark .tag-chip-sm {
    color: var(--primary-dark) !important;
  }

.cfg-tab:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: -2px !important;
    border-radius: 6px !important;
  }