@import url("/static/css/checkbox.css?v=20260907");

/* ─────────────────────────────────────────────────────────────
   /home/jamjoy/site/static/css/app.css
   Padrões Jamjoy para novas telas (KISS)

   1) Layout de duas colunas (lista + detalhe)
      • Use SEMPRE o contêiner:  <div class="two-pane">…</div>
      • Painéis internos:
            <aside  class="panel pane-left">…</aside>
            <section class="panel pane-right">…</section>
      • Largura padrão da coluna esquerda vem de :root → --pane-left
        (valor único para o app). Se precisar customizar numa tela:
            .two-pane { --pane-left: 640px; }

   2) Sticky (lista fixa no desktop)
      • NÃO é padrão. Só ative quando fizer sentido:
            <div class="two-pane sticky-left">…</div>
      • Em <1200px o sticky é automaticamente desativado (empilha colunas).

   3) HTMX – boas práticas
      • Preferir hx-trigger padrão (click). Evite "revealed" para botões
        de navegação/fechar — isso causa auto-carregamento e “pisca”.
      • Para carregamento inicial do painel: use hx-trigger="load" no
        contêiner de destino (ex.: <aside id="list" hx-trigger="load">).
      • Em links hx-get, deixe href="#" para impedir navegação tradicional.
      • Mantenha hx-target apontando para o painel correto (#pane-right,
        #u-detail, #cp-detail, etc.).

   4) Botões (feedback e consistência)
      • Use .btn (primário) ou .btn-outline (secundário).
      • O CSS já implementa "efeito clique" e estado .htmx-request
        (aperta levemente, escurece discretamente).
      • Acessibilidade: .btn:focus-visible com outline.

   5) Responsividade
      • .two-pane empilha em <1200px (lista acima, detalhe abaixo).
      • Evite heights fixos. Quando sticky não for necessário, deixe
        o fluxo natural (sem overflow na left).

   6) Espaçamento e grids
      • Estruture formulários com .form-grid (duas colunas) e use
        .full para campos que devem ocupar a linha inteira.
      • Ações agrupadas usam .form-actions (gap consistente).
      • Tabelas: .table com cabeçalho colado e hover suave.

   7) Acessibilidade
      • Sempre rotule inputs com <label> visível.
      • Botões que executam algo via HTMX devem ter type="button"
        quando não enviarem <form>.
      • Links “falsos” com hx-get recebem href="#" e role="button"
        quando necessário.

   8) Nomeação e organização
      • Classes de layout:  .two-pane, .pane-left, .pane-right.
      • Painéis: sempre .panel com título <h3>.
      • Evite estilos inline; quando precisar exceção, crie utilitários
        (ex.: .mt-8, .mb-10) ou sobrescreva variáveis CSS.

   9) Cores, raios e sombras
      • Não usar cores “soltas”. Sempre via tokens:
        var(--jj-brand), var(--jj-brand2), var(--line), var(--ink).
      • Bordas e cantos respeitam --radius; sombra usa --shadow.

   10) Estrutura mínima de página (exemplo)
      <section>
        <h2>Título da área</h2>
        <p class="muted">Descrição curta.</p>

        <div class="two-pane">
          <aside  id="list"   class="panel pane-left"
                  hx-get="/m/area/mod/lista" hx-trigger="load"
                  hx-target="#list" hx-swap="outerHTML">
            <div class="muted">Carregando…</div>
          </aside>

          <section id="detail" class="panel pane-right">
            <div class="muted">Selecione um item à esquerda.</div>
          </section>
        </div>
      </section>

   11) Erros comuns a evitar
      • Não aplicar sticky direto em #u-list, #cp-list, etc.
        (deixe o sticky controlado por .two-pane.sticky-left).
      • Não usar hx-trigger="revealed" em botões de navegação.
      • Não definir larguras fixas nas colunas; sempre use variáveis.

   12) Variáveis úteis (podem ser sobrescritas por tela)
      :root {
        --pane-left: 610px; /* largura padrão da lista */

/* ─────────────────────────────────────────────────────────────
   Padrão Jamjoy — Notificações EFÊMERAS (visual)
   --------------------------------------------------------------
   Objetivo
     Padronizar a área de mensagens de status (banners OK/ERR/WARN)
     para evitar “pisca-pisca” e salto de layout. Atenção aos workers gunicord, podem duplicar ações
     gerando erros de interpretação gráfica.

   Regras gerais
     1) Os banners usam as classes já padronizadas:
          .ok   → sucesso (fundo verde claro, borda verde)
          .warn → aviso  (fundo amarelo claro)
          .err  → erro   (fundo vermelho claro)
        (As classes já existem abaixo e não precisam de alteração.)
     2) O slot de notificação deve ter altura mínima para evitar pulo visual.
        Propriedade recomendada:
          min-height: 28px;  
        Ex.: <div id="emb-status" style="min-height:28px">…</div>
     3) Não utilizar timeouts em JS para esconder a mensagem. A expiração
        e limpeza são realizadas no servidor após o TTL (padrão 5s).
     4) Animação/entrada é opcional. Caso desejar, aplique transições leves
        por utilitários (ex.: opacidade) sem bloquear interações.
     5) Acessibilidade: quando possível, incluir `role="status"` e
        `aria-live="polite"` no container do banner.

   Estrutura recomendada (HTML + HTMX)
     <div id="feature-status"
          hx-get="/m/area/mod/status"
          hx-trigger="load delay:300ms, every 2s"
          hx-target="#feature-status" hx-swap="innerHTML"
          style="min-height:28px">
       <div class="small muted">Aguardando…</div>
     </div>

   Resultado esperado
     • Durante a operação: barra de progresso ou mensagem “processando…”
     • Conclusão (≤ 5s): banner .ok ou .err visível
     • Após 5s: volta automática ao estado neutro (sem banners residuais)
   -------------------------------------------------------------- */
        
