/* ============================================================================
   Portal PAR — app.css  (estilos base + dark mode + componentes)
   Tailwind via CDN cobre o grosso; aqui ficam tokens e peças reutilizáveis.
   ========================================================================= */

:root {
  --par-primary: #1E3A5F;
  --par-primary-rgb: 30, 58, 95;
  --par-secondary: #2E6DA4;
  --par-radius: 0.75rem;
}

* { -webkit-tap-highlight-color: transparent; }

/* ── Dropzone de anexos (padrão reutilizável) ────────────────────────────── */
.drop-zone { border: 2px dashed #CBD5E1; border-radius: 14px; padding: 28px 16px; text-align: center; transition: border-color .2s, background .2s; cursor: pointer; }
.drop-zone:hover { border-color: var(--par-primary); }
.drop-zone.drag-over { border-color: var(--par-primary); background: rgba(var(--par-primary-rgb), .07); }
.dark .drop-zone { border-color: #334155; }
.dark .drop-zone.drag-over { border-color: var(--par-primary); background: rgba(var(--par-primary-rgb), .15); }

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* Inputs nunca abaixo de 16px (evita zoom automático no iOS) */
input, select, textarea { font-size: 16px; }

/* ── Scrollbar discreta ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,120,.4); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,120,.6); }

/* ── Toast (card moderno + barra de progresso) ───────────────────────────── */
.toast {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  min-width: 290px;
  max-width: 400px;
  padding: 0.8rem 0.95rem 0.85rem;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 14px 34px -10px rgba(15,23,42,.35);
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--toast-accent, #2E6DA4);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  transform: translateX(22px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.toast.show { transform: translateX(0); opacity: 1; }
.dark .toast { background: #1e293b; color: #e2e8f0; border-color: #334155; }

.toast-icon { color: var(--toast-accent); font-size: 1.1rem; margin-top: .05rem; flex-shrink: 0; }
.toast-msg  { flex: 1 1 auto; line-height: 1.35; }
.toast-title { display: block; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.dark .toast-title { color: #f1f5f9; }
.toast-close {
  flex-shrink: 0; background: none; border: 0; cursor: pointer;
  color: #94a3b8; font-size: 1.15rem; line-height: 1; padding: 0 .1rem; transition: color .15s;
}
.toast-close:hover { color: #475569; }
.dark .toast-close:hover { color: #cbd5e1; }

.toast-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--toast-accent); opacity: .85;
  transform-origin: left;
  animation: toastbar linear forwards;
  animation-duration: var(--toast-dur, 5000ms);
}
.toast:hover .toast-bar { animation-play-state: paused; }
@keyframes toastbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast-info    { --toast-accent: #2E6DA4; }
.toast-success { --toast-accent: #16a34a; }
.toast-error   { --toast-accent: #dc2626; }
.toast-warning { --toast-accent: #d97706; }

/* ── Modal animação ──────────────────────────────────────────────────────── */
#confirm-card.show { transform: scale(1); opacity: 1; }

/* ── Skeleton loading ────────────────────────────────────────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(120,120,120,.18);
  border-radius: var(--par-radius);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }

/* ── Utilitário: esconder scrollbar (bottom-nav etc.) ────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Floating Action Button (mobile) ─────────────────────────────────────── */
.fab {
  position: fixed;
  right: 1rem;
  bottom: 5rem; /* acima do bottom-nav */
  z-index: 50;
  width: 3.5rem; height: 3.5rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--par-primary);
  color: #fff;
  box-shadow: 0 12px 24px -6px rgba(0,0,0,.4);
}

/* Esconde o FAB e bottom-nav no desktop */
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}

/* ── Sidebar recolhível (desktop ≥768px) ─────────────────────────────────── */
#sidebar { transition: width .2s ease, transform .2s ease; }
.sb-content { transition: padding-left .2s ease; }
@media (min-width: 768px) {
  .sb-content { padding-left: 16rem; }              /* expandida = 256px */
  html.sidebar-collapsed #sidebar { width: 4rem; }  /* recolhida = 64px */
  html.sidebar-collapsed .sb-content { padding-left: 4rem; }
  /* Esconde rótulos, info do usuário e o botão de seta quando recolhido */
  html.sidebar-collapsed #sidebar .sb-label,
  html.sidebar-collapsed #sidebar .sb-logo-text,
  html.sidebar-collapsed #sidebar .sb-user,
  html.sidebar-collapsed #sidebar .sb-group-label,
  html.sidebar-collapsed #sidebar .sb-collapse-btn { display: none; }
  /* Centraliza os ícones (e mantém o avatar redondo) quando recolhido */
  html.sidebar-collapsed #sidebar nav a,
  html.sidebar-collapsed #sidebar .sb-footer-btn,
  html.sidebar-collapsed #sidebar .sb-logo-row,
  html.sidebar-collapsed #sidebar .sb-user-row,
  html.sidebar-collapsed #sidebar .sb-user-footer {
    justify-content: center; padding-left: 0; padding-right: 0;
  }
}

/* ── Acordeão dos grupos do menu ─────────────────────────────────────────── */
.sb-group-body { overflow: hidden; max-height: 1200px; transition: max-height .25s ease; }
.sb-group-body.closed { max-height: 0; }
.sb-chv { transition: transform .2s ease; }
.sb-chv.closed { transform: rotate(-90deg); }
@media (min-width: 768px) {
  /* No modo recolhido, esconde os cabeçalhos e mantém os ícones sempre visíveis */
  html.sidebar-collapsed #sidebar .sb-group-hdr { display: none; }
  html.sidebar-collapsed #sidebar .sb-group-body { max-height: none !important; }
}

/* ── Design system: cards, inputs e switch (reutilizável em todas as telas) ── */
.set-input,
input.set-input, select.set-input, textarea.set-input {
  width: 100%; background: #F8FAFC; border: 1.5px solid #E2E8F0; color: #0F172A;
  border-radius: 12px; padding: 10px 14px; font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.set-input:focus,
input.set-input:focus, select.set-input:focus, textarea.set-input:focus {
  border-color: var(--par-primary);
  box-shadow: 0 0 0 3px rgba(var(--par-primary-rgb), .14);
}
.dark .set-input,
.dark input.set-input, .dark select.set-input, .dark textarea.set-input {
  background: #1E293B; border-color: #334155; color: #F1F5F9;
}
.set-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748B; margin-bottom: 6px; }
.dark .set-label { color: #94A3B8; }
.set-card { background: #fff; border-radius: 20px; border: 1px solid #E2E8F0; padding: 24px; }
.dark .set-card { background: #0F172A; border-color: #1E293B; }
.set-card-title { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.dark .set-card-title { color: #F1F5F9; }
.set-card-sub { font-size: 12px; color: #94A3B8; margin-bottom: 20px; }
.pb-switch { position: relative; display: inline-flex; flex-shrink: 0; width: 44px; height: 24px; cursor: pointer; }
.pb-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.pb-switch .track { position: absolute; inset: 0; background: #CBD5E1; border-radius: 9999px; transition: .2s; }
.dark .pb-switch .track { background: #334155; }
.pb-switch .dot { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 9999px; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pb-switch input:checked ~ .track { background: var(--par-primary); }
.pb-switch input:checked ~ .dot { transform: translateX(20px); }

/* ── Segmented tabs (padrão premium global): calha cinza + cards brancos "gordinhos" + ativo azul degradê ──
   Uso: <nav class="pb-segtabs"> <button class="pb-segtab active">…</button> <button class="pb-segtab">…</button> </nav>
   Alterna só a classe .active no botão. Serve p/ abas de config, KB, auditoria, usuários, etc. */
.pb-segtabs { display:flex; gap:6px; padding:6px; background:#F1F5F9; border:1px solid rgba(226,232,240,.7); border-radius:14px; }
.dark .pb-segtabs { background:rgba(30,41,59,.6); border-color:rgba(51,65,85,.5); }
.pb-segtab { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 16px; border:0; border-radius:11px;
             font-size:14px; font-weight:600; color:#475569; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.06);
             white-space:nowrap; cursor:pointer; transition:background .18s ease, color .18s ease, box-shadow .18s ease; }
.dark .pb-segtab { color:#94A3B8; background:#0F172A; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.pb-segtab i { opacity:.85; }
.pb-segtab:hover { color:#1E293B; box-shadow:0 3px 8px -2px rgba(15,23,42,.14); }
.dark .pb-segtab:hover { color:#F1F5F9; }
.pb-segtab.active { color:#fff; background:linear-gradient(135deg, var(--par-primary,#1E3A6E), var(--par-secondary,#2E6CB8)); box-shadow:0 4px 12px -3px rgba(30,58,110,.5); }
.pb-segtab.active i { opacity:1; }
/* variante que preenche a largura (abas do caso) — cada aba estica igual */
.pb-segtabs.pb-segtabs-fill .pb-segtab { flex:1 1 0; min-width:0; }
.no-scrollbar { scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }

/* ============================================================================
   REDESIGN v2 — Formulários centralizados + seções numeradas + sidebar
   ========================================================================= */
.form-page { max-width: 720px; margin: 0 auto; padding-bottom: 2rem; }
.form-page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.form-page-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(var(--par-primary-rgb), .12); color: var(--par-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.form-page-title { font-size: 1.35rem; font-weight: 700; color: #0F172A; line-height: 1.2; }
.dark .form-page-title { color: #F1F5F9; }
.form-page-sub { font-size: .8rem; color: #94A3B8; margin-top: 2px; }

.form-section { background: #fff; border: 1px solid #E2E8F0; border-radius: 20px; overflow: hidden; margin-bottom: 1rem; }
.dark .form-section { background: #0F172A; border-color: #1E293B; }
.form-section-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid #F1F5F9; background: #FAFBFC; }
.dark .form-section-header { border-bottom-color: #1E293B; background: rgba(255,255,255,.03); }
.form-section-num { width: 26px; height: 26px; border-radius: 9999px; background: var(--par-primary); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.form-section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #475569; }
.dark .form-section-label { color: #94A3B8; }
.form-section-body { padding: 1.25rem 1.5rem; }

/* Tooltip moderno — data-tip="texto". Renderiza SÓ no hover (não ocupa espaço → não cria scroll). */
[data-tip]{ position: relative; }
[data-tip]:hover::after{ content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: #0F172A; color: #fff; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; padding: 5px 8px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; z-index: 90; }
[data-tip]:hover::before{ content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0F172A; pointer-events: none; z-index: 90; }
.dark [data-tip]:hover::after{ background: #1E293B; }
.dark [data-tip]:hover::before{ border-top-color: #1E293B; }

/* Alternador de visualização: cards (padrão) ↔ lista. A grade ganha .vt-list para virar lista. */
.vt-toggle{ display:inline-flex; border:1px solid #E2E8F0; border-radius:.625rem; overflow:hidden; }
.dark .vt-toggle{ border-color:#334155; }
.vt-toggle button{ width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center; color:#94A3B8; background:transparent; transition:.15s; }
.vt-toggle button + button{ border-left:1px solid #E2E8F0; }
.dark .vt-toggle button + button{ border-left-color:#334155; }
.vt-toggle button.active{ background:var(--par-primary); color:#fff; }
.vt-grid.vt-list{ display:flex !important; flex-direction:column; gap:.5rem !important; }
.vt-grid.vt-list .vt-card{ flex-direction:row !important; align-items:center; gap:1rem; padding:.6rem .9rem !important; }
.vt-grid.vt-list .vt-media{ width:6.5rem !important; height:4rem !important; aspect-ratio:auto !important; padding-top:0 !important; border-radius:.6rem; overflow:hidden; flex-shrink:0; margin:0 !important; }
/* thumbnail preenche a caixa pequena da lista */
.vt-grid.vt-list .vt-media img{ position:static !important; width:100% !important; height:100% !important; object-fit:cover; }
/* encolhe o "play" grande do hover para caber na miniatura da lista */
.vt-grid.vt-list .vt-media > div > span{ width:2rem !important; height:2rem !important; font-size:.7rem !important; }
.vt-grid.vt-list .vt-body{ flex:1; min-width:0; padding:0 !important; }
.vt-grid.vt-list .vt-hide{ display:block !important; }   /* mostra o subtítulo na lista */
.vt-grid.vt-list .vt-body > .mb-1, .vt-grid.vt-list .vt-body > .mb-1\.5{ display:inline-block; margin-bottom:.15rem !important; }

/* Botões de ação por ícone (padrão global — evita ícones espremidos em listas/linhas) */
.row-actions { display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.icon-btn { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .625rem; color: #94A3B8; background: transparent; border: none; cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; }
.icon-btn:hover { background: #F1F5F9; color: #475569; }
.dark .icon-btn:hover { background: #1E293B; color: #CBD5E1; }
.icon-btn-primary:hover { color: var(--par-primary); background: rgba(124,58,237,.10); }
.icon-btn-danger:hover  { color: #EF4444; background: #FEF2F2; }
.dark .icon-btn-danger:hover { color: #F87171; background: rgba(127,29,29,.25); }

.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding-top: .5rem; margin-top: .25rem; }
.form-btn-primary { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.5rem; border-radius: 12px; background: var(--par-primary); color: #fff; font-size: .875rem; font-weight: 600; border: none; cursor: pointer; transition: opacity .15s, transform .1s; }
.form-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.form-btn-primary:active { opacity: 1; transform: none; }
.form-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.form-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.25rem; border-radius: 12px; background: transparent; color: #64748B; font-size: .875rem; font-weight: 500; border: 1.5px solid #E2E8F0; cursor: pointer; transition: background .15s, border-color .15s; text-decoration: none; }
.form-btn-ghost:hover { background: #F8FAFC; border-color: #CBD5E1; }
.dark .form-btn-ghost { color: #94A3B8; border-color: #334155; }
.dark .form-btn-ghost:hover { background: #1E293B; border-color: #475569; }
.form-btn-danger { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.25rem; border-radius: 12px; background: transparent; color: #DC2626; font-size: .875rem; font-weight: 500; border: 1.5px solid #FCA5A5; cursor: pointer; transition: background .15s; }
.form-btn-danger:hover { background: #FEF2F2; }
.dark .form-btn-danger { border-color: #7F1D1D; color: #F87171; }
.dark .form-btn-danger:hover { background: rgba(239,68,68,.08); }

.req { color: #EF4444; margin-left: 2px; font-size: .8em; }
.field-hint { font-size: .72rem; color: #94A3B8; margin-top: 4px; }

/* Tags/chips de seleção múltipla */
.field-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .6rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: rgba(var(--par-primary-rgb), .1); color: var(--par-primary); border: 1.5px solid rgba(var(--par-primary-rgb), .25); cursor: pointer; transition: background .15s, border-color .15s; user-select: none; }
.field-tag:hover { background: rgba(var(--par-primary-rgb), .18); border-color: rgba(var(--par-primary-rgb), .4); }
.field-tag.active { background: var(--par-primary); color: #fff; border-color: var(--par-primary); }
.field-tag-remove { width: 14px; height: 14px; border-radius: 9999px; background: rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-size: .6rem; }

/* ── Sidebar: scrollbar interna destacada ──────────────────────────────────── */
#sb-nav { scrollbar-width: thin; scrollbar-color: rgba(var(--par-primary-rgb), .35) transparent; }
#sb-nav::-webkit-scrollbar { width: 6px; }
#sb-nav::-webkit-scrollbar-thumb { background: rgba(var(--par-primary-rgb), .3); border-radius: 6px; }
#sb-nav::-webkit-scrollbar-thumb:hover { background: rgba(var(--par-primary-rgb), .55); }
/* Sidebar recolhida: usuário do rodapé centralizado, sem texto/ações */
html.sidebar-collapsed #sidebar .sb-user-footer { justify-content: center; }
html.sidebar-collapsed #sidebar .sb-user-footer .sb-label { display: none; }
html.sidebar-collapsed #sidebar .sb-search-wrap { display: none; }

/* ── Fundo de pontinhos (form pages) — claro, no tom do tema ───────────────── */
body.par-dots { background-image: radial-gradient(rgba(var(--par-primary-rgb), .10) 1.4px, transparent 1.4px); background-size: 22px 22px; background-attachment: fixed; }
body.par-dots.dark, .dark body.par-dots { background-image: radial-gradient(rgba(148,163,184,.08) 1.4px, transparent 1.4px); }