/* Gerado por split de app/static/css/estilo_ph3a.css (fundação da reorganização de CSS, 03/08/2026). Ver app/utils/css_manifest.py pra ordem de carregamento. */

/* ── Sticky action bar de cockpit (Contato/Negócio/Empresa/Ticket) ─────────
   Fica acima do tabbar quando user rola o cockpit longo no celular. Some
   automaticamente quando user foca em textarea/contenteditable (mesma flag
   `body.ph3a-editing` do FAB de suporte — JS listener em base.html cuida).
   Default: oculto em desktop e mobile web normal. Visível só em mobile +
   standalone (PWA instalado), mesma regra do tabbar. */
.ph3a-cockpit-actionbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;  /* abaixo do tabbar (1000) — sem cobrir */
  background: var(--ph3a-white);
  border-top: 1px solid var(--ph3a-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 6px;
  /* Mesma técnica do tabbar pra evitar bug de fixed em PWA iOS */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ph3a-cab-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: var(--ph3a-text);
}
.ph3a-cab-item i { font-size: 18px; line-height: 1; }
.ph3a-cab-item span { line-height: 1; }
.ph3a-cab-item:active { background:var(--ph3a-bg-alt); }
.ph3a-cab-item:focus-visible { outline: 2px solid var(--ph3a-primary); outline-offset: 2px; }
/* Cores por tipo de ação */
.ph3a-cab-sucesso   { color: #16a34a; }
.ph3a-cab-whatsapp  { color: #25d366; }
.ph3a-cab-info      { color: #2563eb; }
.ph3a-cab-primario  { color: var(--ph3a-primary); }
.ph3a-cab-perigo    { color: #dc2626; }
.ph3a-cab-neutro    { color: var(--ph3a-text-light); }

/* Mobile + standalone (PWA): action bar visível acima do tabbar.
   Conteúdo principal ganha padding-bottom extra pra não ficar atrás. */
@media (max-width: 991.98px) and (display-mode: standalone) {
  .ph3a-cockpit-actionbar { display: flex; align-items: stretch; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Cockpit recebe padding maior quando há action bar visível: 72 tabbar + 70 actionbar */
  body.ph3a-has-cockpit-actionbar .ph3a-main {
    padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* FAB de suporte sobe ainda mais (acima do actionbar) */
  body.ph3a-has-cockpit-actionbar #phBtnSuporte.ph3a-fab-suporte {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* iOS Safari "Add to Home Screen" antigo via classe injetada */
@media (max-width: 991.98px) {
  body.ph3a-pwa-standalone .ph3a-cockpit-actionbar { display: flex; align-items: stretch; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.ph3a-pwa-standalone.ph3a-has-cockpit-actionbar .ph3a-main {
    padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.ph3a-pwa-standalone.ph3a-has-cockpit-actionbar #phBtnSuporte.ph3a-fab-suporte {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Some quando user edita textarea/contenteditable — evita cobrir input.
   Reusa flag global body.ph3a-editing (listener focusin/focusout em base.html). */
body.ph3a-editing .ph3a-cockpit-actionbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity .15s, transform .15s;
}

/* ── FAB "+" mobile — criação rápida (Contato/Negócio/Tarefa) ──────────────
   Lado oposto ao FAB de suporte (esquerdo). Click expande menu vertical
   pra cima com 3 botões coloridos. Padrão Material Design.
   Default: oculto. Visível só em mobile + standalone (PWA). */
.ph3a-fab-novo-wrap {
  display: none;
  position: fixed;
  left: 20px;
  bottom: 35px;
  z-index: 990;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ph3a-fab-novo-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--ph3a-primary);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(239, 89, 41, .40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ph3a-fab-novo-toggle:focus-visible {
  outline: 3px solid var(--ph3a-accent);
  outline-offset: 2px;
}
.ph3a-fab-novo-wrap.is-open .ph3a-fab-novo-toggle {
  transform: rotate(45deg);  /* "+" vira "×" suavemente */
  box-shadow: 0 6px 20px rgba(239, 89, 41, .50);
}
.ph3a-fab-novo-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* Estado fechado: invisível e empurrado pra baixo */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ph3a-fab-novo-wrap.is-open .ph3a-fab-novo-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ph3a-fab-novo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--ph3a-white);
  color: var(--ph3a-text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
  border: 1px solid var(--ph3a-border);
  white-space: nowrap;
}
.ph3a-fab-novo-item:hover { color: var(--ph3a-text); text-decoration: none; }
.ph3a-fab-novo-item-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qa-bg, #f1f5f9);
  color: var(--qa-fg, #475569);
  font-size: 14px;
  flex-shrink: 0;
}

/* Mobile + standalone — FAB "+" visível. Posição vertical empilha sobre
   o tabbar (e sobre o action bar quando houver) usando body classes. */
@media (max-width: 991.98px) and (display-mode: standalone) {
  .ph3a-fab-novo-wrap { display: flex; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  body.ph3a-has-cockpit-actionbar .ph3a-fab-novo-wrap {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 991.98px) {
  body.ph3a-pwa-standalone .ph3a-fab-novo-wrap { display: flex; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  body.ph3a-pwa-standalone.ph3a-has-cockpit-actionbar .ph3a-fab-novo-wrap {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }
}
/* Some ao editar (mesma flag do FAB de suporte) */
body.ph3a-editing .ph3a-fab-novo-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}

/* ── Bulk action bar — seleção via checkbox em listas (Paulo 12/05/2026 #3)
   Aparece sticky no rodapé quando ≥1 item selecionado. Padrão UX
   Gmail/Inbox. Visível em DESKTOP + MOBILE (não tem gate mobile-only —
   admin que faz bulk no desktop também precisa). */
.ph3a-bulk-actionbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 80px);
  opacity: 0;
  pointer-events: none;
  z-index: 998;  /* abaixo do tabbar (1000) — sem cobrir tabbar PWA */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--ph3a-accent);  /* navy PH3A — alto contraste com a página */
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(5, 31, 78, .35);
  transition: transform .25s cubic-bezier(.2, .8, .25, 1), opacity .2s ease;
  max-width: calc(100% - 48px);
}
.ph3a-bulk-actionbar.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.ph3a-bulk-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.ph3a-bulk-info i { color: #fb923c; font-size: 16px; }
.ph3a-bulk-info strong { font-size: 16px; }
.ph3a-bulk-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph3a-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ph3a-bulk-btn-primary { background: var(--ph3a-primary); color: #fff; }
.ph3a-bulk-btn-primary:hover { background: var(--ph3a-primary-dark); color: #fff; }
.ph3a-bulk-btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .25);
}
.ph3a-bulk-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ph3a-bulk-btn:active { transform: translateY(1px); }

/* Mobile (≤600px) — bar full-width, mais compacta */
@media (max-width: 600px) {
  .ph3a-bulk-actionbar {
    left: 8px;
    right: 8px;
    bottom: 16px;
    transform: translateY(80px);
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .ph3a-bulk-actionbar.is-open { transform: translateY(0); }
  .ph3a-bulk-acoes { justify-content: space-between; }
  .ph3a-bulk-btn { flex: 1; justify-content: center; }
}
/* Mobile + PWA standalone: sobe acima do tabbar */
@media (max-width: 991.98px) and (display-mode: standalone) {
  .ph3a-bulk-actionbar { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 991.98px) {
  body.ph3a-pwa-standalone .ph3a-bulk-actionbar { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Quick edit inline (Paulo 12/05/2026 #4) — select estilizado como
   badge clicável que abre dropdown nativo do browser. Padrão
   Airtable/Notion. Aplicado no Estágio do Negócio na lista. */
.ph3a-qe-badge.ph3a-qe-estagio {
  /* Reset do <select> nativo + estilizar como badge */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 22px 4px 8px;
  border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23475569' d='M4 6L0 2h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 7px;
  max-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.ph3a-qe-badge.ph3a-qe-estagio:hover {
  border-color: rgba(0, 0, 0, .12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.ph3a-qe-badge.ph3a-qe-estagio:focus,
.ph3a-qe-badge.ph3a-qe-estagio:focus-visible {
  outline: 2px solid var(--ph3a-primary);
  outline-offset: 1px;
}
/* Estados visuais durante AJAX */
.ph3a-qe-badge.is-saving {
  opacity: .65;
  pointer-events: none;
}
.ph3a-qe-badge.is-saved {
  outline: 2px solid #16a34a;
  outline-offset: 1px;
}
.ph3a-qe-badge.is-error {
  outline: 2px solid #dc2626;
  outline-offset: 1px;
}