:root{
  /* Cores base */
  --ink:#111827;
  --bg:#f8fafc;
  --line:#e5e7eb;

  /* Paleta Jamjoy (use sempre estas) */
  --jj-brand:#8B1A76;   /* roxo Jamjoy */
  --jj-brand2:#C1228E;  /* magenta de apoio */

  /* Tokens globais */
  --radius:10px;
  --shadow:0 6px 14px rgba(139,26,118,.18);

  /* Largura padrão global da coluna esquerda (lista) */
  --pane-left: 610px;  /* valor único para todo o app */
}

*{box-sizing:border-box}

/* Botões (padrão Jamjoy) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border:0;border-radius:var(--radius);
  background:linear-gradient(90deg, var(--jj-brand), var(--jj-brand2));
  color:#fff;font-weight:600;cursor:pointer;box-shadow:var(--shadow);
  -webkit-appearance:none;appearance:none; /* evita botão azul padrão no Safari */
  transition:transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(.98)}
.btn:active{ transform:translateY(1px) scale(.99); box-shadow:0 3px 10px rgba(139,26,118,.16); filter:brightness(.96) }
.btn:focus-visible{ outline:2px solid var(--jj-brand2); outline-offset:2px }
.btn:disabled{opacity:.6;cursor:not-allowed}
a.btn{color:#fff;text-decoration:none}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:var(--radius);
  background:transparent;color:var(--jj-brand);border:1px solid var(--jj-brand);
  cursor:pointer;transition:transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.btn-outline:hover{background:rgba(139,26,118,.06)}
.btn-outline:active{ transform:translateY(1px) scale(.99) }
.btn-outline:focus-visible{ outline:2px solid var(--jj-brand); outline-offset:2px }
.btn-outline:disabled{opacity:.6;cursor:not-allowed}

/* ===== Feedback HTMX (requisição em andamento) — só efeito de clique ===== */
/* Escopo CORRETO: aplica o efeito apenas no elemento que está enviando a requisição,
   não em todos os botões descendentes de um contêiner em estado .htmx-request  */
.btn.htmx-request,
.btn-outline.htmx-request,
.badge.htmx-request{
  transform:translateY(1px) scale(.98);
  filter:brightness(.95);
  box-shadow:0 2px 8px rgba(139,26,118,.14);
}

/* Clique otimista (tap) — usado em todos os botões do card (IA, Resp., Assumir, Finalizar) */
.k-act.tap{
  box-shadow:0 0 0 0 rgba(139,26,118,.28), 0 2px 8px rgba(139,26,118,.18);
  animation: jjTap .22s ease;
}
@keyframes jjTap{
  0%  { box-shadow:0 0 0 0 rgba(139,26,118,.30), 0 3px 10px rgba(139,26,118,.22); transform:translateY(0)   scale(1);    }
  60% { box-shadow:0 0 0 6px rgba(139,26,118,0),  0 2px 8px  rgba(139,26,118,.18); transform:translateY(1px) scale(.985); }
  100%{ box-shadow:0 0 0 6px rgba(139,26,118,0),  0 2px 8px  rgba(139,26,118,.10); transform:translateY(0)   scale(1);    }
}

/* ===== KISS: “clique otimista” roxo para botões compactos dos cards (consolidado) ===== */
.k-act{
  transition: filter .12s ease, transform .06s ease, box-shadow .12s ease, background .18s ease;
}

/* pulso curto quando o botão é clicado (classe aplicada via onclick) */
.k-act.tap{
  background: rgba(139,26,118,.08);
  box-shadow: 0 0 0 3px rgba(139,26,118,.18) inset;
  animation: jjTapPulse .32s ease-out;
}

/* aplica o “aperto” apenas no PRÓPRIO botão em request (sem herdar do contêiner do board) */
.k-act.htmx-request{
  filter:brightness(.96);
  transform:translateY(1px) scale(.99);
  box-shadow:0 2px 8px rgba(139,26,118,.14);
}

/* keyframes jjTapPulse já aparece acima no arquivo; manter uma única definição */


/* Base */
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff}
.topbar .user{opacity:.7}

/* Layout com sidebar */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 54px)}
.sidebar{border-right:1px solid var(--line);padding:12px;background:#fff}
.sidebar .group{margin-bottom:14px}
.group-title{font-weight:600;margin:6px 0 6px 2px}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{margin:6px 0}
.sidebar a{display:block;padding:6px 8px;border-radius:8px}
.sidebar a:hover{background:#f6eaf4}

/* Conteúdo principal */
.content{padding:16px}

/* Login – centraliza o bloco (logo + card + rodapé) no viewport */
.login{
  min-height:100svh;         /* usa viewport “small” para evitar barras do navegador */
  display:grid;
  place-items:center;        /* centraliza vertical e horizontal */
  padding:0;                 /* sem interferência de padding no body */
  gap:0;
}

.card{display:grid;gap:12px;min-width:280px;background:#fff;padding:24px;border:1px solid var(--line);border-radius:12px}
.card h1{margin:0 0 8px 0;font-size:20px}
label{display:grid;gap:6px;font-size:14px}
input:not([type="checkbox"]):not([type="radio"]){padding:10px 12px;border:1px solid var(--line);border-radius:8px}

/* Botão nativo – reset leve (o visual vem de .btn) */
button{
  padding:10px 12px;border:0;border-radius:var(--radius);cursor:pointer;
  -webkit-appearance:none;appearance:none; /* remove skin nativa em macOS/iOS */
}
button:hover{filter:brightness(.98)}

/* Alerts */
.error{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;padding:8px 10px;border-radius:8px}

/* Kanban stub */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kanban .col{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
.kanban .col h3{margin:0 0 8px 0}
.card-k{background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px}
.card-k .k-text{margin-top:6px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.25em;line-height:1.25em}

/* ===== Pulso de prioridade dos cards (padronizado; usar APENAS aqui) =====
   Mapeamento:
     .pulse-green  → OK / ≤ 60s            (borda verde)
     .pulse-mid    → SOON / até 5min       (borda amarela)
     .pulse-high   → LATE / > 5min         (borda vermelha)
   Observação:
     Não duplique este bloco em outras folhas/HTML; o UI deve apenas aplicar a classe. */
@keyframes jjPulseRed   { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}   70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}   100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
@keyframes jjPulseAmber { 0%{box-shadow:0 0 0 0 rgba(245,158,11,.35)}  70%{box-shadow:0 0 0 9px rgba(245,158,11,0)}  100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }
@keyframes jjPulseGreen { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.32)}  70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }

.pulse-high  { border-color:#ef4444;  animation: jjPulseRed   1.2s infinite;  }
.pulse-mid   { border-color:#f59e0b;  animation: jjPulseAmber 1.2s infinite;  }
.pulse-green { border-color:#10b981;  animation: jjPulseGreen 1.2s infinite;  }

/* Respiro entre seções em painéis */
.panel section + section{margin-top:16px}

/* ===== Usuários – listas, formulários e grades ===== */
.muted{color:#6b7280}
.ok{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0;padding:8px 10px;border-radius:8px;margin:8px 0}
.warn{color:#92400e;background:#fffbeb;border:1px solid #fde68a;padding:8px 10px;border-radius:8px;margin:8px 0}
.err{color:#991b1b;background:#fee2e2;border:1px solid #fecaca;padding:8px 10px;border-radius:8px;margin:8px 0}

/* ===== Lookup padrão Jamjoy (busca + seleção de registro) ===== */
.lookup{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.lookup-current{
  font-size:13px;
  color:#6b7280;
  margin-top:2px;
}

.lookup-results{
  margin-top:4px;
  border:1px solid var(--line);
  border-radius:8px;
  max-height:220px;
  overflow:auto;
  background:#fff;
}

.lookup-results.empty{
  border:none;
  max-height:0;
  padding:0;
}

.lookup-item{
  border-bottom:1px solid var(--line);
}

.lookup-item:last-child{
  border-bottom:none;
}

.lookup-item button{
  width:100%;
  justify-content:flex-start;
  padding:6px 8px;
  font-size:14px;
  border-radius:0;
  border:0;
  background:transparent;
}

.lookup-item button:hover{
  background:#f9fafb;
}

/* ===== Layout padrão Jamjoy – duas colunas (lista à esquerda + detalhe à direita) ===== */
.two-pane{
  display:grid;
  grid-template-columns: var(--pane-left) 1fr; /* usa a largura global */
  gap:16px;
}

/* Responsivo: empilha sem sobreposição */
@media (max-width: 1200px){
  .two-pane{ grid-template-columns:1fr; }
  .two-pane .pane-left{ order:1; }
  .two-pane .pane-right{ order:2; }
}

/* Sem sticky por padrão (evita cobre/detale) */
.two-pane .pane-left,
.two-pane .pane-right{
  min-width:0;
  overflow:visible;
}

/* (Opcional) sticky-left: use APENAS quando quiser sticky explicitamente */
.two-pane.sticky-left .pane-left{
  position:sticky;
  top:12px;
  height:calc(100vh - 120px);
  overflow:auto;
}
.two-pane.sticky-left .pane-right{
  min-height:calc(100vh - 120px);
}
@media (max-width:1200px){
  .two-pane.sticky-left .pane-left{ position:static; height:auto; overflow:visible; }
  .two-pane.sticky-left .pane-right{ min-height:auto; }
}

/* (Opcional) sticky-right: painel de detalhe fixo à direita enquanto a lista rola */
.two-pane.sticky-right .pane-right{
  position:sticky;
  top:12px;
  height:calc(100vh - 120px);
  overflow:auto;
}
@media (max-width:1200px){
  .two-pane.sticky-right .pane-right{
    position:static;
    height:auto;
    overflow:visible;
  }
}

.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.panel h3{margin:0 0 10px 0}

/* Neutraliza regras legadas: o comportamento passa a ser controlado por .two-pane */
#u-list, #u-detail{
  position:static;
  height:auto;
  min-height:auto;
  overflow:visible;
}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px 6px;font-size:14px;text-align:left}
.table th{font-weight:600;color:#374151;background:#f9fafb}
.table tr:hover td{background:#f9fafb}

.badges{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px}
.badge-admin{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.badge-colab{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.badge-cliente{background:#ecfeff;border-color:#a5f3fc;color:#164e63}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid .full{grid-column:1 / -1}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:8px}
input[type="text"], input[type="email"], input[type="password"], select{padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.label{font-size:13px;color:#374151}

.grid-areas{width:100%;border-collapse:collapse;margin-top:6px}
.grid-areas th,.grid-areas td{border-bottom:1px solid var(--line);padding:8px 6px;font-size:14px;text-align:left}
.grid-areas th{background:#f9fafb}
.grid-areas .right{text-align:center}

.pill{display:inline-block;padding:3px 8px;border-radius:999px;background:#f3f4f6;border:1px solid var(--line);font-size:12px}

/* ===== Pop-up padrão Jamjoy (modais) ===== */
.pop-wrap{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  display:flex;
  align-items:center;          /* centraliza verticalmente */
  justify-content:center;      /* centraliza horizontalmente */
  padding:16px;                /* respiro nas bordas */
}

.pop-backdrop{
  position:absolute;
  inset:0;
  background:rgba(17,17,17,.18);
  backdrop-filter:blur(1px);
  pointer-events:auto;
}

/* Card base: centrado; largura padrão mais estreita.
   Modais que precisarem ser mais largos (como o da Checagem de Links)
   podem sobrescrever max-width via style inline (como você já fez). */
.pop-card{
  position:relative;
  max-width:380px;
  width:100%;
  margin:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:0 20px 40px rgba(16,11,33,.12);
  pointer-events:auto;
}

.pop-title{margin:0 0 8px 0;font-weight:700;color:var(--jj-brand)}
.pop-grid{display:grid;gap:8px}
.pop-actions{display:flex;gap:8px;align-items:center;margin-top:6px}

/* ===== Menu do usuário (dropdown legado – mantido se for reutilizar) ===== */
.usernav{display:flex;align-items:center;gap:8px}
.usernav .user{position:relative}
.usernav .user a{text-decoration:none;color:inherit}
.user-menu-panel{
  position:absolute;right:0;top:26px;z-index:20;min-width:220px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.08)
}
.user-menu-panel a{display:block;padding:8px;border-radius:8px}
.user-menu-panel a:hover{background:#f6eaf4}
.user-menu-form{display:grid;gap:8px}
.user-menu-form label{display:grid;gap:6px;font-size:14px}
.user-menu-actions{display:flex;gap:8px;align-items:center;margin-top:6px}

/* Logos (tamanhos consistentes) */
.logo-top{height:28px;width:auto;display:block}   /* topo do app */
.logo-login{height:48px;width:auto;display:block} /* login acima do card */
.sidebrand{display:flex;align-items:center;justify-content:center;padding:10px}
.sidebrand img{height:36px;width:auto;display:block}

/* ===== Inteligência Artificial – grid e cartões ===== */
.cards-2x2{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:14px;
  margin-bottom:14px;  /* ← respiro externo abaixo da grade */
}
@media (max-width: 980px){
  .cards-2x2{ grid-template-columns:1fr }
}

.ai-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.ai-head{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.ai-head .title{font-weight:700}
.ai-sub{font-size:13px;color:#6b7280;margin:-2px 0 8px}
.ai-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.ai-row .grow{flex:1}
.ai-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.status-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid #e5e7eb}
.st-ok{background:#10b981}
.st-wait{background:#f59e0b}
.st-bad{background:#ef4444}
.field{display:flex;flex-direction:column;gap:4px;min-width:160px}
.field input{width:100%}
.small{font-size:12px;color:#6b7280}

/* ===== Switch (toggle) para cartões compactos ===== */
.switch{position:relative;width:52px;height:28px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{
  position:absolute;inset:0;border-radius:28px;
  background:#e5e7eb;transition:background .18s ease;
  border:1px solid #e5e7eb;
}
.switch .sl::before{
  content:"";position:absolute;left:3px;bottom:3px;width:22px;height:22px;
  background:#fff;border-radius:50%;transition:transform .18s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.switch input:checked + .sl{background:linear-gradient(90deg,var(--jj-brand),var(--jj-brand2));border-color:transparent}
.switch input:checked + .sl::before{transform:translateX(24px)}

/* Indicador simples de busca na Checagem de Links */
#cl-list-status.htmx-request::before{
  content:"Procurando…";
}

/* ===== Indicador HTMX (padrão) =====
   Elementos com class="htmx-indicator" ficam ocultos.
   Quando o HTMX request está em andamento, o próprio HTMX aplica .htmx-request no indicador. */
.htmx-indicator{ display:none; }
.htmx-indicator.htmx-request{ display:flex; }

/* Spinner global (padrão Jamjoy) */
.spinner{
  width:14px;
  height:14px;
  border:2px solid var(--line);
  border-top-color: var(--jj-brand);
  border-radius:50%;
  display:inline-block;
  animation: jjSpin .8s linear infinite;
}
@keyframes jjSpin{
  to{ transform: rotate(360deg); }
}

/* Blocos padronizados de carregamento e orientação operacional */
.jj-loading{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#6b7280;
  font-size:13px;
  min-height:28px;
}
.jj-loading .spinner{
  flex:0 0 auto;
}
.jj-page-note{
  margin:10px 0 12px 0;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fafafa;
}
.jj-page-note strong{
  display:block;
  color:#111827;
  margin-bottom:3px;
}
.jj-search-hint{
  margin-top:4px;
  color:#6b7280;
  font-size:12px;
  line-height:1.35;
}

/* ===== Programa de Parcerias (Relatórios/Financeiro) ===== */
#pp-reports-page .panel,
.gc-programa-parceria .panel{
  border-color:#e8dbe7;
  box-shadow:0 4px 14px rgba(139,26,118,.06);
}

#pp-reports-page .btn,
.gc-programa-parceria .btn{
  min-height:40px;
  padding:10px 16px;
  border-radius:var(--radius);
  align-items:center;
  gap:8px;
}

#pp-reports-page .btn-outline,
.gc-programa-parceria .btn-outline{
  min-height:40px;
  padding:10px 16px;
  border-radius:var(--radius);
  border-color:#b24593;
  color:#8B1A76;
  background:#fff;
  align-items:center;
  gap:8px;
}

#pp-reports-page .btn-outline:hover,
.gc-programa-parceria .btn-outline:hover{
  background:#fdf3fb;
}

#pp-reports-page .table thead th,
.gc-programa-parceria .table thead th{
  background:#f8f3f8;
  color:#3b2240;
}

#pp-reports-page .table tbody tr:nth-child(even) td{
  background:#fcfbfd;
}

#pp-rpt-kpis{
  display:grid;
  grid-template-columns:repeat(6, minmax(150px, 1fr));
  gap:10px;
}

@media (max-width:1400px){
  #pp-rpt-kpis{ grid-template-columns:repeat(3, minmax(170px, 1fr)); }
}
@media (max-width:840px){
  #pp-rpt-kpis{ grid-template-columns:repeat(2, minmax(140px, 1fr)); }
}

.pp-kpi{
  border:1px solid #ead7e7;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.pp-kpi h4{
  margin:0 0 6px 0;
  font-size:12px;
  font-weight:600;
  color:#5f4a62;
}
.pp-kpi strong{
  font-size:20px;
  line-height:1.1;
  color:#1f2230;
}

.pp-kpi.kpi-links{ background:#f8f4fb; border-color:#dfcaef; }
.pp-kpi.kpi-paid{ background:#eefaf4; border-color:#bde7cf; }
.pp-kpi.kpi-conv{ background:#edf5ff; border-color:#c9ddff; }
.pp-kpi.kpi-fat{ background:#fff5ed; border-color:#ffdcbc; }
.pp-kpi.kpi-ticket{ background:#f4f9ff; border-color:#d7e8ff; }
.pp-kpi.kpi-parc{ background:#f5f5ff; border-color:#dfdcff; }

/* Navegação mensal do financeiro (Programa de Parcerias) */
.gc-programa-parceria .pp-btn-nav{
  border-color:#c97ab0;
  color:#7d1a69;
  background:#fff;
  font-weight:600;
  letter-spacing:.1px;
}
.gc-programa-parceria .pp-btn-nav:hover{
  background:#fdf3fb;
  border-color:#b85b9d;
}
.gc-programa-parceria .pp-btn-main{
  min-width:108px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(139,26,118,.22);
}

.gc-programa-parceria .pp-fin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.gc-programa-parceria .pp-fin-actions form{
  margin:0;
}
.pp-review-modal{
  max-width:min(1120px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
}
.pp-review-table{
  margin-top:10px;
  overflow:auto;
}
.pp-review-table table{
  min-width:940px;
}
.pp-commission-cancelled td{
  color:#7f1d1d;
  background:#fff7f7;
}
.pp-commission-cancelled td:nth-child(6),
.pp-commission-cancelled td:nth-child(7){
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:#be123c;
}

.gc-programa-parceria .pp-indicators{
  gap:10px;
  align-items:center;
}

.gc-programa-parceria .pp-indicators .btn-outline{
  min-height:38px;
}

.gc-programa-parceria .pp-stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:#f7f7fa;
  border:1px solid #e2dfeb;
  color:#3f3750;
}
.gc-programa-parceria .pp-stat strong{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1px;
}
.gc-programa-parceria .pp-stat em{
  font-style:normal;
  font-weight:700;
  font-size:12px;
  background:#fff;
  border:1px solid #ddd7ea;
  color:#2b223a;
  padding:2px 8px;
  border-radius:999px;
  min-width:26px;
  text-align:center;
}

.gc-programa-parceria .pp-stat-pending,
.gc-programa-parceria .pp-status-pending{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}
.gc-programa-parceria .pp-stat-pending em{
  border-color:#fdba74;
  color:#9a3412;
}

.gc-programa-parceria .pp-stat-approved,
.gc-programa-parceria .pp-status-approved{
  background:#ecfdf3;
  border-color:#bbf7d0;
  color:#166534;
}
.gc-programa-parceria .pp-stat-approved em{
  border-color:#86efac;
  color:#166534;
}

.gc-programa-parceria .pp-stat-rejected,
.gc-programa-parceria .pp-status-rejected{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}
.gc-programa-parceria .pp-stat-rejected em{
  border-color:#fca5a5;
  color:#991b1b;
}

.gc-programa-parceria .pp-stat-total{
  background:#f5f3ff;
  border-color:#ddd6fe;
  color:#5b21b6;
}
.gc-programa-parceria .pp-stat-total em{
  border-color:#c4b5fd;
  color:#5b21b6;
}

/* Paginação sutil (padrão reutilizável da plataforma) */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.pager-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border:1px solid #e6dfec;
  border-radius:999px;
  background:#faf8fc;
  color:#5f4a62;
  font-size:12px;
}

.pager-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.pager-btn{
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
}

.pager-btn[disabled],
.pager-btn.disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}

/* ===== Escala operacional compacta da plataforma (2026-07-03) =====
   Objetivo: reduzir desperdicio de espaco sem remover informacoes das telas. */
:root{
  --radius:8px;
  --shadow:0 3px 10px rgba(139,26,118,.12);
  --pane-left:560px;
  --jj-control-h:34px;
}

body{
  font-size:14px;
  line-height:1.35;
}

body .topbar{
  min-height:46px;
  padding:8px 14px;
}
body .logo-top{
  height:28px;
}
body .usernav{
  gap:6px;
  font-size:13px;
}

body .layout{
  grid-template-columns:244px 1fr;
  min-height:calc(100vh - 46px);
}
body .sidebar{
  padding:10px 10px;
}
body .sidebar .group{
  margin-bottom:10px;
}
body .group-title{
  margin:5px 0 4px 2px;
  font-size:13px;
  line-height:1.2;
}
body .sidebar li{
  margin:2px 0;
}
body .sidebar a{
  padding:5px 7px;
  border-radius:7px;
  line-height:1.25;
}
body .content{
  padding:12px;
}

h1,h2,h3{
  line-height:1.2;
}
h2{
  margin:0 0 8px;
  font-size:21px;
}
h3{
  font-size:16px;
}
p{
  margin:6px 0;
}
.muted{
  line-height:1.35;
}

.card{
  gap:10px;
  padding:16px;
  border-radius:8px;
}
.panel{
  padding:10px;
  border-radius:8px;
}
.panel h3{
  margin-bottom:8px;
}
.panel section + section{
  margin-top:10px;
}
.two-pane{
  gap:10px;
}
.two-pane.sticky-left .pane-left,
.two-pane.sticky-right .pane-right{
  top:10px;
  height:calc(100vh - 96px);
}

label{
  gap:4px;
  font-size:13px;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"]{
  min-height:var(--jj-control-h);
  padding:7px 10px;
  border-radius:7px;
  font-size:13px;
}
button,
.btn,
.btn-outline{
  min-height:var(--jj-control-h);
  padding:7px 12px;
  border-radius:8px;
  font-size:13px;
  line-height:1.2;
}
.btn,
.btn-outline{
  gap:6px;
}
.btn-xs,
.pager-btn{
  min-height:30px;
  padding:5px 9px;
  font-size:12px;
}

.form-grid{
  gap:8px;
}
.form-actions{
  gap:6px;
  margin-top:6px;
}
.lookup-results{
  max-height:190px;
}

.table th,
.table td,
.grid-areas th,
.grid-areas td{
  padding:6px 6px;
  font-size:13px;
  vertical-align:middle;
}
.badges{
  gap:5px;
  margin:4px 0;
}
.badge,
.pill{
  padding:2px 7px;
  font-size:11px;
}
.ok,
.warn,
.err,
.error{
  padding:7px 9px;
  margin:6px 0;
  border-radius:7px;
}

/* Modais: mantem a tela centrada, mas permite conteudo largo respirar. */
.pop-wrap{
  align-items:center;
  overflow:auto;
  padding:18px;
}
.pop-card{
  padding:10px;
  border-radius:8px;
  max-width:520px;
}
.pop-title{
  margin-bottom:6px;
}
.pop-actions{
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}

/* Programa de parcerias: mesma escala dos botoes principais e modal revisavel. */
#pp-reports-page .btn,
.gc-programa-parceria .btn,
#pp-reports-page .btn-outline,
.gc-programa-parceria .btn-outline{
  min-height:var(--jj-control-h);
  padding:7px 12px;
  border-radius:8px;
  gap:6px;
}
.gc-programa-parceria .pp-btn-main{
  min-width:96px;
  box-shadow:0 4px 12px rgba(139,26,118,.16);
}
.gc-programa-parceria .pp-indicators{
  gap:7px;
}
.gc-programa-parceria .pp-indicators .btn-outline{
  min-height:var(--jj-control-h);
}
.gc-programa-parceria .pp-stat{
  gap:6px;
  padding:4px 9px;
}
.gc-programa-parceria .pp-stat strong,
.gc-programa-parceria .pp-stat em{
  font-size:11px;
}
.gc-programa-parceria .pp-stat em{
  min-width:22px;
  padding:1px 6px;
}
.pp-kpi{
  padding:8px 10px;
  border-radius:8px;
}
.pp-kpi h4{
  margin-bottom:4px;
}
.pp-kpi strong{
  font-size:18px;
}
#pp-rpt-kpis{
  gap:8px;
}

.pp-review-modal{
  width:min(1120px, calc(100vw - 40px));
  max-width:min(1120px, calc(100vw - 40px));
  max-height:calc(100vh - 40px);
  overflow:hidden;
}
.pp-review-modal .badges{
  margin-top:8px;
}
.pp-review-table{
  max-width:100%;
  overflow-x:auto;
  overflow-y:auto;
  max-height:calc(100vh - 210px);
}
.pp-review-table table{
  min-width:980px;
}
.pp-review-modal .table th,
.pp-review-modal .table td{
  white-space:normal;
}
.pp-review-modal .table td:last-child{
  width:240px;
}
.pp-review-modal form{
  display:grid;
  grid-template-columns:minmax(150px, 1fr) auto;
  gap:6px;
  min-width:0;
}
.pp-review-modal form input[type="text"]{
  width:100%;
}

/* Mensageria e Atendimento ao Cliente: compacta sem ocultar dados dos cards. */
.fc-mensageria{
  padding:4px 0;
}
.fc-mensageria .muted{
  margin:3px 0 8px;
}
.fc-mensageria .k-filters{
  gap:10px;
  margin-bottom:8px;
}
.fc-mensageria .k-filter,
.fc-mensageria .k-user{
  gap:6px;
}
.fc-mensageria .k-user select#k-colab{
  min-width:240px;
}
.fc-mensageria .k-ddd-filter input#k-ddd{
  width:62px;
}
.fc-mensageria .k-chip{
  padding:3px 7px;
}
.fc-mensageria .kanban{
  gap:10px;
}
.fc-mensageria .col{
  padding:9px;
  border-radius:9px;
}
.fc-mensageria .k-col-head{
  margin-bottom:6px;
}
.fc-mensageria .k-col-head h3{
  font-size:14px;
}
.fc-mensageria .k-list{
  gap:6px;
}
.fc-mensageria .card-k{
  padding:8px 8px 8px 10px;
  border-radius:9px;
  min-height:112px;
  max-height:180px;
}
.fc-mensageria .card-k::before{
  width:5px;
  border-top-left-radius:9px;
  border-bottom-left-radius:9px;
}
.fc-mensageria .k-head{
  margin-bottom:5px;
}
.fc-mensageria .k-title{
  font-size:13px;
}
.fc-mensageria .k-chips{
  gap:4px;
}
.fc-mensageria .k-text{
  margin:5px 0;
  font-size:13px;
  line-height:1.3;
}
.fc-mensageria .k-actions{
  gap:5px;
  margin-top:6px;
}
.fc-mensageria .k-act{
  padding:5px 8px;
  border-radius:8px;
  font-size:12px;
}

@media (max-width:1200px){
  body .layout{
    grid-template-columns:220px 1fr;
  }
  body .content{
    padding:10px;
  }
}

@media (max-width:900px){
  body .layout{
    grid-template-columns:1fr;
  }
  body .sidebar{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  body .content{
    padding:10px;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
  .pp-review-modal{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
  }
  .pp-review-modal form{
    grid-template-columns:1fr;
  }
}

/* Relatórios do Programa de Parcerias */
#pp-reports-page canvas{
  display:block;
  width:100%;
  max-width:100%;
}
#pp-reports-page .pp-rpt-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
#pp-reports-page .pp-rpt-card-head h3{
  margin:0;
}

/* Vendas por Autoatendimento — indicação */
.vil-indicacao-page{display:grid;gap:12px}
.vil-indicacao-page .panel{min-width:0}
.vil-indicacao-filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.vil-indicacao-filters label{display:grid;gap:4px;min-width:150px;font-size:12px;font-weight:600;color:#4b5563}
.vil-indicacao-filters input,.vil-indicacao-filters select{min-height:38px}
.vil-indicacao-kpis{margin-top:10px}
.vil-indicacao-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:300px}
.vil-inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.vil-inline-form input[type="text"],.vil-inline-form input:not([type]){min-height:32px;padding:6px 8px;font-size:12px;min-width:160px}
.vil-inline-form input[type="file"]{max-width:190px;font-size:11px}
.vil-report-kpis{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:8px;margin-top:12px}
.vil-report-kpis article{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fcf8fb}
.vil-report-kpis span{font-size:11px;color:#6b7280}
.vil-report-kpis strong{font-size:17px;color:var(--ink)}
.vil-commission-filter-panel{margin:0}
.vil-commission-filter-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.vil-commission-filter-row label{display:grid;gap:4px;min-width:130px;font-size:12px;font-weight:600;color:#4b5563}
.vil-commission-filter-row select{min-height:38px}
.vil-commission-rule{margin-top:8px}
.vil-commission-empty{padding:18px 6px!important}
.vil-commission-empty strong,.vil-commission-empty span{display:block}
.vil-commission-empty span{margin-top:4px;color:#6b7280}
.vil-commission-review-modal{max-width:900px}
.vil-commission-review-modal .badges{margin:10px 0}
.vil-review-name,.vil-review-pay{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin:12px 0}
.vil-review-name label,.vil-review-pay label{display:grid;gap:4px;min-width:220px;font-size:12px;font-weight:600;color:#4b5563}
.vil-review-name input,.vil-review-pay input{min-height:36px}
.vil-review-cancel{display:grid;gap:6px;min-width:210px}
.vil-review-cancel input{min-height:32px;font-size:12px}
.vil-review-table{max-height:340px}

/* Vendas por Autoatendimento — Relatórios */
#vil-reports-page .panel{border-color:#e8dbe7;box-shadow:0 4px 14px rgba(139,26,118,.06)}
#vil-reports-page .btn,#vil-reports-page .btn-outline{min-height:40px;padding:10px 16px;border-radius:var(--radius);align-items:center;gap:8px}
#vil-reports-page .btn-outline{border-color:#b24593;color:#8B1A76;background:#fff}
#vil-reports-page .btn-outline:hover{background:#fdf3fb}
#vil-reports-page .table thead th{background:#f8f3f8;color:#3b2240}
#vil-reports-page .table tbody tr:nth-child(even) td{background:#fcfbfd}
#vil-reports-page canvas{display:block;width:100%;max-width:100%}
.vil-report-heading{justify-content:space-between;margin-bottom:0}
.vil-report-heading h2{margin:0}
.vil-report-heading p{margin:4px 0 0}
.vil-report-filter-panel{margin:0}
.vil-report-filter-panel .vil-commission-filter-row label{min-width:180px}
.vil-rpt-wide{overflow:hidden}
.vil-rpt-wide .table-wrap{max-height:280px;overflow:auto}
.vil-rpt-cross-table{max-height:320px;overflow:auto}
#vil-reports-page .pp-rpt-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#vil-reports-page .pp-rpt-card-head h3,#vil-reports-page h3{margin-top:0}
@media (max-width:900px){
  .vil-indicacao-actions{min-width:260px}
  .vil-report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vil-commission-filter-row{align-items:stretch}
  .vil-commission-filter-row label{flex:1 1 140px}
  .vil-report-heading{align-items:flex-start}
  .vil-report-filter-panel .vil-commission-filter-row label{min-width:0}
}
#pp-reports-page .pp-rpt-wide{
  overflow:hidden;
}
#pp-reports-page .table-wrap{
  max-height:360px;
  overflow:auto;
}
#pp-reports-page .pp-rpt-wide .table-wrap{
  max-height:280px;
}
.pp-rpt-highlights{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:8px;
  margin-top:10px;
}
.pp-rpt-filterbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:6px 0 10px;
  padding:7px 10px;
  border:1px solid #cfe7e2;
  border-radius:8px;
  background:#f0fdfa;
  color:#115e59;
}
.pp-rpt-filterbar:empty{
  display:none;
}
.pp-rpt-filterbar strong{
  color:#0f3f3a;
}
.pp-rpt-filterbar .btn-outline{
  padding:5px 9px;
  background:#fff;
}
.pp-rpt-highlights article{
  min-width:0;
  border:1px solid #dde5ee;
  border-radius:8px;
  padding:8px 10px;
  background:#f8fafc;
}
.pp-rpt-highlights span{
  display:block;
  font-size:11px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
}
.pp-rpt-highlights strong{
  display:block;
  margin-top:3px;
  font-size:14px;
  color:#172033;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pp-rpt-highlights em{
  display:block;
  margin-top:2px;
  font-size:12px;
  font-style:normal;
  font-weight:700;
  color:#0f766e;
}
.pp-kpi.kpi-loss{
  background:#fff1f2;
  border-color:#fecdd3;
}
.pp-kpi.kpi-day{
  background:#ecfeff;
  border-color:#a5f3fc;
}

@media (max-width:1100px){
  .pp-rpt-highlights{
    grid-template-columns:repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width:640px){
  #pp-reports-page .pp-rpt-card-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .pp-rpt-filterbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .pp-rpt-highlights{
    grid-template-columns:1fr;
  }
}

/* Padronização transversal de telas legadas */
.page-head,
.jj-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.page-title,
.jj-headline{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.page-title h2,
.jj-headline h2{
  margin:0;
}
.toolbar,
.filter-row,
.jj-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.toolbar input[type="text"],
.filter-row input[type="text"],
.jj-toolbar input[type="text"]{
  flex:1 1 260px;
}
.field-inline{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.field-block{
  display:grid;
  gap:4px;
  min-width:0;
}
.check-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.check-row.compact{
  gap:14px;
  line-height:1;
}
.check-row label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.panel-soft{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:10px;
}
.panel-muted{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#f8fafc;
  padding:10px;
}
.table-wrap{
  width:100%;
  overflow:auto;
}
.status-ok,
.badge.status-ok,
.pill.status-ok{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}
.status-warn,
.badge.status-warn,
.pill.status-warn{
  background:#fffbeb;
  border-color:#fde68a;
  color:#92400e;
}
.status-error,
.badge.status-error,
.pill.status-error{
  background:#fee2e2;
  border-color:#fecaca;
  color:#991b1b;
}
.status-info,
.badge.status-info,
.pill.status-info{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1e3a8a;
}
.status-muted,
.badge.status-muted,
.pill.status-muted{
  background:#f3f4f6;
  border-color:#d1d5db;
  color:#374151;
}
.status-accent,
.badge.status-accent,
.pill.status-accent{
  background:#f5f3ff;
  border-color:#ddd6fe;
  color:#5b21b6;
}
.btn-plain{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  color:var(--ink);
  padding:6px 10px;
  cursor:pointer;
}
.btn-plain:hover{
  background:#f8fafc;
}
.btn-tool-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #c7d2fe;
  border-radius:var(--radius);
  background:#eef2ff;
  color:#3730a3;
  padding:6px 10px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.btn-tool-info:hover{
  background:#e0e7ff;
  text-decoration:none;
}
.badge,
.pill{
  line-height:1.2;
}
.status-banner{
  min-height:28px;
  margin-top:10px;
}
.mt-4{margin-top:4px}
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mb-6{margin-bottom:6px}
.mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px}
.modal-wide{
  width:min(960px, calc(100vw - 40px));
  max-width:min(960px, calc(100vw - 40px));
  max-height:80vh;
  overflow:auto;
}
.modal-actions{
  justify-content:flex-end;
  margin-top:10px;
}
.cell-actions{
  text-align:right;
}
.pop-card.is-centered{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.pop-card.prompt-modal{
  width:min(900px, 60vw);
  max-width:92vw;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  padding:16px;
}
.prompt-form{
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:100%;
}
.prompt-form .pop-actions{
  justify-content:flex-end;
  margin-top:12px;
}
.prompt-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:calc(60vh - 120px);
}
.prompt-field textarea{
  flex:1;
  width:100%;
  height:100%;
  min-height:320px;
  resize:vertical;
}

@media (max-width:720px){
  .page-head,
  .jj-page-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .toolbar,
  .filter-row,
  .jj-toolbar,
  .field-inline{
    width:100%;
  }
  .toolbar > *,
  .filter-row > *,
  .jj-toolbar > *{
    max-width:100%;
  }
}